# `lr-code-editor` - **Import** `import '@aceshooting/lyra-ui/components/lr-code-editor.js';` (stable tag alias; registers the tag) - **Class** `LyraCodeEditor`, also available unregistered from `@aceshooting/lyra-ui/components/forms/code-editor/code-editor.class.js` - **Family** `components/forms/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 8 parts, 14 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-code-editor` Long translated form chrome wraps within the host, while long source stays reachable through the editor's internal scroll extent instead of widening the page. The `Narrow RTL long content (320px)` story covers both boundaries together. `form.reset()` restores the default value and pristine interaction feedback. Required and custom validity constraints remain; a required-empty editor is still invalid. Removing `label`, `hint`, or `error-text` treats the removed value as absent for rendering while retaining native attribute-removal property readback. Host `aria-describedby` references resolve in the host root onto the native textarea before its local error/hint guidance. Target replacement, removal, reinsertion, unresolved IDs, reconnect, and adoption keep that relationship current. Dependency-free, form-associated multiline code editor built around a native textarea, with an optional line-number gutter. No syntax highlighting: `language` is metadata only. **Properties:** - `language: string = ''` — reflected on the host and projected onto the `editor` part as `data-language`; purely a consumer-reachable styling/metadata hook, nothing tokenizes the text - `lineNumbers: boolean = true` (attribute `line-numbers`, reflected) — renders the `gutter` part, one row per `\n`-separated line - `tabSize: number = 2` (attribute `tab-size`) — spaces inserted per Tab press and the tab width shared by the native textarea and text measurement. Explicit property/attribute assignment wins over `--lr-code-editor-tab-size`; otherwise the token controls the rendered tab width. Sanitized on assignment to a finite integer clamped to `1..16`, so a `NaN`/`Infinity` value can neither empty the insert nor throw out of `String.repeat()`. - `label: string = ''`, `hint: string = ''`, `errorText: string = ''` (attribute `error-text`), `placeholder: string = ''` - `readonly: boolean = false` (reflected) — also disables Tab indentation - `rows: number = 4`, `cols: number = 20`, `minlength?: number`, `maxlength?: number` — native textarea geometry and code-unit length constraints. Programmatic/restored values receive the same supplemental length validity as user edits. - `resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto' = 'both'` — written as the textarea's inline `resize`; `auto` grows the owned surface to its content without a manual drag handle. A consumer `max-block-size` on the `textarea` part caps that growth and restores vertical scrolling; changing away from `auto` clears its inline block-size and overflow state. An invalid runtime value falls back to `'both'` - `size: LyraSize = 'm'` (reflected) — visual size on the shared control ladder, the same scale as `lr-textarea`/`lr-input`/`lr-select`, accepting both spellings of every tier (`2xs`/`xs`/`s`/`m`/ `l`/`xl` and `small`/`medium`/`large`). Governs the gutter's and textarea's padding and font size, plus the editor frame's minimum block size. - `wrap: 'off' | 'soft' | 'hard' = 'off'` — native textarea wrapping. `'off'` (the default) makes the `editor` part the single horizontal scroll viewport. Soft/hard text wraps within the editor allocation, with the caret and logical line-number gutter following the wrapped lines as the allocation changes; the editor frame owns scrolling. `hard` uses the owner realm's native textarea serializer, so FormData receives platform-equivalent `cols` wrapping while the live `value` remains unwrapped. - `spellcheck: boolean = false` — off by default for code, and parsed with a string-aware converter so `spellcheck="false"` really is `false` - `autofocus: boolean = false`, `title: string = ''`, `autocomplete: string = ''`, `inputMode`/`inputmode: string = ''`, `enterKeyHint`/`enterkeyhint: string = ''`, `autocapitalize: string = 'off'`, and `autocorrect: boolean = false` (attribute vocabulary `on`/`off`; boolean and string writes normalize through the shared native converter) - `accessibleLabel: string = ''` (attribute `aria-label`) — wins over `label`/the localized `codeEditorLabel` fallback on the internal textarea - The shared form surface adds `value`, `defaultValue`, `customError` (`custom-error`), `name`, `disabled`, `required`, `form`, `getForm()`, `checkValidity()`, `reportValidity()`, and `setCustomValidity()` / `resetValidity()`. The latter clears only consumer custom validity and restores current intrinsic constraints; it does not change the value/default or prior interaction state. **Methods:** `focus(options?)`, `blur()`, `select()`, `setSelectionRange(start, end, direction?)`, `setRangeText(replacement, start?, end?, selectMode?)` (writes the result back into `value` without emitting an event), and `scrollPosition()` / `scrollPosition({top?,left?})`. The `input` getter returns the owned native textarea after render. `selectionStart`, `selectionEnd`, and `selectionDirection` use native nullable sentinels before that surface exists. `scrollPosition()` reads or writes `[part="editor"]`'s top/left offsets: the gutter and caret share that single scroll owner rather than a private textarea scroll position. The native textarea receives the actual `required` state. Its `aria-invalid` is true whenever visible property/slotted error chrome exists, or after interaction while native validity fails; showing error chrome alone does not mutate `ElementInternals` validity. **Events:** exactly one realm-correct native `input`, `change`, `focus`, and `blur` is relayed from the internal textarea; native payload such as `InputEvent.inputType` and `FocusEvent.relatedTarget` is preserved. Typed `lr-input`/`lr-change` aliases carry `detail: { value }`. `lr-invalid` (no detail) fires once when validity fails. **Slots:** `label`, `hint`, `error`. **CSS parts:** `form-control`, `label` / `form-control-label` (both tokens sit on the same `