Preview

Usage

<cs-code-editor
  language="javascript"
  value="function greet(name) { return `Hello, ${name}!`; }"
></cs-code-editor>

<!-- Read-only mode -->
<cs-code-editor
  language="json"
  value='{ "key": "value" }'
  read-only
></cs-code-editor>

Properties

aceanyrequired

The ace object.

aria-labelstring default: null

Adds aria-label to the code editor's textarea element.

editor-content-heightnumber default: 480

Specifies the height of the code editor document.

get-modal-rootPortalProps['getContainer']

Use this property to specify a different dynamic modal root for the dialog. The function will be called when a user clicks on the trigger button.

i18n-stringsCodeEditorProps.I18nStrings

An object containing all the necessary localized strings required by the component. The object should contain, among others:

• loadingState - Specifies the text to display while the component is loading.
• errorState - Specifies the text to display if there is an error loading Ace.
• errorStateRecovery: Specifies the text for the recovery button that's displayed next to the error text. Use the recoveryClick event to do a recovery action (for example, retrying the request).

languageCodeEditorProps.Languagerequired

Specifies the programming language. You can use any of the programming languages supported by the ace object that you provide. Alternatively, this can be used to set a language that is not supported by the default language list. Make sure you've added the highlighting support for this language to the Ace instance. For more info on custom languages, see the Code editor API page.

language-labelstring

Specifies a custom label language. If set, it overrides the default language label.

loadingboolean default: false

Renders the code editor in a loading state.

preferencesPartial<CodeEditorProps.Preferences>

Specifies the component preferences.

If set to undefined, the component uses the following default value:

{
  wrapLines: true,
  theme: 'dawn'
}

You can use any theme provided by Ace.

remove-modal-rootPortalProps['removeContainer']

Use this property when getModalRoot is used to clean up the modal root element after a user closes the dialog. The function receives the return value of the most recent getModalRoot call as an argument.

themesCodeEditorProps.AvailableThemes

List of Ace themes available for selection in preferences dialog. Make sure you include at least one light and at least one dark theme. If not set explicitly, it will render all Ace themes available for selection, except "cloud_editor" and "cloud_editor_dark".

valuestringrequired

Specifies the content that's displayed in the code editor.

Events

changeCustomEvent<CodeEditorProps.ChangeDetail>

An event handler called when the value changes. The event detail contains the current value of the code editor content. Deprecated Replaced by onDelayedChange.

delayedChangeCustomEvent<CodeEditorProps.ChangeDetail>

An event handler called when the value changes. The event detail contains the current value of the code editor content. A user interaction can cause multiple change events to be emitted by the Ace editor. They are batched together into a single onDelayedChange event to avoid bugs when controlling the value field.

editorContentResizeCustomEvent<CodeEditorProps.ResizeDetail>

Called when the user resizes the editor by dragging the resize icon. The event detail contains the new height of the editor in pixels.

preferencesChangeCustomEvent<CodeEditorProps.Preferences>

Called when any of the preferences change. The event detail contains the value of all the preferences as submitted by the user.

recoveryClickCustomEvent<void>

Called when the user clicks the recovery button in the error state. Use this to retry loading the code editor or to provide another option for the user to recover from the error.

validateCustomEvent<CodeEditorProps.ValidateDetail>

Annotations returned from Ace syntax checker after code validation.