Editor Design

Modern IDEs are amazing. When working with a language without modern support, the experience can feel painful no matter how good the language is.

The Trilogy Studio IDE isn't there yet, but we've made some progress. For those interested, here are some of the learnings so far.

Editor Selection

Good read here. We currently use Monaco due to familiarity, but almost certainly need to move mobile support to CodeMirror in the near future. The general statements about Monaco not working well on mobile and having poor documentation resonate, but when it works it's a really fantastic experience with a lot offered out of the box.

Parsing

In the online studio, we attempt to run syntactic parsing of an editor on key events - pressing a button, query submission, saving, etc. We'd ideally be able to run this on every keystroke, and in VS-Code - where we use the LSP interface - we can do this. The online editor relies on a hosted backend service and we try to minimize traffic to some degree.

We can/should probably just debounce and run it whenever the user finishes typing; syntax validation is cheap.

The goal of syntactic parsing is to expose information in the editor (such as syntax errors) and generate a list of auto-complete tokens to feed to Monaco. The latter is especially important because we can reuse this same information/context for LLM integrations.

It's quite common for a user to have errors, in which case we need this process to fall back gracefully. The current approach relies on the fact that Trilogy is semicolon delimited; we'll parse until we get to an error, then backtrack to the previous statement and attempt to get tokens to that point, etc. The originaly error is still stored and passed back for highlighting purposes.

Code Highlighting

In Monaco, we use very basic code highlighting. The biggest learning curve around Monaco highlighting was the consumption rules; the fact that fully consumption of one rule would result in a linestart matching for another rule on the next words was a pain. Figuring out the @afterDot notation for linking rules was very helpful. - ex [/([a-zA-Z0-9\_\.]+)\./, { token: 'property', next: '@afterDot' }],

Code Completion

The other learning curve was around triggering auto-complete. Monaco will only show when the suggestions match the consumed code prefix, which can be a little hard to debug. Programattic triggering is also somewhat unreliable. This is something we need to fix; right now it's very hard for a user to understand when/why they get symbolic completon.