@lobehub/editor 4.24.0 → 4.25.0

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -2,13 +2,35 @@
 import { flattenSlashOptions, isSlashDividerOption, isSlashSectionOption } from "../../service/i-slash-service.js";
 import { shouldShowLoadingPlaceholder } from "./menuLoading.js";
 import { Icon, LOBE_THEME_APP_ID, menuSharedStyles } from "@lobehub/ui";
-import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { isValidElement, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createStaticStyles } from "antd-style";
 import { createPortal } from "react-dom";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
 //#region src/plugins/slash/react/components/DefaultSlashMenu.tsx
 const styles = createStaticStyles(({ css, cssVar }) => ({
+	compact: css`
+    grid-column: span 1;
+    justify-content: center;
+    min-width: 0;
+
+    > :not(:first-child) {
+      display: none;
+    }
+  `,
+	divider: css`
+    grid-column: 1 / -1;
+  `,
+	items: css`
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 4px 6px;
+  `,
+	menuItem: css`
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+  `,
 	popup: css`
     scrollbar-width: none;
 
@@ -39,6 +61,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     z-index: 1100;
   `,
 	section: css`
+    grid-column: 1 / -1;
     margin-block-start: 6px;
   `,
 	sectionFirst: css`
@@ -82,15 +105,23 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     font-weight: 500;
     color: ${cssVar.colorText};
     white-space: nowrap;
+  `,
+	tile: css`
+    grid-column: span 3;
+  `,
+	wide: css`
+    grid-column: 1 / -1;
   `
 }));
 const renderMenuItem = (item, activeKey, onSelect) => {
 	const isHighlighted = item.key === activeKey;
 	const isDisabled = Boolean(item.disabled);
-	const description = item.metadata?.description;
+	const description = item.description ?? item.metadata?.description;
+	const layoutClass = styles[item.layout ?? "wide"];
+	const shortcut = item.shortcut ?? item.extra;
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-disabled": isDisabled || void 0,
-		className: menuSharedStyles.item,
+		className: `${menuSharedStyles.item} ${styles.menuItem} ${layoutClass}`,
 		"data-disabled": isDisabled ? "" : void 0,
 		"data-highlighted": isHighlighted ? "" : void 0,
 		onClick: () => {
@@ -102,7 +133,7 @@ const renderMenuItem = (item, activeKey, onSelect) => {
 		children: [
 			item.icon ? /* @__PURE__ */ jsx("span", {
 				className: menuSharedStyles.icon,
-				children: /* @__PURE__ */ jsx(Icon, { icon: item.icon })
+				children: isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx(Icon, { icon: item.icon })
 			}) : null,
 			/* @__PURE__ */ jsxs("span", {
 				className: styles.text,
@@ -114,9 +145,9 @@ const renderMenuItem = (item, activeKey, onSelect) => {
 					children: description
 				}) : null]
 			}),
-			item.extra ? /* @__PURE__ */ jsx("span", {
+			shortcut ? /* @__PURE__ */ jsx("span", {
 				className: menuSharedStyles.extra,
-				children: item.extra
+				children: shortcut
 			}) : null
 		]
 	}, String(item.key));
@@ -126,24 +157,50 @@ const renderItems = (options, activeKey, loading, onSelect) => {
 		className: menuSharedStyles.empty,
 		children: "Loading..."
 	});
-	return options.map((opt, index) => {
-		if (isSlashDividerOption(opt)) return /* @__PURE__ */ jsx("div", { className: menuSharedStyles.separator }, `__divider_${index}`);
-		if (isSlashSectionOption(opt)) return /* @__PURE__ */ jsxs("div", {
-			className: `${styles.section} ${index === 0 ? styles.sectionFirst : ""}`,
-			children: [/* @__PURE__ */ jsx("div", {
-				className: styles.sectionLabel,
-				children: opt.label
-			}), opt.items.map((item) => renderMenuItem(item, activeKey, onSelect))]
-		}, String(opt.key ?? `__section_${index}`));
-		return renderMenuItem(opt, activeKey, onSelect);
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.items,
+		children: options.map((opt, index) => {
+			if (isSlashDividerOption(opt)) return /* @__PURE__ */ jsx("div", { className: `${menuSharedStyles.separator} ${styles.divider}` }, `__divider_${index}`);
+			if (isSlashSectionOption(opt)) return /* @__PURE__ */ jsxs("div", {
+				className: `${styles.section} ${index === 0 ? styles.sectionFirst : ""}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: styles.sectionLabel,
+					children: opt.label
+				}), /* @__PURE__ */ jsx("div", {
+					className: styles.items,
+					children: opt.items.map((item) => renderMenuItem(item, activeKey, onSelect))
+				})]
+			}, String(opt.key ?? `__section_${index}`));
+			return renderMenuItem(opt, activeKey, onSelect);
+		})
 	});
 };
+function useKeepActiveItemVisible(open, activeKey, options) {
+	const popupRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!open || !activeKey) return;
+		const popup = popupRef.current;
+		const selectedItem = popup?.querySelector("[data-highlighted]");
+		if (!popup || !selectedItem) return;
+		const padding = 8;
+		const popupRect = popup.getBoundingClientRect();
+		const selectedRect = selectedItem.getBoundingClientRect();
+		if (selectedRect.top < popupRect.top + padding) popup.scrollTop -= popupRect.top + padding - selectedRect.top;
+		else if (selectedRect.bottom > popupRect.bottom - padding) popup.scrollTop += selectedRect.bottom - (popupRect.bottom - padding);
+	}, [
+		activeKey,
+		open,
+		options
+	]);
+	return popupRef;
+}
 const resolvePortalContainer = () => {
 	if (typeof document === "undefined") return null;
 	return document.getElementById(LOBE_THEME_APP_ID) ?? document.body;
 };
 const FullWidthSlashMenu = ({ activeKey, anchor, loading, onSelect, open, options, placement }) => {
 	const resolvedPlacement = placement === "bottom" ? "bottom-start" : "top-start";
+	const popupRef = useKeepActiveItemVisible(open, activeKey, options);
 	const { refs, floatingStyles, isPositioned } = useFloating({
 		elements: { reference: anchor },
 		middleware: [
@@ -171,12 +228,14 @@ const FullWidthSlashMenu = ({ activeKey, anchor, loading, onSelect, open, option
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles.popup,
+			ref: popupRef,
 			children: renderItems(options, activeKey, loading, onSelect)
 		})
 	}), portalContainer);
 };
 const CaretSlashMenu = ({ activeKey, loading, onSelect, open, options, placement: forcePlacement, position }) => {
 	const resolvedPlacement = forcePlacement ? `${forcePlacement}-start` : "top-start";
+	const popupRef = useKeepActiveItemVisible(open, activeKey, options);
 	const middleware = useMemo(() => [
 		offset(8),
 		...!forcePlacement ? [flip()] : [],
@@ -226,6 +285,7 @@ const CaretSlashMenu = ({ activeKey, loading, onSelect, open, options, placement
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles.popup,
+			ref: popupRef,
 			children: renderItems(options, activeKey, loading, onSelect)
 		})
 	}), portalContainer);

package/es/plugins/slash/react/menu-utils.js

@@ -0,0 +1,84 @@
+import { flattenSlashOptions, isSlashMenuOption as isSlashMenuOption$1, isSlashSectionOption } from "../service/i-slash-service.js";
+//#region src/plugins/slash/react/menu-utils.ts
+function isSlashMenuOption(option) {
+	return isSlashMenuOption$1(option) && Boolean(option.key);
+}
+function getSelectableSlashOptions(options) {
+	return flattenSlashOptions(options).filter((item) => Boolean(item.key) && !item.disabled);
+}
+function getNextSlashActiveKey(options, activeKey, direction) {
+	const selectableOptions = getSelectableSlashOptions(options);
+	if (selectableOptions.length === 0) return null;
+	const currentIndex = activeKey === null ? -1 : selectableOptions.findIndex((option) => option.key === String(activeKey));
+	const nextIndex = direction === "forward" ? currentIndex === -1 ? 0 : (currentIndex + 1) % selectableOptions.length : currentIndex === -1 ? selectableOptions.length - 1 : (currentIndex - 1 + selectableOptions.length) % selectableOptions.length;
+	return String(selectableOptions[nextIndex].key);
+}
+function findSlashOptionByKey(options, key) {
+	if (key === null) return null;
+	for (const option of flattenSlashOptions(options)) if (option.key === String(key)) return option;
+	return null;
+}
+function getLayoutColumnCount(option) {
+	if (option.layout === "compact") return 6;
+	if (option.layout === "tile") return 2;
+	return 1;
+}
+function getOptionRows(options) {
+	const rows = [];
+	let pendingLayout = null;
+	let pendingColumns = 1;
+	let pendingRow = [];
+	const flushPendingRow = () => {
+		if (pendingRow.length === 0) return;
+		rows.push(pendingRow);
+		pendingRow = [];
+	};
+	const expandedOptions = options.flatMap((option) => {
+		if (!isSlashSectionOption(option)) return [option];
+		return [
+			{ type: "divider" },
+			...option.items,
+			{ type: "divider" }
+		];
+	});
+	for (const option of expandedOptions) {
+		if (!isSlashMenuOption(option) || option.disabled) {
+			flushPendingRow();
+			pendingLayout = null;
+			pendingColumns = 1;
+			continue;
+		}
+		const columns = getLayoutColumnCount(option);
+		const layout = option.layout ?? "wide";
+		if (columns === 1) {
+			flushPendingRow();
+			rows.push([option]);
+			pendingLayout = null;
+			pendingColumns = 1;
+			continue;
+		}
+		if (pendingLayout !== layout || pendingColumns !== columns || pendingRow.length >= columns) {
+			flushPendingRow();
+			pendingLayout = layout;
+			pendingColumns = columns;
+		}
+		pendingRow.push(option);
+	}
+	flushPendingRow();
+	return rows;
+}
+function getNextSlashSpatialActiveKey(options, activeKey, direction) {
+	if (direction === "left") return getNextSlashActiveKey(options, activeKey, "backward");
+	if (direction === "right") return getNextSlashActiveKey(options, activeKey, "forward");
+	const rows = getOptionRows(options);
+	if (rows.length === 0) return null;
+	if (activeKey === null) return String(rows[0][0].key);
+	const activeRowIndex = rows.findIndex((row) => row.some((option) => option.key === String(activeKey)));
+	if (activeRowIndex === -1) return String(rows[0][0].key);
+	const activeColumnIndex = rows[activeRowIndex].findIndex((option) => option.key === String(activeKey));
+	const nextRow = rows[direction === "down" ? (activeRowIndex + 1) % rows.length : (activeRowIndex - 1 + rows.length) % rows.length];
+	const nextColumnIndex = Math.min(activeColumnIndex, nextRow.length - 1);
+	return String(nextRow[nextColumnIndex].key);
+}
+//#endregion
+export { findSlashOptionByKey, getNextSlashActiveKey, getNextSlashSpatialActiveKey, getSelectableSlashOptions, isSlashMenuOption };

package/es/plugins/slash/service/i-slash-service.d.ts

@@ -9,8 +9,11 @@ type ISlashDividerOption = {
   type: 'divider';
 };
 interface ISlashMenuOption extends DropdownMenuItemType {
+  description?: ReactNode;
+  layout?: 'compact' | 'tile' | 'wide';
   metadata?: Record<string, any>;
   onSelect?: (editor: IEditor, matchingString: string) => void;
+  shortcut?: ReactNode;
 }
 interface ISlashSectionOption {
   items: ISlashMenuOption[];

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

@@ -8,6 +8,7 @@ import { createDefaultTableColWidths } from "../utils/index.js";
 import { AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_ROW_COMMAND, SYNC_TABLE_COLUMN_WIDTH_COMMAND, registerTableCommand } from "../command/index.js";
 import { TableNode as TableNode$1, patchTableNode } from "../node/index.js";
 import { ITableControllerMenuService, TableControllerMenuService } from "../service/i-table-controller-menu-service.js";
+import { registerSingleCellTablePaste } from "./single-cell-paste.js";
 import { $computeTableMapSkipCellCheck, $createTableSelection, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $isTableNode, TableCellNode, TableRowNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
 import { $setSelection } from "lexical";
 //#region src/plugins/table/plugin/index.ts
@@ -16,6 +17,7 @@ init_plugin();
 const tableCellProcessor = (before, content, after) => {
 	return before + content.replace(/\n+$/, "").replaceAll(/\n+/g, "<br />") + after;
 };
+const isRemovedTableRowDiff = (node) => node.getType() === "table-row-diff" && "getDiffType" in node && typeof node.getDiffType === "function" && node.getDiffType() === "remove";
 function isHeadlessEditor(editor) {
 	return editor._headless === true;
 }
@@ -64,6 +66,7 @@ const TablePlugin = class extends KernelPlugin {
 	}
 	onInit(editor) {
 		this.register(registerTableCellUnmergeTransform(editor));
+		this.register(registerSingleCellTablePaste(editor));
 		if (!isHeadlessEditor(editor)) {
 			setScrollableTablesActive(editor, true);
 			this.register(registerTablePlugin(editor));
@@ -310,7 +313,7 @@ const TablePlugin = class extends KernelPlugin {
 		markdownService.registerMarkdownWriter(TableRowNode.getType(), (ctx, node) => {
 			const parent = node.getParent();
 			if (!$isTableNode(parent)) return;
-			if (!node.getPreviousSibling()) ctx.wrap("", `\n${parent.getColWidths()?.map(() => {
+			if (!node.getPreviousSiblings().some((sibling) => !isRemovedTableRowDiff(sibling))) ctx.wrap("", `\n${parent.getColWidths()?.map(() => {
 				return "|:--";
 			}).join("")}|\n`);
 			else ctx.wrap("", "\n");

package/es/plugins/table/plugin/single-cell-paste.js

@@ -0,0 +1,79 @@
+import { COMMAND_PRIORITY_HIGH, CONTROLLED_TEXT_INSERTION_COMMAND, PASTE_COMMAND } from "lexical";
+//#region src/plugins/table/plugin/single-cell-paste.ts
+const LEXICAL_CLIPBOARD_TYPE = "application/x-lexical-editor";
+const countNodesByType = (node, type) => {
+	return (node.type === type ? 1 : 0) + (Array.isArray(node.children) ? node.children.reduce((count, child) => count + countNodesByType(child, type), 0) : 0);
+};
+const parseLexicalTableClipboard = (serializedClipboard) => {
+	if (!serializedClipboard) return void 0;
+	try {
+		const clipboard = JSON.parse(serializedClipboard);
+		if (!Array.isArray(clipboard.nodes) || clipboard.nodes.length !== 1) return { isSingleCell: false };
+		const [rootNode] = clipboard.nodes;
+		if (rootNode?.type !== "table") return { isSingleCell: false };
+		const cells = [];
+		const collectCells = (node) => {
+			if (node.type === "tablecell") cells.push(node);
+			node.children?.forEach(collectCells);
+		};
+		collectCells(rootNode);
+		const isSingleCell = countNodesByType(rootNode, "table") === 1 && cells.length === 1;
+		return {
+			cell: isSingleCell ? cells[0] : void 0,
+			isSingleCell
+		};
+	} catch {
+		return;
+	}
+};
+const getSerializedNodeText = (node) => {
+	if (node.type === "text") return node.text || "";
+	if (node.type === "linebreak") return "\n";
+	if (node.type === "tab") return "	";
+	return node.children?.map(getSerializedNodeText).join("") || "";
+};
+const getSerializedCellText = (cell) => {
+	return cell.children?.map(getSerializedNodeText).join("\n") || "";
+};
+const getSingleCellHTMLText = (html) => {
+	if (!isSingleCellHTMLTable(html) || typeof DOMParser === "undefined") return void 0;
+	const cell = new DOMParser().parseFromString(html, "text/html").body.querySelector("td, th");
+	if (!cell) return void 0;
+	cell.querySelectorAll("br").forEach((node) => node.replaceWith("\n"));
+	return Array.from(cell.children).map((node) => node.textContent || "").join("\n") || cell.textContent || "";
+};
+const isSingleCellHTMLTable = (html) => {
+	if (!html || typeof DOMParser === "undefined") return false;
+	const document = new DOMParser().parseFromString(html, "text/html");
+	const tables = document.body.querySelectorAll("table");
+	if (tables.length !== 1 || tables[0].querySelectorAll("td, th").length !== 1) return false;
+	const remainder = document.body.cloneNode(true);
+	remainder.querySelector("table")?.remove();
+	remainder.querySelectorAll("link, meta, script, style").forEach((node) => node.remove());
+	return !remainder.querySelector("audio, canvas, iframe, img, object, svg, video") && remainder.textContent?.trim() === "";
+};
+const isSingleCellTableClipboard = (clipboardData) => {
+	const lexicalResult = parseLexicalTableClipboard(clipboardData.getData(LEXICAL_CLIPBOARD_TYPE));
+	if (lexicalResult !== void 0) return lexicalResult.isSingleCell;
+	return isSingleCellHTMLTable(clipboardData.getData("text/html"));
+};
+const getSingleCellPlainText = (clipboardData) => {
+	const lexicalResult = parseLexicalTableClipboard(clipboardData.getData(LEXICAL_CLIPBOARD_TYPE));
+	if (lexicalResult?.cell) return getSerializedCellText(lexicalResult.cell);
+	const htmlText = getSingleCellHTMLText(clipboardData.getData("text/html"));
+	if (htmlText !== void 0) return htmlText;
+	return clipboardData.getData("text/plain").replace(/(?:\r\n|\n)$/, "");
+};
+const handleSingleCellTablePaste = (editor, event) => {
+	if (!("clipboardData" in event)) return false;
+	const clipboardData = event.clipboardData;
+	if (!clipboardData || !isSingleCellTableClipboard(clipboardData)) return false;
+	event.preventDefault();
+	editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, getSingleCellPlainText(clipboardData));
+	return true;
+};
+const registerSingleCellTablePaste = (editor) => {
+	return editor.registerCommand(PASTE_COMMAND, (event) => handleSingleCellTablePaste(editor, event), COMMAND_PRIORITY_HIGH);
+};
+//#endregion
+export { getSingleCellPlainText, handleSingleCellTablePaste, isSingleCellTableClipboard, registerSingleCellTablePaste };

package/es/plugins/table/react/TableController/hooks.js

@@ -1,18 +1,21 @@
 import { syncTableWidthDOM } from "../../utils/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { $isTableNode } from "@lexical/table";
+import { $getNodeByKey } from "lexical";
 //#region src/plugins/table/react/TableController/hooks.ts
 const CONTROL_SIZE = 14;
 const ROW_BORDER_HEIGHT = .5;
 const sum = (values) => {
 	return values.reduce((total, value) => total + value, 0);
 };
-const getTableElement = (element) => {
+const getTableElement$1 = (element) => {
 	if (element instanceof HTMLTableElement) return element;
 	return element?.querySelector("table.editor_table, table") || null;
 };
 const readNodeColWidths = (editor, node) => {
 	return editor.getEditorState().read(() => {
-		const latestNode = node.getLatest();
+		const latestNode = $getNodeByKey(node.getKey());
+		if (!$isTableNode(latestNode)) return [];
 		const columnCount = latestNode.getColumnCount();
 		const colWidths = latestNode.getColWidths();
 		return Array.from({ length: columnCount }, (_, index) => colWidths?.[index] || 92);
@@ -33,7 +36,7 @@ const useTableColumnMetrics = (editor, node) => {
 	const [tableHeight, setTableHeight] = useState(0);
 	const refreshColumnMetrics = useCallback(() => {
 		const nodeColWidths = readNodeColWidths(editor, node);
-		const tableElement = getTableElement(editor.getElementByKey(node.getKey()));
+		const tableElement = getTableElement$1(editor.getElementByKey(node.getKey()));
 		setColWidths((currentWidths) => {
 			if (currentWidths.length === nodeColWidths.length && currentWidths.every((width, index) => width === nodeColWidths[index])) return currentWidths;
 			return nodeColWidths;
@@ -44,7 +47,7 @@ const useTableColumnMetrics = (editor, node) => {
 		}
 	}, [editor, node]);
 	useEffect(() => {
-		const tableElement = getTableElement(editor.getElementByKey(node.getKey()));
+		const tableElement = getTableElement$1(editor.getElementByKey(node.getKey()));
 		let frame = null;
 		const scheduleMeasure = () => {
 			if (frame !== null) cancelAnimationFrame(frame);

package/es/plugins/table/react/hooks.js

@@ -1,6 +1,6 @@
 import { getTableSelectionIndexes, isTableFullySelected } from "../utils/index.js";
 import { useEffect, useState } from "react";
-import { $findTableNode, $isTableSelection } from "@lexical/table";
+import { $findTableNode, $isTableNode, $isTableSelection } from "@lexical/table";
 import "es-toolkit/compat";
 import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
 //#region src/plugins/table/react/hooks.ts
@@ -14,7 +14,7 @@ const readTableControllerSelection = (editor, tableKey) => {
 	return editor.getEditorState().read(() => {
 		const selection = $getSelection();
 		const tableNode = $getNodeByKey(tableKey);
-		if (!tableNode) return {
+		if (!$isTableNode(tableNode)) return {
 			isTableFocused: false,
 			isTableSelected: false,
 			selectedColumns: [],

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

@@ -13,6 +13,7 @@ import TableHoverActions from "./TableHoverActions/index.js";
 import TableResize_default from "./TableResize/index.js";
 import TableRowController from "./TableRowController.js";
 import { useAutoFitPastedTable } from "./useAutoFitPastedTable.js";
+import { useScrollFocusedTableCellIntoView } from "./useScrollFocusedTableCellIntoView.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
@@ -34,6 +35,7 @@ const ReactTablePlugin = ({ className, locale, resizeMode = "realtime" }) => {
 		return new EventEmitter();
 	}, []);
 	useAutoFitPastedTable(lexicalEditor);
+	useScrollFocusedTableCellIntoView(lexicalEditor);
 	const selectionOutlineStyle = useMemo(() => {
 		if (!selectionOutlineRect) return;
 		const style = {

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

@@ -49,9 +49,17 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       );
     }
 
-    .toolbar,
-    .toolbar-col,
-    .toolbar-row {
+    /*
+     * These hosts belong to the table controller only. Keep the selector scoped
+     * to the table root / scroll wrapper so a nested editor feature using the
+     * generic toolbar class (for example a LiteXML DiffNode inside a cell) is
+     * not made click-through or collapsed to zero height.
+     */
+    > .toolbar,
+    > .toolbar-col,
+    > .toolbar-row,
+    > .lobe-editor-table-scroll-wrapper > .toolbar-col,
+    > .lobe-editor-table-scroll-wrapper > .toolbar-row {
       pointer-events: none;
 
       position: absolute;
@@ -63,8 +71,10 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       height: 0;
     }
 
-    .toolbar-col,
-    .toolbar-row {
+    > .toolbar-col,
+    > .toolbar-row,
+    > .lobe-editor-table-scroll-wrapper > .toolbar-col,
+    > .lobe-editor-table-scroll-wrapper > .toolbar-row {
       inset-inline-start: var(--lobe-block-anchor-padding, 54px);
     }
 

package/es/plugins/table/react/useScrollFocusedTableCellIntoView.js

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { $getTableCellNodeFromLexicalNode, $isTableSelection } from "@lexical/table";
+import { $getSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/table/react/useScrollFocusedTableCellIntoView.ts
+const $getSelectedTableCellKey = () => {
+	const selection = $getSelection();
+	if (!$isRangeSelection(selection) && !$isTableSelection(selection)) return null;
+	return $getTableCellNodeFromLexicalNode(selection.anchor.getNode())?.getKey() ?? null;
+};
+/** UI-only behavior that keeps keyboard-focused table cells inside the visible scroll area. */
+const useScrollFocusedTableCellIntoView = (editor) => {
+	useEffect(() => {
+		if (!editor) return;
+		let frame = null;
+		let selectedCellKey = null;
+		const cancelScheduledScroll = () => {
+			if (frame === null) return;
+			cancelAnimationFrame(frame);
+			frame = null;
+		};
+		const handleEditorState = (editorState) => {
+			const nextCellKey = editorState.read($getSelectedTableCellKey);
+			if (nextCellKey === selectedCellKey) return;
+			selectedCellKey = nextCellKey;
+			cancelScheduledScroll();
+			if (!nextCellKey) return;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				editor.getElementByKey(nextCellKey)?.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+			});
+		};
+		handleEditorState(editor.getEditorState());
+		const unregister = editor.registerUpdateListener(({ editorState }) => {
+			handleEditorState(editorState);
+		});
+		return () => {
+			cancelScheduledScroll();
+			unregister();
+		};
+	}, [editor]);
+};
+//#endregion
+export { useScrollFocusedTableCellIntoView };

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

@@ -0,0 +1,10 @@
+import { TocHeadingTag, TocItem, TocJumpOptions, TocPluginOptions, TocScrollBehavior, TocScrollLogicalPosition } from "./types.js";
+import { ITocService, TocService } from "./service/i-toc-service.js";
+import "./service/index.js";
+import { TocPlugin } from "./plugin/index.js";
+import { ReactTocPluginProps, UseTocOptions, UseTocResult } from "./react/type.js";
+import ReactTocPlugin from "./react/ReactTocPlugin.js";
+import { useToc } from "./react/useToc.js";
+import "./react/index.js";
+import { buildTocTree, flattenTocTree } from "./utils/index.js";
+export { ITocService, ReactTocPlugin, type ReactTocPluginProps, TocHeadingTag, TocItem, TocJumpOptions, TocPlugin, TocPluginOptions, TocScrollBehavior, TocScrollLogicalPosition, TocService, type UseTocOptions, type UseTocResult, buildTocTree, flattenTocTree, useToc };

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

@@ -0,0 +1,8 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import "../../../types/index.js";
+import { TocPluginOptions } from "../types.js";
+import "../service/index.js";
+//#region src/plugins/toc/plugin/index.d.ts
+declare const TocPlugin: IEditorPluginConstructor<TocPluginOptions>;
+//#endregion
+export { TocPlugin };

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

@@ -0,0 +1,56 @@
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { ITocService, TocService } from "../service/i-toc-service.js";
+import { $getNodeByKey } from "lexical";
+import { $isHeadingNode } from "@lexical/rich-text";
+//#region src/plugins/toc/plugin/index.ts
+init_plugin();
+function $hasHeadingAncestor(node) {
+	let current = node;
+	while (current) {
+		if ($isHeadingNode(current)) return true;
+		current = current.getParent();
+	}
+	return false;
+}
+function hasHeadingUpdate(editorState, prevEditorState, dirtyElements, dirtyLeaves) {
+	const dirtyKeys = /* @__PURE__ */ new Set([...dirtyElements.keys(), ...dirtyLeaves]);
+	if (dirtyKeys.size === 0) return false;
+	if (dirtyElements.get("root") === true) return true;
+	let hasHeading = false;
+	const findHeading = () => {
+		for (const key of dirtyKeys) if ($hasHeadingAncestor($getNodeByKey(key))) {
+			hasHeading = true;
+			return;
+		}
+	};
+	editorState.read(findHeading);
+	if (hasHeading) return true;
+	prevEditorState.read(findHeading);
+	return hasHeading;
+}
+const TocPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "TocPlugin";
+	}
+	constructor(kernel, config = {}) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.service = new TocService();
+		this.service.setDepthRange(config);
+		kernel.registerServiceHotReload(ITocService, this.service);
+	}
+	onInit(editor) {
+		this.service.bindEditor(editor);
+		this.service.refresh();
+		const refreshOnDocumentChange = this.service.refresh.bind(this.service);
+		this.kernel.on("documentChange", refreshOnDocumentChange);
+		this.register(() => this.kernel.off("documentChange", refreshOnDocumentChange));
+		this.register(editor.registerUpdateListener(({ dirtyElements, dirtyLeaves, editorState, prevEditorState }) => {
+			if (!hasHeadingUpdate(editorState, prevEditorState, dirtyElements, dirtyLeaves)) return;
+			this.service.refresh();
+		}));
+	}
+};
+//#endregion
+export { TocPlugin };

package/es/plugins/toc/react/ReactTocPlugin.d.ts

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

package/es/plugins/toc/react/ReactTocPlugin.js

@@ -0,0 +1,36 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { TocPlugin } from "../plugin/index.js";
+import { useInsertionEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/toc/react/ReactTocPlugin.tsx
+const HeadlessTocPlugin = ({ editor, maxDepth = 6, minDepth = 1 }) => {
+	useInsertionEffect(() => {
+		editor.registerPlugin(TocPlugin, {
+			maxDepth,
+			minDepth
+		});
+	}, [
+		editor,
+		maxDepth,
+		minDepth
+	]);
+	return null;
+};
+const TocPluginWithContext = (props) => {
+	const [editor] = useLexicalComposerContext();
+	return /* @__PURE__ */ jsx(HeadlessTocPlugin, {
+		...props,
+		editor
+	});
+};
+const ReactTocPlugin = ({ editor, ...props }) => {
+	if (editor) return /* @__PURE__ */ jsx(HeadlessTocPlugin, {
+		...props,
+		editor
+	});
+	return /* @__PURE__ */ jsx(TocPluginWithContext, { ...props });
+};
+ReactTocPlugin.displayName = "ReactTocPlugin";
+//#endregion
+export { ReactTocPlugin as default };