@jvs-milkdown/components 1.2.29 → 1.2.30

package/lib/image-block/index.js

@@ -796,12 +796,6 @@ const ImageViewer = defineComponent({
       window.addEventListener("pointermove", onResizeHandlePointerMove);
       window.addEventListener("pointerup", onResizeHandlePointerUp);
     };
-    const borderStyleOptions = [
-      { label: "none", value: "none" },
-      { label: "solid", value: "solid" },
-      { label: "dashed", value: "dashed" },
-      { label: "dotted", value: "dotted" }
-    ];
     const onToggleCropPanel = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -813,11 +807,295 @@ const ImageViewer = defineComponent({
         startCropping();
       }
     };
-    const onToggleBorderPanel = (e) => {
+    const onToggleBorder = (e) => {
+      var _a2;
       e.preventDefault();
       e.stopPropagation();
       if (readonly.value) return;
-      showBorderPanel.value = !showBorderPanel.value;
+      const isSolid = borderStyle.value === "solid" && ((_a2 = borderWidth.value) != null ? _a2 : 0) === 1;
+      if (isSolid) {
+        setAttr("borderStyle", "none");
+        setAttr("borderWidth", 0);
+      } else {
+        setAttr("borderStyle", "solid");
+        setAttr("borderWidth", 1);
+        if (!borderColor.value) {
+          setAttr("borderColor", "#000000");
+        }
+      }
+    };
+    const openLightbox = (images, startIndex) => {
+      var _a2;
+      let currentIndex = startIndex;
+      let scale = 1;
+      let rotate = 0;
+      const doc = ((_a2 = wrapperRef.value) == null ? void 0 : _a2.ownerDocument) || document;
+      const overlay = doc.createElement("div");
+      overlay.style.position = "fixed";
+      overlay.style.inset = "0";
+      overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+      overlay.style.zIndex = "99999";
+      overlay.style.display = "flex";
+      overlay.style.flexDirection = "column";
+      overlay.style.alignItems = "center";
+      overlay.style.justifyContent = "center";
+      overlay.style.userSelect = "none";
+      const imgContainer = doc.createElement("div");
+      imgContainer.style.position = "relative";
+      imgContainer.style.display = "flex";
+      imgContainer.style.alignItems = "center";
+      imgContainer.style.justifyContent = "center";
+      imgContainer.style.maxWidth = "90%";
+      imgContainer.style.maxHeight = "80%";
+      const img = doc.createElement("img");
+      img.src = images[currentIndex] || "";
+      img.style.maxWidth = "100%";
+      img.style.maxHeight = "100%";
+      img.style.objectFit = "contain";
+      img.style.borderRadius = "4px";
+      img.style.transition = "transform 0.2s ease-out, opacity 0.2s ease-out";
+      imgContainer.appendChild(img);
+      const applyTransform = () => {
+        img.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
+      };
+      const createArrow = (direction) => {
+        const arrow = doc.createElement("div");
+        arrow.style.position = "absolute";
+        arrow.style.top = "50%";
+        arrow.style.transform = "translateY(-50%)";
+        arrow.style.width = "48px";
+        arrow.style.height = "48px";
+        arrow.style.borderRadius = "50%";
+        arrow.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+        arrow.style.backdropFilter = "blur(8px)";
+        arrow.style.webkitBackdropFilter = "blur(8px)";
+        arrow.style.color = "#ffffff";
+        arrow.style.display = "flex";
+        arrow.style.alignItems = "center";
+        arrow.style.justifyContent = "center";
+        arrow.style.cursor = "pointer";
+        arrow.style.transition = "background-color 0.2s, transform 0.2s";
+        arrow.style.zIndex = "15";
+        const chevronSvg = direction === "left" ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>` : `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+        arrow.innerHTML = chevronSvg;
+        if (direction === "left") {
+          arrow.style.left = "24px";
+        } else {
+          arrow.style.right = "24px";
+        }
+        arrow.addEventListener("mouseenter", () => {
+          arrow.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+          arrow.style.transform = "translateY(-50%) scale(1.05)";
+        });
+        arrow.addEventListener("mouseleave", () => {
+          arrow.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
+          arrow.style.transform = "translateY(-50%) scale(1)";
+        });
+        return arrow;
+      };
+      const leftArrow = createArrow("left");
+      const rightArrow = createArrow("right");
+      overlay.appendChild(leftArrow);
+      overlay.appendChild(rightArrow);
+      const updateArrowsVisibility = () => {
+        leftArrow.style.display = currentIndex > 0 ? "flex" : "none";
+        rightArrow.style.display = currentIndex < images.length - 1 ? "flex" : "none";
+      };
+      const showImage = (index) => {
+        if (index < 0 || index >= images.length) return;
+        currentIndex = index;
+        scale = 1;
+        rotate = 0;
+        img.style.transform = `scale(0.95) rotate(0deg)`;
+        img.style.opacity = "0.5";
+        setTimeout(() => {
+          img.src = images[currentIndex] || "";
+          img.style.transform = `scale(1) rotate(0deg)`;
+          img.style.opacity = "1";
+        }, 150);
+        updateArrowsVisibility();
+        updateIndicator();
+      };
+      leftArrow.addEventListener("click", (e) => {
+        e.stopPropagation();
+        showImage(currentIndex - 1);
+      });
+      rightArrow.addEventListener("click", (e) => {
+        e.stopPropagation();
+        showImage(currentIndex + 1);
+      });
+      const bottomContainer = doc.createElement("div");
+      bottomContainer.style.position = "absolute";
+      bottomContainer.style.bottom = "24px";
+      bottomContainer.style.left = "50%";
+      bottomContainer.style.transform = "translateX(-50%)";
+      bottomContainer.style.display = "flex";
+      bottomContainer.style.flexDirection = "column";
+      bottomContainer.style.alignItems = "center";
+      bottomContainer.style.gap = "12px";
+      bottomContainer.style.zIndex = "15";
+      const indicator = doc.createElement("div");
+      indicator.style.color = "#ffffff";
+      indicator.style.fontSize = "14px";
+      indicator.style.fontFamily = "system-ui, sans-serif";
+      indicator.style.fontWeight = "500";
+      const updateIndicator = () => {
+        indicator.textContent = `${currentIndex + 1} / ${images.length}`;
+      };
+      updateIndicator();
+      updateArrowsVisibility();
+      const pillToolbar = doc.createElement("div");
+      pillToolbar.style.display = "flex";
+      pillToolbar.style.alignItems = "center";
+      pillToolbar.style.gap = "8px";
+      pillToolbar.style.padding = "6px 12px";
+      pillToolbar.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+      pillToolbar.style.backdropFilter = "blur(12px)";
+      pillToolbar.style.webkitBackdropFilter = "blur(12px)";
+      pillToolbar.style.borderRadius = "24px";
+      pillToolbar.style.border = "1px solid rgba(255, 255, 255, 0.1)";
+      pillToolbar.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.3)";
+      const createPillButton = (svgContent, btnTitle, onClickHandler) => {
+        const btn = doc.createElement("div");
+        btn.style.width = "32px";
+        btn.style.height = "32px";
+        btn.style.borderRadius = "50%";
+        btn.style.display = "flex";
+        btn.style.alignItems = "center";
+        btn.style.justifyContent = "center";
+        btn.style.cursor = "pointer";
+        btn.style.color = "#ffffff";
+        btn.style.transition = "background-color 0.2s, transform 0.1s";
+        btn.title = btnTitle;
+        btn.innerHTML = svgContent;
+        btn.addEventListener("mouseenter", () => {
+          btn.style.backgroundColor = "rgba(255, 255, 255, 0.15)";
+        });
+        btn.addEventListener("mouseleave", () => {
+          btn.style.backgroundColor = "transparent";
+        });
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          onClickHandler();
+        });
+        return btn;
+      };
+      const zoomOutSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
+      const zoomInSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
+      const resetSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path></svg>`;
+      const rotateLeftSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><polyline points="3 3 3 8 8 8"></polyline></svg>`;
+      const rotateRightSvg = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><polyline points="21 3 21 8 16 8"></polyline></svg>`;
+      const btnZoomOut = createPillButton(zoomOutSvg, "\u7F29\u5C0F", () => {
+        scale = Math.max(0.2, Number((scale - 0.2).toFixed(2)));
+        applyTransform();
+      });
+      const btnZoomIn = createPillButton(zoomInSvg, "\u653E\u5927", () => {
+        scale = Math.min(5, Number((scale + 0.2).toFixed(2)));
+        applyTransform();
+      });
+      const btnReset = createPillButton(resetSvg, "\u8FD8\u539F", () => {
+        scale = 1;
+        rotate = 0;
+        applyTransform();
+      });
+      const btnRotateLeft = createPillButton(rotateLeftSvg, "\u5411\u5DE6\u65CB\u8F6C", () => {
+        rotate -= 90;
+        applyTransform();
+      });
+      const btnRotateRight = createPillButton(
+        rotateRightSvg,
+        "\u5411\u53F3\u65CB\u8F6C",
+        () => {
+          rotate += 90;
+          applyTransform();
+        }
+      );
+      pillToolbar.appendChild(btnZoomOut);
+      pillToolbar.appendChild(btnZoomIn);
+      pillToolbar.appendChild(btnReset);
+      pillToolbar.appendChild(btnRotateLeft);
+      pillToolbar.appendChild(btnRotateRight);
+      bottomContainer.appendChild(indicator);
+      bottomContainer.appendChild(pillToolbar);
+      const closeBtn = doc.createElement("div");
+      closeBtn.style.position = "absolute";
+      closeBtn.style.top = "24px";
+      closeBtn.style.right = "24px";
+      closeBtn.style.width = "40px";
+      closeBtn.style.height = "40px";
+      closeBtn.style.borderRadius = "50%";
+      closeBtn.style.color = "#ffffff";
+      closeBtn.style.display = "flex";
+      closeBtn.style.alignItems = "center";
+      closeBtn.style.justifyContent = "center";
+      closeBtn.style.cursor = "pointer";
+      closeBtn.style.fontSize = "28px";
+      closeBtn.style.transition = "background-color 0.2s";
+      closeBtn.style.zIndex = "15";
+      closeBtn.innerHTML = "&times;";
+      closeBtn.addEventListener("mouseenter", () => {
+        closeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+      });
+      closeBtn.addEventListener("mouseleave", () => {
+        closeBtn.style.backgroundColor = "transparent";
+      });
+      const closeLightbox = () => {
+        doc.removeEventListener("keydown", handleKeyDown);
+        overlay.style.opacity = "0";
+        overlay.style.transition = "opacity 0.2s ease-out";
+        setTimeout(() => {
+          overlay.remove();
+        }, 200);
+      };
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        closeLightbox();
+      });
+      overlay.addEventListener("click", () => {
+        closeLightbox();
+      });
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+          closeLightbox();
+        } else if (e.key === "ArrowLeft" && currentIndex > 0) {
+          showImage(currentIndex - 1);
+        } else if (e.key === "ArrowRight" && currentIndex < images.length - 1) {
+          showImage(currentIndex + 1);
+        }
+      };
+      doc.addEventListener("keydown", handleKeyDown);
+      overlay.appendChild(closeBtn);
+      overlay.appendChild(imgContainer);
+      overlay.appendChild(bottomContainer);
+      overlay.style.opacity = "0";
+      overlay.style.transition = "opacity 0.2s ease-out";
+      doc.body.appendChild(overlay);
+      requestAnimationFrame(() => {
+        overlay.style.opacity = "1";
+      });
+    };
+    const onImageDoubleClick = (e) => {
+      var _a2;
+      e.preventDefault();
+      e.stopPropagation();
+      const currentImg = imageRef.value;
+      const currentSrc = currentImg ? currentImg.src : src.value;
+      const rootNode = ((_a2 = wrapperRef.value) == null ? void 0 : _a2.getRootNode()) || document;
+      const allImageElements = rootNode.querySelectorAll("img");
+      const images = [];
+      allImageElements.forEach((img) => {
+        if (img.closest(".milkdown-document-cover, .milkdown-document-header")) {
+          return;
+        }
+        if (img.src && !images.includes(img.src)) {
+          images.push(img.src);
+        }
+      });
+      if (images.length === 0 && currentSrc) {
+        images.push(currentSrc);
+      }
+      const startIndex = currentSrc ? images.indexOf(currentSrc) : 0;
+      openLightbox(images, startIndex >= 0 ? startIndex : 0);
     };
     const closePanels = () => {
       showBorderPanel.value = false;
@@ -938,7 +1216,7 @@ const ImageViewer = defineComponent({
       cropDragType = "";
     };
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
       const currentBorderStyle = (_a2 = borderStyle.value) != null ? _a2 : "none";
       const currentBorderWidth = localBorderWidth.value !== null ? localBorderWidth.value : (_b = borderWidth.value) != null ? _b : 0;
       const currentBorderColor = localBorderColor.value !== null ? localBorderColor.value : (_c = borderColor.value) != null ? _c : "#000000";
@@ -1040,87 +1318,11 @@ const ImageViewer = defineComponent({
         config.borderIcon ? /* @__PURE__ */ h(
           "div",
           {
-            class: "image-toolbar-item",
+            class: `image-toolbar-item ${borderStyle.value === "solid" && ((_i = borderWidth.value) != null ? _i : 0) >= 1 ? "active" : ""}`,
             title: "\u8FB9\u6846",
-            onClick: onToggleBorderPanel
+            onClick: onToggleBorder
           },
           /* @__PURE__ */ h(Icon, { icon: config.borderIcon })
-        ) : null,
-        showBorderPanel.value ? /* @__PURE__ */ h(
-          "div",
-          {
-            class: "setting-panel border-panel",
-            draggable: "true",
-            onClick: (e) => e.stopPropagation(),
-            onMousedown: (e) => e.stopPropagation(),
-            onPointerdown: (e) => e.stopPropagation(),
-            onDragstart: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }
-          },
-          /* @__PURE__ */ h("div", { class: "setting-panel-title" }, "\u8FB9\u6846\u8BBE\u7F6E"),
-          /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u6837\u5F0F"), /* @__PURE__ */ h("div", { class: "border-style-options" }, borderStyleOptions.map((opt) => /* @__PURE__ */ h(
-            "div",
-            {
-              class: `border-style-option ${currentBorderStyle === opt.value ? "active" : ""}`,
-              onClick: (e) => {
-                e.stopPropagation();
-                setAttr("borderStyle", opt.value);
-              }
-            },
-            opt.label === "none" ? "\u65E0" : opt.label === "solid" ? "\u5B9E\u7EBF" : opt.label === "dashed" ? "\u865A\u7EBF" : "\u70B9\u7EBF"
-          )))),
-          currentBorderStyle !== "none" ? /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u5BBD\u5EA6"), /* @__PURE__ */ h(
-            "input",
-            {
-              draggable: "true",
-              type: "range",
-              min: "1",
-              max: "10",
-              value: currentBorderWidth,
-              onInput: (e) => {
-                const target = e.target;
-                localBorderWidth.value = Number(target.value);
-              },
-              onChange: (e) => {
-                const target = e.target;
-                setAttr("borderWidth", Number(target.value));
-                localBorderWidth.value = null;
-              },
-              onClick: (e) => e.stopPropagation(),
-              onMousedown: (e) => e.stopPropagation(),
-              onPointerdown: (e) => e.stopPropagation(),
-              onDragstart: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            }
-          ), /* @__PURE__ */ h("span", { class: "setting-value" }, currentBorderWidth, "px")) : null,
-          currentBorderStyle !== "none" ? /* @__PURE__ */ h("div", { class: "setting-row" }, /* @__PURE__ */ h("span", { class: "setting-label" }, "\u989C\u8272"), /* @__PURE__ */ h(
-            "input",
-            {
-              draggable: "true",
-              type: "color",
-              value: currentBorderColor,
-              onInput: (e) => {
-                const target = e.target;
-                localBorderColor.value = target.value;
-              },
-              onChange: (e) => {
-                const target = e.target;
-                setAttr("borderColor", target.value);
-                localBorderColor.value = null;
-              },
-              onClick: (e) => e.stopPropagation(),
-              onMousedown: (e) => e.stopPropagation(),
-              onPointerdown: (e) => e.stopPropagation(),
-              onDragstart: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            }
-          )) : null
         ) : null
       ) : null, /* @__PURE__ */ h(
         "div",
@@ -1128,7 +1330,8 @@ const ImageViewer = defineComponent({
           class: `image-wrapper${isCropping.value ? " cropping" : ""}`,
           ref: wrapperRef,
           style: wrapperStyle,
-          onClick: closePanels
+          onClick: closePanels,
+          onDblclick: onImageDoubleClick
         },
         cropClipStyle ? /* @__PURE__ */ h("div", { class: "crop-clip", style: cropClipStyle }, /* @__PURE__ */ h(
           "img",