@haklex/rich-renderer-codeblock 0.0.81 → 0.0.83

package/dist/index.mjs

@@ -1,246 +1,278 @@
-import { normalizeLanguage } from "./constants.mjs";
-import { _ as semanticClassNames, d as lang, f as langInput, i as body, n as LanguageIcon, r as hasLanguageIcon } from "./icons-CnFW5y6g.js";
-import { n as CodeBlockCard, t as CodeBlockRenderer } from "./CodeBlockRenderer-ECu_hR7l.js";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { Compartment, EditorSelection, EditorState, Prec } from "@codemirror/state";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { history, defaultKeymap, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { Compartment, Prec, EditorState, EditorSelection } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { getThemeExtensions, isOnFirstLine, isOnLastLine, loadLanguageExtension } from "@haklex/cm-editor";
-import { useColorScheme, useVariant } from "@haklex/rich-editor";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@haklex/rich-editor-ui";
+import { isOnFirstLine, isOnLastLine, getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
+import { useVariant, useColorScheme } from "@haklex/rich-editor";
+import { useCallback, useMemo, useState, useRef, useEffect } from "react";
+import { a as CodeBlockCard } from "./CodeBlockRenderer-DSXP75Xm.js";
+import { C } from "./CodeBlockRenderer-DSXP75Xm.js";
+import { normalizeLanguage } from "./constants.mjs";
+import { Combobox, ComboboxInput, ComboboxContent, ComboboxEmpty, ComboboxList, ComboboxItem } from "@haklex/rich-editor-ui";
 import { bundledLanguagesInfo } from "shiki/bundle/web";
-//#region src/LanguageCombobox.tsx
-var languageItems = bundledLanguagesInfo.map((info) => ({
-	id: info.id,
-	name: info.name
+import "@iconify/utils";
+import "@iconify-json/material-icon-theme";
+import { l as lang, s as semanticClassNames, h as hasLanguageIcon, a as LanguageIcon, b as langInput, c as lined, d as linedWithNumbers, e as body, f as bodyReadonly } from "./language-UrxzhGSS.js";
+const languageItems = bundledLanguagesInfo.map((info) => ({
+  id: info.id,
+  name: info.name
 }));
 function LanguageCombobox({ language, onLanguageChange }) {
-	const normalizedLanguage = normalizeLanguage(language);
-	const handleValueChange = useCallback((value) => {
-		if (value) onLanguageChange?.(value.id);
-	}, [onLanguageChange]);
-	const selectedValue = useMemo(() => languageItems.find((item) => item.id === normalizedLanguage) ?? null, [normalizedLanguage]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: `${lang} ${semanticClassNames.lang}`,
-		children: [hasLanguageIcon(normalizedLanguage) && /* @__PURE__ */ jsx(LanguageIcon, {
-			language: normalizedLanguage,
-			size: 14
-		}), /* @__PURE__ */ jsxs(Combobox, {
-			itemToStringLabel: (item) => item.id,
-			itemToStringValue: (item) => item.id,
-			items: languageItems,
-			value: selectedValue,
-			onValueChange: handleValueChange,
-			children: [/* @__PURE__ */ jsx(ComboboxInput, {
-				className: langInput,
-				placeholder: "language",
-				onKeyDown: (e) => {
-					e.stopPropagation();
-				}
-			}), /* @__PURE__ */ jsxs(ComboboxContent, {
-				align: "end",
-				side: "top",
-				sideOffset: 8,
-				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No languages found." }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, {
-					value: item,
-					children: [/* @__PURE__ */ jsx(LanguageIcon, {
-						language: item.id,
-						size: 16
-					}), item.name]
-				}, item.id) })]
-			})]
-		})]
-	});
+  const normalizedLanguage = normalizeLanguage(language);
+  const handleValueChange = useCallback(
+    (value) => {
+      if (value) {
+        onLanguageChange?.(value.id);
+      }
+    },
+    [onLanguageChange]
+  );
+  const selectedValue = useMemo(
+    () => languageItems.find((item) => item.id === normalizedLanguage) ?? null,
+    [normalizedLanguage]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `${lang} ${semanticClassNames.lang}`, children: [
+    hasLanguageIcon(normalizedLanguage) && /* @__PURE__ */ jsx(LanguageIcon, { language: normalizedLanguage, size: 14 }),
+    /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        itemToStringLabel: (item) => item.id,
+        itemToStringValue: (item) => item.id,
+        items: languageItems,
+        value: selectedValue,
+        onValueChange: handleValueChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxInput,
+            {
+              className: langInput,
+              placeholder: "language",
+              onKeyDown: (e) => {
+                e.stopPropagation();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(ComboboxContent, { align: "end", side: "top", sideOffset: 8, children: [
+            /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No languages found." }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+              /* @__PURE__ */ jsx(LanguageIcon, { language: item.id, size: 16 }),
+              item.name
+            ] }, item.id) })
+          ] })
+        ]
+      }
+    )
+  ] });
 }
-//#endregion
-//#region src/CodeBlockEditRenderer.tsx
 function stopHandledEvent(event) {
-	event.preventDefault();
-	event.stopPropagation();
-	event.stopImmediatePropagation();
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
 }
-var CodeBlockEditRenderer = ({ code, language, showLineNumbers: showLineNumbersProp, editable = false, selected = false, cursorPlacement = "start", onCodeChange, onLanguageChange, onDelete, onExitBlock }) => {
-	const variant = useVariant();
-	const colorScheme = useColorScheme();
-	const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
-	const normalizedLanguage = normalizeLanguage(language);
-	const [mounted, setMounted] = useState(false);
-	const containerRef = useRef(null);
-	const editorRef = useRef(null);
-	const suppressChangeRef = useRef(false);
-	const editableRef = useRef(editable);
-	editableRef.current = editable;
-	const onCodeChangeRef = useRef(onCodeChange);
-	onCodeChangeRef.current = onCodeChange;
-	const onDeleteRef = useRef(onDelete);
-	onDeleteRef.current = onDelete;
-	const onExitBlockRef = useRef(onExitBlock);
-	onExitBlockRef.current = onExitBlock;
-	const languageCompartmentRef = useRef(null);
-	const editableCompartmentRef = useRef(null);
-	const lineNumbersCompartmentRef = useRef(null);
-	const themeCompartmentRef = useRef(null);
-	if (!languageCompartmentRef.current) languageCompartmentRef.current = new Compartment();
-	if (!editableCompartmentRef.current) editableCompartmentRef.current = new Compartment();
-	if (!lineNumbersCompartmentRef.current) lineNumbersCompartmentRef.current = new Compartment();
-	if (!themeCompartmentRef.current) themeCompartmentRef.current = new Compartment();
-	const keyboardBoundaryHandler = useMemo(() => Prec.high(EditorView.domEventHandlers({ keydown: (event, view) => {
-		if (!editableRef.current) return false;
-		event.stopPropagation();
-		if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-			stopHandledEvent(event);
-			onExitBlockRef.current?.("after");
-			return true;
-		}
-		if (event.key === "Backspace" && view.state.doc.length === 0) {
-			stopHandledEvent(event);
-			onDeleteRef.current?.();
-			return true;
-		}
-		if (event.key === "ArrowUp" && isOnFirstLine(view)) {
-			stopHandledEvent(event);
-			onExitBlockRef.current?.("before");
-			return true;
-		}
-		if (event.key === "ArrowDown" && isOnLastLine(view)) {
-			stopHandledEvent(event);
-			onExitBlockRef.current?.("after");
-			return true;
-		}
-		return false;
-	} })), []);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const editor = new EditorView({
-			parent: container,
-			state: EditorState.create({
-				doc: code,
-				extensions: [
-					history(),
-					keymap.of([
-						...defaultKeymap,
-						...historyKeymap,
-						indentWithTab
-					]),
-					EditorView.updateListener.of((update) => {
-						if (!update.docChanged || suppressChangeRef.current) return;
-						onCodeChangeRef.current?.(update.state.doc.toString());
-					}),
-					keyboardBoundaryHandler,
-					editableCompartmentRef.current.of([EditorView.editable.of(editable), EditorState.readOnly.of(!editable)]),
-					lineNumbersCompartmentRef.current.of(showLineNumbers ? lineNumbers() : []),
-					themeCompartmentRef.current.of(getThemeExtensions(colorScheme)),
-					languageCompartmentRef.current.of([])
-				]
-			})
-		});
-		editorRef.current = editor;
-		setMounted(true);
-		return () => {
-			editor.destroy();
-			editorRef.current = null;
-			setMounted(false);
-		};
-	}, []);
-	useEffect(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		editor.dispatch({ effects: editableCompartmentRef.current.reconfigure([EditorView.editable.of(editable), EditorState.readOnly.of(!editable)]) });
-	}, [editable]);
-	useEffect(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		editor.dispatch({ effects: lineNumbersCompartmentRef.current.reconfigure(showLineNumbers ? lineNumbers() : []) });
-	}, [showLineNumbers]);
-	useEffect(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		editor.dispatch({ effects: themeCompartmentRef.current.reconfigure(getThemeExtensions(colorScheme)) });
-	}, [colorScheme]);
-	useEffect(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		const current = editor.state.doc.toString();
-		if (current === code) return;
-		suppressChangeRef.current = true;
-		editor.dispatch({ changes: {
-			from: 0,
-			to: current.length,
-			insert: code
-		} });
-		suppressChangeRef.current = false;
-	}, [code]);
-	useEffect(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		let cancelled = false;
-		(async () => {
-			const extension = await loadLanguageExtension(normalizedLanguage);
-			if (cancelled) return;
-			editor.dispatch({ effects: languageCompartmentRef.current.reconfigure(extension) });
-		})();
-		return () => {
-			cancelled = true;
-		};
-	}, [normalizedLanguage]);
-	useEffect(() => {
-		if (!editable || !selected) return;
-		const editor = editorRef.current;
-		if (!editor) return;
-		const raf = requestAnimationFrame(() => {
-			const nextCursor = cursorPlacement === "end" ? editor.state.doc.length : 0;
-			editor.focus();
-			editor.dispatch({
-				selection: EditorSelection.cursor(nextCursor),
-				scrollIntoView: true
-			});
-		});
-		return () => cancelAnimationFrame(raf);
-	}, [
-		cursorPlacement,
-		editable,
-		mounted,
-		selected
-	]);
-	const fallbackLines = useMemo(() => code.split("\n"), [code]);
-	const fallbackClassName = [
-		showLineNumbers && "_1pn9r4qc",
-		showLineNumbers && semanticClassNames.lined,
-		showLineNumbers && "_1pn9r4qd",
-		showLineNumbers && semanticClassNames.linedWithNumbers
-	].filter(Boolean).join(" ");
-	const bodyClassName = [
-		body,
-		semanticClassNames.body,
-		!editable && "_1pn9r4q9",
-		!editable && semanticClassNames.bodyReadonly
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs(CodeBlockCard, {
-		code,
-		collapsible: !editable,
-		language,
-		langSlot: editable ? /* @__PURE__ */ jsx(LanguageCombobox, {
-			language,
-			onLanguageChange
-		}) : void 0,
-		children: [!mounted && /* @__PURE__ */ jsx("pre", {
-			className: fallbackClassName,
-			children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", {
-				className: "line",
-				children: line
-			}, `${line}-${i}`)) })
-		}), /* @__PURE__ */ jsx("div", {
-			className: bodyClassName,
-			ref: containerRef,
-			style: !mounted ? {
-				height: 0,
-				overflow: "hidden",
-				visibility: "hidden"
-			} : void 0
-		})]
-	});
+const CodeBlockEditRenderer = ({
+  code,
+  language,
+  showLineNumbers: showLineNumbersProp,
+  editable = false,
+  selected = false,
+  cursorPlacement = "start",
+  onCodeChange,
+  onLanguageChange,
+  onDelete,
+  onExitBlock
+}) => {
+  const variant = useVariant();
+  const colorScheme = useColorScheme();
+  const showLineNumbers = showLineNumbersProp ?? variant !== "comment";
+  const normalizedLanguage = normalizeLanguage(language);
+  const [mounted, setMounted] = useState(false);
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const suppressChangeRef = useRef(false);
+  const editableRef = useRef(editable);
+  editableRef.current = editable;
+  const onCodeChangeRef = useRef(onCodeChange);
+  onCodeChangeRef.current = onCodeChange;
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
+  const onExitBlockRef = useRef(onExitBlock);
+  onExitBlockRef.current = onExitBlock;
+  const languageCompartmentRef = useRef(null);
+  const editableCompartmentRef = useRef(null);
+  const lineNumbersCompartmentRef = useRef(null);
+  const themeCompartmentRef = useRef(null);
+  if (!languageCompartmentRef.current) languageCompartmentRef.current = new Compartment();
+  if (!editableCompartmentRef.current) editableCompartmentRef.current = new Compartment();
+  if (!lineNumbersCompartmentRef.current) lineNumbersCompartmentRef.current = new Compartment();
+  if (!themeCompartmentRef.current) themeCompartmentRef.current = new Compartment();
+  const keyboardBoundaryHandler = useMemo(
+    () => Prec.high(
+      EditorView.domEventHandlers({
+        keydown: (event, view) => {
+          if (!editableRef.current) return false;
+          event.stopPropagation();
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("after");
+            return true;
+          }
+          if (event.key === "Backspace" && view.state.doc.length === 0) {
+            stopHandledEvent(event);
+            onDeleteRef.current?.();
+            return true;
+          }
+          if (event.key === "ArrowUp" && isOnFirstLine(view)) {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("before");
+            return true;
+          }
+          if (event.key === "ArrowDown" && isOnLastLine(view)) {
+            stopHandledEvent(event);
+            onExitBlockRef.current?.("after");
+            return true;
+          }
+          return false;
+        }
+      })
+    ),
+    []
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const editor = new EditorView({
+      parent: container,
+      state: EditorState.create({
+        doc: code,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+          EditorView.updateListener.of((update) => {
+            if (!update.docChanged || suppressChangeRef.current) return;
+            onCodeChangeRef.current?.(update.state.doc.toString());
+          }),
+          keyboardBoundaryHandler,
+          editableCompartmentRef.current.of([
+            EditorView.editable.of(editable),
+            EditorState.readOnly.of(!editable)
+          ]),
+          lineNumbersCompartmentRef.current.of(showLineNumbers ? lineNumbers() : []),
+          themeCompartmentRef.current.of(getThemeExtensions(colorScheme)),
+          languageCompartmentRef.current.of([])
+        ]
+      })
+    });
+    editorRef.current = editor;
+    setMounted(true);
+    return () => {
+      editor.destroy();
+      editorRef.current = null;
+      setMounted(false);
+    };
+  }, []);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: editableCompartmentRef.current.reconfigure([
+        EditorView.editable.of(editable),
+        EditorState.readOnly.of(!editable)
+      ])
+    });
+  }, [editable]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: lineNumbersCompartmentRef.current.reconfigure(showLineNumbers ? lineNumbers() : [])
+    });
+  }, [showLineNumbers]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.dispatch({
+      effects: themeCompartmentRef.current.reconfigure(getThemeExtensions(colorScheme))
+    });
+  }, [colorScheme]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const current = editor.state.doc.toString();
+    if (current === code) return;
+    suppressChangeRef.current = true;
+    editor.dispatch({
+      changes: {
+        from: 0,
+        to: current.length,
+        insert: code
+      }
+    });
+    suppressChangeRef.current = false;
+  }, [code]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    let cancelled = false;
+    (async () => {
+      const extension = await loadLanguageExtension(normalizedLanguage);
+      if (cancelled) return;
+      editor.dispatch({
+        effects: languageCompartmentRef.current.reconfigure(extension)
+      });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [normalizedLanguage]);
+  useEffect(() => {
+    if (!editable || !selected) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+    const raf = requestAnimationFrame(() => {
+      const nextCursor = cursorPlacement === "end" ? editor.state.doc.length : 0;
+      editor.focus();
+      editor.dispatch({
+        selection: EditorSelection.cursor(nextCursor),
+        scrollIntoView: true
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [cursorPlacement, editable, mounted, selected]);
+  const fallbackLines = useMemo(() => code.split("\n"), [code]);
+  const fallbackClassName = [
+    showLineNumbers && lined,
+    showLineNumbers && semanticClassNames.lined,
+    showLineNumbers && linedWithNumbers,
+    showLineNumbers && semanticClassNames.linedWithNumbers
+  ].filter(Boolean).join(" ");
+  const bodyClassName = [
+    body,
+    semanticClassNames.body,
+    !editable && bodyReadonly,
+    !editable && semanticClassNames.bodyReadonly
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    CodeBlockCard,
+    {
+      code,
+      collapsible: !editable,
+      language,
+      langSlot: editable ? /* @__PURE__ */ jsx(LanguageCombobox, { language, onLanguageChange }) : void 0,
+      children: [
+        !mounted && /* @__PURE__ */ jsx("pre", { className: fallbackClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, `${line}-${i}`)) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: bodyClassName,
+            ref: containerRef,
+            style: !mounted ? { height: 0, overflow: "hidden", visibility: "hidden" } : void 0
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CodeBlockEditRenderer,
+  C as CodeBlockRenderer
 };
-//#endregion
-export { CodeBlockEditRenderer, CodeBlockRenderer };