@lobehub/editor 4.15.0 → 4.15.2

package/es/plugins/math/react/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { MathPlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import MathEdit from "./components/MathEditor.js";
+import MathInline from "./components/MathInline.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/math/react/index.tsx
+const ReactMathPlugin = ({ className, renderComp, theme }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(MathPlugin, {
+			decorator: (node, editor) => {
+				return /* @__PURE__ */ jsx(MathInline, {
+					className,
+					editor,
+					node
+				});
+			},
+			theme: theme || styles
+		});
+	}, [
+		editor,
+		className,
+		theme,
+		styles
+	]);
+	return /* @__PURE__ */ jsx(MathEdit, { renderComp });
+};
+ReactMathPlugin.displayName = "ReactMathPlugin";
+//#endregion
+export { ReactMathPlugin };

package/es/plugins/math/react/style.js

@@ -0,0 +1,96 @@
+import { createStaticStyles, cx } from "antd-style";
+//#region src/plugins/math/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const latex = css`
+    cursor: pointer;
+    user-select: none;
+    font-size: 1em;
+
+    .katex-error {
+      color: ${cssVar.colorError} !important;
+    }
+
+    .katex-html {
+      overflow: auto hidden;
+      padding: 3px;
+
+      .base {
+        margin-block: 0;
+        margin-inline: auto;
+      }
+
+      .tag {
+        position: relative !important;
+        display: inline-block;
+        padding-inline-start: 0.5rem;
+      }
+    }
+
+    &.selected {
+      color: #000;
+      background: ${cssVar.yellow};
+    }
+
+    &:hover {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &.editing {
+      background: ${cssVar.colorFillTertiary};
+    }
+
+    &:has(.katex-error) {
+      background: ${cssVar.colorErrorBg};
+    }
+  `;
+	return {
+		mathInline: cx(latex, css`
+        display: inline-block;
+        border-radius: calc(var(--lobe-markdown-border-radius) * 0.5px);
+      `),
+		mathBlock: cx(latex, css`
+        overflow: auto hidden;
+        display: block;
+        border-radius: calc(var(--lobe-markdown-border-radius) * 1px);
+        white-space: nowrap;
+      `),
+		mathEditor: css`
+      width: 320px;
+      background: ${cssVar.colorBgElevated};
+
+      textarea {
+        width: 100%;
+
+        font-family: ${cssVar.fontFamilyCode};
+        font-size: 13px;
+
+        background: transparent !important;
+
+        transition: none !important;
+      }
+    `,
+		mathEditorFooter: css`
+      border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+      background: ${cssVar.colorFillQuaternary};
+    `,
+		mathEditorAnchor: css`
+      pointer-events: none;
+
+      position: absolute;
+      inset-block-start: -9999px;
+      inset-inline-start: -9999px;
+
+      width: 0;
+      height: 0;
+    `,
+		mathEditorTextArea: css`
+      margin-block: 4px;
+    `,
+		mathPlaceholder: css`
+      padding-inline: 0.2em;
+      font-style: italic;
+    `
+	};
+});
+//#endregion
+export { styles };

package/es/plugins/math/react/type.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+//#region src/plugins/math/react/type.d.ts
+interface ReactMathPluginProps {
+  className?: string;
+  /** 自定义渲染组件，接收 MathEditorContent 作为子节点 */
+  renderComp?: FC<{
+    children: ReactNode;
+    open?: boolean;
+  }>;
+  theme?: {
+    mathBlock?: string;
+    mathInline?: string;
+  };
+}
+//#endregion
+export { ReactMathPluginProps };

package/es/plugins/math/utils/index.js

@@ -0,0 +1,23 @@
+//#region src/plugins/math/utils/index.ts
+/**
+* Heuristic: does the content between `$...$` look like a math formula?
+*
+* Positive signals (any one → math):
+*  - LaTeX commands        \alpha  \frac  …
+*  - Structural chars      ^ _ { } ( )
+*  - Operators / relations  + - * / = < > | ! ,
+*  - Digits                0-9
+*  - Single ASCII letter   x  y  n  (common math variable)
+*
+* Everything else (multi-char words, CJK, spaced plain text) → not math.
+*/
+function isLikelyMathContent(content) {
+	const trimmed = content.trim();
+	if (!trimmed) return false;
+	if (/\\[A-Za-z]/.test(trimmed)) return true;
+	if (/[\d!()*+,/<=>^_{|}-]/.test(trimmed)) return true;
+	if (/^[A-Za-z]$/.test(trimmed)) return true;
+	return false;
+}
+//#endregion
+export { isLikelyMathContent };

package/es/plugins/mention/command/index.d.ts

@@ -0,0 +1,10 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/mention/command/index.d.ts
+declare const INSERT_MENTION_COMMAND: _$lexical.LexicalCommand<{
+  label: string;
+  metadata?: Record<string, unknown>;
+}>;
+//#endregion
+export { INSERT_MENTION_COMMAND };

package/es/plugins/mention/command/index.js

@@ -0,0 +1,18 @@
+import { $createMentionNode } from "../node/MentionNode.js";
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_HIGH, createCommand } from "lexical";
+import { $wrapNodeInElement } from "@lexical/utils";
+//#region src/plugins/mention/command/index.ts
+const INSERT_MENTION_COMMAND = createCommand("INSERT_MENTION_COMMAND");
+function registerMentionCommand(editor) {
+	return editor.registerCommand(INSERT_MENTION_COMMAND, (payload) => {
+		const { metadata, label } = payload;
+		editor.update(() => {
+			const mentionNode = $createMentionNode(label, metadata);
+			$insertNodes([mentionNode]);
+			if ($isRootOrShadowRoot(mentionNode.getParentOrThrow())) $wrapNodeInElement(mentionNode, $createParagraphNode).selectEnd();
+		});
+		return true;
+	}, COMMAND_PRIORITY_HIGH);
+}
+//#endregion
+export { INSERT_MENTION_COMMAND, registerMentionCommand };

package/es/plugins/mention/index.d.ts

@@ -0,0 +1,5 @@
+import { INSERT_MENTION_COMMAND } from "./command/index.js";
+import { SerializedMentionNode } from "./node/MentionNode.js";
+import { MentionPlugin, MentionPluginOptions } from "./plugin/index.js";
+import { ReactMentionPluginProps } from "./react/type.js";
+import { ReactMentionPlugin } from "./react/ReactMentionPlugin.js";

package/es/plugins/mention/node/MentionNode.d.ts

@@ -0,0 +1,28 @@
+import { DOMConversionMap, DOMExportOutput, DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, LexicalUpdateJSON, SerializedLexicalNode, Spread } from "lexical";
+
+//#region src/plugins/mention/node/MentionNode.d.ts
+type SerializedMentionNode = Spread<{
+  label?: string;
+  metadata?: Record<string, unknown>;
+}, SerializedLexicalNode>;
+declare class MentionNode extends DecoratorNode<any> {
+  static getType(): string;
+  static clone(node: MentionNode): MentionNode;
+  static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+  static importDOM(): DOMConversionMap | null;
+  __label: string;
+  __metadata: Record<string, unknown>;
+  constructor(label?: string, metadata?: Record<string, unknown>, key?: string);
+  get label(): string;
+  get metadata(): Record<string, unknown>;
+  exportDOM(): DOMExportOutput;
+  createDOM(config: EditorConfig): HTMLElement;
+  getTextContent(): string;
+  isInline(): true;
+  updateDOM(): boolean;
+  exportJSON(): SerializedMentionNode;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedMentionNode>): this;
+  decorate(editor: LexicalEditor): any;
+}
+//#endregion
+export { MentionNode, SerializedMentionNode };

package/es/plugins/mention/node/MentionNode.js

@@ -0,0 +1,86 @@
+import { getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { $applyNodeReplacement, DecoratorNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/mention/node/MentionNode.ts
+init_utils();
+var MentionNode = class MentionNode extends DecoratorNode {
+	static getType() {
+		return "mention";
+	}
+	static clone(node) {
+		return new MentionNode(node.__label, node.__metadata, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createMentionNode().updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { span: (node) => {
+			if (node.classList.contains("mention")) return {
+				conversion: $convertMentionElement,
+				priority: 0
+			};
+			return null;
+		} };
+	}
+	constructor(label = "", metadata = {}, key) {
+		super(key);
+		this.__label = label;
+		this.__metadata = metadata;
+	}
+	get label() {
+		return this.__label;
+	}
+	get metadata() {
+		return this.__metadata;
+	}
+	exportDOM() {
+		return { element: document.createElement("span") };
+	}
+	createDOM(config) {
+		const element = document.createElement("span");
+		addClassNamesToElement(element, config.theme.mention);
+		return element;
+	}
+	getTextContent() {
+		return this.label;
+	}
+	isInline() {
+		return true;
+	}
+	updateDOM() {
+		return false;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			label: this.label,
+			metadata: this.metadata
+		};
+	}
+	updateFromJSON(serializedNode) {
+		const node = super.updateFromJSON(serializedNode);
+		this.__label = serializedNode.label || "";
+		this.__metadata = serializedNode.metadata || {};
+		return node;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator(MentionNode.getType());
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		return {
+			queryDOM: decorator.queryDOM,
+			render: decorator.render(this, editor)
+		};
+	}
+};
+function $createMentionNode(label, metadata) {
+	return $applyNodeReplacement(new MentionNode(label, metadata));
+}
+function $convertMentionElement() {
+	return { node: $createMentionNode() };
+}
+function $isMentionNode(node) {
+	return node.getType() === MentionNode.getType();
+}
+//#endregion
+export { $createMentionNode, $isMentionNode, MentionNode };

package/es/plugins/mention/plugin/index.d.ts

@@ -0,0 +1,18 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { INode } from "../../../editor-kernel/inode/i-node.js";
+import { Html } from "../../../node_modules/.pnpm/@types_mdast@4.0.4/node_modules/@types/mdast/index.js";
+import { MentionNode, SerializedMentionNode } from "../node/MentionNode.js";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/mention/plugin/index.d.ts
+interface MentionPluginOptions {
+  decorator: (node: MentionNode, editor: LexicalEditor) => any;
+  markdownReader?: (node: Html, children: INode[]) => SerializedMentionNode | null | false;
+  markdownWriter?: (mention: MentionNode) => string;
+  theme?: {
+    mention?: string;
+  };
+}
+declare const MentionPlugin: IEditorPluginConstructor<MentionPluginOptions>;
+//#endregion
+export { MentionPlugin, MentionPluginOptions };

package/es/plugins/mention/plugin/index.js

@@ -0,0 +1,63 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { $isMentionNode, MentionNode } from "../node/MentionNode.js";
+import { registerMentionCommand } from "../command/index.js";
+import { registerMentionNodeSelectionObserver } from "./register.js";
+//#region src/plugins/mention/plugin/index.ts
+init_helper();
+init_plugin();
+const MentionPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "MentionPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		kernel.registerNodes([MentionNode]);
+		if (config?.theme) kernel.registerThemes(config?.theme);
+		this.registerDecorator(kernel, MentionNode.getType(), (node, editor) => {
+			return config?.decorator ? config.decorator(node, editor) : null;
+		});
+	}
+	onInit(editor) {
+		this.register(registerMentionCommand(editor));
+		this.register(registerMentionNodeSelectionObserver(editor));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		this.kernel.requireService(ILitexmlService)?.registerXMLWriter(MentionNode.getType(), (node, ctx) => {
+			if ($isMentionNode(node)) {
+				const attributes = { label: node.label };
+				if (node.metadata && Object.keys(node.metadata).length > 0) attributes.metadata = JSON.stringify(node.metadata);
+				return ctx.createXmlNode("mention", attributes);
+			}
+			return false;
+		});
+		this.kernel.requireService(ILitexmlService)?.registerXMLReader("mention", (xmlNode) => {
+			return INodeHelper.createElementNode(MentionNode.getType(), {
+				label: xmlNode.getAttribute("label") || "",
+				metadata: xmlNode.getAttribute("metadata") ? JSON.parse(xmlNode.getAttribute("metadata")) : {}
+			});
+		});
+	}
+	registerMarkdown() {
+		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(MentionNode.getType(), (ctx, node) => {
+			if ($isMentionNode(node)) {
+				if (this.config?.markdownWriter) {
+					ctx.appendLine(this.config.markdownWriter(node));
+					return;
+				}
+				ctx.appendLine(`${node.label}`);
+			}
+		});
+		if (this.config?.markdownReader) this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownReader("html", (node, children) => {
+			return this.config?.markdownReader ? this.config.markdownReader(node, children) || false : false;
+		}, 1);
+	}
+};
+//#endregion
+export { MentionPlugin };

package/es/plugins/mention/plugin/register.js

@@ -0,0 +1,30 @@
+import { $isMentionNode } from "../node/MentionNode.js";
+import { $getSelection, $isNodeSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/mention/plugin/register.ts
+function registerMentionNodeSelectionObserver(editor) {
+	const selectMentionKeys = [];
+	return editor.registerUpdateListener(({ editorState }) => {
+		const selection = editorState.read(() => $getSelection());
+		const newSelectMentionKeys = [];
+		if ($isNodeSelection(selection)) editorState.read(() => selection.getNodes()).forEach((node) => {
+			if (node.getType() === "mention") newSelectMentionKeys.push(node.getKey());
+		});
+		else if ($isRangeSelection(selection) && !selection.isCollapsed()) editorState.read(() => {
+			selection.getNodes().forEach((node) => {
+				if ($isMentionNode(node)) newSelectMentionKeys.push(node.getKey());
+			});
+		});
+		const removeKeys = selectMentionKeys.filter((key) => !newSelectMentionKeys.includes(key));
+		const addKeys = newSelectMentionKeys.filter((key) => !selectMentionKeys.includes(key));
+		selectMentionKeys.length = 0;
+		selectMentionKeys.push(...newSelectMentionKeys);
+		removeKeys.forEach((key) => {
+			editor.getElementByKey(key)?.classList.remove("selected");
+		});
+		addKeys.forEach((key) => {
+			editor.getElementByKey(key)?.classList.add("selected");
+		});
+	});
+}
+//#endregion
+export { registerMentionNodeSelectionObserver };

package/es/plugins/mention/react/ReactMentionPlugin.d.ts

@@ -0,0 +1,7 @@
+import { ReactMentionPluginProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/plugins/mention/react/ReactMentionPlugin.d.ts
+declare const ReactMentionPlugin: FC<ReactMentionPluginProps>;
+//#endregion
+export { ReactMentionPlugin };

package/es/plugins/mention/react/ReactMentionPlugin.js

@@ -0,0 +1,36 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { MentionPlugin } from "../plugin/index.js";
+import Mention from "./components/Mention.js";
+import { styles } from "./style.js";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/mention/react/ReactMentionPlugin.tsx
+const ReactMentionPlugin = ({ className, theme, markdownWriter }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(MentionPlugin, {
+			decorator: (node, editor) => {
+				return /* @__PURE__ */ jsx(Mention, {
+					className,
+					editor,
+					node
+				});
+			},
+			markdownWriter,
+			theme: theme || styles
+		});
+	}, [
+		editor,
+		className,
+		markdownWriter,
+		theme,
+		styles
+	]);
+	return null;
+};
+ReactMentionPlugin.displayName = "ReactMentionPlugin";
+//#endregion
+export { ReactMentionPlugin as default };

package/es/plugins/mention/react/components/Mention.js

@@ -0,0 +1,33 @@
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { useCallback, useEffect, useRef } from "react";
+import { jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+//#region src/plugins/mention/react/components/Mention.tsx
+const Mention = ({ node, editor, className }) => {
+	const spanRef = useRef(null);
+	const [, setSelected, clearSelection] = useLexicalNodeSelection(node.getKey());
+	const onClick = useCallback((payload) => {
+		if (payload.target === spanRef.current) {
+			clearSelection();
+			setSelected(true);
+			return true;
+		}
+		return false;
+	}, [clearSelection, setSelected]);
+	useEffect(() => {
+		return editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW);
+	}, [
+		editor,
+		node,
+		onClick
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("editor_mention", className),
+		ref: spanRef,
+		children: ["@", node.label]
+	});
+};
+Mention.displayName = "Mention";
+//#endregion
+export { Mention as default };

package/es/plugins/mention/react/index.d.ts

@@ -0,0 +1,2 @@
+import { ReactMentionPluginProps } from "./type.js";
+import { ReactMentionPlugin } from "./ReactMentionPlugin.js";

package/es/plugins/mention/react/style.js

@@ -0,0 +1,34 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/mention/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({ mention: css`
+    user-select: none;
+
+    position: relative;
+
+    display: inline;
+
+    margin-inline: 0.25em;
+    padding-block: 0.2em;
+    padding-inline: 0.4em;
+    border: 1px solid ${cssVar.colorInfoBgHover};
+    border-radius: 0.25em;
+
+    font-size: 0.875em;
+    line-height: 1;
+    color: ${cssVar.colorInfo};
+    word-break: break-word;
+    white-space: break-spaces;
+
+    background: ${cssVar.colorInfoBg};
+
+    .editor_mention {
+      padding: 0;
+    }
+
+    &.selected {
+      color: #000;
+      background: ${cssVar.yellow};
+    }
+  ` }));
+//#endregion
+export { styles };

package/es/plugins/mention/react/type.d.ts

@@ -0,0 +1,12 @@
+import { MentionNode } from "../node/MentionNode.js";
+
+//#region src/plugins/mention/react/type.d.ts
+interface ReactMentionPluginProps {
+  className?: string;
+  markdownWriter?: (file: MentionNode) => string;
+  theme?: {
+    mention?: string;
+  };
+}
+//#endregion
+export { ReactMentionPluginProps };

package/es/plugins/slash/index.d.ts

@@ -0,0 +1,6 @@
+import { ISlashMenuOption, ISlashOption, ISlashService, SlashOptions } from "./service/i-slash-service.js";
+import { ITriggerContext, SlashPlugin, SlashPluginOptions } from "./plugin/index.js";
+import { MenuRenderProps, ReactSlashOptionProps, ReactSlashPluginProps, SlashMenuProps } from "./react/type.js";
+import { SlashMenu } from "./react/components/SlashMenu.js";
+import { ReactSlashOption } from "./react/ReactSlashOption.js";
+import { ReactSlashPlugin } from "./react/ReactSlashPlugin.js";

package/es/plugins/slash/plugin/index.d.ts

@@ -0,0 +1,27 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { ISlashOption, SlashOptions } from "../service/i-slash-service.js";
+
+//#region src/plugins/slash/plugin/index.d.ts
+interface ITriggerContext {
+  getRect: () => DOMRect;
+  items: Array<ISlashOption> | ((search: {
+    leadOffset: number;
+    matchingString: string;
+    replaceableString: string;
+  } | null) => Promise<Array<ISlashOption>>);
+  lastIndex: number;
+  match?: {
+    leadOffset: number;
+    matchingString: string;
+    replaceableString: string;
+  } | null;
+  trigger: SlashOptions['trigger'];
+}
+interface SlashPluginOptions {
+  slashOptions?: SlashOptions[];
+  triggerClose: () => void;
+  triggerOpen: (ctx: ITriggerContext) => void;
+}
+declare const SlashPlugin: IEditorPluginConstructor<SlashPluginOptions>;
+//#endregion
+export { ITriggerContext, SlashPlugin, SlashPluginOptions };