Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

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

Sizing & Layout

  • Set height to a fixed px value for consistent editing space (e.g., 400px) or a percentage for flexible layouts (e.g., 100% within its container).
  • Choose theme (Dark or Light) to maintain comfortable contrast in the expected environment; prefer the option that meets contrast needs of surrounding UI.

States & Feedback

  • Use readonly to present code without allowing edits.
  • Use authorizationDisable to disable editing based on policy while keeping the control present.
  • Toggle hidden to remove the control from view when not applicable.

Data-Driven / Conditional Behavior

  • Constrain content shape with validation.pattern (regex) and size with minLength/maxLength; require presence with required.
  • Preserve draft stability across sessions with saveInLocalStorage.

Content & Localization

  • Provide clear starter content with defaultValue that matches defaultLanguage.
  • Prefer language-neutral examples in defaultValue, since the component exposes no text translation settings.

Dos & Don’ts

DoDon’tArticle setting(s)
Set defaultLanguage to the expected syntax so highlighting is stable.Rely solely on auto-detection and accept mismatched highlighting.defaultLanguage
Pre-fill a minimal valid template.Start empty when strict formatting is required.defaultValue
Persist drafts between sessions.Risk data loss on reloads.saveInLocalStorage
Enforce rules with validation.Depend on user memory for format rules.validation.required, validation.minLength, validation.maxLength, validation.pattern
Disable edits for review or policy.Leave the editor editable when changes aren’t allowed.readonly, authorizationDisable
Give users enough vertical space to work.Force excessive scrolling with a tiny viewport.height
Choose a theme for readable contrast.Switch themes arbitrarily mid-task.theme

Accessibility

  • Ensure readable presentation by selecting an appropriate theme and sufficient edit area with height.
  • Prevent non-functional interaction by using readonly for view-only scenarios and authorizationDisable when policy blocks editing.
  • Reduce error burden with built-in validation so incorrect content is caught by the control before submission.
  • Use defaultValue that demonstrates valid structure matching defaultLanguage to assist comprehension for screen-reader and keyboard users.