@jvs-milkdown/components 1.2.0 → 1.2.2

package/lib/image-block/index.js

@@ -9,25 +9,25 @@ import { h, defineComponent, ref, Fragment as Fragment$2, createApp, watchEffect
 import clsx from 'clsx';
 import { customAlphabet } from 'nanoid';
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
 function withMeta(plugin, meta) {
   Object.assign(plugin, {
-    meta: __spreadValues$3({
+    meta: __spreadValues$4({
       package: "@jvs-milkdown/components"
     }, meta)
   });
@@ -37,6 +37,11 @@ function withMeta(plugin, meta) {
 const defaultImageBlockConfig = {
   imageIcon: "\u{1F30C}",
   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 ...",
@@ -52,19 +57,19 @@ withMeta(imageBlockConfig, {
   group: "ImageBlock"
 });
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -83,19 +88,35 @@ const imageBlockSchema = $nodeSchema("image-block", () => {
       src: { default: "", validate: "string" },
       caption: { default: "", validate: "string" },
       ratio: { default: 1, validate: "number" },
-      align: { default: null }
+      align: { default: null },
+      cropRatio: { default: "free", validate: "string" },
+      cropTop: { default: 0, validate: "number" },
+      cropLeft: { default: 0, validate: "number" },
+      cropWidth: { default: 1, validate: "number" },
+      cropHeight: { default: 1, validate: "number" },
+      borderWidth: { default: 0, validate: "number" },
+      borderColor: { default: "#000000", validate: "string" },
+      borderStyle: { default: "none", validate: "string" }
     },
     parseDOM: [
       {
         tag: `img[data-type="${IMAGE_DATA_TYPE}"]`,
         getAttrs: (dom) => {
-          var _a;
+          var _a, _b, _c, _d, _e, _f;
           if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom);
           return {
             src: dom.getAttribute("src") || "",
             caption: dom.getAttribute("caption") || "",
             ratio: Number((_a = dom.getAttribute("ratio")) != null ? _a : 1),
-            align: dom.getAttribute("align") || null
+            align: dom.getAttribute("align") || null,
+            cropRatio: dom.getAttribute("cropRatio") || "free",
+            cropTop: Number((_b = dom.getAttribute("cropTop")) != null ? _b : 0),
+            cropLeft: Number((_c = dom.getAttribute("cropLeft")) != null ? _c : 0),
+            cropWidth: Number((_d = dom.getAttribute("cropWidth")) != null ? _d : 1),
+            cropHeight: Number((_e = dom.getAttribute("cropHeight")) != null ? _e : 1),
+            borderWidth: Number((_f = dom.getAttribute("borderWidth")) != null ? _f : 0),
+            borderColor: dom.getAttribute("borderColor") || "#000000",
+            borderStyle: dom.getAttribute("borderStyle") || "none"
           };
         }
       },
@@ -112,7 +133,7 @@ const imageBlockSchema = $nodeSchema("image-block", () => {
         }
       }
     ],
-    toDOM: (node) => ["img", __spreadValues$2({ "data-type": IMAGE_DATA_TYPE }, node.attrs)],
+    toDOM: (node) => ["img", __spreadValues$3({ "data-type": IMAGE_DATA_TYPE }, node.attrs)],
     parseMarkdown: {
       match: ({ type }) => type === "image-block",
       runner: (state, node, type) => {
@@ -146,21 +167,21 @@ withMeta(imageBlockSchema.node, {
   group: "ImageBlock"
 });
 
-var __defProp$1 = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
@@ -266,7 +287,7 @@ const imageBlockConvertPlugin = $prose((ctx) => {
               const nodeAtPos = $pos.nodeAfter;
               if (nodeAtPos && nodeAtPos.type.name === "image-block" && nodeAtPos.attrs.src === src) {
                 view.dispatch(
-                  view.state.tr.setNodeMarkup(pos, void 0, __spreadProps(__spreadValues$1({}, nodeAtPos.attrs), {
+                  view.state.tr.setNodeMarkup(pos, void 0, __spreadProps(__spreadValues$2({}, nodeAtPos.attrs), {
                     src: uploadedUrl
                   })).setMeta(pluginKey, { uploaded: true })
                 );
@@ -579,54 +600,91 @@ const ImageInput = defineComponent({
   }
 });
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
 keepAlive(h, Fragment$2);
+const ratioMap = {
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "3:2": 3 / 2,
+  "16:9": 16 / 9
+};
 const ImageViewer = defineComponent({
   props: {
-    src: {
-      type: Object,
-      required: true
-    },
-    caption: {
-      type: Object,
-      required: true
-    },
-    ratio: {
-      type: Object,
-      required: true
-    },
-    align: {
-      type: Object,
-      required: true
-    },
-    selected: {
-      type: Object,
-      required: true
-    },
-    readonly: {
-      type: Object,
-      required: true
-    },
-    setAttr: {
-      type: Function,
-      required: true
-    },
-    config: {
-      type: Object,
-      required: true
-    }
+    src: { type: Object, required: true },
+    caption: { type: Object, required: true },
+    ratio: { type: Object, required: true },
+    align: { type: Object, required: true },
+    cropRatio: { type: Object, required: true },
+    cropTop: { type: Object, required: true },
+    cropLeft: { type: Object, required: true },
+    cropWidth: { type: Object, required: true },
+    cropHeight: { type: Object, required: true },
+    borderWidth: { type: Object, required: true },
+    borderColor: { type: Object, required: true },
+    borderStyle: { type: Object, required: true },
+    selected: { type: Object, required: true },
+    readonly: { type: Object, required: true },
+    setAttr: { type: Function, required: true },
+    config: { type: Object, required: true }
   },
-  setup({ src, caption, ratio, readonly, setAttr, config }) {
+  setup({
+    src,
+    caption,
+    ratio,
+    readonly,
+    setAttr,
+    config,
+    cropRatio,
+    cropTop,
+    cropLeft,
+    cropWidth,
+    cropHeight,
+    borderWidth,
+    borderColor,
+    borderStyle
+  }) {
     var _a;
     const imageRef = ref();
+    const wrapperRef = ref();
     const showCaption = ref(Boolean((_a = caption.value) == null ? void 0 : _a.length));
     const timer = ref(0);
+    const showBorderPanel = ref(false);
+    const isCropping = ref(false);
+    const baseDisplayW = ref(0);
+    const baseDisplayH = ref(0);
+    const liveRatio = ref(null);
+    const localBorderWidth = ref(null);
+    const localBorderColor = ref(null);
+    const localCrop = ref({ top: 0, left: 0, width: 1, height: 1 });
     let resizeDir = "";
     let startY = 0;
     let startX = 0;
     let startHeight = 0;
     let startWidth = 0;
+    const isCropped = () => {
+      var _a2, _b, _c, _d;
+      const t = (_a2 = cropTop.value) != null ? _a2 : 0;
+      const l = (_b = cropLeft.value) != null ? _b : 0;
+      const w = (_c = cropWidth.value) != null ? _c : 1;
+      const h2 = (_d = cropHeight.value) != null ? _d : 1;
+      return t > 1e-3 || l > 1e-3 || w < 0.999 || h2 < 0.999;
+    };
     const onImageLoad = () => {
-      var _a2;
       const image = imageRef.value;
       if (!image) return;
       const host = image.closest(".milkdown-image-block");
@@ -637,14 +695,16 @@ const ImageViewer = defineComponent({
         maxWidth = config.maxWidth;
       const height = image.naturalHeight;
       const width = image.naturalWidth;
-      let transformedHeight = width < maxWidth ? height : maxWidth * (height / width);
-      if (config.maxHeight && transformedHeight > config.maxHeight)
+      if (!height || !width) return;
+      const aspect = width / height;
+      let transformedWidth = width < maxWidth ? width : maxWidth;
+      let transformedHeight = transformedWidth / aspect;
+      if (config.maxHeight && transformedHeight > config.maxHeight) {
         transformedHeight = config.maxHeight;
-      const h2 = (transformedHeight * ((_a2 = ratio.value) != null ? _a2 : 1)).toFixed(2);
-      image.dataset.origin = transformedHeight.toFixed(2);
-      image.dataset.height = h2;
-      image.style.height = `${h2}px`;
-      if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`;
+        transformedWidth = transformedHeight * aspect;
+      }
+      baseDisplayH.value = transformedHeight;
+      baseDisplayW.value = transformedWidth;
     };
     const onToggleCaption = (e) => {
       e.preventDefault();
@@ -670,9 +730,8 @@ const ImageViewer = defineComponent({
       setAttr("caption", value);
     };
     const onResizeHandlePointerMove = (e) => {
+      var _a2;
       e.preventDefault();
-      const image = imageRef.value;
-      if (!image) return;
       const deltaY = e.clientY - startY;
       const deltaX = e.clientX - startX;
       const aspect = startHeight / (startWidth || 1);
@@ -684,82 +743,532 @@ const ImageViewer = defineComponent({
         dhX = -deltaX * aspect;
       }
       const dh = Math.abs(dhX) > Math.abs(dhY) ? dhX : dhY;
-      let height = startHeight + dh;
-      if (height < 20) height = 20;
-      if (config.maxHeight && height > config.maxHeight)
-        height = config.maxHeight;
-      const h2 = Number(height).toFixed(2);
-      image.dataset.height = h2;
-      image.style.height = `${h2}px`;
+      let newWrapperHeight = startHeight + dh;
+      let newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1));
+      if (newWrapperHeight < 20) {
+        newWrapperHeight = 20;
+        newWrapperWidth = newWrapperHeight * (startWidth / (startHeight || 1));
+      }
+      if (newWrapperWidth < 20) {
+        newWrapperWidth = 20;
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1));
+      }
+      const image = imageRef.value;
+      const host = image == null ? void 0 : image.closest(".milkdown-image-block");
+      const hostWidth = host == null ? void 0 : host.getBoundingClientRect().width;
+      const maxW = config.maxWidth && hostWidth ? Math.min(config.maxWidth, hostWidth) : hostWidth || Infinity;
+      if (newWrapperWidth > maxW) {
+        newWrapperWidth = maxW;
+        newWrapperHeight = newWrapperWidth / (startWidth / (startHeight || 1));
+      }
+      if (config.maxHeight && newWrapperHeight > config.maxHeight) {
+        newWrapperHeight = config.maxHeight;
+      }
+      const cHeight = isCropped() && !isCropping.value ? (_a2 = cropHeight.value) != null ? _a2 : 1 : 1;
+      const newBaseHeight = newWrapperHeight / cHeight;
+      const newRatio = newBaseHeight / (baseDisplayH.value || 1);
+      liveRatio.value = Number(newRatio.toFixed(2));
     };
     const onResizeHandlePointerUp = () => {
       window.removeEventListener("pointermove", onResizeHandlePointerMove);
       window.removeEventListener("pointerup", onResizeHandlePointerUp);
-      const image = imageRef.value;
-      if (!image) return;
-      const originHeight = Number(image.dataset.origin);
-      const currentHeight = Number(image.dataset.height);
-      const ratio2 = Number.parseFloat(
-        Number(currentHeight / originHeight).toFixed(2)
-      );
-      if (Number.isNaN(ratio2)) return;
-      setAttr("ratio", ratio2);
+      if (liveRatio.value !== null) {
+        setAttr("ratio", liveRatio.value);
+        liveRatio.value = null;
+      }
     };
     const onResizeHandlePointerDown = (e, dir) => {
+      var _a2;
       if (readonly.value) return;
       e.preventDefault();
       e.stopPropagation();
       resizeDir = dir;
       startY = e.clientY;
       startX = e.clientX;
-      const image = imageRef.value;
-      if (image) {
-        startHeight = image.getBoundingClientRect().height;
-        startWidth = image.getBoundingClientRect().width;
+      const wrapper = wrapperRef.value;
+      if (wrapper) {
+        startHeight = wrapper.getBoundingClientRect().height;
+        startWidth = wrapper.getBoundingClientRect().width;
       }
+      liveRatio.value = (_a2 = ratio.value) != null ? _a2 : 1;
       window.addEventListener("pointermove", onResizeHandlePointerMove);
       window.addEventListener("pointerup", onResizeHandlePointerUp);
     };
-    return () => {
-      return /* @__PURE__ */ h(Fragment$2, null, /* @__PURE__ */ h("div", { class: "image-wrapper" }, /* @__PURE__ */ h("div", { class: "operation" }, /* @__PURE__ */ h("div", { class: "operation-item", onPointerdown: onToggleCaption }, /* @__PURE__ */ h(Icon, { icon: config.captionIcon }))), /* @__PURE__ */ h(
-        "img",
-        {
-          ref: imageRef,
-          "data-type": IMAGE_DATA_TYPE,
-          onLoad: onImageLoad,
-          src: src.value,
-          alt: caption.value,
-          onError: (e) => {
-            var _a2;
-            return Promise.resolve((_a2 = config.onImageLoadError) == null ? void 0 : _a2.call(config, e)).catch(() => {
-            });
+    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();
+      if (readonly.value) return;
+      showBorderPanel.value = false;
+      if (isCropping.value) {
+        isCropping.value = false;
+      } else {
+        startCropping();
+      }
+    };
+    const onToggleBorderPanel = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (readonly.value) return;
+      showBorderPanel.value = !showBorderPanel.value;
+    };
+    const closePanels = () => {
+      showBorderPanel.value = false;
+    };
+    const startCropping = () => {
+      var _a2, _b, _c, _d;
+      localCrop.value = {
+        top: (_a2 = cropTop.value) != null ? _a2 : 0,
+        left: (_b = cropLeft.value) != null ? _b : 0,
+        width: (_c = cropWidth.value) != null ? _c : 1,
+        height: (_d = cropHeight.value) != null ? _d : 1
+      };
+      isCropping.value = true;
+    };
+    const applyCrop = () => {
+      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 resetCrop = () => {
+      setAttr("cropTop", 0);
+      setAttr("cropLeft", 0);
+      setAttr("cropWidth", 1);
+      setAttr("cropHeight", 1);
+    };
+    let cropDragType = "";
+    let cropStartX = 0;
+    let cropStartY = 0;
+    let cropStartBox = { top: 0, left: 0, width: 1, height: 1 };
+    const onCropBoxPointerDown = (e, type) => {
+      e.preventDefault();
+      e.stopPropagation();
+      cropDragType = type;
+      cropStartX = e.clientX;
+      cropStartY = e.clientY;
+      cropStartBox = __spreadValues$1({}, localCrop.value);
+      window.addEventListener("pointermove", onCropBoxPointerMove);
+      window.addEventListener("pointerup", onCropBoxPointerUp);
+    };
+    const onCropBoxPointerMove = (e) => {
+      var _a2;
+      const wrapper = wrapperRef.value;
+      if (!wrapper) return;
+      const rect = wrapper.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      const dx = (e.clientX - cropStartX) / rect.width;
+      const dy = (e.clientY - cropStartY) / rect.height;
+      const ar = ratioMap[(_a2 = cropRatio.value) != null ? _a2 : "free"];
+      let box = __spreadValues$1({}, cropStartBox);
+      if (cropDragType === "move") {
+        box.left = Math.max(0, Math.min(1 - box.width, cropStartBox.left + dx));
+        box.top = Math.max(0, Math.min(1 - box.height, cropStartBox.top + dy));
+      } else {
+        const isLeft = cropDragType === "nw" || cropDragType === "sw" || cropDragType === "w";
+        const isTop = cropDragType === "nw" || cropDragType === "ne" || cropDragType === "n";
+        const isRight = cropDragType === "ne" || cropDragType === "se" || cropDragType === "e";
+        const isBottom = cropDragType === "sw" || cropDragType === "se" || cropDragType === "s";
+        const isHorizontal = cropDragType === "n" || cropDragType === "s";
+        const isVertical = cropDragType === "e" || cropDragType === "w";
+        let newLeft = cropStartBox.left;
+        let newTop = cropStartBox.top;
+        let newWidth = cropStartBox.width;
+        let newHeight = cropStartBox.height;
+        if (isLeft) {
+          newWidth = cropStartBox.width - dx;
+          newLeft = cropStartBox.left + dx;
+        } else if (isRight) {
+          newWidth = cropStartBox.width + dx;
+        }
+        if (isTop) {
+          newHeight = cropStartBox.height - dy;
+          newTop = cropStartBox.top + dy;
+        } else if (isBottom) {
+          newHeight = cropStartBox.height + dy;
+        }
+        if (ar && !isHorizontal && !isVertical) {
+          const cropPixelW = newWidth * rect.width;
+          const desiredH = cropPixelW / ar / rect.height;
+          if (isTop) {
+            newTop = newTop + newHeight - desiredH;
           }
+          newHeight = desiredH;
         }
-      ), /* @__PURE__ */ h(
-        "div",
-        {
-          class: "image-resize-handle top-left",
-          onPointerdown: (e) => onResizeHandlePointerDown(e, "top-left")
+        if (newWidth < 0.05) newWidth = 0.05;
+        if (newHeight < 0.05) newHeight = 0.05;
+        if (newLeft < 0) {
+          newWidth += newLeft;
+          newLeft = 0;
         }
-      ), /* @__PURE__ */ h(
-        "div",
-        {
-          class: "image-resize-handle top-right",
-          onPointerdown: (e) => onResizeHandlePointerDown(e, "top-right")
+        if (newTop < 0) {
+          newHeight += newTop;
+          newTop = 0;
+        }
+        if (newLeft + newWidth > 1) newWidth = 1 - newLeft;
+        if (newTop + newHeight > 1) newHeight = 1 - newTop;
+        box = { left: newLeft, top: newTop, width: newWidth, height: newHeight };
+      }
+      localCrop.value = box;
+    };
+    const onCropBoxPointerUp = () => {
+      window.removeEventListener("pointermove", onCropBoxPointerMove);
+      window.removeEventListener("pointerup", onCropBoxPointerUp);
+      cropDragType = "";
+    };
+    return () => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      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";
+      const cTop = (_d = cropTop.value) != null ? _d : 0;
+      const cLeft = (_e = cropLeft.value) != null ? _e : 0;
+      const cWidth = (_f = cropWidth.value) != null ? _f : 1;
+      const cHeight = (_g = cropHeight.value) != null ? _g : 1;
+      const cropped = isCropped();
+      const borderStyleStr = currentBorderStyle !== "none" && currentBorderWidth > 0 ? `${currentBorderWidth}px ${currentBorderStyle} ${currentBorderColor}` : void 0;
+      const currentRatio = liveRatio.value !== null ? liveRatio.value : (_h = ratio.value) != null ? _h : 1;
+      let baseW = baseDisplayW.value * currentRatio;
+      let baseH = baseDisplayH.value * currentRatio;
+      const image = imageRef.value;
+      const host = image == null ? void 0 : image.closest(".milkdown-image-block");
+      const hostWidth = host == null ? void 0 : host.getBoundingClientRect().width;
+      const maxW = config.maxWidth && hostWidth ? Math.min(config.maxWidth, hostWidth) : hostWidth || Infinity;
+      const visibleW = isCropping.value ? baseW : cropped ? baseW * cWidth : baseW;
+      if (visibleW > maxW && maxW > 0) {
+        const scale = maxW / visibleW;
+        baseW = baseW * scale;
+        baseH = baseH * scale;
+      }
+      const cropPxW = baseW * cWidth;
+      const cropPxH = baseH * cHeight;
+      const cropPxL = baseW * cLeft;
+      const cropPxT = baseH * cTop;
+      const wrapperStyle = {
+        minWidth: "20px",
+        minHeight: "20px",
+        border: !isCropping.value ? borderStyleStr != null ? borderStyleStr : "" : ""
+      };
+      if (cropped && !isCropping.value && cropPxW > 0 && cropPxH > 0) {
+        wrapperStyle.width = `${cropPxW}px`;
+        wrapperStyle.height = `${cropPxH}px`;
+      }
+      const cropClipStyle = cropped && !isCropping.value && baseW > 0 && baseH > 0 ? {
+        width: `${cropPxW}px`,
+        height: `${cropPxH}px`,
+        overflow: "hidden"
+      } : null;
+      const imgStyle = {
+        minWidth: "0px",
+        minHeight: "0px"
+      };
+      if (cropped && !isCropping.value && baseW > 0 && baseH > 0) {
+        imgStyle.width = `${baseW}px`;
+        imgStyle.height = `${baseH}px`;
+        imgStyle.maxWidth = "none";
+        imgStyle.marginLeft = `${-cropPxL}px`;
+        imgStyle.marginTop = `${-cropPxT}px`;
+      } else {
+        if (baseH > 0 && baseW > 0) {
+          imgStyle.width = `${baseW}px`;
+          imgStyle.height = `${baseH}px`;
+          if (config.maxWidth) imgStyle.maxWidth = `${config.maxWidth}px`;
         }
-      ), /* @__PURE__ */ h(
+      }
+      return /* @__PURE__ */ h(Fragment$2, null, !isCropping.value ? /* @__PURE__ */ h(
         "div",
         {
-          class: "image-resize-handle bottom-left",
-          onPointerdown: (e) => onResizeHandlePointerDown(e, "bottom-left")
-        }
-      ), /* @__PURE__ */ h(
+          class: "image-toolbar",
+          onClick: (e) => e.stopPropagation(),
+          onMousedown: (e) => e.stopPropagation(),
+          onDragstart: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-toolbar-item",
+            title: "\u6807\u9898",
+            onClick: onToggleCaption
+          },
+          /* @__PURE__ */ h(Icon, { icon: config.captionIcon })
+        ),
+        config.cropIcon ? /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-toolbar-item",
+            title: "\u88C1\u526A",
+            onClick: onToggleCropPanel
+          },
+          /* @__PURE__ */ h(Icon, { icon: config.cropIcon })
+        ) : null,
+        cropped ? /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-toolbar-item",
+            title: "\u6062\u590D\u88C1\u526A",
+            onClick: (e) => {
+              e.stopPropagation();
+              resetCrop();
+            }
+          },
+          /* @__PURE__ */ h(Icon, { icon: (_i = config.resetCropIcon) != null ? _i : "\u21A9" })
+        ) : null,
+        config.borderIcon ? /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-toolbar-item",
+            title: "\u8FB9\u6846",
+            onClick: onToggleBorderPanel
+          },
+          /* @__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",
         {
-          class: "image-resize-handle bottom-right",
-          onPointerdown: (e) => onResizeHandlePointerDown(e, "bottom-right")
-        }
-      )), showCaption.value && /* @__PURE__ */ h(
+          class: `image-wrapper${isCropping.value ? " cropping" : ""}`,
+          ref: wrapperRef,
+          style: wrapperStyle,
+          onClick: closePanels
+        },
+        cropClipStyle ? /* @__PURE__ */ h("div", { class: "crop-clip", style: cropClipStyle }, /* @__PURE__ */ h(
+          "img",
+          {
+            draggable: "false",
+            ref: imageRef,
+            "data-type": IMAGE_DATA_TYPE,
+            onLoad: onImageLoad,
+            src: src.value,
+            alt: caption.value,
+            style: imgStyle,
+            onError: (e) => {
+              var _a3;
+              return Promise.resolve((_a3 = config.onImageLoadError) == null ? void 0 : _a3.call(config, e)).catch(
+                () => {
+                }
+              );
+            }
+          }
+        )) : /* @__PURE__ */ h(
+          "img",
+          {
+            draggable: "false",
+            ref: imageRef,
+            "data-type": IMAGE_DATA_TYPE,
+            onLoad: onImageLoad,
+            src: src.value,
+            alt: caption.value,
+            style: imgStyle,
+            onError: (e) => {
+              var _a3;
+              return Promise.resolve((_a3 = config.onImageLoadError) == null ? void 0 : _a3.call(config, e)).catch(() => {
+              });
+            }
+          }
+        ),
+        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(
+          "div",
+          {
+            class: "crop-toolbar-btn",
+            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,
+        !isCropping.value ? /* @__PURE__ */ h(Fragment$2, null, /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-resize-handle top-left",
+            onPointerdown: (e) => onResizeHandlePointerDown(e, "top-left")
+          }
+        ), /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-resize-handle top-right",
+            onPointerdown: (e) => onResizeHandlePointerDown(e, "top-right")
+          }
+        ), /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-resize-handle bottom-left",
+            onPointerdown: (e) => onResizeHandlePointerDown(e, "bottom-left")
+          }
+        ), /* @__PURE__ */ h(
+          "div",
+          {
+            class: "image-resize-handle bottom-right",
+            onPointerdown: (e) => onResizeHandlePointerDown(e, "bottom-right")
+          }
+        )) : null
+      ), showCaption.value && /* @__PURE__ */ h(
         "input",
         {
           draggable: "true",
@@ -813,6 +1322,38 @@ const MilkdownImageBlock = defineComponent({
       type: Object,
       required: true
     },
+    cropRatio: {
+      type: Object,
+      required: true
+    },
+    cropTop: {
+      type: Object,
+      required: true
+    },
+    cropLeft: {
+      type: Object,
+      required: true
+    },
+    cropWidth: {
+      type: Object,
+      required: true
+    },
+    cropHeight: {
+      type: Object,
+      required: true
+    },
+    borderWidth: {
+      type: Object,
+      required: true
+    },
+    borderColor: {
+      type: Object,
+      required: true
+    },
+    borderStyle: {
+      type: Object,
+      required: true
+    },
     selected: {
       type: Object,
       required: true
@@ -864,6 +1405,14 @@ const imageBlockView = $view(
       const caption = ref(initialNode.attrs.caption);
       const ratio = ref(initialNode.attrs.ratio);
       const align = ref(initialNode.attrs.align);
+      const cropRatio = ref(initialNode.attrs.cropRatio);
+      const cropTop = ref(initialNode.attrs.cropTop);
+      const cropLeft = ref(initialNode.attrs.cropLeft);
+      const cropWidth = ref(initialNode.attrs.cropWidth);
+      const cropHeight = ref(initialNode.attrs.cropHeight);
+      const borderWidth = ref(initialNode.attrs.borderWidth);
+      const borderColor = ref(initialNode.attrs.borderColor);
+      const borderStyle = ref(initialNode.attrs.borderStyle);
       const selected = ref(false);
       const readonly = ref(!view.editable);
       const setAttr = (attr, value) => {
@@ -884,6 +1433,14 @@ const imageBlockView = $view(
         caption,
         ratio,
         align,
+        cropRatio,
+        cropTop,
+        cropLeft,
+        cropWidth,
+        cropHeight,
+        borderWidth,
+        borderColor,
+        borderStyle,
         selected,
         readonly,
         setAttr,
@@ -903,6 +1460,18 @@ const imageBlockView = $view(
       const disposeAlignWatcher = watchEffect(() => {
         dom.dataset.align = align.value || "center";
       });
+      const disposeCropWatcher = watchEffect(() => {
+        dom.dataset.cropRatio = cropRatio.value || "free";
+      });
+      const disposeBorderWatcher = watchEffect(() => {
+        var _a, _b, _c;
+        const w = (_a = borderWidth.value) != null ? _a : 0;
+        const c = (_b = borderColor.value) != null ? _b : "#000000";
+        const s = (_c = borderStyle.value) != null ? _c : "none";
+        dom.dataset.borderWidth = String(w);
+        dom.dataset.borderColor = c;
+        dom.dataset.borderStyle = s;
+      });
       const proxyDomURL = config.proxyDomURL;
       const bindAttrs = (node) => {
         if (!proxyDomURL) {
@@ -920,6 +1489,14 @@ const imageBlockView = $view(
         ratio.value = node.attrs.ratio;
         caption.value = node.attrs.caption;
         align.value = node.attrs.align;
+        cropRatio.value = node.attrs.cropRatio;
+        cropTop.value = node.attrs.cropTop;
+        cropLeft.value = node.attrs.cropLeft;
+        cropWidth.value = node.attrs.cropWidth;
+        cropHeight.value = node.attrs.cropHeight;
+        borderWidth.value = node.attrs.borderWidth;
+        borderColor.value = node.attrs.borderColor;
+        borderStyle.value = node.attrs.borderStyle;
         readonly.value = !view.editable;
       };
       bindAttrs(initialNode);
@@ -932,7 +1509,13 @@ const imageBlockView = $view(
           return true;
         },
         stopEvent: (e) => {
+          var _a;
           if (e.target instanceof HTMLInputElement) return true;
+          if (e.target instanceof HTMLElement && e.target.tagName === "INPUT")
+            return true;
+          const target = e.target;
+          if ((_a = target.closest) == null ? void 0 : _a.call(target, ".setting-panel, .image-toolbar, .crop-overlay"))
+            return true;
           return false;
         },
         selectNode: () => {
@@ -944,6 +1527,8 @@ const imageBlockView = $view(
         destroy: () => {
           disposeSelectedWatcher();
           disposeAlignWatcher();
+          disposeCropWatcher();
+          disposeBorderWatcher();
           app.unmount();
           dom.remove();
         }