Code Editor

Monaco-style code editor surface: language, theme, minimap, programmatic get/setValue.

HTML tag: c-ea7d7db8e932d4d23bf064a66faff97d7

When to use

• syntax-highlighted code editing
• scripts JSON SQL in a panel
• embedded editor not a full form field row

Props

Prop	Type	Default	Description
language	string	javascript
readonly	boolean	false
theme	string
value	string
minimap	boolean	false
font_size	string	16
word_wrap	boolean	true
placeholder	string	“
content_changed	boolean	false

Rules

• Bind .value; listen change (content) and blur.
• language prop sets syntax (default javascript).
• Use getValue/setValue/insertValue methods for imperative updates.
• In labeled forms use ab-code-editor-field (adds label, helpers, value-changed).

Events

Event	Detail
change
blur

Methods

Signature	Description
getFile()
getCode()
getLang()
getTheme()
isDark()
setValue(value: string)
getValue()
setReadOnly(value: any)
setOptions(value: any)
insertValue(value: string)
resizeFont(size: any)

What to avoid

Do not use ab-textarea for multi-line code with syntax highlighting. Do not use ab-html-editor for source code. Field wrapper is usually better in entity forms.

Example

<c-ea7d7db8e932d4d23bf064a66faff97d7 .language=${'json'} .value=${script} .readonly=${false} @change=${onCodeChange}></c-ea7d7db8e932d4d23bf064a66faff97d7>