@jvs-milkdown/crepe 1.2.13 → 1.2.15

package/lib/cjs/index.js

@@ -26,13 +26,15 @@ 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 view$1 = require('@jvs-milkdown/kit/prose/view');
 var tables = require('@jvs-milkdown/kit/prose/tables');
 var clsx = require('clsx');
 var linkTooltip$1 = require('@jvs-milkdown/kit/component/link-tooltip');
-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 = `
@@ -811,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",
@@ -953,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(
   {
@@ -1390,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) => {
@@ -1427,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);
     };
   }
 }
@@ -3588,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, {
@@ -3604,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(),
@@ -3668,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`
           });
@@ -3676,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,
@@ -3704,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))
@@ -3730,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;
@@ -3746,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, {
@@ -3762,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)
     });
   }
 }
@@ -3774,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();
@@ -3933,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) => {
@@ -3963,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) {
@@ -3995,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) => {
@@ -4090,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,
@@ -4114,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;
@@ -4150,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, {
@@ -4297,28 +4327,26 @@ const cursor = (editor, config) => {
   editor.use(utils.$prose(() => virtualCursor));
 };
 
-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 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 remarkHighlightMarkPlugin = utils.$remark(
   "remarkHighlightMark",
@@ -4803,6 +4831,29 @@ const underline = [
   remarkUnderlinePlugin
 ];
 
+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());
+  }
+}
+
 function getGroups(config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const groupBuilder = new GroupBuilder();
@@ -5676,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;
@@ -9333,7 +9385,7 @@ const OutlinePanel = vue.defineComponent({
             width: `${state.outlineWidth}px`,
             minWidth: "200px",
             maxWidth: "400px",
-            backgroundColor: "var(--crepe-color-surface)",
+            backgroundColor: state.documentBackground || "var(--crepe-color-background)",
             borderRight: isLeft ? "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))" : "none",
             borderLeft: !isLeft ? "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))" : "none",
             boxSizing: "border-box",
@@ -9350,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"
@@ -9526,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, _onDblClick, _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"
@@ -9541,80 +9593,90 @@ 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, _onDblClick);
-    __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, _onDblClick)) {
-        __privateGet$3(this, _view).dom.removeEventListener("dblclick", __privateGet$3(this, _onDblClick));
+      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$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, _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$3(this, _view, view);
+      __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$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);
-      __privateSet$3(this, _onDblClick, (event) => {
-        const view2 = __privateGet$3(this, _view);
+      __privateSet$4(this, _onDblClick, (event) => {
+        const view2 = __privateGet$4(this, _view$1);
         if (!view2.editable) return;
         const dom = view2.dom;
         const children = dom.children;
@@ -9637,21 +9699,21 @@ class FixedToolbarView {
         view2.dispatch(tr);
         view2.focus();
       });
-      view.dom.addEventListener("dblclick", __privateGet$3(this, _onDblClick));
-      __privateGet$3(this, _content$2).style.transition = "margin 0.1s ease-out, width 0.1s ease-out";
+      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) {
@@ -9673,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,
@@ -9709,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} 36px`;
-          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 }
@@ -9760,11 +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();
+_scrollContainers$1 = new WeakMap();
 _onDblClick = new WeakMap();
-_view = new WeakMap();
+_view$1 = new WeakMap();
+_editorContainer = new WeakMap();
 const fixedToolbarPlugin = utils.$prose((ctx) => {
   return new state.Plugin({
     key: fixedToolbarKey,
@@ -9787,7 +9874,7 @@ const fixedToolbar = (editor, config) => {
       ...prev,
       ...mergedConfig
     }));
-  }).use(viewMenuStateCtx).use(fixedToolbarConfig).use(fixedToolbarPlugin);
+  }).use(viewMenuStateCtx).use(fixedToolbarConfig).use(underline).use(highlightMark).use(fixedToolbarPlugin);
 };
 
 const imageBlock = (editor, config) => {
@@ -9890,6 +9977,917 @@ const imageBlockConverter = utils$1.$prose((ctx) => {
   });
 });
 
+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) => {
     const baseSchema = prev(ctx);
@@ -10528,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);
+    }
   }
 }
 
@@ -10584,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) {