This module contains two helper functions that you can use to create
standard user interface for your custom language plugins. Those functions
The typical way of using those functions is to call them from the
render operation of your implementation of the
The function creates a Monaco code editor. If the language is one of the languages
understood by Monaco, it will automatically use correct syntax highlighting.
You will typically call this function from the
render operation of your
Editor implementation. This happens each
time any event is triggered, but
createMonacoEditor uses Maquette in a way that
does not re-create the editor each time rendering occurs.
The name of a programming language that Monaco should use for syntax highlighting.
Current source code. This is only used when the editor is created for the first time, so you do not need to worry about updating current source code after each keystroke (only after each rebinding).
Code block that owns the editor. This is mainly used to get unique
ID of the block and avoid re-creating editor on each
Context passed to the
render operation. The editor uses this to
trigger rebinding and evaluation when user hits
Shift+Enter in the editor.
The function creates a preview displaying the outputs of a given code block.
It supports all of the
using this function, you need to keep the index of selected tab as part of your
editor state and you also need to define an event to modify the selected tab
Specifies the code block for which we ware generating preview
This function is called whenever the user clicks on a different tab. It should trigger an event that updates the selected tab in your editor state.
Index of a currently selected tab. The first tab has index
0, so if you only ever export a single tab, you can set this to
The value to display. You can typically obtain it by
<Values.ExportsValue>block.code.value, but make sure this is not
Generated using TypeDoc