feat(dashboard): CodeEditor readOnly prop

Threads readOnly through to EditorState.readOnly + EditorView.editable so
script-detail can render a viewer-only editor without intercepting
keystrokes upstream.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-05-28 19:29:55 +02:00
parent 99a3ed1b6b
commit bef4d34c43

View File

@@ -25,12 +25,18 @@
value = $bindable(''), value = $bindable(''),
language = 'rhai' as Language, language = 'rhai' as Language,
placeholder = '', placeholder = '',
minHeight = '12rem' minHeight = '12rem',
readOnly = false
}: { }: {
value?: string; value?: string;
language?: Language; language?: Language;
placeholder?: string; placeholder?: string;
minHeight?: string; minHeight?: string;
/** When true the editor renders without a cursor and rejects
* keystrokes. Parent-driven `value` changes still apply via
* the dispatch path below — this only blocks user edits.
* Not reactive after mount; re-mount via `{#key}` if needed. */
readOnly?: boolean;
} = $props(); } = $props();
let host: HTMLDivElement | null = null; let host: HTMLDivElement | null = null;
@@ -48,6 +54,12 @@
keymap.of([indentWithTab]), keymap.of([indentWithTab]),
dashboardSyntaxHighlighting, dashboardSyntaxHighlighting,
dashboardTheme, dashboardTheme,
// readOnly + editable together: readOnly blocks the
// underlying transactions, editable suppresses the caret
// + selection visuals so the user can see it's not
// editable.
EditorState.readOnly.of(readOnly),
EditorView.editable.of(!readOnly),
EditorView.updateListener.of((update) => { EditorView.updateListener.of((update) => {
if (update.docChanged && !pushingFromOutside) { if (update.docChanged && !pushingFromOutside) {
value = update.state.doc.toString(); value = update.state.doc.toString();