Code Editor widget

A versatile text and code editor that you can embed in your app.

In-ports

data Object,String — The object or string representing a text to be displayed by the widget.

Out-ports

output Object — The object with formatted text.

Overview

The Code Editor widget is a versatile text and code editor. It supports a number of language modes with syntax formatting, validation, and highlighting. It's based on Ace editor — a popular open-source code editor.

Note that the output port emits an object each time you make a change to the text in the widget. To reduce the frequency of the output events use the Debounce or Throttle components.

Data object

Input on the data port can be either a string or an object passing string along with other properties. A correctly formatted object will be rendered immediately and will overwrite the current editor contents. The object properties are listed below.

Property	Description
data	The text to be displayed in the editor. The value should be a string enclosed in double quotes.
fileId	The unique file identifier. If the property is not specified, it will be generated automatically on the output.
contentType	The content type to instruct the editor which language mode to use. It assumes one of the following values: application/json application/json text/plain text/markdown text/xml text/html application/javascript text/sql text/yaml text/groovy application/x-kelpql If the property is not specified, the editor will use application/json.

Example

The following example will switch Code Editor into an SQL editing mode and the widget will display SELECT column1 FROM table2; string.

{
    "data": "SELECT column1 FROM table2;",
    "contentType": "text/sql"
}

Output object

The output object properties are listed below.

Property	Description
data	The editor contents as a formatted text.
file	The unique file identifier.
contentType	The type specifying the language mode.

Example

As you edit code in the widget, the output port emits an object like the following:

{
    "data": "SELECT column1 FROM table2 WHERE column1='value';",
    "fileId": "5ac3dea0-1612-ca07-361c-a24554bb2e9f",
    "contentType": "text/sql"
}

Settings

Title

The widget’s title.

Hide progress bar

Controls the visibility of the widget’s progress bar. By default, the progress bar is visible.

Language mode

The mode for language syntax highlighting. Select one of the following: JSON, Text, Markdown, XML, HTML, Javascript, SQL, YAML, Groovy, KelpQL.

Mask

Specify properties that you want to hide in the editor. Applicable for JSON objects only.

Error messages settings

Specify custom error messages to display inside the widget. You can set a message for each error code.