@jvs-milkdown/crepe 1.2.21 → 1.2.23

package/lib/esm/index.js

@@ -4,7 +4,7 @@ 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, 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 { 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, schemaCtx, editorCtx, EditorStatus, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
@@ -1115,6 +1115,10 @@ const attachmentSchema = $nodeSchema("attachment", () => {
   };
 });
 
+function keepAlive(..._args) {
+}
+
+keepAlive(h);
 const downloadIcon = `<svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
   <path d="M464.96 743.936L194.304 479.68c-4.928-4.8-10.24-9.408-14.592-14.656-20.736-24.768-21.376-45.76-2.368-63.424 17.664-16.384 43.328-16 65.472 4.8 49.088 46.144 96.64 93.824 144.896 140.8l69.376 67.52 11.968 11.392v-184.96c0-36.096-0.128-86.272-0.32-136.96-0.192-54.912-0.32-110.464-0.32-149.504l-0.064-9.28a208 208 0 0 1 0.704-26.56c3.52-31.168 19.328-46.592 45.248-45.76 25.344 0.832 41.088 16.96 42.688 48.576 1.28 24.384 1.024 48.896 0.768 73.408l-0.128 28.928c0 53.376 0.128 120.32 0.256 188.096 0.192 76.352 0.384 153.792 0.32 214.016 74.432-72.704 185.6-181.12 216.32-210.88 7.424-7.168 14.912-15.168 24-19.52 18.688-8.96 37.632-8.32 52.672 7.872 14.72 15.744 16.448 33.408 4.032 51.392-3.84 5.632-8.576 10.816-13.44 15.616-45.696 44.736-243.328 238.272-289.728 282.24a62.592 62.592 0 0 1-8.064 6.4 43.392 43.392 0 0 1-15.872 10.432c-20.544 7.616-37.504-0.512-51.968-14.848l-11.2-10.88z m430.784-39.744c24-0.576 42.176 14.4 43.328 41.6 1.728 40.832 2.944 82.176-1.088 122.816-5.312 54.144-51.52 89.792-114.752 91.008-50.112 0.896-100.224 0.704-150.4 0.512L608 960H434.944c-64.832 0.128-129.6 0.192-194.432-0.192-90.624-0.512-130.752-40.192-131.392-128.64l-0.192-18.56c-0.32-21.12-0.576-42.304 0.768-63.36 1.92-29.76 20.48-46.528 45.76-45.184 23.488 1.28 37.312 16.32 40.064 45.184 0.896 9.792 0.832 19.648 0.704 29.504l-0.064 11.52c0.384 76.544 7.36 83.392 88.128 83.456a163213.952 163213.952 0 0 0 351.68 0.064l43.968 0.128c36.096 0.128 72.192 0.256 108.288-0.448 52.672-1.024 64-12.864 65.152-64.32 0.192-7.68 0.128-15.488 0-23.232a414.72 414.72 0 0 1 0.704-38.208c2.24-27.712 17.92-42.944 41.664-43.52z" fill="currentColor"></path>
 </svg>`;
@@ -1238,7 +1242,7 @@ const MilkdownAttachmentBlock = defineComponent({
     return () => {
       var _a;
       if (!((_a = src.value) == null ? void 0 : _a.length)) {
-        return /* @__PURE__ */ h$1(
+        return /* @__PURE__ */ h(
           "div",
           {
             class: [
@@ -1246,7 +1250,7 @@ const MilkdownAttachmentBlock = defineComponent({
               props.selected.value ? "selected" : ""
             ]
           },
-          /* @__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(
+          /* @__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(
             "input",
             {
               type: "file",
@@ -1260,7 +1264,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$1(
+        return /* @__PURE__ */ h(
           "div",
           {
             ref: videoWrapperRef,
@@ -1274,7 +1278,7 @@ const MilkdownAttachmentBlock = defineComponent({
               position: "relative"
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "video",
             {
               src: src.value,
@@ -1283,28 +1287,28 @@ const MilkdownAttachmentBlock = defineComponent({
               onMousedown: (e) => e.stopPropagation()
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               class: "video-resize-handle top-left",
               onPointerdown: (e) => onResizePointerDown(e, "top-left")
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               class: "video-resize-handle top-right",
               onPointerdown: (e) => onResizePointerDown(e, "top-right")
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               class: "video-resize-handle bottom-left",
               onPointerdown: (e) => onResizePointerDown(e, "bottom-left")
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               class: "video-resize-handle bottom-right",
@@ -1313,7 +1317,7 @@ const MilkdownAttachmentBlock = defineComponent({
           )
         );
       }
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: [
@@ -1321,16 +1325,16 @@ const MilkdownAttachmentBlock = defineComponent({
             props.selected.value ? "selected" : ""
           ]
         },
-        /* @__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(
+        /* @__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(
           "div",
           {
             class: "milkdown-attachment-action",
             onClick: openLink,
             title: props.config.downloadText
           },
-          /* @__PURE__ */ h$1(Icon, { icon: downloadIcon })
+          /* @__PURE__ */ h(Icon, { icon: downloadIcon })
         )
       );
     };
@@ -1482,9 +1486,6 @@ class GroupBuilder {
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
-function keepAlive(..._args) {
-}
-
 const remarkTextColorPlugin = $remark(
   "remarkTextColor",
   () => function() {
@@ -2523,7 +2524,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
-keepAlive(h$1);
+keepAlive(h);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -2869,7 +2870,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$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(
+        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(
           "li",
           {
             key: item.key,
@@ -2912,9 +2913,9 @@ const Menu = defineComponent({
               runByIndex(item.index);
             }
           },
-          /* @__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(
+          /* @__PURE__ */ h(Icon, { icon: item.icon }),
+          /* @__PURE__ */ h("span", { style: item.key === "table" ? { flex: 1 } : {} }, item.label),
+          item.key === "table" ? /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2924,9 +2925,9 @@ const Menu = defineComponent({
                 transform: "rotate(-90deg)"
               }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           ) : null
-        )))))), showTableMenu.value ? /* @__PURE__ */ h$1(
+        )))))), showTableMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -2949,7 +2950,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleTableLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2961,7 +2962,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2974,7 +2975,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$1(
+                return /* @__PURE__ */ h(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -3003,7 +3004,7 @@ const Menu = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3016,7 +3017,7 @@ const Menu = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h$1(
+          ) : /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3205,7 +3206,7 @@ const Menu = defineComponent({
       const renderGridBtn = (key) => {
         const item = findItem(key);
         if (!item) return null;
-        return /* @__PURE__ */ h$1(
+        return /* @__PURE__ */ h(
           "div",
           {
             title: item.label,
@@ -3226,11 +3227,11 @@ const Menu = defineComponent({
             },
             "data-index": item.index
           },
-          /* @__PURE__ */ h$1(Icon, { icon: item.icon })
+          /* @__PURE__ */ h(Icon, { icon: item.icon })
         );
       };
       const renderCustomRow = (iconHtml, label, hasArrow, onPointerEnter, onPointerLeave, onClick) => {
-        return /* @__PURE__ */ h$1(
+        return /* @__PURE__ */ h(
           "div",
           {
             class: "custom-menu-row",
@@ -3246,12 +3247,12 @@ const Menu = defineComponent({
               onClick == null ? void 0 : onClick();
             }
           },
-          /* @__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
+          /* @__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
         );
       };
       const renderSubMenuItem = (iconHtml, label, isActive, onClick, disabled = false) => {
-        return /* @__PURE__ */ h$1(
+        return /* @__PURE__ */ h(
           "div",
           {
             class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -3269,7 +3270,7 @@ const Menu = defineComponent({
               if (!disabled) onClick();
             }
           },
-          /* @__PURE__ */ h$1("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h$1(Icon, { icon: iconHtml }), /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h("div", { class: "custom-menu-row-left" }, /* @__PURE__ */ h(Icon, { icon: iconHtml }), /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -3278,18 +3279,18 @@ const Menu = defineComponent({
             },
             label
           )),
-          isActive ? /* @__PURE__ */ h$1("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })) : null
+          isActive ? /* @__PURE__ */ h("span", { style: { color: "var(--crepe-color-primary)" } }, /* @__PURE__ */ h(Icon, { icon: confirmIcon })) : null
         );
       };
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           ref: host,
           onPointerdown: (e) => e.preventDefault(),
           class: "custom-block-menu"
         },
-        !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,
+        !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,
         showAlign && renderCustomRow(
           alignLeftIcon,
           i18n(ctx, "customMenu.indentAndAlign"),
@@ -3297,7 +3298,7 @@ const Menu = defineComponent({
           handleIndentAlignEnter,
           handleIndentAlignLeave
         ),
-        showIndentAlignMenu.value ? /* @__PURE__ */ h$1(
+        showIndentAlignMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3334,7 +3335,7 @@ const Menu = defineComponent({
             currentAlign === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
+          /* @__PURE__ */ h("div", { class: "custom-divider" }),
           renderSubMenuItem(
             indentIncreaseIcon,
             i18n(ctx, "customMenu.increaseIndent"),
@@ -3356,7 +3357,7 @@ const Menu = defineComponent({
           handleColorEnter,
           handleColorLeave
         ),
-        showColorMenu.value ? /* @__PURE__ */ h$1(
+        showColorMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3380,7 +3381,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleColorLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3391,7 +3392,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.textColor")
           ),
-          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -3400,7 +3401,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3430,7 +3431,7 @@ const Menu = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3442,7 +3443,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.bgColor")
           ),
-          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -3451,7 +3452,7 @@ const Menu = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3475,7 +3476,7 @@ const Menu = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h$1(
+            color === "transparent" ? /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -3499,7 +3500,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3522,7 +3523,7 @@ const Menu = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               onPointerdown: (e) => {
@@ -3549,7 +3550,7 @@ const Menu = defineComponent({
             i18n(ctx, "customMenu.restoreDefault")
           )
         ) : null,
-        !isMedia ? /* @__PURE__ */ h$1("div", { class: "custom-divider" }) : null,
+        !isMedia ? /* @__PURE__ */ h("div", { class: "custom-divider" }) : null,
         renderCustomRow(
           clearIcon,
           i18n(ctx, "customMenu.cut"),
@@ -3574,7 +3575,7 @@ const Menu = defineComponent({
           void 0,
           applyDelete
         ),
-        /* @__PURE__ */ h$1("div", { class: "custom-divider" }),
+        /* @__PURE__ */ h("div", { class: "custom-divider" }),
         renderCustomRow(
           plusIcon,
           i18n(ctx, "customMenu.addBelow"),
@@ -3582,7 +3583,7 @@ const Menu = defineComponent({
           handleAddBelowEnter,
           handleAddBelowLeave
         ),
-        showAddBelowMenu.value ? /* @__PURE__ */ h$1(
+        showAddBelowMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3602,14 +3603,14 @@ const Menu = defineComponent({
             },
             onPointerleave: handleAddBelowLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               class: "menu-groups",
               onPointermove: onPointerMove,
               style: { maxHeight: "300px", overflowY: "auto" }
             },
-            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(
+            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(
               "li",
               {
                 key: item.key,
@@ -3636,8 +3637,8 @@ const Menu = defineComponent({
                   runByIndexForAddBelow(item.index);
                 }
               },
-              /* @__PURE__ */ h$1(Icon, { icon: item.icon }),
-              /* @__PURE__ */ h$1("span", null, item.label)
+              /* @__PURE__ */ h(Icon, { icon: item.icon }),
+              /* @__PURE__ */ h("span", null, item.label)
             )))))
           )
         ) : null
@@ -3885,7 +3886,7 @@ function getBlockKey(node) {
   }
 }
 
-keepAlive(h$1, Fragment);
+keepAlive(h, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {
@@ -3933,7 +3934,7 @@ const BlockHandle = defineComponent({
     const addButton = ref();
     const menuButton = ref();
     return () => {
-      return /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
         "div",
         {
           ref: addButton,
@@ -3959,8 +3960,8 @@ const BlockHandle = defineComponent({
             props.onAdd(addButton.value);
           }
         },
-        /* @__PURE__ */ h$1(Icon, { icon: props.addIcon })
-      ), /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(Icon, { icon: props.addIcon })
+      ), /* @__PURE__ */ h(
         "div",
         {
           ref: menuButton,
@@ -3978,14 +3979,14 @@ const BlockHandle = defineComponent({
             props.onLeaveMenu();
           }
         },
-        /* @__PURE__ */ h$1(Icon, { icon: props.state.icon })
-      ), /* @__PURE__ */ h$1("div", { class: "divider" }), /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(Icon, { icon: props.state.icon })
+      ), /* @__PURE__ */ h("div", { class: "divider" }), /* @__PURE__ */ h(
         "div",
         {
           class: "operation-item drag-item",
           title: i18n(props.ctx, "handle.drag")
         },
-        /* @__PURE__ */ h$1(Icon, { icon: dragHandleIcon })
+        /* @__PURE__ */ h(Icon, { icon: dragHandleIcon })
       ));
     };
   }
@@ -5434,7 +5435,7 @@ const activeIconMap = {
   [dividerIcon]: dividerIconActive
   // [highLineCodeIcon]: highLineCodeIconActive,
 };
-keepAlive(h$1, Fragment);
+keepAlive(h, Fragment);
 const formatPainterStates = /* @__PURE__ */ new WeakMap();
 const formatPainterHandlers = /* @__PURE__ */ new WeakMap();
 const formatPainterIgnoreNext = /* @__PURE__ */ new WeakMap();
@@ -5736,12 +5737,18 @@ const Toolbar = defineComponent({
     };
     let lastContainerWidth = 0;
     const computeOverflow = () => {
+      var _a;
       if (!toolbarContainerRef.value) return;
+      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      if (status !== EditorStatus.Created) return;
+      const view = ctx.get(editorViewCtx);
+      if (!view || !view.dom) return;
       const container = toolbarContainerRef.value;
       if (!isFixed) {
-        const view = ctx.get(editorViewCtx);
         const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
-        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
+        if (containerDOM) {
+          container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
+        }
       }
       let containerWidth;
       if (isFixed) {
@@ -5760,9 +5767,8 @@ const Toolbar = defineComponent({
           containerWidth = container.clientWidth;
         }
       } else {
-        const view = ctx.get(editorViewCtx);
         const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
-        containerWidth = containerDOM.clientWidth - 32;
+        containerWidth = containerDOM ? containerDOM.clientWidth - 32 : 0;
       }
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false;
@@ -5964,7 +5970,18 @@ const Toolbar = defineComponent({
     let overflowResizeObserver = null;
     let overflowSetupDone = false;
     const setupOverflowObserver = () => {
+      var _a;
       if (!toolbarContainerRef.value || overflowSetupDone) return;
+      const status = (_a = ctx == null ? void 0 : ctx.get(editorCtx)) == null ? void 0 : _a.status;
+      if (status !== EditorStatus.Created) {
+        setTimeout(setupOverflowObserver, 50);
+        return;
+      }
+      const view = ctx.get(editorViewCtx);
+      if (!view || !view.dom) {
+        setTimeout(setupOverflowObserver, 50);
+        return;
+      }
       overflowSetupDone = true;
       overflowResizeObserver = new ResizeObserver(() => {
         computeOverflow();
@@ -5974,7 +5991,6 @@ const Toolbar = defineComponent({
         const parent = toolbarContainerRef.value.parentElement;
         if (parent) overflowResizeObserver.observe(parent);
       } else {
-        const view = ctx.get(editorViewCtx);
         overflowResizeObserver.observe(view.dom);
         const containerDOM = view.dom.closest(".milkdown-editor-container");
         if (containerDOM) {
@@ -6343,7 +6359,7 @@ const Toolbar = defineComponent({
       showFontSizeMenu.value = false;
     };
     const renderSubMenuItem = (iconHtml, label, isActive, onClick2, disabled = false) => {
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: ["custom-menu-row", disabled ? "disabled" : ""],
@@ -6375,13 +6391,13 @@ const Toolbar = defineComponent({
             e.currentTarget.style.backgroundColor = "transparent";
           }
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "custom-menu-row-left",
             style: { display: "flex", alignItems: "center", gap: "8px" }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6393,7 +6409,7 @@ const Toolbar = defineComponent({
               innerHTML: iconHtml
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6404,7 +6420,7 @@ const Toolbar = defineComponent({
             label
           )
         ),
-        isActive ? /* @__PURE__ */ h$1(
+        isActive ? /* @__PURE__ */ h(
           "span",
           {
             style: {
@@ -6413,7 +6429,7 @@ const Toolbar = defineComponent({
               color: "var(--crepe-color-primary)"
             }
           },
-          /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
+          /* @__PURE__ */ h(Icon, { icon: confirmIcon })
         ) : null
       );
     };
@@ -6439,7 +6455,7 @@ const Toolbar = defineComponent({
       });
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           ref: toolbarContainerRef,
@@ -6450,7 +6466,7 @@ const Toolbar = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item",
@@ -6464,22 +6480,22 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: activeBlockItem.value || textIcon
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -6488,7 +6504,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -6509,7 +6525,7 @@ const Toolbar = defineComponent({
                 backgroundColor: formatPainterState.value ? "var(--crepe-color-selected, var(--crepe-color-hover))" : void 0
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -6522,7 +6538,7 @@ const Toolbar = defineComponent({
             )
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "divider",
@@ -6534,7 +6550,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item custom-font-family-item",
@@ -6549,7 +6565,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6563,7 +6579,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$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6573,10 +6589,10 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item custom-font-size-item",
@@ -6591,8 +6607,8 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h("span", { style: { fontSize: "13px", color: "#363B4C" } }, currentFontState.value.fontSize && currentFontState.value.fontSize !== "mixed" ? currentFontState.value.fontSize : "16px"),
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6602,10 +6618,10 @@ const Toolbar = defineComponent({
                 marginLeft: "4px"
               }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "divider",
@@ -6617,7 +6633,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item",
@@ -6631,22 +6647,22 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
               innerHTML: currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item",
@@ -6660,7 +6676,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               class: "milkdown-icon",
@@ -6673,12 +6689,12 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { width: "20px", display: "flex", alignItems: "center" }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+            /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
           )
         ),
         (() => {
@@ -6688,7 +6704,7 @@ const Toolbar = defineComponent({
               const idx = sectionIdx;
               sectionIdx++;
               const isTable = item.icon === tableIcon;
-              return /* @__PURE__ */ h$1(
+              return /* @__PURE__ */ h(
                 "div",
                 {
                   key: item.label,
@@ -6700,7 +6716,7 @@ const Toolbar = defineComponent({
                   onMouseenter: isTable ? handleTableEnter : void 0,
                   onMouseleave: isTable ? handleTableLeave : void 0
                 },
-                /* @__PURE__ */ h$1(
+                /* @__PURE__ */ h(
                   "button",
                   {
                     type: "button",
@@ -6724,14 +6740,14 @@ const Toolbar = defineComponent({
                       justifyContent: "center"
                     }
                   },
-                  /* @__PURE__ */ h$1(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: { display: "inline-flex", alignItems: "center" },
                       innerHTML: ctx && checkActive(item.active) ? activeIconMap[item.icon] || item.icon : item.icon
                     }
                   ),
-                  isTable ? /* @__PURE__ */ h$1(
+                  isTable ? /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -6742,7 +6758,7 @@ const Toolbar = defineComponent({
                         opacity: 0.5
                       }
                     },
-                    /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+                    /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
                   ) : null
                 )
               );
@@ -6751,7 +6767,7 @@ const Toolbar = defineComponent({
             if (groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0) {
               sectionIdx++;
             }
-            return /* @__PURE__ */ h$1(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h$1(
+            return /* @__PURE__ */ h(Fragment, { key: group.key }, items, groupIndex < nonHeadingGroups.length - 1 && group.items.length > 0 ? /* @__PURE__ */ h(
               "div",
               {
                 class: "divider",
@@ -6763,7 +6779,7 @@ const Toolbar = defineComponent({
             ) : null);
           });
         })(),
-        hasOverflow ? /* @__PURE__ */ h$1(
+        hasOverflow ? /* @__PURE__ */ h(
           "div",
           {
             "data-overflow-button": "true",
@@ -6790,7 +6806,7 @@ const Toolbar = defineComponent({
               showOverflowMenu.value = true;
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
@@ -6798,7 +6814,7 @@ const Toolbar = defineComponent({
             }
           )
         ) : null,
-        showBlockMenu.value ? /* @__PURE__ */ h$1(
+        showBlockMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6823,7 +6839,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleBlockLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6880,7 +6896,7 @@ const Toolbar = defineComponent({
             );
           })
         ) : null,
-        showAlignMenu.value ? /* @__PURE__ */ h$1(
+        showAlignMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6903,7 +6919,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleAlignLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6934,7 +6950,7 @@ const Toolbar = defineComponent({
             currentAlignIndent.value.align === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6956,7 +6972,7 @@ const Toolbar = defineComponent({
             () => setIndent(-1),
             currentAlignIndent.value.indent <= 0
           ),
-          canMerge.value || canSplit.value ? /* @__PURE__ */ h$1(Fragment, null, /* @__PURE__ */ h$1(
+          canMerge.value || canSplit.value ? /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6976,7 +6992,7 @@ const Toolbar = defineComponent({
             onSplitCell
           )) : null
         ) : null,
-        showColorMenu.value ? /* @__PURE__ */ h$1(
+        showColorMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7000,7 +7016,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleColorLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7013,7 +7029,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7024,7 +7040,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.textColor") : "\u5B57\u4F53\u989C\u8272"
           ),
-          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "#000000",
             "#8C8C8C",
             "#F5222D",
@@ -7033,7 +7049,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -7056,7 +7072,7 @@ const Toolbar = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7068,7 +7084,7 @@ const Toolbar = defineComponent({
             },
             ctx ? i18n(ctx, "customMenu.bgColor") : "\u80CC\u666F\u989C\u8272"
           ),
-          /* @__PURE__ */ h$1("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
+          /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", flexWrap: "wrap" } }, [
             "transparent",
             "#F5F5F5",
             "#FFCCC7",
@@ -7077,7 +7093,7 @@ const Toolbar = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -7094,7 +7110,7 @@ const Toolbar = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h$1(
+            color === "transparent" ? /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -7118,7 +7134,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -7134,7 +7150,7 @@ const Toolbar = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               onClick: clearColor,
@@ -7153,7 +7169,7 @@ const Toolbar = defineComponent({
             ctx ? i18n(ctx, "customMenu.restoreDefault") : "\u6062\u590D\u9ED8\u8BA4"
           )
         ) : null,
-        showFontFamilyMenu.value ? /* @__PURE__ */ h$1(
+        showFontFamilyMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7178,7 +7194,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontFamilyLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7239,7 +7255,7 @@ const Toolbar = defineComponent({
             }
           ].map((font) => {
             const supported = isFontSupported(font.value);
-            return /* @__PURE__ */ h$1(
+            return /* @__PURE__ */ h(
               "div",
               {
                 key: font.label,
@@ -7276,7 +7292,7 @@ const Toolbar = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              /* @__PURE__ */ h$1(
+              /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7286,7 +7302,7 @@ const Toolbar = defineComponent({
                 },
                 font.label
               ),
-              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h$1(
+              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7295,12 +7311,12 @@ const Toolbar = defineComponent({
                     color: "var(--crepe-color-primary)"
                   }
                 },
-                /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
+                /* @__PURE__ */ h(Icon, { icon: confirmIcon })
               ) : null
             );
           })
         ) : null,
-        showFontSizeMenu.value ? /* @__PURE__ */ h$1(
+        showFontSizeMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7325,7 +7341,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontSizeLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7350,7 +7366,7 @@ const Toolbar = defineComponent({
             { label: "28px", value: "28px" },
             { label: "32px", value: "32px" },
             { label: "36px", value: "36px" }
-          ].map((size) => /* @__PURE__ */ h$1(
+          ].map((size) => /* @__PURE__ */ h(
             "div",
             {
               key: size.label,
@@ -7381,7 +7397,7 @@ const Toolbar = defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -7391,7 +7407,7 @@ const Toolbar = defineComponent({
               },
               size.label
             ),
-            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h$1(
+            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -7400,11 +7416,11 @@ const Toolbar = defineComponent({
                   color: "var(--crepe-color-primary)"
                 }
               },
-              /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
+              /* @__PURE__ */ h(Icon, { icon: confirmIcon })
             ) : null
           ))
         ) : null,
-        showTableMenu.value ? /* @__PURE__ */ h$1(
+        showTableMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -7427,7 +7443,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleTableLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7440,7 +7456,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7452,7 +7468,7 @@ const Toolbar = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7465,7 +7481,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$1(
+                return /* @__PURE__ */ h(
                   "div",
                   {
                     key: `cell-${r}-${c}`,
@@ -7494,7 +7510,7 @@ const Toolbar = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7507,7 +7523,7 @@ const Toolbar = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h$1(
+          ) : /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7520,7 +7536,7 @@ const Toolbar = defineComponent({
             "0 x 0"
           )
         ) : null,
-        showOverflowMenu.value ? /* @__PURE__ */ h$1(
+        showOverflowMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "overflow-menu-popup",
@@ -7545,7 +7561,7 @@ const Toolbar = defineComponent({
           (() => {
             const cutoff = overflowVisibleCount.value;
             const items = [];
-            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave, key) => /* @__PURE__ */ h$1(
+            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave, key) => /* @__PURE__ */ h(
               "button",
               {
                 type: "button",
@@ -7569,14 +7585,14 @@ const Toolbar = defineComponent({
                   justifyContent: "center"
                 }
               },
-              /* @__PURE__ */ h$1(
+              /* @__PURE__ */ h(
                 "span",
                 {
                   style: { display: "inline-flex", alignItems: "center" },
                   innerHTML: iconHtml
                 }
               ),
-              hasDropdown ? /* @__PURE__ */ h$1(
+              hasDropdown ? /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7586,7 +7602,7 @@ const Toolbar = defineComponent({
                     opacity: 0.5
                   }
                 },
-                /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+                /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
               ) : null
             );
             if (0 >= cutoff) {
@@ -7743,6 +7759,7 @@ const createViewMenuState = () => reactive({
 });
 const viewMenuStateCtx = $ctx(createViewMenuState(), "viewMenuStateCtx");
 
+keepAlive(h);
 const ToggleSwitch = defineComponent({
   props: {
     modelValue: { type: Boolean, required: true }
@@ -8298,6 +8315,7 @@ const MenuBar = defineComponent({
   }
 });
 
+keepAlive(h);
 const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 function fmt(shortcut) {
   return shortcut.replace(/Mod/g, isMac ? "\u2318" : "Ctrl").replace(/\+/g, isMac ? "" : "+").replace(/Shift/g, isMac ? "\u21E7" : "Shift").replace(/Alt/g, isMac ? "\u2325" : "Alt");
@@ -8380,7 +8398,7 @@ const labelStyle = {
   color: "var(--crepe-color-on-surface, #333)"
 };
 function renderGroup(ctx, group) {
-  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))))))));
+  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))))))));
 }
 const ShortcutHelpModal = defineComponent({
   props: {
@@ -8396,7 +8414,7 @@ const ShortcutHelpModal = defineComponent({
     };
     onMounted(() => document.addEventListener("keydown", onKeydown));
     onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
-    return () => /* @__PURE__ */ h$1(
+    return () => /* @__PURE__ */ h(
       "div",
       {
         style: {
@@ -8410,7 +8428,7 @@ const ShortcutHelpModal = defineComponent({
         },
         onClick: close
       },
-      /* @__PURE__ */ h$1(
+      /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -8424,7 +8442,7 @@ const ShortcutHelpModal = defineComponent({
           },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -8436,7 +8454,7 @@ const ShortcutHelpModal = defineComponent({
               borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -8447,7 +8465,7 @@ const ShortcutHelpModal = defineComponent({
             },
             i18n(props.ctx, "shortcuts.title")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -8465,10 +8483,10 @@ const ShortcutHelpModal = defineComponent({
                 color: "var(--crepe-color-on-surface-variant, #666)"
               }
             },
-            /* @__PURE__ */ h$1(Icon, { icon: closeIcon })
+            /* @__PURE__ */ h(Icon, { icon: closeIcon })
           )
         ),
-        /* @__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(
+        /* @__PURE__ */ h("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -8477,7 +8495,7 @@ const ShortcutHelpModal = defineComponent({
               backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
             }
           }
-        ), /* @__PURE__ */ h$1("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
+        ), /* @__PURE__ */ h("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
       )
     );
   }
@@ -8494,6 +8512,7 @@ const FixedToolbarComponent = defineComponent({
     canRedo: { type: Object, required: true }
   },
   setup(props) {
+    keepAlive(h);
     const showShortcuts = ref(false);
     onMounted(() => {
       const handleShowShortcuts = () => {
@@ -9131,7 +9150,7 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
   return builder.build();
 }
 
-keepAlive(h$1);
+keepAlive(h);
 const DocumentHeader = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -9208,13 +9227,13 @@ const DocumentHeader = defineComponent({
       var _a, _b;
       const state = viewState.value;
       if (!state.showTitle && !state.showCover) return null;
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-document-header",
           style: { width: "100%", display: "flex", flexDirection: "column" }
         },
-        state.showCover ? /* @__PURE__ */ h$1(
+        state.showCover ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-document-cover",
@@ -9232,7 +9251,7 @@ const DocumentHeader = defineComponent({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "img",
             {
               src: state.coverUrl,
@@ -9245,7 +9264,7 @@ const DocumentHeader = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -9262,7 +9281,7 @@ const DocumentHeader = defineComponent({
                 background: "linear-gradient(transparent, rgba(0,0,0,0.7))"
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -9274,7 +9293,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$1(
+              ).map((src, i) => /* @__PURE__ */ h(
                 "img",
                 {
                   key: i,
@@ -9304,7 +9323,7 @@ const DocumentHeader = defineComponent({
                 }
               ))
             ),
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "div",
               {
                 onClick: () => {
@@ -9332,7 +9351,7 @@ const DocumentHeader = defineComponent({
                   e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.2)";
                 }
               },
-              /* @__PURE__ */ h$1(
+              /* @__PURE__ */ h(
                 "svg",
                 {
                   width: "14",
@@ -9344,14 +9363,14 @@ const DocumentHeader = defineComponent({
                   "stroke-linecap": "round",
                   "stroke-linejoin": "round"
                 },
-                /* @__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" })
+                /* @__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" })
               ),
               "\u4E0A\u4F20"
             )
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "input",
             {
               type: "file",
@@ -9362,7 +9381,7 @@ const DocumentHeader = defineComponent({
             }
           )
         ) : null,
-        state.showTitle ? /* @__PURE__ */ h$1(
+        state.showTitle ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-document-title-wrapper",
@@ -9373,8 +9392,8 @@ const DocumentHeader = defineComponent({
               padding: `40px ${editorWidthMap[state.editorWidth] === "none" ? "80px" : "0"} 0`
             }
           },
-          /* @__PURE__ */ h$1("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
+          /* @__PURE__ */ h(
             "textarea",
             {
               ref: titleTextareaRef,
@@ -9426,6 +9445,7 @@ const DocumentHeader = defineComponent({
   }
 });
 
+keepAlive(h);
 const OutlinePanel = defineComponent({
   props: {
     ctx: { type: Object, required: true }
@@ -9748,7 +9768,7 @@ const OutlinePanel = defineComponent({
       const state = viewState.value;
       if (!state.outlineVisible) return null;
       const isLeft = state.outlinePosition === "left";
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-outline-panel",
@@ -9769,7 +9789,7 @@ const OutlinePanel = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -9783,8 +9803,8 @@ const OutlinePanel = defineComponent({
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ h$1("span", null, i18n(props.ctx, "view.outline")),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h("span", null, i18n(props.ctx, "view.outline")),
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -9808,7 +9828,7 @@ const OutlinePanel = defineComponent({
               },
               title: "\u5173\u95ED\u5927\u7EB2"
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "svg",
               {
                 width: "16",
@@ -9820,12 +9840,12 @@ const OutlinePanel = defineComponent({
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               },
-              /* @__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("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             )
           )
         ),
-        /* @__PURE__ */ h$1("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h("div", { style: { flexGrow: 1, overflowY: "auto", padding: "12px 0" } }, items.value.length === 0 ? /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -9838,7 +9858,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$1(
+          return /* @__PURE__ */ h(
             "div",
             {
               key: item.id,
@@ -9872,7 +9892,7 @@ const OutlinePanel = defineComponent({
                 }
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 onClick: (e) => {
@@ -9905,7 +9925,7 @@ const OutlinePanel = defineComponent({
               "\u25BC",
               " "
             ),
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 title: item.text,
@@ -9918,7 +9938,7 @@ const OutlinePanel = defineComponent({
             )
           );
         })),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             onPointerdown: onPointerDown,
@@ -10437,7 +10457,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
       }));
       function renderTab(tab, label) {
         const isActive = activeTab.value === tab;
-        return h$1(
+        return h(
           "button",
           {
             style: {
@@ -10459,8 +10479,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
       function renderItem(change, index) {
         const color = typeColors[change.type];
         const children = [
-          h$1("div", { style: { marginBottom: "4px" } }, [
-            h$1(
+          h("div", { style: { marginBottom: "4px" } }, [
+            h(
               "span",
               {
                 style: {
@@ -10479,7 +10499,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
         ];
         if (change.oldText) {
           children.push(
-            h$1(
+            h(
               "div",
               {
                 style: {
@@ -10491,19 +10511,19 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                 }
               },
               [
-                h$1(
+                h(
                   "span",
                   { style: { color: "#999", fontSize: "11px" } },
                   "\u539F\u6587: "
                 ),
-                h$1("span", null, change.oldText)
+                h("span", null, change.oldText)
               ]
             )
           );
         }
         if (change.newText) {
           children.push(
-            h$1(
+            h(
               "div",
               {
                 style: {
@@ -10514,17 +10534,17 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                 }
               },
               [
-                h$1(
+                h(
                   "span",
                   { style: { color: "#999", fontSize: "11px" } },
                   "\u5DEE\u5F02: "
                 ),
-                h$1("span", { style: { color } }, change.newText)
+                h("span", { style: { color } }, change.newText)
               ]
             )
           );
         }
-        return h$1(
+        return h(
           "div",
           {
             style: {
@@ -10542,7 +10562,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
           children
         );
       }
-      return () => h$1(
+      return () => h(
         "div",
         {
           style: {
@@ -10560,7 +10580,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
         },
         [
           // Header
-          h$1(
+          h(
             "div",
             {
               style: {
@@ -10576,8 +10596,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
               }
             },
             [
-              h$1("span", null, "\u6587\u6863\u5DEE\u5F02\u53D8\u66F4"),
-              onClose ? h$1(
+              h("span", null, "\u6587\u6863\u5DEE\u5F02\u53D8\u66F4"),
+              onClose ? h(
                 "div",
                 {
                   style: {
@@ -10605,7 +10625,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                   title: "\u5173\u95ED\u5DEE\u5F02"
                 },
                 [
-                  h$1(
+                  h(
                     "svg",
                     {
                       width: "16",
@@ -10618,8 +10638,8 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
                       strokeLinejoin: "round"
                     },
                     [
-                      h$1("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      h$1("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                     ]
                   )
                 ]
@@ -10627,7 +10647,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
             ]
           ),
           // Tabs
-          h$1(
+          h(
             "div",
             {
               style: {
@@ -10644,7 +10664,7 @@ function mountChangePanel(container, changes, onNavigate, onClose) {
             ]
           ),
           // List
-          h$1(
+          h(
             "div",
             {
               style: {
@@ -11352,7 +11372,7 @@ const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
 
 const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
 
-keepAlive(h$1);
+keepAlive(h);
 const LatexTooltip = defineComponent({
   props: {
     ctx: {
@@ -11388,7 +11408,7 @@ const LatexTooltip = defineComponent({
       }
     };
     return () => {
-      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(
+      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(
         "a",
         {
           class: "right",
@@ -11396,7 +11416,7 @@ const LatexTooltip = defineComponent({
           target: "_blank",
           style: "display: none;"
         },
-        /* @__PURE__ */ h$1(Icon, { icon: helpIcon }),
+        /* @__PURE__ */ h(Icon, { icon: helpIcon }),
         " ",
         i18n(props.ctx, "latex.helpDoc")
       )));
@@ -12056,6 +12076,21 @@ class CrepeBuilder {
       });
       return this;
     };
+    /// Set the visibility of the outline panel.
+    this.setOutlineVisible = (visible) => {
+      __privateGet(this, _editor).action((ctx) => {
+        if (__privateGet(this, _editor).status === EditorStatus.Created) {
+          try {
+            const state = ctx.get(viewMenuStateCtx.key);
+            if (state) {
+              state.outlineVisible = visible;
+            }
+          } catch (e) {
+          }
+        }
+      });
+      return this;
+    };
     var _a;
     __privateSet(this, _rootElement, (_a = typeof root === "string" ? document.querySelector(root) : root) != null ? _a : document.body);
     const mergedTranslations = {
@@ -12148,6 +12183,22 @@ class CrepeBuilder {
   get readonly() {
     return !__privateGet(this, _editable);
   }
+  /// Get the visibility of the outline panel.
+  get outlineVisible() {
+    let visible = false;
+    __privateGet(this, _editor).action((ctx) => {
+      if (__privateGet(this, _editor).status === EditorStatus.Created) {
+        try {
+          const state = ctx.get(viewMenuStateCtx.key);
+          if (state) {
+            visible = state.outlineVisible;
+          }
+        } catch (e) {
+        }
+      }
+    });
+    return visible;
+  }
 }
 _editor = new WeakMap();
 _rootElement = new WeakMap();