@lobehub/editor 4.24.0 → 4.25.0

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.js

@@ -246,6 +246,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`);
 		}

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
@@ -458,6 +472,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