@lobehub/editor 4.24.1 → 4.25.1

package/es/plugins/litexml/diff-validation.js

@@ -0,0 +1,237 @@
+//#region src/plugins/litexml/diff-validation.ts
+const ACTIONABLE_DIFF_TYPES = /* @__PURE__ */ new Set([
+	"add",
+	"remove",
+	"modify",
+	"listItemAdd",
+	"listItemModify",
+	"listItemRemove"
+]);
+const isActionableDiff = (node) => node?.type === "diff" && ACTIONABLE_DIFF_TYPES.has(node.diffType || "");
+const isElementNode = (node) => Array.isArray(node.children);
+const cloneNode = (node) => structuredClone(node);
+function hasActionableDiffDescendant(node) {
+	return (node.children || []).some((child) => isActionableDiff(child) || hasActionableDiffDescendant(child));
+}
+/**
+* Validate the serialized public tree. Paths use serialized node ids, not
+* Lexical's private node map, so this remains stable across JSON reloads.
+*/
+function collectIllegalNestedDiffPaths(root) {
+	const violations = [];
+	const visit = (node, ancestors, path) => {
+		const actionableAncestor = [...ancestors].reverse().find(isActionableDiff);
+		const rowDiffAncestor = [...ancestors].reverse().find((ancestor) => ancestor.type === "table-row-diff");
+		const allowedCellDiffChild = ancestors.at(-1)?.type === "table-cell-diff" && isActionableDiff(node);
+		if (isActionableDiff(node) && actionableAncestor && !allowedCellDiffChild) violations.push(`${path}:diff-inside-diff`);
+		if (rowDiffAncestor) {
+			if (node.type === "table-cell-diff") violations.push(`${path}:cell-inside-row-diff`);
+			else if (isActionableDiff(node)) violations.push(`${path}:diff-inside-row-diff`);
+		}
+		if (actionableAncestor) {
+			if (node.type === "table-cell-diff") violations.push(`${path}:cell-diff-inside-diff`);
+			else if (node.type === "table-row-diff") violations.push(`${path}:row-diff-inside-diff`);
+		}
+		if (!isElementNode(node)) return;
+		node.children?.forEach((child) => {
+			visit(child, [...ancestors, node], `${path}/${child.id || child.type || "node"}`);
+		});
+	};
+	visit(root, [], root.id || root.type || "root");
+	return violations;
+}
+function findNewIllegalDiffPaths(previous, projected) {
+	const previousCounts = /* @__PURE__ */ new Map();
+	collectIllegalNestedDiffPaths(previous.root).forEach((path) => {
+		previousCounts.set(path, (previousCounts.get(path) || 0) + 1);
+	});
+	const newPaths = [];
+	const projectedCounts = /* @__PURE__ */ new Map();
+	collectIllegalNestedDiffPaths(projected.root).forEach((path) => {
+		const count = (projectedCounts.get(path) || 0) + 1;
+		projectedCounts.set(path, count);
+		if (count > (previousCounts.get(path) || 0)) newPaths.push(path);
+	});
+	return newPaths;
+}
+function findNodeLocation(root, id, ancestors = []) {
+	if (root.id === id) return {
+		ancestors,
+		index: -1,
+		node: root,
+		parent: null
+	};
+	for (const [index, child] of (root.children || []).entries()) {
+		if (child.id === id) return {
+			ancestors: [...ancestors, root],
+			index,
+			node: child,
+			parent: root
+		};
+		const nested = findNodeLocation(child, id, [...ancestors, root]);
+		if (nested) return nested;
+	}
+	return null;
+}
+function replaceNode(location, replacements) {
+	if (!location.parent || location.index < 0) return;
+	location.parent.children?.splice(location.index, 1, ...replacements);
+}
+function createDiff(diffType, children) {
+	return {
+		children,
+		diffType,
+		type: "diff"
+	};
+}
+function createDiffContent(side, children) {
+	return {
+		children,
+		side,
+		type: "diff-content"
+	};
+}
+function projectModifyTarget(root, incoming) {
+	if (!incoming.id) return;
+	const location = findNodeLocation(root, incoming.id);
+	if (!location) return;
+	const target = location.node;
+	const next = cloneNode(incoming);
+	if (target.type === "tablerow" && location.parent?.type === "table") {
+		replaceNode(location, [{
+			children: cloneNode(target.children || []),
+			diffType: "remove",
+			type: "table-row-diff"
+		}, {
+			children: cloneNode(next.children || []),
+			diffType: "add",
+			type: "table-row-diff"
+		}]);
+		return;
+	}
+	if (target.type === "tablecell" || target.type === "table-cell-diff") {
+		const existingDiff = (target.children || []).find((child) => child.type === "diff");
+		if (existingDiff && target.type === "table-cell-diff") {
+			existingDiff.children = cloneNode(next.children || []);
+			return;
+		}
+		const after = existingDiff?.children?.find((child) => child.type === "diff-content" && child.side === "after");
+		if (existingDiff?.diffType === "modify" && after) {
+			after.children = cloneNode(next.children || []);
+			return;
+		}
+		target.children = [createDiff("modify", [createDiffContent("before", cloneNode(target.children || [])), createDiffContent("after", cloneNode(next.children || []))])];
+		return;
+	}
+	if (location.ancestors.some(isActionableDiff)) {
+		replaceNode(location, [next]);
+		return;
+	}
+	replaceNode(location, [createDiff("modify", [cloneNode(target), next])]);
+}
+function projectRemoveTarget(root, id) {
+	const location = findNodeLocation(root, id);
+	if (!location) return;
+	if (location.ancestors.some(isActionableDiff)) {
+		replaceNode(location, []);
+		return;
+	}
+	const target = location.node;
+	if (target.type === "tablecell" || target.type === "table-cell-diff") {
+		replaceNode(location, [{
+			children: [createDiff("remove", cloneNode(target.children || []))],
+			diffType: "remove",
+			type: "table-cell-diff"
+		}]);
+		return;
+	}
+	if (target.type === "tablerow" && location.parent?.type === "table") {
+		replaceNode(location, [{
+			children: cloneNode(target.children || []),
+			diffType: "remove",
+			type: "table-row-diff"
+		}]);
+		return;
+	}
+	replaceNode(location, [createDiff("remove", [cloneNode(target)])]);
+}
+function projectInsert(root, operation, readXml) {
+	const referenceId = "beforeId" in operation ? operation.beforeId : operation.afterId;
+	const reference = referenceId === "root" ? null : findNodeLocation(root, referenceId)?.node || null;
+	const location = referenceId === "root" ? {
+		ancestors: [root],
+		index: "beforeId" in operation ? 0 : (root.children || []).length - 1,
+		node: root.children?.[0] || root,
+		parent: root
+	} : findNodeLocation(root, referenceId);
+	if (!location) return;
+	const incoming = (readXml(operation.litexml).root?.children || []).map(cloneNode);
+	if (incoming.length === 0 || !location.parent) return;
+	const insertAt = "beforeId" in operation ? location.index : location.index + 1;
+	if (incoming.every((node) => node.type === "tablecell") && reference?.type === "tablecell") {
+		location.parent.children?.splice(insertAt, 0, ...incoming.map((node) => ({
+			children: [createDiff("add", cloneNode(node.children || []))],
+			diffType: "add",
+			type: "table-cell-diff"
+		})));
+		return;
+	}
+	if (incoming.every((node) => node.type === "tablerow") && reference?.type === "tablerow") {
+		location.parent.children?.splice(insertAt, 0, ...incoming.map((node) => ({
+			children: cloneNode(node.children || []),
+			diffType: "add",
+			type: "table-row-diff"
+		})));
+		return;
+	}
+	const actionableAncestor = location.ancestors.findLast(isActionableDiff);
+	const isInlineReference = [
+		"text",
+		"span",
+		"link",
+		"autolink",
+		"linebreak"
+	].includes(reference?.type || "");
+	const blockAncestor = [...location.ancestors].reverse().find((node) => [
+		"paragraph",
+		"heading",
+		"listitem",
+		"table",
+		"tablerow",
+		"tablecell"
+	].includes(node.type || ""));
+	if (!actionableAncestor && blockAncestor && hasActionableDiffDescendant(blockAncestor)) {
+		const wrapped = createDiff("modify", [cloneNode(blockAncestor), cloneNode(blockAncestor)]);
+		const blockLocation = findNodeLocation(root, blockAncestor.id || "");
+		if (blockLocation) replaceNode(blockLocation, [wrapped]);
+		return;
+	}
+	if (actionableAncestor && !isInlineReference) {
+		const originLocation = actionableAncestor.id ? findNodeLocation(root, actionableAncestor.id) : null;
+		if (originLocation?.parent && originLocation.index >= 0) {
+			const originInsertAt = "beforeId" in operation ? originLocation.index : originLocation.index + 1;
+			originLocation.parent.children?.splice(originInsertAt, 0, ...incoming.map((node) => createDiff("add", [node])));
+			return;
+		}
+	}
+	const inserted = actionableAncestor && isInlineReference ? incoming : incoming.map((node) => createDiff("add", [node]));
+	location.parent.children?.splice(insertAt, 0, ...inserted);
+}
+/**
+* Project one operation on a cloned serialized tree. The real Lexical tree is
+* untouched; callers compare illegal paths before/after and only dispatch safe
+* operations to the live editor.
+*/
+function projectLiteXmlOperation(document, operation, readXml) {
+	const projected = cloneNode(document);
+	if (operation.action === "modify") (Array.isArray(operation.litexml) ? operation.litexml : [operation.litexml]).forEach((xml) => {
+		(readXml(xml).root?.children || []).forEach((child) => {
+			projectModifyTarget(projected.root, child);
+		});
+	});
+	else if (operation.action === "remove") projectRemoveTarget(projected.root, operation.id);
+	else projectInsert(projected.root, operation, readXml);
+	return projected;
+}
+//#endregion
+export { collectIllegalNestedDiffPaths, findNewIllegalDiffPaths, hasActionableDiffDescendant, projectLiteXmlOperation };

package/es/plugins/litexml/node/DiffContentNode.js

@@ -0,0 +1,67 @@
+import { $applyNodeReplacement, ElementNode } from "lexical";
+//#region src/plugins/litexml/node/DiffContentNode.ts
+/** Groups one side of a modify diff so it can contain any number of block nodes. */
+var DiffContentNode = class DiffContentNode extends ElementNode {
+	static getType() {
+		return "diff-content";
+	}
+	static clone(node) {
+		return new DiffContentNode(node.__side, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createDiffContentNode(serializedNode.side).updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return null;
+	}
+	constructor(side, key) {
+		super(key);
+		this.__side = side;
+	}
+	get side() {
+		return this.__side;
+	}
+	setSide(side) {
+		this.getWritable().__side = side;
+		return this;
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setSide(serializedNode.side);
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			side: this.__side,
+			type: DiffContentNode.getType(),
+			version: 1
+		};
+	}
+	createDOM(_config, _editor) {
+		const element = document.createElement("div");
+		element.dataset.diffContent = this.__side;
+		return element;
+	}
+	updateDOM(previousNode, dom) {
+		if (previousNode.__side !== this.__side) dom.dataset.diffContent = this.__side;
+		return false;
+	}
+	exportDOM(_editor) {
+		const element = document.createElement("div");
+		element.dataset.diffContent = this.__side;
+		return { element };
+	}
+	canBeEmpty() {
+		return true;
+	}
+	isInline() {
+		return false;
+	}
+};
+function $createDiffContentNode(side) {
+	return $applyNodeReplacement(new DiffContentNode(side));
+}
+function $isDiffContentNode(node) {
+	return node instanceof DiffContentNode;
+}
+//#endregion
+export { $createDiffContentNode, $isDiffContentNode, DiffContentNode };

package/es/plugins/litexml/node/DiffNode.d.ts

@@ -5,7 +5,7 @@ type DiffType = 'add' | 'remove' | 'modify' | 'unchanged' | 'listItemModify' | '
 type SerializedDiffNode = Spread<{
   diffType: DiffType;
 }, SerializedElementNode>;
-/** DiffNode - contains two block children: original and modified */
+/** DiffNode - contains the original and modified sides, optionally grouped into multiple blocks. */
 declare class DiffNode extends CardLikeElementNode {
   static getType(): string;
   static clone(node: DiffNode): DiffNode;

package/es/plugins/litexml/node/DiffNode.js

@@ -3,7 +3,7 @@ import { CardLikeElementNode } from "../../common/node/cursor.js";
 import { $applyNodeReplacement } from "lexical";
 //#region src/plugins/litexml/node/DiffNode.ts
 init_utils();
-/** DiffNode - contains two block children: original and modified */
+/** DiffNode - contains the original and modified sides, optionally grouped into multiple blocks. */
 var DiffNode = class DiffNode extends CardLikeElementNode {
 	static getType() {
 		return "diff";
@@ -95,5 +95,8 @@ var DiffNode = class DiffNode extends CardLikeElementNode {
 function $createDiffNode(diffType = "unchanged") {
 	return $applyNodeReplacement(new DiffNode(diffType));
 }
+function $isDiffNode(node) {
+	return node instanceof DiffNode;
+}
 //#endregion
-export { $createDiffNode, DiffNode };
+export { $createDiffNode, $isDiffNode, DiffNode };

package/es/plugins/litexml/node/TableCellDiffNode.js

@@ -0,0 +1,77 @@
+import { TableCellNode } from "@lexical/table";
+import { $applyNodeReplacement } from "lexical";
+//#region src/plugins/litexml/node/TableCellDiffNode.ts
+/**
+* Review-only table cell. The diff state lives on a TableCellNode subclass so
+* TableRowNode children remain cells throughout staging and approval.
+*/
+var TableCellDiffNode = class TableCellDiffNode extends TableCellNode {
+	static getType() {
+		return "table-cell-diff";
+	}
+	static clone(node) {
+		const clone = new TableCellDiffNode(node.__diffType, node.__changeId, node.getHeaderStyles(), node.getColSpan(), node.getWidth(), node.__key);
+		clone.__rowSpan = node.__rowSpan;
+		clone.__backgroundColor = node.__backgroundColor;
+		clone.__verticalAlign = node.__verticalAlign;
+		return clone;
+	}
+	static importJSON(serializedNode) {
+		return $createTableCellDiffNode(serializedNode.diffType, serializedNode.changeId, serializedNode.headerState, serializedNode.colSpan, serializedNode.width).updateFromJSON(serializedNode);
+	}
+	constructor(diffType, changeId, headerState, colSpan, width, key) {
+		super(headerState, colSpan, width, key);
+		this.__diffType = diffType;
+		this.__changeId = changeId;
+	}
+	createDOM(config) {
+		const element = super.createDOM(config);
+		const theme = config.theme.tableCellDiff;
+		if (typeof theme === "string" && theme) element.classList.add(theme);
+		this.syncDOMState(element);
+		return element;
+	}
+	updateDOM(prevNode) {
+		return super.updateDOM(prevNode) || prevNode.__diffType !== this.__diffType || prevNode.__changeId !== this.__changeId;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			changeId: this.__changeId,
+			diffType: this.__diffType,
+			type: TableCellDiffNode.getType(),
+			version: 1
+		};
+	}
+	getChangeId() {
+		return this.getLatest().__changeId;
+	}
+	getDiffType() {
+		return this.getLatest().__diffType;
+	}
+	setChangeId(changeId) {
+		this.getWritable().__changeId = changeId;
+		return this;
+	}
+	setDiffType(diffType) {
+		this.getWritable().__diffType = diffType;
+		return this;
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setDiffType(serializedNode.diffType).setChangeId(serializedNode.changeId);
+	}
+	syncDOMState(element) {
+		element.contentEditable = "false";
+		element.dataset.diffType = this.__diffType;
+		if (this.__changeId) element.dataset.diffChangeId = this.__changeId;
+		else delete element.dataset.diffChangeId;
+	}
+};
+function $createTableCellDiffNode(diffType, changeId, headerState, colSpan, width) {
+	return $applyNodeReplacement(new TableCellDiffNode(diffType, changeId, headerState, colSpan, width));
+}
+function $isTableCellDiffNode(node) {
+	return node instanceof TableCellDiffNode;
+}
+//#endregion
+export { $createTableCellDiffNode, $isTableCellDiffNode, TableCellDiffNode };

package/es/plugins/litexml/node/TableRowDiffNode.js

@@ -0,0 +1,73 @@
+import { TableRowNode } from "@lexical/table";
+import { $applyNodeReplacement } from "lexical";
+//#region src/plugins/litexml/node/TableRowDiffNode.ts
+/**
+* A review-only table row. Keeping the diff state on a TableRowNode subclass
+* preserves Lexical's table invariant: TableNode children are always rows.
+*/
+var TableRowDiffNode = class TableRowDiffNode extends TableRowNode {
+	static getType() {
+		return "table-row-diff";
+	}
+	static clone(node) {
+		return new TableRowDiffNode(node.__diffType, node.__changeId, node.getHeight(), node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createTableRowDiffNode(serializedNode.diffType, serializedNode.changeId, serializedNode.height).updateFromJSON(serializedNode);
+	}
+	constructor(diffType, changeId, height, key) {
+		super(height, key);
+		this.__diffType = diffType;
+		this.__changeId = changeId;
+	}
+	createDOM(config) {
+		const element = super.createDOM(config);
+		const theme = config.theme.tableRowDiff;
+		if (typeof theme === "string" && theme) element.classList.add(theme);
+		this.syncDOMState(element);
+		return element;
+	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			changeId: this.__changeId,
+			diffType: this.__diffType,
+			type: TableRowDiffNode.getType(),
+			version: 1
+		};
+	}
+	getChangeId() {
+		return this.getLatest().__changeId;
+	}
+	getDiffType() {
+		return this.getLatest().__diffType;
+	}
+	setChangeId(changeId) {
+		this.getWritable().__changeId = changeId;
+		return this;
+	}
+	setDiffType(diffType) {
+		this.getWritable().__diffType = diffType;
+		return this;
+	}
+	updateDOM(prevNode) {
+		return super.updateDOM(prevNode) || prevNode.__diffType !== this.__diffType || prevNode.__changeId !== this.__changeId;
+	}
+	updateFromJSON(serializedNode) {
+		return super.updateFromJSON(serializedNode).setDiffType(serializedNode.diffType).setChangeId(serializedNode.changeId);
+	}
+	syncDOMState(element) {
+		element.dataset.diffType = this.__diffType;
+		if (this.__changeId) element.dataset.diffChangeId = this.__changeId;
+		else delete element.dataset.diffChangeId;
+		element.contentEditable = "false";
+	}
+};
+function $createTableRowDiffNode(diffType, changeId, height) {
+	return $applyNodeReplacement(new TableRowDiffNode(diffType, changeId, height));
+}
+function $isTableRowDiffNode(node) {
+	return node instanceof TableRowDiffNode;
+}
+//#endregion
+export { $createTableRowDiffNode, $isTableRowDiffNode, TableRowDiffNode };

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

@@ -13,6 +13,8 @@ interface LitexmlPluginOptions {
    * @default true
    */
   enabled?: boolean;
+  tableRowDiffTheme?: string;
+  tableCellDiffTheme?: string;
   theme?: string;
 }
 /**

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

@@ -1,10 +1,16 @@
 import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { $isDiffContentNode, DiffContentNode } from "../node/DiffContentNode.js";
 import { DiffNode } from "../node/DiffNode.js";
+import { $isTableCellDiffNode, TableCellDiffNode } from "../node/TableCellDiffNode.js";
+import { registerLegacyTableCellDiffNormalization } from "../table-cell-diff.js";
+import { $isTableRowDiffNode, TableRowDiffNode } from "../node/TableRowDiffNode.js";
+import { registerTableRowDiffNormalization } from "../table-row-diff.js";
 import { registerLiteXMLCommand } from "../command/index.js";
 import { registerLiteXMLDiffCommand } from "../command/diffCommand.js";
 import { ILitexmlService, LitexmlService } from "../service/litexml-service.js";
 import LitexmlDataSource from "../data-source/litexml-data-source.js";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { $isTableNode } from "@lexical/table";
 import { $nodesOfType, HISTORIC_TAG } from "lexical";
 //#region src/plugins/litexml/plugin/index.ts
 init_plugin();
@@ -20,14 +26,23 @@ const LitexmlPlugin = class extends KernelPlugin {
 		super();
 		this.kernel = kernel;
 		this.config = config;
-		kernel.registerThemes({ diffNode: config?.theme || "editor_diffNode" });
+		kernel.registerThemes({
+			diffNode: config?.theme || "editor_diffNode",
+			tableRowDiff: config?.tableRowDiffTheme || "editor_tableRowDiff",
+			tableCellDiff: config?.tableCellDiffTheme || "editor_tableCellDiff"
+		});
 		const litexmlService = new LitexmlService();
 		this.service = litexmlService;
 		kernel.registerService(ILitexmlService, litexmlService);
 		this.datasource = new LitexmlDataSource("litexml", (serviceId) => {
 			return kernel.requireService(serviceId);
 		}, litexmlService);
-		kernel.registerNodes([DiffNode]);
+		kernel.registerNodes([
+			DiffNode,
+			DiffContentNode,
+			TableRowDiffNode,
+			TableCellDiffNode
+		]);
 		kernel.registerDecorator(DiffNode.getType(), {
 			queryDOM: (el) => el.querySelector(".toolbar"),
 			render: (node, editor) => {
@@ -39,6 +54,8 @@ const LitexmlPlugin = class extends KernelPlugin {
 	onInit(editor) {
 		this.register(registerLiteXMLCommand(editor, this.datasource));
 		this.register(registerLiteXMLDiffCommand(editor));
+		this.register(registerLegacyTableCellDiffNormalization(editor));
+		this.register(registerTableRowDiffNormalization(editor));
 		this.register(editor.registerNodeTransform(DiffNode, (node) => {
 			if (node.diffType === "modify" && node.getChildrenSize() === 1) node.setDiffType("remove");
 		}));
@@ -63,11 +80,14 @@ const LitexmlPlugin = class extends KernelPlugin {
 			const diffNode = node;
 			const lines = [];
 			switch (diffNode.diffType) {
-				case "modify":
-					nodeToXML(diffNode.getChildAtIndex(1), lines, indent);
+				case "modify": {
+					const after = diffNode.getChildAtIndex(1);
+					if ($isDiffContentNode(after)) after.getChildren().forEach((child) => nodeToXML(child, lines, indent));
+					else nodeToXML(after, lines, indent);
 					break;
+				}
 				case "add":
-					nodeToXML(diffNode.getChildAtIndex(0), lines, indent);
+					diffNode.getChildren().forEach((child) => nodeToXML(child, lines, indent));
 					break;
 				case "remove": break;
 				case "listItemModify": diffNode.getChildAtIndex(1).getChildren().forEach((child) => {
@@ -76,16 +96,49 @@ const LitexmlPlugin = class extends KernelPlugin {
 			}
 			return { lines };
 		});
+		this.service.registerXMLWriter(TableRowDiffNode.getType(), (node, ctx) => {
+			if (!$isTableRowDiffNode(node)) return false;
+			if (node.getDiffType() === "remove") return { lines: [] };
+			return ctx.createXmlNode("tr", {});
+		});
+		this.service.registerXMLWriter(TableCellDiffNode.getType(), (node, ctx) => {
+			if (!$isTableCellDiffNode(node)) return false;
+			if (node.getDiffType() === "remove") return { lines: [] };
+			const attributes = {};
+			if (node.getColSpan() > 1) attributes.colSpan = String(node.getColSpan());
+			if (node.getRowSpan() > 1) attributes.rowSpan = String(node.getRowSpan());
+			if (node.getBackgroundColor()) attributes.backgroundColor = node.getBackgroundColor();
+			return ctx.createXmlNode("td", attributes);
+		});
 	}
 	registerMarkdown() {
-		this.kernel.requireService(IMarkdownShortCutService)?.registerMarkdownWriter(DiffNode.getType(), (ctx, node) => {
+		const markdownService = this.kernel.requireService(IMarkdownShortCutService);
+		markdownService?.registerMarkdownWriter(TableCellDiffNode.getType(), (ctx, node) => {
+			if (!$isTableCellDiffNode(node)) return false;
+			if (node.getDiffType() === "remove") return true;
+			if (!node.getNextSibling()) ctx.wrap("|", "|");
+			else ctx.wrap("|", "");
+			return true;
+		});
+		markdownService?.registerMarkdownWriter(TableRowDiffNode.getType(), (ctx, node) => {
+			if (!$isTableRowDiffNode(node)) return false;
+			if (node.getDiffType() === "remove") return true;
+			const parent = node.getParent();
+			if (!$isTableNode(parent)) return true;
+			if (node.getPreviousSiblings().some((sibling) => !$isTableRowDiffNode(sibling) || sibling.getDiffType() !== "remove")) ctx.wrap("", "\n");
+			else ctx.wrap("", `\n${parent.getColWidths()?.map(() => "|:--").join("")}|\n`);
+		});
+		markdownService?.registerMarkdownWriter(DiffNode.getType(), (ctx, node) => {
 			const diffNode = node;
 			switch (diffNode.diffType) {
-				case "modify":
-					ctx.processChild(ctx, diffNode.getChildAtIndex(1));
+				case "modify": {
+					const after = diffNode.getChildAtIndex(1);
+					if ($isDiffContentNode(after)) after.getChildren().forEach((child) => ctx.processChild(ctx, child));
+					else ctx.processChild(ctx, after);
 					break;
+				}
 				case "add":
-					ctx.processChild(ctx, diffNode.getChildAtIndex(0));
+					diffNode.getChildren().forEach((child) => ctx.processChild(ctx, child));
 					break;
 				case "remove": break;
 				case "listItemModify": diffNode.getChildAtIndex(1).getChildren().forEach((child) => {

package/es/plugins/litexml/react/DiffNodeToolbar/index.js

@@ -10,6 +10,14 @@ import { useThemeMode } from "antd-style";
 const ReactDiffNodeToolbar = ({ editor, node }) => {
 	const t = useTranslation();
 	const { isDarkMode } = useThemeMode();
+	const handleActionPointerDown = (event, action) => {
+		event.preventDefault();
+		event.stopPropagation();
+		editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
+			action,
+			nodeKey: node.getKey()
+		});
+	};
 	return /* @__PURE__ */ jsx(LexicalPortalContainer, {
 		editor,
 		node,
@@ -25,12 +33,7 @@ const ReactDiffNodeToolbar = ({ editor, node }) => {
 				className: styles.reject,
 				danger: true,
 				icon: X,
-				onClick: () => {
-					editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
-						action: 0,
-						nodeKey: node.getKey()
-					});
-				},
+				onPointerDown: (event) => handleActionPointerDown(event, 0),
 				size: {
 					blockSize: 28,
 					size: 16
@@ -40,12 +43,7 @@ const ReactDiffNodeToolbar = ({ editor, node }) => {
 				"aria-label": "Accept change",
 				className: styles.accept,
 				icon: Check,
-				onClick: () => {
-					editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
-						action: 1,
-						nodeKey: node.getKey()
-					});
-				},
+				onPointerDown: (event) => handleActionPointerDown(event, 1),
 				size: {
 					blockSize: 28,
 					size: 16