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

Code editor

The Code Editor Component is a specialized form control that provides a powerful code editing experience within forms. It offers syntax highlighting, language detection, and a modern editor interface for working with various code formats like JSON, YAML, and plain text. This component is ideal for configuration interfaces, API testing tools, template editors, or any scenario requiring user input of structured text or code snippets.

Properties

Visual Properties

• height - Sets the height of the code editor in pixels or percentage. For example, setting to "400px" creates a fixed-height editor that provides adequate space for code viewing and editing, while "100%" makes it fill its container, adapting to the available space.

• theme - Determines the visual appearance of the code editor with options for "Dark" or "Light" themes. For example, setting to "upw-theme-dark" provides a dark background with light text, which reduces eye strain during extended coding sessions, 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" will apply JSON syntax highlighting to help users more easily identify structure and syntax errors in JSON data.

• 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 based on other field values or application states.

• saveInLocalStorage - Determines whether the editor's content is preserved in local storage between sessions. When enabled, user input persists between page reloads, improving user experience for complex editing tasks that may take time to complete.

• defaultValue - Sets the initial code content that will be used when the form is reset or first displayed. For example, setting to { "example": "value" } would pre-populate the editor with this JSON structure to provide users with a starting template.

• 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.

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.

Validation Properties

• 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 Properties

• 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.

Event Actions

• 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 to perform immediate actions based on code changes, such as validation or preview updates.
  • ON_INIT: Triggered when the code editor component is initialized. Can be used to perform setup operations or initial state calculations.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.