@coldsmirk/inkstone-react 0.10.1 → 0.12.0

package/dist/codemirror-B27C5np1.js

@@ -1,604 +0,0 @@
-import { n as useControlledReconcileSignal, r as CODE_FONT_FAMILY, t as useLatest } from "./use-latest-BhihMdOp.js";
-import { flavors } from "@catppuccin/palette";
-import { EditorState, Prec } from "@codemirror/state";
-import { EditorView, lineNumbers } from "@codemirror/view";
-import { ControlledEditorHost, ControlledMergeHost, codeMirrorLanguages, documentExtensions, loadLanguage, normalizeContext, normalizeContext as normalizeContext$1, searchPhrasesZhCn, searchPhrasesZhCn as searchPhrasesZhCn$1, setMinijinjaContext, setSqlSchema } from "@coldsmirk/inkstone-codemirror";
-import { useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { catppuccinLatte, catppuccinMacchiato } from "@catppuccin/codemirror";
-import { jsx } from "react/jsx-runtime";
-import { indentUnit } from "@codemirror/language";
-//#region src/codemirror-theme.ts
-function toCssSize(value) {
-	if (value === void 0) return;
-	return typeof value === "number" ? `${value}px` : value;
-}
-function alphaOf(color, alphaValue) {
-	return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${alphaValue})`;
-}
-function completionIconMask(body) {
-	const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
-	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
-}
-const COMPLETION_ICON_FALLBACK = completionIconMask("<circle cx=\"8\" cy=\"8\" r=\"2.5\"/>");
-const COMPLETION_ICONS = {
-	keyword: completionIconMask("<path d=\"M5.5 5 2.5 8l3 3\"/><path d=\"m10.5 5 3 3-3 3\"/>"),
-	function: completionIconMask("<path d=\"M10.8 3.4c-2-.4-2.9.7-3.2 2.5L6.4 12c-.3 1.7-1.2 2.2-2.6 1.8\"/><path d=\"M4.6 7.5h5\"/>"),
-	method: completionIconMask("<path d=\"M10.8 3.4c-2-.4-2.9.7-3.2 2.5L6.4 12c-.3 1.7-1.2 2.2-2.6 1.8\"/><path d=\"M4.6 7.5h5\"/>"),
-	variable: completionIconMask("<path d=\"M4 5c2.2 0 5.3 6 8 6\"/><path d=\"M12 5c-2.7 0-5.8 6-8 6\"/>"),
-	constant: completionIconMask("<path d=\"M3.5 5.2h9\"/><path d=\"M6.2 5.2v6.3\"/><path d=\"M10.2 5.2v4.4c0 1.3.6 1.9 1.7 1.9\"/>"),
-	property: completionIconMask("<circle cx=\"4.9\" cy=\"11.1\" r=\"1.8\"/><circle cx=\"11.1\" cy=\"4.9\" r=\"1.8\"/><path d=\"M6.4 9.6l3.2-3.2\"/>"),
-	class: completionIconMask("<rect x=\"3.5\" y=\"3.5\" width=\"9\" height=\"9\" rx=\"2.2\"/>"),
-	interface: completionIconMask("<circle cx=\"8\" cy=\"8\" r=\"4.5\"/>"),
-	type: completionIconMask("<path d=\"M4 4.5h8\"/><path d=\"M8 4.5V12\"/>"),
-	enum: completionIconMask("<path d=\"M6.5 4.5h6\"/><path d=\"M6.5 8h6\"/><path d=\"M6.5 11.5h6\"/><path d=\"M3.4 4.5h.01\"/><path d=\"M3.4 8h.01\"/><path d=\"M3.4 11.5h.01\"/>"),
-	namespace: completionIconMask("<path d=\"M6.2 3.5c-1.3 0-1.9.6-1.9 1.9v1.2c0 .9-.4 1.4-1.3 1.4.9 0 1.3.5 1.3 1.4v1.2c0 1.3.6 1.9 1.9 1.9\"/><path d=\"M9.8 3.5c1.3 0 1.9.6 1.9 1.9v1.2c0 .9.4 1.4 1.3 1.4-.9 0-1.3.5-1.3 1.4v1.2c0 1.3-.6 1.9-1.9 1.9\"/>"),
-	text: completionIconMask("<path d=\"M3.5 5h9\"/><path d=\"M3.5 8h9\"/><path d=\"M3.5 11h5.5\"/>")
-};
-function completionIconRules() {
-	const rules = {};
-	for (const [kind, mask] of Object.entries(COMPLETION_ICONS)) rules[`.cm-completionIcon-${kind}:after`] = {
-		maskImage: mask,
-		WebkitMaskImage: mask
-	};
-	return rules;
-}
-function chromeTheme(dark) {
-	const { colors } = dark ? flavors.macchiato : flavors.latte;
-	const hairline = `1px solid ${alphaOf(colors.overlay0, .35)}`;
-	const frame = {
-		border: hairline,
-		borderRadius: "8px",
-		boxShadow: dark ? "0 8px 24px rgba(0, 0, 0, 0.5)" : "0 8px 24px rgba(0, 0, 0, 0.12)",
-		color: colors.text.hex
-	};
-	return EditorView.theme({
-		"&": { colorScheme: dark ? "dark" : "light" },
-		".cm-scroller": { fontFamily: CODE_FONT_FAMILY },
-		".cm-tooltip": frame,
-		".cm-tooltip.cm-tooltip-autocomplete": {
-			...frame,
-			"& > ul": {
-				borderRadius: "7px",
-				padding: "4px",
-				maxHeight: "16em"
-			},
-			"& > ul > li": {
-				display: "flex",
-				alignItems: "center",
-				padding: "3px 8px",
-				borderRadius: "5px",
-				lineHeight: "1.45"
-			}
-		},
-		".cm-completionLabel": {
-			minWidth: "0",
-			overflow: "hidden",
-			textOverflow: "ellipsis"
-		},
-		".cm-completionMatchedText": {
-			textDecoration: "none",
-			fontWeight: "600",
-			color: colors.blue.hex
-		},
-		".cm-completionDetail": {
-			marginLeft: "auto",
-			paddingLeft: "12px",
-			fontStyle: "normal",
-			fontSize: "85%",
-			color: colors.overlay1.hex
-		},
-		".cm-completionIcon": {
-			width: "14px",
-			paddingRight: "8px",
-			opacity: "1",
-			color: colors.overlay1.hex
-		},
-		".cm-completionIcon:after": {
-			content: "''",
-			display: "block",
-			width: "12px",
-			height: "12px",
-			backgroundColor: "currentColor",
-			maskImage: COMPLETION_ICON_FALLBACK,
-			WebkitMaskImage: COMPLETION_ICON_FALLBACK,
-			maskRepeat: "no-repeat",
-			WebkitMaskRepeat: "no-repeat",
-			maskPosition: "center",
-			WebkitMaskPosition: "center",
-			maskSize: "contain",
-			WebkitMaskSize: "contain"
-		},
-		...completionIconRules(),
-		".cm-completionIcon-keyword": { color: colors.mauve.hex },
-		".cm-completionIcon-function, .cm-completionIcon-method": { color: colors.blue.hex },
-		".cm-completionIcon-variable": { color: colors.peach.hex },
-		".cm-completionIcon-constant": { color: colors.sky.hex },
-		".cm-completionIcon-property": { color: colors.teal.hex },
-		".cm-completionIcon-namespace": { color: colors.sapphire.hex },
-		".cm-completionIcon-text": { color: colors.overlay1.hex },
-		".cm-completionIcon-class, .cm-completionIcon-type, .cm-completionIcon-interface, .cm-completionIcon-enum": { color: colors.yellow.hex },
-		".cm-tooltip.cm-completionInfo": {
-			...frame,
-			padding: "8px 10px",
-			maxWidth: "26em"
-		},
-		".cm-tooltip-lint": {
-			padding: "4px",
-			maxWidth: "26em",
-			overflowWrap: "anywhere"
-		},
-		".cm-diagnostic": {
-			margin: "0",
-			padding: "3px 8px",
-			borderLeftWidth: "3px",
-			borderRadius: "5px",
-			lineHeight: "1.45"
-		},
-		".cm-diagnostic-error": { borderLeftColor: colors.red.hex },
-		".cm-diagnostic-warning": { borderLeftColor: colors.yellow.hex },
-		".cm-diagnostic-info": { borderLeftColor: colors.overlay1.hex },
-		".cm-diagnostic-hint": { borderLeftColor: colors.blue.hex },
-		".cm-diagnosticAction": {
-			padding: "2px 6px",
-			backgroundColor: colors.surface1.hex,
-			color: colors.text.hex,
-			borderRadius: "4px"
-		},
-		".cm-diagnosticSource": {
-			fontSize: "85%",
-			color: colors.overlay1.hex,
-			opacity: "1"
-		},
-		"&.cm-focused": { outline: "none" },
-		".cm-activeLine": { backgroundColor: alphaOf(colors.overlay0, .12) },
-		".cm-activeLineGutter": { backgroundColor: alphaOf(colors.overlay0, .12) },
-		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { backgroundColor: alphaOf(colors.blue, dark ? .35 : .25) },
-		".cm-selectionBackground": { backgroundColor: alphaOf(colors.blue, dark ? .2 : .14) },
-		".cm-content ::selection": { backgroundColor: alphaOf(colors.blue, dark ? .35 : .25) },
-		".cm-scroller, .cm-tooltip-autocomplete > ul, .cm-tooltip.cm-completionInfo": {
-			scrollbarWidth: "thin",
-			scrollbarColor: `${alphaOf(colors.overlay0, .55)} transparent`
-		},
-		".cm-panels.cm-panels-top": { borderBottom: hairline },
-		".cm-panels.cm-panels-bottom": { borderTop: hairline },
-		".cm-panel.cm-search, .cm-panel.cm-gotoLine": {
-			position: "relative",
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: "center",
-			columnGap: "8px",
-			rowGap: "8px",
-			margin: "0",
-			padding: "10px 44px 10px 14px"
-		},
-		".cm-panel.cm-search br": {
-			flexBasis: "100%",
-			height: "0",
-			margin: "0",
-			border: "none"
-		},
-		".cm-panel.cm-search label, .cm-panel.cm-gotoLine label": {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: "6px",
-			margin: "0",
-			fontSize: "12.5px",
-			color: colors.subtext0.hex,
-			cursor: "pointer",
-			userSelect: "none"
-		},
-		".cm-panel.cm-search input[type=checkbox]": {
-			margin: "0",
-			width: "14px",
-			height: "14px",
-			accentColor: colors.blue.hex
-		},
-		".cm-panel.cm-search button[name=close]": {
-			position: "absolute",
-			top: "10px",
-			right: "10px",
-			boxSizing: "border-box",
-			width: "28px",
-			height: "28px",
-			padding: "0",
-			display: "inline-flex",
-			alignItems: "center",
-			justifyContent: "center",
-			fontSize: "16px",
-			lineHeight: "1",
-			color: colors.overlay1.hex,
-			background: "transparent",
-			border: "none",
-			borderRadius: "6px",
-			cursor: "pointer"
-		},
-		".cm-panel.cm-search button[name=close]:hover": {
-			backgroundColor: colors.surface0.hex,
-			color: colors.text.hex
-		},
-		".cm-panel .cm-textfield": {
-			boxSizing: "border-box",
-			height: "28px",
-			width: "240px",
-			maxWidth: "100%",
-			margin: "0",
-			padding: "0 10px",
-			fontSize: "12.5px",
-			color: colors.text.hex,
-			backgroundColor: colors.base.hex,
-			border: hairline,
-			borderRadius: "6px"
-		},
-		".cm-panel .cm-textfield:focus": {
-			outline: "none",
-			borderColor: alphaOf(colors.blue, .6),
-			boxShadow: `0 0 0 2px ${alphaOf(colors.blue, .2)}`
-		},
-		".cm-panel .cm-button": {
-			boxSizing: "border-box",
-			height: "28px",
-			margin: "0",
-			padding: "0 12px",
-			fontSize: "12.5px",
-			color: colors.text.hex,
-			backgroundImage: "none",
-			backgroundColor: colors.surface0.hex,
-			border: hairline,
-			borderRadius: "6px",
-			cursor: "pointer"
-		},
-		".cm-panel .cm-button:hover": { backgroundColor: colors.surface1.hex },
-		".cm-panel .cm-button:active": {
-			backgroundImage: "none",
-			backgroundColor: colors.surface1.hex
-		}
-	}, { dark });
-}
-function defaultThemeExtensions(dark, height, width, fontSize, lineHeight) {
-	const extensions = [Prec.low(chromeTheme(dark)), Prec.low(dark ? catppuccinMacchiato : catppuccinLatte)];
-	const cssHeight = toCssSize(height);
-	const cssWidth = toCssSize(width);
-	if (cssHeight !== void 0 || cssWidth !== void 0 || fontSize !== void 0 || lineHeight !== void 0) {
-		const root = {};
-		if (cssHeight !== void 0) root.height = cssHeight;
-		if (cssWidth !== void 0) root.width = cssWidth;
-		if (fontSize !== void 0) root.fontSize = `${fontSize}px`;
-		const spec = { "&": root };
-		const scroller = {};
-		if (cssHeight !== void 0) scroller.overflow = "auto";
-		if (lineHeight !== void 0) scroller.lineHeight = lineHeight < 8 ? String(lineHeight) : `${lineHeight}px`;
-		if (Object.keys(scroller).length > 0) spec[".cm-scroller"] = scroller;
-		extensions.push(EditorView.theme(spec));
-	}
-	return extensions;
-}
-//#endregion
-//#region src/codemirror-diff-editor.tsx
-function mergeTheme(dark) {
-	const { colors } = dark ? flavors.macchiato : flavors.latte;
-	const removed = colors.red;
-	const added = colors.green;
-	const underline = (color) => `linear-gradient(${alphaOf(color, .5)}, ${alphaOf(color, .5)}) bottom/100% 2px no-repeat`;
-	return EditorView.theme({
-		"&.cm-merge-a .cm-changedLine": { backgroundColor: alphaOf(removed, dark ? .14 : .09) },
-		"&.cm-merge-b .cm-changedLine": { backgroundColor: alphaOf(added, dark ? .14 : .09) },
-		"&.cm-merge-a .cm-changedText": { background: underline(removed) },
-		"&.cm-merge-b .cm-changedText": { background: underline(added) },
-		"&.cm-merge-a .cm-changedLineGutter": { background: removed.hex },
-		"&.cm-merge-b .cm-changedLineGutter": { background: added.hex },
-		".cm-collapsedLines": {
-			color: colors.subtext0.hex,
-			background: `linear-gradient(to bottom, transparent 0, ${colors.surface0.hex} 30%, ${colors.surface0.hex} 70%, transparent 100%)`
-		}
-	}, { dark });
-}
-const DIFF_CHROME_STYLE_SELECTOR = "style[data-inkstone=\"codemirror-diff\"]";
-function installDiffChrome(root) {
-	if (root.querySelector(DIFF_CHROME_STYLE_SELECTOR)) return;
-	const style = (root.nodeType === 9 ? root : root.host.ownerDocument).createElement("style");
-	style.dataset.inkstone = "codemirror-diff";
-	style.textContent = [
-		"[data-inkstone-diff] > .cm-mergeView { height: 100%; }",
-		"[data-inkstone-diff] .cm-merge-revert button { color: inherit; border-radius: 4px; }",
-		"[data-inkstone-diff] .cm-merge-revert button:hover { background-color: color-mix(in srgb, currentColor 15%, transparent); }"
-	].join("\n");
-	if (root.nodeType === 9) root.head.append(style);
-	else root.append(style);
-}
-function editorRoot(container) {
-	const root = container.getRootNode();
-	if (root.nodeType === 9 || root.nodeType === 11 && "host" in root) return root;
-	return container.ownerDocument;
-}
-function eventElement(event) {
-	const target = event.target;
-	return target?.nodeType === 1 ? target : target?.parentElement ?? null;
-}
-function installDiffControlKeyboardSupport(container) {
-	const enhanceControls = () => {
-		for (const control of container.querySelectorAll(":scope .cm-collapsedLines")) {
-			control.setAttribute("role", "button");
-			control.tabIndex = 0;
-		}
-		for (const button of container.querySelectorAll(":scope .cm-merge-revert button")) button.type = "button";
-	};
-	const handleClick = (event) => {
-		if (event.detail !== 0) return;
-		const button = eventElement(event)?.closest(".cm-merge-revert button");
-		if (!button || !container.contains(button)) return;
-		event.preventDefault();
-		const MouseEventConstructor = container.ownerDocument.defaultView?.MouseEvent ?? MouseEvent;
-		button.dispatchEvent(new MouseEventConstructor("mousedown", {
-			bubbles: true,
-			button: 0,
-			cancelable: true
-		}));
-	};
-	const handleKeyDown = (event) => {
-		if (event.key !== "Enter" && event.key !== " ") return;
-		const control = eventElement(event)?.closest(".cm-collapsedLines");
-		if (!control || !container.contains(control)) return;
-		event.preventDefault();
-		event.stopPropagation();
-		control.click();
-	};
-	enhanceControls();
-	const observer = new MutationObserver(enhanceControls);
-	observer.observe(container, {
-		childList: true,
-		subtree: true
-	});
-	container.addEventListener("click", handleClick);
-	container.addEventListener("keydown", handleKeyDown, { capture: true });
-	return () => {
-		observer.disconnect();
-		container.removeEventListener("click", handleClick);
-		container.removeEventListener("keydown", handleKeyDown, { capture: true });
-	};
-}
-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: [...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: (dark ? flavors.macchiato : flavors.latte).colors.overlay1.hex
-		}
-	});
-}
-//#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: [
-				...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 };