Page History

...

• 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

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

...