@lobehub/editor 4.24.1 → 4.25.1

package/es/codemirror/style.js

@@ -50,6 +50,48 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       transition: all 0.3s;
     }
 
+    &.collab-locked {
+      cursor: not-allowed;
+    }
+
+    &.collab-locked::after {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      z-index: 11;
+      inset: 0;
+
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    &.collab-locked .cm-container {
+      opacity: 0.72;
+    }
+
+    .cm-collab-lock {
+      position: absolute;
+      z-index: 12;
+      inset-block-start: 8px;
+      inset-inline-end: 8px;
+
+      overflow: hidden;
+
+      max-width: min(240px, calc(100% - 16px));
+      padding-block: 2px;
+      padding-inline: 6px;
+      border-radius: 6px;
+
+      font-size: 12px;
+      line-height: 18px;
+      color: ${cssVar.colorTextSecondary};
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      background: ${cssVar.colorBgElevated};
+      box-shadow: ${cssVar.boxShadowTertiary};
+    }
+
     .cm-container {
       position: relative;
       width: 100%;

package/es/editor-kernel/kernel.d.ts

@@ -24,6 +24,11 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   private hotReloadMode;
   private logger;
   private historyState;
+  /**
+   * Root-scoped resources are attached to the Lexical editor's root listener
+   * so direct Lexical setRootElement(null) calls are safe as well.
+   */
+  private unregisterRootLifecycle?;
   private editor?;
   private headlessEditor;
   constructor();
@@ -44,6 +49,7 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   destroy(): void;
   getRootElement(): HTMLElement | null;
   setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+  setRootElement(dom: null, editable?: boolean): LexicalEditor | null;
   setEditable(editable: boolean): void;
   initNodeEditor(): LexicalEditor;
   initHeadlessEditor(): LexicalEditor;
@@ -80,6 +86,9 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   registerNodeTransform(transform: INodeRegistrationTransform): () => void;
   registerBeforeEditorInit(hook: IBeforeEditorInitLifecycle): () => void;
   registerRootClassName(className: string): () => void;
+  registerRootListener(listener: (rootElement: HTMLElement | null) => void): () => void;
+  private getEditorId;
+  private registerRootLifecycle;
   private runBeforeEditorInitLifecycle;
   private applyRootClassNames;
   private resolveNodesForInitialization;

package/es/editor-kernel/kernel.js

@@ -95,26 +95,46 @@ var init_kernel = __esmMin((() => {
 			return this.editor || null;
 		}
 		destroy() {
-			unregisterEditorKernel(this.themes[EDITOR_THEME_KEY]);
+			const editor = this.editor;
+			const editorId = this.getEditorId();
 			this.logger.info(`🗑️ Destroying editor with ${this.pluginsInstances.length} plugins`);
+			if (editor) try {
+				editor.setRootElement(null);
+			} catch (error) {
+				this.logger.warn("Failed to detach editor root during destroy:", error);
+			}
+			unregisterEditorKernel(editorId);
 			try {
-				this.editor?.setEditorState(createEmptyEditorState());
+				editor?.setEditorState(createEmptyEditorState());
 			} catch (error) {
 				this.logger.warn("Failed to reset editor state during destroy:", error);
 			}
-			this.dataTypeMap.clear();
+			this.unregisterRootLifecycle?.();
+			this.unregisterRootLifecycle = void 0;
+			let destroyError;
 			this.pluginsInstances.forEach((plugin) => {
-				if (plugin.destroy) plugin.destroy();
+				try {
+					plugin.destroy?.();
+				} catch (error) {
+					destroyError ??= error;
+				}
 			});
 			this.pluginsInstances = [];
-			this.beforeEditorInitHooks = [];
+			this.dataTypeMap.clear();
+			this.decorators = {};
 			this.nodeTransforms = [];
+			this.nodes = [];
+			this.beforeEditorInitHooks = [];
 			this.rootClassNames.clear();
 			this.serviceMap.clear();
-			this.decorators = {};
-			this.themes = {};
+			this.themes = { [EDITOR_THEME_KEY]: generateEditorId() };
+			this.historyState = createEmptyHistoryState();
+			this._commands.clear();
+			this._commandsClean.clear();
+			this.editor = void 0;
 			this.headlessEditor = false;
 			this.logger.info("✅ Editor destroyed");
+			if (destroyError) throw destroyError;
 		}
 		getRootElement() {
 			if (this.headlessEditor) return null;
@@ -122,12 +142,23 @@ var init_kernel = __esmMin((() => {
 		}
 		setRootElement(dom, editable = true) {
 			if (this.editor) {
-				if (this.headlessEditor) throw new Error("Headless editor cannot be attached to a root element.");
+				if (this.headlessEditor) {
+					if (dom === null) return this.editor;
+					throw new Error("Headless editor cannot be attached to a root element.");
+				}
 				this.logger.warn("[Editor] Editor is already initialized, updating root element only");
+				if (dom) registerEditorKernel(this.getEditorId(), this);
 				this.editor.setRootElement(dom);
-				this.applyRootClassNames(dom);
+				if (dom) {
+					this.editor.setEditable(editable);
+					this.applyRootClassNames(dom);
+				}
 				return this.editor;
 			}
+			if (dom === null) {
+				unregisterEditorKernel(this.getEditorId());
+				return null;
+			}
 			if (this.pluginsInstances.length === 0) {
 				this.logger.info(`🔌 Initializing ${this.plugins.length} plugins`);
 				for (const plugin of this.plugins) {
@@ -138,7 +169,7 @@ var init_kernel = __esmMin((() => {
 			this.runBeforeEditorInitLifecycle();
 			const resolvedNodes = this.resolveNodesForInitialization();
 			this.logger.info(`📝 Creating editor with ${resolvedNodes.length} nodes`);
-			registerEditorKernel(this.themes[EDITOR_THEME_KEY], this);
+			registerEditorKernel(this.getEditorId(), this);
 			const editor = this.editor = createEditor({
 				__kernel: this,
 				editable,
@@ -151,9 +182,9 @@ var init_kernel = __esmMin((() => {
 				theme: this.themes
 			});
 			this.headlessEditor = false;
+			this.registerRootLifecycle(editor);
 			this.editor.setRootElement(dom);
 			this.applyRootClassNames(dom);
-			registerEvent(editor, dom);
 			this.pluginsInstances.forEach((plugin) => {
 				plugin.onInit?.(editor);
 			});
@@ -193,6 +224,7 @@ var init_kernel = __esmMin((() => {
 				theme: this.themes
 			});
 			this.headlessEditor = false;
+			this.registerRootLifecycle(editor);
 			this.pluginsInstances.forEach((plugin) => {
 				plugin.onInit?.(editor);
 			});
@@ -246,6 +278,9 @@ var init_kernel = __esmMin((() => {
 				this.historyState.current = null;
 			}
 			datasource.read(this.editor, content, options);
+			this.pluginsInstances.forEach((plugin) => {
+				plugin.onDocumentChange?.(type, content, options);
+			});
 			this.emit("documentChange", type, content);
 			this.logger.debug(`📥 Set ${type} document`);
 		}
@@ -510,6 +545,34 @@ var init_kernel = __esmMin((() => {
 				if (currentRootElement) currentRootElement.classList.remove(...classNames);
 			};
 		}
+		registerRootListener(listener) {
+			if (!this.editor || this.headlessEditor) return noop;
+			return this.editor.registerRootListener(listener);
+		}
+		getEditorId() {
+			return this.themes[EDITOR_THEME_KEY];
+		}
+		registerRootLifecycle(editor) {
+			this.unregisterRootLifecycle?.();
+			let rootEventCleanup;
+			const clearRootEvent = () => {
+				rootEventCleanup?.();
+				rootEventCleanup = void 0;
+			};
+			const unregisterRootListener = editor.registerRootListener((rootElement) => {
+				clearRootEvent();
+				if (!rootElement) {
+					unregisterEditorKernel(this.getEditorId());
+					return;
+				}
+				registerEditorKernel(this.getEditorId(), this);
+				rootEventCleanup = registerEvent(editor, rootElement);
+			});
+			this.unregisterRootLifecycle = () => {
+				clearRootEvent();
+				unregisterRootListener();
+			};
+		}
 		runBeforeEditorInitLifecycle() {
 			for (const hook of this.beforeEditorInitHooks) hook();
 		}

package/es/editor-kernel/react/useDecorators.js

@@ -1,7 +1,7 @@
 import { CAN_USE_DOM } from "../../common/canUseDOM.js";
 import { Suspense, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createPortal, flushSync } from "react-dom";
+import { createPortal } from "react-dom";
 //#region src/editor-kernel/react/useDecorators.tsx
 const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
 function useDecorators(editor, ErrorBoundary) {
@@ -12,9 +12,7 @@ function useDecorators(editor, ErrorBoundary) {
 			const initialDecorators = editor.getDecorators();
 			setDecorators(initialDecorators);
 			clears.push(editor.registerDecoratorListener((nextDecorators) => {
-				flushSync(() => {
-					setDecorators(nextDecorators);
-				});
+				setDecorators(nextDecorators);
 			}));
 		};
 		const lexicalEditor = editor.getLexicalEditor();

package/es/headless/collapsible-plugin.js

@@ -0,0 +1,74 @@
+import { INodeHelper, init_helper } from "../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../editor-kernel/plugin.js";
+import { ILitexmlService } from "../plugins/litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../plugins/markdown/service/shortcut.js";
+import { $isCollapsibleNode, CollapsibleNode } from "../plugins/collapsible/node/CollapsibleNode.js";
+//#region src/headless/collapsible-plugin.ts
+init_helper();
+init_plugin();
+const HeadlessCollapsiblePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "HeadlessCollapsiblePlugin";
+	}
+	constructor(kernel) {
+		super();
+		this.kernel = kernel;
+		kernel.registerNodes([CollapsibleNode]);
+	}
+	onInit(_editor) {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		markdownService?.registerMarkdownWriter(CollapsibleNode.getType(), (ctx, node) => {
+			if (!$isCollapsibleNode(node)) return false;
+			ctx.appendLine(`<details${node.isCollapsed() ? "" : " open"}>\n`);
+			ctx.appendLine(`<summary>${escapeHtml(node.getTitle())}</summary>\n\n`);
+			node.getChildren().slice(1).forEach((child) => ctx.processChild(ctx, child));
+			ctx.appendLine("\n</details>\n");
+			return true;
+		});
+		markdownService?.registerMarkdownReader("html", (node, children) => {
+			const tag = getHtmlTagName(node.value);
+			if (tag === "summary") return INodeHelper.createTypeNode("__collapsible_summary", { text: getNodeText(children) });
+			if (tag !== "details") return false;
+			const summaryNode = children.find((child) => child.type === "__collapsible_summary");
+			const contentChildren = children.filter((child) => child.type !== "__collapsible_summary");
+			const title = summaryNode && "text" in summaryNode && typeof summaryNode.text === "string" ? summaryNode.text : extractSummaryTitle(node.value) || "Details";
+			return INodeHelper.createElementNode(CollapsibleNode.getType(), {
+				children: ensureTitleChildren(contentChildren, title),
+				collapsed: !/\sopen(?:\s|>|$)/i.test(node.value),
+				title
+			});
+		});
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		litexmlService?.registerXMLWriter(CollapsibleNode.getType(), (node, ctx) => {
+			if (!$isCollapsibleNode(node)) return false;
+			return ctx.createXmlNode("collapsible", {
+				collapsed: String(node.isCollapsed()),
+				title: node.getTitle()
+			});
+		});
+		litexmlService?.registerXMLReader("collapsible", (xmlNode, children) => {
+			const title = xmlNode.getAttribute("title") || "Details";
+			return INodeHelper.createElementNode(CollapsibleNode.getType(), {
+				children: ensureTitleChildren(children, title),
+				collapsed: xmlNode.getAttribute("collapsed") === "true",
+				title
+			});
+		});
+	}
+};
+const getHtmlTagName = (value) => value.match(/^<\/?\s*([\da-z-]+)/i)?.[1]?.toLowerCase() || "";
+const escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+const extractSummaryTitle = (value) => value.match(/<summary\b[^>]*>([\S\s]*?)<\/summary>/i)?.[1]?.trim() || "";
+const getNodeText = (children) => children.map((child) => {
+	if (!child || typeof child !== "object") return "";
+	if ("text" in child && typeof child.text === "string") return child.text;
+	if ("children" in child && Array.isArray(child.children)) return getNodeText(child.children);
+	return "";
+}).join("");
+const ensureTitleChildren = (children, title) => {
+	const trimmedTitle = title.trim();
+	if (!trimmedTitle || getNodeText(children.slice(0, 1)).trim() === trimmedTitle) return children;
+	return [INodeHelper.createParagraph({ children: [INodeHelper.createTextNode(title)] }), ...children];
+};
+//#endregion
+export { HeadlessCollapsiblePlugin };

package/es/headless/index.js

@@ -15,6 +15,7 @@ import { ListPlugin } from "../plugins/list/plugin/index.js";
 import { MathPlugin } from "../plugins/math/plugin/index.js";
 import { MentionPlugin } from "../plugins/mention/plugin/index.js";
 import { TablePlugin } from "../plugins/table/plugin/index.js";
+import { HeadlessCollapsiblePlugin } from "./collapsible-plugin.js";
 import { extractMediaFromEditorState } from "./extract-media-from-editor-state.js";
 //#region src/headless/index.ts
 init_utils();
@@ -118,6 +119,7 @@ const DEFAULT_HEADLESS_EDITOR_PLUGINS = [
 	HRPlugin,
 	ListPlugin,
 	TablePlugin,
+	HeadlessCollapsiblePlugin,
 	LitexmlPlugin
 ];
 var HeadlessEditor = class {

package/es/headless.d.ts

@@ -79,6 +79,12 @@ declare const _default: {
     replace: string;
   };
   link: {
+    copy: string;
+    copySuccess: string;
+    convertToCard: string;
+    convertToIframe: string;
+    convertToLink: string;
+    convertToSchema: string;
     edit: string;
     editLinkTitle: string;
     editTextTitle: string;
@@ -112,6 +118,14 @@ declare const _default: {
     insertRowAbove: string;
     insertRowBelow: string;
   };
+  toc: {
+    ariaLabel: string;
+    empty: string;
+    expand: string;
+    pin: string;
+    title: string;
+    unpin: string;
+  };
 };
 //#endregion
 //#region src/types/locale.d.ts
@@ -343,6 +357,7 @@ interface IEditor {
    * @param dom
    */
   setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+  setRootElement(dom: null, editable?: boolean): LexicalEditor | null;
   /**
    * set editor selection
    * @param selection
@@ -421,6 +436,17 @@ interface IEditorKernel extends IEditor {
    * @returns unregister function
    */
   registerRootClassName(className: string): () => void;
+  /**
+   * Register a callback for root attach/detach events.
+   *
+   * Call this after the kernel's Lexical editor has been initialized (usually
+   * from plugin onInit). Lexical immediately invokes a newly registered root
+   * listener with the current root, so listeners registered after the initial
+   * setRootElement still receive the first root attach. Headless kernels
+   * return a no-op cleanup because headless Lexical editors do not support
+   * root listeners.
+   */
+  registerRootListener(listener: (rootElement: HTMLElement | null) => void): () => void;
   /**
    * Register service
    * @param serviceId
@@ -458,6 +484,10 @@ interface IEditorPlugin<IConfig> {
    * Editor destruction
    */
   destroy(): void;
+  /**
+   * After editor document content is written by setDocument
+   */
+  onDocumentChange?(type: string, content: any, options?: IDocumentOptions): void;
   /**
    * After Lexical editor instantiation
    * @param editor Lexical editor instance