@jvs-milkdown/crepe 1.2.33 → 1.2.35

package/lib/cjs/index.js

@@ -5856,8 +5856,7 @@ const Toolbar = vue.defineComponent({
               siblingsWidth += s.offsetWidth;
             }
           }
-          const gapCount = Math.max(0, siblings.length);
-          containerWidth = parent.clientWidth - siblingsWidth - gapCount * 12;
+          containerWidth = parent.clientWidth - siblingsWidth - 12;
         } else {
           containerWidth = container.clientWidth;
         }
@@ -8656,241 +8655,214 @@ const FixedToolbarComponent = vue.defineComponent({
       const isFull = vue.computed(() => maxWidth.value === "none");
       if (!viewState.fixedToolbarVisible) {
         return /* @__PURE__ */ vue.h(
-          "div",
+          "button",
           {
+            type: "button",
+            class: "fixed-toolbar-expand-btn",
+            title: "\u5C55\u5F00\u5DE5\u5177\u680F",
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              viewState.fixedToolbarVisible = true;
+            },
             style: {
-              position: "relative",
-              width: "100%",
-              height: "100%",
+              position: "absolute",
+              top: "0",
+              right: "40px",
               display: "flex",
               alignItems: "center",
-              justifyContent: "center"
+              justifyContent: "center",
+              width: "28px",
+              height: "24px",
+              border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))",
+              borderTop: "none",
+              background: "var(--crepe-color-surface, #ffffff)",
+              cursor: "pointer",
+              borderRadius: "0 0 6px 6px",
+              boxShadow: "0 4px 8px rgba(0, 0, 0, 0.06)",
+              color: "var(--crepe-color-on-surface, #363b4c)",
+              pointerEvents: "auto",
+              zIndex: 200
             }
           },
+          /* @__PURE__ */ vue.h(
+            "span",
+            {
+              style: { display: "inline-flex", alignItems: "center" },
+              innerHTML: chevronDownIcon
+            }
+          )
+        );
+      }
+      return /* @__PURE__ */ vue.h(Fragment, null, /* @__PURE__ */ vue.h(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            width: "100%",
+            maxWidth: isFull.value ? "100%" : maxWidth.value,
+            margin: isFull.value ? "0" : "0 auto",
+            padding: "0px 10px",
+            gap: "0px",
+            minWidth: "0",
+            overflow: "hidden"
+          }
+        },
+        ((_d = props.config) == null ? void 0 : _d.showMenuBar) !== false && [
+          /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
+          /* @__PURE__ */ vue.h(
+            "div",
+            {
+              style: {
+                width: "1px",
+                minWidth: "1px",
+                height: "20px",
+                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+              }
+            }
+          )
+        ],
+        ((_e = props.config) == null ? void 0 : _e.showHistory) !== false && [
           /* @__PURE__ */ vue.h(
             "button",
             {
               type: "button",
-              class: "fixed-toolbar-expand-btn",
-              title: "\u5C55\u5F00\u5DE5\u5177\u680F",
+              class: ["toolbar-item", !canUndo && "disabled"],
+              disabled: !canUndo,
+              title: "\u64A4\u9500",
+              onPointerdown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
               onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                viewState.fixedToolbarVisible = true;
+                if (canUndo) {
+                  props.ctx.get(core.commandsCtx).call("Undo");
+                }
               },
               style: {
-                position: "absolute",
-                top: "0",
-                right: "40px",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                width: "28px",
-                height: "24px",
-                border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))",
-                borderTop: "none",
-                background: "var(--crepe-color-surface, #ffffff)",
-                cursor: "pointer",
-                borderRadius: "0 0 6px 6px",
-                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.06)",
-                color: "var(--crepe-color-on-surface, #363b4c)",
-                pointerEvents: "auto",
-                zIndex: 200
+                border: "none",
+                background: "transparent",
+                cursor: canUndo ? "pointer" : "default",
+                padding: "6px",
+                borderRadius: "4px",
+                color: canUndo ? "#363b4c" : "#c0c4cc",
+                "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
               }
             },
             /* @__PURE__ */ vue.h(
               "span",
               {
                 style: { display: "inline-flex", alignItems: "center" },
-                innerHTML: chevronDownIcon
+                innerHTML: undoIcon
               }
             )
-          )
-        );
-      }
-      return /* @__PURE__ */ vue.h(
-        "div",
-        {
-          style: {
-            position: "relative",
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }
-        },
-        /* @__PURE__ */ vue.h(
-          "div",
-          {
-            style: {
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              maxWidth: isFull.value ? "100%" : maxWidth.value,
-              margin: isFull.value ? "0" : "0 auto",
-              // paddingRight: '40px',
-              gap: "0px",
-              minWidth: "0",
-              overflow: "hidden"
-            }
-          },
-          ((_d = props.config) == null ? void 0 : _d.showMenuBar) !== false && [
-            /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                style: {
-                  width: "1px",
-                  minWidth: "1px",
-                  height: "20px",
-                  backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-                }
-              }
-            )
-          ],
-          ((_e = props.config) == null ? void 0 : _e.showHistory) !== false && [
-            /* @__PURE__ */ vue.h(
-              "button",
-              {
-                type: "button",
-                class: ["toolbar-item", !canUndo && "disabled"],
-                disabled: !canUndo,
-                title: "\u64A4\u9500",
-                onPointerdown: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                },
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (canUndo) {
-                    props.ctx.get(core.commandsCtx).call("Undo");
-                  }
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  border: "none",
-                  background: "transparent",
-                  cursor: canUndo ? "pointer" : "default",
-                  padding: "6px",
-                  borderRadius: "4px",
-                  color: canUndo ? "#363b4c" : "#c0c4cc",
-                  "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
-                }
+          ),
+          /* @__PURE__ */ vue.h(
+            "button",
+            {
+              type: "button",
+              class: ["toolbar-item", !canRedo && "disabled"],
+              disabled: !canRedo,
+              title: "\u6062\u590D",
+              onPointerdown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
               },
-              /* @__PURE__ */ vue.h(
-                "span",
-                {
-                  style: { display: "inline-flex", alignItems: "center" },
-                  innerHTML: undoIcon
-                }
-              )
-            ),
-            /* @__PURE__ */ vue.h(
-              "button",
-              {
-                type: "button",
-                class: ["toolbar-item", !canRedo && "disabled"],
-                disabled: !canRedo,
-                title: "\u6062\u590D",
-                onPointerdown: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                },
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  if (canRedo) {
-                    props.ctx.get(core.commandsCtx).call("Redo");
-                  }
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  border: "none",
-                  background: "transparent",
-                  cursor: canRedo ? "pointer" : "default",
-                  padding: "6px",
-                  borderRadius: "4px",
-                  color: canRedo ? "#363b4c" : "#c0c4cc",
-                  "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (canRedo) {
+                  props.ctx.get(core.commandsCtx).call("Redo");
                 }
               },
-              /* @__PURE__ */ vue.h(
-                "span",
-                {
-                  style: { display: "inline-flex", alignItems: "center" },
-                  innerHTML: redoIcon
-                }
-              )
-            ),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                cursor: canRedo ? "pointer" : "default",
+                padding: "6px",
+                borderRadius: "4px",
+                color: canRedo ? "#363b4c" : "#c0c4cc",
+                "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
+              }
+            },
             /* @__PURE__ */ vue.h(
-              "div",
+              "span",
               {
-                style: {
-                  width: "1px",
-                  minWidth: "1px",
-                  height: "20px",
-                  backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
-                }
+                style: { display: "inline-flex", alignItems: "center" },
+                innerHTML: redoIcon
               }
             )
-          ],
+          ),
           /* @__PURE__ */ vue.h(
-            Toolbar,
+            "div",
             {
-              ctx: props.ctx,
-              hide: props.hide,
-              show: props.show,
-              state: props.state,
-              config: props.config,
-              isFixed: true
+              style: {
+                width: "1px",
+                minWidth: "1px",
+                height: "20px",
+                backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+              }
             }
-          ),
-          showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+          )
+        ],
+        /* @__PURE__ */ vue.h(
+          Toolbar,
+          {
+            ctx: props.ctx,
+            hide: props.hide,
+            show: props.show,
+            state: props.state,
+            config: props.config,
+            isFixed: true
+          }
         ),
+        showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+      ), /* @__PURE__ */ vue.h(
+        "button",
+        {
+          type: "button",
+          class: "toolbar-item collapse-btn",
+          title: "\u6298\u53E0\u5DE5\u5177\u680F",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            viewState.fixedToolbarVisible = false;
+          },
+          style: {
+            position: "absolute",
+            top: "6px",
+            right: "40px",
+            margin: "0",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "auto",
+            zIndex: 200
+          }
+        },
         /* @__PURE__ */ vue.h(
-          "button",
+          "span",
           {
-            type: "button",
-            class: "toolbar-item collapse-btn",
-            title: "\u6298\u53E0\u5DE5\u5177\u680F",
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              viewState.fixedToolbarVisible = false;
-            },
             style: {
-              position: "absolute",
-              top: "6px",
-              right: "40px",
-              margin: "0",
-              display: "flex",
+              display: "inline-flex",
               alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "auto",
-              zIndex: 200
-            }
-          },
-          /* @__PURE__ */ vue.h(
-            "span",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                transform: "rotate(180deg)"
-              },
-              innerHTML: chevronDownIcon
-            }
-          )
+              transform: "rotate(180deg)"
+            },
+            innerHTML: chevronDownIcon
+          }
         )
-      );
+      ));
     };
   }
 });