In my 2nd week at Outerbase, I was tasked with building a SQL editor with syntax highlighting based on schema/table/column, autocomplete, and the ability to click on a schema/table/column and open a dropdown. I completed the bulk of this in a complete weeks, and here’s how I implemented it.

For the rich text editor, I chose Lexical, an open source rich text editor library created by Facebook - basically the “React” of rich text editors. I knew Lexical was the right tool because I’d used it for my Notion clone yume.fyi after initially trying to roll my own contenteditable editor from scratch.

Contenteditable is an absolute nightmare to work with for anything beyond a trivial level of complexity. Some issues include:

• Can’t select empty contenteditable (eg. an empty bold tag upon markdown transformation). There’s a hack where you can insert a zero-width ASCII character, but then you need to manually keep track of cursor changes to make it feel natural.
• Updating contenteditable resets cursor position
• Can't control what new element contenteditable will append (eg. can get stuck with code element)

Lexical is the most robust rich text editor library out there and is extensible, supporting custom nodes and plugins. The downside is that it’s not well documented and still relatively new so may be breaking changes. Fortunately there is a very useful demo called the Lexical Playground that has a ton of functionality like code blocks with syntax highlighting and autocomplete (type “@”). Also Lexical’s Discord channel is active, and I was quickly able to get help on any questions I had.

If you don’t need any fancy features, then a library like TipTap is probably a better choice as it’s easier to use. But if you want more customizability, Lexical is the best library I’ve found.

Building the editor

There were a few things that needed to be done:

1. Modify Lexical to only be a code editor
2. Autocomplete
3. Syntax highlighting on schema/table/column
4. Dropdowns on schema/table/column

Modify Lexical to only be a code editor

You must make these modifications to make the default Lexical Editor only be the code editor

• collapseAtStart() in CodeNode.tsx should return false
• Override insertNewAfter in CodeNode.tsx to return null