@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,146 @@
+import { getKernelFromEditor, getKernelFromEditorConfig, reconcileDecorator } from "../../../editor-kernel/utils.js";
+import { TableNode, TableNode as TableNode$1 } from "@lexical/table";
+import { setDOMUnmanaged } from "lexical";
+//#region src/plugins/table/node/index.ts
+const OriginalCreateDOM = TableNode.prototype.createDOM;
+const OriginalUpdateDOM = TableNode.prototype.updateDOM;
+const SCROLL_INDICATOR_WIDTH = 24;
+function markTableControllerHost(element, withDecorator = false) {
+	setDOMUnmanaged(element);
+	if (withDecorator) element.dataset.lexicalDecorator = "true";
+}
+function updateTableScrollIndicators(scrollWrapper) {
+	const maxScrollLeft = scrollWrapper.scrollWidth - scrollWrapper.clientWidth;
+	const scrollLeft = scrollWrapper.scrollLeft;
+	const hasOverflow = maxScrollLeft > 1;
+	const showStart = hasOverflow && scrollLeft > 1;
+	const showEnd = hasOverflow && scrollLeft < maxScrollLeft - 1;
+	const startIndicator = scrollWrapper.querySelector(":scope > .lobe-editor-table-scroll-indicator-start");
+	const endIndicator = scrollWrapper.querySelector(":scope > .lobe-editor-table-scroll-indicator-end");
+	startIndicator?.classList.toggle("lobe-editor-table-scroll-indicator-visible", showStart);
+	endIndicator?.classList.toggle("lobe-editor-table-scroll-indicator-visible", showEnd);
+	if (startIndicator) startIndicator.style.transform = `translateX(${scrollLeft}px)`;
+	if (endIndicator) endIndicator.style.transform = `translateX(${Math.max(scrollLeft + scrollWrapper.clientWidth - SCROLL_INDICATOR_WIDTH, 0)}px)`;
+}
+function ensureTableScrollIndicators(scrollWrapper) {
+	const ensureIndicator = (className) => {
+		const existingIndicator = scrollWrapper.querySelector(`:scope > .${className}`);
+		if (existingIndicator instanceof HTMLElement) {
+			setDOMUnmanaged(existingIndicator);
+			return;
+		}
+		const indicator = document.createElement("span");
+		indicator.className = `lobe-editor-table-scroll-indicator ${className}`;
+		setDOMUnmanaged(indicator);
+		scrollWrapper.append(indicator);
+	};
+	ensureIndicator("lobe-editor-table-scroll-indicator-start");
+	ensureIndicator("lobe-editor-table-scroll-indicator-end");
+	if (scrollWrapper.dataset.scrollIndicatorsReady === "true") {
+		updateTableScrollIndicators(scrollWrapper);
+		return;
+	}
+	scrollWrapper.dataset.scrollIndicatorsReady = "true";
+	scrollWrapper.addEventListener("scroll", () => updateTableScrollIndicators(scrollWrapper), { passive: true });
+	const resizeObserver = new ResizeObserver(() => updateTableScrollIndicators(scrollWrapper));
+	resizeObserver.observe(scrollWrapper);
+	resizeObserver.observe(scrollWrapper.querySelector("table") ?? scrollWrapper);
+	requestAnimationFrame(() => updateTableScrollIndicators(scrollWrapper));
+}
+function ensureTableControllerDOM(element) {
+	const table = element instanceof HTMLTableElement ? element : element.querySelector("table");
+	if (!table) return;
+	let scrollWrapper = table.closest(".lobe-editor-table-scroll-wrapper");
+	if (!table.closest(".lobe-editor-table-scroll-wrapper")) {
+		scrollWrapper = document.createElement("div");
+		scrollWrapper.className = "lobe-editor-table-scroll-wrapper";
+		table.parentElement?.insertBefore(scrollWrapper, table);
+		scrollWrapper.append(table);
+	}
+	if (!scrollWrapper) return;
+	const legacyToolbar = element.querySelector(":scope > .toolbar");
+	if (legacyToolbar instanceof HTMLElement) {
+		legacyToolbar.className = "toolbar-col";
+		markTableControllerHost(legacyToolbar, true);
+		scrollWrapper.append(legacyToolbar);
+	}
+	const ensureToolbar = (parent, className, withDecorator = false) => {
+		const existingToolbar = parent.querySelector(`:scope > .${className}`);
+		if (existingToolbar instanceof HTMLElement) {
+			markTableControllerHost(existingToolbar, withDecorator);
+			return;
+		}
+		if (!existingToolbar) {
+			const toolbar = document.createElement("div");
+			toolbar.className = className;
+			markTableControllerHost(toolbar, withDecorator);
+			parent.append(toolbar);
+		}
+	};
+	const legacyDecoratedToolbar = scrollWrapper.querySelector(":scope > .toolbar[data-lexical-decorator]");
+	if (legacyDecoratedToolbar instanceof HTMLElement) {
+		legacyDecoratedToolbar.className = "toolbar-col";
+		markTableControllerHost(legacyDecoratedToolbar, true);
+	}
+	const legacyPlainToolbar = scrollWrapper.querySelector(":scope > .toolbar:not([data-lexical-decorator])");
+	if (legacyPlainToolbar instanceof HTMLElement) {
+		legacyPlainToolbar.className = "toolbar-row";
+		markTableControllerHost(legacyPlainToolbar, true);
+		element.append(legacyPlainToolbar);
+	}
+	ensureToolbar(scrollWrapper, "toolbar-col", true);
+	ensureToolbar(element, "toolbar-row", true);
+	ensureTableScrollIndicators(scrollWrapper);
+}
+function reconcileTableDecorator(editor, node, decorator) {
+	if (!decorator) return;
+	if (typeof decorator === "function") {
+		reconcileDecorator(editor, node.getKey(), decorator(node, editor));
+		return;
+	}
+	if ("multi" in decorator) {
+		const decorators = decorator.multi.map((item) => ({
+			queryDOM: item.queryDOM,
+			render: item.render(node, editor)
+		}));
+		reconcileDecorator(editor, node.getKey(), { multi: decorators });
+		return;
+	}
+	reconcileDecorator(editor, node.getKey(), {
+		queryDOM: decorator.queryDOM,
+		render: decorator.render(node, editor)
+	});
+}
+function patchTableNode() {
+	if (TableNode.prototype.createDOM !== OriginalCreateDOM) return;
+	Object.defineProperty(TableNode.prototype, "createDOM", {
+		configurable: true,
+		enumerable: false,
+		value: function(config, editor) {
+			const table = OriginalCreateDOM.call(this, config, editor);
+			ensureTableControllerDOM(table);
+			const decorator = getKernelFromEditor(editor)?.getDecorator(TableNode.getType()) || null;
+			reconcileTableDecorator(editor, this, decorator);
+			return table;
+		},
+		writable: true
+	});
+	Object.defineProperty(TableNode.prototype, "updateDOM", {
+		configurable: true,
+		enumerable: false,
+		value: function(_prevNode, _dom, _config) {
+			const table = OriginalUpdateDOM.call(this, _prevNode, _dom, _config);
+			ensureTableControllerDOM(_dom);
+			const kernel = getKernelFromEditorConfig(_config);
+			const editor = kernel?.getLexicalEditor();
+			if (editor) {
+				const decorator = kernel?.getDecorator(TableNode.getType()) || null;
+				reconcileTableDecorator(editor, this, decorator);
+			}
+			return table;
+		},
+		writable: true
+	});
+}
+//#endregion
+export { TableNode$1 as TableNode, patchTableNode };

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

@@ -0,0 +1,14 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { TableNode } from "../node/index.js";
+import { ReactNode } from "react";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/table/plugin/index.d.ts
+interface TablePluginOptions {
+  decoratorCol?: (node: TableNode, editor: LexicalEditor) => ReactNode;
+  decoratorRow?: (node: TableNode, editor: LexicalEditor) => ReactNode;
+  theme?: string;
+}
+declare const TablePlugin: IEditorPluginConstructor<TablePluginOptions>;
+//#endregion
+export { TablePlugin, TablePluginOptions };

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

@@ -0,0 +1,361 @@
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { ILitexmlService } from "../../litexml/service/litexml-service.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { cx } from "../../../utils/cx.js";
+import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+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 { $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
+init_helper();
+init_plugin();
+const tableCellProcessor = (before, content, after) => {
+	return before + content.replace(/\n+$/, "").replaceAll(/\n+/g, "<br />") + after;
+};
+function isHeadlessEditor(editor) {
+	return editor._headless === true;
+}
+const getSelectedRange = (selectedIndexes) => {
+	const sortedIndexes = [...selectedIndexes].sort((a, b) => a - b);
+	return {
+		end: sortedIndexes.at(-1) ?? 0,
+		start: sortedIndexes[0] ?? 0
+	};
+};
+const TablePlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "TablePlugin";
+	}
+	constructor(kernel, options) {
+		super();
+		this.kernel = kernel;
+		patchTableNode();
+		kernel.registerServiceHotReload(ITableControllerMenuService, new TableControllerMenuService());
+		kernel.registerNodes([
+			TableNode$1,
+			TableRowNode,
+			TableCellNode
+		]);
+		if (options?.decoratorCol || options?.decoratorRow) {
+			kernel.registerDecorator(TableNode$1.getType(), { multi: [...options.decoratorCol ? [{
+				queryDOM: (el) => el.querySelector(".toolbar-col"),
+				render: (node, editor) => {
+					return options.decoratorCol?.(node, editor) || null;
+				}
+			}] : [], ...options.decoratorRow ? [{
+				queryDOM: (el) => el.querySelector(".toolbar-row"),
+				render: (node, editor) => {
+					return options.decoratorRow?.(node, editor) || null;
+				}
+			}] : []] });
+			this.registeredDecorators.add(TableNode$1.getType());
+		}
+		kernel.registerThemes({
+			table: "editor_table",
+			tableCell: "editor_table_cell",
+			tableCellHeader: "editor_table_cell_header",
+			tableCellSelected: "editor_table_cell_selected",
+			tableScrollableWrapper: cx("editor_table_scrollable_wrapper", options?.theme)
+		});
+	}
+	onInit(editor) {
+		this.register(registerTableCellUnmergeTransform(editor));
+		if (!isHeadlessEditor(editor)) {
+			setScrollableTablesActive(editor, true);
+			this.register(registerTablePlugin(editor));
+			this.register(registerTableSelectionObserver(editor));
+			this.register(registerTableCommand(editor));
+		}
+		this.registerMarkdown();
+		this.registerLiteXml();
+		this.registerControllerMenu();
+		this.registerBlockSelect();
+	}
+	registerBlockSelect() {
+		const blockMenuService = this.kernel.requireService(IBlockMenuService);
+		if (!blockMenuService) return;
+		this.register(blockMenuService.registerSelectHandler({
+			key: "__table_block_select_handler",
+			onSelect: (node) => {
+				if (!$isTableNode(node)) return false;
+				const [tableMap] = $computeTableMapSkipCellCheck(node, null, null);
+				const firstCell = tableMap[0]?.[0]?.cell;
+				const lastRow = [...tableMap].reverse().find((row) => row.length > 0);
+				const lastCell = lastRow?.[lastRow.length - 1]?.cell;
+				if (!firstCell || !lastCell) return false;
+				const tableSelection = $createTableSelection();
+				tableSelection.set(node.getKey(), firstCell.getKey(), lastCell.getKey());
+				$setSelection(tableSelection);
+				return true;
+			},
+			order: 100
+		}));
+	}
+	registerControllerMenu() {
+		const tableControllerMenuService = this.kernel.requireService(ITableControllerMenuService);
+		if (!tableControllerMenuService) return;
+		[
+			tableControllerMenuService.registerItem({
+				key: "__table_column_insert_before",
+				label: "Insert before",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { start } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_COLUMN_COMMAND, {
+						columnIndex: start,
+						insertAfter: false,
+						table: node.getKey()
+					});
+				},
+				order: 10,
+				preview: "insert-before",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_insert_after",
+				label: "Insert after",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { end } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_COLUMN_COMMAND, {
+						columnIndex: end,
+						insertAfter: true,
+						table: node.getKey()
+					});
+				},
+				order: 20,
+				preview: "insert-after",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_separator_delete",
+				order: 40,
+				type: "separator",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_sync_width",
+				label: "Sync width to all columns",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const columnIndex = selectedIndexes[0];
+					if (columnIndex === void 0) return;
+					editor.dispatchCommand(SYNC_TABLE_COLUMN_WIDTH_COMMAND, {
+						columnIndex,
+						table: node.getKey()
+					});
+				},
+				order: 30,
+				when: ({ axis, selectedIndexes }) => axis === "column" && selectedIndexes.length > 0
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_auto_fit_width",
+				label: "Auto fit width",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					editor.dispatchCommand(AUTO_FIT_TABLE_COLUMN_WIDTH_COMMAND, {
+						columnIndexes: selectedIndexes,
+						table: node.getKey()
+					});
+				},
+				order: 35,
+				when: ({ axis, selectedIndexes }) => axis === "column" && selectedIndexes.length > 0
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_column_distribute_width",
+				label: "Distribute width",
+				onClick: ({ editor, node }) => {
+					editor.dispatchCommand(DISTRIBUTE_TABLE_COLUMN_WIDTH_COMMAND, { table: node.getKey() });
+				},
+				order: 36,
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				danger: true,
+				key: "__table_column_delete",
+				label: "Delete",
+				onClick: ({ editor }) => {
+					editor.update(() => {
+						$deleteTableColumnAtSelection();
+					});
+				},
+				order: 40,
+				preview: "delete",
+				when: ({ axis }) => axis === "column"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_insert_above",
+				label: "Insert above",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { start } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+						insertAfter: false,
+						rowIndex: start,
+						table: node.getKey()
+					});
+				},
+				order: 10,
+				preview: "insert-before",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_insert_below",
+				label: "Insert below",
+				onClick: ({ editor, node, selectedIndexes }) => {
+					const { end } = getSelectedRange(selectedIndexes);
+					editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+						insertAfter: true,
+						rowIndex: end,
+						table: node.getKey()
+					});
+				},
+				order: 20,
+				preview: "insert-after",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				key: "__table_row_separator_delete",
+				order: 30,
+				type: "separator",
+				when: ({ axis }) => axis === "row"
+			}),
+			tableControllerMenuService.registerItem({
+				danger: true,
+				key: "__table_row_delete",
+				label: "Delete",
+				onClick: ({ editor }) => {
+					editor.update(() => {
+						$deleteTableRowAtSelection();
+					});
+				},
+				order: 40,
+				preview: "delete",
+				when: ({ axis }) => axis === "row"
+			})
+		].forEach((unregister) => {
+			this.register(unregister);
+		});
+	}
+	registerLiteXml() {
+		const litexmlService = this.kernel.requireService(ILitexmlService);
+		if (!litexmlService) return;
+		litexmlService.registerXMLWriter(TableNode$1.getType(), (node, ctx) => {
+			if ($isTableNode(node)) {
+				const attributes = {};
+				const colWidths = node.getColWidths();
+				if (colWidths && colWidths.length > 0) attributes.colWidths = colWidths.join(",");
+				return ctx.createXmlNode("table", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLWriter(TableRowNode.getType(), (node, ctx) => {
+			if (node instanceof TableRowNode) return ctx.createXmlNode("tr", {});
+			return false;
+		});
+		litexmlService.registerXMLWriter(TableCellNode.getType(), (node, ctx) => {
+			if (node instanceof TableCellNode) {
+				const attributes = {};
+				if (node.getColSpan() > 1) attributes.colSpan = node.getColSpan().toString();
+				if (node.getRowSpan() > 1) attributes.rowSpan = node.getRowSpan().toString();
+				if (node.getBackgroundColor()) attributes.backgroundColor = node.getBackgroundColor();
+				return ctx.createXmlNode("td", attributes);
+			}
+			return false;
+		});
+		litexmlService.registerXMLReader("table", (xmlNode, children) => {
+			const colWidthsAttr = xmlNode.getAttribute("colWidths");
+			const colWidths = colWidthsAttr ? colWidthsAttr.split(",").map((width) => parseInt(width, 10)) : [];
+			let maxTdlen = 1;
+			for (const child of children) if ((child.children?.length || -1) > maxTdlen) maxTdlen = child.children.length;
+			return INodeHelper.createElementNode(TableNode$1.getType(), {
+				children,
+				colWidths: colWidths.length > 0 ? colWidths : createDefaultTableColWidths(maxTdlen),
+				direction: null,
+				format: "",
+				indent: 0,
+				version: 1
+			});
+		});
+		litexmlService.registerXMLReader("tr", (_xmlNode, children) => {
+			return INodeHelper.createElementNode(TableRowNode.getType(), {
+				children,
+				direction: "ltr",
+				format: "",
+				height: 33,
+				indent: 0,
+				version: 1
+			});
+		});
+		const tdReader = (xmlNode, children) => {
+			return INodeHelper.createElementNode(TableCellNode.getType(), {
+				backgroundColor: xmlNode.getAttribute("backgroundColor") || null,
+				children,
+				colSpan: xmlNode.getAttribute("colSpan") ? parseInt(xmlNode.getAttribute("colSpan"), 10) : 1,
+				direction: "ltr",
+				format: "",
+				headerState: 0,
+				indent: 0,
+				rowSpan: xmlNode.getAttribute("rowSpan") ? parseInt(xmlNode.getAttribute("rowSpan"), 10) : 1,
+				version: 1
+			});
+		};
+		litexmlService.registerXMLReader("th", tdReader);
+		litexmlService.registerXMLReader("td", tdReader);
+	}
+	registerMarkdown() {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		if (!markdownService) return;
+		markdownService.registerMarkdownWriter(TableNode$1.getType(), (ctx) => {
+			ctx.wrap("", "\n");
+		});
+		markdownService.registerMarkdownWriter(TableRowNode.getType(), (ctx, node) => {
+			const parent = node.getParent();
+			if (!$isTableNode(parent)) return;
+			if (!node.getPreviousSibling()) ctx.wrap("", `\n${parent.getColWidths()?.map(() => {
+				return "|:--";
+			}).join("")}|\n`);
+			else ctx.wrap("", "\n");
+		});
+		markdownService.registerMarkdownWriter(TableCellNode.getType(), (ctx, node) => {
+			ctx.addProcessor(tableCellProcessor);
+			if (!node.getNextSibling()) ctx.wrap("|", "|");
+			else ctx.wrap("|", "");
+		});
+		markdownService.registerMarkdownReader("table", (node, children) => {
+			const colLen = node.children[0]?.children.length || 1;
+			return INodeHelper.createElementNode("table", {
+				children,
+				colWidths: createDefaultTableColWidths(colLen),
+				direction: null,
+				format: "",
+				indent: 0,
+				version: 1
+			});
+		});
+		markdownService.registerMarkdownReader("tableRow", (_node, children) => {
+			return INodeHelper.createElementNode("tablerow", {
+				children,
+				direction: "ltr",
+				format: "",
+				height: 33,
+				indent: 0,
+				version: 1
+			});
+		});
+		markdownService.registerMarkdownReader("tableCell", (_node, children) => {
+			return INodeHelper.createElementNode("tablecell", {
+				backgroundColor: null,
+				children,
+				colSpan: 1,
+				direction: "ltr",
+				format: "",
+				headerState: 0,
+				indent: 0,
+				rowSpan: 1,
+				version: 1
+			});
+		});
+	}
+};
+//#endregion
+export { TablePlugin };