@wangeditor-next/editor 5.2.3 → 5.2.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.4](https://github.com/cycleccc/wangEditor/compare/@wangeditor-next/editor@5.2.3...@wangeditor-next/editor@5.2.4) (2024-06-13)
+
+
+### Performance Improvements
+
+* add edit image and video width height menu ([f0a9ce6](https://github.com/cycleccc/wangEditor/commit/f0a9ce6a24107e6e4865f38dd8cd1c7f048551f2))
+
+
+
+
+
 ## [5.2.3](https://github.com/cycleccc/wangEditor/compare/@wangeditor-next/editor@5.2.2...@wangeditor-next/editor@5.2.3) (2024-06-08)
 
 

package/dist/index.esm.js

@@ -24186,7 +24186,6 @@ var HoverBar = /** @class */ (function () {
         }
         //替换 icon svg
         var menuConf = editor.getMenuConfig(key);
-        console.log('🚀 ~ HoverBar ~ registerSingleItem ~ menuConf:', menuConf, menu);
         if (menuConf && menuConf.iconSvg !== undefined) {
             menu.iconSvg = menuConf.iconSvg;
         }
@@ -27381,10 +27380,14 @@ var enResources$5 = {
         netImage: 'Net image',
         delete: 'Delete image',
         edit: 'Edit image',
+        editSize: 'Edit size',
         viewLink: 'View link',
         src: 'Image src',
         desc: 'Description',
         link: 'Image link',
+        ok: 'Ok',
+        width: 'Width',
+        height: 'Height',
     },
     indent: {
         decrease: 'Decrease',
@@ -27475,10 +27478,14 @@ var zhResources$5 = {
         netImage: '网络图片',
         delete: '删除图片',
         edit: '编辑图片',
+        editSize: '修改尺寸',
         viewLink: '查看链接',
         src: '图片地址',
         desc: '图片描述',
         link: '图片链接',
+        ok: '确定',
+        width: '宽度',
+        height: '高度',
     },
     indent: {
         decrease: '减少缩进',
@@ -29681,7 +29688,7 @@ var parseHtmlConf$4 = {
 /**
  * 生成唯一的 DOM ID
  */
-function genDomID$3() {
+function genDomID$4() {
     return genRandomStr$1('w-e-insert-link');
 }
 var InsertLinkMenu = /** @class */ (function () {
@@ -29692,9 +29699,9 @@ var InsertLinkMenu = /** @class */ (function () {
         this.showModal = true; // 点击 button 时显示 modal
         this.modalWidth = 300;
         this.$content = null;
-        this.textInputId = genDomID$3();
-        this.urlInputId = genDomID$3();
-        this.buttonId = genDomID$3();
+        this.textInputId = genDomID$4();
+        this.urlInputId = genDomID$4();
+        this.buttonId = genDomID$4();
     }
     InsertLinkMenu.prototype.getValue = function (editor) {
         // 插入菜单，不需要 value
@@ -29770,7 +29777,7 @@ var InsertLinkMenu = /** @class */ (function () {
 /**
  * 生成唯一的 DOM ID
  */
-function genDomID$2() {
+function genDomID$3() {
     return genRandomStr$1('w-e-update-link');
 }
 var EditLinkMenu = /** @class */ (function () {
@@ -29781,8 +29788,8 @@ var EditLinkMenu = /** @class */ (function () {
         this.showModal = true; // 点击 button 时显示 modal
         this.modalWidth = 300;
         this.$content = null;
-        this.urlInputId = genDomID$2();
-        this.buttonId = genDomID$2();
+        this.urlInputId = genDomID$3();
+        this.buttonId = genDomID$3();
     }
     EditLinkMenu.prototype.getSelectedLinkElem = function (editor) {
         var node = DomEditor.getSelectedNodeByType(editor, 'link');
@@ -30410,7 +30417,7 @@ function isInsertImageMenuDisabled(editor) {
 /**
  * 生成唯一的 DOM ID
  */
-function genDomID$1$1() {
+function genDomID$2() {
     return genRandomStr$1('w-e-insert-image');
 }
 var InsertImage = /** @class */ (function () {
@@ -30421,10 +30428,10 @@ var InsertImage = /** @class */ (function () {
         this.showModal = true; // 点击 button 时显示 modal
         this.modalWidth = 300;
         this.$content = null;
-        this.srcInputId = genDomID$1$1();
-        this.altInputId = genDomID$1$1();
-        this.hrefInputId = genDomID$1$1();
-        this.buttonId = genDomID$1$1();
+        this.srcInputId = genDomID$2();
+        this.altInputId = genDomID$2();
+        this.hrefInputId = genDomID$2();
+        this.buttonId = genDomID$2();
     }
     InsertImage.prototype.getValue = function (editor) {
         // 插入菜单，不需要 value
@@ -30548,7 +30555,7 @@ var DeleteImage = /** @class */ (function () {
 /**
  * 生成唯一的 DOM ID
  */
-function genDomID$4() {
+function genDomID$1$1() {
     return genRandomStr$1('w-e-edit-image');
 }
 var EditImage = /** @class */ (function () {
@@ -30559,10 +30566,10 @@ var EditImage = /** @class */ (function () {
         this.showModal = true; // 点击 button 时显示 modal
         this.modalWidth = 300;
         this.$content = null;
-        this.srcInputId = genDomID$4();
-        this.altInputId = genDomID$4();
-        this.hrefInputId = genDomID$4();
-        this.buttonId = genDomID$4();
+        this.srcInputId = genDomID$1$1();
+        this.altInputId = genDomID$1$1();
+        this.hrefInputId = genDomID$1$1();
+        this.buttonId = genDomID$1$1();
     }
     EditImage.prototype.getValue = function (editor) {
         // 编辑图片，用不到 getValue
@@ -30797,6 +30804,122 @@ var ImageWidth100 = /** @class */ (function (_super) {
     return ImageWidth100;
 }(ImageWidthBaseClass));
 
+/**
+ * @description 修改图片尺寸
+ * @author wangfupeng
+ */
+/**
+ * 生成唯一的 DOM ID
+ */
+function genDomID$5() {
+    return genRandomStr$1('w-e-insert-image');
+}
+var EditorImageSizeMenu = /** @class */ (function () {
+    function EditorImageSizeMenu() {
+        this.title = t('image.editSize');
+        this.tag = 'button';
+        this.showModal = true; // 点击 button 时显示 modal
+        this.modalWidth = 320;
+        this.$content = null;
+        this.widthInputId = genDomID$5();
+        this.heightInputId = genDomID$5();
+        this.buttonId = genDomID$5();
+    }
+    EditorImageSizeMenu.prototype.getSelectedImageNode = function (editor) {
+        return DomEditor.getSelectedNodeByType(editor, 'image');
+    };
+    EditorImageSizeMenu.prototype.getValue = function (editor) {
+        // 插入菜单，不需要 value
+        return '';
+    };
+    EditorImageSizeMenu.prototype.isActive = function (editor) {
+        // 任何时候，都不用激活 menu
+        return false;
+    };
+    EditorImageSizeMenu.prototype.exec = function (editor, value) {
+        // 点击菜单时，弹出 modal 之前，不需要执行其他代码
+        // 此处空着即可
+    };
+    EditorImageSizeMenu.prototype.isDisabled = function (editor) {
+        if (editor.selection == null)
+            return true;
+        var imageNode = this.getSelectedImageNode(editor);
+        if (imageNode == null) {
+            // 选区未处于 image node ，则禁用
+            return true;
+        }
+        return false;
+    };
+    EditorImageSizeMenu.prototype.getModalPositionNode = function (editor) {
+        return this.getSelectedImageNode(editor);
+    };
+    EditorImageSizeMenu.prototype.getModalContentElem = function (editor) {
+        // return $('<div><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p></div>')[0]
+        var _a = this, widthInputId = _a.widthInputId, heightInputId = _a.heightInputId, buttonId = _a.buttonId;
+        var _b = __read$5(genModalInputElems(t('image.width'), widthInputId, 'auto'), 2), widthContainerElem = _b[0], inputWidthElem = _b[1];
+        var $inputWidth = $(inputWidthElem);
+        var _c = __read$5(genModalInputElems(t('image.height'), heightInputId, 'auto'), 2), heightContainerElem = _c[0], inputHeightElem = _c[1];
+        var $inputHeight = $(inputHeightElem);
+        var _d = __read$5(genModalButtonElems(buttonId, t('image.ok')), 1), buttonContainerElem = _d[0];
+        if (this.$content == null) {
+            // 第一次渲染
+            var $content_1 = $('<div></div>');
+            // 绑定事件（第一次渲染时绑定，不要重复绑定）
+            $content_1.on('click', "#" + buttonId, function (e) {
+                e.preventDefault();
+                var rawWidth = $content_1.find("#" + widthInputId).val().trim();
+                var rawHeight = $content_1.find("#" + heightInputId).val().trim();
+                var isPercentage = function (value) { return /^\d+(\.\d+)?%$/.test(value); }; // 检查是否为合法的百分比字符串
+                var isNumeric = function (value) { return /^\d+(\.\d+)?$/.test(value); }; // 检查是否为合法的数字
+                var width = 'auto';
+                var height = 'auto';
+                if (isPercentage(rawWidth)) {
+                    width = rawWidth;
+                }
+                else if (isNumeric(rawWidth)) {
+                    width = parseInt(rawWidth) + 'px';
+                }
+                if (isPercentage(rawHeight)) {
+                    height = rawHeight;
+                }
+                else if (isNumeric(rawHeight)) {
+                    height = parseInt(rawHeight) + 'px';
+                }
+                var _a = imageNode.style, style = _a === void 0 ? {} : _a;
+                editor.restoreSelection();
+                var props = __assign$3(__assign$3({}, style), { style: {
+                        width: width,
+                        height: height,
+                    } });
+                // 修改尺寸
+                Transforms.setNodes(editor, props, {
+                    match: function (n) { return DomEditor.checkNodeType(n, 'image'); },
+                });
+                editor.hidePanelOrModal(); // 隐藏 modal
+            });
+            this.$content = $content_1;
+        }
+        var $content = this.$content;
+        // 先清空，再重新添加 DOM 内容
+        $content.empty();
+        $content.append(widthContainerElem);
+        $content.append(heightContainerElem);
+        $content.append(buttonContainerElem);
+        var imageNode = this.getSelectedImageNode(editor);
+        if (imageNode == null)
+            return $content[0];
+        // 初始化 input 值
+        var _e = imageNode.width, width = _e === void 0 ? 'auto' : _e, _f = imageNode.height, height = _f === void 0 ? 'auto' : _f;
+        $inputWidth.val(width);
+        $inputHeight.val(height);
+        setTimeout(function () {
+            $inputWidth.focus();
+        });
+        return $content[0];
+    };
+    return EditorImageSizeMenu;
+}());
+
 /**
  * @description 图片菜单配置
  * @author wangfupeng
@@ -30890,6 +31013,12 @@ var imageWidth100MenuConf = {
     factory: function () {
         return new ImageWidth100();
     },
+};
+var EditorImageSizeMenuConf = {
+    key: 'editorImageSizeMenu',
+    factory: function () {
+        return new EditorImageSizeMenu();
+    },
 };
 
 /**
@@ -30908,6 +31037,7 @@ var image$1 = {
         imageWidth30MenuConf,
         imageWidth50MenuConf,
         imageWidth100MenuConf,
+        EditorImageSizeMenuConf,
     ],
     editorPlugin: withImage,
 };
@@ -37336,12 +37466,20 @@ function getTagName($elem) {
  * @param height height
  * @returns iframe html string with size style
  */
-function genSizeStyledIframeHtml(iframeHtml, width, height) {
+function genSizeStyledIframeHtml(iframeHtml, width, height, style) {
     if (width === void 0) { width = 'auto'; }
     if (height === void 0) { height = 'auto'; }
+    if (style === void 0) { style = {}; }
     var $iframe = $(iframeHtml);
+    var _a = style.width, styleWidth = _a === void 0 ? '' : _a, _b = style.height, styleHeight = _b === void 0 ? '' : _b;
+    var styleStr = '';
+    if (styleWidth)
+        styleStr += "width: " + styleWidth + ";";
+    if (styleHeight)
+        styleStr += "height: " + styleHeight + ";";
     $iframe.attr('width', width);
     $iframe.attr('height', height);
+    $iframe.attr('style', styleStr);
     return $iframe[0].outerHTML;
 }
 
@@ -37350,19 +37488,19 @@ function genSizeStyledIframeHtml(iframeHtml, width, height) {
  * @author wangfupeng
  */
 function renderVideo(elemNode, children, editor) {
-    var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e;
+    var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e, _f = _a.style, style = _f === void 0 ? {} : _f;
     // 是否选中
     var selected = DomEditor.isNodeSelected(editor, elemNode);
     var vnode;
     if (src.trim().indexOf('<iframe ') === 0) {
         // 增加尺寸样式
-        var iframeHtml = genSizeStyledIframeHtml(src, width, height);
+        var iframeHtml = genSizeStyledIframeHtml(src, width, height, style);
         // iframe 形式，第三方视频
         vnode = (jsx("div", { className: "w-e-textarea-video-container", "data-selected": selected ? 'true' : '', innerHTML: iframeHtml }));
     }
     else {
         // 其他，mp4 格式
-        var videoVnode = (jsx("video", { poster: poster, controls: true },
+        var videoVnode = (jsx("video", { poster: poster, controls: true, style: style },
             jsx("source", { src: src, type: "video/mp4" }), "Sorry, your browser doesn't support embedded videos.\n \u62B1\u6B49\uFF0C\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 video \u89C6\u9891"));
         // @ts-ignore 添加尺寸
         if (width !== 'auto')
@@ -37393,16 +37531,22 @@ var renderVideoConf = {
  * @author wangfupeng
  */
 function videoToHtml(elemNode, childrenHtml) {
-    var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e;
+    var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e, _f = _a.style, style = _f === void 0 ? {} : _f;
     var res = '<div data-w-e-type="video" data-w-e-is-void style="text-align: center;">\n';
     if (src.trim().indexOf('<iframe ') === 0) {
         // iframe 形式
-        var iframeHtml = genSizeStyledIframeHtml(src, width, height);
+        var iframeHtml = genSizeStyledIframeHtml(src, width, height, style);
         res += iframeHtml;
     }
     else {
         // 其他，mp4 等 url 格式
-        res += "<video poster=\"" + poster + "\" controls=\"true\" width=\"" + width + "\" height=\"" + height + "\"><source src=\"" + src + "\" type=\"video/mp4\"/></video>";
+        var _g = style.width, styleWidth = _g === void 0 ? '' : _g, _h = style.height, styleHeight = _h === void 0 ? '' : _h;
+        var styleStr = '';
+        if (styleWidth)
+            styleStr += "width: " + styleWidth + ";";
+        if (styleHeight)
+            styleStr += "height: " + styleHeight + ";";
+        res += "<video poster=\"" + poster + "\" controls=\"true\" width=\"" + width + "\" height=\"" + height + "\" style=\"" + styleStr + "\"><source src=\"" + src + "\" type=\"video/mp4\"/></video>";
     }
     res += '\n</div>';
     return res;
@@ -37456,16 +37600,18 @@ var preParseHtmlConf = {
  * @description parse html
  * @author wangfupeng
  */
-function genVideoElem(src, poster, width, height) {
+function genVideoElem(src, poster, width, height, style) {
     if (poster === void 0) { poster = ''; }
     if (width === void 0) { width = 'auto'; }
     if (height === void 0) { height = 'auto'; }
+    if (style === void 0) { style = {}; }
     return {
         type: 'video',
         src: src,
         poster: poster,
         width: width,
         height: height,
+        style: style,
         children: [{ text: '' }], // void 元素有一个空 text
     };
 }
@@ -37475,13 +37621,15 @@ function parseHtml(elem, children, editor) {
     var poster = '';
     var width = 'auto';
     var height = 'auto';
+    var style = {};
     // <iframe> 形式
     var $iframe = $elem.find('iframe');
     if ($iframe.length > 0) {
         width = $iframe.attr('width') || 'auto';
         height = $iframe.attr('height') || 'auto';
+        style = $iframe.attr('style') || {};
         src = $iframe[0].outerHTML;
-        return genVideoElem(src, poster, width, height);
+        return genVideoElem(src, poster, width, height, style);
     }
     // <video> 形式
     var $video = $elem.find('video');
@@ -37495,7 +37643,8 @@ function parseHtml(elem, children, editor) {
     width = $video.attr('width') || 'auto';
     height = $video.attr('height') || 'auto';
     poster = $video.attr('poster') || '';
-    return genVideoElem(src, poster, width, height);
+    style = $iframe.attr('style') || {};
+    return genVideoElem(src, poster, width, height, style);
 }
 var parseHtmlConf = {
     selector: 'div[data-w-e-type="video"]',
@@ -37546,8 +37695,10 @@ var UPLOAD_VIDEO_SVG = '<svg viewBox="0 0 1056 1024"><path d="M805.902261 521.81
  * @param src video src
  * @param poster video poster
  */
-function insertVideo (editor, src, poster) {
+function insertVideo (editor, src, poster, width, height) {
     if (poster === void 0) { poster = ''; }
+    if (width === void 0) { width = ''; }
+    if (height === void 0) { height = ''; }
     return __awaiter$1(this, void 0, void 0, function () {
         var _a, onInsertedVideo, checkVideo, parseVideoSrc, checkRes, parsedSrc, video;
         return __generator$1(this, function (_b) {
@@ -37580,7 +37731,11 @@ function insertVideo (editor, src, poster) {
                         type: 'video',
                         src: parsedSrc,
                         poster: poster,
-                        children: [{ text: '' }], // 【注意】void node 需要一个空 text 作为 children
+                        children: [{ text: '' }],
+                        style: {
+                            width: width,
+                            height: height,
+                        },
                     };
                     // 插入视频
                     // 不使用此方式会比正常的选区选取先执行
@@ -37983,13 +38138,30 @@ var EditorVideoSizeMenu = /** @class */ (function () {
                 e.preventDefault();
                 var rawWidth = $content_1.find("#" + widthInputId).val().trim();
                 var rawHeight = $content_1.find("#" + heightInputId).val().trim();
-                var numberWidth = parseInt(rawWidth);
-                var numberHeight = parseInt(rawHeight);
-                var width = numberWidth ? numberWidth.toString() : 'auto';
-                var height = numberHeight ? numberHeight.toString() : 'auto';
+                var isPercentage = function (value) { return /^\d+(\.\d+)?%$/.test(value); }; // 检查是否为合法的百分比字符串
+                var isNumeric = function (value) { return /^\d+(\.\d+)?$/.test(value); }; // 检查是否为合法的数字
+                var width = 'auto';
+                var height = 'auto';
+                if (isPercentage(rawWidth)) {
+                    width = rawWidth;
+                }
+                else if (isNumeric(rawWidth)) {
+                    width = parseInt(rawWidth) + 'px';
+                }
+                if (isPercentage(rawHeight)) {
+                    height = rawHeight;
+                }
+                else if (isNumeric(rawHeight)) {
+                    height = parseInt(rawHeight) + 'px';
+                }
+                var _a = videoNode.style, style = _a === void 0 ? {} : _a;
                 editor.restoreSelection();
+                var props = __assign$2(__assign$2({}, style), { style: {
+                        width: width,
+                        height: height,
+                    } });
                 // 修改尺寸
-                Transforms.setNodes(editor, { width: width, height: height }, {
+                Transforms.setNodes(editor, props, {
                     match: function (n) { return DomEditor.checkNodeType(n, 'video'); },
                 });
                 editor.hidePanelOrModal(); // 隐藏 modal
@@ -43791,6 +43963,7 @@ var COMMON_HOVERBAR_KEYS = {
             'imageWidth30',
             'imageWidth50',
             'imageWidth100',
+            'editorImageSizeMenu',
             'editImage',
             'viewImageLink',
             'deleteImage',

package/dist/index.js

@@ -28401,7 +28401,6 @@
             }
             //替换 icon svg
             var menuConf = editor.getMenuConfig(key);
-            console.log('🚀 ~ HoverBar ~ registerSingleItem ~ menuConf:', menuConf, menu);
             if (menuConf && menuConf.iconSvg !== undefined) {
                 menu.iconSvg = menuConf.iconSvg;
             }
@@ -31712,10 +31711,14 @@
             netImage: 'Net image',
             delete: 'Delete image',
             edit: 'Edit image',
+            editSize: 'Edit size',
             viewLink: 'View link',
             src: 'Image src',
             desc: 'Description',
             link: 'Image link',
+            ok: 'Ok',
+            width: 'Width',
+            height: 'Height',
         },
         indent: {
             decrease: 'Decrease',
@@ -31806,10 +31809,14 @@
             netImage: '网络图片',
             delete: '删除图片',
             edit: '编辑图片',
+            editSize: '修改尺寸',
             viewLink: '查看链接',
             src: '图片地址',
             desc: '图片描述',
             link: '图片链接',
+            ok: '确定',
+            width: '宽度',
+            height: '高度',
         },
         indent: {
             decrease: '减少缩进',
@@ -34012,7 +34019,7 @@
     /**
      * 生成唯一的 DOM ID
      */
-    function genDomID$3() {
+    function genDomID$4() {
         return genRandomStr('w-e-insert-link');
     }
     var InsertLinkMenu = /** @class */ (function () {
@@ -34023,9 +34030,9 @@
             this.showModal = true; // 点击 button 时显示 modal
             this.modalWidth = 300;
             this.$content = null;
-            this.textInputId = genDomID$3();
-            this.urlInputId = genDomID$3();
-            this.buttonId = genDomID$3();
+            this.textInputId = genDomID$4();
+            this.urlInputId = genDomID$4();
+            this.buttonId = genDomID$4();
         }
         InsertLinkMenu.prototype.getValue = function (editor) {
             // 插入菜单，不需要 value
@@ -34101,7 +34108,7 @@
     /**
      * 生成唯一的 DOM ID
      */
-    function genDomID$2() {
+    function genDomID$3() {
         return genRandomStr('w-e-update-link');
     }
     var EditLinkMenu = /** @class */ (function () {
@@ -34112,8 +34119,8 @@
             this.showModal = true; // 点击 button 时显示 modal
             this.modalWidth = 300;
             this.$content = null;
-            this.urlInputId = genDomID$2();
-            this.buttonId = genDomID$2();
+            this.urlInputId = genDomID$3();
+            this.buttonId = genDomID$3();
         }
         EditLinkMenu.prototype.getSelectedLinkElem = function (editor) {
             var node = core.DomEditor.getSelectedNodeByType(editor, 'link');
@@ -34741,7 +34748,7 @@
     /**
      * 生成唯一的 DOM ID
      */
-    function genDomID$1() {
+    function genDomID$2() {
         return genRandomStr('w-e-insert-image');
     }
     var InsertImage = /** @class */ (function () {
@@ -34752,10 +34759,10 @@
             this.showModal = true; // 点击 button 时显示 modal
             this.modalWidth = 300;
             this.$content = null;
-            this.srcInputId = genDomID$1();
-            this.altInputId = genDomID$1();
-            this.hrefInputId = genDomID$1();
-            this.buttonId = genDomID$1();
+            this.srcInputId = genDomID$2();
+            this.altInputId = genDomID$2();
+            this.hrefInputId = genDomID$2();
+            this.buttonId = genDomID$2();
         }
         InsertImage.prototype.getValue = function (editor) {
             // 插入菜单，不需要 value
@@ -34879,7 +34886,7 @@
     /**
      * 生成唯一的 DOM ID
      */
-    function genDomID() {
+    function genDomID$1() {
         return genRandomStr('w-e-edit-image');
     }
     var EditImage = /** @class */ (function () {
@@ -34890,10 +34897,10 @@
             this.showModal = true; // 点击 button 时显示 modal
             this.modalWidth = 300;
             this.$content = null;
-            this.srcInputId = genDomID();
-            this.altInputId = genDomID();
-            this.hrefInputId = genDomID();
-            this.buttonId = genDomID();
+            this.srcInputId = genDomID$1();
+            this.altInputId = genDomID$1();
+            this.hrefInputId = genDomID$1();
+            this.buttonId = genDomID$1();
         }
         EditImage.prototype.getValue = function (editor) {
             // 编辑图片，用不到 getValue
@@ -35128,6 +35135,122 @@
         return ImageWidth100;
     }(ImageWidthBaseClass));
 
+    /**
+     * @description 修改图片尺寸
+     * @author wangfupeng
+     */
+    /**
+     * 生成唯一的 DOM ID
+     */
+    function genDomID() {
+        return genRandomStr('w-e-insert-image');
+    }
+    var EditorImageSizeMenu = /** @class */ (function () {
+        function EditorImageSizeMenu() {
+            this.title = core.t('image.editSize');
+            this.tag = 'button';
+            this.showModal = true; // 点击 button 时显示 modal
+            this.modalWidth = 320;
+            this.$content = null;
+            this.widthInputId = genDomID();
+            this.heightInputId = genDomID();
+            this.buttonId = genDomID();
+        }
+        EditorImageSizeMenu.prototype.getSelectedImageNode = function (editor) {
+            return core.DomEditor.getSelectedNodeByType(editor, 'image');
+        };
+        EditorImageSizeMenu.prototype.getValue = function (editor) {
+            // 插入菜单，不需要 value
+            return '';
+        };
+        EditorImageSizeMenu.prototype.isActive = function (editor) {
+            // 任何时候，都不用激活 menu
+            return false;
+        };
+        EditorImageSizeMenu.prototype.exec = function (editor, value) {
+            // 点击菜单时，弹出 modal 之前，不需要执行其他代码
+            // 此处空着即可
+        };
+        EditorImageSizeMenu.prototype.isDisabled = function (editor) {
+            if (editor.selection == null)
+                return true;
+            var imageNode = this.getSelectedImageNode(editor);
+            if (imageNode == null) {
+                // 选区未处于 image node ，则禁用
+                return true;
+            }
+            return false;
+        };
+        EditorImageSizeMenu.prototype.getModalPositionNode = function (editor) {
+            return this.getSelectedImageNode(editor);
+        };
+        EditorImageSizeMenu.prototype.getModalContentElem = function (editor) {
+            // return $('<div><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p></div>')[0]
+            var _a = this, widthInputId = _a.widthInputId, heightInputId = _a.heightInputId, buttonId = _a.buttonId;
+            var _b = __read(core.genModalInputElems(core.t('image.width'), widthInputId, 'auto'), 2), widthContainerElem = _b[0], inputWidthElem = _b[1];
+            var $inputWidth = $__default["default"](inputWidthElem);
+            var _c = __read(core.genModalInputElems(core.t('image.height'), heightInputId, 'auto'), 2), heightContainerElem = _c[0], inputHeightElem = _c[1];
+            var $inputHeight = $__default["default"](inputHeightElem);
+            var _d = __read(core.genModalButtonElems(buttonId, core.t('image.ok')), 1), buttonContainerElem = _d[0];
+            if (this.$content == null) {
+                // 第一次渲染
+                var $content_1 = $__default["default"]('<div></div>');
+                // 绑定事件（第一次渲染时绑定，不要重复绑定）
+                $content_1.on('click', "#" + buttonId, function (e) {
+                    e.preventDefault();
+                    var rawWidth = $content_1.find("#" + widthInputId).val().trim();
+                    var rawHeight = $content_1.find("#" + heightInputId).val().trim();
+                    var isPercentage = function (value) { return /^\d+(\.\d+)?%$/.test(value); }; // 检查是否为合法的百分比字符串
+                    var isNumeric = function (value) { return /^\d+(\.\d+)?$/.test(value); }; // 检查是否为合法的数字
+                    var width = 'auto';
+                    var height = 'auto';
+                    if (isPercentage(rawWidth)) {
+                        width = rawWidth;
+                    }
+                    else if (isNumeric(rawWidth)) {
+                        width = parseInt(rawWidth) + 'px';
+                    }
+                    if (isPercentage(rawHeight)) {
+                        height = rawHeight;
+                    }
+                    else if (isNumeric(rawHeight)) {
+                        height = parseInt(rawHeight) + 'px';
+                    }
+                    var _a = imageNode.style, style = _a === void 0 ? {} : _a;
+                    editor.restoreSelection();
+                    var props = __assign(__assign({}, style), { style: {
+                            width: width,
+                            height: height,
+                        } });
+                    // 修改尺寸
+                    slate.Transforms.setNodes(editor, props, {
+                        match: function (n) { return core.DomEditor.checkNodeType(n, 'image'); },
+                    });
+                    editor.hidePanelOrModal(); // 隐藏 modal
+                });
+                this.$content = $content_1;
+            }
+            var $content = this.$content;
+            // 先清空，再重新添加 DOM 内容
+            $content.empty();
+            $content.append(widthContainerElem);
+            $content.append(heightContainerElem);
+            $content.append(buttonContainerElem);
+            var imageNode = this.getSelectedImageNode(editor);
+            if (imageNode == null)
+                return $content[0];
+            // 初始化 input 值
+            var _e = imageNode.width, width = _e === void 0 ? 'auto' : _e, _f = imageNode.height, height = _f === void 0 ? 'auto' : _f;
+            $inputWidth.val(width);
+            $inputHeight.val(height);
+            setTimeout(function () {
+                $inputWidth.focus();
+            });
+            return $content[0];
+        };
+        return EditorImageSizeMenu;
+    }());
+
     /**
      * @description 图片菜单配置
      * @author wangfupeng
@@ -35221,6 +35344,12 @@
         factory: function () {
             return new ImageWidth100();
         },
+    };
+    var EditorImageSizeMenuConf = {
+        key: 'editorImageSizeMenu',
+        factory: function () {
+            return new EditorImageSizeMenu();
+        },
     };
 
     /**
@@ -35239,6 +35368,7 @@
             imageWidth30MenuConf,
             imageWidth50MenuConf,
             imageWidth100MenuConf,
+            EditorImageSizeMenuConf,
         ],
         editorPlugin: withImage,
     };
@@ -41725,12 +41855,20 @@
      * @param height height
      * @returns iframe html string with size style
      */
-    function genSizeStyledIframeHtml(iframeHtml, width, height) {
+    function genSizeStyledIframeHtml(iframeHtml, width, height, style) {
         if (width === void 0) { width = 'auto'; }
         if (height === void 0) { height = 'auto'; }
+        if (style === void 0) { style = {}; }
         var $iframe = $__default["default"](iframeHtml);
+        var _a = style.width, styleWidth = _a === void 0 ? '' : _a, _b = style.height, styleHeight = _b === void 0 ? '' : _b;
+        var styleStr = '';
+        if (styleWidth)
+            styleStr += "width: " + styleWidth + ";";
+        if (styleHeight)
+            styleStr += "height: " + styleHeight + ";";
         $iframe.attr('width', width);
         $iframe.attr('height', height);
+        $iframe.attr('style', styleStr);
         return $iframe[0].outerHTML;
     }
 
@@ -41739,19 +41877,19 @@
      * @author wangfupeng
      */
     function renderVideo(elemNode, children, editor) {
-        var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e;
+        var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e, _f = _a.style, style = _f === void 0 ? {} : _f;
         // 是否选中
         var selected = core.DomEditor.isNodeSelected(editor, elemNode);
         var vnode;
         if (src.trim().indexOf('<iframe ') === 0) {
             // 增加尺寸样式
-            var iframeHtml = genSizeStyledIframeHtml(src, width, height);
+            var iframeHtml = genSizeStyledIframeHtml(src, width, height, style);
             // iframe 形式，第三方视频
             vnode = (snabbdom.jsx("div", { className: "w-e-textarea-video-container", "data-selected": selected ? 'true' : '', innerHTML: iframeHtml }));
         }
         else {
             // 其他，mp4 格式
-            var videoVnode = (snabbdom.jsx("video", { poster: poster, controls: true },
+            var videoVnode = (snabbdom.jsx("video", { poster: poster, controls: true, style: style },
                 snabbdom.jsx("source", { src: src, type: "video/mp4" }), "Sorry, your browser doesn't support embedded videos.\n \u62B1\u6B49\uFF0C\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 video \u89C6\u9891"));
             // @ts-ignore 添加尺寸
             if (width !== 'auto')
@@ -41782,16 +41920,22 @@
      * @author wangfupeng
      */
     function videoToHtml(elemNode, childrenHtml) {
-        var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e;
+        var _a = elemNode, _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.poster, poster = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? 'auto' : _d, _e = _a.height, height = _e === void 0 ? 'auto' : _e, _f = _a.style, style = _f === void 0 ? {} : _f;
         var res = '<div data-w-e-type="video" data-w-e-is-void style="text-align: center;">\n';
         if (src.trim().indexOf('<iframe ') === 0) {
             // iframe 形式
-            var iframeHtml = genSizeStyledIframeHtml(src, width, height);
+            var iframeHtml = genSizeStyledIframeHtml(src, width, height, style);
             res += iframeHtml;
         }
         else {
             // 其他，mp4 等 url 格式
-            res += "<video poster=\"" + poster + "\" controls=\"true\" width=\"" + width + "\" height=\"" + height + "\"><source src=\"" + src + "\" type=\"video/mp4\"/></video>";
+            var _g = style.width, styleWidth = _g === void 0 ? '' : _g, _h = style.height, styleHeight = _h === void 0 ? '' : _h;
+            var styleStr = '';
+            if (styleWidth)
+                styleStr += "width: " + styleWidth + ";";
+            if (styleHeight)
+                styleStr += "height: " + styleHeight + ";";
+            res += "<video poster=\"" + poster + "\" controls=\"true\" width=\"" + width + "\" height=\"" + height + "\" style=\"" + styleStr + "\"><source src=\"" + src + "\" type=\"video/mp4\"/></video>";
         }
         res += '\n</div>';
         return res;
@@ -41845,16 +41989,18 @@
      * @description parse html
      * @author wangfupeng
      */
-    function genVideoElem(src, poster, width, height) {
+    function genVideoElem(src, poster, width, height, style) {
         if (poster === void 0) { poster = ''; }
         if (width === void 0) { width = 'auto'; }
         if (height === void 0) { height = 'auto'; }
+        if (style === void 0) { style = {}; }
         return {
             type: 'video',
             src: src,
             poster: poster,
             width: width,
             height: height,
+            style: style,
             children: [{ text: '' }], // void 元素有一个空 text
         };
     }
@@ -41864,13 +42010,15 @@
         var poster = '';
         var width = 'auto';
         var height = 'auto';
+        var style = {};
         // <iframe> 形式
         var $iframe = $elem.find('iframe');
         if ($iframe.length > 0) {
             width = $iframe.attr('width') || 'auto';
             height = $iframe.attr('height') || 'auto';
+            style = $iframe.attr('style') || {};
             src = $iframe[0].outerHTML;
-            return genVideoElem(src, poster, width, height);
+            return genVideoElem(src, poster, width, height, style);
         }
         // <video> 形式
         var $video = $elem.find('video');
@@ -41884,7 +42032,8 @@
         width = $video.attr('width') || 'auto';
         height = $video.attr('height') || 'auto';
         poster = $video.attr('poster') || '';
-        return genVideoElem(src, poster, width, height);
+        style = $iframe.attr('style') || {};
+        return genVideoElem(src, poster, width, height, style);
     }
     var parseHtmlConf = {
         selector: 'div[data-w-e-type="video"]',
@@ -41935,8 +42084,10 @@
      * @param src video src
      * @param poster video poster
      */
-    function insertVideo (editor, src, poster) {
+    function insertVideo (editor, src, poster, width, height) {
         if (poster === void 0) { poster = ''; }
+        if (width === void 0) { width = ''; }
+        if (height === void 0) { height = ''; }
         return __awaiter(this, void 0, void 0, function () {
             var _a, onInsertedVideo, checkVideo, parseVideoSrc, checkRes, parsedSrc, video;
             return __generator(this, function (_b) {
@@ -41969,7 +42120,11 @@
                             type: 'video',
                             src: parsedSrc,
                             poster: poster,
-                            children: [{ text: '' }], // 【注意】void node 需要一个空 text 作为 children
+                            children: [{ text: '' }],
+                            style: {
+                                width: width,
+                                height: height,
+                            },
                         };
                         // 插入视频
                         // 不使用此方式会比正常的选区选取先执行
@@ -42372,13 +42527,30 @@
                     e.preventDefault();
                     var rawWidth = $content_1.find("#" + widthInputId).val().trim();
                     var rawHeight = $content_1.find("#" + heightInputId).val().trim();
-                    var numberWidth = parseInt(rawWidth);
-                    var numberHeight = parseInt(rawHeight);
-                    var width = numberWidth ? numberWidth.toString() : 'auto';
-                    var height = numberHeight ? numberHeight.toString() : 'auto';
+                    var isPercentage = function (value) { return /^\d+(\.\d+)?%$/.test(value); }; // 检查是否为合法的百分比字符串
+                    var isNumeric = function (value) { return /^\d+(\.\d+)?$/.test(value); }; // 检查是否为合法的数字
+                    var width = 'auto';
+                    var height = 'auto';
+                    if (isPercentage(rawWidth)) {
+                        width = rawWidth;
+                    }
+                    else if (isNumeric(rawWidth)) {
+                        width = parseInt(rawWidth) + 'px';
+                    }
+                    if (isPercentage(rawHeight)) {
+                        height = rawHeight;
+                    }
+                    else if (isNumeric(rawHeight)) {
+                        height = parseInt(rawHeight) + 'px';
+                    }
+                    var _a = videoNode.style, style = _a === void 0 ? {} : _a;
                     editor.restoreSelection();
+                    var props = __assign(__assign({}, style), { style: {
+                            width: width,
+                            height: height,
+                        } });
                     // 修改尺寸
-                    slate.Transforms.setNodes(editor, { width: width, height: height }, {
+                    slate.Transforms.setNodes(editor, props, {
                         match: function (n) { return core.DomEditor.checkNodeType(n, 'video'); },
                     });
                     editor.hidePanelOrModal(); // 隐藏 modal
@@ -48224,6 +48396,7 @@
               'imageWidth30',
               'imageWidth50',
               'imageWidth100',
+              'editorImageSizeMenu',
               'editImage',
               'viewImageLink',
               'deleteImage',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangeditor-next/editor",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "Web rich text editor, Web 富文本编辑器",
   "keywords": [
     "wangeditor",
@@ -50,13 +50,13 @@
   "dependencies": {
     "@uppy/core": "^2.1.1",
     "@uppy/xhr-upload": "^2.0.3",
-    "@wangeditor-next/basic-modules": "^1.2.0",
+    "@wangeditor-next/basic-modules": "^1.2.1",
     "@wangeditor-next/code-highlight": "^1.2.0",
     "@wangeditor-next/core": "^1.2.1",
     "@wangeditor-next/list-module": "^1.1.0",
     "@wangeditor-next/table-module": "^1.2.0",
     "@wangeditor-next/upload-image-module": "^1.1.0",
-    "@wangeditor-next/video-module": "^1.2.1",
+    "@wangeditor-next/video-module": "^1.2.2",
     "dom7": "^3.0.0",
     "is-hotkey": "^0.2.0",
     "lodash.camelcase": "^4.3.0",
@@ -70,5 +70,5 @@
     "slate": "^0.72.0",
     "snabbdom": "^3.1.0"
   },
-  "gitHead": "1663dd8bfd594cb29bc2f8c5ef3d4019931bc40f"
+  "gitHead": "4ccd72960067beab2c8905a9f38e216e2fd42994"
 }