Widget: Monaco Code Editor

Hi everyone,

I’ve built some more custom widgets. This time: the Monaco code editor!

Yes, we already have that, in @berhalak’s excellent widget builder. However, what if you needed just an editor to type in, without having to go to widget config, click “HTML” or “JS” tab, clicking “preview” after any edit, and all that fuss? What if you needed to support not just Javascript and HTML but also Grist’s secret weapon of world domination, aka Python? Then look no further. This widget provides:

  • Saving code to a Grist table or, which is rather much more fascinating, …
  • … directly to a column formula!
  • Syntax highlighting for HTML, CSS, Javascript, python, and probably quite a few more (I haven’t really bothered to check just how many are built into Monaco)
  • Adjustable font, font size, tab size, word wrap
  • Code folding, toggleable auto-indent
  • Code minimap
  • Autosave
  • Saving editor state (last cursor position, code folding state, …)
  • …and any other Monaco options you can think of, because you can just input them as JSON if needed.

Take a look:

This editor pairs very well with the Playground Widget.

Have fun! :smiley:

3 Likes

Hi! Great plugin! Formula & even Trigger formula editing capacity is very nifty!

Is it normal that it does not auto-refresh upon cell value (Widget>Content) change, only on record selection change (Data>Select By) ?

Hi @raph-topo, yes this is actually a limitation right now. I’m kind of working on a better version that would include this feature, too, but my time, alas, is currently very limited…