@jvs-milkdown/crepe 1.2.18 → 1.2.20

package/lib/cjs/feature/toolbar/index.js

@@ -4461,7 +4461,8 @@ const Toolbar = vue.defineComponent({
       const container = toolbarContainerRef.value;
       if (!isFixed) {
         const view = ctx.get(core.editorViewCtx);
-        container.style.maxWidth = `${view.dom.clientWidth - 32}px`;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
       }
       let containerWidth;
       if (isFixed) {
@@ -4481,16 +4482,13 @@ const Toolbar = vue.defineComponent({
         }
       } else {
         const view = ctx.get(core.editorViewCtx);
-        containerWidth = view.dom.clientWidth - 32;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        containerWidth = containerDOM.clientWidth - 32;
       }
-      if (containerWidth === lastContainerWidth) {
-        return;
-      }
-      lastContainerWidth = containerWidth;
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false;
       }
-      const MORE_BUTTON_WIDTH = 44;
+      const MORE_BUTTON_WIDTH = 56;
       const children = Array.from(container.children);
       const toolbarChildren = children.filter(
         (el) => el.style.position !== "fixed" && el.dataset.overflowButton !== "true"
@@ -4500,6 +4498,13 @@ const Toolbar = vue.defineComponent({
         const child = toolbarChildren[i];
         totalWidth += measureChild(child, i);
       }
+      if (totalWidth === 0) {
+        return;
+      }
+      if (containerWidth === lastContainerWidth) {
+        return;
+      }
+      lastContainerWidth = containerWidth;
       if (totalWidth <= containerWidth) {
         overflowVisibleCount.value = Infinity;
         totalSectionCount.value = toolbarChildren.length;
@@ -4692,6 +4697,14 @@ const Toolbar = vue.defineComponent({
       } else {
         const view = ctx.get(core.editorViewCtx);
         overflowResizeObserver.observe(view.dom);
+        const containerDOM = view.dom.closest(".milkdown-editor-container");
+        if (containerDOM) {
+          overflowResizeObserver.observe(containerDOM);
+        }
+        const rootDOM = view.dom.closest(".milkdown");
+        if (rootDOM) {
+          overflowResizeObserver.observe(rootDOM);
+        }
       }
       computeOverflow();
     };
@@ -4720,6 +4733,20 @@ const Toolbar = vue.defineComponent({
       lastContainerWidth = 0;
       setTimeout(computeOverflow, 0);
     });
+    vue.watch(
+      () => {
+        var _a;
+        return (_a = props.show) == null ? void 0 : _a.value;
+      },
+      (val) => {
+        if (val) {
+          cachedWidths.clear();
+          overflowVisibleCount.value = Infinity;
+          lastContainerWidth = 0;
+          setTimeout(computeOverflow, 0);
+        }
+      }
+    );
     const onClick = (fn) => (e) => {
       e.preventDefault();
       if (ctx) fn(ctx);
@@ -5178,7 +5205,7 @@ const Toolbar = vue.defineComponent({
           {
             style: {
               position: "relative",
-              display: isSectionOverflowed(0) ? "none" : "flex",
+              display: isSectionOverflowed(1) ? "none" : "flex",
               flexShrink: 0
             }
           },
@@ -5223,7 +5250,7 @@ const Toolbar = vue.defineComponent({
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(1) ? "none" : void 0,
+              display: isSectionOverflowed(2) ? "none" : void 0,
               flexShrink: 0
             }
           }
@@ -5236,7 +5263,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleFontFamilyLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(2) ? "none" : "flex",
+              display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "50px",
@@ -5278,7 +5305,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleFontSizeLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(3) ? "none" : "flex",
+              display: isSectionOverflowed(4) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "40px",
@@ -5306,7 +5333,7 @@ const Toolbar = vue.defineComponent({
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(4) ? "none" : void 0,
+              display: isSectionOverflowed(5) ? "none" : void 0,
               flexShrink: 0
             }
           }
@@ -5319,7 +5346,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleAlignLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(5) ? "none" : "flex",
+              display: isSectionOverflowed(6) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               flexShrink: 0
@@ -5348,7 +5375,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleColorLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(6) ? "none" : "flex",
+              display: isSectionOverflowed(7) ? "none" : "flex",
               alignItems: "center",
               padding: "0 4px",
               flexShrink: 0
@@ -5376,7 +5403,7 @@ const Toolbar = vue.defineComponent({
           )
         ),
         (() => {
-          let sectionIdx = 7;
+          let sectionIdx = 8;
           return nonHeadingGroups.map((group, groupIndex) => {
             const items = group.items.map((item) => {
               const idx = sectionIdx;
@@ -6296,7 +6323,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (2 >= cutoff) {
+            if (3 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -6309,7 +6336,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (3 >= cutoff) {
+            if (4 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -6322,7 +6349,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (5 >= cutoff) {
+            if (6 >= cutoff) {
               items.push(
                 renderIconButton(
                   currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon,
@@ -6335,7 +6362,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (6 >= cutoff) {
+            if (7 >= cutoff) {
               items.push(
                 renderIconButton(
                   fontColorIcon,
@@ -6348,7 +6375,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            let fmtIdx = 7;
+            let fmtIdx = 8;
             for (const group of nonHeadingGroups) {
               for (const item of group.items) {
                 const idx = fmtIdx;