@coldsmirk/inkstone-react 0.9.0 → 0.10.1

package/dist/monaco-CP5BIXrw.js

@@ -0,0 +1,403 @@
+import { n as useControlledReconcileSignal, r as CODE_FONT_FAMILY, t as useLatest } from "./use-latest-BhihMdOp.js";
+import { t as useShikiHighlighter } from "./use-shiki-highlighter-CzSQcX2f.js";
+import { useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { shikiThemeId } from "@coldsmirk/inkstone-core";
+import { DiffEditor, Editor, loader } from "@monaco-editor/react";
+import { disabledKeybindings, ensureMonacoHost, installDisabledKeybindings, monacoLanguages } from "@coldsmirk/inkstone-monaco";
+import { shikiToMonaco } from "@shikijs/monaco";
+//#region src/editor-face.tsx
+const FACE_STYLE = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	height: "100%",
+	width: "100%"
+};
+function EditorFace({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: FACE_STYLE,
+		children
+	});
+}
+//#endregion
+//#region src/monaco-reconcile.ts
+function reconcileModelValue(model, externalValue) {
+	const value = normalizeModelValue(model, externalValue);
+	const current = model.getValue();
+	if (value === current) return;
+	const shorter = Math.min(current.length, value.length);
+	let from = 0;
+	while (from < shorter && current.codePointAt(from) === value.codePointAt(from)) from += 1;
+	let currentEnd = current.length;
+	let valueEnd = value.length;
+	while (currentEnd > from && valueEnd > from && current.codePointAt(currentEnd - 1) === value.codePointAt(valueEnd - 1)) {
+		currentEnd -= 1;
+		valueEnd -= 1;
+	}
+	const start = model.getPositionAt(from);
+	const end = model.getPositionAt(currentEnd);
+	model.applyEdits([{
+		range: {
+			startLineNumber: start.lineNumber,
+			startColumn: start.column,
+			endLineNumber: end.lineNumber,
+			endColumn: end.column
+		},
+		text: value.slice(from, valueEnd)
+	}]);
+}
+function modelValueMatches(model, externalValue) {
+	return model.getValue() === normalizeModelValue(model, externalValue);
+}
+function normalizeModelValue(model, externalValue) {
+	return externalValue.split(/\r\n|\r|\n/).join(model.getEOL());
+}
+//#endregion
+//#region src/use-monaco-host.ts
+const BOOTSTRAP_KEY = Symbol.for("coldsmirk.inkstone.react.monacoBootstrap");
+function bootstrapRegistry() {
+	const host = globalThis;
+	const existing = host[BOOTSTRAP_KEY];
+	if (existing?.configuredLoaders && existing.shikiMonacoModules) return existing;
+	const registry = {
+		configuredLoaders: /* @__PURE__ */ new WeakSet(),
+		shikiMonacoModules: /* @__PURE__ */ new WeakSet()
+	};
+	host[BOOTSTRAP_KEY] = registry;
+	return registry;
+}
+function configureMonacoLoader(targetLoader, monaco) {
+	const registry = bootstrapRegistry();
+	if (registry.configuredLoaders.has(targetLoader)) return;
+	targetLoader.config({ monaco });
+	registry.configuredLoaders.add(targetLoader);
+}
+function registerShikiHighlighting(monaco, highlighter) {
+	const registry = bootstrapRegistry();
+	if (registry.shikiMonacoModules.has(monaco)) return;
+	const canonical = new Set(highlighter.getLoadedLanguages().map((id) => highlighter.getLanguage(id).name));
+	const registered = new Set(monaco.languages.getLanguages().map((registeredLanguage) => registeredLanguage.id));
+	for (const lang of canonical) if (!registered.has(lang)) monaco.languages.register({ id: lang });
+	const shikiThemes = new Set(highlighter.getLoadedThemes());
+	const originalCreate = monaco.editor.create;
+	const originalSetTheme = monaco.editor.setTheme;
+	try {
+		shikiToMonaco(highlighter, monaco);
+		const setShikiTheme = monaco.editor.setTheme;
+		monaco.editor.setTheme = (themeName) => {
+			if (shikiThemes.has(themeName)) setShikiTheme.call(monaco.editor, themeName);
+			else originalSetTheme.call(monaco.editor, themeName);
+		};
+	} catch (error) {
+		monaco.editor.create = originalCreate;
+		monaco.editor.setTheme = originalSetTheme;
+		throw error;
+	}
+	registry.shikiMonacoModules.add(monaco);
+}
+function useMonacoHost(locale, hostOptions) {
+	const [state, setState] = useState("loading");
+	const hostOptionsRef = useRef(hostOptions);
+	const localeRef = useRef(locale);
+	useEffect(() => {
+		let cancelled = false;
+		ensureMonacoHost({
+			...hostOptionsRef.current,
+			locale: localeRef.current ?? hostOptionsRef.current?.locale
+		}).then((monaco) => {
+			configureMonacoLoader(loader, monaco);
+			if (!cancelled) setState("ready");
+		}).catch((error) => {
+			console.error("inkstone: monaco host failed to load", error);
+			if (!cancelled) setState("failed");
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+	return state;
+}
+//#endregion
+//#region src/monaco-editor.tsx
+const DEFAULT_MONACO_OPTIONS = {
+	find: { addExtraSpaceOnTop: false },
+	minimap: { enabled: false },
+	fontSize: 14,
+	lineHeight: 1.6,
+	fontFamily: CODE_FONT_FAMILY,
+	scrollBeyondLastLine: false,
+	automaticLayout: true,
+	renderLineHighlight: "line",
+	smoothScrolling: true,
+	padding: {
+		top: 12,
+		bottom: 12
+	},
+	fixedOverflowWidgets: true,
+	quickSuggestions: {
+		other: true,
+		comments: false,
+		strings: true
+	},
+	wordBasedSuggestions: "off",
+	tabCompletion: "on",
+	scrollbar: {
+		alwaysConsumeMouseWheel: false,
+		verticalScrollbarSize: 8,
+		horizontalScrollbarSize: 8
+	}
+};
+function documentOptions({ placeholder, lineWrapping, showLineNumbers, folding, disableContextMenu, fontSize, lineHeight, tabSize }) {
+	const resolved = {
+		placeholder,
+		wordWrap: lineWrapping ? "on" : "off",
+		lineNumbers: showLineNumbers ? "on" : "off",
+		folding,
+		contextmenu: !disableContextMenu
+	};
+	if (fontSize !== void 0) resolved.fontSize = fontSize;
+	if (lineHeight !== void 0) resolved.lineHeight = lineHeight;
+	if (tabSize !== void 0) resolved.tabSize = tabSize;
+	return resolved;
+}
+function reconcileModel(monaco, editorInstance, value, language, reconciling) {
+	const model = editorInstance.getModel();
+	if (!model) return;
+	reconciling.current = true;
+	try {
+		reconcileModelValue(model, value);
+	} finally {
+		reconciling.current = false;
+	}
+	if (model.getLanguageId() !== language) monaco.editor.setModelLanguage(model, language);
+}
+function MonacoEditor({ value, onChange, language = "javascript", dark = false, locale, placeholder, lineWrapping = false, showLineNumbers = false, folding = false, disableContextMenu = false, disableFind = false, disableCommandPalette = false, fontSize, lineHeight, tabSize = 2, path, height = "100%", width, className, options, hostOptions, loading = "Loading editor…", failure = "Editor failed to load", beforeMount, onMount, onFocus, onBlur }) {
+	const hostState = useMonacoHost(locale, hostOptions);
+	const { state: shikiState, highlighterRef } = useShikiHighlighter();
+	const beforeMountRef = useLatest(beforeMount);
+	const onMountRef = useLatest(onMount);
+	const onFocusRef = useLatest(onFocus);
+	const onBlurRef = useLatest(onBlur);
+	const onChangeRef = useLatest(onChange);
+	const valueRef = useLatest(value);
+	const languageRef = useLatest(language);
+	const editorRef = useRef(null);
+	const monacoRef = useRef(null);
+	const appliedPathRef = useRef(path);
+	const pathChangingRef = useRef(false);
+	const valueTransitionRef = useRef(false);
+	const reconcilingRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	useInsertionEffect(() => {
+		pathChangingRef.current = path !== appliedPathRef.current;
+	}, [path]);
+	useInsertionEffect(() => {
+		const model = editorRef.current?.getModel();
+		valueTransitionRef.current = model !== null && model !== void 0 && !modelValueMatches(model, value);
+	}, [reconcileRevision, value]);
+	useLayoutEffect(() => {
+		if (pathChangingRef.current) return;
+		try {
+			const editorInstance = editorRef.current;
+			const monaco = monacoRef.current;
+			if (editorInstance && monaco) reconcileModel(monaco, editorInstance, value, languageRef.current, reconcilingRef);
+		} finally {
+			valueTransitionRef.current = false;
+		}
+	}, [
+		languageRef,
+		reconcileRevision,
+		value
+	]);
+	useEffect(() => {
+		try {
+			const editorInstance = editorRef.current;
+			const monaco = monacoRef.current;
+			if (editorInstance && monaco) reconcileModel(monaco, editorInstance, valueRef.current, languageRef.current, reconcilingRef);
+		} finally {
+			appliedPathRef.current = path;
+			pathChangingRef.current = false;
+			valueTransitionRef.current = false;
+		}
+	}, [
+		languageRef,
+		path,
+		valueRef
+	]);
+	const handleChange = useCallback((next) => {
+		if (pathChangingRef.current || valueTransitionRef.current || reconcilingRef.current) return;
+		onChangeRef.current?.(next ?? "");
+		requestControlledReconcile();
+	}, [onChangeRef, requestControlledReconcile]);
+	const mergedOptions = useMemo(() => {
+		return {
+			...DEFAULT_MONACO_OPTIONS,
+			...documentOptions({
+				placeholder,
+				lineWrapping,
+				showLineNumbers,
+				folding,
+				disableContextMenu,
+				fontSize,
+				lineHeight,
+				tabSize
+			}),
+			...options
+		};
+	}, [
+		placeholder,
+		lineWrapping,
+		showLineNumbers,
+		folding,
+		disableContextMenu,
+		fontSize,
+		lineHeight,
+		tabSize,
+		options
+	]);
+	if (hostState === "failed") return /* @__PURE__ */ jsx(EditorFace, { children: failure });
+	if (hostState === "loading" || shikiState === "loading") return /* @__PURE__ */ jsx(EditorFace, { children: loading });
+	const handleBeforeMount = (monaco) => {
+		const highlighter = highlighterRef.current;
+		if (highlighter) registerShikiHighlighting(monaco, highlighter);
+		beforeMountRef.current?.(monaco);
+	};
+	const handleMount = (editorInstance, monaco) => {
+		editorRef.current = editorInstance;
+		monacoRef.current = monaco;
+		reconcileModel(monaco, editorInstance, valueRef.current, languageRef.current, reconcilingRef);
+		installDisabledKeybindings(monaco, editorInstance, disabledKeybindings(monaco, disableFind, disableCommandPalette));
+		editorInstance.onDidFocusEditorText(() => onFocusRef.current?.());
+		editorInstance.onDidBlurEditorText(() => onBlurRef.current?.());
+		onMountRef.current?.(editorInstance, monaco);
+	};
+	return /* @__PURE__ */ jsx(Editor, {
+		beforeMount: handleBeforeMount,
+		className,
+		defaultValue: value,
+		height,
+		language,
+		loading,
+		options: mergedOptions,
+		path,
+		theme: shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs",
+		width,
+		onChange: handleChange,
+		onMount: handleMount
+	});
+}
+//#endregion
+//#region src/monaco-diff-editor.tsx
+function diffDocumentOptions({ lineWrapping, showLineNumbers, readOnly, collapseUnchanged, fontSize, lineHeight }) {
+	const resolved = {
+		wordWrap: lineWrapping ? "on" : "off",
+		lineNumbers: showLineNumbers ? "on" : "off",
+		readOnly,
+		hideUnchangedRegions: { enabled: collapseUnchanged }
+	};
+	if (fontSize !== void 0) resolved.fontSize = fontSize;
+	if (lineHeight !== void 0) resolved.lineHeight = lineHeight;
+	return resolved;
+}
+function reconcilePane(model, value, reconciling) {
+	if (!model) return;
+	reconciling.current = true;
+	try {
+		reconcileModelValue(model, value);
+	} finally {
+		reconciling.current = false;
+	}
+}
+function MonacoDiffEditor({ original, modified, onChange, language = "javascript", dark = false, locale, readOnly = false, collapseUnchanged = false, lineWrapping = false, showLineNumbers = true, fontSize, lineHeight, height = "100%", width, className, options, hostOptions, loading = "Loading editor…", failure = "Editor failed to load", beforeMount, onMount }) {
+	const hostState = useMonacoHost(locale, hostOptions);
+	const { state: shikiState, highlighterRef } = useShikiHighlighter();
+	const beforeMountRef = useLatest(beforeMount);
+	const onMountRef = useLatest(onMount);
+	const onChangeRef = useLatest(onChange);
+	const originalRef = useLatest(original);
+	const modifiedRef = useLatest(modified);
+	const diffEditorRef = useRef(null);
+	const reconcilingRef = useRef(false);
+	const modifiedTransitionRef = useRef(false);
+	const [reconcileRevision, requestControlledReconcile] = useControlledReconcileSignal();
+	const initialValuesRef = useRef({
+		original,
+		modified
+	});
+	const mergedOptions = useMemo(() => {
+		return {
+			...DEFAULT_MONACO_OPTIONS,
+			...diffDocumentOptions({
+				lineWrapping,
+				showLineNumbers,
+				readOnly,
+				collapseUnchanged,
+				fontSize,
+				lineHeight
+			}),
+			...options
+		};
+	}, [
+		lineWrapping,
+		showLineNumbers,
+		readOnly,
+		collapseUnchanged,
+		fontSize,
+		lineHeight,
+		options
+	]);
+	useLayoutEffect(() => {
+		reconcilePane(diffEditorRef.current?.getOriginalEditor().getModel() ?? null, original, reconcilingRef);
+	}, [original]);
+	useInsertionEffect(() => {
+		const model = diffEditorRef.current?.getModifiedEditor().getModel();
+		modifiedTransitionRef.current = model !== null && model !== void 0 && !modelValueMatches(model, modified);
+	}, [modified, reconcileRevision]);
+	useLayoutEffect(() => {
+		try {
+			reconcilePane(diffEditorRef.current?.getModifiedEditor().getModel() ?? null, modified, reconcilingRef);
+		} finally {
+			modifiedTransitionRef.current = false;
+		}
+	}, [modified, reconcileRevision]);
+	if (hostState === "failed") return /* @__PURE__ */ jsx(EditorFace, { children: failure });
+	if (hostState === "loading" || shikiState === "loading") return /* @__PURE__ */ jsx(EditorFace, { children: loading });
+	const handleBeforeMount = (monaco) => {
+		const highlighter = highlighterRef.current;
+		if (highlighter) registerShikiHighlighting(monaco, highlighter);
+		beforeMountRef.current?.(monaco);
+	};
+	const handleMount = (diffEditor, monaco) => {
+		initialValuesRef.current = {
+			original: originalRef.current,
+			modified: modifiedRef.current
+		};
+		diffEditorRef.current = diffEditor;
+		const modifiedEditor = diffEditor.getModifiedEditor();
+		modifiedEditor.onDidChangeModelContent(() => {
+			if (reconcilingRef.current || modifiedTransitionRef.current) return;
+			onChangeRef.current?.(modifiedEditor.getValue());
+			requestControlledReconcile();
+		});
+		reconcilePane(diffEditor.getOriginalEditor().getModel(), originalRef.current, reconcilingRef);
+		reconcilePane(modifiedEditor.getModel(), modifiedRef.current, reconcilingRef);
+		onMountRef.current?.(diffEditor, monaco);
+	};
+	const theme = shikiState === "ready" ? shikiThemeId(dark) : dark ? "vs-dark" : "vs";
+	return /* @__PURE__ */ jsx(DiffEditor, {
+		beforeMount: handleBeforeMount,
+		className,
+		height,
+		language,
+		loading,
+		modified: diffEditorRef.current ? initialValuesRef.current.modified : modified,
+		options: mergedOptions,
+		original: diffEditorRef.current ? initialValuesRef.current.original : original,
+		theme,
+		width,
+		onMount: handleMount
+	});
+}
+//#endregion
+export { MonacoEditor as i, MonacoDiffEditor as n, DEFAULT_MONACO_OPTIONS as r, monacoLanguages as t };