@jvs-milkdown/components 1.2.4 → 1.2.7

package/lib/__internal__/components/image-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-input.d.ts","sourceRoot":"","sources":["../../../src/__internal__/components/image-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AASvD,KAAK,eAAe,GAAG;IACrB,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,UAAU,0SAiLrB,CAAA"}
+{"version":3,"file":"image-input.d.ts","sourceRoot":"","sources":["../../../src/__internal__/components/image-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AASvD,KAAK,eAAe,GAAG;IACrB,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAC1D,CAAA;AAED,eAAO,MAAM,UAAU,0SA0LrB,CAAA"}

package/lib/image-block/config.d.ts

@@ -3,9 +3,6 @@ export interface ImageBlockConfig {
     captionIcon: string | undefined;
     cropIcon: string | undefined;
     borderIcon: string | undefined;
-    confirmIcon: string | undefined;
-    cancelIcon: string | undefined;
-    resetCropIcon: string | undefined;
     uploadButton: string | undefined;
     confirmButton: string | undefined;
     uploadPlaceholderText: string;

package/lib/image-block/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/image-block/config.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IACvD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,uBAAuB,EAAE,gBAarC,CAAA;AAED,eAAO,MAAM,gBAAgB,6EAG5B,CAAA"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/image-block/config.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,sBAAsB,EAAE,MAAM,CAAA;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACzC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAA;IACvD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,uBAAuB,EAAE,gBAUrC,CAAA;AAED,eAAO,MAAM,gBAAgB,6EAG5B,CAAA"}

package/lib/image-block/index.js

@@ -5,7 +5,7 @@ import { expectDomTypeError } from '@jvs-milkdown/exception';
 import { Slice, Fragment as Fragment$1 } from '@jvs-milkdown/prose/model';
 import { visit } from 'unist-util-visit';
 import DOMPurify from 'dompurify';
-import { h, defineComponent, ref, Fragment as Fragment$2, createApp, watchEffect } from 'vue';
+import { h, defineComponent, ref, Fragment as Fragment$2, onMounted, onUnmounted, createApp, watchEffect } from 'vue';
 import clsx from 'clsx';
 import { customAlphabet } from 'nanoid';
 
@@ -39,9 +39,6 @@ const defaultImageBlockConfig = {
   captionIcon: "\u{1F4AC}",
   cropIcon: "\u2702\uFE0F",
   borderIcon: "\u{1F532}",
-  confirmIcon: "\u2713",
-  cancelIcon: "\u2715",
-  resetCropIcon: "\u21A9",
   uploadButton: "Upload file",
   confirmButton: "Confirm \u23CE",
   uploadPlaceholderText: "or paste the image link ...",
@@ -515,7 +512,9 @@ const ImageInput = defineComponent({
     const isValidUrl = (url) => {
       if (!url) return false;
       const trimmedUrl = url.trim();
-      return /^(https?:\/\/|\/|\.\.?\/|data:image\/|blob:|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(trimmedUrl);
+      return /^(https?:\/\/|\/|\.\.?\/|data:image\/|blob:|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(
+        trimmedUrl
+      );
     };
     const onKeydown = (e) => {
       var _a2, _b2, _c;
@@ -590,7 +589,10 @@ const ImageInput = defineComponent({
       )), /* @__PURE__ */ h(
         "div",
         {
-          class: clsx("confirm", !isValidUrl(currentLink.value) && "disabled"),
+          class: clsx(
+            "confirm",
+            !isValidUrl(currentLink.value) && "disabled"
+          ),
           onClick: () => onConfirmLinkInput(),
           style: !isValidUrl(currentLink.value) ? { opacity: 0.5, cursor: "not-allowed" } : void 0
         },
@@ -831,15 +833,25 @@ const ImageViewer = defineComponent({
       isCropping.value = true;
     };
     const applyCrop = () => {
+      if (!isCropping.value) return;
       setAttr("cropTop", localCrop.value.top);
       setAttr("cropLeft", localCrop.value.left);
       setAttr("cropWidth", localCrop.value.width);
       setAttr("cropHeight", localCrop.value.height);
       isCropping.value = false;
     };
-    const cancelCrop = () => {
-      isCropping.value = false;
+    const handleGlobalPointerDown = (e) => {
+      if (!isCropping.value) return;
+      if (wrapperRef.value && !wrapperRef.value.contains(e.target)) {
+        applyCrop();
+      }
     };
+    onMounted(() => {
+      window.addEventListener("pointerdown", handleGlobalPointerDown);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("pointerdown", handleGlobalPointerDown);
+    });
     const resetCrop = () => {
       setAttr("cropTop", 0);
       setAttr("cropLeft", 0);
@@ -926,7 +938,7 @@ const ImageViewer = defineComponent({
       cropDragType = "";
     };
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
       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";
@@ -1023,7 +1035,7 @@ const ImageViewer = defineComponent({
               resetCrop();
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: (_i = config.resetCropIcon) != null ? _i : "\u21A9" })
+          /* @__PURE__ */ h(Icon, { icon: "\u21A9" })
         ) : null,
         config.borderIcon ? /* @__PURE__ */ h(
           "div",
@@ -1153,96 +1165,87 @@ const ImageViewer = defineComponent({
             }
           }
         ),
-        isCropping.value ? /* @__PURE__ */ h("div", { class: "crop-overlay", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ h(
-          "div",
-          {
-            class: "crop-box",
-            style: {
-              top: `${(localCrop.value.top * 100).toFixed(2)}%`,
-              left: `${(localCrop.value.left * 100).toFixed(2)}%`,
-              width: `${(localCrop.value.width * 100).toFixed(2)}%`,
-              height: `${(localCrop.value.height * 100).toFixed(2)}%`
-            },
-            onPointerdown: (e) => onCropBoxPointerDown(e, "move")
-          },
-          /* @__PURE__ */ h("div", { class: "crop-grid" }, /* @__PURE__ */ h("div", { class: "crop-grid-line horizontal first" }), /* @__PURE__ */ h("div", { class: "crop-grid-line horizontal second" }), /* @__PURE__ */ h("div", { class: "crop-grid-line vertical first" }), /* @__PURE__ */ h("div", { class: "crop-grid-line vertical second" })),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle nw",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "nw")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle ne",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "ne")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle sw",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "sw")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle se",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "se")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle n",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "n")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle s",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "s")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle e",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "e")
-            }
-          ),
-          /* @__PURE__ */ h(
-            "div",
-            {
-              class: "crop-handle w",
-              onPointerdown: (e) => onCropBoxPointerDown(e, "w")
-            }
-          )
-        ), /* @__PURE__ */ h("div", { class: "crop-toolbar" }, /* @__PURE__ */ h(
+        isCropping.value ? /* @__PURE__ */ h(
           "div",
           {
-            class: "crop-toolbar-btn",
+            class: "crop-overlay",
             onClick: (e) => {
               e.stopPropagation();
               applyCrop();
             }
           },
-          /* @__PURE__ */ h(Icon, { icon: (_j = config.confirmIcon) != null ? _j : "\u2713" })
-        ), /* @__PURE__ */ h(
-          "div",
-          {
-            class: "crop-toolbar-btn",
-            onClick: (e) => {
-              e.stopPropagation();
-              cancelCrop();
-            }
-          },
-          /* @__PURE__ */ h(Icon, { icon: (_k = config.cancelIcon) != null ? _k : "\u2715" })
-        ))) : null,
+          /* @__PURE__ */ h(
+            "div",
+            {
+              class: "crop-box",
+              onClick: (e) => e.stopPropagation(),
+              style: {
+                top: `${(localCrop.value.top * 100).toFixed(2)}%`,
+                left: `${(localCrop.value.left * 100).toFixed(2)}%`,
+                width: `${(localCrop.value.width * 100).toFixed(2)}%`,
+                height: `${(localCrop.value.height * 100).toFixed(2)}%`
+              },
+              onPointerdown: (e) => onCropBoxPointerDown(e, "move")
+            },
+            /* @__PURE__ */ h("div", { class: "crop-grid" }, /* @__PURE__ */ h("div", { class: "crop-grid-line horizontal first" }), /* @__PURE__ */ h("div", { class: "crop-grid-line horizontal second" }), /* @__PURE__ */ h("div", { class: "crop-grid-line vertical first" }), /* @__PURE__ */ h("div", { class: "crop-grid-line vertical second" })),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle nw",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "nw")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle ne",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "ne")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle sw",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "sw")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle se",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "se")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle n",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "n")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle s",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "s")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle e",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "e")
+              }
+            ),
+            /* @__PURE__ */ h(
+              "div",
+              {
+                class: "crop-handle w",
+                onPointerdown: (e) => onCropBoxPointerDown(e, "w")
+              }
+            )
+          )
+        ) : null,
         !isCropping.value ? /* @__PURE__ */ h(Fragment$2, null, /* @__PURE__ */ h(
           "div",
           {