Description

Lunar Editor is a web online editor designed to help developers create, store, and update Outerbase plugins quickly and efficiently. With this editor, developers can have an instantaneous working space for creating Outerbase plugins with instant feedback. Lunar's table view allows users to create and replicate their desired table structure and generate mock data for it; while the debug view gives feedback on what components are missing for any type of plugin (column or table). Using Outerbase's own managed database and commands, this editor also allows persistent cloud storage for each created plugin.

Demo

Outerbase

Outerbase is an advanced cloud-based database interface designed to optimize collaboration and productivity within organizations. It boasts EZQL (pronounced Ezekiel), an AI that effectively translates your natural language queries into database queries. Outerbase supports real-time collaboration, facilitates workflow automation, and offers robust data visualization capabilities.

Outerbase currently supports PostgreSQL and MySQL database connections as well as its own managed SQLite database, which this editor has utilized.

Importantly, Outerbase also supports plugins. Plugins allow you to extend your database experience by providing new views and integrations.

Plugins

To better explain what Lunar Editor does, I will expand on what plugins are in the context of Outerbase. Fundamentally, Outerbase plugins replace how your data is visualized, i.e. your tables. There are currently two types of plugins, column and table, which respectively replace your table's columns and database's tables.

The way Outerbase does this is by using web components, which are user-defined custom elements made using JavaScript. This is what allows developers to be able to freely visualize and customize how their data looks and behaves by writing their own JavaScript.

To make it even clearer, whenever you install a plugin, the table (or column) on which it is installed gets its own <iframe>, which acts as another webpage. Your plugin code gets injected into this webpage. Outerbase expects you to define one or more web components or custom elements for each plugin, but beyond that you are free to do to those components whatever you want or at least what's possible in JavaScript.

Outerbase Commands

I also want to mention Outerbase commands. An Outerbase command is a sequence of nodes, which are blocks of code (Outerbase currently supports JavaScript, Python, and SQL), on top of your database. Commands get triggered by hitting a particular endpoint generated by Outerbase.

Since SQL nodes in commands have access to your database, Outerbase can effectively act as your entire backend. You can have your database for your data and commands to interact with your data. Outerbase is still in beta, so some features are still on the way. At the time of this writing, commands are en route to allow for external code libraries, which I plan to take advantage of for authentication (will mention this later.)

The Editor

In this section, I will go in-depth on the development of this editor and its features.

Top Panel

On the top part of the main editor page, you'll see settings and quality-of-life features for your plugin development. Here, you'll be able to change your plugin name, generate plugin templates, copy plugin code into your clipboard, and switch between plugin types (column and table). You will also be able to save your code into the cloud here.

Editor Panel

The main feature of Lunar Editor is, of course, its editor, which sits on the left side. This editor was built using Monaco Editor, which was the foundation of VS Code. This should give most developers some familiarity. Importantly it also features code highlighting and IntelliSense.

This is where you'll be developing all of your code which you will be uploading to Outerbase. I've made huge efforts to make sure you will not need to make any alterations from the editor code to the code that you will copy into Outerbase's setup form.

View Panel

Right to the right of this editor is the view panel. It consists of a few "views" depending on what type of plugin you're developing. Controlled by tabs, the right view panel can display the following: "Table View", "Plugin View", and "Debug View".

Table View

Generally, this should be the first view you interact with. The Table View is where you create your table structure. Here you will be able to define your table name, what type of data each column will have, and how many rows it will consist of.

I've made a bunch of column data types available so you can generate any type of data you want, including Bitcoin addresses, full names, and phone numbers.

Once you have defined your structure and columns, the Table View will automatically generate your mock table data according to your configurations.

Plugin View

The Plugin View is where you'll receive instant feedback for your plugin code in the editor. I've dedicated development to making sure what you see in the plugin view will be what you see in Outerbase. Since Outerbase is still in beta, this will likely change in the future and need some adjustments. Outerbase is constantly getting updated, and the plugin view will need to catch up with it.

In this view, if you've defined it, the configuration view will pop out first. Allowing you to insert your configuration variables to use in the plugin component.

Once you're done with any configuration, the plugin itself will be displayed. This preview will also listen for "custom-change" events and act accordingly, just like the real deal!

I've tested this Plugin View by entering the major plugin code examples Outerbase has kindly provided us and made sure they produce the same results.

Debug View

The Debug View is a quality-of-life feature that I decided to include. In this view you will receive specific feedback on your code depending on what type of plugin you're developing. It will list all the mandatory and optional components for a particular type of plugin and give recommended actions if it encounters any missing.

Cloud Storage for Plugins

As this is an online replacement for a local editor, I needed a way to replicate the persistence of local development. I didn't want the application to solely be a plugin editor. It'd be frustrating to carefully develop a plugin, deploy it to Outerbase, and realize you missed something, only to realize your entire progress has been sent into the void.

To me, that trade-off would sway me away from an online editor replacement, even with all the additional features it would provide. Luckily, the platform I'm developing this editor for already has all I need: A database and a way to interact with it (commands).

For this, I created a managed SQLite database instance, which Outerbase provides for free. I then created the necessary commands to get, save, and update plugins to and from the database.

After the commands are created, the editor can now interact with the database to provide persistence for the plugins. Users can get a list of their saved plugins and also update them anytime.

Once a user clicks on any particular saved plugin, they will be redirected to the editor, which will get filled with the saved code. If there are any changes, you will be able to update it.

Authentication & Authorization

Since cloud storage is involved, this application needed authentication and authorization to both limit who can upload to the cloud and to make sure only owners of plugins can edit their code.

As of this writing, Outerbase has command endpoint security high on their list. So, for now, I will have to use third-party solutions. Luckily, there are plenty for me to choose from.

For this project, I chose to use Clerk. It's very easy to implement and barely needs any extra setup and code, allowing me to focus on my editor and its features. Clerk provides user management and authentication. Each user has an id, which I will use to link plugins and their owners. Only logged-in users will be able to upload to cloud storage, but everyone will be able to use the editor.

Verifying Authentication Tokens in Commands

As mentioned, external libraries are currently on the list of upcoming features, so right now, verification of identity is simply done by comparing user id from Cerk to the corresponding column in the table for plugins to identify ownership of plugins.

Once external libraries are available, I think commands will be very powerful. Their modular nature will make for perfect middleware, especially since you can return values from one node to the next. I plan to create a node that acts as a middleware for verifying tokens for Clerk.

It would be something like this:

import jwt from "jsonwebtoken";
function userCode(){
    const token = '{{request.headers.Authorization}}'.split(" ")[1];
    if (token) {
        decoded = jwt.verify(token, publicKey);
        return {
            user: decoded.user
        }
    } else {
        decoded = jwt.verify(sessToken, publicKey);
        return {
            user: null
        };
    }
}

Project Links

Here are some links for the public repository of Lunar Editor and its live URL:

• Public Repository

• Live Editor

Conclusion

I'd like to end this by thanking Hashnode and Outerbase for hosting this event. I have learned a lot of new things, like making a web editor and implementing resizable panels. Overall, it was just a lot of fun discovering new technologies.