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