@verbb/plugin-kit-codemirror-core 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## Unreleased
+
+## 2.0.0 - 2026-07-19
+
+### Added
+- Initial public release of `@verbb/plugin-kit-codemirror-core` — shared CodeMirror setup for Plugin Kit code-editor surfaces.
+
+### Changed
+- Package versions lockstep with `@verbb/plugin-kit-web` and related `@verbb/plugin-kit-*` packages at `2.0.0`.

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Verbb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# `@verbb/plugin-kit-codemirror-core`
+
+Shared CodeMirror 6 setup for Plugin Kit code-editor surfaces — languages, theme chrome, and a small host helper.
+
+You normally consume this through `<pk-code-editor>` / React `CodeEditor` / Vue `CodeEditor`. Use this package when you need the extensions or host without the web component.
+
+## Install
+
+```bash
+npm install @verbb/plugin-kit-codemirror-core
+```
+
+## What you get
+
+| Export | Purpose |
+|--------|---------|
+| `createCodeEditorExtensions` | Language + chrome extensions for a given mode |
+| `createLanguageExtension` | Single-language helper |
+| `codeEditorTheme` / colour constants | Shared CP-looking editor chrome |
+| `CodeMirrorHost` | Mount / teardown helper for a CodeMirror view |
+| `computeCodeEditorMinHeight` | Layout helper from line count |
+
+Supported languages include HTML, CSS, JavaScript, and JSON (see `CodeEditorLanguage`).
+
+## UI entry points
+
+| Surface | Import |
+|---------|--------|
+| Web | `@verbb/plugin-kit-web/components/code-editor.js` |
+| React | `CodeEditor` from `@verbb/plugin-kit-react/components` |
+| Vue | `CodeEditor` from `@verbb/plugin-kit-vue/components` |
+
+SchemaForm field key: `codeEditor` (via `@verbb/plugin-kit-react/forms` or `@verbb/plugin-kit-vue/forms`).
+
+## Docs
+
+[Code Editor (Web)](https://docs.verbb.io/plugin-kit/web/components/code-editor) · [React](https://docs.verbb.io/plugin-kit/react/components/code-editor) · [Vue](https://docs.verbb.io/plugin-kit/vue/components/code-editor)

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export type CodeEditorLanguage = 'html' | 'text' | 'javascript' | 'css' | 'json';
+export declare const CODE_EDITOR_LINE_HEIGHT_PX = 18;
+export declare function computeCodeEditorMinHeight(rows?: number): string;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,CAAC;AAEjF,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,wBAAgB,0BAA0B,CAAC,IAAI,SAAK,GAAG,MAAM,CAI5D"}

package/dist/constants.js

@@ -0,0 +1,9 @@
+//#region src/constants.ts
+var CODE_EDITOR_LINE_HEIGHT_PX = 18;
+function computeCodeEditorMinHeight(rows = 12) {
+	return `${Math.max(Number(rows) || 12, 4) * 18 + 12}px`;
+}
+//#endregion
+export { CODE_EDITOR_LINE_HEIGHT_PX, computeCodeEditorMinHeight };
+
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.ts"],"sourcesContent":["export type CodeEditorLanguage = 'html' | 'text' | 'javascript' | 'css' | 'json';\n\nexport const CODE_EDITOR_LINE_HEIGHT_PX = 18;\n\nexport function computeCodeEditorMinHeight(rows = 12): string {\n    const normalizedRows = Math.max(Number(rows) || 12, 4);\n\n    return `${normalizedRows * CODE_EDITOR_LINE_HEIGHT_PX + 12}px`;\n}\n"],"mappings":";AAEA,IAAa,6BAA6B;AAE1C,SAAgB,2BAA2B,OAAO,IAAY;AAG1D,QAAO,GAFgB,KAAK,IAAI,OAAO,KAAK,IAAI,IAAI,EAE1C,GAAA,KAA8C,GAAG"}

package/dist/extensions.d.ts

@@ -0,0 +1,13 @@
+import { Compartment, Extension } from '@codemirror/state';
+import { CodeEditorLanguage } from './constants.js';
+export type CreateCodeEditorExtensionsOptions = {
+    language?: CodeEditorLanguage;
+    tabSize?: number;
+    lineNumbers?: boolean;
+    editable?: boolean;
+    editableCompartment?: Compartment;
+    onUpdate?: (value: string) => void;
+    onBlur?: () => void;
+};
+export declare function createCodeEditorExtensions({ language, tabSize, lineNumbers: showLineNumbers, editable, editableCompartment, onUpdate, onBlur, }: CreateCodeEditorExtensionsOptions): Extension[];
+//# sourceMappingURL=extensions.d.ts.map

package/dist/extensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../src/extensions.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAW7E,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAIzD,MAAM,MAAM,iCAAiC,GAAG;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAkCF,wBAAgB,0BAA0B,CAAC,EACvC,QAAiB,EACjB,OAAW,EACX,WAAW,EAAE,eAAsB,EACnC,QAAe,EACf,mBAAmB,EACnB,QAAQ,EACR,MAAM,GACT,EAAE,iCAAiC,GAAG,SAAS,EAAE,CAwCjD"}

package/dist/extensions.js

@@ -0,0 +1,57 @@
+import { createLanguageExtension, languageUsesSyntaxHelpers } from "./languages.js";
+import { codeEditorTheme } from "./theme.js";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { bracketMatching, defaultHighlightStyle, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { EditorView, drawSelection, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
+//#region src/extensions.ts
+function createEditorSetupExtensions(language, showLineNumbers) {
+	const usesSyntaxHelpers = languageUsesSyntaxHelpers(language);
+	const extensions = [
+		highlightSpecialChars(),
+		history(),
+		drawSelection(),
+		EditorState.allowMultipleSelections.of(false),
+		indentOnInput(),
+		syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+		highlightActiveLine(),
+		keymap.of([
+			...usesSyntaxHelpers ? closeBracketsKeymap : [],
+			...defaultKeymap,
+			...historyKeymap
+		])
+	];
+	if (showLineNumbers) extensions.unshift(lineNumbers(), highlightActiveLineGutter());
+	if (usesSyntaxHelpers) {
+		extensions.push(bracketMatching());
+		if (language === "html" || language === "javascript" || language === "json") extensions.push(closeBrackets());
+	}
+	return extensions;
+}
+function createCodeEditorExtensions({ language = "html", tabSize = 4, lineNumbers: showLineNumbers = true, editable = true, editableCompartment, onUpdate, onBlur }) {
+	const normalizedTabSize = Math.max(1, tabSize);
+	const extensions = [
+		codeEditorTheme,
+		EditorState.tabSize.of(normalizedTabSize),
+		indentUnit.of(" ".repeat(normalizedTabSize)),
+		EditorView.lineWrapping,
+		...createEditorSetupExtensions(language, showLineNumbers)
+	];
+	const languageExtension = createLanguageExtension(language);
+	if (languageExtension) extensions.push(languageExtension);
+	if (editableCompartment) extensions.push(editableCompartment.of(EditorView.editable.of(editable)));
+	else extensions.push(EditorView.editable.of(editable));
+	if (onUpdate) extensions.push(EditorView.updateListener.of((update) => {
+		if (update.docChanged) onUpdate(update.state.doc.toString());
+	}));
+	if (onBlur) extensions.push(EditorView.domEventHandlers({ blur: () => {
+		onBlur();
+		return false;
+	} }));
+	return extensions;
+}
+//#endregion
+export { createCodeEditorExtensions };
+
+//# sourceMappingURL=extensions.js.map

package/dist/extensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.js","names":[],"sources":["../src/extensions.ts"],"sourcesContent":["import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';\nimport { defaultKeymap, history, historyKeymap } from '@codemirror/commands';\nimport {\n    bracketMatching,\n    defaultHighlightStyle,\n    indentOnInput,\n    indentUnit,\n    syntaxHighlighting,\n} from '@codemirror/language';\nimport { Compartment, EditorState, type Extension } from '@codemirror/state';\nimport {\n    drawSelection,\n    highlightActiveLine,\n    highlightActiveLineGutter,\n    highlightSpecialChars,\n    keymap,\n    lineNumbers,\n    EditorView,\n} from '@codemirror/view';\n\nimport { type CodeEditorLanguage } from './constants.js';\nimport { createLanguageExtension, languageUsesSyntaxHelpers } from './languages.js';\nimport { codeEditorTheme } from './theme.js';\n\nexport type CreateCodeEditorExtensionsOptions = {\n    language?: CodeEditorLanguage;\n    tabSize?: number;\n    lineNumbers?: boolean;\n    editable?: boolean;\n    editableCompartment?: Compartment;\n    onUpdate?: (value: string) => void;\n    onBlur?: () => void;\n};\n\nfunction createEditorSetupExtensions(language: CodeEditorLanguage, showLineNumbers: boolean): Extension[] {\n    const usesSyntaxHelpers = languageUsesSyntaxHelpers(language);\n    const extensions: Extension[] = [\n        highlightSpecialChars(),\n        history(),\n        drawSelection(),\n        EditorState.allowMultipleSelections.of(false),\n        indentOnInput(),\n        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),\n        highlightActiveLine(),\n        keymap.of([\n            ...(usesSyntaxHelpers ? closeBracketsKeymap : []),\n            ...defaultKeymap,\n            ...historyKeymap,\n        ]),\n    ];\n\n    if (showLineNumbers) {\n        extensions.unshift(lineNumbers(), highlightActiveLineGutter());\n    }\n\n    if (usesSyntaxHelpers) {\n        extensions.push(bracketMatching());\n\n        if (language === 'html' || language === 'javascript' || language === 'json') {\n            extensions.push(closeBrackets());\n        }\n    }\n\n    return extensions;\n}\n\nexport function createCodeEditorExtensions({\n    language = 'html',\n    tabSize = 4,\n    lineNumbers: showLineNumbers = true,\n    editable = true,\n    editableCompartment,\n    onUpdate,\n    onBlur,\n}: CreateCodeEditorExtensionsOptions): Extension[] {\n    const normalizedTabSize = Math.max(1, tabSize);\n    const extensions: Extension[] = [\n        codeEditorTheme,\n        EditorState.tabSize.of(normalizedTabSize),\n        indentUnit.of(' '.repeat(normalizedTabSize)),\n        EditorView.lineWrapping,\n        ...createEditorSetupExtensions(language, showLineNumbers),\n    ];\n\n    const languageExtension = createLanguageExtension(language);\n\n    if (languageExtension) {\n        extensions.push(languageExtension);\n    }\n\n    if (editableCompartment) {\n        extensions.push(editableCompartment.of(EditorView.editable.of(editable)));\n    } else {\n        extensions.push(EditorView.editable.of(editable));\n    }\n\n    if (onUpdate) {\n        extensions.push(EditorView.updateListener.of((update) => {\n            if (update.docChanged) {\n                onUpdate(update.state.doc.toString());\n            }\n        }));\n    }\n\n    if (onBlur) {\n        extensions.push(EditorView.domEventHandlers({\n            blur: () => {\n                onBlur();\n                return false;\n            },\n        }));\n    }\n\n    return extensions;\n}\n"],"mappings":";;;;;;;;AAkCA,SAAS,4BAA4B,UAA8B,iBAAuC;CACtG,MAAM,oBAAoB,0BAA0B,SAAS;CAC7D,MAAM,aAA0B;EAC5B,uBAAuB;EACvB,SAAS;EACT,eAAe;EACf,YAAY,wBAAwB,GAAG,MAAM;EAC7C,eAAe;EACf,mBAAmB,uBAAuB,EAAE,UAAU,MAAM,CAAC;EAC7D,qBAAqB;EACrB,OAAO,GAAG;GACN,GAAI,oBAAoB,sBAAsB,EAAE;GAChD,GAAG;GACH,GAAG;GACN,CAAC;EACL;AAED,KAAI,gBACA,YAAW,QAAQ,aAAa,EAAE,2BAA2B,CAAC;AAGlE,KAAI,mBAAmB;AACnB,aAAW,KAAK,iBAAiB,CAAC;AAElC,MAAI,aAAa,UAAU,aAAa,gBAAgB,aAAa,OACjE,YAAW,KAAK,eAAe,CAAC;;AAIxC,QAAO;;AAGX,SAAgB,2BAA2B,EACvC,WAAW,QACX,UAAU,GACV,aAAa,kBAAkB,MAC/B,WAAW,MACX,qBACA,UACA,UAC+C;CAC/C,MAAM,oBAAoB,KAAK,IAAI,GAAG,QAAQ;CAC9C,MAAM,aAA0B;EAC5B;EACA,YAAY,QAAQ,GAAG,kBAAkB;EACzC,WAAW,GAAG,IAAI,OAAO,kBAAkB,CAAC;EAC5C,WAAW;EACX,GAAG,4BAA4B,UAAU,gBAAgB;EAC5D;CAED,MAAM,oBAAoB,wBAAwB,SAAS;AAE3D,KAAI,kBACA,YAAW,KAAK,kBAAkB;AAGtC,KAAI,oBACA,YAAW,KAAK,oBAAoB,GAAG,WAAW,SAAS,GAAG,SAAS,CAAC,CAAC;KAEzE,YAAW,KAAK,WAAW,SAAS,GAAG,SAAS,CAAC;AAGrD,KAAI,SACA,YAAW,KAAK,WAAW,eAAe,IAAI,WAAW;AACrD,MAAI,OAAO,WACP,UAAS,OAAO,MAAM,IAAI,UAAU,CAAC;GAE3C,CAAC;AAGP,KAAI,OACA,YAAW,KAAK,WAAW,iBAAiB,EACxC,YAAY;AACR,UAAQ;AACR,SAAO;IAEd,CAAC,CAAC;AAGP,QAAO"}

package/dist/host.d.ts

@@ -0,0 +1,26 @@
+import { EditorView } from '@codemirror/view';
+import { CodeEditorLanguage } from './constants.js';
+export type CodeMirrorHostMountOptions = {
+    parent: HTMLElement;
+    value?: string;
+    language?: CodeEditorLanguage;
+    tabSize?: number;
+    lineNumbers?: boolean;
+    rows?: number;
+    editable?: boolean;
+    onUpdate?: (value: string) => void;
+    onBlur?: () => void;
+};
+export declare class CodeMirrorHost {
+    view: EditorView | null;
+    private readonly editableCompartment;
+    private lastEmitted;
+    mount({ parent, value, language, tabSize, lineNumbers, rows, editable, onUpdate, onBlur, }: CodeMirrorHostMountOptions): void;
+    getValue(): string;
+    setValue(value: string, options?: {
+        respectFocus?: boolean;
+    }): void;
+    setEditable(editable: boolean): void;
+    destroy(): void;
+}
+//# sourceMappingURL=host.d.ts.map

package/dist/host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAA8B,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGrF,MAAM,MAAM,0BAA0B,GAAG;IACrC,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,qBAAa,cAAc;IACvB,IAAI,EAAE,UAAU,GAAG,IAAI,CAAQ;IAE/B,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAqB;IAEzD,OAAO,CAAC,WAAW,CAAuB;IAE1C,KAAK,CAAC,EACF,MAAM,EACN,KAAU,EACV,QAAiB,EACjB,OAAW,EACX,WAAkB,EAClB,IAAS,EACT,QAAe,EACf,QAAQ,EACR,MAAM,GACT,EAAE,0BAA0B,GAAG,IAAI;IAwBpC,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAO,GAAG,IAAI;IA0BvE,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAUpC,OAAO,IAAI,IAAI;CAKlB"}

package/dist/host.js

@@ -0,0 +1,59 @@
+import { computeCodeEditorMinHeight } from "./constants.js";
+import { createCodeEditorExtensions } from "./extensions.js";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+//#region src/host.ts
+var CodeMirrorHost = class {
+	view = null;
+	editableCompartment = new Compartment();
+	lastEmitted = null;
+	mount({ parent, value = "", language = "html", tabSize = 4, lineNumbers = true, rows = 12, editable = true, onUpdate, onBlur }) {
+		this.view = new EditorView({
+			state: EditorState.create({
+				doc: value,
+				extensions: createCodeEditorExtensions({
+					language,
+					tabSize,
+					lineNumbers,
+					editable,
+					editableCompartment: this.editableCompartment,
+					onUpdate: (nextValue) => {
+						this.lastEmitted = nextValue;
+						onUpdate?.(nextValue);
+					},
+					onBlur
+				})
+			}),
+			parent
+		});
+		this.view.dom.style.minHeight = computeCodeEditorMinHeight(rows);
+		this.view.dom.style.width = "100%";
+	}
+	getValue() {
+		return this.view?.state.doc.toString() ?? "";
+	}
+	setValue(value, options = {}) {
+		if (!this.view) return;
+		const { respectFocus = true } = options;
+		if (respectFocus && this.view.hasFocus) return;
+		if (this.view.state.doc.toString() === value || value === this.lastEmitted) return;
+		this.view.dispatch({ changes: {
+			from: 0,
+			to: this.view.state.doc.length,
+			insert: value
+		} });
+	}
+	setEditable(editable) {
+		if (!this.view) return;
+		this.view.dispatch({ effects: this.editableCompartment.reconfigure(EditorView.editable.of(editable)) });
+	}
+	destroy() {
+		this.view?.destroy();
+		this.view = null;
+		this.lastEmitted = null;
+	}
+};
+//#endregion
+export { CodeMirrorHost };
+
+//# sourceMappingURL=host.js.map

package/dist/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","names":[],"sources":["../src/host.ts"],"sourcesContent":["import { Compartment, EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\n\nimport { computeCodeEditorMinHeight, type CodeEditorLanguage } from './constants.js';\nimport { createCodeEditorExtensions } from './extensions.js';\n\nexport type CodeMirrorHostMountOptions = {\n    parent: HTMLElement;\n    value?: string;\n    language?: CodeEditorLanguage;\n    tabSize?: number;\n    lineNumbers?: boolean;\n    rows?: number;\n    editable?: boolean;\n    onUpdate?: (value: string) => void;\n    onBlur?: () => void;\n};\n\nexport class CodeMirrorHost {\n    view: EditorView | null = null;\n\n    private readonly editableCompartment = new Compartment();\n\n    private lastEmitted: string | null = null;\n\n    mount({\n        parent,\n        value = '',\n        language = 'html',\n        tabSize = 4,\n        lineNumbers = true,\n        rows = 12,\n        editable = true,\n        onUpdate,\n        onBlur,\n    }: CodeMirrorHostMountOptions): void {\n        this.view = new EditorView({\n            state: EditorState.create({\n                doc: value,\n                extensions: createCodeEditorExtensions({\n                    language,\n                    tabSize,\n                    lineNumbers,\n                    editable,\n                    editableCompartment: this.editableCompartment,\n                    onUpdate: (nextValue) => {\n                        this.lastEmitted = nextValue;\n                        onUpdate?.(nextValue);\n                    },\n                    onBlur,\n                }),\n            }),\n            parent,\n        });\n\n        this.view.dom.style.minHeight = computeCodeEditorMinHeight(rows);\n        this.view.dom.style.width = '100%';\n    }\n\n    getValue(): string {\n        return this.view?.state.doc.toString() ?? '';\n    }\n\n    setValue(value: string, options: { respectFocus?: boolean } = {}): void {\n        if (!this.view) {\n            return;\n        }\n\n        const { respectFocus = true } = options;\n\n        if (respectFocus && this.view.hasFocus) {\n            return;\n        }\n\n        const current = this.view.state.doc.toString();\n\n        if (current === value || value === this.lastEmitted) {\n            return;\n        }\n\n        this.view.dispatch({\n            changes: {\n                from: 0,\n                to: this.view.state.doc.length,\n                insert: value,\n            },\n        });\n    }\n\n    setEditable(editable: boolean): void {\n        if (!this.view) {\n            return;\n        }\n\n        this.view.dispatch({\n            effects: this.editableCompartment.reconfigure(EditorView.editable.of(editable)),\n        });\n    }\n\n    destroy(): void {\n        this.view?.destroy();\n        this.view = null;\n        this.lastEmitted = null;\n    }\n}\n"],"mappings":";;;;;AAkBA,IAAa,iBAAb,MAA4B;CACxB,OAA0B;CAE1B,sBAAuC,IAAI,aAAa;CAExD,cAAqC;CAErC,MAAM,EACF,QACA,QAAQ,IACR,WAAW,QACX,UAAU,GACV,cAAc,MACd,OAAO,IACP,WAAW,MACX,UACA,UACiC;AACjC,OAAK,OAAO,IAAI,WAAW;GACvB,OAAO,YAAY,OAAO;IACtB,KAAK;IACL,YAAY,2BAA2B;KACnC;KACA;KACA;KACA;KACA,qBAAqB,KAAK;KAC1B,WAAW,cAAc;AACrB,WAAK,cAAc;AACnB,iBAAW,UAAU;;KAEzB;KACH,CAAC;IACL,CAAC;GACF;GACH,CAAC;AAEF,OAAK,KAAK,IAAI,MAAM,YAAY,2BAA2B,KAAK;AAChE,OAAK,KAAK,IAAI,MAAM,QAAQ;;CAGhC,WAAmB;AACf,SAAO,KAAK,MAAM,MAAM,IAAI,UAAU,IAAI;;CAG9C,SAAS,OAAe,UAAsC,EAAE,EAAQ;AACpE,MAAI,CAAC,KAAK,KACN;EAGJ,MAAM,EAAE,eAAe,SAAS;AAEhC,MAAI,gBAAgB,KAAK,KAAK,SAC1B;AAKJ,MAFgB,KAAK,KAAK,MAAM,IAAI,UAEhC,KAAY,SAAS,UAAU,KAAK,YACpC;AAGJ,OAAK,KAAK,SAAS,EACf,SAAS;GACL,MAAM;GACN,IAAI,KAAK,KAAK,MAAM,IAAI;GACxB,QAAQ;GACX,EACJ,CAAC;;CAGN,YAAY,UAAyB;AACjC,MAAI,CAAC,KAAK,KACN;AAGJ,OAAK,KAAK,SAAS,EACf,SAAS,KAAK,oBAAoB,YAAY,WAAW,SAAS,GAAG,SAAS,CAAC,EAClF,CAAC;;CAGN,UAAgB;AACZ,OAAK,MAAM,SAAS;AACpB,OAAK,OAAO;AACZ,OAAK,cAAc"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { CODE_EDITOR_LINE_HEIGHT_PX, computeCodeEditorMinHeight, } from './constants.js';
+export type { CodeEditorLanguage } from './constants.js';
+export { createCodeEditorExtensions, } from './extensions.js';
+export type { CreateCodeEditorExtensionsOptions } from './extensions.js';
+export { createLanguageExtension, languageUsesSyntaxHelpers, } from './languages.js';
+export { CODE_EDITOR_ACTIVE_LINE_BG, CODE_EDITOR_CHROME_BG, CODE_EDITOR_GUTTER_BG, CODE_EDITOR_GUTTER_BORDER, CODE_EDITOR_GUTTER_TEXT_COLOR, CODE_EDITOR_SELECTION_BG, CODE_EDITOR_SURFACE_BG, CODE_EDITOR_TEXT_COLOR, codeEditorTheme, } from './theme.js';
+export { CodeMirrorHost } from './host.js';
+export type { CodeMirrorHostMountOptions } from './host.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,0BAA0B,EAC1B,0BAA0B,GAC7B,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EACH,0BAA0B,GAC7B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,iCAAiC,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,EACH,uBAAuB,EACvB,yBAAyB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACH,0BAA0B,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,yBAAyB,EACzB,6BAA6B,EAC7B,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,EACtB,eAAe,GAClB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+import { CODE_EDITOR_LINE_HEIGHT_PX, computeCodeEditorMinHeight } from "./constants.js";
+import { createLanguageExtension, languageUsesSyntaxHelpers } from "./languages.js";
+import { CODE_EDITOR_ACTIVE_LINE_BG, CODE_EDITOR_CHROME_BG, CODE_EDITOR_GUTTER_BG, CODE_EDITOR_GUTTER_BORDER, CODE_EDITOR_GUTTER_TEXT_COLOR, CODE_EDITOR_SELECTION_BG, CODE_EDITOR_SURFACE_BG, CODE_EDITOR_TEXT_COLOR, codeEditorTheme } from "./theme.js";
+import { createCodeEditorExtensions } from "./extensions.js";
+import { CodeMirrorHost } from "./host.js";
+export { CODE_EDITOR_ACTIVE_LINE_BG, CODE_EDITOR_CHROME_BG, CODE_EDITOR_GUTTER_BG, CODE_EDITOR_GUTTER_BORDER, CODE_EDITOR_GUTTER_TEXT_COLOR, CODE_EDITOR_LINE_HEIGHT_PX, CODE_EDITOR_SELECTION_BG, CODE_EDITOR_SURFACE_BG, CODE_EDITOR_TEXT_COLOR, CodeMirrorHost, codeEditorTheme, computeCodeEditorMinHeight, createCodeEditorExtensions, createLanguageExtension, languageUsesSyntaxHelpers };

package/dist/languages.d.ts

@@ -0,0 +1,5 @@
+import { Extension } from '@codemirror/state';
+import { CodeEditorLanguage } from './constants.js';
+export declare function languageUsesSyntaxHelpers(language: CodeEditorLanguage): boolean;
+export declare function createLanguageExtension(language: CodeEditorLanguage): Extension | null;
+//# sourceMappingURL=languages.d.ts.map

package/dist/languages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"languages.d.ts","sourceRoot":"","sources":["../src/languages.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,OAAO,CAE/E;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,SAAS,GAAG,IAAI,CAatF"}

package/dist/languages.js

@@ -0,0 +1,21 @@
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+//#region src/languages.ts
+function languageUsesSyntaxHelpers(language) {
+	return language !== "text";
+}
+function createLanguageExtension(language) {
+	switch (language) {
+		case "html": return html();
+		case "javascript": return javascript();
+		case "css": return css();
+		case "json": return json();
+		default: return null;
+	}
+}
+//#endregion
+export { createLanguageExtension, languageUsesSyntaxHelpers };
+
+//# sourceMappingURL=languages.js.map

package/dist/languages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"languages.js","names":[],"sources":["../src/languages.ts"],"sourcesContent":["import { css } from '@codemirror/lang-css';\nimport { html } from '@codemirror/lang-html';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { json } from '@codemirror/lang-json';\nimport type { Extension } from '@codemirror/state';\n\nimport type { CodeEditorLanguage } from './constants.js';\n\nexport function languageUsesSyntaxHelpers(language: CodeEditorLanguage): boolean {\n    return language !== 'text';\n}\n\nexport function createLanguageExtension(language: CodeEditorLanguage): Extension | null {\n    switch (language) {\n        case 'html':\n            return html();\n        case 'javascript':\n            return javascript();\n        case 'css':\n            return css();\n        case 'json':\n            return json();\n        default:\n            return null;\n    }\n}\n"],"mappings":";;;;;AAQA,SAAgB,0BAA0B,UAAuC;AAC7E,QAAO,aAAa;;AAGxB,SAAgB,wBAAwB,UAAgD;AACpF,SAAQ,UAAR;EACI,KAAK,OACD,QAAO,MAAM;EACjB,KAAK,aACD,QAAO,YAAY;EACvB,KAAK,MACD,QAAO,KAAK;EAChB,KAAK,OACD,QAAO,MAAM;EACjB,QACI,QAAO"}

package/dist/theme.d.ts

@@ -0,0 +1,18 @@
+/** Editor content surface — matches @uiw/react-codemirror default light theme. */
+export declare const CODE_EDITOR_SURFACE_BG = "#ffffff";
+/** Gutter strip beside line numbers. */
+export declare const CODE_EDITOR_GUTTER_BG = "rgb(245, 247, 250)";
+export declare const CODE_EDITOR_TEXT_COLOR = "rgb(31, 41, 51)";
+export declare const CODE_EDITOR_GUTTER_TEXT_COLOR = "#7c8793";
+export declare const CODE_EDITOR_GUTTER_BORDER = "1px solid rgba(96, 125, 159, 0.2)";
+export declare const CODE_EDITOR_ACTIVE_LINE_BG = "rgba(96, 125, 159, 0.06)";
+export declare const CODE_EDITOR_SELECTION_BG = "rgba(59, 130, 246, 0.35)";
+/** Outer chrome behind the editor — Craft input shell tone. */
+export declare const CODE_EDITOR_CHROME_BG = "rgb(251, 252, 254)";
+/**
+ * Matches the legacy React CodeEditor theme. The interior surface is white
+ * (via @uiw/react-codemirror's default light theme); only the gutter uses
+ * the cooler gray strip.
+ */
+export declare const codeEditorTheme: import('@codemirror/state').Extension;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAIA,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAEhD,wCAAwC;AACxC,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAE1D,eAAO,MAAM,sBAAsB,oBAAoB,CAAC;AACxD,eAAO,MAAM,6BAA6B,YAAY,CAAC;AACvD,eAAO,MAAM,yBAAyB,sCAAsC,CAAC;AAC7E,eAAO,MAAM,0BAA0B,6BAA6B,CAAC;AACrE,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AAEnE,+DAA+D;AAC/D,eAAO,MAAM,qBAAqB,uBAAuB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,eAAe,uCA6C1B,CAAC"}

package/dist/theme.js

@@ -0,0 +1,58 @@
+import "./constants.js";
+import { EditorView } from "@codemirror/view";
+//#region src/theme.ts
+/** Editor content surface — matches @uiw/react-codemirror default light theme. */
+var CODE_EDITOR_SURFACE_BG = "#ffffff";
+/** Gutter strip beside line numbers. */
+var CODE_EDITOR_GUTTER_BG = "rgb(245, 247, 250)";
+var CODE_EDITOR_TEXT_COLOR = "rgb(31, 41, 51)";
+var CODE_EDITOR_GUTTER_TEXT_COLOR = "#7c8793";
+var CODE_EDITOR_GUTTER_BORDER = "1px solid rgba(96, 125, 159, 0.2)";
+var CODE_EDITOR_ACTIVE_LINE_BG = "rgba(96, 125, 159, 0.06)";
+var CODE_EDITOR_SELECTION_BG = "rgba(59, 130, 246, 0.35)";
+/** Outer chrome behind the editor — Craft input shell tone. */
+var CODE_EDITOR_CHROME_BG = "rgb(251, 252, 254)";
+/**
+* Matches the legacy React CodeEditor theme. The interior surface is white
+* (via @uiw/react-codemirror's default light theme); only the gutter uses
+* the cooler gray strip.
+*/
+var codeEditorTheme = EditorView.theme({
+	"&": {
+		backgroundColor: CODE_EDITOR_SURFACE_BG,
+		color: CODE_EDITOR_TEXT_COLOR,
+		fontSize: "0.9em"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+		lineHeight: `18px`
+	},
+	".cm-content": {
+		padding: "6px 8px",
+		caretColor: CODE_EDITOR_TEXT_COLOR
+	},
+	".cm-gutters": {
+		backgroundColor: CODE_EDITOR_GUTTER_BG,
+		borderRight: CODE_EDITOR_GUTTER_BORDER,
+		color: CODE_EDITOR_GUTTER_TEXT_COLOR
+	},
+	".cm-gutter.cm-lineNumbers .cm-gutterElement": {
+		padding: "0 8px",
+		minWidth: "3rem"
+	},
+	".cm-activeLine": { backgroundColor: CODE_EDITOR_ACTIVE_LINE_BG },
+	"&.cm-light .cm-activeLine": { backgroundColor: CODE_EDITOR_ACTIVE_LINE_BG },
+	"&.cm-light .cm-activeLineGutter": { backgroundColor: CODE_EDITOR_GUTTER_BG },
+	"&.cm-light .cm-gutters": {
+		backgroundColor: CODE_EDITOR_GUTTER_BG,
+		color: CODE_EDITOR_GUTTER_TEXT_COLOR,
+		border: "0 solid transparent",
+		borderRight: CODE_EDITOR_GUTTER_BORDER
+	},
+	".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: `${CODE_EDITOR_SELECTION_BG} !important` }
+});
+//#endregion
+export { CODE_EDITOR_ACTIVE_LINE_BG, CODE_EDITOR_CHROME_BG, CODE_EDITOR_GUTTER_BG, CODE_EDITOR_GUTTER_BORDER, CODE_EDITOR_GUTTER_TEXT_COLOR, CODE_EDITOR_SELECTION_BG, CODE_EDITOR_SURFACE_BG, CODE_EDITOR_TEXT_COLOR, codeEditorTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.ts"],"sourcesContent":["import { EditorView } from '@codemirror/view';\n\nimport { CODE_EDITOR_LINE_HEIGHT_PX } from './constants.js';\n\n/** Editor content surface — matches @uiw/react-codemirror default light theme. */\nexport const CODE_EDITOR_SURFACE_BG = '#ffffff';\n\n/** Gutter strip beside line numbers. */\nexport const CODE_EDITOR_GUTTER_BG = 'rgb(245, 247, 250)';\n\nexport const CODE_EDITOR_TEXT_COLOR = 'rgb(31, 41, 51)';\nexport const CODE_EDITOR_GUTTER_TEXT_COLOR = '#7c8793';\nexport const CODE_EDITOR_GUTTER_BORDER = '1px solid rgba(96, 125, 159, 0.2)';\nexport const CODE_EDITOR_ACTIVE_LINE_BG = 'rgba(96, 125, 159, 0.06)';\nexport const CODE_EDITOR_SELECTION_BG = 'rgba(59, 130, 246, 0.35)';\n\n/** Outer chrome behind the editor — Craft input shell tone. */\nexport const CODE_EDITOR_CHROME_BG = 'rgb(251, 252, 254)';\n\n/**\n * Matches the legacy React CodeEditor theme. The interior surface is white\n * (via @uiw/react-codemirror's default light theme); only the gutter uses\n * the cooler gray strip.\n */\nexport const codeEditorTheme = EditorView.theme({\n    '&': {\n        backgroundColor: CODE_EDITOR_SURFACE_BG,\n        color: CODE_EDITOR_TEXT_COLOR,\n        // Match kit mono optical size (text-[0.9em] / --pk-font-size-mono).\n        fontSize: '0.9em',\n    },\n    '&.cm-focused': {\n        outline: 'none',\n    },\n    '.cm-scroller': {\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',\n        lineHeight: `${CODE_EDITOR_LINE_HEIGHT_PX}px`,\n    },\n    '.cm-content': {\n        padding: '6px 8px',\n        caretColor: CODE_EDITOR_TEXT_COLOR,\n    },\n    '.cm-gutters': {\n        backgroundColor: CODE_EDITOR_GUTTER_BG,\n        borderRight: CODE_EDITOR_GUTTER_BORDER,\n        color: CODE_EDITOR_GUTTER_TEXT_COLOR,\n    },\n    '.cm-gutter.cm-lineNumbers .cm-gutterElement': {\n        padding: '0 8px',\n        minWidth: '3rem',\n    },\n    '.cm-activeLine': {\n        backgroundColor: CODE_EDITOR_ACTIVE_LINE_BG,\n    },\n    '&.cm-light .cm-activeLine': {\n        backgroundColor: CODE_EDITOR_ACTIVE_LINE_BG,\n    },\n    '&.cm-light .cm-activeLineGutter': {\n        backgroundColor: CODE_EDITOR_GUTTER_BG,\n    },\n    '&.cm-light .cm-gutters': {\n        backgroundColor: CODE_EDITOR_GUTTER_BG,\n        color: CODE_EDITOR_GUTTER_TEXT_COLOR,\n        border: '0 solid transparent',\n        borderRight: CODE_EDITOR_GUTTER_BORDER,\n    },\n    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {\n        backgroundColor: `${CODE_EDITOR_SELECTION_BG} !important`,\n    },\n});\n"],"mappings":";;;;AAKA,IAAa,yBAAyB;;AAGtC,IAAa,wBAAwB;AAErC,IAAa,yBAAyB;AACtC,IAAa,gCAAgC;AAC7C,IAAa,4BAA4B;AACzC,IAAa,6BAA6B;AAC1C,IAAa,2BAA2B;;AAGxC,IAAa,wBAAwB;;;;;;AAOrC,IAAa,kBAAkB,WAAW,MAAM;CAC5C,KAAK;EACD,iBAAiB;EACjB,OAAO;EAEP,UAAU;EACb;CACD,gBAAgB,EACZ,SAAS,QACZ;CACD,gBAAgB;EACZ,YAAY;EACZ,YAAY;EACf;CACD,eAAe;EACX,SAAS;EACT,YAAY;EACf;CACD,eAAe;EACX,iBAAiB;EACjB,aAAa;EACb,OAAO;EACV;CACD,+CAA+C;EAC3C,SAAS;EACT,UAAU;EACb;CACD,kBAAkB,EACd,iBAAiB,4BACpB;CACD,6BAA6B,EACzB,iBAAiB,4BACpB;CACD,mCAAmC,EAC/B,iBAAiB,uBACpB;CACD,0BAA0B;EACtB,iBAAiB;EACjB,OAAO;EACP,QAAQ;EACR,aAAa;EAChB;CACD,8EAA8E,EAC1E,iBAAiB,GAAG,yBAAyB,cAChD;CACJ,CAAC"}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@verbb/plugin-kit-codemirror-core",
+    "version": "2.0.0",
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "LICENSE.md",
+        "CHANGELOG.md"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/verbb/plugin-kit.git",
+        "directory": "plugin-kit-codemirror-core"
+    },
+    "bugs": {
+        "url": "https://github.com/verbb/plugin-kit/issues"
+    },
+    "homepage": "https://docs.verbb.io/plugin-kit",
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite build --watch",
+        "test": "vitest run"
+    },
+    "license": "MIT",
+    "dependencies": {
+        "@codemirror/autocomplete": "^6.20.0",
+        "@codemirror/commands": "^6.10.2",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/language": "^6.12.1",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.43.1"
+    },
+    "devDependencies": {
+        "jsdom": "^26.1.0",
+        "typescript": "^6.0.3",
+        "vite": "^8.0.10",
+        "vite-plugin-dts": "^4.5.4",
+        "vitest": "^4.1.5"
+    }
+}