@jvs-milkdown/crepe 1.2.12 → 1.2.14

package/lib/cjs/index.js

@@ -26,6 +26,7 @@ var codeBlock = require('@jvs-milkdown/kit/component/code-block');
 var codemirror = require('codemirror');
 var cursor$1 = require('@jvs-milkdown/kit/plugin/cursor');
 var prosemirrorVirtualCursor = require('prosemirror-virtual-cursor');
+var diffBlock = require('@jvs-milkdown/kit/component/diff-block');
 var tables = require('@jvs-milkdown/kit/prose/tables');
 var clsx = require('clsx');
 var linkTooltip$1 = require('@jvs-milkdown/kit/component/link-tooltip');
@@ -33,6 +34,7 @@ var view$1 = require('@jvs-milkdown/kit/prose/view');
 var imageInline = require('@jvs-milkdown/kit/component/image-inline');
 var state$1 = require('@jvs-milkdown/prose/state');
 var utils$1 = require('@jvs-milkdown/utils');
+var Diff = require('diff');
 var tooltip = require('@jvs-milkdown/kit/plugin/tooltip');
 var history = require('@jvs-milkdown/kit/prose/history');
 var keymap = require('@jvs-milkdown/kit/prose/keymap');
@@ -48,6 +50,25 @@ var listener = require('@jvs-milkdown/kit/plugin/listener');
 var trailing = require('@jvs-milkdown/kit/plugin/trailing');
 var upload = require('@jvs-milkdown/kit/plugin/upload');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Diff__namespace = /*#__PURE__*/_interopNamespaceDefault(Diff);
+
 var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["CodeMirror"] = "code-mirror";
   CrepeFeature2["ListItem"] = "list-item";
@@ -61,6 +82,8 @@ var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["Table"] = "table";
   CrepeFeature2["Latex"] = "latex";
   CrepeFeature2["Attachment"] = "attachment";
+  CrepeFeature2["InlineDiff"] = "inline-diff";
+  CrepeFeature2["DiffBlock"] = "diff-block";
   return CrepeFeature2;
 })(CrepeFeature || {});
 const defaultFeatures = {
@@ -75,7 +98,9 @@ const defaultFeatures = {
   ["code-mirror" /* CodeMirror */]: true,
   ["table" /* Table */]: true,
   ["latex" /* Latex */]: true,
-  ["attachment" /* Attachment */]: true
+  ["attachment" /* Attachment */]: true,
+  ["inline-diff" /* InlineDiff */]: false,
+  ["diff-block" /* DiffBlock */]: true
 };
 
 const alignCenterIcon = `
@@ -441,6 +466,7 @@ const removeIcon = `
   >
     <path
       d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+      fill="#363B4C"
     />
   </svg>
 `;
@@ -810,7 +836,10 @@ const zhCN = {
   "shortcuts.hardBreak": "\u6362\u884C",
   "shortcuts.history": "\u5386\u53F2\u8BB0\u5F55",
   "shortcuts.undo": "\u64A4\u9500",
-  "shortcuts.redo": "\u91CD\u505A"
+  "shortcuts.redo": "\u91CD\u505A",
+  // inline-diff
+  "inlineDiff.accept": "\u63A5\u53D7",
+  "inlineDiff.reject": "\u62D2\u7EDD"
 };
 const enUS = {
   "handle.add": "Add content",
@@ -952,7 +981,9 @@ const enUS = {
   "shortcuts.hardBreak": "Hard Break",
   "shortcuts.history": "History",
   "shortcuts.undo": "Undo",
-  "shortcuts.redo": "Redo"
+  "shortcuts.redo": "Redo",
+  "inlineDiff.accept": "Accept",
+  "inlineDiff.reject": "Reject"
 };
 const translationsCtx = ctx.createSlice(
   {
@@ -1389,22 +1420,22 @@ function isInList(selection) {
   return (type == null ? void 0 : type.name) === "list_item";
 }
 
-var __typeError$6 = (msg) => {
+var __typeError$7 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
+var __privateGet$7 = (obj, member, getter) => (__accessCheck$7(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$7 = (obj, member, value, setter) => (__accessCheck$7(obj, member, "write to private field"), member.set(obj, value), value);
 var _groups, _getGroupInstance;
 class GroupBuilder {
   constructor() {
-    __privateAdd$6(this, _groups, []);
+    __privateAdd$7(this, _groups, []);
     this.clear = () => {
-      __privateSet$6(this, _groups, []);
+      __privateSet$7(this, _groups, []);
       return this;
     };
-    __privateAdd$6(this, _getGroupInstance, (group) => {
+    __privateAdd$7(this, _getGroupInstance, (group) => {
       const groupInstance = {
         group,
         addItem: (key, item) => {
@@ -1426,16 +1457,16 @@ class GroupBuilder {
         label,
         items
       };
-      __privateGet$6(this, _groups).push(group);
-      return __privateGet$6(this, _getGroupInstance).call(this, group);
+      __privateGet$7(this, _groups).push(group);
+      return __privateGet$7(this, _getGroupInstance).call(this, group);
     };
     this.getGroup = (key) => {
-      const group = __privateGet$6(this, _groups).find((group2) => group2.key === key);
+      const group = __privateGet$7(this, _groups).find((group2) => group2.key === key);
       if (!group) throw new Error(`Group with key ${key} not found`);
-      return __privateGet$6(this, _getGroupInstance).call(this, group);
+      return __privateGet$7(this, _getGroupInstance).call(this, group);
     };
     this.build = () => {
-      return __privateGet$6(this, _groups);
+      return __privateGet$7(this, _groups);
     };
   }
 }
@@ -3587,14 +3618,14 @@ const Menu = vue.defineComponent({
   }
 });
 
-var __typeError$5 = (msg) => {
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$4, _app$4, _filter, _slashProvider, _activeKey, _view$1, _programmaticallyPos, _mode, _hideTimeout, _isMenuHovered, _keepOpenUntilClickOutside;
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$4, _app$4, _filter, _slashProvider, _activeKey, _view$2, _programmaticallyPos, _mode, _hideTimeout, _isMenuHovered, _keepOpenUntilClickOutside;
 const menu = slash.slashFactory("CREPE_MENU");
 function configureMenu(ctx, config) {
   ctx.set(menu.key, {
@@ -3603,50 +3634,50 @@ function configureMenu(ctx, config) {
 }
 class MenuView {
   constructor(ctx, view, config) {
-    __privateAdd$5(this, _content$4);
-    __privateAdd$5(this, _app$4);
-    __privateAdd$5(this, _filter);
-    __privateAdd$5(this, _slashProvider);
-    __privateAdd$5(this, _activeKey);
-    __privateAdd$5(this, _view$1);
-    __privateAdd$5(this, _programmaticallyPos, null);
-    __privateAdd$5(this, _mode, null);
-    __privateAdd$5(this, _hideTimeout);
-    __privateAdd$5(this, _isMenuHovered, false);
-    __privateAdd$5(this, _keepOpenUntilClickOutside, false);
+    __privateAdd$6(this, _content$4);
+    __privateAdd$6(this, _app$4);
+    __privateAdd$6(this, _filter);
+    __privateAdd$6(this, _slashProvider);
+    __privateAdd$6(this, _activeKey);
+    __privateAdd$6(this, _view$2);
+    __privateAdd$6(this, _programmaticallyPos, null);
+    __privateAdd$6(this, _mode, null);
+    __privateAdd$6(this, _hideTimeout);
+    __privateAdd$6(this, _isMenuHovered, false);
+    __privateAdd$6(this, _keepOpenUntilClickOutside, false);
     this.onHoverDelayHide = () => {
-      window.clearTimeout(__privateGet$5(this, _hideTimeout));
-      __privateSet$5(this, _hideTimeout, window.setTimeout(() => {
-        if (!__privateGet$5(this, _isMenuHovered) && !__privateGet$5(this, _keepOpenUntilClickOutside) && __privateGet$5(this, _programmaticallyPos) !== null) {
+      window.clearTimeout(__privateGet$6(this, _hideTimeout));
+      __privateSet$6(this, _hideTimeout, window.setTimeout(() => {
+        if (!__privateGet$6(this, _isMenuHovered) && !__privateGet$6(this, _keepOpenUntilClickOutside) && __privateGet$6(this, _programmaticallyPos) !== null) {
           this.hide();
         }
       }, 150));
     };
     this.cancelHide = () => {
-      window.clearTimeout(__privateGet$5(this, _hideTimeout));
+      window.clearTimeout(__privateGet$6(this, _hideTimeout));
     };
     this.update = (view) => {
-      __privateGet$5(this, _slashProvider).update(view);
+      __privateGet$6(this, _slashProvider).update(view);
     };
     this.show = (pos, isClick = false, triggerElement, mode = "block") => {
       if (isClick) {
-        __privateSet$5(this, _keepOpenUntilClickOutside, true);
+        __privateSet$6(this, _keepOpenUntilClickOutside, true);
       } else {
-        __privateSet$5(this, _keepOpenUntilClickOutside, false);
+        __privateSet$6(this, _keepOpenUntilClickOutside, false);
       }
-      __privateSet$5(this, _programmaticallyPos, pos);
-      __privateSet$5(this, _mode, mode);
-      __privateGet$5(this, _filter).value = "";
-      const node = __privateGet$5(this, _view$1).state.doc.nodeAt(pos);
+      __privateSet$6(this, _programmaticallyPos, pos);
+      __privateSet$6(this, _mode, mode);
+      __privateGet$6(this, _filter).value = "";
+      const node = __privateGet$6(this, _view$2).state.doc.nodeAt(pos);
       if (node) {
-        __privateGet$5(this, _activeKey).value = getBlockKey(node);
+        __privateGet$6(this, _activeKey).value = getBlockKey(node);
       } else {
-        __privateGet$5(this, _activeKey).value = "text";
+        __privateGet$6(this, _activeKey).value = "text";
       }
-      __privateGet$5(this, _slashProvider).show();
-      __privateGet$5(this, _content$4).dataset.mode = mode;
+      __privateGet$6(this, _slashProvider).show();
+      __privateGet$6(this, _content$4).dataset.mode = mode;
       if (triggerElement) {
-        void dom.computePosition(triggerElement, __privateGet$5(this, _content$4), {
+        void dom.computePosition(triggerElement, __privateGet$6(this, _content$4), {
           placement: "bottom-start",
           middleware: [
             dom.flip(),
@@ -3667,7 +3698,7 @@ class MenuView {
             })
           ]
         }).then(({ x, y }) => {
-          Object.assign(__privateGet$5(this, _content$4).style, {
+          Object.assign(__privateGet$6(this, _content$4).style, {
             left: `${x}px`,
             top: `${y}px`
           });
@@ -3675,25 +3706,25 @@ class MenuView {
       }
     };
     this.hide = () => {
-      __privateSet$5(this, _programmaticallyPos, null);
-      __privateSet$5(this, _mode, null);
-      __privateGet$5(this, _content$4).removeAttribute("data-mode");
+      __privateSet$6(this, _programmaticallyPos, null);
+      __privateSet$6(this, _mode, null);
+      __privateGet$6(this, _content$4).removeAttribute("data-mode");
       this.cancelHide();
-      __privateGet$5(this, _slashProvider).hide();
+      __privateGet$6(this, _slashProvider).hide();
     };
     this.destroy = () => {
-      __privateGet$5(this, _slashProvider).destroy();
-      __privateGet$5(this, _app$4).unmount();
-      __privateGet$5(this, _content$4).remove();
+      __privateGet$6(this, _slashProvider).destroy();
+      __privateGet$6(this, _app$4).unmount();
+      __privateGet$6(this, _content$4).remove();
     };
-    __privateSet$5(this, _view$1, view);
+    __privateSet$6(this, _view$2, view);
     const content = document.createElement("div");
     content.classList.add("milkdown-slash-menu");
     const show = vue.ref(false);
     const filter = vue.ref("");
-    __privateSet$5(this, _filter, filter);
+    __privateSet$6(this, _filter, filter);
     const activeKey = vue.ref("text");
-    __privateSet$5(this, _activeKey, activeKey);
+    __privateSet$6(this, _activeKey, activeKey);
     const hide = this.hide;
     const app = vue.createApp(Menu, {
       ctx,
@@ -3703,20 +3734,20 @@ class MenuView {
       hide,
       activeKey
     });
-    __privateSet$5(this, _app$4, app);
+    __privateSet$6(this, _app$4, app);
     app.mount(content);
-    __privateSet$5(this, _content$4, content);
-    __privateGet$5(this, _content$4).addEventListener("pointerenter", () => {
-      __privateSet$5(this, _isMenuHovered, true);
+    __privateSet$6(this, _content$4, content);
+    __privateGet$6(this, _content$4).addEventListener("pointerenter", () => {
+      __privateSet$6(this, _isMenuHovered, true);
       this.cancelHide();
     });
-    __privateGet$5(this, _content$4).addEventListener("pointerleave", () => {
-      __privateSet$5(this, _isMenuHovered, false);
+    __privateGet$6(this, _content$4).addEventListener("pointerleave", () => {
+      __privateSet$6(this, _isMenuHovered, false);
       this.onHoverDelayHide();
     });
     const self = this;
-    __privateSet$5(this, _slashProvider, new slash.SlashProvider({
-      content: __privateGet$5(this, _content$4),
+    __privateSet$6(this, _slashProvider, new slash.SlashProvider({
+      content: __privateGet$6(this, _content$4),
       debounce: 20,
       shouldShow(view2) {
         if (isInCodeBlock(view2.state.selection) || isInList(view2.state.selection))
@@ -3729,13 +3760,13 @@ class MenuView {
         if (!isSelectionAtEndOfNode(view2.state.selection)) {
           return false;
         }
-        const pos = __privateGet$5(self, _programmaticallyPos);
+        const pos = __privateGet$6(self, _programmaticallyPos);
         filter.value = currentText.startsWith("/") ? currentText.slice(1) : currentText;
         if (typeof pos === "number") {
           const maxSize = view2.state.doc.nodeSize - 2;
           const validPos = Math.min(pos, maxSize);
           if (view2.state.doc.resolve(validPos).node() !== view2.state.doc.resolve(view2.state.selection.from).node()) {
-            __privateSet$5(self, _programmaticallyPos, null);
+            __privateSet$6(self, _programmaticallyPos, null);
             return false;
           }
           return true;
@@ -3745,12 +3776,12 @@ class MenuView {
       },
       offset: 10
     }));
-    __privateGet$5(this, _slashProvider).onShow = () => {
+    __privateGet$6(this, _slashProvider).onShow = () => {
       show.value = true;
     };
-    __privateGet$5(this, _slashProvider).onHide = () => {
+    __privateGet$6(this, _slashProvider).onHide = () => {
       show.value = false;
-      __privateSet$5(this, _keepOpenUntilClickOutside, false);
+      __privateSet$6(this, _keepOpenUntilClickOutside, false);
     };
     this.update(view);
     ctx.set(menuAPI.key, {
@@ -3761,10 +3792,10 @@ class MenuView {
       hide: () => this.hide(),
       onHoverDelayHide: () => this.onHoverDelayHide(),
       cancelHide: () => this.cancelHide(),
-      isProgrammatic: () => __privateGet$5(this, _programmaticallyPos) !== null,
-      getPos: () => __privateGet$5(this, _programmaticallyPos),
+      isProgrammatic: () => __privateGet$6(this, _programmaticallyPos) !== null,
+      getPos: () => __privateGet$6(this, _programmaticallyPos),
       isShow: () => show.value,
-      getMode: () => __privateGet$5(this, _mode)
+      getMode: () => __privateGet$6(this, _mode)
     });
   }
 }
@@ -3773,7 +3804,7 @@ _app$4 = new WeakMap();
 _filter = new WeakMap();
 _slashProvider = new WeakMap();
 _activeKey = new WeakMap();
-_view$1 = new WeakMap();
+_view$2 = new WeakMap();
 _programmaticallyPos = new WeakMap();
 _mode = new WeakMap();
 _hideTimeout = new WeakMap();
@@ -3932,25 +3963,25 @@ const BlockHandle = vue.defineComponent({
   }
 });
 
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$3, _provider$1, _state, _app$3, _ctx, _syncIcon;
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$3, _provider$1, _state, _app$3, _ctx$1, _syncIcon;
 class BlockHandleView {
   constructor(ctx, config) {
-    __privateAdd$4(this, _content$3);
-    __privateAdd$4(this, _provider$1);
-    __privateAdd$4(this, _state, vue.reactive({ icon: textIcon }));
-    __privateAdd$4(this, _app$3);
-    __privateAdd$4(this, _ctx);
+    __privateAdd$5(this, _content$3);
+    __privateAdd$5(this, _provider$1);
+    __privateAdd$5(this, _state, vue.reactive({ icon: textIcon }));
+    __privateAdd$5(this, _app$3);
+    __privateAdd$5(this, _ctx$1);
     this.update = () => {
-      __privateGet$4(this, _provider$1).update();
-      if (__privateGet$4(this, _provider$1).active) {
-        const node = __privateGet$4(this, _provider$1).active.node;
+      __privateGet$5(this, _provider$1).update();
+      if (__privateGet$5(this, _provider$1).active) {
+        const node = __privateGet$5(this, _provider$1).active.node;
         let hasMediaChild = false;
         if (node.type.name === "paragraph") {
           node.content.forEach((child) => {
@@ -3962,24 +3993,24 @@ class BlockHandleView {
         const isMedia = node.type.name.includes("image") || node.type.name.includes("attachment") || node.type.name === "hr" || node.type.name.includes("math") || hasMediaChild;
         const isEmpty = node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
         if (isEmpty) {
-          __privateGet$4(this, _content$3).classList.add("empty-block");
+          __privateGet$5(this, _content$3).classList.add("empty-block");
         } else {
-          __privateGet$4(this, _content$3).classList.remove("empty-block");
+          __privateGet$5(this, _content$3).classList.remove("empty-block");
         }
-        __privateGet$4(this, _syncIcon).call(this, node);
+        __privateGet$5(this, _syncIcon).call(this, node);
       } else {
-        __privateGet$4(this, _content$3).classList.remove("empty-block");
-        __privateGet$4(this, _state).icon = textIcon;
+        __privateGet$5(this, _content$3).classList.remove("empty-block");
+        __privateGet$5(this, _state).icon = textIcon;
       }
     };
-    __privateAdd$4(this, _syncIcon, (node) => {
+    __privateAdd$5(this, _syncIcon, (node) => {
       var _a;
       if (node.type.name.includes("image")) {
-        __privateGet$4(this, _state).icon = imageIcon;
+        __privateGet$5(this, _state).icon = imageIcon;
         return;
       }
       if (node.type.name.includes("attachment")) {
-        __privateGet$4(this, _state).icon = fileLinkIcon;
+        __privateGet$5(this, _state).icon = fileLinkIcon;
         return;
       }
       switch (node.type.name) {
@@ -3994,87 +4025,87 @@ class BlockHandleView {
             h5Icon,
             h6Icon
           ];
-          __privateGet$4(this, _state).icon = (_a = headingIcons[level]) != null ? _a : textIcon;
+          __privateGet$5(this, _state).icon = (_a = headingIcons[level]) != null ? _a : textIcon;
           break;
         }
         case "blockquote":
-          __privateGet$4(this, _state).icon = quoteIcon;
+          __privateGet$5(this, _state).icon = quoteIcon;
           break;
         case "code_block":
-          __privateGet$4(this, _state).icon = codeIcon;
+          __privateGet$5(this, _state).icon = codeIcon;
           break;
         case "math_display":
         case "math_inline":
-          __privateGet$4(this, _state).icon = functionsIcon;
+          __privateGet$5(this, _state).icon = functionsIcon;
           break;
         case "hr":
-          __privateGet$4(this, _state).icon = dividerIcon;
+          __privateGet$5(this, _state).icon = dividerIcon;
           break;
         case "table":
-          __privateGet$4(this, _state).icon = tableIcon;
+          __privateGet$5(this, _state).icon = tableIcon;
           break;
         case "list_item":
           if (node.attrs.checked != null) {
-            __privateGet$4(this, _state).icon = todoListIcon;
+            __privateGet$5(this, _state).icon = todoListIcon;
           } else {
-            __privateGet$4(this, _state).icon = bulletListIcon;
+            __privateGet$5(this, _state).icon = bulletListIcon;
           }
           break;
         case "bullet_list":
-          __privateGet$4(this, _state).icon = bulletListIcon;
+          __privateGet$5(this, _state).icon = bulletListIcon;
           break;
         case "ordered_list":
-          __privateGet$4(this, _state).icon = orderedListIcon;
+          __privateGet$5(this, _state).icon = orderedListIcon;
           break;
         default:
-          __privateGet$4(this, _state).icon = textIcon;
+          __privateGet$5(this, _state).icon = textIcon;
       }
     });
     this.destroy = () => {
-      __privateGet$4(this, _provider$1).destroy();
-      __privateGet$4(this, _content$3).remove();
-      __privateGet$4(this, _app$3).unmount();
+      __privateGet$5(this, _provider$1).destroy();
+      __privateGet$5(this, _content$3).remove();
+      __privateGet$5(this, _app$3).unmount();
     };
     this.onAdd = (el) => {
-      const ctx = __privateGet$4(this, _ctx);
+      const ctx = __privateGet$5(this, _ctx$1);
       const view = ctx.get(core.editorViewCtx);
       if (!view.hasFocus()) view.focus();
-      const active = __privateGet$4(this, _provider$1).active;
+      const active = __privateGet$5(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       ctx.get(menuAPI.key).show($pos.pos, true, el, "list");
     };
     this.onOpenMenu = (el) => {
-      const ctx = __privateGet$4(this, _ctx);
-      const active = __privateGet$4(this, _provider$1).active;
+      const ctx = __privateGet$5(this, _ctx$1);
+      const active = __privateGet$5(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       ctx.get(menuAPI.key).show($pos.pos, true, el, "block");
     };
     this.onHoverAdd = (el) => {
-      const ctx = __privateGet$4(this, _ctx);
-      const active = __privateGet$4(this, _provider$1).active;
+      const ctx = __privateGet$5(this, _ctx$1);
+      const active = __privateGet$5(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       ctx.get(menuAPI.key).show($pos.pos, false, el, "list");
     };
     this.onLeaveAdd = () => {
-      const ctx = __privateGet$4(this, _ctx);
+      const ctx = __privateGet$5(this, _ctx$1);
       ctx.get(menuAPI.key).onHoverDelayHide();
     };
     this.onHoverMenu = (el) => {
-      const ctx = __privateGet$4(this, _ctx);
-      const active = __privateGet$4(this, _provider$1).active;
+      const ctx = __privateGet$5(this, _ctx$1);
+      const active = __privateGet$5(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       ctx.get(menuAPI.key).show($pos.pos, false, el, "block");
     };
     this.onLeaveMenu = () => {
-      const ctx = __privateGet$4(this, _ctx);
+      const ctx = __privateGet$5(this, _ctx$1);
       ctx.get(menuAPI.key).onHoverDelayHide();
     };
     var _a, _b, _c;
-    __privateSet$4(this, _ctx, ctx);
+    __privateSet$5(this, _ctx$1, ctx);
     const content = document.createElement("div");
     content.classList.add("milkdown-block-handle");
     document.querySelectorAll(".milkdown-block-handle").forEach((el) => {
@@ -4089,14 +4120,14 @@ class BlockHandleView {
       onLeaveMenu: this.onLeaveMenu,
       addIcon: (_a = config == null ? void 0 : config.handleAddIcon) != null ? _a : plusIcon,
       handleIcon: (_b = config == null ? void 0 : config.handleDragIcon) != null ? _b : menuIcon,
-      ctx: __privateGet$4(this, _ctx),
-      state: __privateGet$4(this, _state)
+      ctx: __privateGet$5(this, _ctx$1),
+      state: __privateGet$5(this, _state)
     });
     app.mount(content);
-    __privateSet$4(this, _app$3, app);
-    __privateSet$4(this, _content$3, content);
+    __privateSet$5(this, _app$3, app);
+    __privateSet$5(this, _content$3, content);
     const blockProviderOptions = (_c = config == null ? void 0 : config.blockHandle) != null ? _c : {};
-    __privateSet$4(this, _provider$1, new block.BlockProvider({
+    __privateSet$5(this, _provider$1, new block.BlockProvider({
       ctx,
       content,
       getOffset: () => 16,
@@ -4113,11 +4144,11 @@ class BlockHandleView {
         const isMedia = node.type.name.includes("image") || node.type.name.includes("attachment") || node.type.name === "hr" || node.type.name.includes("math") || hasMediaChild;
         const isEmpty = node.textContent.length === 0 && node.content.size <= 2 && !isMedia;
         if (isEmpty) {
-          __privateGet$4(this, _content$3).classList.add("empty-block");
+          __privateGet$5(this, _content$3).classList.add("empty-block");
         } else {
-          __privateGet$4(this, _content$3).classList.remove("empty-block");
+          __privateGet$5(this, _content$3).classList.remove("empty-block");
         }
-        __privateGet$4(this, _syncIcon).call(this, active.node);
+        __privateGet$5(this, _syncIcon).call(this, active.node);
         let totalDescendant = 0;
         active.node.descendants((node2) => {
           totalDescendant += node2.childCount;
@@ -4149,7 +4180,7 @@ _content$3 = new WeakMap();
 _provider$1 = new WeakMap();
 _state = new WeakMap();
 _app$3 = new WeakMap();
-_ctx = new WeakMap();
+_ctx$1 = new WeakMap();
 _syncIcon = new WeakMap();
 function configureBlockHandle(ctx, config) {
   ctx.set(block.blockConfig.key, {
@@ -4296,6 +4327,50 @@ const cursor = (editor, config) => {
   editor.use(utils.$prose(() => virtualCursor));
 };
 
+const diffBlockFeature = (editor, config = {}) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.DiffBlock)).config((ctx) => {
+    const { languages = [], theme } = config;
+    const extensions = [codemirror.basicSetup];
+    if (theme) {
+      extensions.push(theme);
+    } else {
+      extensions.push(themeOneDark.oneDark);
+    }
+    if (config.extensions) {
+      extensions.push(...config.extensions);
+    }
+    ctx.update(diffBlock.diffBlockConfig.key, (defaultConfig) => ({
+      ...defaultConfig,
+      extensions,
+      languages: languages.length > 0 ? languages : defaultConfig.languages,
+      renderLanguage: config.renderLanguage || defaultConfig.renderLanguage
+    }));
+  }).use(diffBlock.diffBlock);
+};
+
+const listeners = /* @__PURE__ */ new Set();
+let _popupCount = 0;
+function getIsAnyPopupOpen() {
+  return _popupCount > 0;
+}
+function addPopupChangeListener(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function incrementPopupCount() {
+  const wasZero = _popupCount === 0;
+  _popupCount++;
+  if (wasZero) {
+    listeners.forEach((fn) => fn());
+  }
+}
+function decrementPopupCount() {
+  _popupCount = Math.max(0, _popupCount - 1);
+  if (_popupCount === 0) {
+    listeners.forEach((fn) => fn());
+  }
+}
+
 const remarkHighlightMarkPlugin = utils.$remark(
   "remarkHighlightMark",
   () => function() {
@@ -5392,6 +5467,8 @@ const Toolbar = vue.defineComponent({
           const {
             marks: savedMarks,
             align: savedAlign,
+            blockType: savedBlockType,
+            blockAttrs: savedBlockAttrs,
             isPersistent
           } = formatPainterState.value;
           let applied = false;
@@ -5413,6 +5490,30 @@ const Toolbar = vue.defineComponent({
                 }
               );
             }
+            if (savedBlockType) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node, pos) => {
+                  if (node.type.name === "paragraph") {
+                    tr.setNodeMarkup(
+                      pos,
+                      curState.schema.nodes[savedBlockType],
+                      {
+                        ...savedBlockAttrs,
+                        ...savedAlign ? { align: savedAlign } : {}
+                      }
+                    );
+                  } else if (node.type.name === "heading" && savedBlockAttrs) {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      ...savedBlockAttrs,
+                      ...savedAlign ? { align: savedAlign } : {}
+                    });
+                  }
+                }
+              );
+            }
             dispatch(tr);
             applied = true;
           } else {
@@ -5445,6 +5546,22 @@ const Toolbar = vue.defineComponent({
                 });
               }
             }
+            if (savedBlockType) {
+              const pos = curSelection.$from.before(curSelection.$from.depth);
+              const node = curState.doc.nodeAt(pos);
+              if (node && node.type.name === "paragraph") {
+                tr.setNodeMarkup(pos, curState.schema.nodes[savedBlockType], {
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              } else if (node && node.type.name === "heading" && savedBlockAttrs) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              }
+            }
             tr.setStoredMarks(savedMarks);
             dispatch(tr);
             applied = true;
@@ -5493,7 +5610,22 @@ const Toolbar = vue.defineComponent({
         }
       }
       align = foundAlign;
-      formatPainterState.value = { marks, align, isPersistent };
+      let blockType = null;
+      let blockAttrs = null;
+      {
+        const parent = selection.$from.parent;
+        if (parent.type.name === "heading") {
+          blockType = "heading";
+          blockAttrs = { level: parent.attrs.level };
+        }
+      }
+      formatPainterState.value = {
+        marks,
+        align,
+        blockType,
+        blockAttrs,
+        isPersistent
+      };
       document.removeEventListener("pointerup", formatPainterHandler);
       setTimeout(() => {
         document.addEventListener("pointerup", formatPainterHandler);
@@ -5546,6 +5678,13 @@ const Toolbar = vue.defineComponent({
     const showOverflowMenu = vue.ref(false);
     const overflowMenuPos = vue.ref({ top: 0 });
     const cachedWidths = /* @__PURE__ */ new Map();
+    const anyFixedPopup = vue.computed(
+      () => !!isFixed && (showBlockMenu.value || showAlignMenu.value || showColorMenu.value || showFontFamilyMenu.value || showFontSizeMenu.value || showTableMenu.value || showOverflowMenu.value)
+    );
+    vue.watch(anyFixedPopup, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
+    });
     const getMenuLeftPos = (rect, menuWidth) => {
       let left = rect.left;
       if (left + menuWidth > window.innerWidth) {
@@ -5588,7 +5727,8 @@ const Toolbar = vue.defineComponent({
           containerWidth = container.clientWidth;
         }
       } else {
-        containerWidth = container.clientWidth;
+        const view = ctx.get(core.editorViewCtx);
+        containerWidth = view.dom.clientWidth - 32;
       }
       if (containerWidth === lastContainerWidth) {
         return;
@@ -5782,6 +5922,7 @@ const Toolbar = vue.defineComponent({
       if (hideFontFamilyTimer) clearTimeout(hideFontFamilyTimer);
       if (hideFontSizeTimer) clearTimeout(hideFontSizeTimer);
       if (hideTableTimer) clearTimeout(hideTableTimer);
+      if (anyFixedPopup.value) decrementPopupCount();
     });
     let overflowResizeObserver = null;
     let overflowSetupDone = false;
@@ -6220,13 +6361,11 @@ const Toolbar = vue.defineComponent({
           });
         }
       });
-      const nonHeadingGroups = toolbarGroupInfo.value.filter(
-        (group) => {
-          if (group.key === "heading") return false;
-          if (props.isFixed && group.key === "function") return false;
-          return true;
-        }
-      );
+      const nonHeadingGroups = toolbarGroupInfo.value.filter((group) => {
+        if (group.key === "heading") return false;
+        if (props.isFixed && group.key === "function") return false;
+        return true;
+      });
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
       return /* @__PURE__ */ vue.h(
@@ -7522,7 +7661,7 @@ const createViewMenuState = () => vue.reactive({
   outlineVisible: false,
   outlinePosition: "left",
   outlineWidth: 250,
-  documentBackground: null,
+  documentBackground: "#FFFFFF",
   showTitle: false,
   showCover: false,
   coverUrl: "",
@@ -7622,10 +7761,15 @@ const MenuBar = vue.defineComponent({
     vue.onUnmounted(() => {
       document.removeEventListener("click", closeMenu);
       if (rafId) cancelAnimationFrame(rafId);
+      if (showMenu.value) decrementPopupCount();
+    });
+    vue.watch(showMenu, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
     });
     const viewState = vue.computed(() => props.ctx.get(viewMenuStateCtx.key));
     const bgColors = [
-      { name: "\u9ED8\u8BA4", value: null },
+      { name: "\u767D\u8272", value: "#FFFFFF" },
       { name: "\u6D45\u7070", value: "#F7F7F5" },
       { name: "\u6D45\u68D5", value: "#F4EEDB" },
       { name: "\u6D45\u6A59", value: "#FBECDD" },
@@ -8113,7 +8257,7 @@ const rightGroups = [
     titleKey: "shortcuts.history",
     items: [
       { labelKey: "shortcuts.undo", keys: ["Mod+z"] },
-      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+z"] }
+      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+Z"] }
     ]
   }
 ];
@@ -9258,11 +9402,11 @@ const OutlinePanel = vue.defineComponent({
           "div",
           {
             style: {
-              padding: "20px 16px",
+              padding: "12px 16px",
               fontWeight: "bold",
               fontSize: "14px",
               color: "var(--crepe-color-on-surface)",
-              borderBottom: "1px solid var(--crepe-color-outline-variant)",
+              borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))",
               display: "flex",
               justifyContent: "space-between",
               alignItems: "center"
@@ -9434,14 +9578,14 @@ const OutlinePanel = vue.defineComponent({
   }
 });
 
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _view;
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver$1, _updateOutlineGeometry, _scrollContainers$1, _onDblClick, _view$1, _editorContainer;
 const fixedToolbarConfig = utils.$ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -9449,88 +9593,127 @@ const fixedToolbarConfig = utils.$ctx(
 const fixedToolbarKey = new state.PluginKey("MILKDOWN_FIXED_TOOLBAR");
 class FixedToolbarView {
   constructor(ctx, view) {
-    __privateAdd$3(this, _content$2);
-    __privateAdd$3(this, _app$2);
-    __privateAdd$3(this, _headerContent);
-    __privateAdd$3(this, _headerApp);
-    __privateAdd$3(this, _outlineContent);
-    __privateAdd$3(this, _outlineApp);
-    __privateAdd$3(this, _watcher);
-    __privateAdd$3(this, _selection$1);
-    __privateAdd$3(this, _show$1, vue.ref(true));
-    __privateAdd$3(this, _resizeObserver);
-    __privateAdd$3(this, _updateOutlineGeometry);
-    __privateAdd$3(this, _scrollContainers, []);
-    __privateAdd$3(this, _view);
+    __privateAdd$4(this, _content$2);
+    __privateAdd$4(this, _app$2);
+    __privateAdd$4(this, _headerContent);
+    __privateAdd$4(this, _headerApp);
+    __privateAdd$4(this, _outlineContent);
+    __privateAdd$4(this, _outlineApp);
+    __privateAdd$4(this, _watcher);
+    __privateAdd$4(this, _selection$1);
+    __privateAdd$4(this, _show$1, vue.ref(true));
+    __privateAdd$4(this, _resizeObserver$1);
+    __privateAdd$4(this, _updateOutlineGeometry);
+    __privateAdd$4(this, _scrollContainers$1, []);
+    __privateAdd$4(this, _onDblClick);
+    __privateAdd$4(this, _view$1);
+    __privateAdd$4(this, _editorContainer);
     this.update = (view) => {
-      __privateGet$3(this, _selection$1).value = view.state.selection;
+      __privateGet$4(this, _selection$1).value = view.state.selection;
     };
     this.destroy = () => {
-      if (__privateGet$3(this, _watcher)) __privateGet$3(this, _watcher).call(this);
-      if (__privateGet$3(this, _resizeObserver)) __privateGet$3(this, _resizeObserver).disconnect();
-      window.removeEventListener("resize", __privateGet$3(this, _updateOutlineGeometry));
-      window.removeEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry), {
+      if (__privateGet$4(this, _watcher)) __privateGet$4(this, _watcher).call(this);
+      if (__privateGet$4(this, _onDblClick)) {
+        __privateGet$4(this, _view$1).dom.removeEventListener("dblclick", __privateGet$4(this, _onDblClick));
+      }
+      if (__privateGet$4(this, _resizeObserver$1)) __privateGet$4(this, _resizeObserver$1).disconnect();
+      window.removeEventListener("resize", __privateGet$4(this, _updateOutlineGeometry));
+      window.removeEventListener("scroll", __privateGet$4(this, _updateOutlineGeometry), {
         capture: true
       });
-      __privateGet$3(this, _scrollContainers).forEach((el) => {
-        el.removeEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry));
+      __privateGet$4(this, _scrollContainers$1).forEach((el) => {
+        el.removeEventListener("scroll", __privateGet$4(this, _updateOutlineGeometry));
       });
-      __privateSet$3(this, _scrollContainers, []);
-      __privateGet$3(this, _app$2).unmount();
-      __privateGet$3(this, _content$2).remove();
-      if (__privateGet$3(this, _headerApp)) __privateGet$3(this, _headerApp).unmount();
-      if (__privateGet$3(this, _headerContent)) __privateGet$3(this, _headerContent).remove();
-      if (__privateGet$3(this, _outlineApp)) __privateGet$3(this, _outlineApp).unmount();
-      if (__privateGet$3(this, _outlineContent)) __privateGet$3(this, _outlineContent).remove();
+      __privateSet$4(this, _scrollContainers$1, []);
+      __privateGet$4(this, _app$2).unmount();
+      __privateGet$4(this, _content$2).remove();
+      if (__privateGet$4(this, _headerApp)) __privateGet$4(this, _headerApp).unmount();
+      if (__privateGet$4(this, _headerContent)) __privateGet$4(this, _headerContent).remove();
+      if (__privateGet$4(this, _outlineApp)) __privateGet$4(this, _outlineApp).unmount();
+      if (__privateGet$4(this, _outlineContent)) __privateGet$4(this, _outlineContent).remove();
     };
-    __privateSet$3(this, _view, view);
+    __privateSet$4(this, _view$1, view);
     const config = ctx.get(fixedToolbarConfig.key);
     const content = document.createElement("div");
     content.className = "milkdown-fixed-toolbar";
-    __privateSet$3(this, _selection$1, vue.shallowRef(view.state.selection));
+    __privateSet$4(this, _selection$1, vue.shallowRef(view.state.selection));
     const app = vue.createApp(FixedToolbarComponent, {
       ctx,
       hide: () => {
       },
       // No-op for fixed toolbar
       config,
-      selection: __privateGet$3(this, _selection$1),
-      show: __privateGet$3(this, _show$1)
+      selection: __privateGet$4(this, _selection$1),
+      show: __privateGet$4(this, _show$1)
     });
     app.mount(content);
-    __privateSet$3(this, _content$2, content);
-    __privateSet$3(this, _app$2, app);
+    __privateSet$4(this, _content$2, content);
+    __privateSet$4(this, _app$2, app);
     const root = view.dom.parentElement;
     if (root) {
       root.style.position = "relative";
-      root.style.transition = "padding 0.1s ease-out, background-color 0.2s ease-out";
-      root.prepend(__privateGet$3(this, _content$2));
+      root.style.transition = "background-color 0.2s ease-out";
+      root.prepend(__privateGet$4(this, _content$2));
+      const editorContainer = document.createElement("div");
+      editorContainer.className = "milkdown-editor-container";
+      editorContainer.style.transition = "padding 0.1s ease-out";
+      editorContainer.style.display = "flex";
+      editorContainer.style.flexDirection = "column";
+      editorContainer.style.flexGrow = "1";
+      root.insertBefore(editorContainer, view.dom);
+      editorContainer.appendChild(view.dom);
+      __privateSet$4(this, _editorContainer, editorContainer);
       const headerContent = document.createElement("div");
-      __privateSet$3(this, _headerApp, vue.createApp(DocumentHeader, { ctx, config }));
-      __privateGet$3(this, _headerApp).mount(headerContent);
-      __privateSet$3(this, _headerContent, headerContent);
-      root.insertBefore(headerContent, view.dom);
+      __privateSet$4(this, _headerApp, vue.createApp(DocumentHeader, { ctx, config }));
+      __privateGet$4(this, _headerApp).mount(headerContent);
+      __privateSet$4(this, _headerContent, headerContent);
+      editorContainer.insertBefore(headerContent, view.dom);
       const outlineContent = document.createElement("div");
       outlineContent.style.position = "fixed";
       outlineContent.style.zIndex = "100";
-      __privateSet$3(this, _outlineApp, vue.createApp(OutlinePanel, { ctx }));
-      __privateGet$3(this, _outlineApp).mount(outlineContent);
-      __privateSet$3(this, _outlineContent, outlineContent);
+      __privateSet$4(this, _outlineApp, vue.createApp(OutlinePanel, { ctx }));
+      __privateGet$4(this, _outlineApp).mount(outlineContent);
+      __privateSet$4(this, _outlineContent, outlineContent);
       root.appendChild(outlineContent);
-      __privateGet$3(this, _content$2).style.transition = "margin 0.1s ease-out, width 0.1s ease-out";
+      __privateSet$4(this, _onDblClick, (event) => {
+        const view2 = __privateGet$4(this, _view$1);
+        if (!view2.editable) return;
+        const dom = view2.dom;
+        const children = dom.children;
+        if (children.length === 0) return;
+        const lastChild = children[children.length - 1];
+        if (!lastChild) return;
+        const lastRect = lastChild.getBoundingClientRect();
+        if (event.clientY <= lastRect.bottom) return;
+        const { doc } = view2.state;
+        const lastNode = doc.lastChild;
+        if (!lastNode) return;
+        if (lastNode.type.name === "paragraph" && lastNode.content.size === 0)
+          return;
+        const paragraphType = view2.state.schema.nodes["paragraph"];
+        if (!paragraphType) return;
+        const pos = doc.content.size;
+        const tr = view2.state.tr.insert(pos, paragraphType.create());
+        const sel = state.TextSelection.create(tr.doc, pos + 1);
+        tr.setSelection(sel);
+        view2.dispatch(tr);
+        view2.focus();
+      });
+      view.dom.addEventListener("dblclick", __privateGet$4(this, _onDblClick));
+      __privateGet$4(this, _content$2).style.transition = "margin 0.1s ease-out, width 0.1s ease-out";
       const viewState = ctx.get(viewMenuStateCtx.key);
       if (config.outlinePosition) {
         viewState.outlinePosition = config.outlinePosition;
       }
-      __privateSet$3(this, _updateOutlineGeometry, () => {
+      __privateSet$4(this, _updateOutlineGeometry, () => {
         const rootRect = root.getBoundingClientRect();
         let outlineTop = rootRect.top;
-        if (__privateGet$3(this, _content$2) && __privateGet$3(this, _content$2).offsetHeight > 0) {
-          const toolbarRect = __privateGet$3(this, _content$2).getBoundingClientRect();
+        if (__privateGet$4(this, _content$2) && __privateGet$4(this, _content$2).offsetHeight > 0) {
+          const toolbarRect = __privateGet$4(this, _content$2).getBoundingClientRect();
           outlineTop = Math.max(outlineTop, toolbarRect.bottom);
         }
-        if (viewState.showCover && __privateGet$3(this, _headerContent)) {
-          const coverEl = __privateGet$3(this, _headerContent).querySelector(
+        if (viewState.showCover && __privateGet$4(this, _headerContent)) {
+          const coverEl = __privateGet$4(this, _headerContent).querySelector(
             ".milkdown-document-cover"
           );
           if (coverEl) {
@@ -9552,28 +9735,50 @@ class FixedToolbarView {
             outlineContent.style.right = "auto";
           } else {
             outlineContent.style.left = "auto";
-            outlineContent.style.right = `${window.innerWidth - rootRect.right}px`;
+            let baseOffset = window.innerWidth - rootRect.right;
+            let rightOffset = baseOffset;
+            let hasVScroll = false;
+            if (document.documentElement.scrollHeight > window.innerHeight) {
+              hasVScroll = true;
+            }
+            let parent = root;
+            while (parent && parent !== document.body) {
+              const { overflowY } = getComputedStyle(parent);
+              if (overflowY === "auto" || overflowY === "scroll") {
+                if (parent.scrollHeight > parent.clientHeight) {
+                  hasVScroll = true;
+                  break;
+                }
+              }
+              parent = parent.parentElement;
+            }
+            if (hasVScroll) {
+              rightOffset = Math.max(rightOffset, 32);
+            } else {
+              rightOffset = Math.max(rightOffset, 0);
+            }
+            outlineContent.style.right = `${rightOffset}px`;
           }
         }
       });
-      __privateSet$3(this, _resizeObserver, new ResizeObserver(__privateGet$3(this, _updateOutlineGeometry)));
-      __privateGet$3(this, _resizeObserver).observe(root);
-      window.addEventListener("resize", __privateGet$3(this, _updateOutlineGeometry));
-      window.addEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry), {
+      __privateSet$4(this, _resizeObserver$1, new ResizeObserver(__privateGet$4(this, _updateOutlineGeometry)));
+      __privateGet$4(this, _resizeObserver$1).observe(root);
+      window.addEventListener("resize", __privateGet$4(this, _updateOutlineGeometry));
+      window.addEventListener("scroll", __privateGet$4(this, _updateOutlineGeometry), {
         capture: true,
         passive: true
       });
       let scrollerNode = root;
       while (scrollerNode && scrollerNode !== document) {
         if (scrollerNode instanceof Element) {
-          scrollerNode.addEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry), {
+          scrollerNode.addEventListener("scroll", __privateGet$4(this, _updateOutlineGeometry), {
             passive: true
           });
-          __privateGet$3(this, _scrollContainers).push(scrollerNode);
+          __privateGet$4(this, _scrollContainers$1).push(scrollerNode);
         }
         scrollerNode = scrollerNode.parentNode || scrollerNode.host;
       }
-      __privateSet$3(this, _watcher, vue.watch(
+      __privateSet$4(this, _watcher, vue.watch(
         () => [
           viewState.outlineVisible,
           viewState.outlinePosition,
@@ -9588,41 +9793,43 @@ class FixedToolbarView {
           } else {
             root.style.backgroundColor = "";
           }
-          if (viewState.outlineVisible) {
-            if (viewState.outlinePosition === "left") {
-              root.style.paddingLeft = `${viewState.outlineWidth}px`;
-              root.style.paddingRight = "0";
-              __privateGet$3(this, _content$2).style.width = `calc(100% + ${viewState.outlineWidth}px)`;
-              __privateGet$3(this, _content$2).style.marginLeft = `-${viewState.outlineWidth}px`;
-              __privateGet$3(this, _content$2).style.marginRight = "0";
+          root.style.paddingLeft = "0";
+          root.style.paddingRight = "0";
+          __privateGet$4(this, _content$2).style.width = "100%";
+          __privateGet$4(this, _content$2).style.marginLeft = "0";
+          __privateGet$4(this, _content$2).style.marginRight = "0";
+          if (__privateGet$4(this, _editorContainer)) {
+            if (viewState.outlineVisible) {
+              if (viewState.outlinePosition === "left") {
+                __privateGet$4(this, _editorContainer).style.paddingLeft = `${viewState.outlineWidth}px`;
+                __privateGet$4(this, _editorContainer).style.paddingRight = "0";
+              } else {
+                __privateGet$4(this, _editorContainer).style.paddingLeft = "0";
+                __privateGet$4(this, _editorContainer).style.paddingRight = `${viewState.outlineWidth}px`;
+              }
             } else {
-              root.style.paddingLeft = "0";
-              root.style.paddingRight = `${viewState.outlineWidth}px`;
-              __privateGet$3(this, _content$2).style.width = `calc(100% + ${viewState.outlineWidth}px)`;
-              __privateGet$3(this, _content$2).style.marginLeft = "0";
-              __privateGet$3(this, _content$2).style.marginRight = `-${viewState.outlineWidth}px`;
+              __privateGet$4(this, _editorContainer).style.paddingLeft = "0";
+              __privateGet$4(this, _editorContainer).style.paddingRight = "0";
             }
-          } else {
-            root.style.paddingLeft = "0";
-            root.style.paddingRight = "0";
-            __privateGet$3(this, _content$2).style.width = "100%";
-            __privateGet$3(this, _content$2).style.marginLeft = "0";
-            __privateGet$3(this, _content$2).style.marginRight = "0";
           }
           const maxWidth = editorWidthMap[viewState.editorWidth];
           const isFull = maxWidth === "none";
           const px = isFull ? "80px" : "0";
-          __privateGet$3(this, _view).dom.style.maxWidth = maxWidth;
-          __privateGet$3(this, _view).dom.style.width = isFull ? "100%" : maxWidth;
-          __privateGet$3(this, _view).dom.style.margin = isFull ? "0" : "0 auto";
-          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 0`;
-          if (__privateGet$3(this, _headerContent)) {
-            __privateGet$3(this, _headerContent).style.margin = isFull && !viewState.showCover ? "0 auto" : "0";
-            __privateGet$3(this, _headerContent).style.padding = `0px`;
+          __privateGet$4(this, _view$1).dom.style.maxWidth = maxWidth;
+          __privateGet$4(this, _view$1).dom.style.width = isFull ? "100%" : maxWidth;
+          __privateGet$4(this, _view$1).dom.style.margin = isFull ? "0" : "0 auto";
+          __privateGet$4(this, _view$1).dom.style.padding = `20px ${px} 36px`;
+          if (__privateGet$4(this, _headerContent)) {
+            __privateGet$4(this, _headerContent).style.margin = isFull && !viewState.showCover ? "0 auto" : "0";
+            __privateGet$4(this, _headerContent).style.padding = `0px`;
           }
-          vue.nextTick(() => {
+          void vue.nextTick(() => {
             var _a;
-            (_a = __privateGet$3(this, _updateOutlineGeometry)) == null ? void 0 : _a.call(this);
+            (_a = __privateGet$4(this, _updateOutlineGeometry)) == null ? void 0 : _a.call(this);
+            setTimeout(() => {
+              var _a2;
+              (_a2 = __privateGet$4(this, _updateOutlineGeometry)) == null ? void 0 : _a2.call(this);
+            }, 100);
           });
         },
         { immediate: true }
@@ -9639,10 +9846,12 @@ _outlineApp = new WeakMap();
 _watcher = new WeakMap();
 _selection$1 = new WeakMap();
 _show$1 = new WeakMap();
-_resizeObserver = new WeakMap();
+_resizeObserver$1 = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
-_scrollContainers = new WeakMap();
-_view = new WeakMap();
+_scrollContainers$1 = new WeakMap();
+_onDblClick = new WeakMap();
+_view$1 = new WeakMap();
+_editorContainer = new WeakMap();
 const fixedToolbarPlugin = utils.$prose((ctx) => {
   return new state.Plugin({
     key: fixedToolbarKey,
@@ -9763,10 +9972,921 @@ const imageBlockConverter = utils$1.$prose((ctx) => {
         const r = replacements[i];
         tr.replaceWith(r.from, r.to, r.blocks);
       }
-      return tr;
+      return tr.setMeta("addToHistory", false);
+    }
+  });
+});
+
+const typeLabels = {
+  added: "\u65B0\u589E",
+  removed: "\u5220\u9664"
+};
+const typeColors = {
+  added: "#4caf50",
+  removed: "#c0392b"
+};
+function mountChangePanel(container, changes, onNavigate, onClose) {
+  const app = vue.createApp({
+    setup() {
+      const activeTab = vue.ref("all");
+      const filteredChanges = vue.computed(() => {
+        if (activeTab.value === "all") return changes;
+        return changes.filter((c) => c.type === activeTab.value);
+      });
+      const counts = vue.computed(() => ({
+        all: changes.length,
+        removed: changes.filter((c) => c.type === "removed").length,
+        added: changes.filter((c) => c.type === "added").length
+      }));
+      function renderTab(tab, label) {
+        const isActive = activeTab.value === tab;
+        return vue.h(
+          "button",
+          {
+            style: {
+              padding: "6px 10px",
+              border: "none",
+              background: "none",
+              cursor: "pointer",
+              fontSize: "12px",
+              color: isActive ? "#1890ff" : "#666",
+              borderBottom: isActive ? "2px solid #1890ff" : "2px solid transparent"
+            },
+            onClick: () => {
+              activeTab.value = tab;
+            }
+          },
+          label
+        );
+      }
+      function renderItem(change, index) {
+        const color = typeColors[change.type];
+        const children = [
+          vue.h("div", { style: { marginBottom: "4px" } }, [
+            vue.h(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  padding: "1px 6px",
+                  borderRadius: "3px",
+                  color: "#fff",
+                  fontSize: "11px",
+                  fontWeight: "500",
+                  backgroundColor: color
+                }
+              },
+              `${index} ${typeLabels[change.type]}`
+            )
+          ])
+        ];
+        if (change.oldText) {
+          children.push(
+            vue.h(
+              "div",
+              {
+                style: {
+                  marginTop: "3px",
+                  fontSize: "12px",
+                  lineHeight: "1.5",
+                  color: "#555",
+                  wordBreak: "break-all"
+                }
+              },
+              [
+                vue.h(
+                  "span",
+                  { style: { color: "#999", fontSize: "11px" } },
+                  "\u539F\u6587: "
+                ),
+                vue.h("span", null, change.oldText)
+              ]
+            )
+          );
+        }
+        if (change.newText) {
+          children.push(
+            vue.h(
+              "div",
+              {
+                style: {
+                  marginTop: "3px",
+                  fontSize: "12px",
+                  lineHeight: "1.5",
+                  wordBreak: "break-all"
+                }
+              },
+              [
+                vue.h(
+                  "span",
+                  { style: { color: "#999", fontSize: "11px" } },
+                  "\u5DEE\u5F02: "
+                ),
+                vue.h("span", { style: { color } }, change.newText)
+              ]
+            )
+          );
+        }
+        return vue.h(
+          "div",
+          {
+            style: {
+              padding: "8px 10px",
+              borderRadius: "4px",
+              marginBottom: "6px",
+              background: "rgba(0,0,0,0.02)",
+              border: "1px solid #eee",
+              cursor: change.from > 0 ? "pointer" : "default"
+            },
+            onClick: () => {
+              if (change.from > 0) onNavigate(change.from);
+            }
+          },
+          children
+        );
+      }
+      return () => vue.h(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "var(--crepe-color-surface, #fff)",
+            boxSizing: "border-box",
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            fontSize: "13px",
+            color: "var(--crepe-color-on-surface, #333)",
+            overflow: "hidden"
+          }
+        },
+        [
+          // Header
+          vue.h(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                fontSize: "14px",
+                fontWeight: "bold",
+                borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))",
+                color: "var(--crepe-color-on-surface, #333)",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                flexShrink: 0
+              }
+            },
+            [
+              vue.h("span", null, "\u6587\u6863\u5DEE\u5F02\u53D8\u66F4"),
+              onClose ? vue.h(
+                "div",
+                {
+                  style: {
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "4px",
+                    color: "var(--crepe-color-outline, #999)",
+                    transition: "background-color 0.2s, color 0.2s"
+                  },
+                  onClick: onClose,
+                  onMouseenter: (e) => {
+                    const target = e.currentTarget;
+                    target.style.backgroundColor = "var(--crepe-color-hover, rgba(0,0,0,0.05))";
+                    target.style.color = "var(--crepe-color-on-surface, #333)";
+                  },
+                  onMouseleave: (e) => {
+                    const target = e.currentTarget;
+                    target.style.backgroundColor = "transparent";
+                    target.style.color = "var(--crepe-color-outline, #999)";
+                  },
+                  title: "\u5173\u95ED\u5DEE\u5F02"
+                },
+                [
+                  vue.h(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    },
+                    [
+                      vue.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      vue.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  )
+                ]
+              ) : null
+            ]
+          ),
+          // Tabs
+          vue.h(
+            "div",
+            {
+              style: {
+                display: "flex",
+                borderBottom: "1px solid #eee",
+                padding: "0 8px",
+                flexShrink: 0
+              }
+            },
+            [
+              renderTab("all", `\u5168\u90E8(${counts.value.all})`),
+              renderTab("removed", `\u5220\u9664(${counts.value.removed})`),
+              renderTab("added", `\u65B0\u589E(${counts.value.added})`)
+            ]
+          ),
+          // List
+          vue.h(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: "8px"
+              }
+            },
+            filteredChanges.value.map(
+              (change, i) => renderItem(change, i + 1)
+            )
+          )
+        ]
+      );
+    }
+  });
+  app.mount(container);
+  return app;
+}
+
+const inlineDiffConfig = utils.$ctx(
+  {
+    addedClass: "crepe-diff-added",
+    deletedClass: "crepe-diff-deleted"
+  },
+  "inlineDiffConfigCtx"
+);
+const noopApi = {
+  showDiff: () => {
+  },
+  hideDiff: () => {
+  },
+  isShowing: () => false
+};
+const inlineDiffApiCtx = utils.$ctx(noopApi, "inlineDiffApiCtx");
+
+function lcs(a, b, eq) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const m = a.length;
+  const n = b.length;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => Array.from({ length: n + 1 }, () => 0)
+  );
+  for (let i2 = m - 1; i2 >= 0; i2--) {
+    for (let j2 = n - 1; j2 >= 0; j2--) {
+      const diag = (_b = (_a = dp[i2 + 1]) == null ? void 0 : _a[j2 + 1]) != null ? _b : 0;
+      const down = (_d = (_c = dp[i2 + 1]) == null ? void 0 : _c[j2]) != null ? _d : 0;
+      const right = (_f = (_e = dp[i2]) == null ? void 0 : _e[j2 + 1]) != null ? _f : 0;
+      dp[i2][j2] = eq(a[i2], b[j2]) ? 1 + diag : Math.max(down, right);
+    }
+  }
+  const pairs = [];
+  let i = 0;
+  let j = 0;
+  while (i < m && j < n) {
+    const down = (_h = (_g = dp[i + 1]) == null ? void 0 : _g[j]) != null ? _h : 0;
+    const right = (_j = (_i = dp[i]) == null ? void 0 : _i[j + 1]) != null ? _j : 0;
+    if (eq(a[i], b[j])) {
+      pairs.push([i, j]);
+      i++;
+      j++;
+    } else if (down >= right) {
+      i++;
+    } else {
+      j++;
+    }
+  }
+  return pairs;
+}
+function computeDiff(oldBlocks, newBlocks) {
+  const result = [];
+  let chunkCounter = 0;
+  const pushChunk = (diffs) => {
+    if (diffs.length > 0) {
+      result.push({
+        id: `chunk-${chunkCounter++}`,
+        diffs,
+        status: "pending"
+      });
+    }
+  };
+  const pairs = lcs(
+    oldBlocks,
+    newBlocks,
+    (a, b) => a.textContent === b.textContent
+  );
+  let oi = 0;
+  let ni = 0;
+  for (const [pi, pj] of pairs) {
+    const gapOld = pi - oi;
+    const gapNew = pj - ni;
+    const gapMax = Math.max(gapOld, gapNew);
+    for (let k = 0; k < gapMax; k++) {
+      const hasOld = oi + k < pi;
+      const hasNew = ni + k < pj;
+      const currentDiffs = [];
+      if (hasOld && hasNew) {
+        const oldNode2 = oldBlocks[oi + k];
+        const newNode2 = newBlocks[ni + k];
+        const changes = Diff__namespace.diffWordsWithSpace(
+          oldNode2.textContent,
+          newNode2.textContent
+        );
+        const parts = changes.map((c) => ({
+          type: c.added ? "insert" : c.removed ? "delete" : "equal",
+          value: c.value
+        }));
+        currentDiffs.push({ type: "removed", oldNode: oldNode2, parts });
+        currentDiffs.push({ type: "added", newNode: newNode2, parts });
+      } else if (hasOld) {
+        currentDiffs.push({ type: "removed", oldNode: oldBlocks[oi + k] });
+      } else {
+        currentDiffs.push({ type: "added", newNode: newBlocks[ni + k] });
+      }
+      pushChunk(currentDiffs);
+    }
+    const oldNode = oldBlocks[pi];
+    const newNode = newBlocks[pj];
+    if (oldNode.textContent === newNode.textContent && oldNode.eq(newNode)) {
+      pushChunk([{ type: "unchanged", oldNode, newNode }]);
+    } else {
+      const changes = Diff__namespace.diffWordsWithSpace(
+        oldNode.textContent,
+        newNode.textContent
+      );
+      const parts = changes.map((c) => ({
+        type: c.added ? "insert" : c.removed ? "delete" : "equal",
+        value: c.value
+      }));
+      pushChunk([
+        { type: "removed", oldNode, parts },
+        { type: "added", newNode, parts }
+      ]);
+    }
+    oi = pi + 1;
+    ni = pj + 1;
+  }
+  const trailOld = oldBlocks.length - oi;
+  const trailNew = newBlocks.length - ni;
+  const trailMax = Math.max(trailOld, trailNew);
+  for (let k = 0; k < trailMax; k++) {
+    const hasOld = oi + k < oldBlocks.length;
+    const hasNew = ni + k < newBlocks.length;
+    const currentDiffs = [];
+    if (hasOld && hasNew) {
+      const oldNode = oldBlocks[oi + k];
+      const newNode = newBlocks[ni + k];
+      const changes = Diff__namespace.diffWordsWithSpace(
+        oldNode.textContent,
+        newNode.textContent
+      );
+      const parts = changes.map((c) => ({
+        type: c.added ? "insert" : c.removed ? "delete" : "equal",
+        value: c.value
+      }));
+      currentDiffs.push({ type: "removed", oldNode, parts });
+      currentDiffs.push({ type: "added", newNode, parts });
+    } else if (hasOld) {
+      currentDiffs.push({ type: "removed", oldNode: oldBlocks[oi + k] });
+    } else {
+      currentDiffs.push({ type: "added", newNode: newBlocks[ni + k] });
+    }
+    pushChunk(currentDiffs);
+  }
+  return result;
+}
+
+function buildNewDoc(chunks, schema) {
+  var _a, _b, _c, _d;
+  const children = [];
+  const pending = [];
+  for (const chunk of chunks) {
+    if (chunk.status === "accepted") {
+      for (const diff of chunk.diffs) {
+        if (diff.type === "added") children.push(diff.newNode);
+        if (diff.type === "unchanged") children.push(diff.newNode);
+      }
+    } else if (chunk.status === "rejected") {
+      for (const diff of chunk.diffs) {
+        if (diff.type === "removed") children.push(diff.oldNode);
+        if (diff.type === "unchanged") children.push(diff.oldNode);
+      }
+    } else {
+      for (const diff of chunk.diffs) {
+        if (diff.type === "unchanged") {
+          children.push(diff.newNode);
+        } else if (diff.type === "added") {
+          pending.push({
+            type: "added",
+            childIndex: children.length,
+            oldText: "",
+            newText: (_b = (_a = diff.newNode) == null ? void 0 : _a.textContent) != null ? _b : "",
+            parts: diff.parts,
+            chunkId: chunk.id
+          });
+          children.push(diff.newNode);
+        } else if (diff.type === "removed") {
+          pending.push({
+            type: "removed",
+            childIndex: children.length,
+            oldText: (_d = (_c = diff.oldNode) == null ? void 0 : _c.textContent) != null ? _d : "",
+            newText: "",
+            parts: diff.parts,
+            chunkId: chunk.id
+          });
+          children.push(diff.oldNode);
+        }
+      }
+    }
+  }
+  if (children.length === 0) {
+    children.push(schema.node("paragraph", null, []));
+  }
+  const doc = schema.node("doc", null, children);
+  let pos = 0;
+  const positions = [];
+  for (const child of children) {
+    positions.push({ from: pos, to: pos + child.nodeSize });
+    pos += child.nodeSize;
+  }
+  const changes = pending.map((pc) => {
+    var _a2, _b2;
+    const cp = positions[pc.childIndex];
+    const inlineRanges = [];
+    let offset = cp.from + 1;
+    if (pc.type === "removed") {
+      for (const part of (_a2 = pc.parts) != null ? _a2 : []) {
+        if (part.type === "delete") {
+          inlineRanges.push({ from: offset, to: offset + part.value.length });
+          offset += part.value.length;
+        } else if (part.type === "equal") {
+          offset += part.value.length;
+        }
+      }
+      return {
+        type: "removed",
+        from: cp.from,
+        oldText: pc.oldText,
+        newText: "",
+        blockRange: { from: cp.from, to: cp.to },
+        inlineRanges,
+        chunkId: pc.chunkId
+      };
+    }
+    for (const part of (_b2 = pc.parts) != null ? _b2 : []) {
+      if (part.type === "insert") {
+        inlineRanges.push({ from: offset, to: offset + part.value.length });
+        offset += part.value.length;
+      } else if (part.type === "equal") {
+        offset += part.value.length;
+      }
+    }
+    return {
+      type: "added",
+      from: cp.from,
+      oldText: "",
+      newText: pc.newText,
+      blockRange: { from: cp.from, to: cp.to },
+      inlineRanges,
+      chunkId: pc.chunkId
+    };
+  });
+  return { doc, changes };
+}
+
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var _ctx, _view, _isActive, _panelApp, _panelContainer, _resizeObserver, _scrollContainers, _updateGeometry, _originalEditable, _chunks, _schema, _render, _InlineDiffView_instances, scrollTo_fn, createPanel_fn, removePanel_fn;
+const inlineDiffKey = new state.PluginKey("CREPE_INLINE_DIFF");
+const PANEL_WIDTH = 280;
+let sharedDecorationSet = view$1.DecorationSet.empty;
+class InlineDiffView {
+  constructor(ctx, view) {
+    __privateAdd$3(this, _InlineDiffView_instances);
+    __privateAdd$3(this, _ctx);
+    __privateAdd$3(this, _view);
+    __privateAdd$3(this, _isActive, false);
+    __privateAdd$3(this, _panelApp, null);
+    __privateAdd$3(this, _panelContainer, null);
+    __privateAdd$3(this, _resizeObserver, null);
+    __privateAdd$3(this, _scrollContainers, []);
+    __privateAdd$3(this, _updateGeometry, null);
+    __privateAdd$3(this, _originalEditable, null);
+    __privateAdd$3(this, _chunks, []);
+    __privateAdd$3(this, _schema, null);
+    this.showDiff = (oldMarkdown, newMarkdown) => {
+      if (__privateGet$3(this, _isActive)) return;
+      const parser = __privateGet$3(this, _ctx).get(core.parserCtx);
+      __privateSet$3(this, _schema, __privateGet$3(this, _view).state.schema);
+      let oldDoc;
+      let newDoc;
+      try {
+        oldDoc = parser(oldMarkdown);
+        if (typeof newMarkdown === "string" && newMarkdown.trim() !== "") {
+          newDoc = parser(newMarkdown);
+        } else {
+          newDoc = __privateGet$3(this, _view).state.doc;
+        }
+      } catch (e) {
+        return;
+      }
+      const oldBlocks = [];
+      const newBlocks = [];
+      oldDoc.forEach((node) => oldBlocks.push(node));
+      newDoc.forEach((node) => newBlocks.push(node));
+      __privateSet$3(this, _chunks, computeDiff(oldBlocks, newBlocks));
+      const { changes } = buildNewDoc(__privateGet$3(this, _chunks), __privateGet$3(this, _schema));
+      if (changes.length === 0) {
+        return;
+      }
+      if (!__privateGet$3(this, _originalEditable)) {
+        __privateSet$3(this, _originalEditable, __privateGet$3(this, _view).someProp("editable") || (() => true));
+      }
+      __privateGet$3(this, _view).setProps({
+        editable: () => false
+      });
+      __privateSet$3(this, _isActive, true);
+      __privateGet$3(this, _render).call(this, true);
+    };
+    __privateAdd$3(this, _render, (initPanel = false) => {
+      const { doc: newDocWithPos, changes } = buildNewDoc(
+        __privateGet$3(this, _chunks),
+        __privateGet$3(this, _schema)
+      );
+      const acceptText = i18n(__privateGet$3(this, _ctx), "inlineDiff.accept");
+      const rejectText = i18n(__privateGet$3(this, _ctx), "inlineDiff.reject");
+      const ds = buildDecorations(
+        newDocWithPos,
+        changes,
+        (id) => this.acceptChunk(id),
+        (id) => this.rejectChunk(id),
+        acceptText,
+        rejectText
+      );
+      sharedDecorationSet = ds;
+      const tr = __privateGet$3(this, _view).state.tr.replaceWith(
+        0,
+        __privateGet$3(this, _view).state.doc.content.size,
+        newDocWithPos.content
+      );
+      __privateGet$3(this, _view).dispatch(tr);
+      if (initPanel) {
+        __privateMethod(this, _InlineDiffView_instances, createPanel_fn).call(this, changes);
+      } else if (__privateGet$3(this, _panelApp)) {
+        __privateMethod(this, _InlineDiffView_instances, createPanel_fn).call(this, changes);
+      }
+    });
+    this.acceptChunk = (id) => {
+      const chunk = __privateGet$3(this, _chunks).find((c) => c.id === id);
+      if (chunk) {
+        chunk.status = "accepted";
+        const hasPending = __privateGet$3(this, _chunks).some(
+          (c) => c.status === "pending" && c.diffs.some((d) => d.type !== "unchanged")
+        );
+        if (!hasPending) {
+          this.hideDiff();
+        } else {
+          __privateGet$3(this, _render).call(this);
+        }
+      }
+    };
+    this.rejectChunk = (id) => {
+      const chunk = __privateGet$3(this, _chunks).find((c) => c.id === id);
+      if (chunk) {
+        chunk.status = "rejected";
+        const hasPending = __privateGet$3(this, _chunks).some(
+          (c) => c.status === "pending" && c.diffs.some((d) => d.type !== "unchanged")
+        );
+        if (!hasPending) {
+          this.hideDiff();
+        } else {
+          __privateGet$3(this, _render).call(this);
+        }
+      }
+    };
+    this.hideDiff = () => {
+      if (!__privateGet$3(this, _isActive)) return;
+      __privateMethod(this, _InlineDiffView_instances, removePanel_fn).call(this);
+      for (const chunk of __privateGet$3(this, _chunks)) {
+        if (chunk.status === "pending") {
+          chunk.status = "accepted";
+        }
+      }
+      const { doc: finalDoc } = buildNewDoc(__privateGet$3(this, _chunks), __privateGet$3(this, _schema));
+      const tr = __privateGet$3(this, _view).state.tr.replaceWith(
+        0,
+        __privateGet$3(this, _view).state.doc.content.size,
+        finalDoc.content
+      );
+      sharedDecorationSet = view$1.DecorationSet.empty;
+      __privateSet$3(this, _isActive, false);
+      __privateSet$3(this, _chunks, []);
+      __privateGet$3(this, _view).dispatch(tr);
+      if (__privateGet$3(this, _originalEditable)) {
+        __privateGet$3(this, _view).setProps({
+          editable: __privateGet$3(this, _originalEditable)
+        });
+        __privateSet$3(this, _originalEditable, null);
+      } else {
+        __privateGet$3(this, _view).setProps({
+          editable: () => true
+        });
+      }
+    };
+    this.update = (view) => {
+      __privateSet$3(this, _view, view);
+    };
+    this.destroy = () => {
+      __privateMethod(this, _InlineDiffView_instances, removePanel_fn).call(this);
+    };
+    __privateSet$3(this, _ctx, ctx);
+    __privateSet$3(this, _view, view);
+    const api = {
+      showDiff: (oldMd, newMd) => this.showDiff(oldMd, newMd),
+      hideDiff: () => this.hideDiff(),
+      isShowing: () => __privateGet$3(this, _isActive)
+    };
+    ctx.set(inlineDiffApiCtx.key, api);
+  }
+}
+_ctx = new WeakMap();
+_view = new WeakMap();
+_isActive = new WeakMap();
+_panelApp = new WeakMap();
+_panelContainer = new WeakMap();
+_resizeObserver = new WeakMap();
+_scrollContainers = new WeakMap();
+_updateGeometry = new WeakMap();
+_originalEditable = new WeakMap();
+_chunks = new WeakMap();
+_schema = new WeakMap();
+_render = new WeakMap();
+_InlineDiffView_instances = new WeakSet();
+scrollTo_fn = function(pos) {
+  try {
+    const view = __privateGet$3(this, _view);
+    const coords = view.coordsAtPos(pos);
+    let scrollTarget = view.dom;
+    while (scrollTarget) {
+      const { overflowY } = getComputedStyle(scrollTarget);
+      if ((overflowY === "auto" || overflowY === "scroll") && scrollTarget.scrollHeight > scrollTarget.clientHeight) {
+        break;
+      }
+      scrollTarget = scrollTarget.parentElement;
+    }
+    if (scrollTarget) {
+      const targetRect = scrollTarget.getBoundingClientRect();
+      const scrollOffset = coords.top - targetRect.top + scrollTarget.scrollTop - 60;
+      scrollTarget.scrollTo({ top: scrollOffset, behavior: "smooth" });
+    } else {
+      window.scrollTo({
+        top: coords.top + window.scrollY - 100,
+        behavior: "smooth"
+      });
+    }
+  } catch (e) {
+  }
+};
+createPanel_fn = function(changes) {
+  __privateMethod(this, _InlineDiffView_instances, removePanel_fn).call(this);
+  const editorContainer = __privateGet$3(this, _view).dom.parentElement;
+  if (!editorContainer) return;
+  const root = editorContainer.parentElement;
+  if (!root) return;
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.zIndex = "100";
+  container.style.width = `${PANEL_WIDTH}px`;
+  container.style.overflow = "hidden";
+  container.style.borderLeft = "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline, #ddd), transparent 80%))";
+  container.style.backgroundColor = "var(--crepe-color-surface, #fff)";
+  root.appendChild(container);
+  __privateSet$3(this, _panelContainer, container);
+  editorContainer.style.paddingRight = `${PANEL_WIDTH}px`;
+  __privateSet$3(this, _panelApp, mountChangePanel(
+    container,
+    changes,
+    (from) => __privateMethod(this, _InlineDiffView_instances, scrollTo_fn).call(this, from),
+    () => this.hideDiff()
+  ));
+  __privateSet$3(this, _updateGeometry, () => {
+    const rootRect = root.getBoundingClientRect();
+    let top = rootRect.top;
+    const toolbar = root.querySelector(
+      ".milkdown-fixed-toolbar"
+    );
+    if (toolbar && toolbar.offsetHeight > 0) {
+      const toolbarRect = toolbar.getBoundingClientRect();
+      top = Math.max(top, toolbarRect.bottom);
+    }
+    const coverEl = root.querySelector(
+      ".milkdown-document-cover"
+    );
+    if (coverEl && coverEl.offsetHeight > 0) {
+      top = Math.max(top, coverEl.getBoundingClientRect().bottom);
+    }
+    let height = window.innerHeight - top;
+    if (top + height > rootRect.bottom) {
+      height = Math.max(0, rootRect.bottom - top);
+    }
+    container.style.top = `${top}px`;
+    container.style.height = `${height}px`;
+    container.style.left = "auto";
+    let baseOffset = window.innerWidth - rootRect.right;
+    let rightOffset = baseOffset;
+    let hasVScroll = false;
+    if (document.documentElement.scrollHeight > window.innerHeight) {
+      hasVScroll = true;
+    }
+    let parent = root;
+    while (parent && parent !== document.body) {
+      const { overflowY } = getComputedStyle(parent);
+      if (overflowY === "auto" || overflowY === "scroll") {
+        if (parent.scrollHeight > parent.clientHeight) {
+          hasVScroll = true;
+          break;
+        }
+      }
+      parent = parent.parentElement;
+    }
+    if (hasVScroll) {
+      rightOffset = Math.max(rightOffset, 32);
+    } else {
+      rightOffset = Math.max(rightOffset, 0);
+    }
+    container.style.right = `${rightOffset}px`;
+    editorContainer.style.paddingRight = `${PANEL_WIDTH}px`;
+  });
+  __privateGet$3(this, _updateGeometry).call(this);
+  setTimeout(() => {
+    var _a;
+    (_a = __privateGet$3(this, _updateGeometry)) == null ? void 0 : _a.call(this);
+  }, 100);
+  __privateSet$3(this, _resizeObserver, new ResizeObserver(__privateGet$3(this, _updateGeometry)));
+  __privateGet$3(this, _resizeObserver).observe(root);
+  window.addEventListener("resize", __privateGet$3(this, _updateGeometry));
+  window.addEventListener("scroll", __privateGet$3(this, _updateGeometry), {
+    capture: true,
+    passive: true
+  });
+  let scrollerNode = root;
+  while (scrollerNode && scrollerNode !== document) {
+    if (scrollerNode instanceof Element) {
+      scrollerNode.addEventListener("scroll", __privateGet$3(this, _updateGeometry), {
+        passive: true
+      });
+      __privateGet$3(this, _scrollContainers).push(scrollerNode);
+    }
+    scrollerNode = scrollerNode.parentNode || scrollerNode.host;
+  }
+};
+removePanel_fn = function() {
+  if (__privateGet$3(this, _panelApp)) {
+    __privateGet$3(this, _panelApp).unmount();
+    __privateSet$3(this, _panelApp, null);
+  }
+  if (__privateGet$3(this, _panelContainer)) {
+    __privateGet$3(this, _panelContainer).remove();
+    __privateSet$3(this, _panelContainer, null);
+  }
+  if (__privateGet$3(this, _resizeObserver)) {
+    __privateGet$3(this, _resizeObserver).disconnect();
+    __privateSet$3(this, _resizeObserver, null);
+  }
+  if (__privateGet$3(this, _updateGeometry)) {
+    window.removeEventListener("resize", __privateGet$3(this, _updateGeometry));
+    window.removeEventListener("scroll", __privateGet$3(this, _updateGeometry), {
+      capture: true
+    });
+    for (const container of __privateGet$3(this, _scrollContainers)) {
+      container.removeEventListener("scroll", __privateGet$3(this, _updateGeometry));
+    }
+    __privateSet$3(this, _scrollContainers, []);
+    __privateSet$3(this, _updateGeometry, null);
+  }
+  const editorContainer = __privateGet$3(this, _view).dom.parentElement;
+  if (editorContainer) {
+    editorContainer.style.paddingRight = "";
+  }
+};
+function buildDecorations(doc, changes, onAccept, onReject, acceptText, rejectText) {
+  const decorations = [];
+  const addedWidgets = /* @__PURE__ */ new Set();
+  for (const change of changes) {
+    if (!addedWidgets.has(change.chunkId)) {
+      addedWidgets.add(change.chunkId);
+      decorations.push(
+        view$1.Decoration.widget(
+          change.blockRange.from,
+          () => {
+            const wrapper = document.createElement("div");
+            wrapper.style.position = "relative";
+            wrapper.style.width = "100%";
+            wrapper.style.height = "0";
+            wrapper.style.overflow = "visible";
+            const container = document.createElement("div");
+            container.className = "crepe-diff-actions";
+            container.style.position = "absolute";
+            container.style.right = "4px";
+            container.style.top = "4px";
+            container.style.zIndex = "10";
+            container.style.display = "flex";
+            container.style.gap = "4px";
+            const btnAccept = document.createElement("button");
+            btnAccept.textContent = acceptText;
+            btnAccept.style.backgroundColor = "#2ea043";
+            btnAccept.style.color = "white";
+            btnAccept.style.border = "none";
+            btnAccept.style.borderRadius = "4px";
+            btnAccept.style.padding = "2px 8px";
+            btnAccept.style.cursor = "pointer";
+            btnAccept.style.fontSize = "12px";
+            btnAccept.addEventListener("mousedown", (e) => {
+              e.preventDefault();
+              onAccept(change.chunkId);
+            });
+            const btnReject = document.createElement("button");
+            btnReject.textContent = rejectText;
+            btnReject.style.backgroundColor = "#f85149";
+            btnReject.style.color = "white";
+            btnReject.style.border = "none";
+            btnReject.style.borderRadius = "4px";
+            btnReject.style.padding = "2px 8px";
+            btnReject.style.cursor = "pointer";
+            btnReject.style.fontSize = "12px";
+            btnReject.addEventListener("mousedown", (e) => {
+              e.preventDefault();
+              onReject(change.chunkId);
+            });
+            container.appendChild(btnAccept);
+            container.appendChild(btnReject);
+            wrapper.appendChild(container);
+            return wrapper;
+          },
+          { side: -1 }
+        )
+      );
+    }
+    const blockCls = change.type === "added" ? "crepe-diff-added" : "crepe-diff-deleted";
+    decorations.push(
+      view$1.Decoration.node(change.blockRange.from, change.blockRange.to, {
+        class: blockCls
+      })
+    );
+    const inlineCls = change.type === "added" ? "crepe-diff-inline-added" : "crepe-diff-inline-deleted";
+    for (const r of change.inlineRanges) {
+      if (r.to > r.from) {
+        decorations.push(view$1.Decoration.inline(r.from, r.to, { class: inlineCls }));
+      }
+    }
+  }
+  return view$1.DecorationSet.create(doc, decorations);
+}
+const inlineDiffPlugin = utils.$prose((ctx) => {
+  return new state.Plugin({
+    key: inlineDiffKey,
+    view: (view) => new InlineDiffView(ctx, view),
+    props: {
+      decorations: () => sharedDecorationSet
     }
   });
 });
+const inlineDiff = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.InlineDiff)).config((ctx) => {
+    if (config) {
+      ctx.update(inlineDiffConfig.key, (prev) => ({
+        ...prev,
+        ...config
+      }));
+    }
+  }).use(inlineDiffApiCtx).use(inlineDiffConfig).use(inlineDiffPlugin);
+};
 
 const blockLatexSchema = commonmark.codeBlockSchema.extendSchema((prev) => {
   return (ctx) => {
@@ -10244,7 +11364,7 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show, _mousePressed;
+var _tooltipProvider, _content, _app, _selection, _show, _mousePressed, _removePopupListener, _onDocumentMouseUp;
 const toolbarTooltip = tooltip.tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
@@ -10254,11 +11374,18 @@ class ToolbarView {
     __privateAdd$1(this, _selection);
     __privateAdd$1(this, _show, vue.ref(false));
     __privateAdd$1(this, _mousePressed, false);
+    __privateAdd$1(this, _removePopupListener);
+    __privateAdd$1(this, _onDocumentMouseUp);
     this.update = (view, prevState) => {
       __privateGet$1(this, _tooltipProvider).update(view, prevState);
       __privateGet$1(this, _selection).value = view.state.selection;
     };
     this.destroy = () => {
+      var _a;
+      (_a = __privateGet$1(this, _removePopupListener)) == null ? void 0 : _a.call(this);
+      if (__privateGet$1(this, _onDocumentMouseUp)) {
+        document.removeEventListener("mouseup", __privateGet$1(this, _onDocumentMouseUp));
+      }
       __privateGet$1(this, _tooltipProvider).destroy();
       __privateGet$1(this, _app).unmount();
       __privateGet$1(this, _content).remove();
@@ -10288,12 +11415,23 @@ class ToolbarView {
         this.update(view);
       }, 0);
     });
+    const onDocumentMouseUp = () => {
+      if (__privateGet$1(this, _mousePressed)) {
+        __privateSet$1(this, _mousePressed, false);
+        setTimeout(() => {
+          this.update(view);
+        }, 0);
+      }
+    };
+    document.addEventListener("mouseup", onDocumentMouseUp);
+    __privateSet$1(this, _onDocumentMouseUp, onDocumentMouseUp);
     __privateSet$1(this, _tooltipProvider, new tooltip.TooltipProvider({
       content: __privateGet$1(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow: (view2) => {
         if (__privateGet$1(this, _mousePressed)) return false;
+        if (getIsAnyPopupOpen()) return false;
         const { doc, selection } = view2.state;
         const { empty, from, to } = selection;
         const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof state.TextSelection;
@@ -10313,6 +11451,13 @@ class ToolbarView {
     __privateGet$1(this, _tooltipProvider).onHide = () => {
       __privateGet$1(this, _show).value = false;
     };
+    __privateSet$1(this, _removePopupListener, addPopupChangeListener(() => {
+      if (getIsAnyPopupOpen()) {
+        __privateGet$1(this, _tooltipProvider).hide();
+      } else {
+        __privateGet$1(this, _tooltipProvider).update(view);
+      }
+    }));
     this.update(view);
   }
 }
@@ -10322,6 +11467,8 @@ _app = new WeakMap();
 _selection = new WeakMap();
 _show = new WeakMap();
 _mousePressed = new WeakMap();
+_removePopupListener = new WeakMap();
+_onDocumentMouseUp = new WeakMap();
 const toolbar = (editor, config) => {
   editor.config(crepeFeatureConfig(CrepeFeature.Toolbar)).config((ctx) => {
     ctx.set(toolbarTooltip.key, {
@@ -10379,6 +11526,12 @@ function loadFeature(feature, editor, config) {
     case CrepeFeature.Attachment: {
       return attachment(editor, config);
     }
+    case CrepeFeature.InlineDiff: {
+      return inlineDiff(editor, config);
+    }
+    case CrepeFeature.DiffBlock: {
+      return diffBlockFeature(editor, config);
+    }
   }
 }
 
@@ -10435,6 +11588,22 @@ class CrepeBuilder {
     this.getMarkdown = () => {
       return __privateGet(this, _editor).action(utils.getMarkdown());
     };
+    /// Show inline diff between two markdown versions.
+    this.showDiff = (oldMarkdown, newMarkdown) => {
+      __privateGet(this, _editor).action((ctx) => {
+        const api = ctx.get(inlineDiffApiCtx.key);
+        api.showDiff(oldMarkdown, newMarkdown);
+      });
+      return this;
+    };
+    /// Hide inline diff and return to editing mode.
+    this.hideDiff = () => {
+      __privateGet(this, _editor).action((ctx) => {
+        const api = ctx.get(inlineDiffApiCtx.key);
+        api.hideDiff();
+      });
+      return this;
+    };
     /// Register event listeners.
     this.on = (fn) => {
       if (__privateGet(this, _editor).status !== core.EditorStatus.Created) {