@jvs-milkdown/crepe 1.2.30 → 1.2.32

package/lib/esm/index.js

@@ -8629,46 +8629,73 @@ const FixedToolbarComponent = defineComponent({
       const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_b = props.canUndo) == null ? void 0 : _b.value) || false;
       const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_c = props.canRedo) == null ? void 0 : _c.value) || false;
       const viewState = props.ctx.get(viewMenuStateCtx.key);
-      const maxWidth = editorWidthMap[viewState.editorWidth];
-      const isFull = maxWidth === "none";
+      const maxWidth = computed(
+        () => editorWidthMap[viewState.editorWidth]
+      );
+      const isFull = computed(() => maxWidth.value === "none");
       if (!viewState.fixedToolbarVisible) {
         return /* @__PURE__ */ h(
-          "button",
+          "div",
           {
-            type: "button",
-            class: "fixed-toolbar-expand-btn",
-            title: "\u5C55\u5F00\u5DE5\u5177\u680F",
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              viewState.fixedToolbarVisible = true;
-            },
             style: {
-              position: "absolute",
-              top: "0",
-              right: "32px",
+              position: "relative",
+              width: "100%",
+              height: "100%",
               display: "flex",
               alignItems: "center",
-              justifyContent: "center",
-              width: "32px",
-              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
+              justifyContent: "center"
             }
           },
           /* @__PURE__ */ h(
-            "span",
+            "div",
             {
-              style: { display: "inline-flex", alignItems: "center" },
-              innerHTML: chevronDownIcon
-            }
+              style: {
+                position: "relative",
+                width: "100%",
+                maxWidth: isFull.value ? "100%" : maxWidth.value,
+                margin: isFull.value ? "0" : "0 auto",
+                height: "100%"
+              }
+            },
+            /* @__PURE__ */ h(
+              "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: "absolute",
+                  top: "0",
+                  right: "6px",
+                  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
+                }
+              },
+              /* @__PURE__ */ h(
+                "span",
+                {
+                  style: { display: "inline-flex", alignItems: "center" },
+                  innerHTML: chevronDownIcon
+                }
+              )
+            )
           )
         );
       }
@@ -8688,12 +8715,14 @@ const FixedToolbarComponent = defineComponent({
           "div",
           {
             style: {
+              position: "relative",
               display: "flex",
               alignItems: "center",
-              justifyContent: "center",
+              justifyContent: "flex-start",
               width: "100%",
-              maxWidth: isFull ? "100%" : maxWidth,
-              margin: isFull ? "0" : "0 auto",
+              maxWidth: isFull.value ? "100%" : maxWidth.value,
+              margin: isFull.value ? "0" : "0 auto",
+              paddingRight: "40px",
               gap: "0px",
               minWidth: "0",
               overflow: "hidden"
@@ -8815,41 +8844,41 @@ const FixedToolbarComponent = defineComponent({
               isFixed: true
             }
           ),
-          showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
-        ),
-        /* @__PURE__ */ 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: "32px",
-              margin: "0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "auto",
-              zIndex: 200
-            }
-          },
+          showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts }),
           /* @__PURE__ */ h(
-            "span",
+            "button",
             {
+              type: "button",
+              class: "toolbar-item collapse-btn",
+              title: "\u6298\u53E0\u5DE5\u5177\u680F",
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                viewState.fixedToolbarVisible = false;
+              },
               style: {
-                display: "inline-flex",
+                position: "absolute",
+                top: "6px",
+                right: "6px",
+                margin: "0",
+                display: "flex",
                 alignItems: "center",
-                transform: "rotate(180deg)"
-              },
-              innerHTML: chevronDownIcon
-            }
+                justifyContent: "center",
+                pointerEvents: "auto",
+                zIndex: 200
+              }
+            },
+            /* @__PURE__ */ h(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  transform: "rotate(180deg)"
+                },
+                innerHTML: chevronDownIcon
+              }
+            )
           )
         )
       );
@@ -10891,7 +10920,7 @@ class FixedToolbarView {
           }
           const maxWidth = editorWidthMap[viewState2.editorWidth];
           const isFull = maxWidth === "none";
-          const px = isFull ? "80px" : "10px";
+          const px = isFull ? "80px" : "0px";
           __privateGet$4(this, _view$1).dom.style.maxWidth = maxWidth;
           __privateGet$4(this, _view$1).dom.style.width = isFull ? "100%" : maxWidth;
           __privateGet$4(this, _view$1).dom.style.margin = isFull ? "0" : "0 auto";