@yltrcc/vditor 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * Vditor v0.1.1 - A markdown editor written in TypeScript.
+ * Vditor v0.3.0 - A markdown editor written in TypeScript.
  *
  * MIT License
  *
@@ -169,7 +169,7 @@ var codeRender = __webpack_require__(663);
 // EXTERNAL MODULE: ./src/ts/markdown/flowchartRender.ts
 var flowchartRender = __webpack_require__(600);
 // EXTERNAL MODULE: ./src/ts/markdown/graphvizRender.ts
-var graphvizRender = __webpack_require__(407);
+var graphvizRender = __webpack_require__(788);
 // EXTERNAL MODULE: ./src/ts/markdown/highlightRender.ts
 var highlightRender = __webpack_require__(376);
 ;// ./src/ts/markdown/lazyLoadImageRender.ts
@@ -1267,7 +1267,7 @@ var looseJsonParse = function (text) {
 /* harmony export */   Y: () => (/* binding */ Constants),
 /* harmony export */   g: () => (/* binding */ _VDITOR_VERSION)
 /* harmony export */ });
-var _VDITOR_VERSION = "0.1.1";
+var _VDITOR_VERSION = "0.3.0";
 
 var Constants = /** @class */ (function () {
     function Constants() {
@@ -1315,7 +1315,7 @@ var Constants = /** @class */ (function () {
         // 别名
         "js", "ts", "html", "toml", "c#", "bat"
     ];
-    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.1.1");
+    Constants.CDN = "https://unpkg.com/@yltrcc/vditor@".concat("0.3.0");
     Constants.MARKDOWN_OPTIONS = {
         autoSpace: false,
         gfmAutoLink: true,
@@ -1456,59 +1456,6 @@ var highlightRender = function (hljsOption, element, cdn) {
 };
 
 
-/***/ },
-
-/***/ 407
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   m: () => (/* binding */ graphvizRender)
-/* harmony export */ });
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(357);
-/* harmony import */ var _util_addScript__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(901);
-/* harmony import */ var _adapterRender__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(687);
-
-
-
-var graphvizRender = function (element, cdn) {
-    if (cdn === void 0) { cdn = _constants__WEBPACK_IMPORTED_MODULE_0__/* .Constants */ .Y.CDN; }
-    var graphvizElements = _adapterRender__WEBPACK_IMPORTED_MODULE_2__.graphvizRenderAdapter.getElements(element);
-    if (graphvizElements.length === 0) {
-        return;
-    }
-    (0,_util_addScript__WEBPACK_IMPORTED_MODULE_1__/* .addScript */ .Z)("".concat(cdn, "/dist/js/graphviz/viz.js"), "vditorGraphVizScript").then(function () {
-        graphvizElements.forEach(function (e) {
-            var code = _adapterRender__WEBPACK_IMPORTED_MODULE_2__.graphvizRenderAdapter.getCode(e);
-            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
-                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
-                return;
-            }
-            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
-                return;
-            }
-            try {
-                var blob = new Blob(["importScripts('".concat(document.getElementById("vditorGraphVizScript").src.replace("viz.js", "full.render.js"), "');")], { type: "application/javascript" });
-                var url = window.URL || window.webkitURL;
-                var blobUrl = url.createObjectURL(blob);
-                var worker = new Worker(blobUrl);
-                new Viz({ worker: worker })
-                    .renderSVGElement(code).then(function (result) {
-                    e.innerHTML = result.outerHTML;
-                }).catch(function (error) {
-                    e.innerHTML = "graphviz render error: <br>".concat(error);
-                    e.className = "vditor-reset--error";
-                });
-            }
-            catch (e) {
-                console.error("graphviz error", e);
-            }
-            e.setAttribute("data-processed", "true");
-        });
-    });
-};
-
-
 /***/ },
 
 /***/ 417
@@ -2426,6 +2373,59 @@ var markmapRender = function (element, cdn) {
 };
 
 
+/***/ },
+
+/***/ 788
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   m: () => (/* binding */ graphvizRender)
+/* harmony export */ });
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(357);
+/* harmony import */ var _util_addScript__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(901);
+/* harmony import */ var _adapterRender__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(687);
+
+
+
+var graphvizRender = function (element, cdn) {
+    if (cdn === void 0) { cdn = _constants__WEBPACK_IMPORTED_MODULE_0__/* .Constants */ .Y.CDN; }
+    var graphvizElements = _adapterRender__WEBPACK_IMPORTED_MODULE_2__.graphvizRenderAdapter.getElements(element);
+    if (graphvizElements.length === 0) {
+        return;
+    }
+    (0,_util_addScript__WEBPACK_IMPORTED_MODULE_1__/* .addScript */ .Z)("".concat(cdn, "/dist/js/graphviz/viz.js"), "vditorGraphVizScript").then(function () {
+        graphvizElements.forEach(function (e) {
+            var code = _adapterRender__WEBPACK_IMPORTED_MODULE_2__.graphvizRenderAdapter.getCode(e);
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+            try {
+                var blob = new Blob(["importScripts('".concat(document.getElementById("vditorGraphVizScript").src.replace("viz.js", "full.render.js"), "');")], { type: "application/javascript" });
+                var url = window.URL || window.webkitURL;
+                var blobUrl = url.createObjectURL(blob);
+                var worker = new Worker(blobUrl);
+                new Viz({ worker: worker })
+                    .renderSVGElement(code).then(function (result) {
+                    e.innerHTML = result.outerHTML;
+                }).catch(function (error) {
+                    e.innerHTML = "graphviz render error: <br>".concat(error);
+                    e.className = "vditor-reset--error";
+                });
+            }
+            catch (e) {
+                console.error("graphviz error", e);
+            }
+            e.setAttribute("data-processed", "true");
+        });
+    });
+};
+
+
 /***/ },
 
 /***/ 849
@@ -5108,18 +5108,61 @@ var processDocLinksInHTML = function (html) {
     });
     return tempDiv.innerHTML;
 };
+/**
+ * 处理图片尺寸，将带 width/height 属性的图片转换为 Markdown 语法
+ * 支持: ![alt](url =300x200)
+ */
+var processImageSizeInHTML = function (html) {
+    var tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    // 查找所有带有 data-resizable="true" 标记的图片元素
+    var images = tempDiv.querySelectorAll('img[data-resizable="true"]');
+    images.forEach(function (imgElement) {
+        var img = imgElement;
+        var src = img.getAttribute("src") || "";
+        var alt = img.getAttribute("alt") || "";
+        // 获取尺寸 - 优先从 attribute 获取
+        var width = img.getAttribute("width") || "";
+        var height = img.getAttribute("height") || "";
+        // 如果 attribute 没有或为空，尝试从 style 获取
+        if (!width && img.style.width) {
+            width = img.style.width.replace("px", "").replace("%", "");
+        }
+        if (!height && img.style.height) {
+            height = img.style.height.replace("px", "").replace("%", "");
+        }
+        // 构建带尺寸的 Markdown 语法: ![alt](url =300x200)
+        if (width && height) {
+            var md = "![".concat(alt, "](").concat(src, " =").concat(width, "x").concat(height, ")");
+            // 用 Markdown 文本替换图片元素
+            img.replaceWith(document.createTextNode(md));
+        }
+        else if (width) {
+            var md = "![".concat(alt, "](").concat(src, " =").concat(width, "x)");
+            img.replaceWith(document.createTextNode(md));
+        }
+        else if (height) {
+            var md = "![".concat(alt, "](").concat(src, " =x").concat(height, ")");
+            img.replaceWith(document.createTextNode(md));
+        }
+    });
+    return tempDiv.innerHTML;
+};
 var getMarkdown = function (vditor) {
     if (vditor.currentMode === "sv") {
         return (0,code160to32/* code160to32 */.p)("".concat(vditor.sv.element.textContent, "\n").replace(/\n\n$/, "\n"));
     }
     else if (vditor.currentMode === "wysiwyg") {
-        // 先处理 doclink 元素，将其转换回 Markdown 语法
-        var processedHTML = processDocLinksInHTML(vditor.wysiwyg.element.innerHTML);
+        // 先处理图片尺寸 - 必须在处理 doclink 之前
+        var processedHTML = processImageSizeInHTML(vditor.wysiwyg.element.innerHTML);
+        // 再处理 doclink 元素
+        processedHTML = processDocLinksInHTML(processedHTML);
         return vditor.lute.VditorDOM2Md(processedHTML);
     }
     else if (vditor.currentMode === "ir") {
         // 同样处理 IR 模式
-        var processedHTML = processDocLinksInHTML(vditor.ir.element.innerHTML);
+        var processedHTML = processImageSizeInHTML(vditor.ir.element.innerHTML);
+        processedHTML = processDocLinksInHTML(processedHTML);
         return vditor.lute.VditorIRDOM2Md(processedHTML);
     }
     return "";
@@ -5345,7 +5388,7 @@ var codeRender = __webpack_require__(663);
 // EXTERNAL MODULE: ./src/ts/markdown/flowchartRender.ts
 var flowchartRender = __webpack_require__(600);
 // EXTERNAL MODULE: ./src/ts/markdown/graphvizRender.ts
-var graphvizRender = __webpack_require__(407);
+var graphvizRender = __webpack_require__(788);
 // EXTERNAL MODULE: ./src/ts/markdown/highlightRender.ts
 var highlightRender = __webpack_require__(376);
 // EXTERNAL MODULE: ./src/ts/markdown/mathRender.ts
@@ -7017,6 +7060,13 @@ var showCode = function (previewElement, vditor, first) {
     // 移除内联样式，让 CSS 类控制显示
     codeElement.style.removeProperty("display");
     previewElement.style.removeProperty("display");
+    // 将语言信息传递给编辑区域
+    var language = previewElement.getAttribute("data-language") || "";
+    codeElement.setAttribute("data-language", language);
+    // 隐藏编辑时的多余工具栏
+    if (vditor.wysiwyg.popover) {
+        vditor.wysiwyg.popover.style.display = "none";
+    }
     var range = codeElement.ownerDocument.createRange();
     if (codeElement.tagName === "CODE") {
         // 行内代码
@@ -7954,6 +8004,12 @@ var highlightToolbarWYSIWYG = function (vditor) {
             }
         });
         if (blockRenderElement && isBlock) {
+            // 如果代码块处于编辑状态，则不显示工具栏
+            var isCodeBlockEditing = blockRenderElement.classList.contains("vditor-wysiwyg__block--editing");
+            if (isCodeBlockEditing) {
+                vditor.wysiwyg.popover.style.display = "none";
+                return;
+            }
             vditor.wysiwyg.popover.innerHTML = "";
             genUp(range, blockRenderElement, vditor);
             genDown(range, blockRenderElement, vditor);
@@ -8464,6 +8520,83 @@ var highlightToolbar = function (vditor) {
 ;// ./src/ts/wysiwyg/renderDomByMd.ts
 
 
+/**
+ * 后处理 DOM，处理图片尺寸
+ * 1. 将文本节点中的 ![alt](url =300x200) 转换为带尺寸的 <img>
+ * 2. 给没有 width/height 的 <img> 添加默认尺寸 300x200
+ */
+var processImageSizeInDOM = function (element) {
+    console.log('processImageSizeInDOM called');
+    // 第一步：处理文本节点中的带尺寸图片语法 ![alt](url =300x200)
+    var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+    var textNodes = [];
+    var node;
+    while (node = walker.nextNode()) {
+        textNodes.push(node);
+    }
+    textNodes.forEach(function (textNode) {
+        var text = textNode.textContent || '';
+        // 匹配带尺寸的图片: ![alt](url =300x200)
+        var imageWithSizeRegex = /!\[([^\]]*)\]\(([^)]+?)\s*=(\d+)x(\d+)\)/g;
+        if (imageWithSizeRegex.test(text)) {
+            console.log('Found image with size in text:', text);
+            var parent_1 = textNode.parentNode;
+            if (parent_1) {
+                var tempDiv = document.createElement('div');
+                var processedText = text.replace(imageWithSizeRegex, function (match, alt, url, width, height) {
+                    console.log('Match found:', { match: match, alt: alt, url: url, width: width, height: height });
+                    var imgHtml = "<img src=\"".concat(url.trim(), "\" alt=\"").concat(alt, "\" data-resizable=\"true\"");
+                    if (width)
+                        imgHtml += " width=\"".concat(width, "\"");
+                    if (height)
+                        imgHtml += " height=\"".concat(height, "\"");
+                    imgHtml += " />";
+                    console.log('Generated imgHtml:', imgHtml);
+                    return imgHtml;
+                });
+                tempDiv.innerHTML = processedText;
+                // 替换文本节点
+                while (tempDiv.firstChild) {
+                    parent_1.insertBefore(tempDiv.firstChild, textNode);
+                }
+                parent_1.removeChild(textNode);
+            }
+        }
+    });
+    // 第二步：给没有 width/height 的 <img> 添加默认尺寸
+    var images = element.querySelectorAll('img:not([data-resizable="true"])');
+    images.forEach(function (img) {
+        var imgElement = img;
+        var width = imgElement.getAttribute('width');
+        var height = imgElement.getAttribute('height');
+        var styleWidth = imgElement.style.width;
+        var styleHeight = imgElement.style.height;
+        // 如果没有设置尺寸，添加默认尺寸
+        if (!width && !height && !styleWidth && !styleHeight) {
+            console.log('Adding default size to img:', imgElement.src);
+            imgElement.setAttribute('width', '300');
+            imgElement.setAttribute('height', '200');
+            imgElement.setAttribute('data-resizable', 'true');
+        }
+    });
+};
+/**
+ * 预处理 Markdown，为没有尺寸的图片添加默认尺寸
+ * 将 ![alt](url) 转换为 ![alt](url =300x200)
+ */
+var preprocessImageSize = function (md) {
+    // 匹配普通图片语法 ![alt](url)，但排除已经有 =widthxheight 的
+    // 使用负向前瞻来排除已包含 = 的图片
+    var imageRegex = /!\[([^\]]*)\]\(([^)=\]]+)\)(?![\s\w]*=)/g;
+    return md.replace(imageRegex, function (match, alt, url) {
+        // 检查 URL 是否已经包含尺寸参数
+        if (url.includes('=')) {
+            return match;
+        }
+        console.log('Preprocess: Adding default size to image:', match);
+        return "![".concat(alt, "](").concat(url.trim(), " =300x200)");
+    });
+};
 var renderDomByMd = function (vditor, md, options) {
     if (options === void 0) { options = {
         enableAddUndoStack: true,
@@ -8471,7 +8604,15 @@ var renderDomByMd = function (vditor, md, options) {
         enableInput: true,
     }; }
     var editorElement = vditor.wysiwyg.element;
-    editorElement.innerHTML = vditor.lute.Md2VditorDOM(md);
+    console.log('renderDomByMd input:', md);
+    // 预处理：为普通图片添加默认尺寸
+    var processedMd = preprocessImageSize(md);
+    console.log('After preprocess:', processedMd);
+    editorElement.innerHTML = vditor.lute.Md2VditorDOM(processedMd);
+    console.log('After Lute render:', editorElement.innerHTML);
+    // 后处理图片尺寸（处理带 =widthxheight 的）
+    processImageSizeInDOM(editorElement);
+    console.log('After processImageSizeInDOM:', editorElement.innerHTML);
     editorElement.querySelectorAll(".vditor-wysiwyg__preview[data-render='2']").forEach(function (item) {
         processCodeRender(item, vditor);
         item.previousElementSibling.setAttribute("style", "display:none");
@@ -9880,6 +10021,7 @@ var uploadFiles = function (vditor, files, element) { return __awaiter(void 0, v
 
 
 
+
 var input_input = function (vditor, range, event) {
     var _a;
     // 检查是否在代码块编辑模式中
@@ -10020,14 +10162,16 @@ var input_input = function (vditor, range, event) {
         }
         else {
             blockElement.outerHTML = html_1;
-            if (footnoteElement) {
-                // 更新正文中的 tip
-                var footnoteItemElement = (0,hasClosest/* hasTopClosestByTag */.Ab)(vditor.wysiwyg.element.querySelector("wbr"), "LI");
-                if (footnoteItemElement) {
-                    var footnoteRefElement = vditor.wysiwyg.element.querySelector("sup[data-type=\"footnotes-ref\"][data-footnotes-label=\"".concat(footnoteItemElement.getAttribute("data-marker"), "\"]"));
-                    if (footnoteRefElement) {
-                        footnoteRefElement.setAttribute("aria-label", footnoteItemElement.textContent.trim().substr(0, 24));
-                    }
+        }
+        // 处理图片尺寸
+        processImageSizeInDOM(vditor.wysiwyg.element);
+        if (footnoteElement) {
+            // 更新正文中的 tip
+            var footnoteItemElement = (0,hasClosest/* hasTopClosestByTag */.Ab)(vditor.wysiwyg.element.querySelector("wbr"), "LI");
+            if (footnoteItemElement) {
+                var footnoteRefElement = vditor.wysiwyg.element.querySelector("sup[data-type=\"footnotes-ref\"][data-footnotes-label=\"".concat(footnoteItemElement.getAttribute("data-marker"), "\"]"));
+                if (footnoteRefElement) {
+                    footnoteRefElement.setAttribute("aria-label", footnoteItemElement.textContent.trim().substr(0, 24));
                 }
             }
         }
@@ -11323,7 +11467,7 @@ var fixFirefoxArrowUpTable = function (event, blockElement, range) {
     return false;
 };
 var paste = function (vditor, event, callback) { return fixBrowserBehavior_awaiter(void 0, void 0, void 0, function () {
-    var textHTML, textPlain, files, renderers, renderLinkDest, doc, height, code, codeElement, position, tempElement, fileReader_1, file_1, range, blockElement, range;
+    var textHTML, textPlain, files, renderers, renderLinkDest, doc, height, code, codeElement, position, nextSibling, tempElement, fileReader_1, file_1, range, blockElement, range;
     var _a;
     return fixBrowserBehavior_generator(this, function (_b) {
         switch (_b.label) {
@@ -11449,9 +11593,11 @@ var paste = function (vditor, event, callback) { return fixBrowserBehavior_await
                     codeElement.textContent = codeElement.textContent.substring(0, position.start)
                         + textPlain + codeElement.textContent.substring(position.end);
                     (0,selection/* setSelectionByPosition */.Fm)(position.start + textPlain.length, position.start + textPlain.length, codeElement.parentElement);
-                    if ((_a = codeElement.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling.classList.contains("vditor-".concat(vditor.currentMode, "__preview"))) {
-                        codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
-                        processCodeRender(codeElement.parentElement.nextElementSibling, vditor);
+                    nextSibling = (_a = codeElement.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+                    if (nextSibling && nextSibling.classList
+                        .contains("vditor-".concat(vditor.currentMode, "__preview"))) {
+                        nextSibling.innerHTML = codeElement.outerHTML;
+                        processCodeRender(nextSibling, vditor);
                     }
                 }
                 return [3 /*break*/, 10];
@@ -15474,8 +15620,36 @@ var WYSIWYG = /** @class */ (function () {
                 el.replaceWith(document.createTextNode(markdown));
             }
         });
+        // 处理带尺寸的图片 - 将 <img> 标签替换为自定义 Markdown 语法
+        var images = tempElement.querySelectorAll('img[data-resizable="true"]');
+        images.forEach(function (imgElement) {
+            var img = imgElement;
+            var src = img.getAttribute("src") || "";
+            var alt = img.getAttribute("alt") || "";
+            var width = img.getAttribute("width") || "";
+            var height = img.getAttribute("height") || "";
+            if (!width && img.style.width) {
+                width = img.style.width.replace("px", "").replace("%", "");
+            }
+            if (!height && img.style.height) {
+                height = img.style.height.replace("px", "").replace("%", "");
+            }
+            if (width && height) {
+                var md = "![".concat(alt, "](").concat(src, " =").concat(width, "x").concat(height, ")");
+                imgElement.replaceWith(document.createTextNode(md));
+            }
+            else if (width) {
+                var md = "![".concat(alt, "](").concat(src, " =").concat(width, "x)");
+                imgElement.replaceWith(document.createTextNode(md));
+            }
+            else if (height) {
+                var md = "![".concat(alt, "](").concat(src, " =x").concat(height, ")");
+                imgElement.replaceWith(document.createTextNode(md));
+            }
+        });
         event.clipboardData.setData("text/plain", vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");
+        console.log('Copy completed, data set to clipboard');
     };
     WYSIWYG.prototype.bindEvent = function (vditor) {
         var _this = this;
@@ -15814,6 +15988,141 @@ var WYSIWYG = /** @class */ (function () {
 }());
 
 
+;// ./src/ts/util/imageResize.ts
+
+
+var initImageResize = function (vditor) {
+    var editorElement = vditor.wysiwyg.element;
+    var currentResizeState = null;
+    // 检测鼠标是否在图片的四个角附近
+    var getResizeCorner = function (imgElement, mouseX, mouseY) {
+        var rect = imgElement.getBoundingClientRect();
+        var cornerSize = 20; // 角落检测区域大小
+        // 左上角
+        if (mouseX >= rect.left && mouseX <= rect.left + cornerSize &&
+            mouseY >= rect.top && mouseY <= rect.top + cornerSize) {
+            return 'nw';
+        }
+        // 右上角
+        if (mouseX >= rect.right - cornerSize && mouseX <= rect.right &&
+            mouseY >= rect.top && mouseY <= rect.top + cornerSize) {
+            return 'ne';
+        }
+        // 左下角
+        if (mouseX >= rect.left && mouseX <= rect.left + cornerSize &&
+            mouseY >= rect.bottom - cornerSize && mouseY <= rect.bottom) {
+            return 'sw';
+        }
+        // 右下角
+        if (mouseX >= rect.right - cornerSize && mouseX <= rect.right &&
+            mouseY >= rect.bottom - cornerSize && mouseY <= rect.bottom) {
+            return 'se';
+        }
+        return null;
+    };
+    // 根据角落设置鼠标样式
+    var getCursorStyle = function (corner) {
+        switch (corner) {
+            case 'nw':
+            case 'se':
+                return 'nwse-resize';
+            case 'ne':
+            case 'sw':
+                return 'nesw-resize';
+            default:
+                return 'default';
+        }
+    };
+    // 鼠标移动处理
+    var handleMouseMove = function (e) {
+        if (currentResizeState && currentResizeState.isResizing) {
+            // 正在调整大小
+            var imgElement = currentResizeState.imgElement, startX = currentResizeState.startX, startY = currentResizeState.startY, startWidth = currentResizeState.startWidth, startHeight = currentResizeState.startHeight, corner = currentResizeState.corner;
+            var deltaX = e.clientX - startX;
+            var deltaY = e.clientY - startY;
+            var newWidth = startWidth;
+            var newHeight = startHeight;
+            switch (corner) {
+                case "se": // 右下角
+                    newWidth = Math.max(50, startWidth + deltaX);
+                    newHeight = Math.max(50, startHeight + deltaY);
+                    break;
+                case "sw": // 左下角
+                    newWidth = Math.max(50, startWidth - deltaX);
+                    newHeight = Math.max(50, startHeight + deltaY);
+                    break;
+                case "ne": // 右上角
+                    newWidth = Math.max(50, startWidth + deltaX);
+                    newHeight = Math.max(50, startHeight - deltaY);
+                    break;
+                case "nw": // 左上角
+                    newWidth = Math.max(50, startWidth - deltaX);
+                    newHeight = Math.max(50, startHeight - deltaY);
+                    break;
+            }
+            imgElement.style.width = newWidth + "px";
+            imgElement.style.height = newHeight + "px";
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            // 检测鼠标是否在角落，改变鼠标样式
+            var target = e.target;
+            var imgElement = (0,hasClosest/* hasClosestByMatchTag */._Y)(target, "IMG");
+            if (imgElement && imgElement.getAttribute("data-resizable")) {
+                var corner = getResizeCorner(imgElement, e.clientX, e.clientY);
+                imgElement.style.cursor = getCursorStyle(corner);
+            }
+        }
+    };
+    // 鼠标按下处理
+    var handleMouseDown = function (e) {
+        var target = e.target;
+        var imgElement = (0,hasClosest/* hasClosestByMatchTag */._Y)(target, "IMG");
+        if (imgElement && imgElement.getAttribute("data-resizable")) {
+            var corner = getResizeCorner(imgElement, e.clientX, e.clientY);
+            if (corner) {
+                console.log('Start resizing from corner:', corner);
+                e.preventDefault();
+                e.stopPropagation();
+                currentResizeState = {
+                    isResizing: true,
+                    imgElement: imgElement,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    startWidth: imgElement.offsetWidth,
+                    startHeight: imgElement.offsetHeight,
+                    corner: corner
+                };
+                imgElement.classList.add("resizing");
+            }
+        }
+    };
+    // 鼠标释放处理
+    var handleMouseUp = function () {
+        if (currentResizeState && currentResizeState.isResizing) {
+            console.log('Stop resizing');
+            var imgElement = currentResizeState.imgElement;
+            currentResizeState.isResizing = false;
+            imgElement.classList.remove("resizing");
+            var finalWidth = parseInt(imgElement.style.width) || imgElement.offsetWidth;
+            var finalHeight = parseInt(imgElement.style.height) || imgElement.offsetHeight;
+            imgElement.setAttribute("width", finalWidth.toString());
+            imgElement.setAttribute("height", finalHeight.toString());
+            if (typeof vditor.options.input === "function") {
+                setTimeout(function () {
+                    vditor.options.input(getMarkdown(vditor));
+                }, 0);
+            }
+            currentResizeState = null;
+        }
+    };
+    // 添加事件监听器
+    editorElement.addEventListener("mousemove", handleMouseMove);
+    editorElement.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+};
+
 ;// ./src/index.ts
 var src_extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -15867,6 +16176,7 @@ var src_extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 
 
 var Vditor = /** @class */ (function (_super) {
@@ -16334,6 +16644,7 @@ var Vditor = /** @class */ (function (_super) {
             });
             _this.vditor.preview = new Preview(_this.vditor);
             initUI(_this.vditor);
+            initImageResize(_this.vditor);
             if (mergedOptions.after) {
                 mergedOptions.after();
             }