Provides a set of code editors for Quartal Hub. These editors are typically used as embedded in Quartal Hub user interfaces as well as external UIs that utilize Quartal Hub components.
All the code editors are available through qrtl-editor component. The component is a custom element.
As such it can be used in any HTML page and in any framework.
type - Type of the editor to show. Can be monaco, monaco-react, expression, function, class, project, excalidraw.
view - Optional view style for editors (for example, expression
editor plain or excel).
read-only - If present, editor is read-only.
lang - Language of the code to show in the editor. Used together
with code in single-file usecases.
code - Code to show in the editor. Used in simple single-file
usecases.
url - URL of the code to show in the editor. Alternative
to code. URL must support anonymous access.
data - Full data to pass to the editor. Used in complex usecases.
Each editor type defines its own data structure as an interface.
change - Event that is triggered when the code changes.
There is a separate component qrtl-editor-url that can be used to load code from a URL.
This is useful for loading code from a remote source, such as a GitHub repository.
The component has the following attributes:
url - URL of the code to show in the editor.type - Type of the editor to show. See above for possible values.lang - Optional possibility to force the language of the code to show in the editor.
Typically, the language is detected automatically from the URL.
view - Optional view style for editors.editable - If present, editor is editable. Default is read-only.
The qrtl-editor component is essentially just an iframe that loads the code editor.
As such, you can also access the editors directly as pages: