@jvs-milkdown/crepe 1.2.11 → 1.2.13

package/lib/esm/index.js

@@ -3,7 +3,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, $inputRule, getMarkdown } from '@jvs-milkdown/kit/utils';
-import { defineComponent, shallowRef, ref, computed, createApp, watchEffect, watch, onUnmounted, h as h$1, 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, editorCtx, EditorStatus, schemaCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
@@ -439,6 +439,7 @@ const removeIcon = `
   >
     <path
       d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+      fill="#363B4C"
     />
   </svg>
 `;
@@ -2481,7 +2482,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
-keepAlive(h$1);
+keepAlive(h);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -2827,7 +2828,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,
@@ -2870,9 +2871,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: {
@@ -2882,9 +2883,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",
@@ -2907,7 +2908,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleTableLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2919,7 +2920,7 @@ const Menu = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2932,7 +2933,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}`,
@@ -2961,7 +2962,7 @@ const Menu = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -2974,7 +2975,7 @@ const Menu = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h$1(
+          ) : /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3144,7 +3145,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,
@@ -3165,11 +3166,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",
@@ -3185,12 +3186,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" : ""],
@@ -3208,7 +3209,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: {
@@ -3217,18 +3218,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"),
@@ -3236,7 +3237,7 @@ const Menu = defineComponent({
           handleIndentAlignEnter,
           handleIndentAlignLeave
         ),
-        showIndentAlignMenu.value ? /* @__PURE__ */ h$1(
+        showIndentAlignMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3273,7 +3274,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"),
@@ -3295,7 +3296,7 @@ const Menu = defineComponent({
           handleColorEnter,
           handleColorLeave
         ),
-        showColorMenu.value ? /* @__PURE__ */ h$1(
+        showColorMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3319,7 +3320,7 @@ const Menu = defineComponent({
             },
             onPointerleave: handleColorLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3330,7 +3331,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",
@@ -3339,7 +3340,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3369,7 +3370,7 @@ const Menu = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -3381,7 +3382,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",
@@ -3390,7 +3391,7 @@ const Menu = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3414,7 +3415,7 @@ const Menu = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h$1(
+            color === "transparent" ? /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -3438,7 +3439,7 @@ const Menu = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -3461,7 +3462,7 @@ const Menu = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               onPointerdown: (e) => {
@@ -3488,7 +3489,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"),
@@ -3513,7 +3514,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"),
@@ -3521,7 +3522,7 @@ const Menu = defineComponent({
           handleAddBelowEnter,
           handleAddBelowLeave
         ),
-        showAddBelowMenu.value ? /* @__PURE__ */ h$1(
+        showAddBelowMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -3541,14 +3542,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,
@@ -3575,8 +3576,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
@@ -3824,7 +3825,7 @@ function getBlockKey(node) {
   }
 }
 
-keepAlive(h$1, Fragment);
+keepAlive(h, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {
@@ -3872,7 +3873,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,
@@ -3898,8 +3899,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,
@@ -3917,14 +3918,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 })
       ));
     };
   }
@@ -4294,6 +4295,29 @@ const cursor = (editor, config) => {
   editor.use($prose(() => virtualCursor));
 };
 
+const listeners = /* @__PURE__ */ new Set();
+let _popupCount = 0;
+function getIsAnyPopupOpen() {
+  return _popupCount > 0;
+}
+function addPopupChangeListener(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function incrementPopupCount() {
+  const wasZero = _popupCount === 0;
+  _popupCount++;
+  if (wasZero) {
+    listeners.forEach((fn) => fn());
+  }
+}
+function decrementPopupCount() {
+  _popupCount = Math.max(0, _popupCount - 1);
+  if (_popupCount === 0) {
+    listeners.forEach((fn) => fn());
+  }
+}
+
 const remarkHighlightMarkPlugin = $remark(
   "remarkHighlightMark",
   () => function() {
@@ -5325,7 +5349,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();
@@ -5390,6 +5414,8 @@ const Toolbar = defineComponent({
           const {
             marks: savedMarks,
             align: savedAlign,
+            blockType: savedBlockType,
+            blockAttrs: savedBlockAttrs,
             isPersistent
           } = formatPainterState.value;
           let applied = false;
@@ -5411,6 +5437,30 @@ const Toolbar = defineComponent({
                 }
               );
             }
+            if (savedBlockType) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node, pos) => {
+                  if (node.type.name === "paragraph") {
+                    tr.setNodeMarkup(
+                      pos,
+                      curState.schema.nodes[savedBlockType],
+                      {
+                        ...savedBlockAttrs,
+                        ...savedAlign ? { align: savedAlign } : {}
+                      }
+                    );
+                  } else if (node.type.name === "heading" && savedBlockAttrs) {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      ...savedBlockAttrs,
+                      ...savedAlign ? { align: savedAlign } : {}
+                    });
+                  }
+                }
+              );
+            }
             dispatch(tr);
             applied = true;
           } else {
@@ -5443,6 +5493,22 @@ const Toolbar = defineComponent({
                 });
               }
             }
+            if (savedBlockType) {
+              const pos = curSelection.$from.before(curSelection.$from.depth);
+              const node = curState.doc.nodeAt(pos);
+              if (node && node.type.name === "paragraph") {
+                tr.setNodeMarkup(pos, curState.schema.nodes[savedBlockType], {
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              } else if (node && node.type.name === "heading" && savedBlockAttrs) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  ...savedBlockAttrs,
+                  ...savedAlign ? { align: savedAlign } : {}
+                });
+              }
+            }
             tr.setStoredMarks(savedMarks);
             dispatch(tr);
             applied = true;
@@ -5491,7 +5557,22 @@ const Toolbar = defineComponent({
         }
       }
       align = foundAlign;
-      formatPainterState.value = { marks, align, isPersistent };
+      let blockType = null;
+      let blockAttrs = null;
+      {
+        const parent = selection.$from.parent;
+        if (parent.type.name === "heading") {
+          blockType = "heading";
+          blockAttrs = { level: parent.attrs.level };
+        }
+      }
+      formatPainterState.value = {
+        marks,
+        align,
+        blockType,
+        blockAttrs,
+        isPersistent
+      };
       document.removeEventListener("pointerup", formatPainterHandler);
       setTimeout(() => {
         document.addEventListener("pointerup", formatPainterHandler);
@@ -5544,6 +5625,13 @@ const Toolbar = defineComponent({
     const showOverflowMenu = ref(false);
     const overflowMenuPos = ref({ top: 0 });
     const cachedWidths = /* @__PURE__ */ new Map();
+    const anyFixedPopup = computed(
+      () => !!isFixed && (showBlockMenu.value || showAlignMenu.value || showColorMenu.value || showFontFamilyMenu.value || showFontSizeMenu.value || showTableMenu.value || showOverflowMenu.value)
+    );
+    watch(anyFixedPopup, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
+    });
     const getMenuLeftPos = (rect, menuWidth) => {
       let left = rect.left;
       if (left + menuWidth > window.innerWidth) {
@@ -5780,6 +5868,7 @@ const Toolbar = defineComponent({
       if (hideFontFamilyTimer) clearTimeout(hideFontFamilyTimer);
       if (hideFontSizeTimer) clearTimeout(hideFontSizeTimer);
       if (hideTableTimer) clearTimeout(hideTableTimer);
+      if (anyFixedPopup.value) decrementPopupCount();
     });
     let overflowResizeObserver = null;
     let overflowSetupDone = false;
@@ -6129,7 +6218,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" : ""],
@@ -6161,13 +6250,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: {
@@ -6179,7 +6268,7 @@ const Toolbar = defineComponent({
               innerHTML: iconHtml
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6190,7 +6279,7 @@ const Toolbar = defineComponent({
             label
           )
         ),
-        isActive ? /* @__PURE__ */ h$1(
+        isActive ? /* @__PURE__ */ h(
           "span",
           {
             style: {
@@ -6199,7 +6288,7 @@ const Toolbar = defineComponent({
               color: "var(--crepe-color-primary)"
             }
           },
-          /* @__PURE__ */ h$1(Icon, { icon: confirmIcon })
+          /* @__PURE__ */ h(Icon, { icon: confirmIcon })
         ) : null
       );
     };
@@ -6218,16 +6307,14 @@ const Toolbar = defineComponent({
           });
         }
       });
-      const nonHeadingGroups = toolbarGroupInfo.value.filter(
-        (group) => {
-          if (group.key === "heading") return false;
-          if (props.isFixed && group.key === "function") return false;
-          return true;
-        }
-      );
+      const nonHeadingGroups = toolbarGroupInfo.value.filter((group) => {
+        if (group.key === "heading") return false;
+        if (props.isFixed && group.key === "function") return false;
+        return true;
+      });
       const isSectionOverflowed = (idx) => idx >= overflowVisibleCount.value;
       const hasOverflow = overflowVisibleCount.value < totalSectionCount.value;
-      return /* @__PURE__ */ h$1(
+      return /* @__PURE__ */ h(
         "div",
         {
           ref: toolbarContainerRef,
@@ -6238,7 +6325,7 @@ const Toolbar = defineComponent({
             overflow: "hidden"
           }
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item",
@@ -6252,22 +6339,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: {
@@ -6276,7 +6363,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -6297,7 +6384,7 @@ const Toolbar = defineComponent({
                 backgroundColor: formatPainterState.value ? "var(--crepe-color-selected, var(--crepe-color-hover))" : void 0
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -6310,7 +6397,7 @@ const Toolbar = defineComponent({
             )
           )
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "divider",
@@ -6322,7 +6409,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item custom-font-family-item",
@@ -6337,7 +6424,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -6351,7 +6438,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: {
@@ -6361,10 +6448,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",
@@ -6379,8 +6466,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: {
@@ -6390,10 +6477,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",
@@ -6405,7 +6492,7 @@ const Toolbar = defineComponent({
             }
           }
         ),
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             class: "toolbar-item",
@@ -6419,22 +6506,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",
@@ -6448,7 +6535,7 @@ const Toolbar = defineComponent({
               flexShrink: 0
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               class: "milkdown-icon",
@@ -6461,12 +6548,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 })
           )
         ),
         (() => {
@@ -6476,7 +6563,7 @@ const Toolbar = defineComponent({
               const idx = sectionIdx;
               sectionIdx++;
               const isTable = item.icon === tableIcon;
-              return /* @__PURE__ */ h$1(
+              return /* @__PURE__ */ h(
                 "div",
                 {
                   key: item.label,
@@ -6488,7 +6575,7 @@ const Toolbar = defineComponent({
                   onMouseenter: isTable ? handleTableEnter : void 0,
                   onMouseleave: isTable ? handleTableLeave : void 0
                 },
-                /* @__PURE__ */ h$1(
+                /* @__PURE__ */ h(
                   "button",
                   {
                     type: "button",
@@ -6511,14 +6598,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: {
@@ -6529,7 +6616,7 @@ const Toolbar = defineComponent({
                         opacity: 0.5
                       }
                     },
-                    /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+                    /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
                   ) : null
                 )
               );
@@ -6538,7 +6625,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",
@@ -6550,7 +6637,7 @@ const Toolbar = defineComponent({
             ) : null);
           });
         })(),
-        hasOverflow ? /* @__PURE__ */ h$1(
+        hasOverflow ? /* @__PURE__ */ h(
           "div",
           {
             "data-overflow-button": "true",
@@ -6577,7 +6664,7 @@ const Toolbar = defineComponent({
               showOverflowMenu.value = true;
             }
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "span",
             {
               style: { display: "inline-flex", alignItems: "center" },
@@ -6585,7 +6672,7 @@ const Toolbar = defineComponent({
             }
           )
         ) : null,
-        showBlockMenu.value ? /* @__PURE__ */ h$1(
+        showBlockMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6610,7 +6697,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleBlockLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6667,7 +6754,7 @@ const Toolbar = defineComponent({
             );
           })
         ) : null,
-        showAlignMenu.value ? /* @__PURE__ */ h$1(
+        showAlignMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6690,7 +6777,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleAlignLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6721,7 +6808,7 @@ const Toolbar = defineComponent({
             currentAlignIndent.value.align === "right",
             () => setAlign("right")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6743,7 +6830,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: {
@@ -6763,7 +6850,7 @@ const Toolbar = defineComponent({
             onSplitCell
           )) : null
         ) : null,
-        showColorMenu.value ? /* @__PURE__ */ h$1(
+        showColorMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "milkdown-slash-menu custom-submenu",
@@ -6787,7 +6874,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleColorLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6800,7 +6887,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6811,7 +6898,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",
@@ -6820,7 +6907,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -6843,7 +6930,7 @@ const Toolbar = defineComponent({
             },
             "A"
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -6855,7 +6942,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",
@@ -6864,7 +6951,7 @@ const Toolbar = defineComponent({
             "#D9F7BE",
             "#D6E4FF",
             "#EFDBFF"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -6881,7 +6968,7 @@ const Toolbar = defineComponent({
                 overflow: "hidden"
               }
             },
-            color === "transparent" ? /* @__PURE__ */ h$1(
+            color === "transparent" ? /* @__PURE__ */ h(
               "div",
               {
                 style: {
@@ -6905,7 +6992,7 @@ const Toolbar = defineComponent({
             "#52C41A",
             "#1677FF",
             "#722ED1"
-          ].map((color) => /* @__PURE__ */ h$1(
+          ].map((color) => /* @__PURE__ */ h(
             "div",
             {
               key: color,
@@ -6921,7 +7008,7 @@ const Toolbar = defineComponent({
               }
             }
           ))),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               onClick: clearColor,
@@ -6940,7 +7027,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",
@@ -6965,7 +7052,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontFamilyLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7026,7 +7113,7 @@ const Toolbar = defineComponent({
             }
           ].map((font) => {
             const supported = isFontSupported(font.value);
-            return /* @__PURE__ */ h$1(
+            return /* @__PURE__ */ h(
               "div",
               {
                 key: font.label,
@@ -7063,7 +7150,7 @@ const Toolbar = defineComponent({
                   e.currentTarget.style.backgroundColor = "transparent";
                 }
               },
-              /* @__PURE__ */ h$1(
+              /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7073,7 +7160,7 @@ const Toolbar = defineComponent({
                 },
                 font.label
               ),
-              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h$1(
+              currentFontState.value.fontFamily === font.value ? /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7082,12 +7169,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",
@@ -7112,7 +7199,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleFontSizeLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7137,7 +7224,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,
@@ -7168,7 +7255,7 @@ const Toolbar = defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
               }
             },
-            /* @__PURE__ */ h$1(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -7178,7 +7265,7 @@ const Toolbar = defineComponent({
               },
               size.label
             ),
-            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h$1(
+            currentFontState.value.fontSize === size.value ? /* @__PURE__ */ h(
               "span",
               {
                 style: {
@@ -7187,11 +7274,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",
@@ -7214,7 +7301,7 @@ const Toolbar = defineComponent({
             },
             onMouseleave: handleTableLeave
           },
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7227,7 +7314,7 @@ const Toolbar = defineComponent({
               }
             }
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7239,7 +7326,7 @@ const Toolbar = defineComponent({
             },
             i18n(ctx, "customMenu.insertTable")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7252,7 +7339,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}`,
@@ -7281,7 +7368,7 @@ const Toolbar = defineComponent({
               })
             )
           ),
-          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h$1(
+          tableHoverIndices.value.r > 0 ? /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7294,7 +7381,7 @@ const Toolbar = defineComponent({
             tableHoverIndices.value.r,
             " x ",
             tableHoverIndices.value.c
-          ) : /* @__PURE__ */ h$1(
+          ) : /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -7307,7 +7394,7 @@ const Toolbar = defineComponent({
             "0 x 0"
           )
         ) : null,
-        showOverflowMenu.value ? /* @__PURE__ */ h$1(
+        showOverflowMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             class: "overflow-menu-popup",
@@ -7332,7 +7419,7 @@ const Toolbar = defineComponent({
           (() => {
             const cutoff = overflowVisibleCount.value;
             const items = [];
-            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave) => /* @__PURE__ */ h$1(
+            const renderIconButton = (iconHtml, title, isActive, onClick2, hasDropdown = false, onMouseEnter, onMouseLeave) => /* @__PURE__ */ h(
               "button",
               {
                 type: "button",
@@ -7355,14 +7442,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: {
@@ -7372,7 +7459,7 @@ const Toolbar = defineComponent({
                     opacity: 0.5
                   }
                 },
-                /* @__PURE__ */ h$1(Icon, { icon: chevronDownIcon })
+                /* @__PURE__ */ h(Icon, { icon: chevronDownIcon })
               ) : null
             );
             if (0 >= cutoff) {
@@ -7520,7 +7607,7 @@ const createViewMenuState = () => reactive({
   outlineVisible: false,
   outlinePosition: "left",
   outlineWidth: 250,
-  documentBackground: null,
+  documentBackground: "#FFFFFF",
   showTitle: false,
   showCover: false,
   coverUrl: "",
@@ -7620,10 +7707,15 @@ const MenuBar = defineComponent({
     onUnmounted(() => {
       document.removeEventListener("click", closeMenu);
       if (rafId) cancelAnimationFrame(rafId);
+      if (showMenu.value) decrementPopupCount();
+    });
+    watch(showMenu, (val) => {
+      if (val) incrementPopupCount();
+      else decrementPopupCount();
     });
     const viewState = computed(() => props.ctx.get(viewMenuStateCtx.key));
     const bgColors = [
-      { name: "\u9ED8\u8BA4", value: null },
+      { name: "\u767D\u8272", value: "#FFFFFF" },
       { name: "\u6D45\u7070", value: "#F7F7F5" },
       { name: "\u6D45\u68D5", value: "#F4EEDB" },
       { name: "\u6D45\u6A59", value: "#FBECDD" },
@@ -8111,7 +8203,7 @@ const rightGroups = [
     titleKey: "shortcuts.history",
     items: [
       { labelKey: "shortcuts.undo", keys: ["Mod+z"] },
-      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+z"] }
+      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+Z"] }
     ]
   }
 ];
@@ -8152,7 +8244,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: {
@@ -8168,7 +8260,7 @@ const ShortcutHelpModal = defineComponent({
     };
     onMounted(() => document.addEventListener("keydown", onKeydown));
     onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
-    return () => /* @__PURE__ */ h$1(
+    return () => /* @__PURE__ */ h(
       "div",
       {
         style: {
@@ -8182,7 +8274,7 @@ const ShortcutHelpModal = defineComponent({
         },
         onClick: close
       },
-      /* @__PURE__ */ h$1(
+      /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -8196,7 +8288,7 @@ const ShortcutHelpModal = defineComponent({
           },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ h$1(
+        /* @__PURE__ */ h(
           "div",
           {
             style: {
@@ -8208,7 +8300,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: {
@@ -8219,7 +8311,7 @@ const ShortcutHelpModal = defineComponent({
             },
             i18n(props.ctx, "shortcuts.title")
           ),
-          /* @__PURE__ */ h$1(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -8237,10 +8329,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: {
@@ -8249,7 +8341,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))))
       )
     );
   }
@@ -8753,6 +8845,7 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
   return builder.build();
 }
 
+keepAlive(h);
 const DocumentHeader = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -9438,7 +9531,7 @@ var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Ca
 var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _view;
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _onDblClick, _view;
 const fixedToolbarConfig = $ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -9458,12 +9551,16 @@ class FixedToolbarView {
     __privateAdd$3(this, _resizeObserver);
     __privateAdd$3(this, _updateOutlineGeometry);
     __privateAdd$3(this, _scrollContainers, []);
+    __privateAdd$3(this, _onDblClick);
     __privateAdd$3(this, _view);
     this.update = (view) => {
       __privateGet$3(this, _selection$1).value = view.state.selection;
     };
     this.destroy = () => {
       if (__privateGet$3(this, _watcher)) __privateGet$3(this, _watcher).call(this);
+      if (__privateGet$3(this, _onDblClick)) {
+        __privateGet$3(this, _view).dom.removeEventListener("dblclick", __privateGet$3(this, _onDblClick));
+      }
       if (__privateGet$3(this, _resizeObserver)) __privateGet$3(this, _resizeObserver).disconnect();
       window.removeEventListener("resize", __privateGet$3(this, _updateOutlineGeometry));
       window.removeEventListener("scroll", __privateGet$3(this, _updateOutlineGeometry), {
@@ -9514,6 +9611,31 @@ class FixedToolbarView {
       __privateGet$3(this, _outlineApp).mount(outlineContent);
       __privateSet$3(this, _outlineContent, outlineContent);
       root.appendChild(outlineContent);
+      __privateSet$3(this, _onDblClick, (event) => {
+        const view2 = __privateGet$3(this, _view);
+        if (!view2.editable) return;
+        const dom = view2.dom;
+        const children = dom.children;
+        if (children.length === 0) return;
+        const lastChild = children[children.length - 1];
+        if (!lastChild) return;
+        const lastRect = lastChild.getBoundingClientRect();
+        if (event.clientY <= lastRect.bottom) return;
+        const { doc } = view2.state;
+        const lastNode = doc.lastChild;
+        if (!lastNode) return;
+        if (lastNode.type.name === "paragraph" && lastNode.content.size === 0)
+          return;
+        const paragraphType = view2.state.schema.nodes["paragraph"];
+        if (!paragraphType) return;
+        const pos = doc.content.size;
+        const tr = view2.state.tr.insert(pos, paragraphType.create());
+        const sel = TextSelection.create(tr.doc, pos + 1);
+        tr.setSelection(sel);
+        view2.dispatch(tr);
+        view2.focus();
+      });
+      view.dom.addEventListener("dblclick", __privateGet$3(this, _onDblClick));
       __privateGet$3(this, _content$2).style.transition = "margin 0.1s ease-out, width 0.1s ease-out";
       const viewState = ctx.get(viewMenuStateCtx.key);
       if (config.outlinePosition) {
@@ -9612,7 +9734,7 @@ class FixedToolbarView {
           __privateGet$3(this, _view).dom.style.maxWidth = maxWidth;
           __privateGet$3(this, _view).dom.style.width = isFull ? "100%" : maxWidth;
           __privateGet$3(this, _view).dom.style.margin = isFull ? "0" : "0 auto";
-          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 0`;
+          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 36px`;
           if (__privateGet$3(this, _headerContent)) {
             __privateGet$3(this, _headerContent).style.margin = isFull && !viewState.showCover ? "0 auto" : "0";
             __privateGet$3(this, _headerContent).style.padding = `0px`;
@@ -9639,6 +9761,7 @@ _show$1 = new WeakMap();
 _resizeObserver = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
 _scrollContainers = new WeakMap();
+_onDblClick = new WeakMap();
 _view = new WeakMap();
 const fixedToolbarPlugin = $prose((ctx) => {
   return new Plugin({
@@ -9760,7 +9883,7 @@ const imageBlockConverter = $prose$1((ctx) => {
         const r = replacements[i];
         tr.replaceWith(r.from, r.to, r.blocks);
       }
-      return tr;
+      return tr.setMeta("addToHistory", false);
     }
   });
 });
@@ -9792,7 +9915,7 @@ const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
 
 const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
 
-keepAlive(h$1);
+keepAlive(h);
 const LatexTooltip = defineComponent({
   props: {
     ctx: {
@@ -9828,7 +9951,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",
@@ -9836,7 +9959,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")
       )));
@@ -10241,7 +10364,7 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show, _mousePressed;
+var _tooltipProvider, _content, _app, _selection, _show, _mousePressed, _removePopupListener, _onDocumentMouseUp;
 const toolbarTooltip = tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
@@ -10251,11 +10374,18 @@ class ToolbarView {
     __privateAdd$1(this, _selection);
     __privateAdd$1(this, _show, ref(false));
     __privateAdd$1(this, _mousePressed, false);
+    __privateAdd$1(this, _removePopupListener);
+    __privateAdd$1(this, _onDocumentMouseUp);
     this.update = (view, prevState) => {
       __privateGet$1(this, _tooltipProvider).update(view, prevState);
       __privateGet$1(this, _selection).value = view.state.selection;
     };
     this.destroy = () => {
+      var _a;
+      (_a = __privateGet$1(this, _removePopupListener)) == null ? void 0 : _a.call(this);
+      if (__privateGet$1(this, _onDocumentMouseUp)) {
+        document.removeEventListener("mouseup", __privateGet$1(this, _onDocumentMouseUp));
+      }
       __privateGet$1(this, _tooltipProvider).destroy();
       __privateGet$1(this, _app).unmount();
       __privateGet$1(this, _content).remove();
@@ -10285,12 +10415,23 @@ class ToolbarView {
         this.update(view);
       }, 0);
     });
+    const onDocumentMouseUp = () => {
+      if (__privateGet$1(this, _mousePressed)) {
+        __privateSet$1(this, _mousePressed, false);
+        setTimeout(() => {
+          this.update(view);
+        }, 0);
+      }
+    };
+    document.addEventListener("mouseup", onDocumentMouseUp);
+    __privateSet$1(this, _onDocumentMouseUp, onDocumentMouseUp);
     __privateSet$1(this, _tooltipProvider, new TooltipProvider({
       content: __privateGet$1(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow: (view2) => {
         if (__privateGet$1(this, _mousePressed)) return false;
+        if (getIsAnyPopupOpen()) return false;
         const { doc, selection } = view2.state;
         const { empty, from, to } = selection;
         const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof TextSelection;
@@ -10310,6 +10451,13 @@ class ToolbarView {
     __privateGet$1(this, _tooltipProvider).onHide = () => {
       __privateGet$1(this, _show).value = false;
     };
+    __privateSet$1(this, _removePopupListener, addPopupChangeListener(() => {
+      if (getIsAnyPopupOpen()) {
+        __privateGet$1(this, _tooltipProvider).hide();
+      } else {
+        __privateGet$1(this, _tooltipProvider).update(view);
+      }
+    }));
     this.update(view);
   }
 }
@@ -10319,6 +10467,8 @@ _app = new WeakMap();
 _selection = new WeakMap();
 _show = new WeakMap();
 _mousePressed = new WeakMap();
+_removePopupListener = new WeakMap();
+_onDocumentMouseUp = new WeakMap();
 const toolbar = (editor, config) => {
   editor.config(crepeFeatureConfig(CrepeFeature.Toolbar)).config((ctx) => {
     ctx.set(toolbarTooltip.key, {