@lobehub/editor 4.24.1 → 4.25.0

package/es/plugins/link/service/i-link-service.js

@@ -3,18 +3,271 @@ import EventEmitter from "eventemitter3";
 //#region src/plugins/link/service/i-link-service.ts
 init_utils();
 const ILinkService = genServiceId("LinkService");
+const DEFAULT_LABELS = {
+	convertToBlockCard: "Convert to block card",
+	convertToCard: "Convert to card",
+	convertToIframe: "Convert to iframe",
+	convertToLink: "Convert to link",
+	convertToSchema: "Convert to schema"
+};
+var LinkProtocolPolicy = class {
+	constructor() {
+		this.allowedProtocols = /* @__PURE__ */ new Set([
+			"http:",
+			"https:",
+			"mailto:",
+			"sms:",
+			"tel:"
+		]);
+	}
+	getAllowedProtocols() {
+		return this.allowedProtocols;
+	}
+	setAllowedProtocols(protocols) {
+		this.allowedProtocols = new Set(protocols.map(normalizeProtocol));
+	}
+};
+var LinkRuleRegistry = class {
+	constructor() {
+		this.embedRules = [];
+		this.schemaRules = [];
+	}
+	getEmbedRule(url, context) {
+		return this.embedRules.find((rule) => rule.match(url, context)) || null;
+	}
+	getSchemaRule(url, context, parseSchemaUrl) {
+		const schema = context.schema === void 0 ? parseSchemaUrl(url) : context.schema;
+		return this.schemaRules.find((rule) => rule.match(url, {
+			...context,
+			schema
+		})) || null;
+	}
+	getSchemaRuleById(schemaType) {
+		return this.schemaRules.find((rule) => rule.id === schemaType) || null;
+	}
+	setEmbedRules(rules = []) {
+		this.embedRules = rules;
+	}
+	setSchemaRules(rules = []) {
+		this.schemaRules = rules;
+	}
+};
+var LegacySchemaLinkRegistry = class {
+	constructor() {
+		this.protocols = /* @__PURE__ */ new Set();
+	}
+	hasSchemaLinkRenderer(url) {
+		try {
+			const { protocol } = new URL(url);
+			return this.protocols.has(protocol);
+		} catch {
+			return false;
+		}
+	}
+	setSchemaLinkRenderers(renderers = []) {
+		this.protocols = new Set(renderers.map(({ protocol }) => normalizeProtocol(protocol)));
+	}
+};
+var LinkToolbarController = class {
+	constructor() {
+		this.baseEnabled = true;
+		this.labels = DEFAULT_LABELS;
+		this.toolbarActions = [];
+		this.toolbarSuppressions = /* @__PURE__ */ new Set();
+	}
+	get enabled() {
+		return this.baseEnabled && this.toolbarSuppressions.size === 0;
+	}
+	getLabels() {
+		return this.labels;
+	}
+	getToolbarActions(context) {
+		return this.toolbarActions.filter((action) => action.visible?.(context) ?? true);
+	}
+	setLabels(labels) {
+		this.labels = {
+			...DEFAULT_LABELS,
+			...labels
+		};
+	}
+	setToolbarActions(actions = []) {
+		this.toolbarActions = actions;
+	}
+	setEnabled(enable) {
+		const previousEnabled = this.enabled;
+		this.baseEnabled = enable;
+		return previousEnabled !== this.enabled;
+	}
+	suppress(reason = "unknown") {
+		const previousEnabled = this.enabled;
+		const token = Symbol(reason);
+		this.toolbarSuppressions.add(token);
+		return {
+			changed: previousEnabled !== this.enabled,
+			token
+		};
+	}
+	restore(token) {
+		const previousEnabled = this.enabled;
+		if (!this.toolbarSuppressions.delete(token)) return false;
+		return previousEnabled !== this.enabled;
+	}
+};
 var LinkService = class extends EventEmitter {
 	constructor(..._args) {
 		super(..._args);
-		this._enableLinkToolbar = true;
+		this.cardMetadataLoadingKeys = /* @__PURE__ */ new Set();
+		this.protocolPolicy = new LinkProtocolPolicy();
+		this.legacySchemaLinkRegistry = new LegacySchemaLinkRegistry();
+		this.ruleRegistry = new LinkRuleRegistry();
+		this.toolbarController = new LinkToolbarController();
+		this.toolbarItems = /* @__PURE__ */ new Map();
 	}
 	get enableLinkToolbar() {
-		return this._enableLinkToolbar;
+		return this.toolbarController.enabled;
+	}
+	getAllowedProtocols() {
+		return this.protocolPolicy.getAllowedProtocols();
+	}
+	getEmbedRule(url, context) {
+		return this.ruleRegistry.getEmbedRule(url, context);
+	}
+	getLabels() {
+		return this.toolbarController.getLabels();
+	}
+	hasSchemaLinkRenderer(url) {
+		return this.legacySchemaLinkRegistry.hasSchemaLinkRenderer(url);
+	}
+	isCardMetadataLoading(nodeKey) {
+		return this.cardMetadataLoadingKeys.has(nodeKey);
+	}
+	setCardMetadataLoading(nodeKey, loading) {
+		if (!(loading ? !this.cardMetadataLoadingKeys.has(nodeKey) : this.cardMetadataLoadingKeys.has(nodeKey))) return;
+		if (loading) this.cardMetadataLoadingKeys.add(nodeKey);
+		else this.cardMetadataLoadingKeys.delete(nodeKey);
+		this.emit("cardMetadataChange");
+	}
+	getSchemaRule(url, context) {
+		return this.ruleRegistry.getSchemaRule(url, context, (url) => this.parseSchemaUrl(url));
+	}
+	getToolbarActions(context) {
+		return this.toolbarController.getToolbarActions(context);
+	}
+	parseSchemaUrl(url) {
+		try {
+			const parsedUrl = new URL(url);
+			return {
+				hash: parsedUrl.hash,
+				host: parsedUrl.host,
+				params: Object.fromEntries(parsedUrl.searchParams.entries()),
+				pathname: parsedUrl.pathname,
+				protocol: parsedUrl.protocol,
+				raw: url,
+				search: parsedUrl.search
+			};
+		} catch {
+			return null;
+		}
+	}
+	updateConfig(config) {
+		this.setAllowedProtocols([
+			"http:",
+			"https:",
+			"mailto:",
+			"sms:",
+			"tel:",
+			...config?.schemaLinkRenderers?.map(({ protocol }) => protocol) || [],
+			...config?.allowedProtocols || []
+		]);
+		this.setEmbedRules(config?.linkEmbedRules);
+		this.setLabels(config?.labels);
+		this.setSchemaLinkRenderers(config?.schemaLinkRenderers);
+		this.setSchemaRules([...config?.schemaRules || [], ...createLegacySchemaRules(config?.schemaLinkRenderers)]);
+		this.setToolbarActions(config?.toolbarActions);
+	}
+	setAllowedProtocols(protocols) {
+		this.protocolPolicy.setAllowedProtocols(protocols);
+	}
+	setEmbedRules(rules = []) {
+		this.ruleRegistry.setEmbedRules(rules);
+	}
+	setLabels(labels) {
+		this.toolbarController.setLabels(labels);
+	}
+	setSchemaLinkRenderers(renderers = []) {
+		this.legacySchemaLinkRegistry.setSchemaLinkRenderers(renderers);
+	}
+	setSchemaRules(rules = []) {
+		this.ruleRegistry.setSchemaRules(rules);
+	}
+	setToolbarActions(actions = []) {
+		this.toolbarController.setToolbarActions(actions);
+		this.emit("change");
+	}
+	getToolbarItems(context) {
+		return Array.from(this.toolbarItems.values()).filter((item) => item.when ? item.when(context) : true).sort((a, b) => (a.order || 0) - (b.order || 0));
+	}
+	registerToolbarItem(item) {
+		this.toolbarItems.set(item.key, item);
+		this.emit("change");
+		return () => {
+			this.toolbarItems.delete(item.key);
+			this.emit("change");
+		};
 	}
 	setLinkToolbar(enable) {
-		this._enableLinkToolbar = enable;
-		this.emit("linkToolbarChange", enable);
+		if (this.toolbarController.setEnabled(enable)) this.emit("linkToolbarChange", enable);
+	}
+	suppressLinkToolbar(reason = "unknown") {
+		const { changed, token } = this.toolbarController.suppress(reason);
+		if (changed) this.emit("linkToolbarChange", this.toolbarController.enabled);
+		return token;
+	}
+	restoreLinkToolbar(token) {
+		if (this.toolbarController.restore(token)) this.emit("linkToolbarChange", this.toolbarController.enabled);
+	}
+	subscribe(listener) {
+		this.on("change", listener);
+		return () => {
+			this.off("change", listener);
+		};
+	}
+	subscribeCardMetadata(listener) {
+		this.on("cardMetadataChange", listener);
+		return () => {
+			this.off("cardMetadataChange", listener);
+		};
 	}
 };
+function normalizeProtocol(protocol) {
+	return `${protocol.split(":")[0]}:`;
+}
+function createLegacySchemaRules(renderers = []) {
+	return renderers.map(({ protocol }) => {
+		const normalizedProtocol = normalizeProtocol(protocol);
+		return {
+			id: normalizedProtocol.replace(":", ""),
+			match: (url) => {
+				try {
+					return new URL(url).protocol === normalizedProtocol;
+				} catch {
+					return false;
+				}
+			}
+		};
+	});
+}
+function getNodeUrl(node) {
+	const maybeUrlNode = node;
+	if (typeof maybeUrlNode.getURL === "function") return maybeUrlNode.getURL();
+	return "";
+}
+function getNodeTitle(node) {
+	const maybeTitleNode = node;
+	if (typeof maybeTitleNode.getTitle === "function") return maybeTitleNode.getTitle() || getNodeUrl(node);
+	const maybeTextNode = node;
+	if (typeof maybeTextNode.getTextContent === "function") return maybeTextNode.getTextContent() || getNodeUrl(node);
+	return getNodeUrl(node);
+}
 //#endregion
-export { ILinkService, LinkService };
+export { ILinkService, LinkService, createLegacySchemaRules, getNodeTitle, getNodeUrl, normalizeProtocol };

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

@@ -119,7 +119,11 @@ const ListPlugin = class extends KernelPlugin {
 			type: "element"
 		});
 		markdownService.registerMarkdownWriter(ListNode.getType(), (ctx, node) => {
-			if ($isListNode(node)) ctx.wrap("", "\n");
+			if ($isListNode(node)) {
+				const parent = node.getParent();
+				const needsLeadingNewline = $isListItemNode(parent) && node.getPreviousSibling() !== null;
+				ctx.wrap(needsLeadingNewline ? "\n" : "", "\n");
+			}
 		});
 		const getLevel = (node) => {
 			if (!node) return 0;
@@ -150,7 +154,10 @@ const ListPlugin = class extends KernelPlugin {
 			let start = node.start || 1;
 			return INodeHelper.createElementNode("list", {
 				children: children.map((v) => {
-					if (v.type === "listitem") v.value = start++;
+					if (v.type === "listitem") {
+						v.value = start;
+						if (v.children?.[0]?.type !== "list") start++;
+					}
 					return v;
 				}),
 				direction: "ltr",

package/es/plugins/litexml/command/diffCommand.js

@@ -1,13 +1,76 @@
+import { $isDiffContentNode } from "../node/DiffContentNode.js";
 import { DiffNode } from "../node/DiffNode.js";
+import { $isTableCellDiffNode } from "../node/TableCellDiffNode.js";
+import { $createPlainTableCellFromDiff, $getTableCellColumnIndex, $getTableCellDiffGroup, $getTableForCell, $removeTableWidthsForCompleteCellGroup, $shrinkTableWidthsAfterCellRemoval } from "../table-cell-diff.js";
+import { $isTableRowDiffNode } from "../node/TableRowDiffNode.js";
+import { $createPlainTableRowFromDiff, $getTableRowDiffPair } from "../table-row-diff.js";
 import { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND } from "./symbols.js";
 import { $getNodeByKey, $isElementNode, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/litexml/command/diffCommand.ts
-function doAction(node, action) {
+function doTableRowAction(editor, node, action) {
+	const pair = $getTableRowDiffPair(node);
+	if (pair) {
+		const survivingRow = action === 1 ? pair.add : pair.remove;
+		const discardedRow = action === 1 ? pair.remove : pair.add;
+		const plainRow = $createPlainTableRowFromDiff(editor, survivingRow);
+		discardedRow.remove();
+		survivingRow.replace(plainRow, false);
+		plainRow.selectStart();
+		return;
+	}
+	if (node.getDiffType() === "remove") {
+		if (action === 1) node.remove();
+		else {
+			const plainRow = $createPlainTableRowFromDiff(editor, node);
+			node.replace(plainRow, false);
+			plainRow.selectStart();
+		}
+		return;
+	}
+	if (action === 1) {
+		const plainRow = $createPlainTableRowFromDiff(editor, node);
+		node.replace(plainRow, false);
+		plainRow.selectStart();
+	} else node.remove();
+}
+function doTableCellAction(editor, node, action) {
+	const group = $getTableCellDiffGroup(node);
+	const table = $getTableForCell(node);
+	const columnIndex = $getTableCellColumnIndex(node);
+	const span = node.getColSpan();
+	if (node.getDiffType() === "add" && action === 1 || node.getDiffType() === "remove" && action === 0) {
+		group.forEach((cell) => cell.replace($createPlainTableCellFromDiff(editor, cell), false));
+		return;
+	}
+	if (table && columnIndex >= 0) {
+		const widthCount = table.getColWidths()?.length;
+		$removeTableWidthsForCompleteCellGroup(table, group, columnIndex, span);
+		group.forEach((cell) => cell.remove());
+		if (table.getColWidths()?.length === widthCount) $shrinkTableWidthsAfterCellRemoval(table, columnIndex, span);
+		return;
+	}
+	group.forEach((cell) => cell.remove());
+}
+function doAction(editor, node, action) {
+	if ($isTableRowDiffNode(node)) {
+		doTableRowAction(editor, node, action);
+		return;
+	}
+	const parent = node.getParent();
+	if ($isTableCellDiffNode(parent)) {
+		doTableCellAction(editor, parent, action);
+		return;
+	}
 	if (node.diffType === "modify") {
 		const children = node.getChildren();
-		if (action === 1) node.replace(children[1], false).selectEnd();
-		else if (action === 0) node.replace(children[0], false).selectEnd();
+		const selectedChild = action === 1 ? children[1] : children[0];
+		if ($isDiffContentNode(selectedChild)) {
+			const parent = node.getParentOrThrow();
+			selectedChild.getChildren().forEach((child) => node.insertBefore(child));
+			node.remove();
+			if ($isElementNode(parent)) parent.selectEnd();
+		} else if (selectedChild) node.replace(selectedChild, false).selectEnd();
 	}
 	if (node.diffType === "remove") {
 		if (action === 1) node.remove();
@@ -19,7 +82,10 @@ function doAction(node, action) {
 	if (node.diffType === "add") {
 		if (action === 1) {
 			const children = node.getChildren();
-			node.replace(children[0], false).selectEnd();
+			const parent = node.getParentOrThrow();
+			children.forEach((child) => node.insertBefore(child));
+			node.remove();
+			if ($isElementNode(parent)) parent.selectEnd();
 		} else if (action === 0) node.remove();
 	}
 	if (node.diffType === "listItemModify") {
@@ -65,23 +131,37 @@ function doAction(node, action) {
 function registerLiteXMLDiffCommand(editor) {
 	return mergeRegister(editor.registerCommand(LITEXML_DIFFNODE_COMMAND, (payload) => {
 		const { action, nodeKey } = payload;
-		const node = editor.getEditorState().read(() => {
-			return $getNodeByKey(nodeKey);
-		});
-		if (!node) return false;
 		editor.update(() => {
-			doAction(node, action);
+			const node = $getNodeByKey(nodeKey);
+			if (!(node instanceof DiffNode) && !$isTableRowDiffNode(node)) return;
+			doAction(editor, node, action);
 		});
 		return false;
 	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(LITEXML_DIFFNODE_ALL_COMMAND, (payload) => {
 		const { action } = payload;
-		const nodes = editor.getEditorState().read(() => {
-			return Array.from(editor._editorState._nodeMap.values()).filter((n) => n instanceof DiffNode && !!n.getParent());
+		const nodeKeys = editor.getEditorState().read(() => {
+			return Array.from(editor._editorState._nodeMap.values()).filter((node) => (node instanceof DiffNode || $isTableRowDiffNode(node)) && !!node.getParent()).map((node) => node.getKey());
 		});
-		if (!nodes.length) return false;
+		if (!nodeKeys.length) return false;
 		editor.update(() => {
-			nodes.forEach((node) => {
-				doAction(node, action);
+			const handled = /* @__PURE__ */ new Set();
+			nodeKeys.forEach((nodeKey) => {
+				if (handled.has(nodeKey)) return;
+				const node = $getNodeByKey(nodeKey);
+				if (!(node instanceof DiffNode) && !$isTableRowDiffNode(node)) return;
+				const pair = $isTableRowDiffNode(node) ? $getTableRowDiffPair(node) : null;
+				if (pair) {
+					handled.add(pair.remove.getKey());
+					handled.add(pair.add.getKey());
+				} else {
+					const parent = node instanceof DiffNode ? node.getParent() : null;
+					if ($isTableCellDiffNode(parent)) $getTableCellDiffGroup(parent).forEach((cell) => {
+						const diff = cell.getFirstChild();
+						if (diff instanceof DiffNode) handled.add(diff.getKey());
+					});
+					handled.add(nodeKey);
+				}
+				doAction(editor, node, action);
 			});
 		});
 		return false;

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

@@ -1,8 +1,14 @@
 import { createDebugLogger, init_debug } from "../../../utils/debug.js";
-import { $closest, init_utils } from "../../../editor-kernel/utils.js";
-import { $createDiffNode, DiffNode } from "../node/DiffNode.js";
+import { $closest, getKernelFromEditor, init_utils } from "../../../editor-kernel/utils.js";
+import { findNewIllegalDiffPaths, projectLiteXmlOperation } from "../diff-validation.js";
+import { $createDiffContentNode, $isDiffContentNode } from "../node/DiffContentNode.js";
+import { $createDiffNode, $isDiffNode, DiffNode } from "../node/DiffNode.js";
+import { $isTableCellDiffNode } from "../node/TableCellDiffNode.js";
 import { $cloneNode, $parseSerializedNodeImpl, charToId } from "../utils/index.js";
+import { $createTableCellDiffFromCell, $getLogicalRowWidth, $getTableCellColumnIndex, $getTableForCell, $shrinkTableWidthsAfterCellRemoval, $updateTableWidthsForCellInsertion } from "../table-cell-diff.js";
+import { $areTableRowStructuresCompatible, $createTableRowDiffFromRow } from "../table-row-diff.js";
 import { LITEXML_APPLY_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND } from "./symbols.js";
+import { $isTableCellNode, $isTableNode, $isTableRowNode } from "@lexical/table";
 import { $createParagraphNode, $getNodeByKey, $getRoot, $insertNodes, $isElementNode, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 import { $isListItemNode } from "@lexical/list";
@@ -13,6 +19,34 @@ const logger = createDebugLogger("plugin", "litexml");
 function toArrayXml(litexml) {
 	return Array.isArray(litexml) ? litexml : [litexml];
 }
+function hasNewIllegalDiffs(previous, projected) {
+	return findNewIllegalDiffPaths(previous, projected);
+}
+function projectOperation(dataSource, document, operation) {
+	try {
+		const projected = projectLiteXmlOperation(document, operation, (xml) => dataSource.readLiteXMLToInode(xml));
+		const newIllegalDiffs = hasNewIllegalDiffs(document, projected);
+		if (newIllegalDiffs.length > 0) {
+			logger.warn("⚠️ Skipping operation with illegal nested diff", newIllegalDiffs);
+			return null;
+		}
+		return projected;
+	} catch (error) {
+		logger.error("❌ Failed to preflight LiteXML operation:", error);
+		return null;
+	}
+}
+function toProjectionOperation(operation) {
+	if (operation.action === "remove") return {
+		...operation,
+		id: charToId(operation.id)
+	};
+	if (operation.action === "insert") return {
+		...operation,
+		..."beforeId" in operation ? { beforeId: operation.beforeId === "root" ? "root" : charToId(operation.beforeId) } : { afterId: operation.afterId === "root" ? "root" : charToId(operation.afterId) }
+	};
+	return operation;
+}
 function tryParseChild(child, editor) {
 	try {
 		const oldNode = $getNodeByKey(child.id);
@@ -29,6 +63,47 @@ function tryParseChild(child, editor) {
 	}
 }
 function handleReplaceForApplyDelay(oldNode, newNode, modifyBlockNodes, diffNodeMap, editor) {
+	if ($isTableRowNode(oldNode) || $isTableRowNode(newNode)) {
+		if (!$isTableRowNode(oldNode) || !$isTableRowNode(newNode) || !$isTableNode(oldNode.getParent()) || !$areTableRowStructuresCompatible(oldNode, newNode)) {
+			logger.error(`❌ Invalid table row modification for row ${oldNode.getKey()}.`);
+			return;
+		}
+		const changeId = `${oldNode.getKey()}:${newNode.getKey()}`;
+		const removeRow = $createTableRowDiffFromRow(editor, oldNode, "remove", changeId);
+		const addRow = $createTableRowDiffFromRow(editor, newNode, "add", changeId);
+		oldNode.replace(removeRow, false);
+		removeRow.insertAfter(addRow);
+		return;
+	}
+	if ($isTableCellNode(oldNode) && $isTableCellNode(newNode)) {
+		const existingDiff = oldNode.getChildren().find($isDiffNode);
+		if (existingDiff) {
+			if ($isTableCellDiffNode(oldNode)) {
+				existingDiff.clear();
+				newNode.getChildren().forEach((child) => {
+					existingDiff.append($cloneNode(child, editor));
+				});
+				return;
+			}
+			const after = existingDiff.getChildren().find((child) => $isDiffContentNode(child) && child.side === "after");
+			if (existingDiff.diffType === "modify" && after && $isDiffContentNode(after)) {
+				after.clear();
+				newNode.getChildren().forEach((child) => {
+					after.append($cloneNode(child, editor));
+				});
+				return;
+			}
+		}
+		const before = $createDiffContentNode("before");
+		const after = $createDiffContentNode("after");
+		oldNode.getChildren().forEach((child) => before.append($cloneNode(child, editor)));
+		newNode.getChildren().forEach((child) => after.append($cloneNode(child, editor)));
+		const diffNode = $createDiffNode("modify");
+		diffNode.append(before, after);
+		oldNode.clear();
+		oldNode.append(diffNode);
+		return;
+	}
 	const oldBlock = $closest(oldNode, (node) => node.isInline() === false);
 	if (!oldBlock) throw new Error("Old block node not found for diffing.");
 	if ($closest(oldNode, (node) => node.getType() === DiffNode.getType())) {
@@ -112,8 +187,15 @@ function registerLiteXMLCommand(editor, dataSource) {
 			else acc.push(cur);
 			return acc;
 		}, []);
+		let projectedDocument = getKernelFromEditor(editor).getDocument("json");
+		const safePayload = resultPayload.filter((item) => {
+			const nextProjection = projectOperation(dataSource, projectedDocument, toProjectionOperation(item));
+			if (!nextProjection) return false;
+			projectedDocument = nextProjection;
+			return true;
+		});
 		try {
-			resultPayload.forEach((item) => {
+			safePayload.forEach((item) => {
 				const { action } = item;
 				switch (action) {
 					case "modify": {
@@ -142,14 +224,39 @@ function registerLiteXMLCommand(editor, dataSource) {
 		}
 	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(LITEXML_APPLY_COMMAND, (payload) => {
 		const { litexml, delay } = payload;
-		handleModify(editor, dataSource, toArrayXml(litexml), delay);
+		const arrayXml = toArrayXml(litexml);
+		if (!delay) {
+			handleModify(editor, dataSource, arrayXml, delay);
+			return false;
+		}
+		const operation = {
+			action: "modify",
+			litexml
+		};
+		if (projectOperation(dataSource, getKernelFromEditor(editor).getDocument("json"), toProjectionOperation(operation))) handleModify(editor, dataSource, arrayXml, delay);
 		return false;
 	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(LITEXML_REMOVE_COMMAND, (payload) => {
 		const { id, delay } = payload;
-		handleRemove(editor, charToId(id), delay);
+		const key = charToId(id);
+		if (!delay) {
+			handleRemove(editor, key, delay);
+			return false;
+		}
+		const operation = {
+			action: "remove",
+			id
+		};
+		if (projectOperation(dataSource, getKernelFromEditor(editor).getDocument("json"), toProjectionOperation(operation))) handleRemove(editor, key, delay);
 		return false;
 	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(LITEXML_INSERT_COMMAND, (payload) => {
-		handleInsert(editor, payload, dataSource);
+		if (!payload.delay) {
+			handleInsert(editor, payload, dataSource);
+			return false;
+		}
+		if (projectOperation(dataSource, getKernelFromEditor(editor).getDocument("json"), toProjectionOperation({
+			action: "insert",
+			...payload
+		}))) handleInsert(editor, payload, dataSource);
 		return false;
 	}, COMMAND_PRIORITY_EDITOR));
 }
@@ -202,9 +309,32 @@ function handleRemove(editor, key, delay) {
 		const node = $getNodeByKey(key);
 		if (!node) return;
 		if (!delay) {
+			if ($isTableCellNode(node)) {
+				const table = $getTableForCell(node);
+				const columnIndex = $getTableCellColumnIndex(node);
+				const span = node.getColSpan();
+				node.remove();
+				if (table && columnIndex >= 0) $shrinkTableWidthsAfterCellRemoval(table, columnIndex, span);
+				return;
+			}
 			node.remove();
 			return;
 		}
+		if ($isTableCellNode(node)) {
+			const table = $getTableForCell(node);
+			const columnIndex = $getTableCellColumnIndex(node);
+			if (!table || columnIndex < 0) {
+				logger.error(`❌ Table cell ${node.getKey()} is not attached to a valid table row.`);
+				return;
+			}
+			const changeId = `${table.getKey()}:column:${columnIndex}`;
+			node.replace($createTableCellDiffFromCell(editor, node, "remove", changeId), false);
+			return;
+		}
+		if ($isTableRowNode(node) && $isTableNode(node.getParent())) {
+			node.replace($createTableRowDiffFromRow(editor, node, "remove"), false);
+			return;
+		}
 		if (node.isInline() === false) {
 			const originDiffNode = $closest(node, (node) => node.getType() === DiffNode.getType());
 			if (originDiffNode) {
@@ -266,6 +396,38 @@ function handleInsert(editor, payload, dataSource) {
 			else referenceNode = $getNodeByKey(charToId(payload.afterId));
 			if (!referenceNode) throw new Error("Reference node not found for insertion.");
 			const newNodes = inode.root.children.map((child) => $parseSerializedNodeImpl(child, editor));
+			const referencesTableCell = $isTableCellNode(referenceNode);
+			const insertsOnlyTableCells = newNodes.length > 0 && newNodes.every($isTableCellNode);
+			if (referencesTableCell || insertsOnlyTableCells) {
+				if (!referencesTableCell || !insertsOnlyTableCells) {
+					logger.error("❌ Table cells can only be inserted next to another cell in the same row.");
+					return;
+				}
+				const cellReference = referenceNode;
+				const table = $getTableForCell(cellReference);
+				const referenceIndex = $getTableCellColumnIndex(cellReference);
+				if (!table || referenceIndex < 0) {
+					logger.error("❌ Table cell insertion requires a valid table parent.");
+					return;
+				}
+				const rowWidthBefore = $getLogicalRowWidth(cellReference);
+				const insertionIndex = isBefore ? referenceIndex : referenceIndex + cellReference.getColSpan();
+				const insertedSpan = newNodes.reduce((total, node) => total + ($isTableCellNode(node) ? node.getColSpan() : 0), 0);
+				$updateTableWidthsForCellInsertion(table, rowWidthBefore, insertionIndex, insertedSpan);
+				let spanOffset = 0;
+				const cells = newNodes.map((node) => {
+					const result = delay ? $createTableCellDiffFromCell(editor, node, "add", `${table.getKey()}:column:${insertionIndex + spanOffset}`) : node;
+					spanOffset += node.getColSpan();
+					return result;
+				});
+				if (isBefore) cells.reverse().forEach((cell) => {
+					referenceNode = referenceNode.insertBefore(cell);
+				});
+				else cells.forEach((cell) => {
+					referenceNode = referenceNode.insertAfter(cell);
+				});
+				return;
+			}
 			if (!delay) {
 				if (isBefore) newNodes.reverse().forEach((node) => {
 					referenceNode = referenceNode.insertBefore(node);
@@ -275,6 +437,25 @@ function handleInsert(editor, payload, dataSource) {
 				});
 				return;
 			}
+			const referencesTableRow = $isTableRowNode(referenceNode);
+			const insertsOnlyTableRows = newNodes.every($isTableRowNode);
+			if (referencesTableRow || insertsOnlyTableRows) {
+				if (!referencesTableRow || !insertsOnlyTableRows || !$isTableNode(referenceNode.getParent())) {
+					logger.error("❌ Table rows can only be inserted next to another row in the same table.");
+					return;
+				}
+				if (isBefore) newNodes.reverse().forEach((node) => {
+					if (!$isTableRowNode(node)) return;
+					const diffRow = $createTableRowDiffFromRow(editor, node, "add");
+					referenceNode = referenceNode.insertBefore(diffRow);
+				});
+				else newNodes.forEach((node) => {
+					if (!$isTableRowNode(node)) return;
+					const diffRow = $createTableRowDiffFromRow(editor, node, "add");
+					referenceNode = referenceNode.insertAfter(diffRow);
+				});
+				return;
+			}
 			if (isBefore) {
 				if (referenceNode.isInline() === false) {
 					const originDiffNode = $closest(referenceNode, (node) => node.getType() === DiffNode.getType());