Code Editor
CodeEditor provides a monospace code surface for HTML or plain text, built on CodeMirror 6 via @verbb/plugin-kit-codemirror-core (shared with the <pk-code-editor> web component). Use it when a schema field or settings screen needs syntax-aware editing with line numbers, tab sizing, and validation styling — without pulling in a full IDE.
Basic Usage
Keep the editor controlled so value changes stay in sync with the surrounding form.
Longer HTML
HTML mode works well for notification templates, partials, and other multi-line markup.
Other Languages
Use the language prop for JavaScript, CSS, JSON, or plain text highlighting.
Layout Options
Use rows for minimum height, tabSize for tab character width and indent unit, and lineNumbers to toggle the gutter.
Validation and Read-only
Use isInvalid for field-level error styling. Use readOnly or disabled when the markup should be visible but not editable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Current editor content. |
onChange | (value: string) => void | — | Called when the document changes. |
language | 'html' | 'text' | 'javascript' | 'css' | 'json' | 'html' | Enables syntax support for the selected language. |
rows | number | 12 | Minimum visible row count used to calculate editor height. |
tabSize | number | 4 | Tab character width and indent unit (Tab key / auto-indent). Existing space indentation is unchanged. |
lineNumbers | boolean | true | Shows the line-number gutter. |
isInvalid | boolean | false | Applies error border styling. |
disabled | boolean | false | Prevents editing and lowers opacity. |
readOnly | boolean | false | Prevents editing while keeping full opacity. |
className | string | — | Optional wrapper class name. |
Implementation notes
- HTML mode enables
@codemirror/lang-html, bracket matching, and close-brackets support. - Text mode omits HTML language extensions for generic monospace editing.
- The wrapper exposes
data-slot="code-editor"for styling hooks in host apps. - Min height is derived from
rowsand a fixed line height so the control stays stable in modal layouts. - Vanilla plugins can import
@verbb/plugin-kit-web/components/code-editor.jsand listen forpk-changeevents. - Web component attributes:
rows,tab-size,line-numbers,language,invalid,readonly,disabled.
Related
- Schema field wrapper: CodeEditorField
- Rich text editing: TiptapEditor
- Read-only rich text output: TiptapContent