@jvs-milkdown/crepe 1.2.16 → 1.2.18

package/lib/esm/index.js

@@ -1,12 +1,13 @@
+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 { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $prose, $useKeymap, getMarkdown, $inputRule } from '@jvs-milkdown/kit/utils';
 import { defineComponent, shallowRef, ref, computed, h, 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, editorCtx, EditorStatus, schemaCtx, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
+import { commandsCtx, editorViewCtx, schemaCtx, editorCtx, EditorStatus, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
 import { findNodeInSelection, findParent, nodeRule } from '@jvs-milkdown/kit/prose';
 import { NodeSelection, TextSelection, Plugin, PluginKey, EditorState, AllSelection } from '@jvs-milkdown/kit/prose/state';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
@@ -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",
@@ -3071,27 +3101,39 @@ const Menu = defineComponent({
       let activeTextColor = null;
       let activeBgColor = null;
       if (node && node.nodeSize > 2) {
-        node.descendants((childNode) => {
-          if (childNode.isText) {
-            const tcType = textColorSchema.type(ctx);
-            const bcType = bgColorSchema.type(ctx);
-            if (!activeTextColor) {
-              const tcMark = childNode.marks.find((m) => m.type === tcType);
-              if (tcMark) activeTextColor = tcMark.attrs.color;
-            }
-            if (!activeBgColor) {
-              const bcMark = childNode.marks.find((m) => m.type === bcType);
-              if (bcMark) activeBgColor = bcMark.attrs.color;
+        const schema = ctx.get(schemaCtx);
+        const tcHasMark = schema.marks[textColorSchema.id];
+        const bcHasMark = schema.marks[bgColorSchema.id];
+        if (tcHasMark || bcHasMark) {
+          node.descendants((childNode) => {
+            if (childNode.isText) {
+              if (tcHasMark && !activeTextColor) {
+                const tcType = textColorSchema.type(ctx);
+                const tcMark = childNode.marks.find(
+                  (m) => m.type === tcType
+                );
+                if (tcMark) activeTextColor = tcMark.attrs.color;
+              }
+              if (bcHasMark && !activeBgColor) {
+                const bcType = bgColorSchema.type(ctx);
+                const bcMark = childNode.marks.find(
+                  (m) => m.type === bcType
+                );
+                if (bcMark) activeBgColor = bcMark.attrs.color;
+              }
             }
-          }
-          return false;
-        });
+            return false;
+          });
+        }
       }
       const setBlockColor = (colorValue, isBg) => {
         if (pos === null || pos === void 0) return;
         const { tr } = view.state;
         const targetNode = tr.doc.nodeAt(pos);
         if (!targetNode) return;
+        const schema = ctx.get(schemaCtx);
+        const hasMark = isBg ? schema.marks[bgColorSchema.id] : schema.marks[textColorSchema.id];
+        if (!hasMark) return;
         const markType = isBg ? bgColorSchema.type(ctx) : textColorSchema.type(ctx);
         const start = pos + 1;
         const end = pos + targetNode.nodeSize - 1;
@@ -3110,10 +3152,17 @@ const Menu = defineComponent({
         const { tr } = view.state;
         const targetNode = tr.doc.nodeAt(pos);
         if (!targetNode) return;
+        const schema = ctx.get(schemaCtx);
+        const tcHasMark = schema.marks[textColorSchema.id];
+        const bcHasMark = schema.marks[bgColorSchema.id];
         const start = pos + 1;
         const end = pos + targetNode.nodeSize - 1;
-        tr.removeMark(start, end, textColorSchema.type(ctx));
-        tr.removeMark(start, end, bgColorSchema.type(ctx));
+        if (tcHasMark) {
+          tr.removeMark(start, end, textColorSchema.type(ctx));
+        }
+        if (bcHasMark) {
+          tr.removeMark(start, end, bgColorSchema.type(ctx));
+        }
         view.dispatch(tr);
         showColorMenu.value = false;
         hide();
@@ -6144,6 +6193,10 @@ const Toolbar = defineComponent({
         return { textColor: null, bgColor: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
+      const schema = ctx.get(schemaCtx);
+      const tcHasMark = schema.marks[textColorSchema.id];
+      const bcHasMark = schema.marks[bgColorSchema.id];
+      if (!tcHasMark || !bcHasMark) return { textColor: null, bgColor: null };
       const tcType = textColorSchema.type(ctx);
       const bcType = bgColorSchema.type(ctx);
       const { $cursor, ranges } = state.selection;
@@ -6188,6 +6241,10 @@ const Toolbar = defineComponent({
       const { state, dispatch } = view;
       const { tr } = state;
       const { from, to, empty } = state.selection;
+      const schema = ctx.get(schemaCtx);
+      const tcHasMark = schema.marks[textColorSchema.id];
+      const bcHasMark = schema.marks[bgColorSchema.id];
+      if (!tcHasMark || !bcHasMark) return;
       const textColorType = textColorSchema.type(ctx);
       const bgColorType = bgColorSchema.type(ctx);
       if (empty) {
@@ -6209,6 +6266,10 @@ const Toolbar = defineComponent({
         return { fontFamily: null, fontSize: null };
       const view = ctx.get(editorViewCtx);
       const { state } = view;
+      const schema = ctx.get(schemaCtx);
+      const ffHasMark = schema.marks[fontFamilySchema.id];
+      const fsHasMark = schema.marks[fontSizeSchema.id];
+      if (!ffHasMark || !fsHasMark) return { fontFamily: null, fontSize: null };
       const ffType = fontFamilySchema.type(ctx);
       const fsType = fontSizeSchema.type(ctx);
       const { $cursor, ranges } = state.selection;
@@ -6616,6 +6677,7 @@ const Toolbar = defineComponent({
                       "toolbar-item",
                       ctx && checkActive(item.active) && "active"
                     ),
+                    "data-key": item.key,
                     onPointerdown: (e) => {
                       if (isTable) {
                         e.preventDefault();
@@ -7452,11 +7514,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(
               "button",
               {
                 type: "button",
                 class: clsx("toolbar-item", isActive && "active"),
+                "data-key": key,
                 title,
                 onPointerdown: (e) => {
                   e.preventDefault();
@@ -7578,7 +7641,8 @@ const Toolbar = defineComponent({
                       },
                       isTable,
                       isTable ? handleTableEnter : void 0,
-                      isTable ? handleTableLeave : void 0
+                      isTable ? handleTableLeave : void 0,
+                      item.key
                     )
                   );
                 }
@@ -7758,7 +7822,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;
@@ -7847,7 +7919,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(
@@ -8386,70 +8458,159 @@ 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"
           }
         },
-        /* @__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 })
+      );
+    };
   }
 });
 
@@ -8875,6 +9036,65 @@ 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();
 }
 
@@ -9184,6 +9404,11 @@ const OutlinePanel = defineComponent({
     const activeId = ref("");
     const collapsedIds = ref(/* @__PURE__ */ new Set());
     let scrollLock = false;
+    const clickedActiveId = ref(null);
+    const clearClickedActive = () => {
+      if (scrollLock) return;
+      clickedActiveId.value = null;
+    };
     const hasChildren = (index) => {
       const current = items.value[index];
       if (!current) return false;
@@ -9238,6 +9463,10 @@ const OutlinePanel = defineComponent({
       if (scrollLock) return;
       const view = props.ctx.get(editorViewCtx);
       if (!view || !view.dom) return;
+      if (clickedActiveId.value) {
+        activeId.value = clickedActiveId.value;
+        return;
+      }
       const headings = Array.from(
         view.dom.querySelectorAll("h1, h2, h3, h4, h5, h6")
       );
@@ -9245,14 +9474,39 @@ const OutlinePanel = defineComponent({
         activeId.value = "";
         return;
       }
-      const scrollContainer = view.dom.parentElement;
-      if (!scrollContainer) return;
-      const toolbar = scrollContainer.querySelector(
+      let scrollContainer = view.dom.parentElement;
+      while (scrollContainer && scrollContainer !== document.body) {
+        const style = window.getComputedStyle(scrollContainer);
+        const overflowY = style.overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && scrollContainer.scrollHeight > scrollContainer.clientHeight) {
+          break;
+        }
+        scrollContainer = scrollContainer.parentElement;
+      }
+      const isRootScroll = !scrollContainer || scrollContainer === document.body || scrollContainer === document.documentElement;
+      const actualScrollContainer = isRootScroll ? document.scrollingElement || document.documentElement || document.body : scrollContainer;
+      const rootNode = view.dom.getRootNode();
+      let toolbar = rootNode.querySelector(
         ".milkdown-fixed-toolbar"
       );
+      if (!toolbar) {
+        toolbar = document.querySelector(
+          ".milkdown-fixed-toolbar"
+        );
+      }
       const toolbarHeight = (toolbar == null ? void 0 : toolbar.offsetHeight) || 0;
-      const containerRect = scrollContainer.getBoundingClientRect();
-      const threshold = containerRect.top + toolbarHeight + 50;
+      const containerRect = actualScrollContainer.getBoundingClientRect();
+      const containerTop = isRootScroll ? 0 : Math.max(0, containerRect.top);
+      let scrollTop = actualScrollContainer.scrollTop;
+      let clientHeight = actualScrollContainer.clientHeight;
+      let scrollHeight = actualScrollContainer.scrollHeight;
+      if (isRootScroll) {
+        scrollTop = window.scrollY || document.documentElement.scrollTop;
+        clientHeight = window.innerHeight || document.documentElement.clientHeight;
+        scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+      }
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 15;
+      const threshold = isAtBottom ? containerTop + clientHeight : containerTop + toolbarHeight + 50;
       let active = headings[0];
       for (const h2 of headings) {
         const rect = h2.getBoundingClientRect();
@@ -9262,43 +9516,120 @@ const OutlinePanel = defineComponent({
           break;
         }
       }
-      activeId.value = (active == null ? void 0 : active.id) || "";
+      const activeItem = items.value.find((item) => {
+        try {
+          const activePos = view.posAtDOM(active, 0);
+          const isPosMatch = item.pos === activePos - 1;
+          let isDepthMatch = false;
+          const $pos = view.state.doc.resolve(activePos);
+          for (let d = $pos.depth; d >= 0; d--) {
+            if ($pos.node(d).type.name === "heading") {
+              if (item.pos === $pos.before(d)) {
+                isDepthMatch = true;
+                break;
+              }
+            }
+          }
+          if (isPosMatch || isDepthMatch) {
+            return true;
+          }
+        } catch (e) {
+        }
+        const dom = view.nodeDOM(item.pos);
+        const domMatch = dom === active || dom instanceof HTMLElement && active && dom.contains(active);
+        if (domMatch) {
+          return true;
+        }
+        return false;
+      });
+      const newActiveId = activeItem ? activeItem.id : (active == null ? void 0 : active.id) || "";
+      activeId.value = newActiveId;
     };
-    const scrollToHeading = (id) => {
+    const scrollToHeading = (item) => {
       const view = props.ctx.get(editorViewCtx);
       if (!view) return;
       try {
-        const headingEl = view.dom.querySelector(
-          `[id="${id}"]`
-        );
+        let headingEl = view.nodeDOM(item.pos);
+        if (!headingEl) {
+          try {
+            const domAt = view.domAtPos(item.pos);
+            let node = domAt.node;
+            if (node.nodeType === Node.TEXT_NODE) {
+              node = node.parentElement;
+            }
+            if (node instanceof HTMLElement) {
+              headingEl = node.closest(
+                "h1, h2, h3, h4, h5, h6"
+              );
+              if (!headingEl && domAt.offset < node.childNodes.length) {
+                const child = node.childNodes[domAt.offset];
+                if (child instanceof HTMLElement) {
+                  headingEl = child.closest("h1, h2, h3, h4, h5, h6") || child.querySelector(
+                    "h1, h2, h3, h4, h5, h6"
+                  );
+                }
+              }
+            }
+          } catch (e) {
+          }
+        }
+        if (!headingEl) {
+          headingEl = view.dom.querySelector(
+            `[id="${item.id}"]`
+          );
+        }
         if (!headingEl) return;
-        const scrollContainer = view.dom.parentElement;
-        if (!scrollContainer) return;
+        let scrollContainer = view.dom.parentElement;
+        while (scrollContainer && scrollContainer !== document.body) {
+          const style = window.getComputedStyle(scrollContainer);
+          const overflowY = style.overflowY;
+          if ((overflowY === "auto" || overflowY === "scroll") && scrollContainer.scrollHeight > scrollContainer.clientHeight) {
+            break;
+          }
+          scrollContainer = scrollContainer.parentElement;
+        }
+        const isRootScroll = !scrollContainer || scrollContainer === document.body || scrollContainer === document.documentElement;
+        const actualScrollContainer = isRootScroll ? document.scrollingElement || document.documentElement || document.body : scrollContainer;
         scrollLock = true;
-        const toolbar = scrollContainer.querySelector(
+        const rootNode = view.dom.getRootNode();
+        let toolbar = rootNode.querySelector(
           ".milkdown-fixed-toolbar"
         );
+        if (!toolbar) {
+          toolbar = document.querySelector(
+            ".milkdown-fixed-toolbar"
+          );
+        }
         const toolbarHeight = (toolbar == null ? void 0 : toolbar.offsetHeight) || 0;
-        const containerRect = scrollContainer.getBoundingClientRect();
+        const containerRectTop = isRootScroll ? 0 : actualScrollContainer.getBoundingClientRect().top;
         const headingRect = headingEl.getBoundingClientRect();
-        scrollContainer.scrollTo({
-          top: scrollContainer.scrollTop + headingRect.top - containerRect.top - toolbarHeight - 20,
-          behavior: "smooth"
-        });
+        const targetTop = actualScrollContainer.scrollTop + headingRect.top - containerRectTop - toolbarHeight - 20;
+        const scrollTarget = isRootScroll ? window : actualScrollContainer;
         let timer;
         const onScrollEnd = () => {
           clearTimeout(timer);
           timer = setTimeout(() => {
             scrollLock = false;
-            scrollContainer.removeEventListener("scroll", onScrollEnd);
+            scrollTarget.removeEventListener("scroll", onScrollEnd);
             checkActive();
           }, 150);
         };
-        scrollContainer.addEventListener("scroll", onScrollEnd);
+        scrollTarget.addEventListener("scroll", onScrollEnd);
         setTimeout(() => {
           scrollLock = false;
-          scrollContainer.removeEventListener("scroll", onScrollEnd);
+          scrollTarget.removeEventListener("scroll", onScrollEnd);
         }, 2e3);
+        if (isRootScroll) {
+          window.scrollTo({
+            top: targetTop,
+            behavior: "smooth"
+          });
+        } else {
+          actualScrollContainer.scrollTo({
+            top: targetTop,
+            behavior: "smooth"
+          });
+        }
       } catch (e) {
         scrollLock = false;
         updateOutline();
@@ -9309,6 +9640,27 @@ const OutlinePanel = defineComponent({
     onMounted(() => {
       updateOutline();
       checkActive();
+      window.addEventListener("wheel", clearClickedActive, { passive: true });
+      window.addEventListener("touchmove", clearClickedActive, {
+        passive: true
+      });
+      window.addEventListener("pointerdown", clearClickedActive, {
+        passive: true
+      });
+      const keyHandler = (e) => {
+        if ([
+          "ArrowUp",
+          "ArrowDown",
+          "PageUp",
+          "PageDown",
+          "Home",
+          "End"
+        ].includes(e.key)) {
+          clearClickedActive();
+        }
+      };
+      window.addEventListener("keydown", keyHandler, { passive: true });
+      onMounted._keyHandler = keyHandler;
       interval = setInterval(() => {
         if (viewState.value.outlineVisible) {
           updateOutline();
@@ -9325,6 +9677,13 @@ const OutlinePanel = defineComponent({
       if (interval) clearInterval(interval);
       if (pollInterval) clearInterval(pollInterval);
       window.removeEventListener("scroll", checkActive, true);
+      window.removeEventListener("wheel", clearClickedActive);
+      window.removeEventListener("touchmove", clearClickedActive);
+      window.removeEventListener("pointerdown", clearClickedActive);
+      const keyHandler = onMounted._keyHandler;
+      if (keyHandler) {
+        window.removeEventListener("keydown", keyHandler);
+      }
     });
     let startX = 0;
     let startWidth = 0;
@@ -9452,7 +9811,8 @@ const OutlinePanel = defineComponent({
               key: item.id,
               onClick: () => {
                 activeId.value = item.id;
-                scrollToHeading(item.id);
+                clickedActiveId.value = item.id;
+                scrollToHeading(item);
               },
               style: {
                 display: "flex",
@@ -9509,7 +9869,7 @@ const OutlinePanel = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              "\uFFFD?",
+              "\u25BC",
               " "
             ),
             /* @__PURE__ */ h(
@@ -9564,7 +9924,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"
@@ -9581,6 +9941,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, []);
@@ -9589,6 +9951,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);
@@ -9613,6 +9980,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));
@@ -9623,7 +10044,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);
@@ -9680,9 +10103,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();
@@ -9691,7 +10114,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"
           );
@@ -9708,8 +10131,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 {
@@ -9759,16 +10182,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 = "";
           }
@@ -9778,20 +10201,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;
@@ -9799,7 +10222,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(() => {
@@ -9825,6 +10248,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();
@@ -11020,9 +11445,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));
@@ -11699,21 +12124,65 @@ 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;
+    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);
     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 stored = localStorage.getItem("jvs-milkdown-data");
+            let parsed = {};
+            if (stored) {
+              parsed = JSON.parse(stored);
+            }
+            if (!parsed.content) {
+              parsed.content = {};
+            }
+            const html = this.editor.action(getHTML());
+            const docId = fixedToolbarConfig.id || "default";
+            const currentEntry = parsed.content[docId];
+            const hasChanged = !currentEntry || typeof currentEntry === "string" && currentEntry !== markdown || typeof currentEntry === "object" && (currentEntry.markdown !== markdown || currentEntry.html !== html);
+            if (hasChanged) {
+              parsed.content[docId] = {
+                markdown,
+                html
+              };
+              localStorage.setItem("jvs-milkdown-data", JSON.stringify(parsed));
+            }
+          } catch (e) {
+            console.error("Error saving content to localStorage:", e);
+          }
+        });
+      });
+    }
   }
 }
 /// This is an alias for the `CrepeFeature` enum.