@lobehub/editor 4.6.0 → 4.6.2

package/es/{ReactSlashPlugin-DURF_w1Z.js → ReactSlashPlugin-GxCNaj2T.js}

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, Suspense, createContext, memo, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Menu, ShikiLobeTheme, preprocessMarkdownContent, toast } from "@lobehub/ui";
 import remarkCjkFriendly from "remark-cjk-friendly";
-import { $createCodeHighlightNode, $createCodeNode, $getEndOfCodeInLine, $getFirstCodeNodeOfLine, $getLastCodeNodeOfLine, $getStartOfCodeInLine, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode, DEFAULT_CODE_LANGUAGE } from "@lexical/code";
+import { $createCodeHighlightNode, $createCodeNode, $getEndOfCodeInLine, $getFirstCodeNodeOfLine, $getLastCodeNodeOfLine, $getStartOfCodeInLine, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode, DEFAULT_CODE_LANGUAGE } from "@lexical/code-core";
 import { createStaticStyles, cx } from "antd-style";
 import { $isAtNodeEnd, $setBlocksType } from "@lexical/selection";
 import { registerDragonSupport } from "@lexical/dragon";

package/es/index.js

@@ -1,5 +1,5 @@
 import { $ as DOM_TEXT_TYPE, A as $createCodeMirrorNode, At as createDebugLogger, C as $createCodeNode$1, Ct as CONTROL_OR_META, Dt as KeyEnum, E as CodeNode$1, Et as HotkeyScopeEnum, F as $isCursorNode, Ft as init_debug, G as kernel_exports, Gt as INodeHelper, H as DataSource, I as CardLikeElementNode, It as prodSafeLogger, J as $getNearestNodeFromDOMNode, K as $closest, Kt as init_helper, M as CodeMirrorNode, Mt as debugLoggers, N as $createCursorNode, Nt as debug_exports, Ot as init_hotkey, P as $isCardLikeElementNode, Pt as devConsole, Q as DOM_ELEMENT_TYPE, R as cursorNodeSerialized, S as formatUrl, St as init_registerHotkey, Tt as HotkeyEnum, U as Kernel, V as resetRandomKey, W as init_kernel, X as DOM_DOCUMENT_FRAGMENT_TYPE, Y as $getNodeFromDOMNode, Yt as __toCommonJS, Z as DOM_DOCUMENT_TYPE, _ as AutoLinkNode, _t as unregisterEditorKernel, a as $createMathBlockNode, at as generateEditorId, b as LinkNode, bt as HOVER_COMMAND, c as MathBlockNode, ct as getNodeKeyFromDOMNode, dt as isDOMNode, et as EDITOR_THEME_KEY, f as LinkHighlightNode, ft as isDocumentFragment, g as $toggleLink, gt as registerEditorKernel, h as $isLinkNode, ht as reconcileDecorator, it as genServiceId, j as $isCodeMirrorNode, jt as debugLogger, kt as browserDebug, l as MathInlineNode, lt as getParentElement, m as $createLinkNode, mt as noop, nt as compareNodeOrder, o as $createMathInlineNode, ot as getKernelFromEditor, pt as moment, q as $closestNodeType, rt as createEmptyEditorState, s as $isMathNode, st as getKernelFromEditorConfig, tt as assert, u as $createLinkHighlightNode, ut as init_utils, v as HOVER_LINK_COMMAND, vt as KernelPlugin, wt as init_sys, x as TOGGLE_LINK_COMMAND, xt as getHotkeyById, y as HOVER_OUT_LINK_COMMAND, yt as init_plugin } from "./style-Ub1LiKko.js";
-import { A as idToChar, B as MARKDOWN_READER_LEVEL_NORMAL, C as ReactEditorContent, D as $cloneNode, E as LitexmlService, F as MarkdownPlugin, G as INSERT_MARKDOWN_COMMAND, H as INodePlugin, I as detectCodeLanguage, J as ReactEditor, K as isPunctuationChar, L as detectLanguage, M as INSERT_QUOTE_COMMAND, N as ReactMarkdownPlugin, O as $parseSerializedNodeImpl, P as useTranslation, R as IMarkdownShortCutService, S as ReactPlainText, T as ILitexmlService, U as INodeService, V as MARKDOWN_WRITER_LEVEL_MAX, W as GET_MARKDOWN_SELECTION_COMMAND, X as LexicalErrorBoundary, Y as useLexicalComposerContext, _ as bundledLanguagesInfo, a as ReactMentionPlugin, b as INSERT_CODEINLINE_COMMAND, c as INSERT_CHECK_LIST_COMMAND, d as registerLinkHighlightCommand, f as extractUrlFromText, g as useLexicalNodeSelection, i as SlashPlugin, j as INSERT_HEADING_COMMAND, k as charToId, l as registerCheckList, m as sanitizeUrl, n as ReactSlashOption, o as MentionPlugin, p as getSelectedNode, q as useLexicalEditor, r as SlashMenu, s as INSERT_MENTION_COMMAND, t as ReactSlashPlugin, u as INSERT_LINK_HIGHLIGHT_COMMAND, v as CodeblockPlugin, w as CommonPlugin, x as registerCodeInlineCommand, y as UPDATE_CODEBLOCK_LANG, z as MARKDOWN_READER_LEVEL_HIGH } from "./ReactSlashPlugin-DURF_w1Z.js";
+import { A as idToChar, B as MARKDOWN_READER_LEVEL_NORMAL, C as ReactEditorContent, D as $cloneNode, E as LitexmlService, F as MarkdownPlugin, G as INSERT_MARKDOWN_COMMAND, H as INodePlugin, I as detectCodeLanguage, J as ReactEditor, K as isPunctuationChar, L as detectLanguage, M as INSERT_QUOTE_COMMAND, N as ReactMarkdownPlugin, O as $parseSerializedNodeImpl, P as useTranslation, R as IMarkdownShortCutService, S as ReactPlainText, T as ILitexmlService, U as INodeService, V as MARKDOWN_WRITER_LEVEL_MAX, W as GET_MARKDOWN_SELECTION_COMMAND, X as LexicalErrorBoundary, Y as useLexicalComposerContext, _ as bundledLanguagesInfo, a as ReactMentionPlugin, b as INSERT_CODEINLINE_COMMAND, c as INSERT_CHECK_LIST_COMMAND, d as registerLinkHighlightCommand, f as extractUrlFromText, g as useLexicalNodeSelection, i as SlashPlugin, j as INSERT_HEADING_COMMAND, k as charToId, l as registerCheckList, m as sanitizeUrl, n as ReactSlashOption, o as MentionPlugin, p as getSelectedNode, q as useLexicalEditor, r as SlashMenu, s as INSERT_MENTION_COMMAND, t as ReactSlashPlugin, u as INSERT_LINK_HIGHLIGHT_COMMAND, v as CodeblockPlugin, w as CommonPlugin, x as registerCodeInlineCommand, y as UPDATE_CODEBLOCK_LANG, z as MARKDOWN_READER_LEVEL_HIGH } from "./ReactSlashPlugin-GxCNaj2T.js";
 import { S as PlaceholderNode, _ as $isFileNode, a as styles$16, b as DiffNode, c as ImageNode, d as BlockImageNode, f as $createHorizontalRuleNode, g as $createFileNode, h as styles$15, i as imageBroken, l as $createBlockImageNode, m as HorizontalRuleNode, n as styles$18, o as $createImageNode, p as $isHorizontalRuleNode, r as styles$17, s as $isImageNode, t as styles$19, u as $isBlockImageNode, v as FileNode, x as PlaceholderBlockNode, y as $createDiffNode } from "./style-CFkese2R.js";
 import { $computeTableMapSkipCellCheck, $createTableNodeWithDimensions, $createTableSelection, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $findTableNode, $getElementForTableNode, $getNodeTriplet, $getTableAndElementByKey, $getTableCellNodeFromLexicalNode, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, TableNode, TableNode as TableNode$1, TableRowNode, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
 import { debounce } from "es-toolkit/compat";
@@ -11,7 +11,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ActionIcon, ActionIconGroup, Block, Button, Center, Dropdown, Flexbox, Hotkey, Icon, Input, InputNumber, LOBE_THEME_APP_ID, MaterialFileTypeIcon, Popover, Select, Text, TextArea } from "@lobehub/ui";
 import katex, { renderToString } from "katex";
-import "@lexical/code";
+import "@lexical/code-core";
 import { createStaticStyles, cssVar, cx, useThemeMode } from "antd-style";
 import { $createListItemNode, $createListNode, $isListItemNode, $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND as INSERT_ORDERED_LIST_COMMAND$1, INSERT_UNORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND as INSERT_UNORDERED_LIST_COMMAND$1, ListItemNode, ListNode, REMOVE_LIST_COMMAND, UPDATE_LIST_START_COMMAND, registerList, registerListStrictIndentTransform } from "@lexical/list";
 import { DOMParser } from "@xmldom/xmldom";

package/es/react.js

@@ -1,12 +1,12 @@
 import { A as $createCodeMirrorNode, B as Editor$2, Bt as $isRootTextContentEmpty, S as formatUrl, T as $isSelectionInCodeInline, Ut as init_utils, a as $createMathBlockNode, d as $isLinkHighlightNode, h as $isLinkNode, j as $isCodeMirrorNode, mt as noop, o as $createMathInlineNode, x as TOGGLE_LINK_COMMAND } from "./style-Ub1LiKko.js";
-import { C as ReactEditorContent, J as ReactEditor, N as ReactMarkdownPlugin, S as ReactPlainText, a as ReactMentionPlugin, b as INSERT_CODEINLINE_COMMAND, c as INSERT_CHECK_LIST_COMMAND, f as extractUrlFromText, h as validateUrl, m as sanitizeUrl, n as ReactSlashOption, t as ReactSlashPlugin, u as INSERT_LINK_HIGHLIGHT_COMMAND, y as UPDATE_CODEBLOCK_LANG } from "./ReactSlashPlugin-DURF_w1Z.js";
+import { C as ReactEditorContent, J as ReactEditor, N as ReactMarkdownPlugin, S as ReactPlainText, a as ReactMentionPlugin, b as INSERT_CODEINLINE_COMMAND, c as INSERT_CHECK_LIST_COMMAND, f as extractUrlFromText, h as validateUrl, m as sanitizeUrl, n as ReactSlashOption, t as ReactSlashPlugin, u as INSERT_LINK_HIGHLIGHT_COMMAND, y as UPDATE_CODEBLOCK_LANG } from "./ReactSlashPlugin-GxCNaj2T.js";
 import { $createNodeSelection, $createParagraphNode, $getSelection, $isParagraphNode, $isRangeSelection, $isRootOrShadowRoot, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
 import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
 import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, createElement, isValidElement, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActionIcon, Block, Button, Dropdown, Flexbox, Icon, MaterialFileTypeIcon, Menu, Popover, Select, Text, TooltipGroup, useMotionComponent } from "@lobehub/ui";
-import { $createCodeNode, $isCodeNode } from "@lexical/code";
+import { $createCodeNode, $isCodeNode } from "@lexical/code-core";
 import { createStaticStyles, cssVar, cx, useThemeMode } from "antd-style";
 import { $isAtNodeEnd, $setBlocksType } from "@lexical/selection";
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from "@lexical/list";

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.0",
+  "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",
@@ -71,8 +71,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react": "^0.27.16",
-    "@lexical/code": "^0.42.0",
-    "@lexical/code-shiki": "^0.42.0",
+    "@lexical/code-core": "^0.42.0",
     "@lexical/dragon": "^0.42.0",
     "@lexical/headless": "^0.42.0",
     "@lexical/history": "^0.42.0",