@lobehub/editor 4.3.2 → 4.4.0

package/es/renderer/LexicalDiff.d.ts

@@ -0,0 +1,22 @@
+import type { SerializedEditorState } from 'lexical';
+import type { CSSProperties, ReactNode } from 'react';
+import type { LexicalDiffBlockRenderer } from './diff/types';
+import type { LexicalRendererProps } from './types';
+export type { LexicalDiffBlockRenderContext, LexicalDiffBlockRenderer, LexicalDiffCell, LexicalDiffRow, LexicalDiffRowKind, } from './diff/types';
+export interface LexicalDiffProps {
+    blockRenderers?: Record<string, LexicalDiffBlockRenderer>;
+    className?: string;
+    extraNodes?: LexicalRendererProps['extraNodes'];
+    labels?: {
+        new?: ReactNode;
+        old?: ReactNode;
+    };
+    newValue: SerializedEditorState;
+    oldValue: SerializedEditorState;
+    overrides?: LexicalRendererProps['overrides'];
+    renderBlockDiff?: LexicalDiffBlockRenderer;
+    renderContext?: LexicalRendererProps['renderContext'];
+    style?: CSSProperties;
+    variant?: LexicalRendererProps['variant'];
+}
+export declare function LexicalDiff({ oldValue, newValue, variant, extraNodes, overrides, renderContext, labels, blockRenderers, renderBlockDiff, className, style, }: LexicalDiffProps): import("react/jsx-runtime").JSX.Element;

package/es/renderer/LexicalDiff.js

@@ -0,0 +1,116 @@
+import { cx } from 'antd-style';
+import { useMemo } from 'react';
+import { LexicalRenderer } from "./LexicalRenderer";
+import { computeLexicalDiffRows } from "./diff/compute";
+import { styles } from "./diff/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function wrapBlock(block) {
+  return {
+    root: {
+      children: [block],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1
+    }
+  };
+}
+function RowCell(_ref) {
+  var className = _ref.className,
+    content = _ref.content;
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: content
+  });
+}
+export function LexicalDiff(_ref2) {
+  var _labels$old, _labels$new;
+  var oldValue = _ref2.oldValue,
+    newValue = _ref2.newValue,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    extraNodes = _ref2.extraNodes,
+    overrides = _ref2.overrides,
+    renderContext = _ref2.renderContext,
+    labels = _ref2.labels,
+    blockRenderers = _ref2.blockRenderers,
+    renderBlockDiff = _ref2.renderBlockDiff,
+    className = _ref2.className,
+    style = _ref2.style;
+  var rows = useMemo(function () {
+    return computeLexicalDiffRows(oldValue, newValue);
+  }, [oldValue, newValue]);
+  var renderDefaultCell = function renderDefaultCell(block) {
+    if (!block) return null;
+    return /*#__PURE__*/_jsx(LexicalRenderer, {
+      extraNodes: extraNodes,
+      overrides: overrides,
+      renderContext: renderContext,
+      value: wrapBlock(block),
+      variant: variant
+    });
+  };
+  var renderRow = function renderRow(row, index) {
+    var _row$oldCell, _row$newCell, _ref3, _row$oldCell$blockTyp, _row$oldCell2, _row$newCell2, _row$oldCell3, _row$newCell3, _ref4, _row$oldCell$baseBloc, _row$oldCell4, _row$newCell4, _row$newCell$baseBloc, _row$newCell5, _row$newCell$blockTyp, _row$newCell6, _row$oldCell$baseBloc2, _row$oldCell5, _row$oldCell$blockTyp2, _row$oldCell6, _rendered$old, _rendered, _rendered$new, _rendered2;
+    var blockType = (_row$oldCell = row.oldCell) !== null && _row$oldCell !== void 0 && _row$oldCell.blockType && (_row$newCell = row.newCell) !== null && _row$newCell !== void 0 && _row$newCell.blockType ? row.oldCell.blockType === row.newCell.blockType ? row.oldCell.blockType : null : (_ref3 = (_row$oldCell$blockTyp = (_row$oldCell2 = row.oldCell) === null || _row$oldCell2 === void 0 ? void 0 : _row$oldCell2.blockType) !== null && _row$oldCell$blockTyp !== void 0 ? _row$oldCell$blockTyp : (_row$newCell2 = row.newCell) === null || _row$newCell2 === void 0 ? void 0 : _row$newCell2.blockType) !== null && _ref3 !== void 0 ? _ref3 : null;
+    var baseBlockType = (_row$oldCell3 = row.oldCell) !== null && _row$oldCell3 !== void 0 && _row$oldCell3.baseBlockType && (_row$newCell3 = row.newCell) !== null && _row$newCell3 !== void 0 && _row$newCell3.baseBlockType ? row.oldCell.baseBlockType === row.newCell.baseBlockType ? row.oldCell.baseBlockType : null : (_ref4 = (_row$oldCell$baseBloc = (_row$oldCell4 = row.oldCell) === null || _row$oldCell4 === void 0 ? void 0 : _row$oldCell4.baseBlockType) !== null && _row$oldCell$baseBloc !== void 0 ? _row$oldCell$baseBloc : (_row$newCell4 = row.newCell) === null || _row$newCell4 === void 0 ? void 0 : _row$newCell4.baseBlockType) !== null && _ref4 !== void 0 ? _ref4 : null;
+    var context = {
+      baseBlockType: baseBlockType,
+      blockType: blockType,
+      newBaseBlockType: (_row$newCell$baseBloc = (_row$newCell5 = row.newCell) === null || _row$newCell5 === void 0 ? void 0 : _row$newCell5.baseBlockType) !== null && _row$newCell$baseBloc !== void 0 ? _row$newCell$baseBloc : null,
+      newBlockType: (_row$newCell$blockTyp = (_row$newCell6 = row.newCell) === null || _row$newCell6 === void 0 ? void 0 : _row$newCell6.blockType) !== null && _row$newCell$blockTyp !== void 0 ? _row$newCell$blockTyp : null,
+      oldBaseBlockType: (_row$oldCell$baseBloc2 = (_row$oldCell5 = row.oldCell) === null || _row$oldCell5 === void 0 ? void 0 : _row$oldCell5.baseBlockType) !== null && _row$oldCell$baseBloc2 !== void 0 ? _row$oldCell$baseBloc2 : null,
+      oldBlockType: (_row$oldCell$blockTyp2 = (_row$oldCell6 = row.oldCell) === null || _row$oldCell6 === void 0 ? void 0 : _row$oldCell6.blockType) !== null && _row$oldCell$blockTyp2 !== void 0 ? _row$oldCell$blockTyp2 : null,
+      renderDefaultNew: function renderDefaultNew() {
+        var _row$newCell$block, _row$newCell7;
+        return renderDefaultCell((_row$newCell$block = (_row$newCell7 = row.newCell) === null || _row$newCell7 === void 0 ? void 0 : _row$newCell7.block) !== null && _row$newCell$block !== void 0 ? _row$newCell$block : null);
+      },
+      renderDefaultOld: function renderDefaultOld() {
+        var _row$oldCell$block, _row$oldCell7;
+        return renderDefaultCell((_row$oldCell$block = (_row$oldCell7 = row.oldCell) === null || _row$oldCell7 === void 0 ? void 0 : _row$oldCell7.block) !== null && _row$oldCell$block !== void 0 ? _row$oldCell$block : null);
+      },
+      row: row
+    };
+    var renderers = [blockType ? blockRenderers === null || blockRenderers === void 0 ? void 0 : blockRenderers[blockType] : undefined, baseBlockType && baseBlockType !== blockType ? blockRenderers === null || blockRenderers === void 0 ? void 0 : blockRenderers[baseBlockType] : undefined, renderBlockDiff];
+    var rendered;
+    for (var _i = 0, _renderers = renderers; _i < _renderers.length; _i++) {
+      var renderer = _renderers[_i];
+      if (!renderer) continue;
+      var next = renderer(context);
+      if (next === null) continue;
+      rendered = next;
+      break;
+    }
+    var oldContent = (_rendered$old = (_rendered = rendered) === null || _rendered === void 0 ? void 0 : _rendered.old) !== null && _rendered$old !== void 0 ? _rendered$old : context.renderDefaultOld();
+    var newContent = (_rendered$new = (_rendered2 = rendered) === null || _rendered2 === void 0 ? void 0 : _rendered2.new) !== null && _rendered$new !== void 0 ? _rendered$new : context.renderDefaultNew();
+    return /*#__PURE__*/_jsxs("div", {
+      className: styles.row,
+      children: [/*#__PURE__*/_jsx(RowCell, {
+        className: cx(styles.cell, styles.cellOld, !row.oldCell && styles.emptyCell, row.kind === 'delete' && styles.deleteCell),
+        content: oldContent
+      }), /*#__PURE__*/_jsx(RowCell, {
+        className: cx(styles.cell, !row.newCell && styles.emptyCell, row.kind === 'insert' && styles.insertCell),
+        content: newContent
+      })]
+    }, "row-".concat(index));
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(styles.root, className),
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.header,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cx(styles.headerCell, styles.headerOld),
+        children: (_labels$old = labels === null || labels === void 0 ? void 0 : labels.old) !== null && _labels$old !== void 0 ? _labels$old : 'Old'
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.headerCell,
+        children: (_labels$new = labels === null || labels === void 0 ? void 0 : labels.new) !== null && _labels$new !== void 0 ? _labels$new : 'New'
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.body,
+      children: rows.map(renderRow)
+    })]
+  });
+}

package/es/renderer/diff/compute.d.ts

@@ -0,0 +1,3 @@
+import type { SerializedEditorState } from 'lexical';
+import type { LexicalDiffRow } from './types';
+export declare function computeLexicalDiffRows(oldState: SerializedEditorState, newState: SerializedEditorState): LexicalDiffRow[];

package/es/renderer/diff/compute.js

@@ -0,0 +1,510 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var CHAR_DIFF_MAX_MATRIX_CELLS = 50000;
+var DELETE_MARK_STYLE = 'background-color: color-mix(in srgb, var(--ant-color-error) 18%, transparent); text-decoration: line-through;';
+var INSERT_MARK_STYLE = 'background-color: color-mix(in srgb, var(--ant-color-success) 18%, transparent);';
+function getBaseNodeType(node) {
+  if (!node) return null;
+  var type = node.type;
+  return typeof type === 'string' ? type : null;
+}
+function getNormalizedBlockType(node) {
+  if (!node) return null;
+  var record = node;
+  var type = getBaseNodeType(node);
+  if (!type) return null;
+  if (type === 'heading') return "heading:".concat(String(record.tag || 'unknown'));
+  if (type === 'list') return "list:".concat(String(record.listType || 'bullet'));
+  return type;
+}
+function createCell(block) {
+  if (!block) return null;
+  return {
+    baseBlockType: getBaseNodeType(block),
+    block: block,
+    blockType: getNormalizedBlockType(block)
+  };
+}
+function getChildren(node) {
+  var children = node.children;
+  return Array.isArray(children) ? children : null;
+}
+function nodesEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+function isTextNode(node) {
+  var record = node;
+  return record.type === 'text' && typeof record.text === 'string';
+}
+function appendStyle(baseStyle, extraStyle) {
+  var normalizedBase = typeof baseStyle === 'string' ? baseStyle.trim() : '';
+  if (!normalizedBase) return extraStyle;
+  return "".concat(normalizedBase).concat(normalizedBase.endsWith(';') ? '' : ';', " ").concat(extraStyle);
+}
+function cloneTextNode(node, text, markKind) {
+  var style = node.style;
+  if (markKind === 'delete') {
+    style = appendStyle(style, DELETE_MARK_STYLE);
+  } else if (markKind === 'insert') {
+    style = appendStyle(style, INSERT_MARK_STYLE);
+  }
+  return _objectSpread(_objectSpread({}, node), {}, {
+    style: style,
+    text: text
+  });
+}
+function cloneNodeWithChildren(node, children) {
+  return _objectSpread(_objectSpread({}, node), {}, {
+    children: children
+  });
+}
+function decorateSubtree(node, kind) {
+  if (isTextNode(node)) return cloneTextNode(node, node.text, kind);
+  var children = getChildren(node);
+  if (!children) return node;
+  return cloneNodeWithChildren(node, children.map(function (child) {
+    return decorateSubtree(child, kind);
+  }));
+}
+function reverseText(value) {
+  return Array.from(value).reverse().join('');
+}
+function mergeTextOps(ops) {
+  var merged = [];
+  var _iterator = _createForOfIteratorHelper(ops),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var op = _step.value;
+      if (!op.text) continue;
+      var last = merged.at(-1);
+      if (last && last.kind === op.kind) {
+        last.text += op.text;
+        continue;
+      }
+      merged.push(_objectSpread({}, op));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return merged;
+}
+function diffMiddleChars(oldChars, newChars) {
+  var m = oldChars.length;
+  var n = newChars.length;
+  if (m === 0 && n === 0) return [];
+  if (m === 0) return [{
+    kind: 'insert',
+    text: newChars.join('')
+  }];
+  if (n === 0) return [{
+    kind: 'delete',
+    text: oldChars.join('')
+  }];
+  if (m * n > CHAR_DIFF_MAX_MATRIX_CELLS) {
+    return [{
+      kind: 'delete',
+      text: oldChars.join('')
+    }, {
+      kind: 'insert',
+      text: newChars.join('')
+    }];
+  }
+  var dp = Array.from({
+    length: m + 1
+  }, function () {
+    return Array.from({
+      length: n + 1
+    }).fill(0);
+  });
+  for (var _i = 1; _i <= m; _i++) {
+    for (var _j = 1; _j <= n; _j++) {
+      if (oldChars[_i - 1] === newChars[_j - 1]) {
+        dp[_i][_j] = dp[_i - 1][_j - 1] + 1;
+      } else {
+        dp[_i][_j] = Math.max(dp[_i - 1][_j], dp[_i][_j - 1]);
+      }
+    }
+  }
+  var reversedOps = [];
+  var i = m;
+  var j = n;
+  while (i > 0 && j > 0) {
+    if (oldChars[i - 1] === newChars[j - 1]) {
+      var last = reversedOps.at(-1);
+      if (last && last.kind === 'equal') {
+        last.text += oldChars[i - 1];
+      } else {
+        reversedOps.push({
+          kind: 'equal',
+          text: oldChars[i - 1]
+        });
+      }
+      i--;
+      j--;
+      continue;
+    }
+    if (dp[i - 1][j] >= dp[i][j - 1]) {
+      var _last = reversedOps.at(-1);
+      if (_last && _last.kind === 'delete') {
+        _last.text += oldChars[i - 1];
+      } else {
+        reversedOps.push({
+          kind: 'delete',
+          text: oldChars[i - 1]
+        });
+      }
+      i--;
+    } else {
+      var _last2 = reversedOps.at(-1);
+      if (_last2 && _last2.kind === 'insert') {
+        _last2.text += newChars[j - 1];
+      } else {
+        reversedOps.push({
+          kind: 'insert',
+          text: newChars[j - 1]
+        });
+      }
+      j--;
+    }
+  }
+  while (i > 0) {
+    var _last3 = reversedOps.at(-1);
+    if (_last3 && _last3.kind === 'delete') {
+      _last3.text += oldChars[i - 1];
+    } else {
+      reversedOps.push({
+        kind: 'delete',
+        text: oldChars[i - 1]
+      });
+    }
+    i--;
+  }
+  while (j > 0) {
+    var _last4 = reversedOps.at(-1);
+    if (_last4 && _last4.kind === 'insert') {
+      _last4.text += newChars[j - 1];
+    } else {
+      reversedOps.push({
+        kind: 'insert',
+        text: newChars[j - 1]
+      });
+    }
+    j--;
+  }
+  return mergeTextOps(reversedOps.reverse().map(function (op) {
+    return {
+      kind: op.kind,
+      text: reverseText(op.text)
+    };
+  }));
+}
+function diffTextByChar(oldText, newText) {
+  var oldChars = Array.from(oldText);
+  var newChars = Array.from(newText);
+  var prefix = 0;
+  while (prefix < oldChars.length && prefix < newChars.length && oldChars[prefix] === newChars[prefix]) {
+    prefix++;
+  }
+  var oldSuffix = oldChars.length - 1;
+  var newSuffix = newChars.length - 1;
+  while (oldSuffix >= prefix && newSuffix >= prefix && oldChars[oldSuffix] === newChars[newSuffix]) {
+    oldSuffix--;
+    newSuffix--;
+  }
+  var ops = [];
+  if (prefix > 0) {
+    ops.push({
+      kind: 'equal',
+      text: oldChars.slice(0, prefix).join('')
+    });
+  }
+  ops.push.apply(ops, _toConsumableArray(diffMiddleChars(oldChars.slice(prefix, oldSuffix + 1), newChars.slice(prefix, newSuffix + 1))));
+  if (oldSuffix < oldChars.length - 1) {
+    ops.push({
+      kind: 'equal',
+      text: oldChars.slice(oldSuffix + 1).join('')
+    });
+  }
+  return mergeTextOps(ops);
+}
+function splitTextNodeByCharDiff(oldNode, newNode) {
+  var ops = diffTextByChar(oldNode.text, newNode.text);
+  var oldNodes = [];
+  var newNodes = [];
+  var changed = false;
+  var _iterator2 = _createForOfIteratorHelper(ops),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var op = _step2.value;
+      if (!op.text) continue;
+      if (op.kind === 'equal') {
+        oldNodes.push(cloneTextNode(oldNode, op.text));
+        newNodes.push(cloneTextNode(newNode, op.text));
+        continue;
+      }
+      changed = true;
+      if (op.kind === 'delete') {
+        oldNodes.push(cloneTextNode(oldNode, op.text, 'delete'));
+        continue;
+      }
+      newNodes.push(cloneTextNode(newNode, op.text, 'insert'));
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return {
+    changed: changed,
+    newNodes: newNodes.length > 0 ? newNodes : [newNode],
+    oldNodes: oldNodes.length > 0 ? oldNodes : [oldNode]
+  };
+}
+function alignNodes(oldNodes, newNodes) {
+  var m = oldNodes.length;
+  var n = newNodes.length;
+  var dp = Array.from({
+    length: m + 1
+  }, function () {
+    return Array.from({
+      length: n + 1
+    }).fill(0);
+  });
+  for (var _i2 = 1; _i2 <= m; _i2++) {
+    for (var _j2 = 1; _j2 <= n; _j2++) {
+      var skip = Math.max(dp[_i2 - 1][_j2], dp[_i2][_j2 - 1]);
+      var oldType = getNormalizedBlockType(oldNodes[_i2 - 1]);
+      var newType = getNormalizedBlockType(newNodes[_j2 - 1]);
+      if (oldType && oldType === newType) {
+        var score = nodesEqual(oldNodes[_i2 - 1], newNodes[_j2 - 1]) ? 2 : 1;
+        dp[_i2][_j2] = Math.max(skip, dp[_i2 - 1][_j2 - 1] + score);
+      } else {
+        dp[_i2][_j2] = skip;
+      }
+    }
+  }
+  var ops = [];
+  var i = m;
+  var j = n;
+  while (i > 0 && j > 0) {
+    var _oldType = getNormalizedBlockType(oldNodes[i - 1]);
+    var _newType = getNormalizedBlockType(newNodes[j - 1]);
+    if (_oldType && _oldType === _newType) {
+      var exact = nodesEqual(oldNodes[i - 1], newNodes[j - 1]);
+      var _score = exact ? 2 : 1;
+      if (dp[i][j] === dp[i - 1][j - 1] + _score) {
+        ops.push(exact ? {
+          kind: 'equal',
+          node: oldNodes[i - 1]
+        } : {
+          kind: 'modify',
+          newNode: newNodes[j - 1],
+          oldNode: oldNodes[i - 1]
+        });
+        i--;
+        j--;
+        continue;
+      }
+    }
+    if (dp[i - 1][j] >= dp[i][j - 1]) {
+      ops.push({
+        kind: 'delete',
+        node: oldNodes[i - 1]
+      });
+      i--;
+    } else {
+      ops.push({
+        kind: 'insert',
+        node: newNodes[j - 1]
+      });
+      j--;
+    }
+  }
+  while (i > 0) {
+    ops.push({
+      kind: 'delete',
+      node: oldNodes[--i]
+    });
+  }
+  while (j > 0) {
+    ops.push({
+      kind: 'insert',
+      node: newNodes[--j]
+    });
+  }
+  return ops.reverse();
+}
+function diffChildrenInline(oldChildren, newChildren) {
+  var ops = alignNodes(oldChildren, newChildren);
+  var nextOldChildren = [];
+  var nextNewChildren = [];
+  var changed = false;
+  var _iterator3 = _createForOfIteratorHelper(ops),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var op = _step3.value;
+      switch (op.kind) {
+        case 'equal':
+          {
+            nextOldChildren.push(op.node);
+            nextNewChildren.push(op.node);
+            break;
+          }
+        case 'delete':
+          {
+            changed = true;
+            nextOldChildren.push(decorateSubtree(op.node, 'delete'));
+            break;
+          }
+        case 'insert':
+          {
+            changed = true;
+            nextNewChildren.push(decorateSubtree(op.node, 'insert'));
+            break;
+          }
+        case 'modify':
+          {
+            changed = true;
+            if (isTextNode(op.oldNode) && isTextNode(op.newNode)) {
+              var textDiff = splitTextNodeByCharDiff(op.oldNode, op.newNode);
+              nextOldChildren.push.apply(nextOldChildren, _toConsumableArray(textDiff.oldNodes));
+              nextNewChildren.push.apply(nextNewChildren, _toConsumableArray(textDiff.newNodes));
+              break;
+            }
+
+            // Recursive descent is intentional here: same-type element nodes diff their children.
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            var nested = diffNodeInline(op.oldNode, op.newNode);
+            nextOldChildren.push(nested.oldNode);
+            nextNewChildren.push(nested.newNode);
+            break;
+          }
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return {
+    changed: changed,
+    newChildren: nextNewChildren,
+    oldChildren: nextOldChildren
+  };
+}
+function diffNodeInline(oldNode, newNode) {
+  if (nodesEqual(oldNode, newNode)) {
+    return {
+      changed: false,
+      newNode: newNode,
+      oldNode: oldNode
+    };
+  }
+  var oldChildren = getChildren(oldNode);
+  var newChildren = getChildren(newNode);
+  if (!oldChildren || !newChildren) {
+    return {
+      changed: true,
+      newNode: newNode,
+      oldNode: oldNode
+    };
+  }
+  var childDiff = diffChildrenInline(oldChildren, newChildren);
+  if (!childDiff.changed) {
+    return {
+      changed: false,
+      newNode: newNode,
+      oldNode: oldNode
+    };
+  }
+  return {
+    changed: true,
+    newNode: cloneNodeWithChildren(newNode, childDiff.newChildren),
+    oldNode: cloneNodeWithChildren(oldNode, childDiff.oldChildren)
+  };
+}
+function getRootChildren(state) {
+  return Array.isArray(state.root.children) ? _toConsumableArray(state.root.children) : [];
+}
+export function computeLexicalDiffRows(oldState, newState) {
+  var ops = alignNodes(getRootChildren(oldState), getRootChildren(newState));
+  var rows = [];
+  var index = 0;
+  while (index < ops.length) {
+    var op = ops[index];
+    if (op.kind === 'equal') {
+      rows.push({
+        kind: 'equal',
+        newCell: createCell(op.node),
+        oldCell: createCell(op.node)
+      });
+      index++;
+      continue;
+    }
+    if (op.kind === 'modify') {
+      var diffed = diffNodeInline(op.oldNode, op.newNode);
+      rows.push({
+        kind: 'modify',
+        newCell: createCell(diffed.newNode),
+        oldCell: createCell(diffed.oldNode)
+      });
+      index++;
+      continue;
+    }
+    var deletes = [];
+    var inserts = [];
+    while (index < ops.length && (ops[index].kind === 'delete' || ops[index].kind === 'insert')) {
+      var current = ops[index];
+      if (current.kind === 'delete') {
+        deletes.push(current.node);
+      } else if (current.kind === 'insert') {
+        inserts.push(current.node);
+      }
+      index++;
+    }
+    var maxLength = Math.max(deletes.length, inserts.length);
+    for (var pairIndex = 0; pairIndex < maxLength; pairIndex++) {
+      var _deletes$pairIndex, _inserts$pairIndex;
+      var oldBlock = (_deletes$pairIndex = deletes[pairIndex]) !== null && _deletes$pairIndex !== void 0 ? _deletes$pairIndex : null;
+      var newBlock = (_inserts$pairIndex = inserts[pairIndex]) !== null && _inserts$pairIndex !== void 0 ? _inserts$pairIndex : null;
+      if (oldBlock && newBlock) {
+        rows.push({
+          kind: 'modify',
+          newCell: createCell(newBlock),
+          oldCell: createCell(oldBlock)
+        });
+        continue;
+      }
+      if (oldBlock) {
+        rows.push({
+          kind: 'delete',
+          newCell: null,
+          oldCell: createCell(oldBlock)
+        });
+        continue;
+      }
+      rows.push({
+        kind: 'insert',
+        newCell: createCell(newBlock),
+        oldCell: null
+      });
+    }
+  }
+  return rows;
+}

package/es/renderer/diff/style.d.ts

@@ -0,0 +1,13 @@
+export declare const styles: {
+    body: string;
+    cell: string;
+    cellOld: string;
+    deleteCell: string;
+    emptyCell: string;
+    header: string;
+    headerCell: string;
+    headerOld: string;
+    insertCell: string;
+    root: string;
+    row: string;
+};

package/es/renderer/diff/style.js

@@ -0,0 +1,20 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  return {
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    background: ", ";\n  "])), cssVar.colorBgContainer),
+    cell: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow: auto;\n    min-width: 0;\n    min-height: 24px;\n\n    > div {\n      width: 100%;\n      min-width: 0;\n    }\n  "]))),
+    cellOld: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""]))),
+    deleteCell: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background: color-mix(in srgb, ", " 10%, transparent);\n  "])), cssVar.colorError),
+    emptyCell: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background: ", ";\n  "])), cssVar.colorFillQuaternary),
+    header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    border-block-end: 1px solid ", ";\n    background: ", ";\n  "])), cssVar.colorBorderSecondary, cssVar.colorFillQuaternary),
+    headerCell: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    padding-block: 8px;\n    padding-inline: 16px;\n\n    font-size: 12px;\n    font-weight: 600;\n    color: ", ";\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  "])), cssVar.colorTextSecondary),
+    headerOld: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border-inline-end: 1px solid ", ";\n  "])), cssVar.colorBorderSecondary),
+    insertCell: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background: color-mix(in srgb, ", " 10%, transparent);\n  "])), cssVar.colorSuccess),
+    root: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    font-size: 14px;\n\n    background: ", ";\n  "])), cssVar.colorBorderSecondary, cssVar.borderRadiusSM, cssVar.colorBgContainer),
+    row: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  "])))
+  };
+});

package/es/renderer/diff/types.d.ts

@@ -0,0 +1,28 @@
+import type { SerializedLexicalNode } from 'lexical';
+import type { ReactNode } from 'react';
+export type LexicalDiffRowKind = 'delete' | 'equal' | 'insert' | 'modify';
+export interface LexicalDiffCell {
+    baseBlockType: string | null;
+    block: SerializedLexicalNode | null;
+    blockType: string | null;
+}
+export interface LexicalDiffRow {
+    kind: LexicalDiffRowKind;
+    newCell: LexicalDiffCell | null;
+    oldCell: LexicalDiffCell | null;
+}
+export interface LexicalDiffBlockRenderContext {
+    baseBlockType: string | null;
+    blockType: string | null;
+    newBaseBlockType: string | null;
+    newBlockType: string | null;
+    oldBaseBlockType: string | null;
+    oldBlockType: string | null;
+    renderDefaultNew: () => ReactNode;
+    renderDefaultOld: () => ReactNode;
+    row: LexicalDiffRow;
+}
+export type LexicalDiffBlockRenderer = (context: LexicalDiffBlockRenderContext) => {
+    new?: ReactNode;
+    old?: ReactNode;
+} | null;

package/es/renderer/diff/types.js

@@ -0,0 +1 @@
+export {};

package/es/renderer/index.d.ts

@@ -1,4 +1,7 @@
+export type { LexicalDiffBlockRenderContext, LexicalDiffBlockRenderer, LexicalDiffCell, LexicalDiffRow, LexicalDiffRowKind, } from './diff/types';
 export { loadLanguage } from './engine/shiki';
+export type { LexicalDiffProps } from './LexicalDiff';
+export { LexicalDiff } from './LexicalDiff';
 export { LexicalRenderer } from './LexicalRenderer';
 export { rendererNodes } from './nodes';
 export { createDefaultRenderers } from './renderers';

package/es/renderer/index.js

@@ -1,4 +1,5 @@
 export { loadLanguage } from "./engine/shiki";
+export { LexicalDiff } from "./LexicalDiff";
 export { LexicalRenderer } from "./LexicalRenderer";
 export { rendererNodes } from "./nodes";
 export { createDefaultRenderers } from "./renderers";

package/es/renderer/renderers/codeblock.js

@@ -13,6 +13,7 @@ import { createStaticStyles } from 'antd-style';
 import { Check, ChevronDown, ChevronRight, CopyIcon } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { highlightCode } from "../engine/shiki";
+import { renderMermaidBlock } from "./mermaid";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStaticStyles(function (_ref) {
@@ -150,6 +151,10 @@ function CodeBlockRenderer(_ref3) {
   });
 }
 export function renderCodeBlock(node, key, children) {
+  var language = (node.language || '').toLowerCase();
+  if (language === 'mermaid') {
+    return renderMermaidBlock(node, key);
+  }
   return /*#__PURE__*/_jsx(CodeBlockRenderer, {
     codeChildren: children,
     node: node

package/es/renderer/renderers/mermaid.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare function renderMermaidBlock(node: Record<string, any>, key: string): ReactNode;

package/es/renderer/renderers/mermaid.js

@@ -0,0 +1,18 @@
+'use client';
+
+import { Mermaid } from '@lobehub/ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function renderMermaidBlock(node, key) {
+  var code = node.code || '';
+  return /*#__PURE__*/_jsx(Mermaid, {
+    animated: false,
+    defaultExpand: true,
+    fullFeatured: true,
+    style: {
+      width: '100%'
+    },
+    theme: "lobe-theme",
+    variant: "filled",
+    children: code
+  }, key);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -86,6 +86,7 @@
     "katex": "^0.16.27",
     "lexical": "^0.39.0",
     "lucide-react": "^0.562.0",
+    "mermaid": "^11.13.0",
     "polished": "^4.3.1",
     "re-resizable": "^6.11.2",
     "react-error-boundary": "^6.0.2",