@lobehub/editor 4.24.1 → 4.25.0

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

@@ -0,0 +1,535 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { $getNearestNodeFromDOMNode as $getNearestNodeFromDOMNode$1, init_utils } from "../../../editor-kernel/utils.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { INSERT_TABLE_COMMAND } from "../../table/command/index.js";
+import { $isCollapsibleNode, CollapsibleNode } from "../node/CollapsibleNode.js";
+import { registerCollapsibleCommand } from "../command/index.js";
+import { IYjsService } from "../../yjs/service/index.js";
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isDecoratorNode, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
+import { getAnchorAndFocusCollabNodesForUserState } from "@lexical/yjs";
+//#region src/plugins/collapsible/plugin/index.ts
+init_helper();
+init_plugin();
+init_utils();
+const COLLAPSIBLE_SELECTOR = "[data-collapsible=\"true\"]";
+const CONTENT_SELECTOR = "[data-collapsible-content=\"true\"]";
+const TOGGLE_SELECTOR = "[data-collapsible-toggle=\"true\"]";
+const CollapsiblePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "CollapsiblePlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		kernel.registerNodes([CollapsibleNode]);
+		if (config?.theme) kernel.registerThemes(config.theme);
+	}
+	onInit(editor) {
+		const canCollapse = (node) => !hasRemoteSelectionInsideCollapsible(this.kernel, node);
+		this.register(registerCollapsibleCommand(editor, canCollapse));
+		this.register(registerCollaborativeCollapseGuard(editor, this.kernel));
+		this.register(registerCollapsibleDomBehavior(editor));
+		this.register(registerCollapsedSelectionGuard(editor));
+		this.register(registerEmptyCollapsibleBackspace(editor));
+		this.register(registerTableInsertionBoundary(editor));
+		this.registerMarkdown();
+		this.registerLiteXml();
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		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
+			});
+		});
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		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
+			});
+		});
+	}
+};
+function registerCollaborativeCollapseGuard(editor, kernel) {
+	const handleClick = (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		const section = target.closest(TOGGLE_SELECTOR)?.closest(COLLAPSIBLE_SELECTOR);
+		if (!section) return;
+		let shouldBlock = false;
+		editor.getEditorState().read(() => {
+			const node = $getCollapsibleNodeFromSection(section, editor);
+			shouldBlock = Boolean(node && !node.isCollapsed() && hasRemoteSelectionInsideCollapsible(kernel, node));
+		});
+		if (!shouldBlock) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	return editor.registerRootListener((rootElement, prevRootElement) => {
+		prevRootElement?.removeEventListener("click", handleClick, true);
+		rootElement?.addEventListener("click", handleClick, true);
+	});
+}
+function hasRemoteSelectionInsideCollapsible(kernel, collapsible) {
+	const collaborationState = kernel.requireService(IYjsService)?.getState();
+	if (!collaborationState) return false;
+	const awarenessStates = collaborationState.provider.awareness.getStates();
+	for (const [clientId, userState] of awarenessStates) {
+		if (clientId === collaborationState.binding.clientID) continue;
+		if (getRemoteSelectionNodes(collaborationState, clientId, userState).some((node) => isDescendantOf(node, collapsible))) return true;
+	}
+	return false;
+}
+function getRemoteSelectionNodes(collaborationState, clientId, userState) {
+	if (!userState) return [];
+	const nodes = [];
+	try {
+		const { anchorCollabNode, focusCollabNode } = getAnchorAndFocusCollabNodesForUserState(collaborationState.binding, userState);
+		const anchorNode = anchorCollabNode?.getNode();
+		const focusNode = focusCollabNode?.getNode();
+		nodes.push(...[anchorNode, focusNode].filter((node) => Boolean(node)));
+	} catch {}
+	const selection = collaborationState.binding.cursors.get(clientId)?.selection;
+	if (selection) nodes.push(...[$getNodeByKey(selection.anchor.key), $getNodeByKey(selection.focus.key)].filter((node) => Boolean(node)));
+	return nodes.filter((node) => Boolean(node));
+}
+function isDescendantOf(node, ancestor) {
+	let current = node;
+	while (current) {
+		if (current.is(ancestor)) return true;
+		current = current.getParent();
+	}
+	return false;
+}
+function getHtmlTagName(value) {
+	return value.match(/^<\/?\s*([\da-z-]+)/i)?.[1]?.toLowerCase() || "";
+}
+function escapeHtml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+function extractSummaryTitle(value) {
+	return value.match(/<summary\b[^>]*>([\S\s]*?)<\/summary>/i)?.[1]?.trim() || "";
+}
+function getNodeText(children) {
+	return 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("");
+}
+function getCollapsedAncestor(node) {
+	const collapsible = getCollapsibleAncestor(node);
+	return collapsible?.isCollapsed() ? collapsible : null;
+}
+function getCollapsibleAncestor(node) {
+	let current = node;
+	while (current) {
+		if ($isCollapsibleNode(current)) return current;
+		current = current.getParent();
+	}
+	return null;
+}
+function getTopLevelNode(node) {
+	let current = node;
+	let parent = current.getParent();
+	while (parent && parent.getKey() !== "root") {
+		current = parent;
+		parent = current.getParent();
+	}
+	return current;
+}
+function getDirectChildOf(parent, node) {
+	let current = node;
+	let child = null;
+	while (current && current !== parent) {
+		child = current;
+		current = current.getParent();
+	}
+	return current === parent ? child : null;
+}
+function isInsideHiddenChild(collapsible, node) {
+	const directChild = getDirectChildOf(collapsible, node);
+	return Boolean(directChild && directChild !== collapsible.getFirstChild());
+}
+function getDirectChildIndexOf(parent, node) {
+	const directChild = getDirectChildOf(parent, node);
+	return directChild ? directChild.getIndexWithinParent() : -1;
+}
+function getDirectChildIndexFromSelection(collapsible, selection) {
+	const focusNode = selection.focus.getNode();
+	const directChildIndex = getDirectChildIndexOf(collapsible, focusNode);
+	if (directChildIndex >= 0) return directChildIndex;
+	if (focusNode === collapsible) return Math.min(selection.focus.offset, collapsible.getChildrenSize() - 1);
+	return -1;
+}
+function selectAfterCollapsedBlock(collapsible) {
+	const next = collapsible.getNextSibling();
+	if (next) {
+		next.selectStart();
+		return true;
+	}
+	const paragraph = $createParagraphNode();
+	collapsible.insertAfter(paragraph);
+	paragraph.selectStart();
+	return true;
+}
+function selectBeforeBlock(collapsible, temporaryParagraphKeys) {
+	const previous = collapsible.getPreviousSibling();
+	if (previous) {
+		if ($isDecoratorNode(previous) || previous.getType() === "code") {
+			const paragraph = $createParagraphNode();
+			previous.insertAfter(paragraph);
+			temporaryParagraphKeys?.add(paragraph.getKey());
+			paragraph.selectStart();
+			return true;
+		}
+		previous.selectEnd();
+		return true;
+	}
+	const paragraph = $createParagraphNode();
+	collapsible.insertBefore(paragraph);
+	paragraph.selectStart();
+	return true;
+}
+function selectCollapsedTitle(collapsible, end = true) {
+	const firstChild = collapsible.getFirstChild();
+	if (!firstChild) return false;
+	if (end) firstChild.selectEnd();
+	else firstChild.selectStart();
+	return true;
+}
+function selectFirstVisibleChild(collapsible) {
+	const firstChild = collapsible.getFirstChild();
+	if (!firstChild) return false;
+	firstChild.selectStart();
+	return true;
+}
+function selectLastVisibleChild(collapsible) {
+	if (collapsible.isCollapsed()) return selectCollapsedTitle(collapsible);
+	const lastChild = collapsible.getLastChild();
+	if (!lastChild) return false;
+	lastChild.selectEnd();
+	return true;
+}
+function selectExpandedAdjacentChildOrBlock(collapsible, childIndex, isDown, temporaryParagraphKeys) {
+	if (childIndex < 0) return false;
+	const nextIndex = childIndex + (isDown ? 1 : -1);
+	const nextChild = collapsible.getChildAtIndex(nextIndex);
+	if (nextChild) {
+		if (isDown) nextChild.selectStart();
+		else nextChild.selectEnd();
+		return true;
+	}
+	return isDown ? selectAfterCollapsedBlock(collapsible) : selectBeforeBlock(collapsible, temporaryParagraphKeys);
+}
+function moveCollapsibleSelection(direction, temporaryParagraphKeys) {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+	const focusNode = selection.focus.getNode();
+	const collapsible = getCollapsibleAncestor(focusNode);
+	if (collapsible) {
+		const childIndex = getDirectChildIndexFromSelection(collapsible, selection);
+		if (childIndex < 0) return false;
+		if (direction === "down") return collapsible.isCollapsed() ? selectAfterCollapsedBlock(collapsible) : selectExpandedAdjacentChildOrBlock(collapsible, childIndex, true, temporaryParagraphKeys);
+		if (collapsible.isCollapsed()) return childIndex > 0 ? selectCollapsedTitle(collapsible) : selectBeforeBlock(collapsible, temporaryParagraphKeys);
+		return selectExpandedAdjacentChildOrBlock(collapsible, childIndex, false, temporaryParagraphKeys);
+	}
+	const topLevelNode = getTopLevelNode(focusNode);
+	const adjacent = direction === "down" ? topLevelNode.getNextSibling() : topLevelNode.getPreviousSibling();
+	if (!$isCollapsibleNode(adjacent)) return false;
+	return direction === "down" ? selectFirstVisibleChild(adjacent) : selectLastVisibleChild(adjacent);
+}
+function moveCollapsibleSelectionFromDOM(editor, ownerDocument, direction, temporaryParagraphKeys) {
+	const selection = ownerDocument.getSelection();
+	const section = getSelectionCollapsibleSection(selection);
+	if (!section) return false;
+	const collapsible = $getCollapsibleNodeFromSection(section, editor);
+	if (!$isCollapsibleNode(collapsible)) return false;
+	const childIndex = getDOMSelectionChildIndex(section, selection);
+	if (childIndex < 0) return false;
+	if (direction === "down") return collapsible.isCollapsed() ? selectAfterCollapsedBlock(collapsible) : selectExpandedAdjacentChildOrBlock(collapsible, childIndex, true, temporaryParagraphKeys);
+	if (collapsible.isCollapsed()) return childIndex > 0 ? selectCollapsedTitle(collapsible) : selectBeforeBlock(collapsible, temporaryParagraphKeys);
+	return selectExpandedAdjacentChildOrBlock(collapsible, childIndex, false, temporaryParagraphKeys);
+}
+function getSelectionCollapsibleSection(selection) {
+	const anchorNode = selection?.anchorNode;
+	if (!anchorNode) return null;
+	return (anchorNode instanceof HTMLElement ? anchorNode : anchorNode.parentElement)?.closest(COLLAPSIBLE_SELECTOR) || null;
+}
+function getDOMSelectionChildIndex(section, selection) {
+	const content = section.querySelector(CONTENT_SELECTOR);
+	const anchorNode = selection?.anchorNode;
+	if (!content || !anchorNode) return -1;
+	const anchorElement = anchorNode instanceof HTMLElement ? anchorNode : anchorNode.parentElement;
+	if (!anchorElement || !content.contains(anchorElement)) return -1;
+	const directChild = anchorElement.closest(`${CONTENT_SELECTOR} > *`);
+	if (!directChild) return 0;
+	return Array.from(content.children).indexOf(directChild);
+}
+function $getCollapsibleNodeFromSection(section, editor) {
+	const blockId = section.dataset.blockId;
+	const nodeFromBlockId = blockId ? $getNodeByKey(blockId) : null;
+	if ($isCollapsibleNode(nodeFromBlockId)) return nodeFromBlockId;
+	const nodeFromDOM = $getNearestNodeFromDOMNode$1(section, editor);
+	return $isCollapsibleNode(nodeFromDOM) ? nodeFromDOM : null;
+}
+function registerCollapsibleDomBehavior(editor) {
+	const handleMouseDown = (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (target.closest(TOGGLE_SELECTOR)) return;
+		const section = target.closest(COLLAPSIBLE_SELECTOR);
+		if (!section) return;
+		const content = section.querySelector(CONTENT_SELECTOR);
+		if (!content) return;
+		const directChild = target.closest(`${CONTENT_SELECTOR} > *`);
+		let childIndex = 0;
+		if (directChild) {
+			if (hasNativeCaretTarget(event, directChild)) return;
+			childIndex = Array.from(content.children).indexOf(directChild);
+			if (childIndex < 0) return;
+		}
+		event.preventDefault();
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode$1(section, editor);
+			if (!$isCollapsibleNode(node)) return;
+			if (node.isCollapsed() && childIndex > 0) return;
+			node.getChildAtIndex(childIndex)?.selectStart();
+		});
+		editor.focus();
+	};
+	const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+		prevRootElement?.removeEventListener("mousedown", handleMouseDown);
+		rootElement?.addEventListener("mousedown", handleMouseDown);
+	});
+	return () => {
+		unregisterRootListener();
+	};
+}
+function registerTableInsertionBoundary(editor) {
+	return editor.registerCommand(INSERT_TABLE_COMMAND, () => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		const collapsible = getCollapsibleAncestor(selection.anchor.getNode());
+		if (!collapsible) return false;
+		const insertionPoint = $createParagraphNode();
+		collapsible.insertAfter(insertionPoint);
+		insertionPoint.selectStart();
+		return false;
+	}, COMMAND_PRIORITY_CRITICAL);
+}
+function registerEmptyCollapsibleBackspace(editor) {
+	const removeCollapsible = (collapsible, event) => {
+		if (collapsible.getTextContent().trim().length > 0) return false;
+		const paragraph = $createParagraphNode();
+		collapsible.replace(paragraph);
+		paragraph.selectStart();
+		event.preventDefault();
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		return true;
+	};
+	const unregisterCommand = editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+		const collapsible = getCollapsibleAncestor(selection.anchor.getNode());
+		return collapsible ? removeCollapsible(collapsible, event) : false;
+	}, COMMAND_PRIORITY_CRITICAL);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Backspace" || event.defaultPrevented) return;
+		const domSelection = (event.currentTarget?.ownerDocument)?.getSelection();
+		if (!domSelection?.isCollapsed) return;
+		const section = getSelectionCollapsibleSection(domSelection);
+		if (!section) return;
+		let handled = false;
+		editor.update(() => {
+			const collapsible = $getCollapsibleNodeFromSection(section, editor);
+			if (collapsible) handled = removeCollapsible(collapsible, event);
+		}, { discrete: true });
+		if (handled) event.preventDefault();
+	};
+	const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+		prevRootElement?.removeEventListener("keydown", handleKeyDown, true);
+		rootElement?.addEventListener("keydown", handleKeyDown, true);
+	});
+	return () => {
+		unregisterCommand();
+		unregisterRootListener();
+	};
+}
+function hasNativeCaretTarget(event, directChild) {
+	const node = getCaretRangeFromPoint(event.clientX, event.clientY)?.startContainer;
+	return Boolean(node && directChild.contains(node) && node.textContent);
+}
+function getCaretRangeFromPoint(x, y) {
+	if (document.caretRangeFromPoint) return document.caretRangeFromPoint(x, y);
+	const caretPosition = document.caretPositionFromPoint?.(x, y);
+	if (!caretPosition) return null;
+	const range = document.createRange();
+	range.setStart(caretPosition.offsetNode, caretPosition.offset);
+	range.collapse(true);
+	return range;
+}
+function cleanupTemporaryParagraphs(temporaryParagraphKeys) {
+	if (temporaryParagraphKeys.size === 0) return;
+	const selection = $getSelection();
+	const selectedKeys = /* @__PURE__ */ new Set();
+	if ($isRangeSelection(selection)) {
+		const anchorNode = selection.anchor.getNode();
+		const focusNode = selection.focus.getNode();
+		selectedKeys.add(anchorNode.getKey());
+		selectedKeys.add(focusNode.getKey());
+		const anchorParent = anchorNode.getParent();
+		const focusParent = focusNode.getParent();
+		if (anchorParent) selectedKeys.add(anchorParent.getKey());
+		if (focusParent) selectedKeys.add(focusParent.getKey());
+	}
+	for (const key of Array.from(temporaryParagraphKeys)) {
+		const node = $getNodeByKey(key);
+		if (!node || !$isElementNode(node)) {
+			temporaryParagraphKeys.delete(key);
+			continue;
+		}
+		if (node.getTextContent().trim().length > 0) {
+			temporaryParagraphKeys.delete(key);
+			continue;
+		}
+		if (selectedKeys.has(key)) continue;
+		node.remove();
+		temporaryParagraphKeys.delete(key);
+	}
+}
+function registerCollapsedSelectionGuard(editor) {
+	const temporaryParagraphKeys = /* @__PURE__ */ new Set();
+	let cleanupScheduled = false;
+	const scheduleTemporaryParagraphCleanup = () => {
+		if (cleanupScheduled) return;
+		cleanupScheduled = true;
+		queueMicrotask(() => {
+			cleanupScheduled = false;
+			editor.update(() => {
+				cleanupTemporaryParagraphs(temporaryParagraphKeys);
+			}, { discrete: true });
+		});
+	};
+	const unregisterSelection = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+			cleanupTemporaryParagraphs(temporaryParagraphKeys);
+			return false;
+		}
+		const focusNode = selection.focus.getNode();
+		const collapsible = getCollapsedAncestor(focusNode);
+		if (!collapsible || !isInsideHiddenChild(collapsible, focusNode)) {
+			cleanupTemporaryParagraphs(temporaryParagraphKeys);
+			return false;
+		}
+		selectCollapsedTitle(collapsible);
+		cleanupTemporaryParagraphs(temporaryParagraphKeys);
+		return true;
+	}, COMMAND_PRIORITY_EDITOR);
+	const unregisterArrowDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event) => {
+		if (event.shiftKey) return false;
+		if (moveCollapsibleSelection("down", temporaryParagraphKeys)) {
+			cleanupTemporaryParagraphs(temporaryParagraphKeys);
+			scheduleTemporaryParagraphCleanup();
+			event.preventDefault();
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_CRITICAL);
+	const unregisterArrowUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, (event) => {
+		if (event.shiftKey) return false;
+		if (moveCollapsibleSelection("up", temporaryParagraphKeys)) {
+			cleanupTemporaryParagraphs(temporaryParagraphKeys);
+			scheduleTemporaryParagraphCleanup();
+			event.preventDefault();
+			return true;
+		}
+		return false;
+	}, COMMAND_PRIORITY_CRITICAL);
+	const handleRootKeyDown = (event) => {
+		if (event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		if (!isEventForEditorRoot(editor, event)) return;
+		let moved = false;
+		const ownerDocument = getEventOwnerDocument(event);
+		editor.update(() => {
+			const direction = event.key === "ArrowDown" ? "down" : "up";
+			moved = moveCollapsibleSelection(direction, temporaryParagraphKeys) || moveCollapsibleSelectionFromDOM(editor, ownerDocument, direction, temporaryParagraphKeys);
+		}, { discrete: true });
+		if (!moved) return;
+		editor.update(() => {
+			cleanupTemporaryParagraphs(temporaryParagraphKeys);
+		}, { discrete: true });
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+		prevRootElement?.ownerDocument.removeEventListener("keydown", handleRootKeyDown, true);
+		rootElement?.ownerDocument.addEventListener("keydown", handleRootKeyDown, true);
+	});
+	return () => {
+		unregisterRootListener();
+		unregisterSelection();
+		unregisterArrowDown();
+		unregisterArrowUp();
+	};
+}
+function getEventOwnerDocument(event) {
+	const target = event.target;
+	return target instanceof Node ? target.ownerDocument || document : document;
+}
+function isEventForEditorRoot(editor, event) {
+	const rootElement = editor.getRootElement();
+	if (!rootElement) return false;
+	const target = event.target;
+	if (target instanceof Node && rootElement.contains(target)) return true;
+	const anchorNode = getEventOwnerDocument(event).getSelection()?.anchorNode;
+	if (anchorNode && rootElement.contains(anchorNode)) return true;
+	const activeElement = getEventOwnerDocument(event).activeElement;
+	return Boolean(activeElement && rootElement.contains(activeElement));
+}
+function ensureTitleChildren(children, title) {
+	const trimmedTitle = title.trim();
+	if (!trimmedTitle) return children;
+	if (getNodeText(children.slice(0, 1)).trim() === trimmedTitle) return children;
+	return [INodeHelper.createParagraph({ children: [INodeHelper.createTextNode(title)] }), ...children];
+}
+//#endregion
+export { CollapsiblePlugin };

package/es/plugins/collapsible/react/ReactCollapsiblePlugin.d.ts

@@ -0,0 +1,6 @@
+import { ReactCollapsiblePluginProps } from "./type.js";
+import { FC } from "react";
+//#region src/plugins/collapsible/react/ReactCollapsiblePlugin.d.ts
+declare const ReactCollapsiblePlugin: FC<ReactCollapsiblePluginProps>;
+//#endregion
+export { ReactCollapsiblePlugin as default };

package/es/plugins/collapsible/react/ReactCollapsiblePlugin.js

@@ -0,0 +1,19 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { CollapsiblePlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import { useLayoutEffect } from "react";
+import { cx } from "antd-style";
+//#region src/plugins/collapsible/react/ReactCollapsiblePlugin.tsx
+const ReactCollapsiblePlugin = ({ className }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(CollapsiblePlugin, { theme: { collapsible: cx(styles, className) } });
+	}, [className, editor]);
+	return null;
+};
+ReactCollapsiblePlugin.displayName = "ReactCollapsiblePlugin";
+//#endregion
+export { ReactCollapsiblePlugin as default };

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

@@ -0,0 +1,3 @@
+import { ReactCollapsiblePluginProps } from "./type.js";
+import ReactCollapsiblePlugin from "./ReactCollapsiblePlugin.js";
+export { ReactCollapsiblePlugin, type ReactCollapsiblePluginProps };

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

@@ -0,0 +1,67 @@
+import { css } from "antd-style";
+//#region src/plugins/collapsible/react/style.ts
+const styles = css`
+  position: relative;
+  margin: 12px 0;
+  padding: 14px 16px 14px 42px;
+  border: 1px solid rgba(51, 103, 153, 0.72);
+  border-radius: 8px;
+
+  &[data-collapsible-collapsed='true'] {
+    padding-block: 10px;
+  }
+
+  [data-collapsible-toggle='true'] {
+    cursor: pointer;
+    position: absolute;
+    inset-block-start: 20px;
+    inset-inline-start: 16px;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    border: 0;
+    color: currentColor;
+    background: transparent;
+  }
+
+  &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true'] {
+    inset-block-start: 15px;
+  }
+
+  [data-collapsible-toggle='true']::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    margin: 3px 0 0 2px;
+    border-style: solid;
+  }
+
+  &[data-collapsible-collapsed='false'] > [data-collapsible-toggle='true']::before {
+    border-width: 7px 5px 0 5px;
+    border-color: currentColor transparent transparent transparent;
+  }
+
+  &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true']::before {
+    border-width: 5px 0 5px 7px;
+    border-color: transparent transparent transparent currentColor;
+  }
+
+  [data-collapsible-content='true'] > *:first-child {
+    margin-block-start: 0;
+  }
+
+  [data-collapsible-content='true'] > *:last-child {
+    margin-block-end: 0;
+  }
+
+  &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:first-child {
+    margin-block-end: 0;
+  }
+
+  &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:not(:first-child) {
+    display: none !important;
+  }
+`;
+//#endregion
+export { styles };

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

@@ -0,0 +1,6 @@
+//#region src/plugins/collapsible/react/type.d.ts
+interface ReactCollapsiblePluginProps {
+  className?: string;
+}
+//#endregion
+export { ReactCollapsiblePluginProps };

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

@@ -12,7 +12,8 @@ import TextDataSource from "../data-source/text-data-source.js";
 import { registerBreakLineClick } from "../node/ElementDOMSlot.js";
 import { registerMDReader } from "./mdReader.js";
 import { handleFilePaste, handlePlainTextPaste, handleVSCodePaste, runPasteHandlers } from "./paste-handler.js";
-import { registerHeaderBackspace, registerLastElement, registerRichKeydown } from "./register.js";
+import { registerProgressiveSelectAll } from "./progressive-select-all.js";
+import { registerBlockBackspace, registerLastElement, registerRichKeydown } from "./register.js";
 import { registerHistory } from "@lexical/history";
 import { $createLineBreakNode, $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, PASTE_COMMAND, ParagraphNode, TEXT_TYPE_TO_FORMAT, TextNode } from "lexical";
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
@@ -231,7 +232,7 @@ const CommonPlugin = class extends KernelPlugin {
 			if (this.config?.pasteAsPlainText) return runPasteHandlers(ctx, [handleFilePaste, handlePlainTextPaste]);
 			return false;
 		}, COMMAND_PRIORITY_CRITICAL));
-		this.registerClears(registerRichText(editor), CAN_USE_DOM ? registerDragonSupport(editor) : noop, registerHistory(editor, this.kernel.getHistoryState(), 300), registerHeaderBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
+		this.registerClears(registerRichText(editor), registerProgressiveSelectAll(editor), CAN_USE_DOM ? registerDragonSupport(editor) : noop, registerHistory(editor, this.kernel.getHistoryState(), 300), registerBlockBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
 			const selection = $getSelection();
 			if (!$isRangeSelection(selection)) return false;
 			const { inCell, inTable } = $isCursorInTable(selection);