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

Code Editor

Linkt to Figma: tba

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.

...

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

Links

Figma: tba Live style guide: tba

Guidelines

Usage

• Set defaultLanguage to the expected syntax so highlighting is predictable when automatic detection fails (e.g., json, yaml, nginx, plaintext).
• Seed helpful starter content with defaultValue (e.g., a minimal valid JSON object) to reduce user errors.
• Enforce input rules with validation (use required, minLength, maxLength, and pattern for syntax/shape checks).

...