@lobehub/editor 4.24.0 → 4.25.0

package/es/plugins/codemirror-block/react/CodemirrorNode.js

@@ -7,6 +7,7 @@ import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
 import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "../command/index.js";
 import { useLexicalNodeSelection } from "../../../editor-kernel/react/useLexicalNodeSelection.js";
 import MermaidPreview from "./MermaidPreview.js";
+import { useCodemirrorEditLock } from "./useCodemirrorEditLock.js";
 import { ActionIcon, Block } from "@lobehub/ui";
 import { CodeXml, Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -21,6 +22,8 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 	const keydownRef = useRef("");
 	const instanceRef = useRef(null);
 	const isEmptyRef = useRef(false);
+	const hasLocalEditLockRef = useRef(false);
+	const releaseLockTimerRef = useRef(null);
 	const t = useTranslation();
 	const [isSelected, setSelected, clearSelection, isNodeSelected] = useLexicalNodeSelection(node.getKey());
 	const [selectedLang, setSelectedLang] = useState(node.lang || "javascript");
@@ -30,6 +33,48 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 	const [expand, setExpand] = useState(true);
 	const [preview, setPreview] = useState(false);
 	const [code, setCode] = useState(node.code);
+	const { acquireLock, isLockedByRemote, lockOwnerName, releaseLock } = useCodemirrorEditLock(node.getKey(), "CodeMirror block");
+	const editLockRef = useRef({
+		acquireLock,
+		isLockedByRemote,
+		releaseLock
+	});
+	useEffect(() => {
+		editLockRef.current = {
+			acquireLock,
+			isLockedByRemote,
+			releaseLock
+		};
+	}, [
+		acquireLock,
+		isLockedByRemote,
+		releaseLock
+	]);
+	const clearReleaseLockTimer = useCallback(() => {
+		if (!releaseLockTimerRef.current) return;
+		clearTimeout(releaseLockTimerRef.current);
+		releaseLockTimerRef.current = null;
+	}, []);
+	const acquireEditLock = useCallback(() => {
+		clearReleaseLockTimer();
+		const acquired = editLockRef.current.acquireLock();
+		if (acquired) hasLocalEditLockRef.current = true;
+		return acquired;
+	}, [clearReleaseLockTimer]);
+	const releaseEditLock = useCallback(() => {
+		clearReleaseLockTimer();
+		if (!hasLocalEditLockRef.current) return;
+		editLockRef.current.releaseLock();
+		hasLocalEditLockRef.current = false;
+	}, [clearReleaseLockTimer]);
+	const scheduleReleaseEditLock = useCallback(() => {
+		clearReleaseLockTimer();
+		releaseLockTimerRef.current = setTimeout(() => {
+			releaseLockTimerRef.current = null;
+			if (document.visibilityState === "hidden" || instanceRef.current?.view.hasFocus) return;
+			releaseEditLock();
+		}, 100);
+	}, [clearReleaseLockTimer, releaseEditLock]);
 	const handleCopy = useCallback(async () => {
 		if (instanceRef.current) {
 			const code = instanceRef.current.getValue();
@@ -83,14 +128,20 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 			return;
 		}
 		if (isSelected && instanceRef.current && isNodeSelected) {
+			if (!acquireEditLock()) {
+				clearSelection();
+				return;
+			}
 			if (instanceRef.current?.view.hasFocus) return;
 			instanceRef.current.focus();
 			if (keydownRef.current === "end") instanceRef.current.setSelectionToEnd();
 		}
 	}, [
-		isSelected,
+		acquireEditLock,
+		clearSelection,
+		editor,
 		isNodeSelected,
-		editor
+		isSelected
 	]);
 	useEffect(() => {
 		if (instanceRef.current) return;
@@ -102,6 +153,7 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 					indentWithTabs: useTabs,
 					lineNumbers: showLineNumbers,
 					mode: node.lang,
+					readOnly: editLockRef.current.isLockedByRemote,
 					tabSize,
 					theme: "default",
 					value: node.code
@@ -162,6 +214,11 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 					});
 				}));
 				instance.on("focus", () => {
+					if (!acquireEditLock()) {
+						instanceRef.current?.blur();
+						clearSelection();
+						return;
+					}
 					if (editor.getEditorState().read(() => {
 						const sel = $getSelection();
 						if (!sel) return false;
@@ -169,11 +226,13 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 						return false;
 					})) setSelected(true);
 				});
+				instance.on("blur", scheduleReleaseEditLock);
 				instanceRef.current = instance;
-				if (isSelected) instanceRef.current.focus();
+				if (isSelected && acquireEditLock()) instanceRef.current.focus();
 			});
 		}
 		return () => {
+			releaseEditLock();
 			if (instanceRef.current) {
 				instanceRef.current.destroy();
 				instanceRef.current = null;
@@ -193,13 +252,44 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 		node,
 		setSelected
 	]);
+	useEffect(() => {
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible" && !instanceRef.current?.view.hasFocus) releaseEditLock();
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+	}, [releaseEditLock]);
+	useEffect(() => {
+		instanceRef.current?.setOption("readOnly", isLockedByRemote);
+		if (isLockedByRemote) {
+			releaseEditLock();
+			instanceRef.current?.blur();
+			clearSelection();
+		}
+	}, [
+		clearSelection,
+		isLockedByRemote,
+		releaseEditLock
+	]);
+	const handleBlockMouseDown = useCallback((event) => {
+		event.stopPropagation();
+		if (!isLockedByRemote) return;
+		event.preventDefault();
+		instanceRef.current?.blur();
+		clearSelection();
+	}, [clearSelection, isLockedByRemote]);
 	return /* @__PURE__ */ jsxs(Block, {
-		className: cx(styles, isSelected && !isNodeSelected && "selected", className),
-		onMouseDown: (e) => e.stopPropagation(),
+		className: cx(styles, isSelected && !isNodeSelected && "selected", isLockedByRemote && "collab-locked", className),
+		onMouseDown: handleBlockMouseDown,
 		onMouseUp: (e) => e.stopPropagation(),
 		onSelect: (e) => e.stopPropagation(),
 		variant: "filled",
 		children: [
+			isLockedByRemote && /* @__PURE__ */ jsxs("div", {
+				className: "cm-collab-lock",
+				contentEditable: false,
+				children: [lockOwnerName || "Someone", " editing"]
+			}),
 			/* @__PURE__ */ jsx(Toolbar, {
 				expand,
 				extra: selectedLang === "mermaid" ? /* @__PURE__ */ jsx(ActionIcon, {

package/es/plugins/codemirror-block/react/useCodemirrorEditLock.js

@@ -0,0 +1,33 @@
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { ICodemirrorEditLockService } from "../service/index.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/plugins/codemirror-block/react/useCodemirrorEditLock.ts
+function useCodemirrorEditLock(key, label) {
+	const [editor] = useLexicalComposerContext();
+	const service = editor.requireService(ICodemirrorEditLockService);
+	const [, setVersion] = useState(0);
+	useEffect(() => {
+		return service?.subscribe(() => {
+			setVersion((value) => value + 1);
+		});
+	}, [service]);
+	const remoteLockOwner = service?.getRemoteLockOwner(key) || null;
+	const acquireLock = useCallback(() => {
+		return service?.acquireLock(key, label) ?? true;
+	}, [
+		key,
+		label,
+		service
+	]);
+	const releaseLock = useCallback(() => {
+		service?.releaseLock(key);
+	}, [key, service]);
+	return {
+		acquireLock,
+		isLockedByRemote: !!remoteLockOwner,
+		lockOwnerName: remoteLockOwner?.name,
+		releaseLock
+	};
+}
+//#endregion
+export { useCodemirrorEditLock };

package/es/plugins/codemirror-block/service/index.d.ts

@@ -0,0 +1,40 @@
+import { IServiceID } from "../../../types/kernel.js";
+import "../../../types/index.js";
+//#region src/plugins/codemirror-block/service/index.d.ts
+interface CodemirrorEditLock {
+  key: string;
+  label?: string;
+  updatedAt: number;
+}
+interface CodemirrorEditLockOwner {
+  id: number | string;
+  lock: CodemirrorEditLock;
+  name?: string;
+}
+interface CodemirrorEditLockProvider {
+  acquireLock: (key: string, label: string) => boolean;
+  getRemoteLockOwner: (key: string) => CodemirrorEditLockOwner | null;
+  releaseLock: (key: string) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+interface ICodemirrorEditLockService {
+  acquireLock: (key: string, label: string) => boolean;
+  getRemoteLockOwner: (key: string) => CodemirrorEditLockOwner | null;
+  registerProvider: (provider: CodemirrorEditLockProvider) => () => void;
+  releaseLock: (key: string) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+declare const ICodemirrorEditLockService: IServiceID<ICodemirrorEditLockService>;
+declare class CodemirrorEditLockService implements ICodemirrorEditLockService {
+  private providerUnsubscribers;
+  private providers;
+  private subscribers;
+  acquireLock(key: string, label: string): boolean;
+  getRemoteLockOwner(key: string): CodemirrorEditLockOwner | null;
+  registerProvider(provider: CodemirrorEditLockProvider): () => void;
+  releaseLock(key: string): void;
+  subscribe(listener: () => void): () => void;
+  private notify;
+}
+//#endregion
+export { CodemirrorEditLock, CodemirrorEditLockOwner, CodemirrorEditLockProvider, CodemirrorEditLockService, ICodemirrorEditLockService };

package/es/plugins/codemirror-block/service/index.js

@@ -0,0 +1,59 @@
+import { genServiceId, init_utils } from "../../../editor-kernel/utils.js";
+//#region src/plugins/codemirror-block/service/index.ts
+init_utils();
+const ICodemirrorEditLockService = genServiceId("CodemirrorEditLockService");
+var CodemirrorEditLockService = class {
+	constructor() {
+		this.providerUnsubscribers = /* @__PURE__ */ new Map();
+		this.providers = /* @__PURE__ */ new Set();
+		this.subscribers = /* @__PURE__ */ new Set();
+	}
+	acquireLock(key, label) {
+		if (this.getRemoteLockOwner(key)) return false;
+		const acquiredProviders = [];
+		for (const provider of this.providers) {
+			if (!provider.acquireLock(key, label)) {
+				acquiredProviders.forEach((acquiredProvider) => acquiredProvider.releaseLock(key));
+				this.notify();
+				return false;
+			}
+			acquiredProviders.push(provider);
+		}
+		this.notify();
+		return true;
+	}
+	getRemoteLockOwner(key) {
+		for (const provider of this.providers) {
+			const owner = provider.getRemoteLockOwner(key);
+			if (owner) return owner;
+		}
+		return null;
+	}
+	registerProvider(provider) {
+		this.providers.add(provider);
+		this.providerUnsubscribers.set(provider, provider.subscribe(() => this.notify()));
+		this.notify();
+		return () => {
+			this.providerUnsubscribers.get(provider)?.();
+			this.providerUnsubscribers.delete(provider);
+			this.providers.delete(provider);
+			this.notify();
+		};
+	}
+	releaseLock(key) {
+		this.providers.forEach((provider) => provider.releaseLock(key));
+		this.notify();
+	}
+	subscribe(listener) {
+		this.subscribers.add(listener);
+		listener();
+		return () => {
+			this.subscribers.delete(listener);
+		};
+	}
+	notify() {
+		this.subscribers.forEach((listener) => listener());
+	}
+};
+//#endregion
+export { CodemirrorEditLockService, ICodemirrorEditLockService };

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

@@ -0,0 +1,17 @@
+import "../node/CollapsibleNode.js";
+import { LexicalEditor, LexicalNode, NodeKey } from "lexical";
+//#region src/plugins/collapsible/command/index.d.ts
+interface InsertCollapsiblePayload {
+  children?: LexicalNode[];
+  collapsed?: boolean;
+  title?: string;
+}
+interface UpdateCollapsiblePayload {
+  collapsed?: boolean;
+  nodeKey: NodeKey;
+  title?: string;
+}
+declare const INSERT_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<InsertCollapsiblePayload | undefined>;
+declare const UPDATE_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<UpdateCollapsiblePayload>;
+//#endregion
+export { INSERT_COLLAPSIBLE_COMMAND, InsertCollapsiblePayload, UPDATE_COLLAPSIBLE_COMMAND, UpdateCollapsiblePayload };

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

@@ -0,0 +1,72 @@
+import { $createCollapsibleNode, $isCollapsibleNode } from "../node/CollapsibleNode.js";
+import { $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $insertNodes, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+//#region src/plugins/collapsible/command/index.ts
+const INSERT_COLLAPSIBLE_COMMAND = createCommand("INSERT_COLLAPSIBLE_COMMAND");
+const UPDATE_COLLAPSIBLE_COMMAND = createCommand("UPDATE_COLLAPSIBLE_COMMAND");
+function registerCollapsibleCommand(editor, canCollapse = () => true) {
+	const unregisterInsert = editor.registerCommand(INSERT_COLLAPSIBLE_COMMAND, (payload = {}) => {
+		editor.update(() => {
+			const payloadChildren = payload.children;
+			const hasPayloadChildren = Boolean(payloadChildren?.length);
+			const title = payload.title ?? (hasPayloadChildren ? "Details" : "");
+			const collapsibleNode = $createCollapsibleNode(title, Boolean(payload.collapsed));
+			let children;
+			if (payloadChildren?.length) children = ensureTitleChild(payloadChildren, title);
+			else {
+				const titleChild = $createParagraphNode();
+				if (title) titleChild.append($createTextNode(title));
+				children = [titleChild, $createParagraphNode()];
+			}
+			collapsibleNode.append(...children);
+			const parentCollapsible = $getSelectedCollapsibleAncestor();
+			if (parentCollapsible) parentCollapsible.insertAfter(collapsibleNode);
+			else $insertNodes([collapsibleNode]);
+			collapsibleNode.selectStart();
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR);
+	const unregisterUpdate = editor.registerCommand(UPDATE_COLLAPSIBLE_COMMAND, ({ collapsed, nodeKey, title }) => {
+		editor.update(() => {
+			const node = $getNodeByKey(nodeKey);
+			if (!$isCollapsibleNode(node)) return;
+			if (title !== void 0) {
+				node.setTitle(title);
+				updateTitleChild(node, title);
+			}
+			if (collapsed !== void 0 && (!collapsed || canCollapse(node))) node.setCollapsed(collapsed);
+		});
+		return true;
+	}, COMMAND_PRIORITY_EDITOR);
+	return () => {
+		unregisterInsert();
+		unregisterUpdate();
+	};
+}
+function $getSelectedCollapsibleAncestor() {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection)) return null;
+	let current = selection.anchor.getNode();
+	while (current) {
+		if ($isCollapsibleNode(current)) return current;
+		current = current.getParent();
+	}
+	return null;
+}
+function $createTitleParagraph(title) {
+	const paragraph = $createParagraphNode();
+	paragraph.append($createTextNode(title));
+	return paragraph;
+}
+function ensureTitleChild(children, title) {
+	if (!title) return children;
+	if (children[0]?.getTextContent().trim() === title.trim()) return children;
+	return [$createTitleParagraph(title), ...children];
+}
+function updateTitleChild(node, title) {
+	const titleParagraph = $createTitleParagraph(title);
+	const firstChild = node.getFirstChild();
+	if (firstChild) firstChild.replace(titleParagraph);
+	else node.append(titleParagraph);
+}
+//#endregion
+export { INSERT_COLLAPSIBLE_COMMAND, UPDATE_COLLAPSIBLE_COMMAND, registerCollapsibleCommand };

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

@@ -0,0 +1,7 @@
+import { $createCollapsibleNode, $isCollapsibleNode, CollapsibleNode, SerializedCollapsibleNode } from "./node/CollapsibleNode.js";
+import { INSERT_COLLAPSIBLE_COMMAND, UPDATE_COLLAPSIBLE_COMMAND } from "./command/index.js";
+import { CollapsiblePlugin, CollapsiblePluginOptions } from "./plugin/index.js";
+import { ReactCollapsiblePluginProps } from "./react/type.js";
+import ReactCollapsiblePlugin from "./react/ReactCollapsiblePlugin.js";
+import "./react/index.js";
+export { $createCollapsibleNode, $isCollapsibleNode, CollapsibleNode, CollapsiblePlugin, CollapsiblePluginOptions, INSERT_COLLAPSIBLE_COMMAND, ReactCollapsiblePlugin, type ReactCollapsiblePluginProps, SerializedCollapsibleNode, UPDATE_COLLAPSIBLE_COMMAND };

package/es/plugins/collapsible/node/CollapsibleNode.d.ts

@@ -0,0 +1,30 @@
+import { DOMConversionMap, DOMExportOutput, EditorConfig, ElementDOMSlot, ElementNode, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey, SerializedElementNode, Spread } from "lexical";
+//#region src/plugins/collapsible/node/CollapsibleNode.d.ts
+type SerializedCollapsibleNode = Spread<{
+  collapsed: boolean;
+  title: string;
+}, SerializedElementNode>;
+declare class CollapsibleNode extends ElementNode {
+  __collapsed: boolean;
+  __title: string;
+  static getType(): string;
+  static clone(node: CollapsibleNode): CollapsibleNode;
+  static importDOM(): DOMConversionMap | null;
+  static importJSON(serializedNode: SerializedCollapsibleNode): CollapsibleNode;
+  constructor(title?: string, collapsed?: boolean, key?: NodeKey);
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+  updateDOM(prevNode: this, dom: HTMLElement): boolean;
+  exportDOM(): DOMExportOutput;
+  exportJSON(): SerializedCollapsibleNode;
+  getDOMSlot(element: HTMLElement): ElementDOMSlot<HTMLElement>;
+  getTitle(): string;
+  isCollapsed(): boolean;
+  isShadowRoot(): boolean;
+  setCollapsed(collapsed: boolean): this;
+  setTitle(title: string): this;
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedCollapsibleNode>): this;
+}
+declare function $createCollapsibleNode(title?: string, collapsed?: boolean): CollapsibleNode;
+declare function $isCollapsibleNode(node: LexicalNode | null | undefined): node is CollapsibleNode;
+//#endregion
+export { $createCollapsibleNode, $isCollapsibleNode, CollapsibleNode, SerializedCollapsibleNode };

package/es/plugins/collapsible/node/CollapsibleNode.js

@@ -0,0 +1,138 @@
+import { $applyNodeReplacement, $createParagraphNode, $createTextNode, ElementNode } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+//#region src/plugins/collapsible/node/CollapsibleNode.ts
+const CONTENT_SELECTOR = "[data-collapsible-content=\"true\"]";
+const TOGGLE_SELECTOR = "[data-collapsible-toggle=\"true\"]";
+var CollapsibleNode = class CollapsibleNode extends ElementNode {
+	static getType() {
+		return "collapsible";
+	}
+	static clone(node) {
+		return new CollapsibleNode(node.__title, node.__collapsed, node.__key);
+	}
+	static importDOM() {
+		return { details: () => ({
+			conversion: $convertDetailsElement,
+			priority: 1
+		}) };
+	}
+	static importJSON(serializedNode) {
+		const node = $createCollapsibleNode(serializedNode.title || "Details").updateFromJSON(serializedNode);
+		if (shouldPrependTitle(serializedNode)) {
+			const titleParagraph = $createTitleParagraph(serializedNode.title || "Details");
+			const firstChild = node.getFirstChild();
+			if (firstChild) firstChild.insertBefore(titleParagraph);
+			else node.append(titleParagraph);
+		}
+		return node;
+	}
+	constructor(title = "Details", collapsed = false, key) {
+		super(key);
+		this.__title = title;
+		this.__collapsed = collapsed;
+	}
+	createDOM(config, editor) {
+		const element = document.createElement("section");
+		addClassNamesToElement(element, config.theme.collapsible);
+		element.dataset.collapsible = "true";
+		element.dataset.collapsibleCollapsed = String(this.__collapsed);
+		const toggle = document.createElement("button");
+		toggle.type = "button";
+		toggle.contentEditable = "false";
+		toggle.dataset.collapsibleToggle = "true";
+		toggle.setAttribute("aria-expanded", String(!this.__collapsed));
+		toggle.setAttribute("aria-label", this.__collapsed ? "Expand collapsible block" : "Collapse collapsible block");
+		toggle.addEventListener("click", () => {
+			editor.update(() => {
+				const latest = this.getLatest();
+				if ($isCollapsibleNode(latest)) latest.setCollapsed(!latest.isCollapsed());
+			});
+		});
+		const content = document.createElement("div");
+		content.dataset.collapsibleContent = "true";
+		element.append(toggle, content);
+		return element;
+	}
+	updateDOM(prevNode, dom) {
+		const toggle = dom.querySelector(TOGGLE_SELECTOR);
+		dom.dataset.collapsibleCollapsed = String(this.__collapsed);
+		if (toggle && prevNode.__collapsed !== this.__collapsed) {
+			toggle.setAttribute("aria-expanded", String(!this.__collapsed));
+			toggle.setAttribute("aria-label", this.__collapsed ? "Expand collapsible block" : "Collapse collapsible block");
+		}
+		return false;
+	}
+	exportDOM() {
+		const element = document.createElement("details");
+		if (!this.__collapsed) element.setAttribute("open", "");
+		const summary = document.createElement("summary");
+		summary.textContent = this.getTitle();
+		element.append(summary);
+		return { element };
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			collapsed: this.isCollapsed(),
+			title: this.getTitle()
+		};
+	}
+	getDOMSlot(element) {
+		const content = element.querySelector(CONTENT_SELECTOR);
+		if (content instanceof HTMLElement) return super.getDOMSlot(element).withElement(content);
+		return super.getDOMSlot(element);
+	}
+	getTitle() {
+		const latest = this.getLatest();
+		const firstChild = latest.getFirstChild();
+		return firstChild ? firstChild.getTextContent().trim() : latest.__title;
+	}
+	isCollapsed() {
+		return this.getLatest().__collapsed;
+	}
+	isShadowRoot() {
+		return true;
+	}
+	setCollapsed(collapsed) {
+		const writable = this.getWritable();
+		writable.__collapsed = collapsed;
+		return writable;
+	}
+	setTitle(title) {
+		const writable = this.getWritable();
+		writable.__title = title;
+		return writable;
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setTitle(serializedNode.title || "Details").setCollapsed(Boolean(serializedNode.collapsed));
+	}
+};
+function $createCollapsibleNode(title = "Details", collapsed = false) {
+	return $applyNodeReplacement(new CollapsibleNode(title, collapsed));
+}
+function $isCollapsibleNode(node) {
+	return node instanceof CollapsibleNode;
+}
+function $convertDetailsElement(domNode) {
+	if (!(domNode instanceof HTMLDetailsElement)) return { node: null };
+	return { node: $createCollapsibleNode(domNode.querySelector("summary")?.textContent?.trim() || "Details", !domNode.open) };
+}
+function $createTitleParagraph(title) {
+	const paragraph = $createParagraphNode();
+	paragraph.append($createTextNode(title));
+	return paragraph;
+}
+function getSerializedText(node) {
+	if (!node || typeof node !== "object") return "";
+	if ("text" in node && typeof node.text === "string") return node.text;
+	if ("children" in node && Array.isArray(node.children)) return node.children.map((child) => getSerializedText(child)).join("");
+	return "";
+}
+function shouldPrependTitle(serializedNode) {
+	const title = serializedNode.title?.trim();
+	if (!title) return false;
+	const firstChild = (Array.isArray(serializedNode.children) ? serializedNode.children : [])[0];
+	return getSerializedText(firstChild).trim() !== title;
+}
+//#endregion
+export { $createCollapsibleNode, $isCollapsibleNode, CollapsibleNode };

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

@@ -0,0 +1,11 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import "../../../types/index.js";
+//#region src/plugins/collapsible/plugin/index.d.ts
+interface CollapsiblePluginOptions {
+  theme?: {
+    collapsible?: string;
+  };
+}
+declare const CollapsiblePlugin: IEditorPluginConstructor<CollapsiblePluginOptions>;
+//#endregion
+export { CollapsiblePlugin, CollapsiblePluginOptions };