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

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 rows and a fixed line height so the control stays stable in modal layouts.
• Vanilla plugins can import @verbb/plugin-kit-web/components/code-editor.js and listen for pk-change events.
• 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

API

Props

Name	Description
customError	Custom validation message; also settable via setCustomValidity(). Type string | null Default null
defaultValue	Type string | null
disabled	Disables the control and excludes it from constraint validation. Type boolean Default false
invalid	Type boolean Default false
isInvalid	Alias for invalid.
language	Type CodeEditorLanguage Default html
lineNumbers	Type boolean Default true
name	Name submitted with form data. Type string | null Default null
readonly	Type boolean Default false
readOnly	Alias for readonly.
required	Marks the control as required for form submission. Type boolean Default false
rows	Type number Default 12
tabSize	Type number Default 4

Methods

Name	Description
checkValidity()	Runs constraint validation without showing the browser UI.
reportValidity()	Runs constraint validation and shows the browser UI when invalid.
resetValidity()	Clears custom errors and re-syncs validity state.
setCustomValidity(message: string)	Sets or clears a custom validation message.

Events

Name	Description
@blur	—
@change	—
@input	—
@pk-change	—

Custom States

Name	Description	CSS selector
disabled	The control is disabled.	:state(disabled)
invalid	The control currently fails constraint validation.	:state(invalid)
optional	The control is not required.	:state(optional)
required	The control is required.	:state(required)
user-invalid	Invalid after the user has interacted with the control.	:state(user-invalid)
user-valid	Valid after the user has interacted with the control.	:state(user-valid)
valid	The control currently passes constraint validation.	:state(valid)