@wangeditor-next/video-module 1.2.1 → 1.2.2

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.
 
+## [1.2.2](https://github.com/cycleccc/wangEditor/compare/@wangeditor-next/video-module@1.2.1...@wangeditor-next/video-module@1.2.2) (2024-06-13)
+
+
+### Performance Improvements
+
+* add edit image and video width height menu ([f0a9ce6](https://github.com/cycleccc/wangEditor/commit/f0a9ce6a24107e6e4865f38dd8cd1c7f048551f2))
+
+
+
+
+
 ## [1.2.1](https://github.com/cycleccc/wangEditor/compare/@wangeditor-next/video-module@1.2.0...@wangeditor-next/video-module@1.2.1) (2024-06-04)
 
 

package/dist/index.esm.js

@@ -224,12 +224,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;
 }
 
@@ -238,19 +246,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')
@@ -281,16 +289,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;
@@ -331,7 +345,7 @@ function preParse(elem) {
     var $parent = $video.parent();
     if ($parent.attr('data-w-e-type') === 'video')
         return $video[0];
-    var $container = $("<div data-w-e-type=\"video\" data-w-e-is-void></div>");
+    var $container = $("<div data-w-e-type=\"video\" data-w-e-is-void style=\"text-align: center;\"></div>");
     $container.append($video);
     return $container[0];
 }
@@ -344,16 +358,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
     };
 }
@@ -363,13 +379,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');
@@ -383,7 +401,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"]',
@@ -434,8 +453,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(this, void 0, void 0, function () {
         var _a, onInsertedVideo, checkVideo, parseVideoSrc, checkRes, parsedSrc, video;
         return __generator(this, function (_b) {
@@ -468,7 +489,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,
+                        },
                     };
                     // 插入视频
                     // 不使用此方式会比正常的选区选取先执行
@@ -871,13 +896,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(__assign({}, 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

package/dist/index.js

@@ -228,12 +228,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;
   }
 
@@ -242,19 +250,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')
@@ -285,16 +293,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;
@@ -335,7 +349,7 @@
       var $parent = $video.parent();
       if ($parent.attr('data-w-e-type') === 'video')
           return $video[0];
-      var $container = $__default["default"]("<div data-w-e-type=\"video\" data-w-e-is-void></div>");
+      var $container = $__default["default"]("<div data-w-e-type=\"video\" data-w-e-is-void style=\"text-align: center;\"></div>");
       $container.append($video);
       return $container[0];
   }
@@ -348,16 +362,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
       };
   }
@@ -367,13 +383,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');
@@ -387,7 +405,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"]',
@@ -438,8 +457,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) {
@@ -472,7 +493,11 @@
                           type: 'video',
                           src: parsedSrc,
                           poster: poster,
-                          children: [{ text: '' }], // 【注意】void node 需要一个空 text 作为 children
+                          children: [{ text: '' }],
+                          style: {
+                              width: width,
+                              height: height,
+                          },
                       };
                       // 插入视频
                       // 不使用此方式会比正常的选区选取先执行
@@ -875,13 +900,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

package/dist/video-module/src/module/custom-types.d.ts

@@ -5,12 +5,17 @@
 declare type EmptyText = {
     text: '';
 };
+export declare type videoStyle = {
+    width?: string;
+    height?: string;
+};
 export declare type VideoElement = {
     type: 'video';
     src: string;
     poster?: string;
     width?: string;
     height?: string;
+    style?: videoStyle;
     children: EmptyText[];
 };
 export {};

package/dist/video-module/src/module/helper/insert-video.d.ts

@@ -9,4 +9,4 @@ import { IDomEditor } from '@wangeditor-next/core';
  * @param src video src
  * @param poster video poster
  */
-export default function (editor: IDomEditor, src: string, poster?: string): Promise<void>;
+export default function (editor: IDomEditor, src: string, poster?: string, width?: string, height?: string): Promise<void>;

package/dist/video-module/src/utils/dom.d.ts

@@ -3,6 +3,7 @@
  * @author wangfupeng
  */
 import $, { Dom7Array } from 'dom7';
+import { videoStyle } from '../module/custom-types';
 export { Dom7Array } from 'dom7';
 export default $;
 /**
@@ -17,7 +18,7 @@ export declare function getTagName($elem: Dom7Array): string;
  * @param height height
  * @returns iframe html string with size style
  */
-export declare function genSizeStyledIframeHtml(iframeHtml: string, width?: string, height?: string): string;
+export declare function genSizeStyledIframeHtml(iframeHtml: string, width?: string, height?: string, style?: videoStyle): string;
 import DOMNode = globalThis.Node;
 import DOMComment = globalThis.Comment;
 import DOMElement = globalThis.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangeditor-next/video-module",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "wangEditor video module",
   "author": "wangfupeng1988 <wangfupeng1988@163.com>",
   "contributors": [],
@@ -48,5 +48,5 @@
     "slate": "^0.72.0",
     "snabbdom": "^3.1.0"
   },
-  "gitHead": "e9d26c11145ac5bdaa648177bed8548aa178aaba"
+  "gitHead": "4ccd72960067beab2c8905a9f38e216e2fd42994"
 }