(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Code Editor

Overview

• The Code Editor Component is a specialized form control for code editing.
• It provides syntax highlighting, language detection, and a modern editor interface.
• It supports code formats like JSON, YAML, plain text, and Nginx configuration.
• It helps users input structured text or code snippets inside forms.

Specs

Tokens

Structure

• The Code Editor is a form control embedded within forms.
• It displays a text editing area with syntax highlighting and language detection.

(Configured in Non-Visual Properties)

• dataField – Defines the field name that will be used when submitting form data. For example, setting to "configurationJson" ensures the code content is submitted with this field name in the data object.
• controlsRequestType – Specifies how the field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the code content in the request body, which is standard for most form submissions involving complex data.

(Configured in Visual Properties)

• saveInLocalStorage – Determines whether the editor's content is preserved in local storage between sessions. When enabled, input persists between page reloads.

Styling

(Configured in Visual Properties)

• height – Sets the height of the code editor in pixels or percentage. For example, setting to "400px" creates a fixed-height editor, while "100%" makes it fill its container.
• theme – Determines the visual appearance of the code editor with options for "Dark" or "Light" themes. For example, "upw-theme-dark" provides a dark background with light text, while "upw-theme-light" offers better visibility in well-lit environments.
• defaultLanguage – Sets the default syntax highlighting language when automatic detection fails. Options include plain text, JSON, YAML, and Nginx configuration formats. For example, setting to "json" applies JSON syntax highlighting.
• defaultValue – Sets the initial code content used when the form is reset or first displayed. For example, { "example": "value" } pre-populates the editor.

Actions & Variants

(Configured in Visual Properties)

• hidden – Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional rendering.
• readonly – Controls whether the code can be edited by users. When set to true, the editor displays the code but prohibits modifications, which is useful for code display or review scenarios where changes should not be permitted.

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_VALUE_CHANGE – Triggered when the content of the code editor is modified. Can be used for immediate actions like validation or preview updates.
• ON_INIT – Triggered when the code editor is initialized. Can be used for setup operations or initial state calculations.
• ON_DESTROY – Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Validation

(Configured in Validation)

• validation – Configures validation rules for the code editor, including:
• required – When set to true, code content must be provided before the form can be submitted.
• email – Validates content as an email address (rarely used for code editors).
• maxLength – Limits the maximum number of characters allowed in the editor.
• minLength – Requires a minimum number of characters in the editor.
• pattern – Allows validation of the content against a regular expression pattern, which can be useful for enforcing specific syntax rules or formatting.

Authorization

(Configured in Authorization)

• authorizationDisable – Specifies a policy set that determines when the component should be disabled based on user permissions. For example, setting to "readOnlyPolicy" will disable the code editor for users who don’t have edit permissions according to the specified policy.

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]