@coldsmirk/inkstone-react 0.10.1 → 0.12.0

package/README.md

@@ -11,7 +11,7 @@ pnpm add @coldsmirk/inkstone-react monaco-editor react \
   @codemirror/state @codemirror/view @codemirror/language @codemirror/autocomplete @codemirror/commands @codemirror/search
 ```
 
-`monaco-editor`, `react`, and the `@codemirror/*` packages are **peer dependencies** — your app owns the single copy of each (`@codemirror/state` breaks at runtime if two copies load). Node.js >= 24 for build / SSR hosts.
+`monaco-editor`, `react`, and the `@codemirror/*` packages are **peer dependencies** — your app owns the single copy of each (`@codemirror/state` breaks at runtime if two copies load). The engine peers are **optional**: a `/codemirror`-only consumer installs just the `@codemirror/*` set, a `/monaco`-only consumer just `monaco-editor`; only `react` is always required (`@monaco-editor/react` still declares `monaco-editor` a required peer, so a CodeMirror-only install may print one unmet-peer warning — harmless, nothing Monaco is loaded). Node.js >= 24 for build / SSR hosts.
 
 Import from the engine-specific entry points below so a CodeMirror-only build never traverses or emits Monaco (and vice versa). The aggregate `@coldsmirk/inkstone-react` entry remains available for existing consumers; `@coldsmirk/inkstone-react/shiki` exposes the standalone highlighter hook.
 

package/dist/codemirror-Bvwl0fxH.js

@@ -0,0 +1,261 @@
+import { n as useControlledReconcileSignal, t as useLatest } from "./use-latest-BxJHbqOv.js";
+import { EditorState } from "@codemirror/state";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { ControlledEditorHost, ControlledMergeHost, codeMirrorLanguages, defaultThemeExtensions, diffChromeColor, documentExtensions, editorRoot, installDiffChrome, installDiffControlKeyboardSupport, loadLanguage, mergeTheme, minijinjaContextField, normalizeContext, normalizeContext as normalizeContext$1, searchPhrasesZhCn, searchPhrasesZhCn as searchPhrasesZhCn$1, setMinijinjaContext, setSqlSchema, sqlSchemaField, toCssSize } from "@coldsmirk/inkstone-codemirror";
+import { useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { indentUnit } from "@codemirror/language";
+//#region src/codemirror-diff-editor.tsx
+function CodeMirrorDiffEditor({ original, modified, onChange, language, readOnly = false, revertControls = false, collapseUnchanged = false, lineWrapping = false, showLineNumbers = true, extensions, dynamicExtensions, dark = false, height, width, fontSize = 14, lineHeight = 1.6, className, originalAriaLabel = "Original content", modifiedAriaLabel = "Modified content", onMount }) {
+	const containerRef = useRef(null);
+	const hostRef = useRef(null);
+	const modifiedTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const onChangeRef = useLatest(onChange);
+	const onMountRef = useLatest(onMount);
+	const [loadedLanguage, setLoadedLanguage] = useState(null);
+	const languageExtension = useMemo(() => loadedLanguage && loadedLanguage.id === language ? [loadedLanguage.extension] : [], [language, loadedLanguage]);
+	const activeRevertControls = revertControls && !readOnly;
+	useEffect(() => {
+		if (!language) return;
+		let cancelled = false;
+		loadLanguage(language).then((extension) => {
+			if (!cancelled) setLoadedLanguage({
+				id: language,
+				extension
+			});
+		}).catch((error) => {
+			console.error("inkstone: failed to load CodeMirror language", language, error);
+			if (!cancelled) setLoadedLanguage(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const dynamic = useMemo(() => [
+		...defaultThemeExtensions(dark, void 0, void 0, fontSize, lineHeight),
+		mergeTheme(dark),
+		...showLineNumbers ? [lineNumbers()] : [],
+		...lineWrapping ? [EditorView.lineWrapping] : [],
+		...readOnly ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : [],
+		...languageExtension,
+		...dynamicExtensions ?? []
+	], [
+		dark,
+		fontSize,
+		lineHeight,
+		showLineNumbers,
+		lineWrapping,
+		readOnly,
+		languageExtension,
+		dynamicExtensions
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const root = editorRoot(container);
+		installDiffChrome(root);
+		const host = new ControlledMergeHost({
+			parent: container,
+			root,
+			original,
+			modified,
+			onModifiedChange: (next) => {
+				if (modifiedTransitionRef.current) return;
+				onChangeRef.current?.(next);
+				requestControlledReconcile();
+			},
+			extensions: [
+				minijinjaContextField,
+				sqlSchemaField,
+				...documentExtensions(),
+				...extensions ?? []
+			],
+			originalExtensions: [
+				EditorState.readOnly.of(true),
+				EditorView.editable.of(false),
+				EditorView.contentAttributes.of({ "aria-label": originalAriaLabel })
+			],
+			modifiedExtensions: [EditorView.contentAttributes.of({ "aria-label": modifiedAriaLabel })],
+			dynamicExtensions: dynamic,
+			revertControls: activeRevertControls ? "a-to-b" : void 0,
+			collapseUnchanged: collapseUnchanged ? {} : void 0
+		});
+		hostRef.current = host;
+		const removeDiffControlKeyboardSupport = installDiffControlKeyboardSupport(container);
+		onMountRef.current?.(host.view);
+		return () => {
+			removeDiffControlKeyboardSupport();
+			host.destroy();
+			hostRef.current = null;
+		};
+	}, []);
+	useInsertionEffect(() => {
+		const host = hostRef.current;
+		modifiedTransitionRef.current = host !== null && host.view.b.state.doc.toString() !== modified;
+	}, [modified, reconcileRevision]);
+	useLayoutEffect(() => {
+		hostRef.current?.setOriginal(original);
+	}, [original]);
+	useLayoutEffect(() => {
+		try {
+			hostRef.current?.setModified(modified);
+		} finally {
+			modifiedTransitionRef.current = false;
+		}
+	}, [modified, reconcileRevision]);
+	useEffect(() => {
+		hostRef.current?.reconfigure(dynamic);
+	}, [dynamic]);
+	useEffect(() => {
+		hostRef.current?.view.reconfigure({
+			revertControls: activeRevertControls ? "a-to-b" : void 0,
+			collapseUnchanged: collapseUnchanged ? {} : void 0
+		});
+	}, [activeRevertControls, collapseUnchanged]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className,
+		"data-inkstone-diff": "",
+		style: {
+			height: toCssSize(height),
+			width: toCssSize(width),
+			color: diffChromeColor(dark)
+		}
+	});
+}
+//#endregion
+//#region src/codemirror-editor.tsx
+function CodeMirrorEditor({ value, onChange, language, context, sqlSchema, placeholder, lineWrapping = false, showLineNumbers = false, folding = false, spellcheck = false, search = false, extensions, dynamicExtensions, dark = false, locale = "en", height, width, fontSize = 14, lineHeight = 1.6, tabSize, className, onMount, onFocus, onBlur, ariaLabel = "Editor content" }) {
+	const containerRef = useRef(null);
+	const hostRef = useRef(null);
+	const valueTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const onChangeRef = useLatest(onChange);
+	const onMountRef = useLatest(onMount);
+	const onFocusRef = useLatest(onFocus);
+	const onBlurRef = useLatest(onBlur);
+	const lastContextKeyRef = useRef(null);
+	const lastSqlSchemaKeyRef = useRef(null);
+	const [loadedLanguage, setLoadedLanguage] = useState(null);
+	const languageExtension = useMemo(() => loadedLanguage && loadedLanguage.id === language ? [loadedLanguage.extension] : [], [language, loadedLanguage]);
+	useEffect(() => {
+		if (!language) return;
+		let cancelled = false;
+		loadLanguage(language).then((extension) => {
+			if (!cancelled) setLoadedLanguage({
+				id: language,
+				extension
+			});
+		}).catch((error) => {
+			console.error("inkstone: failed to load CodeMirror language", language, error);
+			if (!cancelled) setLoadedLanguage(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [language]);
+	const dynamic = useMemo(() => [
+		...defaultThemeExtensions(dark, height, width, fontSize, lineHeight),
+		...tabSize === void 0 ? [] : [EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))],
+		...locale === "zh-cn" ? [searchPhrasesZhCn] : [],
+		...languageExtension,
+		EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
+		...dynamicExtensions ?? []
+	], [
+		dark,
+		height,
+		width,
+		fontSize,
+		lineHeight,
+		tabSize,
+		locale,
+		languageExtension,
+		ariaLabel,
+		dynamicExtensions
+	]);
+	const contextSchema = useMemo(() => context ? normalizeContext(context) : null, [context]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const host = new ControlledEditorHost({
+			parent: container,
+			doc: value,
+			onChange: (next) => {
+				if (valueTransitionRef.current) return;
+				onChangeRef.current?.(next);
+				requestControlledReconcile();
+			},
+			extensions: [
+				minijinjaContextField,
+				sqlSchemaField,
+				...documentExtensions({
+					placeholder,
+					lineWrapping,
+					showLineNumbers,
+					folding,
+					spellcheck,
+					search
+				}),
+				EditorView.updateListener.of((update) => {
+					if (update.focusChanged) if (update.view.hasFocus) onFocusRef.current?.();
+					else onBlurRef.current?.();
+				}),
+				...extensions ?? []
+			],
+			dynamicExtensions: dynamic
+		});
+		hostRef.current = host;
+		onMountRef.current?.(host.view);
+		return () => {
+			host.destroy();
+			hostRef.current = null;
+		};
+	}, []);
+	useInsertionEffect(() => {
+		const host = hostRef.current;
+		valueTransitionRef.current = host !== null && host.view.state.doc.toString() !== value;
+	}, [reconcileRevision, value]);
+	useLayoutEffect(() => {
+		try {
+			hostRef.current?.setValue(value);
+		} finally {
+			valueTransitionRef.current = false;
+		}
+	}, [reconcileRevision, value]);
+	useEffect(() => {
+		hostRef.current?.reconfigure(dynamic);
+	}, [dynamic]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const key = contextSchema ? JSON.stringify(contextSchema) : "";
+		const last = lastContextKeyRef.current;
+		if (last?.host === host && last.key === key) return;
+		lastContextKeyRef.current = {
+			host,
+			key
+		};
+		if (key === "" && last?.host !== host) return;
+		host.view.dispatch({ effects: setMinijinjaContext.of(contextSchema) });
+	}, [contextSchema]);
+	useEffect(() => {
+		const host = hostRef.current;
+		if (!host) return;
+		const key = sqlSchema ? JSON.stringify(sqlSchema) : "";
+		const last = lastSqlSchemaKeyRef.current;
+		if (last?.host === host && last.key === key) return;
+		lastSqlSchemaKeyRef.current = {
+			host,
+			key
+		};
+		if (key === "" && last?.host !== host) return;
+		host.view.dispatch({ effects: setSqlSchema.of(sqlSchema ?? null) });
+	}, [sqlSchema]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className
+	});
+}
+//#endregion
+export { CodeMirrorDiffEditor as a, CodeMirrorEditor as i, normalizeContext$1 as n, searchPhrasesZhCn$1 as r, codeMirrorLanguages as t };

package/dist/codemirror.js

@@ -1,2 +1,2 @@
-import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-B27C5np1.js";
+import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-Bvwl0fxH.js";
 export { CodeMirrorDiffEditor, CodeMirrorEditor, codeMirrorLanguages, normalizeContext, searchPhrasesZhCn };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { a as codeMirrorLanguages, c as CodeMirrorEditor, d as CodeMirrorDiffEditorProps, i as SqlSchema, l as CodeMirrorEditorProps, n as EditorContext, o as normalizeContext, r as MergeView, s as searchPhrasesZhCn, t as CodeMirrorLanguage, u as CodeMirrorDiffEditor } from "./codemirror-B3GlIVaX.js";
-import { a as MonacoEditorProps, i as MonacoEditor, n as monacoLanguages, o as MonacoDiffEditor, r as DEFAULT_MONACO_OPTIONS, s as MonacoDiffEditorProps, t as MonacoLanguage } from "./monaco-DXifh803.js";
+import { a as MonacoEditorProps, i as MonacoEditor, n as MonacoLanguage, o as MonacoDiffEditor, r as monacoLanguages, s as MonacoDiffEditorProps, t as DEFAULT_MONACO_OPTIONS } from "./monaco-BoTcTdm-.js";
 import { n as useShikiHighlighter, t as ShikiState } from "./shiki-D-IjmhhO.js";
 export { CodeMirrorDiffEditor, type CodeMirrorDiffEditorProps, CodeMirrorEditor, type CodeMirrorEditorProps, type CodeMirrorLanguage, DEFAULT_MONACO_OPTIONS, type EditorContext, type MergeView, MonacoDiffEditor, type MonacoDiffEditorProps, MonacoEditor, type MonacoEditorProps, type MonacoLanguage, type ShikiState, type SqlSchema, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-B27C5np1.js";
-import { i as MonacoEditor, n as MonacoDiffEditor, r as DEFAULT_MONACO_OPTIONS, t as monacoLanguages } from "./monaco-CP5BIXrw.js";
+import { a as CodeMirrorDiffEditor, i as CodeMirrorEditor, n as normalizeContext, r as searchPhrasesZhCn, t as codeMirrorLanguages } from "./codemirror-Bvwl0fxH.js";
+import { i as MonacoDiffEditor, n as monacoLanguages, r as MonacoEditor, t as DEFAULT_MONACO_OPTIONS } from "./monaco-IkYCUn1k.js";
 import { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";
 import "./shiki.js";
 export { CodeMirrorDiffEditor, CodeMirrorEditor, DEFAULT_MONACO_OPTIONS, MonacoDiffEditor, MonacoEditor, codeMirrorLanguages, monacoLanguages, normalizeContext, searchPhrasesZhCn, useShikiHighlighter };

package/dist/{monaco-DXifh803.d.ts → monaco-BoTcTdm-.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
+import { DEFAULT_MONACO_OPTIONS as DEFAULT_MONACO_OPTIONS$1, MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { BeforeMount, DiffBeforeMount, DiffOnMount, OnMount } from "@monaco-editor/react";
-import { MonacoHostOptions, MonacoLanguage, MonacoLanguage as MonacoLanguage$1, MonacoUiLocale, monacoLanguages } from "@coldsmirk/inkstone-monaco";
 import { editor } from "monaco-editor";
 
 //#region src/monaco-diff-editor.d.ts
@@ -163,13 +163,6 @@ declare function MonacoDiffEditor({
 }: MonacoDiffEditorProps): ReactNode;
 //#endregion
 //#region src/monaco-editor.d.ts
-/**
- * Baseline construction options shared by every inkstone Monaco editor: no minimap, compact
- * code type, in-place layout tracking, widgets floated above clipping containers, completion
- * tuned for API-assisted editing, thin scrollbars, and an embedded-friendly find widget.
- * Spread these to extend rather than replace: `options={{ ...DEFAULT_MONACO_OPTIONS, wordWrap: "on" }}`.
- */
-declare const DEFAULT_MONACO_OPTIONS: editor.IStandaloneEditorConstructionOptions;
 interface MonacoEditorProps {
   /**
    * The controlled document text.
@@ -357,4 +350,4 @@ declare function MonacoEditor({
   onBlur
 }: MonacoEditorProps): ReactNode;
 //#endregion
-export { MonacoEditorProps as a, MonacoEditor as i, monacoLanguages as n, MonacoDiffEditor as o, DEFAULT_MONACO_OPTIONS as r, MonacoDiffEditorProps as s, MonacoLanguage$1 as t };
+export { MonacoEditorProps as a, MonacoEditor as i, MonacoLanguage$1 as n, MonacoDiffEditor as o, monacoLanguages as r, MonacoDiffEditorProps as s, DEFAULT_MONACO_OPTIONS$1 as t };