Editor #

Any language that is code would need a beautiful editor to be written on. And the editor should be able to:

• ✨ Highlight the syntax
• ✅ Auto complete the syntax
• ❌ Show the syntax error at lines and columns

We use Codemirror 6 to build the editor. It is a very powerful editor that can be extended to support any language. It is also very easy to use.

But in our case, this is a brand new language and we need to build the syntax highlighter, auto complete and syntax error checker ourselves.

Syntax Highlighter #

coming soon

Auto Complete #

We use @codemirror/autocomplete to define a set of keyword and definitions for auto complete.

The code is located at packages/editor/src/extensions/autocomplete.ts

Syntax Error Checker #

Error Checker or as known as Linter is a very important part of the editor. It helps the user to find the syntax error and fix it, @codemirror/lint is used for this.

We use our own FORMKL Parser to parse the syntax, it would be the correct syntax if it's parsed successfully. Otherwise, the parser will throw a syntax error.

The code is located at packages/editor/src/extensions/lint.ts.