@lobehub/editor 4.6.1 → 4.6.2

package/es/renderer.js

@@ -4,19 +4,17 @@ import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import { $getRoot, $isElementNode, $isTextNode } from "lexical";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createElement, useCallback, useMemo, useState } from "react";
-import { ActionIcon, Block, Flexbox, MaterialFileTypeIcon, Mermaid, Text } from "@lobehub/ui";
+import { createElement, useMemo } from "react";
+import { Highlighter, Mermaid } from "@lobehub/ui";
 import katex from "katex";
 import { createStaticStyles, cx } from "antd-style";
 import { ListItemNode, ListNode } from "@lexical/list";
-import { Check, ChevronDown, ChevronRight, CopyIcon } from "lucide-react";
-import { createHighlighterCoreSync, isSpecialLang, stringifyTokenStyle } from "@shikijs/core";
+import { createHighlighterCoreSync, isSpecialLang } from "@shikijs/core";
 import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
 import { bundledLanguagesInfo } from "shiki";
 import { createHeadlessEditor } from "@lexical/headless";
 //#region src/renderer/engine/shiki.ts
 let _highlighter = null;
-let _themeLoaded = false;
 function getHighlighter() {
 	if (!_highlighter) _highlighter = createHighlighterCoreSync({
 		engine: createJavaScriptRegexEngine(),
@@ -25,63 +23,15 @@ function getHighlighter() {
 	});
 	return _highlighter;
 }
-async function ensureTheme(highlighter) {
-	if (_themeLoaded) return;
-	try {
-		const { ShikiLobeTheme } = await import("@lobehub/ui");
-		highlighter.loadThemeSync(ShikiLobeTheme);
-		_themeLoaded = true;
-	} catch {}
-}
 function isLanguageLoaded(language) {
 	if (isSpecialLang(language)) return true;
 	return getHighlighter().getLoadedLanguages().includes(language);
 }
-function parseInlineStyle(style) {
-	const result = {};
-	for (const part of style.split(";")) {
-		const colonIdx = part.indexOf(":");
-		if (colonIdx === -1) continue;
-		const prop = part.slice(0, colonIdx).trim();
-		const val = part.slice(colonIdx + 1).trim();
-		if (!prop || !val) continue;
-		const camelProp = prop.replaceAll(/-([a-z])/g, (_, c) => c.toUpperCase());
-		result[camelProp] = val;
-	}
-	return result;
-}
 async function loadLanguage(language) {
 	if (isLanguageLoaded(language)) return;
 	const info = bundledLanguagesInfo.find((desc) => desc.id === language || desc.aliases?.includes(language));
 	if (info) await getHighlighter().loadLanguage(info.import());
 }
-function highlightCode(code, language, key) {
-	if (!language || !isLanguageLoaded(language)) return null;
-	const highlighter = getHighlighter();
-	ensureTheme(highlighter);
-	const theme = _themeLoaded ? "lobe-theme" : highlighter.getLoadedThemes()[0] || "none";
-	try {
-		const { tokens } = highlighter.codeToTokens(code, {
-			lang: language,
-			theme
-		});
-		const nodes = [];
-		for (const [lineIdx, line] of tokens.entries()) {
-			if (lineIdx > 0) nodes.push(createElement("br", { key: `${key}-br-${lineIdx}` }));
-			for (const [tokenIdx, token] of line.entries()) {
-				const tokenStyle = stringifyTokenStyle(token.htmlStyle || (token.color ? `color: ${token.color}` : ""));
-				if (tokenStyle) nodes.push(createElement("span", {
-					key: `${key}-${lineIdx}-${tokenIdx}`,
-					style: parseInlineStyle(tokenStyle)
-				}, token.content));
-				else nodes.push(token.content);
-			}
-		}
-		return nodes;
-	} catch {
-		return null;
-	}
-}
 //#endregion
 //#region src/renderer/style.ts
 const tableHeaderFix = createStaticStyles(({ css, cssVar }) => css`
@@ -375,170 +325,19 @@ function renderMermaidBlock(node, key) {
 }
 //#endregion
 //#region src/renderer/renderers/codeblock.tsx
-const useStyles$1 = createStaticStyles(({ css, cssVar }) => css`
-    cursor: default;
-
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    width: 100%;
-    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
-    border-radius: var(--lobe-markdown-border-radius);
-
-    background: ${cssVar.colorFillQuaternary};
-
-    .renderer-cm-header {
-      width: 100%;
-    }
-
-    .renderer-cm-code {
-      width: 100%;
-      border-block-start: 1px solid ${cssVar.colorFillQuaternary};
-    }
-
-    .renderer-cm-pre {
-      overflow-x: auto;
-
-      margin: 0;
-      padding: 16px;
-
-      font-family: ${cssVar.fontFamilyCode};
-      font-size: calc(var(--lobe-markdown-font-size) * 0.85);
-      line-height: 1.6;
-      white-space: pre;
-
-      background: transparent;
-
-      code {
-        font-family: inherit;
-        font-size: inherit;
-      }
-    }
-
-    .renderer-cm-collapsed {
-      overflow: hidden;
-      height: 0;
-      border-block-start: none;
-    }
-  `);
-function CodeBlockCopyButton({ code }) {
-	const [copied, setCopied] = useState(false);
-	const handleCopy = useCallback(() => {
-		navigator.clipboard.writeText(code).catch(() => {});
-		setCopied(true);
-		setTimeout(() => setCopied(false), 1e3);
-	}, [code]);
-	return /* @__PURE__ */ jsx(ActionIcon, {
-		active: copied,
-		icon: copied ? Check : CopyIcon,
-		onClick: handleCopy,
-		size: "small",
-		title: "Copy"
-	});
-}
-function getLanguageName(lang) {
-	return {
-		bash: "Bash",
-		c: "C",
-		cpp: "C++",
-		csharp: "C#",
-		css: "CSS",
-		dart: "Dart",
-		go: "Go",
-		graphql: "GraphQL",
-		html: "HTML",
-		java: "Java",
-		javascript: "JavaScript",
-		json: "JSON",
-		jsx: "JSX",
-		kotlin: "Kotlin",
-		lua: "Lua",
-		markdown: "Markdown",
-		php: "PHP",
-		python: "Python",
-		ruby: "Ruby",
-		rust: "Rust",
-		scss: "SCSS",
-		shell: "Shell",
-		sql: "SQL",
-		swift: "Swift",
-		tsx: "TSX",
-		typescript: "TypeScript",
-		xml: "XML",
-		yaml: "YAML"
-	}[lang] || lang.charAt(0).toUpperCase() + lang.slice(1);
-}
-function getFileExt(lang) {
-	return {
-		bash: "sh",
-		csharp: "cs",
-		javascript: "js",
-		kotlin: "kt",
-		markdown: "md",
-		python: "py",
-		ruby: "rb",
-		rust: "rs",
-		shell: "sh",
-		swift: "swift",
-		typescript: "ts",
-		yaml: "yml"
-	}[lang] || lang;
-}
-function CodeBlockRenderer({ node, codeChildren }) {
+function CodeBlockRenderer({ node }) {
 	const language = node.language || "";
 	const code = node.code || "";
-	const [expand, setExpand] = useState(true);
-	const codeContent = codeChildren || highlightCode(code, language, "cb") || code;
-	return /* @__PURE__ */ jsxs(Block, {
-		className: useStyles$1,
+	return /* @__PURE__ */ jsx(Highlighter, {
+		defaultExpand: true,
+		language: language || "text",
 		variant: "filled",
-		children: [/* @__PURE__ */ jsxs(Flexbox, {
-			align: "center",
-			className: "renderer-cm-header",
-			horizontal: true,
-			justify: "space-between",
-			padding: 4,
-			children: [/* @__PURE__ */ jsxs(Flexbox, {
-				align: "center",
-				gap: 4,
-				horizontal: true,
-				children: [language && /* @__PURE__ */ jsx(MaterialFileTypeIcon, {
-					fallbackUnknownType: false,
-					filename: `*.${getFileExt(language)}`,
-					size: 18,
-					type: "file",
-					variant: "raw"
-				}), /* @__PURE__ */ jsx(Text, {
-					ellipsis: true,
-					fontSize: 13,
-					children: language ? getLanguageName(language) : "Plain Text"
-				})]
-			}), /* @__PURE__ */ jsxs(Flexbox, {
-				gap: 4,
-				horizontal: true,
-				children: [/* @__PURE__ */ jsx(CodeBlockCopyButton, { code }), /* @__PURE__ */ jsx(ActionIcon, {
-					icon: expand ? ChevronDown : ChevronRight,
-					onClick: () => setExpand(!expand),
-					size: "small"
-				})]
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: expand ? "renderer-cm-code" : "renderer-cm-code renderer-cm-collapsed",
-			children: /* @__PURE__ */ jsx("pre", {
-				className: "renderer-cm-pre",
-				children: /* @__PURE__ */ jsx("code", { children: codeContent })
-			})
-		})]
+		children: code
 	});
 }
-function renderCodeBlock(node, key, children) {
+function renderCodeBlock(node, key) {
 	if ((node.language || "").toLowerCase() === "mermaid") return renderMermaidBlock(node, key);
-	return /* @__PURE__ */ jsx(CodeBlockRenderer, {
-		codeChildren: children,
-		node
-	}, key);
+	return /* @__PURE__ */ jsx(CodeBlockRenderer, { node }, key);
 }
 //#endregion
 //#region src/renderer/renderers/file.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.6.1",
+  "version": "4.6.2",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",