@jvs-milkdown/crepe 1.2.17 → 1.2.20

package/lib/esm/index.js

@@ -1,9 +1,10 @@
+import { replaceAll, $prose as $prose$1, getHTML } from '@jvs-milkdown/utils';
 import { defaultsDeep } from 'lodash-es';
 import { languages } from '@codemirror/language-data';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { createSlice } from '@jvs-milkdown/kit/ctx';
-import { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $prose, $useKeymap, $inputRule, getMarkdown } from '@jvs-milkdown/kit/utils';
-import { defineComponent, shallowRef, ref, computed, h, createApp, watchEffect, watch, onUnmounted, Fragment, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $prose, $useKeymap, getMarkdown, $inputRule } from '@jvs-milkdown/kit/utils';
+import { defineComponent, shallowRef, ref, computed, h as h$1, createApp, watchEffect, watch, onUnmounted, Fragment, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Icon } from '@jvs-milkdown/kit/component';
 import { blockConfig, block, BlockProvider } from '@jvs-milkdown/kit/plugin/block';
 import { commandsCtx, editorViewCtx, schemaCtx, editorCtx, EditorStatus, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
@@ -25,16 +26,16 @@ import { basicSetup } from 'codemirror';
 import { dropIndicatorConfig, cursor as cursor$1 } from '@jvs-milkdown/kit/plugin/cursor';
 import { createVirtualCursor } from 'prosemirror-virtual-cursor';
 import { diffBlockConfig, diffBlock } from '@jvs-milkdown/kit/component/diff-block';
+import { undo, redo } from '@jvs-milkdown/prose/history';
 import { Decoration, DecorationSet, EditorView } from '@jvs-milkdown/kit/prose/view';
 import { mergeCells, splitCell, CellSelection, selectedRect, splitCellWithType } from '@jvs-milkdown/kit/prose/tables';
 import clsx from 'clsx';
 import { toggleLinkCommand, configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@jvs-milkdown/kit/component/link-tooltip';
 import { inlineImageConfig, imageInlineComponent } from '@jvs-milkdown/kit/component/image-inline';
 import { Plugin as Plugin$1 } from '@jvs-milkdown/prose/state';
-import { $prose as $prose$1 } from '@jvs-milkdown/utils';
 import * as Diff from 'diff';
 import { tooltipFactory, TooltipProvider } from '@jvs-milkdown/kit/plugin/tooltip';
-import { redo, undo } from '@jvs-milkdown/kit/prose/history';
+import { redo as redo$1, undo as undo$1 } from '@jvs-milkdown/kit/prose/history';
 import { keymap as keymap$1 } from '@jvs-milkdown/kit/prose/keymap';
 import { Schema } from '@jvs-milkdown/kit/prose/model';
 import { textblockTypeInputRule } from '@jvs-milkdown/kit/prose/inputrules';
@@ -649,6 +650,31 @@ const formatPainterIcon = `
     </svg>
 `;
 
+const undoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M328.768 243.52a42.688 42.688 0 0 0-60.352-60.352L97.92 353.664A43.008 43.008 0 0 0 85.248 384a42.56 42.56 0 0 0 12.48 30.208l170.688 170.624a42.688 42.688 0 1 0 60.352-60.288l-97.92-97.92h451.712a170.688 170.688 0 1 1 0 341.376H469.248a42.688 42.688 0 1 0 0 85.312h213.312a256 256 0 1 0 0-512H230.912l97.856-97.792z" fill="currentColor"></path>
+</svg>
+`;
+
+const redoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M755.584 183.168a42.688 42.688 0 0 0-60.352 60.352l97.856 97.792H341.44a256 256 0 0 0 0 512h213.312a42.688 42.688 0 0 0 0-85.312H341.44a170.688 170.688 0 0 1 0-341.312h451.648l-97.856 97.856a42.688 42.688 0 0 0 60.352 60.288l170.048-170.048a42.56 42.56 0 0 0 0-61.568l-170.048-170.048z" fill="currentColor"></path>
+</svg>
+`;
+
+const exportIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M452.288 725.12L246.016 537.6c-4.928-4.48-10.432-8.832-14.72-13.696-20.8-23.232-21.312-42.944-2.304-59.52 17.664-15.36 43.392-14.976 65.536 4.48 49.088 43.328 32.256 27.712 80.512 71.744l69.376 63.36 11.968 10.688v-173.44c0-33.92-0.128-80.96-0.32-128.448-0.192-51.52-0.32-103.616-0.32-140.16L455.68 163.84a183.04 183.04 0 0 1 0.704-24.896c3.52-29.248 19.328-43.712 45.248-42.88 25.344 0.768 41.088 15.872 42.688 45.504 1.28 22.848 1.024 45.888 0.768 68.864l-0.128 27.136c0 50.048 0.128 112.832 0.256 176.384 0.192 71.552 0.384 144.192 0.32 200.704 74.432-68.224 131.968-119.68 162.688-147.584 7.424-6.72 14.912-14.272 24-18.304 18.688-8.448 37.76-7.808 52.8 7.36 14.72 14.72 16.384 31.36 3.968 48.192-3.84 5.248-8.64 10.112-13.44 14.656-45.76 41.92-189.76 173.248-236.16 214.464a62.336 62.336 0 0 1-8.064 6.016 43.712 43.712 0 0 1-15.872 9.792c-20.544 7.104-37.504-0.512-51.968-13.952l-11.2-10.24z m430.784-37.248c24-0.576 42.176 13.44 43.328 39.04 1.728 38.208 2.944 76.992-1.088 115.136-5.312 50.752-51.52 84.16-114.752 85.312-50.112 0.832-100.224 0.64-150.4 0.512l-64.832-0.128H422.272a26252.8 26252.8 0 0 1-194.432-0.192c-90.624-0.512-130.752-37.696-131.392-120.64l-0.192-17.408c-0.32-19.84-0.576-39.68 0.768-59.392 1.92-27.904 20.48-43.648 45.76-42.368 23.488 1.152 37.312 15.296 40.064 42.368 0.896 9.152 0.832 18.432 0.704 27.648l-0.064 10.816c0.384 71.744 7.36 78.208 88.128 78.272 117.248 0.128 234.432 0.128 351.68 0l43.968 0.192c36.096 0.064 72.192 0.192 108.288-0.448 52.672-0.96 64-12.096 65.152-60.288a494.464 494.464 0 0 0 0-21.76 365.632 365.632 0 0 1 0.704-35.84c2.24-26.048 17.92-40.32 41.664-40.832z" fill="currentColor"></path>
+</svg>
+`;
+
+const importIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M838.656 594.432a41.152 41.152 0 0 0-40.768 41.472v176.128c0 0.384-0.384 0.96-1.216 0.96H210.688c-0.768 0-1.216-0.576-1.216-0.96V275.968c0-0.384 0.448-0.96 1.216-0.96h143.616a41.088 41.088 0 0 0 41.28-41.472A41.088 41.088 0 0 0 354.304 192H210.688C165.12 192 128 229.76 128 275.968v536.064C128 858.368 165.12 896 210.688 896h585.984c45.632 0 82.688-37.632 82.688-83.968V635.904a41.152 41.152 0 0 0-40.704-41.472z" fill="currentColor"></path>
+  <path d="M895.744 229.056a40.896 40.896 0 0 0-44.864-36.8c-4.032 0.448-99.456 11.52-200.576 68.352-106.24 59.776-179.2 147.648-214.656 257.28l-44.672-131.584a40.576 40.576 0 0 0-51.84-25.792 41.664 41.664 0 0 0-25.152 52.928l80.064 235.968a40.576 40.576 0 0 0 51.84 25.6l0.512-0.128 232.192-85.312a41.728 41.728 0 0 0 24-52.928 40.576 40.576 0 0 0-51.648-25.152l-144 52.928c26.048-99.2 86.464-176.256 180.416-229.76a508.672 508.672 0 0 1 172.416-59.904c22.336-2.56 38.4-22.976 35.968-45.696z" fill="currentColor"></path>
+</svg>
+`;
+
 const defaultConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: oneDark,
@@ -780,6 +806,8 @@ const zhCN = {
   "customMenu.colorPurple": "\u7D2B\u8272",
   "customMenu.colorGray": "\u7070\u8272",
   "customMenu.insertTable": "\u63D2\u5165\u652F\u6301\u5BCC\u6587\u672C\u7684\u8868\u683C",
+  "customMenu.export": "\u5BFC\u51FA",
+  "customMenu.import": "\u5BFC\u5165",
   "customMenu.fontDefault": "\u9ED8\u8BA4",
   "font.fangSong": "\u4EFF\u5B8B",
   "font.stFangsong": "\u534E\u6587\u4EFF\u5B8B",
@@ -927,6 +955,8 @@ const enUS = {
   "customMenu.colorPurple": "Purple",
   "customMenu.colorGray": "Gray",
   "customMenu.insertTable": "Insert Table",
+  "customMenu.export": "Export",
+  "customMenu.import": "Import",
   "customMenu.fontDefault": "Default",
   "font.fangSong": "FangSong",
   "font.stFangsong": "STFangsong",
@@ -1208,7 +1238,7 @@ const MilkdownAttachmentBlock = defineComponent({
     return () => {
       var _a;
       if (!((_a = src.value) == null ? void 0 : _a.length)) {
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             class: [
@@ -1216,7 +1246,7 @@ const MilkdownAttachmentBlock = defineComponent({
               props.selected.value ? "selected" : ""
             ]
           },
-          /* @__PURE__ */ h("div", { class: "milkdown-attachment-uploader", onClick: triggerUpload }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }), /* @__PURE__ */ h("span", { class: "milkdown-attachment-upload-text" }, isUploading.value ? "Uploading..." : props.config.uploadButton), /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-uploader", onClick: triggerUpload }, /* @__PURE__ */ h$1(Icon, { icon: fileLinkIcon }), /* @__PURE__ */ h$1("span", { class: "milkdown-attachment-upload-text" }, isUploading.value ? "Uploading..." : props.config.uploadButton), /* @__PURE__ */ h$1(
             "input",
             {
               type: "file",
@@ -1230,7 +1260,7 @@ const MilkdownAttachmentBlock = defineComponent({
       if (isVideo.value) {
         const savedWidth = videoWidth.value;
         const widthStyle = isResizing.value && currentWidth.value > 0 ? `${currentWidth.value}px` : savedWidth && savedWidth > 0 ? `${savedWidth}px` : "100%";
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             ref: videoWrapperRef,
@@ -1244,7 +1274,7 @@ const MilkdownAttachmentBlock = defineComponent({
               position: "relative"
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "video",
             {
               src: src.value,
@@ -1253,28 +1283,28 @@ const MilkdownAttachmentBlock = defineComponent({
               onMousedown: (e) => e.stopPropagation()
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "video-resize-handle top-left",
               onPointerdown: (e) => onResizePointerDown(e, "top-left")
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "video-resize-handle top-right",
               onPointerdown: (e) => onResizePointerDown(e, "top-right")
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "video-resize-handle bottom-left",
               onPointerdown: (e) => onResizePointerDown(e, "bottom-left")
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "video-resize-handle bottom-right",
@@ -1283,7 +1313,7 @@ const MilkdownAttachmentBlock = defineComponent({
           )
         );
       }
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           class: [
@@ -1291,16 +1321,16 @@ const MilkdownAttachmentBlock = defineComponent({
             props.selected.value ? "selected" : ""
           ]
         },
-        /* @__PURE__ */ h("div", { class: "milkdown-attachment-icon-wrapper" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-raw-icon-bg" }, /* @__PURE__ */ h(Icon, { icon: fileLinkIcon }))),
-        /* @__PURE__ */ h("div", { class: "milkdown-attachment-info" }, /* @__PURE__ */ h("div", { class: "milkdown-attachment-name" }, name.value), /* @__PURE__ */ h("div", { class: "milkdown-attachment-size" }, (size.value || 0) > 0 ? formatBytes(size.value) : "")),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-icon-wrapper" }, /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-raw-icon-bg" }, /* @__PURE__ */ h$1(Icon, { icon: fileLinkIcon }))),
+        /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-info" }, /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-name" }, name.value), /* @__PURE__ */ h$1("div", { class: "milkdown-attachment-size" }, (size.value || 0) > 0 ? formatBytes(size.value) : "")),
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-attachment-action",
             onClick: openLink,
             title: props.config.downloadText
           },
-          /* @__PURE__ */ h(Icon, { icon: downloadIcon })
+          /* @__PURE__ */ h$1(Icon, { icon: downloadIcon })
         )
       );
     };
@@ -2493,7 +2523,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
-keepAlive(h);
+keepAlive(h$1);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -2839,7 +2869,7 @@ const Menu = defineComponent({
       const api = ctx.get(menuAPI.key);
       const showListMenu = (api == null ? void 0 : api.getMode()) === "list" || !(api == null ? void 0 : api.isProgrammatic()) || filter.value !== "";
       if (showListMenu) {
-        return /* @__PURE__ */ h("div", { ref: host, onPointerdown: (e) => e.preventDefault() }, /* @__PURE__ */ h("div", { class: "menu-groups", onPointermove: onPointerMove }, groupInfo.value.groups.map((group) => /* @__PURE__ */ h("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h("h6", null, group.label), /* @__PURE__ */ h("ul", null, group.items.map((item) => /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1("div", { ref: host, onPointerdown: (e) => e.preventDefault() }, /* @__PURE__ */ h$1("div", { class: "menu-groups", onPointermove: onPointerMove }, groupInfo.value.groups.map((group) => /* @__PURE__ */ h$1("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h$1("h6", null, group.label), /* @__PURE__ */ h$1("ul", null, group.items.map((item) => /* @__PURE__ */ h$1(
           "li",
           {
             key: item.key,
@@ -2882,9 +2912,9 @@ const Menu = defineComponent({
               runByIndex(item.index);
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: item.icon }),
-          /* @__PURE__ */ h("span", { style: item.key === "table" ? { flex: 1 } : {} }, item.label),
-          item.key === "table" ? /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(Icon, { icon: item.icon }),
+          /* @__PURE__ */ h$1("span", { style: item.key === "table" ? { flex: 1 } : {} }, item.label),
+          item.key === "table" ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2894,9 +2924,9 @@ const Menu = defineComponent({
                 transform: "rotate(-90deg)"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           ) : null
-        )))))), showTableMenu.value ? /* @__PURE__ */ h(
+        )))))), showTableMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -2919,7 +2949,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleTableLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2931,7 +2961,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2944,7 +2974,7 @@ const Menu = defineComponent({
             Array.from({ length: 9 }).map(
               (_, r) => Array.from({ length: 9 }).map((_2, c) => {
                 const isHovered = r < tableHoverIndices.value.r && c < tableHoverIndices.value.c;
-                return /* @__PURE__ */ h(
+                return /* @__PURE__ */ h$1(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -2973,7 +3003,7 @@ const Menu = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -2986,7 +3016,7 @@ const Menu = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h(
+          ) : /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -3175,7 +3205,7 @@ const Menu = defineComponent({
       const renderGridBtn = (key) => {
         const item = findItem(key);
         if (!item) return null;
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             title: item.label,
@@ -3196,11 +3226,11 @@ const Menu = defineComponent({
             },
             "data-index": item.index
           },
-          /* @__PURE__ */ h(Icon, { icon: item.icon })
+          /* @__PURE__ */ h$1(Icon, { icon: item.icon })
         );
       };
       const renderCustomRow = (iconHtml, label, hasArrow, onPointerEnter, onPointerLeave, onClick) => {
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             class: "custom-menu-row",
@@ -3216,12 +3246,12 @@ const Menu = defineComponent({
               onClick == null ? void 0 : onClick();
             }
           },
-          /* @__PURE__ */ h("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h(Icon, { icon: iconHtml }), /* @__PURE__ */ h("span", null, label)),
-          hasArrow ? /* @__PURE__ */ h(Icon, { icon: chevronDownIcon }) : null
+          /* @__PURE__ */ h$1("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h$1(Icon, { icon: iconHtml }), /* @__PURE__ */ h$1("span", null, label)),
+          hasArrow ? /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon }) : null
         );
       };
       const renderSubMenuItem = (iconHtml, label, isActive, onClick, disabled = false) => {
-        return /* @__PURE__ */ h(
+        return /* @__PURE__ */ h$1(
           "div",
           {
             class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -3239,7 +3269,7 @@ const Menu = defineComponent({
               if (!disabled) onClick();
             }
           },
-          /* @__PURE__ */ h("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h(Icon, { icon: iconHtml }), /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h$1(Icon, { icon: iconHtml }), /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -3248,18 +3278,18 @@ const Menu = defineComponent({
             },
             label
           )),
-          isActive ? /* @__PURE__ */ h("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h(Icon, { icon: confirmIcon })) : null
+          isActive ? /* @__PURE__ */ h$1("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })) : null
         );
       };
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           ref: host,
           onPointerdown: (e) => e.preventDefault(),
           class: "custom-block-menu"
         },
-        !isMedia ? /* @__PURE__ */ h("div", { class: "custom-grid-container" }, gridRows.map((rowKeys, rIndex) => /* @__PURE__ */ h("div", { class: "custom-grid-row", key: "row-" + rIndex }, rowKeys.map(renderGridBtn)))) : null,
-        showAlign ? /* @__PURE__ */ h("div", { class: "custom-divider" }) : null,
+        !isMedia ? /* @__PURE__ */ h$1("div", { class: "custom-grid-container" }, gridRows.map((rowKeys, rIndex) => /* @__PURE__ */ h$1("div", { class: "custom-grid-row", key: "row-" + rIndex }, rowKeys.map(renderGridBtn)))) : null,
+        showAlign ? /* @__PURE__ */ h$1("div", { class: "custom-divider" }) : null,
         showAlign && renderCustomRow(
           alignLeftIcon,
           i18n(ctx, "customMenu.indentAndAlign"),
@@ -3267,7 +3297,7 @@ const Menu = defineComponent({
           handleIndentAlignEnter,
           handleIndentAlignLeave
         ),
-        showIndentAlignMenu.value ? /* @__PURE__ */ h(
+        showIndentAlignMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3304,7 +3334,7 @@ const Menu = defineComponent({
             currentAlign === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h("div", { class: "custom-divider" }),
+          /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
           renderSubMenuItem(
             indentIncreaseIcon,
             i18n(ctx, "customMenu.increaseIndent"),
@@ -3326,7 +3356,7 @@ const Menu = defineComponent({
           handleColorEnter,
           handleColorLeave
         ),
-        showColorMenu.value ? /* @__PURE__ */ h(
+        showColorMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3350,7 +3380,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleColorLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -3361,7 +3391,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.textColor")
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -3370,7 +3400,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3400,7 +3430,7 @@ const Menu = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -3412,7 +3442,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.bgColor")
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -3421,7 +3451,7 @@ const Menu = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3445,7 +3475,7 @@ const Menu = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h(
+            color === "transparent" ? /* @__PURE__ */ h$1(
               "div",
               {
                 style: {
@@ -3469,7 +3499,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -3492,7 +3522,7 @@ const Menu = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               onPointerdown: (e) => {
@@ -3519,7 +3549,7 @@ const Menu = defineComponent({
             i18n(ctx, "customMenu.restoreDefault")
           )
         ) : null,
-        !isMedia ? /* @__PURE__ */ h("div", { class: "custom-divider" }) : null,
+        !isMedia ? /* @__PURE__ */ h$1("div", { class: "custom-divider" }) : null,
         renderCustomRow(
           clearIcon,
           i18n(ctx, "customMenu.cut"),
@@ -3544,7 +3574,7 @@ const Menu = defineComponent({
           void 0,
           applyDelete
         ),
-        /* @__PURE__ */ h("div", { class: "custom-divider" }),
+        /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
         renderCustomRow(
           plusIcon,
           i18n(ctx, "customMenu.addBelow"),
@@ -3552,7 +3582,7 @@ const Menu = defineComponent({
           handleAddBelowEnter,
           handleAddBelowLeave
         ),
-        showAddBelowMenu.value ? /* @__PURE__ */ h(
+        showAddBelowMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3572,14 +3602,14 @@ const Menu = defineComponent({
             },
             onPointerleave: handleAddBelowLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               class: "menu-groups",
               onPointermove: onPointerMove,
               style: { maxHeight: "300px", overflowY: "auto" }
             },
-            groupInfo.value.groups.map((group) => /* @__PURE__ */ h("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h("h6", null, group.label), /* @__PURE__ */ h("ul", null, group.items.map((item) => /* @__PURE__ */ h(
+            groupInfo.value.groups.map((group) => /* @__PURE__ */ h$1("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h$1("h6", null, group.label), /* @__PURE__ */ h$1("ul", null, group.items.map((item) => /* @__PURE__ */ h$1(
               "li",
               {
                 key: item.key,
@@ -3606,8 +3636,8 @@ const Menu = defineComponent({
                   runByIndexForAddBelow(item.index);
                 }
               },
-              /* @__PURE__ */ h(Icon, { icon: item.icon }),
-              /* @__PURE__ */ h("span", null, item.label)
+              /* @__PURE__ */ h$1(Icon, { icon: item.icon }),
+              /* @__PURE__ */ h$1("span", null, item.label)
             )))))
           )
         ) : null
@@ -3855,7 +3885,7 @@ function getBlockKey(node) {
   }
 }
 
-keepAlive(h, Fragment);
+keepAlive(h$1, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {
@@ -3903,7 +3933,7 @@ const BlockHandle = defineComponent({
     const addButton = ref();
     const menuButton = ref();
     return () => {
-      return /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
         "div",
         {
           ref: addButton,
@@ -3929,8 +3959,8 @@ const BlockHandle = defineComponent({
             props.onAdd(addButton.value);
           }
         },
-        /* @__PURE__ */ h(Icon, { icon: props.addIcon })
-      ), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(Icon, { icon: props.addIcon })
+      ), /* @__PURE__ */ h$1(
         "div",
         {
           ref: menuButton,
@@ -3948,14 +3978,14 @@ const BlockHandle = defineComponent({
             props.onLeaveMenu();
           }
         },
-        /* @__PURE__ */ h(Icon, { icon: props.state.icon })
-      ), /* @__PURE__ */ h("div", { class: "divider" }), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(Icon, { icon: props.state.icon })
+      ), /* @__PURE__ */ h$1("div", { class: "divider" }), /* @__PURE__ */ h$1(
         "div",
         {
           class: "operation-item drag-item",
           title: i18n(props.ctx, "handle.drag")
         },
-        /* @__PURE__ */ h(Icon, { icon: dragHandleIcon })
+        /* @__PURE__ */ h$1(Icon, { icon: dragHandleIcon })
       ));
     };
   }
@@ -4851,6 +4881,10 @@ function decrementPopupCount() {
     listeners.forEach((fn) => fn());
   }
 }
+function resetPopupCount() {
+  _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;
@@ -5400,7 +5434,7 @@ const activeIconMap = {
   [dividerIcon]: dividerIconActive
   // [highLineCodeIcon]: highLineCodeIconActive,
 };
-keepAlive(h, Fragment);
+keepAlive(h$1, Fragment);
 const formatPainterStates = /* @__PURE__ */ new WeakMap();
 const formatPainterHandlers = /* @__PURE__ */ new WeakMap();
 const formatPainterIgnoreNext = /* @__PURE__ */ new WeakMap();
@@ -5706,7 +5740,8 @@ const Toolbar = defineComponent({
       const container = toolbarContainerRef.value;
       if (!isFixed) {
         const view = ctx.get(editorViewCtx);
-        container.style.maxWidth = `${view.dom.clientWidth - 32}px`;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
       }
       let containerWidth;
       if (isFixed) {
@@ -5726,16 +5761,13 @@ const Toolbar = defineComponent({
         }
       } else {
         const view = ctx.get(editorViewCtx);
-        containerWidth = view.dom.clientWidth - 32;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        containerWidth = containerDOM.clientWidth - 32;
       }
-      if (containerWidth === lastContainerWidth) {
-        return;
-      }
-      lastContainerWidth = containerWidth;
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false;
       }
-      const MORE_BUTTON_WIDTH = 44;
+      const MORE_BUTTON_WIDTH = 56;
       const children = Array.from(container.children);
       const toolbarChildren = children.filter(
         (el) => el.style.position !== "fixed" && el.dataset.overflowButton !== "true"
@@ -5745,6 +5777,13 @@ const Toolbar = defineComponent({
         const child = toolbarChildren[i];
         totalWidth += measureChild(child, i);
       }
+      if (totalWidth === 0) {
+        return;
+      }
+      if (containerWidth === lastContainerWidth) {
+        return;
+      }
+      lastContainerWidth = containerWidth;
       if (totalWidth <= containerWidth) {
         overflowVisibleCount.value = Infinity;
         totalSectionCount.value = toolbarChildren.length;
@@ -5937,6 +5976,14 @@ const Toolbar = defineComponent({
       } else {
         const view = ctx.get(editorViewCtx);
         overflowResizeObserver.observe(view.dom);
+        const containerDOM = view.dom.closest(".milkdown-editor-container");
+        if (containerDOM) {
+          overflowResizeObserver.observe(containerDOM);
+        }
+        const rootDOM = view.dom.closest(".milkdown");
+        if (rootDOM) {
+          overflowResizeObserver.observe(rootDOM);
+        }
       }
       computeOverflow();
     };
@@ -5965,6 +6012,20 @@ const Toolbar = defineComponent({
       lastContainerWidth = 0;
       setTimeout(computeOverflow, 0);
     });
+    watch(
+      () => {
+        var _a;
+        return (_a = props.show) == null ? void 0 : _a.value;
+      },
+      (val) => {
+        if (val) {
+          cachedWidths.clear();
+          overflowVisibleCount.value = Infinity;
+          lastContainerWidth = 0;
+          setTimeout(computeOverflow, 0);
+        }
+      }
+    );
     const onClick = (fn) => (e) => {
       e.preventDefault();
       if (ctx) fn(ctx);
@@ -6282,7 +6343,7 @@ const Toolbar = defineComponent({
       showFontSizeMenu.value = false;
     };
     const renderSubMenuItem = (iconHtml, label, isActive, onClick2, disabled = false) => {
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -6314,13 +6375,13 @@ const Toolbar = defineComponent({
             e.currentTarget.style.backgroundColor = "transparent";
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "custom-menu-row-left",
             style: { display: "flex", alignItems: "center", gap: "8px" }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -6332,7 +6393,7 @@ const Toolbar = defineComponent({
               innerHTML: iconHtml
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -6343,7 +6404,7 @@ const Toolbar = defineComponent({
             label
           )
         ),
-        isActive ? /* @__PURE__ */ h(
+        isActive ? /* @__PURE__ */ h$1(
           "span",
           {
             style: {
@@ -6352,7 +6413,7 @@ const Toolbar = defineComponent({
               color: "var(--crepe-color-primary)"
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+          /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
         ) : null
       );
     };
@@ -6378,7 +6439,7 @@ const Toolbar = defineComponent({
       });
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           ref: toolbarContainerRef,
@@ -6389,7 +6450,7 @@ const Toolbar = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -6403,31 +6464,31 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: activeBlockItem.value || textIcon
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             style: {
               position: "relative",
-              display: isSectionOverflowed(0) ? "none" : "flex",
+              display: isSectionOverflowed(1) ? "none" : "flex",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               type: "button",
@@ -6448,7 +6509,7 @@ const Toolbar = defineComponent({
                 backgroundColor: formatPainterState.value ? "var(--crepe-color-selected, var(--crepe-color-hover))" : void 0
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "span",
               {
                 style: {
@@ -6461,19 +6522,19 @@ const Toolbar = defineComponent({
             )
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "divider",
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(1) ? "none" : void 0,
+              display: isSectionOverflowed(2) ? "none" : void 0,
               flexShrink: 0
             }
           }
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item custom-font-family-item",
@@ -6481,14 +6542,14 @@ const Toolbar = defineComponent({
             onMouseleave: handleFontFamilyLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(2) ? "none" : "flex",
+              display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "50px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -6502,7 +6563,7 @@ const Toolbar = defineComponent({
             },
             currentFontState.value.fontFamily && currentFontState.value.fontFamily !== "mixed" ? currentFontState.value.fontFamily.split(",")[0].replace(/['"]/g, "") || (ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4") : ctx ? i18n(ctx, "customMenu.fontDefault") : "\u9ED8\u8BA4"
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -6512,10 +6573,10 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item custom-font-size-item",
@@ -6523,15 +6584,15 @@ const Toolbar = defineComponent({
             onMouseleave: handleFontSizeLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(3) ? "none" : "flex",
+              display: isSectionOverflowed(4) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "40px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -6541,22 +6602,22 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "divider",
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(4) ? "none" : void 0,
+              display: isSectionOverflowed(5) ? "none" : void 0,
               flexShrink: 0
             }
           }
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -6564,28 +6625,28 @@ const Toolbar = defineComponent({
             onMouseleave: handleAlignLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(5) ? "none" : "flex",
+              display: isSectionOverflowed(6) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             class: "toolbar-item",
@@ -6593,13 +6654,13 @@ const Toolbar = defineComponent({
             onMouseleave: handleColorLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(6) ? "none" : "flex",
+              display: isSectionOverflowed(7) ? "none" : "flex",
               alignItems: "center",
               padding: "0 4px",
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               class: "milkdown-icon",
@@ -6612,22 +6673,22 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
           )
         ),
         (() => {
-          let sectionIdx = 7;
+          let sectionIdx = 8;
           return nonHeadingGroups.map((group, groupIndex) => {
             const items = group.items.map((item) => {
               const idx = sectionIdx;
               sectionIdx++;
               const isTable = item.icon === tableIcon;
-              return /* @__PURE__ */ h(
+              return /* @__PURE__ */ h$1(
                 "div",
                 {
                   key: item.label,
@@ -6639,7 +6700,7 @@ const Toolbar = defineComponent({
                   onMouseenter: isTable ? handleTableEnter : void 0,
                   onMouseleave: isTable ? handleTableLeave : void 0
                 },
-                /* @__PURE__ */ h(
+                /* @__PURE__ */ h$1(
                   "button",
                   {
                     type: "button",
@@ -6647,6 +6708,7 @@ const Toolbar = defineComponent({
                       "toolbar-item",
                       ctx && checkActive(item.active) && "active"
                     ),
+                    "data-key": item.key,
                     onPointerdown: (e) => {
                       if (isTable) {
                         e.preventDefault();
@@ -6662,14 +6724,14 @@ const Toolbar = defineComponent({
                       justifyContent: "center"
                     }
                   },
-                  /* @__PURE__ */ h(
+                  /* @__PURE__ */ h$1(
                     "span",
                     {
                       style: { display: "inline-flex", alignItems: "center" },
                       innerHTML: ctx && checkActive(item.active) ? activeIconMap[item.icon] || item.icon : item.icon
                     }
                   ),
-                  isTable ? /* @__PURE__ */ h(
+                  isTable ? /* @__PURE__ */ h$1(
                     "span",
                     {
                       style: {
@@ -6680,7 +6742,7 @@ const Toolbar = defineComponent({
                         opacity: 0.5
                       }
                     },
-                    /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+                    /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
                   ) : null
                 )
               );
@@ -6689,7 +6751,7 @@ const Toolbar = defineComponent({
             if (groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0) {
               sectionIdx++;
             }
-            return /* @__PURE__ */ h(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h(
+            return /* @__PURE__ */ h$1(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h$1(
               "div",
               {
                 class: "divider",
@@ -6701,7 +6763,7 @@ const Toolbar = defineComponent({
             ) : null);
           });
         })(),
-        hasOverflow ? /* @__PURE__ */ h(
+        hasOverflow ? /* @__PURE__ */ h$1(
           "div",
           {
             "data-overflow-button": "true",
@@ -6728,7 +6790,7 @@ const Toolbar = defineComponent({
               showOverflowMenu.value = true;
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
@@ -6736,7 +6798,7 @@ const Toolbar = defineComponent({
             }
           )
         ) : null,
-        showBlockMenu.value ? /* @__PURE__ */ h(
+        showBlockMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6761,7 +6823,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleBlockLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6818,7 +6880,7 @@ const Toolbar = defineComponent({
             );
           })
         ) : null,
-        showAlignMenu.value ? /* @__PURE__ */ h(
+        showAlignMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6841,7 +6903,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleAlignLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6872,7 +6934,7 @@ const Toolbar = defineComponent({
             currentAlignIndent.value.align === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6894,7 +6956,7 @@ const Toolbar = defineComponent({
             () => setIndent(-1),
             currentAlignIndent.value.indent <= 0
           ),
-          canMerge.value || canSplit.value ? /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+          canMerge.value || canSplit.value ? /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6914,7 +6976,7 @@ const Toolbar = defineComponent({
             onSplitCell
           )) : null
         ) : null,
-        showColorMenu.value ? /* @__PURE__ */ h(
+        showColorMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6938,7 +7000,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleColorLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6951,7 +7013,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -6962,7 +7024,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.textColor") : "\u5B57\u4F53\u989C\u8272"
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -6971,7 +7033,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -6994,7 +7056,7 @@ const Toolbar = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7006,7 +7068,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.bgColor") : "\u80CC\u666F\u989C\u8272"
           ),
-          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -7015,7 +7077,7 @@ const Toolbar = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -7032,7 +7094,7 @@ const Toolbar = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h(
+            color === "transparent" ? /* @__PURE__ */ h$1(
               "div",
               {
                 style: {
@@ -7056,7 +7118,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h(
+          ].map((color) => /* @__PURE__ */ h$1(
             "div",
             {
               key: color,
@@ -7072,7 +7134,7 @@ const Toolbar = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               onClick: clearColor,
@@ -7091,7 +7153,7 @@ const Toolbar = defineComponent({
             ctx ? i18n(ctx, "customMenu.restoreDefault") : "\u6062\u590D\u9ED8\u8BA4"
           )
         ) : null,
-        showFontFamilyMenu.value ? /* @__PURE__ */ h(
+        showFontFamilyMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7116,7 +7178,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontFamilyLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7177,7 +7239,7 @@ const Toolbar = defineComponent({
             }
           ].map((font) => {
             const supported = isFontSupported(font.value);
-            return /* @__PURE__ */ h(
+            return /* @__PURE__ */ h$1(
               "div",
               {
                 key: font.label,
@@ -7214,7 +7276,7 @@ const Toolbar = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -7224,7 +7286,7 @@ const Toolbar = defineComponent({
                 },
                 font.label
               ),
-              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h(
+              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -7233,12 +7295,12 @@ const Toolbar = defineComponent({
                     color: "var(--crepe-color-primary)"
                   }
                 },
-                /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+                /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
               ) : null
             );
           })
         ) : null,
-        showFontSizeMenu.value ? /* @__PURE__ */ h(
+        showFontSizeMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7263,7 +7325,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontSizeLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7288,7 +7350,7 @@ const Toolbar = defineComponent({
             { label: "28px", value: "28px" },
             { label: "32px", value: "32px" },
             { label: "36px", value: "36px" }
-          ].map((size) => /* @__PURE__ */ h(
+          ].map((size) => /* @__PURE__ */ h$1(
             "div",
             {
               key: size.label,
@@ -7319,7 +7381,7 @@ const Toolbar = defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "span",
               {
                 style: {
@@ -7329,7 +7391,7 @@ const Toolbar = defineComponent({
               },
               size.label
             ),
-            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h(
+            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h$1(
               "span",
               {
                 style: {
@@ -7338,11 +7400,11 @@ const Toolbar = defineComponent({
                   color: "var(--crepe-color-primary)"
                 }
               },
-              /* @__PURE__ */ h(Icon, { icon: confirmIcon })
+              /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
             ) : null
           ))
         ) : null,
-        showTableMenu.value ? /* @__PURE__ */ h(
+        showTableMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7365,7 +7427,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleTableLeave
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7378,7 +7440,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7390,7 +7452,7 @@ const Toolbar = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7403,7 +7465,7 @@ const Toolbar = defineComponent({
             Array.from({ length: 9 }).map(
               (_, r) => Array.from({ length: 9 }).map((_2, c) => {
                 const isHovered = r < tableHoverIndices.value.r && c < tableHoverIndices.value.c;
-                return /* @__PURE__ */ h(
+                return /* @__PURE__ */ h$1(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -7432,7 +7494,7 @@ const Toolbar = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7445,7 +7507,7 @@ const Toolbar = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h(
+          ) : /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -7458,7 +7520,7 @@ const Toolbar = defineComponent({
             "0 x 0"
           )
         ) : null,
-        showOverflowMenu.value ? /* @__PURE__ */ h(
+        showOverflowMenu.value ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "overflow-menu-popup",
@@ -7483,11 +7545,12 @@ const Toolbar = defineComponent({
           (() => {
             const cutoff = overflowVisibleCount.value;
             const items = [];
-            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave) => /* @__PURE__ */ h(
+            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave, key) => /* @__PURE__ */ h$1(
               "button",
               {
                 type: "button",
                 class: clsx("toolbar-item", isActive && "active"),
+                "data-key": key,
                 title,
                 onPointerdown: (e) => {
                   e.preventDefault();
@@ -7506,14 +7569,14 @@ const Toolbar = defineComponent({
                   justifyContent: "center"
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: { display: "inline-flex", alignItems: "center" },
                   innerHTML: iconHtml
                 }
               ),
-              hasDropdown ? /* @__PURE__ */ h(
+              hasDropdown ? /* @__PURE__ */ h$1(
                 "span",
                 {
                   style: {
@@ -7523,7 +7586,7 @@ const Toolbar = defineComponent({
                     opacity: 0.5
                   }
                 },
-                /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
+                /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
               ) : null
             );
             if (0 >= cutoff) {
@@ -7539,7 +7602,7 @@ const Toolbar = defineComponent({
                 )
               );
             }
-            if (2 >= cutoff) {
+            if (3 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -7552,7 +7615,7 @@ const Toolbar = defineComponent({
                 )
               );
             }
-            if (3 >= cutoff) {
+            if (4 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -7565,7 +7628,7 @@ const Toolbar = defineComponent({
                 )
               );
             }
-            if (5 >= cutoff) {
+            if (6 >= cutoff) {
               items.push(
                 renderIconButton(
                   currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon,
@@ -7578,7 +7641,7 @@ const Toolbar = defineComponent({
                 )
               );
             }
-            if (6 >= cutoff) {
+            if (7 >= cutoff) {
               items.push(
                 renderIconButton(
                   fontColorIcon,
@@ -7591,7 +7654,7 @@ const Toolbar = defineComponent({
                 )
               );
             }
-            let fmtIdx = 7;
+            let fmtIdx = 8;
             for (const group of nonHeadingGroups) {
               for (const item of group.items) {
                 const idx = fmtIdx;
@@ -7609,7 +7672,8 @@ const Toolbar = defineComponent({
                       },
                       isTable,
                       isTable ? handleTableEnter : void 0,
-                      isTable ? handleTableLeave : void 0
+                      isTable ? handleTableLeave : void 0,
+                      item.key
                     )
                   );
                 }
@@ -7789,7 +7853,15 @@ const MenuBar = defineComponent({
       { name: "\u6D45\u7D2B", value: "#F0E6FA" },
       { name: "\u6D45\u7C89", value: "#FDE8E9" }
     ];
-    const menuKeys = ["file", "edit", "view", "insert", "format"];
+    const menuKeys = computed(() => {
+      var _a;
+      const allKeys = ["file", "edit", "view", "insert", "format"];
+      const itemsConfig = (_a = props.config) == null ? void 0 : _a.menuBarItems;
+      if (!itemsConfig) return allKeys;
+      return allKeys.filter(
+        (key) => itemsConfig[key] !== false
+      );
+    });
     const hasSubmenu = (key) => key === "view";
     return () => {
       const state = viewState.value;
@@ -7878,7 +7950,7 @@ const MenuBar = defineComponent({
               e.stopPropagation();
             }
           },
-          menuKeys.map((menuKey) => {
+          menuKeys.value.map((menuKey) => {
             const isHovered = activeSubmenu.value === menuKey;
             const label = i18n(props.ctx, `menuBar.${menuKey}`) || menuKey;
             return /* @__PURE__ */ h(
@@ -8308,7 +8380,7 @@ const labelStyle = {
   color: "var(--crepe-color-on-surface, #333)"
 };
 function renderGroup(ctx, group) {
-  return /* @__PURE__ */ h("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ h("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ h("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ h("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ h("span", { key: i, style: badgeStyle }, fmt(key))))))));
+  return /* @__PURE__ */ h$1("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ h$1("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ h$1("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ h$1("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ h$1("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ h$1("span", { key: i, style: badgeStyle }, fmt(key))))))));
 }
 const ShortcutHelpModal = defineComponent({
   props: {
@@ -8324,7 +8396,7 @@ const ShortcutHelpModal = defineComponent({
     };
     onMounted(() => document.addEventListener("keydown", onKeydown));
     onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
-    return () => /* @__PURE__ */ h(
+    return () => /* @__PURE__ */ h$1(
       "div",
       {
         style: {
@@ -8338,7 +8410,7 @@ const ShortcutHelpModal = defineComponent({
         },
         onClick: close
       },
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ h$1(
         "div",
         {
           style: {
@@ -8352,7 +8424,7 @@ const ShortcutHelpModal = defineComponent({
           },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -8364,7 +8436,7 @@ const ShortcutHelpModal = defineComponent({
               borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "span",
             {
               style: {
@@ -8375,7 +8447,7 @@ const ShortcutHelpModal = defineComponent({
             },
             i18n(props.ctx, "shortcuts.title")
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "button",
             {
               type: "button",
@@ -8393,10 +8465,10 @@ const ShortcutHelpModal = defineComponent({
                 color: "var(--crepe-color-on-surface-variant, #666)"
               }
             },
-            /* @__PURE__ */ h(Icon, { icon: closeIcon })
+            /* @__PURE__ */ h$1(Icon, { icon: closeIcon })
           )
         ),
-        /* @__PURE__ */ h("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h$1("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -8405,7 +8477,7 @@ const ShortcutHelpModal = defineComponent({
               backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           }
-        ), /* @__PURE__ */ h("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
+        ), /* @__PURE__ */ h$1("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
       )
     );
   }
@@ -8417,70 +8489,161 @@ const FixedToolbarComponent = defineComponent({
     hide: { type: Function, required: true },
     show: { type: Object, required: true },
     selection: { type: Object, required: true },
-    config: { type: Object, required: false }
+    config: { type: Object, required: false },
+    canUndo: { type: Object, required: true },
+    canRedo: { type: Object, required: true }
   },
   setup(props) {
     const showShortcuts = ref(false);
-    return () => /* @__PURE__ */ h(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-          gap: "0px"
-        }
-      },
-      /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
-      /* @__PURE__ */ h(
-        "div",
-        {
-          style: {
-            width: "1px",
-            minWidth: "1px",
-            height: "20px",
-            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-          }
-        }
-      ),
-      /* @__PURE__ */ h(
-        Toolbar,
-        {
-          ctx: props.ctx,
-          hide: props.hide,
-          show: props.show,
-          selection: props.selection,
-          config: props.config,
-          isFixed: true
-        }
-      ),
-      /* @__PURE__ */ h(
+    onMounted(() => {
+      const handleShowShortcuts = () => {
+        showShortcuts.value = true;
+      };
+      window.addEventListener("milkdown-show-shortcuts", handleShowShortcuts);
+      onUnmounted(() => {
+        window.removeEventListener(
+          "milkdown-show-shortcuts",
+          handleShowShortcuts
+        );
+      });
+    });
+    return () => {
+      var _a, _b, _c, _d;
+      props.selection.value;
+      const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_a = props.canUndo) == null ? void 0 : _a.value) || false;
+      const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_b = props.canRedo) == null ? void 0 : _b.value) || false;
+      return /* @__PURE__ */ h(
         "div",
         {
           style: {
-            width: "1px",
-            minWidth: "1px",
-            height: "20px",
-            flexShrink: 0,
-            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-          }
-        }
-      ),
-      /* @__PURE__ */ h(
-        "button",
-        {
-          type: "button",
-          class: "toolbar-shortcut-btn",
-          title: i18n(props.ctx, "shortcuts.title"),
-          onClick: () => {
-            showShortcuts.value = true;
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            gap: "0px",
+            minWidth: "0",
+            overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h(Icon, { icon: keyboardIcon })
-      ),
-      showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
-    );
+        ((_c = props.config) == null ? void 0 : _c.showMenuBar) !== false && [
+          /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              style: {
+                width: "1px",
+                minWidth: "1px",
+                height: "20px",
+                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+              }
+            }
+          )
+        ],
+        ((_d = props.config) == null ? void 0 : _d.showHistory) !== false && [
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              class: ["toolbar-item", !canUndo && "disabled"],
+              disabled: !canUndo,
+              title: "\u64A4\u9500",
+              onPointerdown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (canUndo) {
+                  props.ctx.get(commandsCtx).call("Undo");
+                }
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                cursor: canUndo ? "pointer" : "default",
+                padding: "6px",
+                borderRadius: "4px",
+                color: canUndo ? "#363b4c" : "#c0c4cc",
+                "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
+              }
+            },
+            /* @__PURE__ */ h(
+              "span",
+              {
+                style: { display: "inline-flex", alignItems: "center" },
+                innerHTML: undoIcon
+              }
+            )
+          ),
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              class: ["toolbar-item", !canRedo && "disabled"],
+              disabled: !canRedo,
+              title: "\u6062\u590D",
+              onPointerdown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (canRedo) {
+                  props.ctx.get(commandsCtx).call("Redo");
+                }
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                cursor: canRedo ? "pointer" : "default",
+                padding: "6px",
+                borderRadius: "4px",
+                color: canRedo ? "#363b4c" : "#c0c4cc",
+                "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
+              }
+            },
+            /* @__PURE__ */ h(
+              "span",
+              {
+                style: { display: "inline-flex", alignItems: "center" },
+                innerHTML: redoIcon
+              }
+            )
+          ),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              style: {
+                width: "1px",
+                minWidth: "1px",
+                height: "20px",
+                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+              }
+            }
+          )
+        ],
+        /* @__PURE__ */ h(
+          Toolbar,
+          {
+            ctx: props.ctx,
+            hide: props.hide,
+            show: props.show,
+            selection: props.selection,
+            config: props.config,
+            isFixed: true
+          }
+        ),
+        showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+      );
+    };
   }
 });
 
@@ -8906,10 +9069,69 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       }
     });
   }
+  const documentGroup = builder.addGroup("document", "Document");
+  if ((_config == null ? void 0 : _config.showExport) !== false) {
+    documentGroup.addItem("export", {
+      label: ctx ? i18n(ctx, "customMenu.export") || "\u5BFC\u51FA" : "\u5BFC\u51FA",
+      icon: exportIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const markdown = getMarkdown()(ctx2);
+        if (_config == null ? void 0 : _config.onExport) {
+          _config.onExport(markdown, ctx2);
+        } else {
+          const blob = new Blob([markdown], {
+            type: "text/markdown;charset=utf-8;"
+          });
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = "document.md";
+          link.click();
+          URL.revokeObjectURL(url);
+        }
+      }
+    });
+  }
+  if ((_config == null ? void 0 : _config.showImport) !== false) {
+    documentGroup.addItem("import", {
+      label: ctx ? i18n(ctx, "customMenu.import") || "\u5BFC\u5165" : "\u5BFC\u5165",
+      icon: importIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        if (_config == null ? void 0 : _config.onImport) {
+          _config.onImport((markdown) => replaceAll(markdown)(ctx2), ctx2);
+        } else {
+          const input = document.createElement("input");
+          input.type = "file";
+          input.accept = ".md";
+          input.onchange = (e) => {
+            var _a;
+            const file = (_a = e.target.files) == null ? void 0 : _a[0];
+            if (!file) return;
+            file.text().then((text) => {
+              replaceAll(text)(ctx2);
+            }).catch((err) => {
+              console.error("Failed to read file:", err);
+            });
+          };
+          input.click();
+        }
+      }
+    });
+  }
+  documentGroup.addItem("shortcuts", {
+    label: ctx ? i18n(ctx, "shortcuts.title") : "Shortcuts",
+    icon: keyboardIcon,
+    active: () => false,
+    onRun: () => {
+      window.dispatchEvent(new CustomEvent("milkdown-show-shortcuts"));
+    }
+  });
   return builder.build();
 }
 
-keepAlive(h);
+keepAlive(h$1);
 const DocumentHeader = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -8986,13 +9208,13 @@ const DocumentHeader = defineComponent({
       var _a, _b;
       const state = viewState.value;
       if (!state.showTitle && !state.showCover) return null;
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           class: "milkdown-document-header",
           style: { width: "100%", display: "flex", flexDirection: "column" }
         },
-        state.showCover ? /* @__PURE__ */ h(
+        state.showCover ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-document-cover",
@@ -9010,7 +9232,7 @@ const DocumentHeader = defineComponent({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "img",
             {
               src: state.coverUrl,
@@ -9023,7 +9245,7 @@ const DocumentHeader = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -9040,7 +9262,7 @@ const DocumentHeader = defineComponent({
                 background: "linear-gradient(transparent, rgba(0,0,0,0.7))"
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "div",
               {
                 style: {
@@ -9052,7 +9274,7 @@ const DocumentHeader = defineComponent({
               },
               (lastUploadedUrl.value ? [lastUploadedUrl.value] : []).concat(
                 ((_b = (_a = props.config) == null ? void 0 : _a.defaultCoverImages) == null ? void 0 : _b.length) ? props.config.defaultCoverImages : builtInCoverImages
-              ).map((src, i) => /* @__PURE__ */ h(
+              ).map((src, i) => /* @__PURE__ */ h$1(
                 "img",
                 {
                   key: i,
@@ -9082,7 +9304,7 @@ const DocumentHeader = defineComponent({
                 }
               ))
             ),
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "div",
               {
                 onClick: () => {
@@ -9110,7 +9332,7 @@ const DocumentHeader = defineComponent({
                   e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.2)";
                 }
               },
-              /* @__PURE__ */ h(
+              /* @__PURE__ */ h$1(
                 "svg",
                 {
                   width: "14",
@@ -9122,14 +9344,14 @@ const DocumentHeader = defineComponent({
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round"
                 },
-                /* @__PURE__ */ h("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                /* @__PURE__ */ h("polyline", { points: "17 8 12 3 7 8" }),
-                /* @__PURE__ */ h("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                /* @__PURE__ */ h$1("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ h$1("polyline", { points: "17 8 12 3 7 8" }),
+                /* @__PURE__ */ h$1("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
               ),
               "\u4E0A\u4F20"
             )
           ),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1(
             "input",
             {
               type: "file",
@@ -9140,7 +9362,7 @@ const DocumentHeader = defineComponent({
             }
           )
         ) : null,
-        state.showTitle ? /* @__PURE__ */ h(
+        state.showTitle ? /* @__PURE__ */ h$1(
           "div",
           {
             class: "milkdown-document-title-wrapper",
@@ -9151,8 +9373,8 @@ const DocumentHeader = defineComponent({
               padding: `40px ${editorWidthMap[state.editorWidth] === "none" ? "80px" : "0"} 0`
             }
           },
-          /* @__PURE__ */ h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
+          /* @__PURE__ */ h$1(
             "textarea",
             {
               ref: titleTextareaRef,
@@ -9526,7 +9748,7 @@ const OutlinePanel = defineComponent({
       const state = viewState.value;
       if (!state.outlineVisible) return null;
       const isLeft = state.outlinePosition === "left";
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1(
         "div",
         {
           class: "milkdown-outline-panel",
@@ -9547,7 +9769,7 @@ const OutlinePanel = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -9561,8 +9783,8 @@ const OutlinePanel = defineComponent({
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ h("span", null, i18n(props.ctx, "view.outline")),
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ h$1("span", null, i18n(props.ctx, "view.outline")),
+          /* @__PURE__ */ h$1(
             "div",
             {
               style: {
@@ -9586,7 +9808,7 @@ const OutlinePanel = defineComponent({
               },
               title: "\u5173\u95ED\u5927\u7EB2"
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "svg",
               {
                 width: "16",
@@ -9598,12 +9820,12 @@ const OutlinePanel = defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               },
-              /* @__PURE__ */ h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              /* @__PURE__ */ h$1("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ h$1("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             )
           )
         ),
-        /* @__PURE__ */ h("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ h$1(
           "div",
           {
             style: {
@@ -9616,7 +9838,7 @@ const OutlinePanel = defineComponent({
         ) : null, visibleItems.value.map(({ item, hasChildren: hasKids }) => {
           const isActive = activeId.value === item.id;
           const collapsed = collapsedIds.value.has(item.id);
-          return /* @__PURE__ */ h(
+          return /* @__PURE__ */ h$1(
             "div",
             {
               key: item.id,
@@ -9650,7 +9872,7 @@ const OutlinePanel = defineComponent({
                 }
               }
             },
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "span",
               {
                 onClick: (e) => {
@@ -9683,7 +9905,7 @@ const OutlinePanel = defineComponent({
               "\u25BC",
               " "
             ),
-            /* @__PURE__ */ h(
+            /* @__PURE__ */ h$1(
               "span",
               {
                 title: item.text,
@@ -9696,7 +9918,7 @@ const OutlinePanel = defineComponent({
             )
           );
         })),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ h$1(
           "div",
           {
             onPointerdown: onPointerDown,
@@ -9735,7 +9957,7 @@ var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Ca
 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;
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _canUndo, _canRedo, _resizeObserver$1, _updateOutlineGeometry, _scrollContainers$1, _onDblClick, _view$1, _editorContainer;
 const fixedToolbarConfig = $ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -9752,6 +9974,8 @@ class FixedToolbarView {
     __privateAdd$4(this, _watcher);
     __privateAdd$4(this, _selection$1);
     __privateAdd$4(this, _show$1, ref(true));
+    __privateAdd$4(this, _canUndo, ref(false));
+    __privateAdd$4(this, _canRedo, ref(false));
     __privateAdd$4(this, _resizeObserver$1);
     __privateAdd$4(this, _updateOutlineGeometry);
     __privateAdd$4(this, _scrollContainers$1, []);
@@ -9760,6 +9984,11 @@ class FixedToolbarView {
     __privateAdd$4(this, _editorContainer);
     this.update = (view) => {
       __privateGet$4(this, _selection$1).value = view.state.selection;
+      try {
+        __privateGet$4(this, _canUndo).value = undo(view.state);
+        __privateGet$4(this, _canRedo).value = redo(view.state);
+      } catch (e) {
+      }
     };
     this.destroy = () => {
       if (__privateGet$4(this, _watcher)) __privateGet$4(this, _watcher).call(this);
@@ -9784,6 +10013,60 @@ class FixedToolbarView {
     };
     __privateSet$4(this, _view$1, view);
     const config = ctx.get(fixedToolbarConfig.key);
+    const viewState = ctx.get(viewMenuStateCtx.key);
+    if (config == null ? void 0 : config.useLocalStorage) {
+      try {
+        const stored = localStorage.getItem("jvs-milkdown-data");
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          if (parsed.outlineVisible !== void 0)
+            viewState.outlineVisible = parsed.outlineVisible;
+          if (parsed.outlinePosition !== void 0)
+            viewState.outlinePosition = parsed.outlinePosition;
+          if (parsed.outlineWidth !== void 0)
+            viewState.outlineWidth = parsed.outlineWidth;
+          if (parsed.documentBackground !== void 0)
+            viewState.documentBackground = parsed.documentBackground;
+          if (parsed.showTitle !== void 0)
+            viewState.showTitle = parsed.showTitle;
+          if (parsed.showCover !== void 0)
+            viewState.showCover = parsed.showCover;
+          if (parsed.coverUrl !== void 0)
+            viewState.coverUrl = parsed.coverUrl;
+          if (parsed.editorWidth !== void 0)
+            viewState.editorWidth = parsed.editorWidth;
+        }
+      } catch (e) {
+        console.error("Error loading view state from localStorage:", e);
+      }
+      watch(
+        viewState,
+        (newState) => {
+          try {
+            const stored = localStorage.getItem("jvs-milkdown-data");
+            let parsed = {};
+            if (stored) {
+              parsed = JSON.parse(stored);
+            }
+            const merged = {
+              ...parsed,
+              outlineVisible: newState.outlineVisible,
+              outlinePosition: newState.outlinePosition,
+              outlineWidth: newState.outlineWidth,
+              documentBackground: newState.documentBackground,
+              showTitle: newState.showTitle,
+              showCover: newState.showCover,
+              coverUrl: newState.coverUrl,
+              editorWidth: newState.editorWidth
+            };
+            localStorage.setItem("jvs-milkdown-data", JSON.stringify(merged));
+          } catch (e) {
+            console.error("Error saving view state to localStorage:", e);
+          }
+        },
+        { deep: true }
+      );
+    }
     const content = document.createElement("div");
     content.className = "milkdown-fixed-toolbar";
     __privateSet$4(this, _selection$1, shallowRef(view.state.selection));
@@ -9794,7 +10077,9 @@ class FixedToolbarView {
       // No-op for fixed toolbar
       config,
       selection: __privateGet$4(this, _selection$1),
-      show: __privateGet$4(this, _show$1)
+      show: __privateGet$4(this, _show$1),
+      canUndo: __privateGet$4(this, _canUndo),
+      canRedo: __privateGet$4(this, _canRedo)
     });
     app.mount(content);
     __privateSet$4(this, _content$2, content);
@@ -9851,9 +10136,9 @@ class FixedToolbarView {
       });
       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);
+      const viewState2 = ctx.get(viewMenuStateCtx.key);
       if (config.outlinePosition) {
-        viewState.outlinePosition = config.outlinePosition;
+        viewState2.outlinePosition = config.outlinePosition;
       }
       __privateSet$4(this, _updateOutlineGeometry, () => {
         const rootRect = root.getBoundingClientRect();
@@ -9862,7 +10147,7 @@ class FixedToolbarView {
           const toolbarRect = __privateGet$4(this, _content$2).getBoundingClientRect();
           outlineTop = Math.max(outlineTop, toolbarRect.bottom);
         }
-        if (viewState.showCover && __privateGet$4(this, _headerContent)) {
+        if (viewState2.showCover && __privateGet$4(this, _headerContent)) {
           const coverEl = __privateGet$4(this, _headerContent).querySelector(
             ".milkdown-document-cover"
           );
@@ -9879,8 +10164,8 @@ class FixedToolbarView {
         }
         outlineContent.style.top = `${outlineTop}px`;
         outlineContent.style.height = `${height}px`;
-        if (viewState.outlineVisible) {
-          if (viewState.outlinePosition === "left") {
+        if (viewState2.outlineVisible) {
+          if (viewState2.outlinePosition === "left") {
             outlineContent.style.left = `${rootRect.left}px`;
             outlineContent.style.right = "auto";
           } else {
@@ -9930,16 +10215,16 @@ class FixedToolbarView {
       }
       __privateSet$4(this, _watcher, watch(
         () => [
-          viewState.outlineVisible,
-          viewState.outlinePosition,
-          viewState.outlineWidth,
-          viewState.documentBackground,
-          viewState.showCover,
-          viewState.editorWidth
+          viewState2.outlineVisible,
+          viewState2.outlinePosition,
+          viewState2.outlineWidth,
+          viewState2.documentBackground,
+          viewState2.showCover,
+          viewState2.editorWidth
         ],
         () => {
-          if (viewState.documentBackground) {
-            root.style.backgroundColor = viewState.documentBackground;
+          if (viewState2.documentBackground) {
+            root.style.backgroundColor = viewState2.documentBackground;
           } else {
             root.style.backgroundColor = "";
           }
@@ -9949,20 +10234,20 @@ class FixedToolbarView {
           __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`;
+            if (viewState2.outlineVisible) {
+              if (viewState2.outlinePosition === "left") {
+                __privateGet$4(this, _editorContainer).style.paddingLeft = `${viewState2.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`;
+                __privateGet$4(this, _editorContainer).style.paddingRight = `${viewState2.outlineWidth}px`;
               }
             } else {
               __privateGet$4(this, _editorContainer).style.paddingLeft = "0";
               __privateGet$4(this, _editorContainer).style.paddingRight = "0";
             }
           }
-          const maxWidth = editorWidthMap[viewState.editorWidth];
+          const maxWidth = editorWidthMap[viewState2.editorWidth];
           const isFull = maxWidth === "none";
           const px = isFull ? "80px" : "0";
           __privateGet$4(this, _view$1).dom.style.maxWidth = maxWidth;
@@ -9970,7 +10255,7 @@ class FixedToolbarView {
           __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.margin = isFull && !viewState2.showCover ? "0 auto" : "0";
             __privateGet$4(this, _headerContent).style.padding = `0px`;
           }
           void nextTick(() => {
@@ -9996,6 +10281,8 @@ _outlineApp = new WeakMap();
 _watcher = new WeakMap();
 _selection$1 = new WeakMap();
 _show$1 = new WeakMap();
+_canUndo = new WeakMap();
+_canRedo = new WeakMap();
 _resizeObserver$1 = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
 _scrollContainers$1 = new WeakMap();
@@ -10150,7 +10437,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
       }));
       function renderTab(tab, label) {
         const isActive = activeTab.value === tab;
-        return h(
+        return h$1(
           "button",
           {
             style: {
@@ -10172,8 +10459,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
       function renderItem(change, index) {
         const color = typeColors[change.type];
         const children = [
-          h("div", { style: { marginBottom: "4px" } }, [
-            h(
+          h$1("div", { style: { marginBottom: "4px" } }, [
+            h$1(
               "span",
               {
                 style: {
@@ -10192,7 +10479,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
         ];
         if (change.oldText) {
           children.push(
-            h(
+            h$1(
               "div",
               {
                 style: {
@@ -10204,19 +10491,19 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                 }
               },
               [
-                h(
+                h$1(
                   "span",
                   { style: { color: "#999", fontSize: "11px" } },
                   "\u539F\u6587: "
                 ),
-                h("span", null, change.oldText)
+                h$1("span", null, change.oldText)
               ]
             )
           );
         }
         if (change.newText) {
           children.push(
-            h(
+            h$1(
               "div",
               {
                 style: {
@@ -10227,17 +10514,17 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                 }
               },
               [
-                h(
+                h$1(
                   "span",
                   { style: { color: "#999", fontSize: "11px" } },
                   "\u5DEE\u5F02: "
                 ),
-                h("span", { style: { color } }, change.newText)
+                h$1("span", { style: { color } }, change.newText)
               ]
             )
           );
         }
-        return h(
+        return h$1(
           "div",
           {
             style: {
@@ -10255,7 +10542,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
           children
         );
       }
-      return () => h(
+      return () => h$1(
         "div",
         {
           style: {
@@ -10273,7 +10560,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
         },
         [
           // Header
-          h(
+          h$1(
             "div",
             {
               style: {
@@ -10289,8 +10576,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
               }
             },
             [
-              h("span", null, "\u6587\u6863\u5DEE\u5F02\u53D8\u66F4"),
-              onClose ? h(
+              h$1("span", null, "\u6587\u6863\u5DEE\u5F02\u53D8\u66F4"),
+              onClose ? h$1(
                 "div",
                 {
                   style: {
@@ -10318,7 +10605,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                   title: "\u5173\u95ED\u5DEE\u5F02"
                 },
                 [
-                  h(
+                  h$1(
                     "svg",
                     {
                       width: "16",
@@ -10331,8 +10618,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                       strokeLinejoin: "round"
                     },
                     [
-                      h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      h$1("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      h$1("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                     ]
                   )
                 ]
@@ -10340,7 +10627,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
             ]
           ),
           // Tabs
-          h(
+          h$1(
             "div",
             {
               style: {
@@ -10357,7 +10644,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
             ]
           ),
           // List
-          h(
+          h$1(
             "div",
             {
               style: {
@@ -11065,7 +11352,7 @@ const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
 
 const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
 
-keepAlive(h);
+keepAlive(h$1);
 const LatexTooltip = defineComponent({
   props: {
     ctx: {
@@ -11101,7 +11388,7 @@ const LatexTooltip = defineComponent({
       }
     };
     return () => {
-      return /* @__PURE__ */ h("div", { class: "container container-large" }, /* @__PURE__ */ h("div", { class: "input-container" }, props.innerView ? /* @__PURE__ */ h("div", { ref: innerViewRef }) : null), /* @__PURE__ */ h("div", { class: "footer" }, /* @__PURE__ */ h("span", { class: "left" }, i18n(props.ctx, "latex.escToExit")), /* @__PURE__ */ h(
+      return /* @__PURE__ */ h$1("div", { class: "container container-large" }, /* @__PURE__ */ h$1("div", { class: "input-container" }, props.innerView ? /* @__PURE__ */ h$1("div", { ref: innerViewRef }) : null), /* @__PURE__ */ h$1("div", { class: "footer" }, /* @__PURE__ */ h$1("span", { class: "left" }, i18n(props.ctx, "latex.escToExit")), /* @__PURE__ */ h$1(
         "a",
         {
           class: "right",
@@ -11109,7 +11396,7 @@ const LatexTooltip = defineComponent({
           target: "_blank",
           style: "display: none;"
         },
-        /* @__PURE__ */ h(Icon, { icon: helpIcon }),
+        /* @__PURE__ */ h$1(Icon, { icon: helpIcon }),
         " ",
         i18n(props.ctx, "latex.helpDoc")
       )));
@@ -11191,9 +11478,9 @@ class LatexInlineTooltip {
             doc: innerDoc,
             plugins: [
               keymap$1({
-                "Mod-z": undo,
-                "Mod-Z": redo,
-                "Mod-y": redo,
+                "Mod-z": undo$1,
+                "Mod-Z": redo$1,
+                "Mod-y": redo$1,
                 Enter: () => {
                   if (__privateGet$2(this, _debounceTimer)) {
                     clearTimeout(__privateGet$2(this, _debounceTimer));
@@ -11870,25 +12157,120 @@ class Crepe extends CrepeBuilder {
   /// The constructor of the crepe editor.
   /// You can pass configs to the editor to configure the editor.
   /// Calling the constructor will not create the editor, you need to call `create` to create the editor.
-  constructor({
-    features = {},
-    featureConfigs = {},
-    ...crepeBuilderConfig
-  } = {}) {
-    super(crepeBuilderConfig);
+  constructor(config = {}) {
+    var _a;
+    resetPopupCount();
+    const { features = {}, featureConfigs = {}, ...crepeBuilderConfig } = config;
     const finalConfigs = defaultsDeep(featureConfigs, defaultConfig);
+    const fixedToolbarConfig = finalConfigs[CrepeFeature.FixedToolbar];
+    if (fixedToolbarConfig == null ? void 0 : fixedToolbarConfig.useLocalStorage) {
+      try {
+        const stored = localStorage.getItem("jvs-milkdown-data");
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          const docId = fixedToolbarConfig.id || "default";
+          if (parsed.content && parsed.content[docId] !== void 0) {
+            const entry = parsed.content[docId];
+            const defaultValue = typeof entry === "string" ? entry : (_a = entry == null ? void 0 : entry.markdown) != null ? _a : "";
+            crepeBuilderConfig.defaultValue = defaultValue;
+          }
+        }
+      } catch (e) {
+        console.error("Error loading content from localStorage:", e);
+      }
+    }
+    super(crepeBuilderConfig);
+    this.destroy = () => {
+      resetPopupCount();
+      return this.editor.destroy();
+    };
     const enabledFeatures = Object.entries({
       ...defaultFeatures,
       ...features
     }).filter(([, enabled]) => enabled).map(([feature]) => feature);
     enabledFeatures.forEach((feature) => {
-      const config = finalConfigs[feature];
-      loadFeature(feature, this.editor, config);
+      const config2 = finalConfigs[feature];
+      loadFeature(feature, this.editor, config2);
     });
+    if (fixedToolbarConfig == null ? void 0 : fixedToolbarConfig.useLocalStorage) {
+      this.on((listener) => {
+        listener.markdownUpdated((_, markdown) => {
+          try {
+            const html = this.editor.action(getHTML());
+            const docId = fixedToolbarConfig.id || "default";
+            const saveToLocalStorage = (mdVal, htmlVal) => {
+              try {
+                const stored = localStorage.getItem("jvs-milkdown-data");
+                let parsed = {};
+                if (stored) {
+                  parsed = JSON.parse(stored);
+                }
+                if (!parsed.content) {
+                  parsed.content = {};
+                }
+                const currentEntry = parsed.content[docId];
+                const hasChanged = !currentEntry || typeof currentEntry === "string" && currentEntry !== mdVal || typeof currentEntry === "object" && (currentEntry.markdown !== mdVal || currentEntry.html !== htmlVal);
+                if (hasChanged) {
+                  parsed.content[docId] = {
+                    markdown: mdVal,
+                    html: htmlVal
+                  };
+                  localStorage.setItem(
+                    "jvs-milkdown-data",
+                    JSON.stringify(parsed)
+                  );
+                }
+              } catch (e) {
+                console.error("Error saving content to localStorage:", e);
+              }
+            };
+            const hasBlobUrl = /blob:https?:\/\//.test(markdown) || /blob:https?:\/\//.test(html);
+            if (hasBlobUrl) {
+              Promise.all([
+                replaceBlobUrlsWithBase64(markdown),
+                replaceBlobUrlsWithBase64(html)
+              ]).then(([base64Markdown, base64Html]) => {
+                saveToLocalStorage(base64Markdown, base64Html);
+              }).catch((e) => {
+                console.error("Error converting blob URLs:", e);
+                saveToLocalStorage(markdown, html);
+              });
+            } else {
+              saveToLocalStorage(markdown, html);
+            }
+          } catch (e) {
+            console.error("Error saving content to localStorage:", e);
+          }
+        });
+      });
+    }
   }
 }
 /// This is an alias for the `CrepeFeature` enum.
 Crepe.Feature = CrepeFeature;
+async function replaceBlobUrlsWithBase64(content) {
+  const blobRegex = /blob:https?:\/\/[^\s'")>]+/g;
+  const matches = content.match(blobRegex);
+  if (!matches) return content;
+  let result = content;
+  const uniqueBlobs = Array.from(new Set(matches));
+  for (const blobUrl of uniqueBlobs) {
+    try {
+      const response = await fetch(blobUrl);
+      const blob = await response.blob();
+      const base64 = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+      result = result.replaceAll(blobUrl, base64);
+    } catch (e) {
+      console.error("Failed to convert blob URL to base64:", blobUrl, e);
+    }
+  }
+  return result;
+}
 
 export { Crepe, CrepeBuilder, CrepeFeature, enUS, i18n, localeCtx, translationsCtx, useCrepe, useCrepeFeatures, zhCN };
 //# sourceMappingURL=index.js.map