suneditor 2.45.0 → 2.46.0

package/src/plugins/modules/resizing.js

@@ -77,30 +77,30 @@
                     center: icons.align_center
                 }
             };
-    
+
             /** resize controller, button */
             let resize_div_container = this.setController_resize(core);
             context.resizing.resizeContainer = resize_div_container;
-    
+
             context.resizing.resizeDiv = resize_div_container.querySelector('.se-modal-resize');
             context.resizing.resizeDot = resize_div_container.querySelector('.se-resize-dot');
             context.resizing.resizeDisplay = resize_div_container.querySelector('.se-resize-display');
-    
+
             let resize_button = this.setController_button(core);
             context.resizing.resizeButton = resize_button;
-    
+
             let resize_handles = context.resizing.resizeHandles = context.resizing.resizeDot.querySelectorAll('span');
             context.resizing.resizeButtonGroup = resize_button.querySelector('._se_resizing_btn_group');
             context.resizing.rotationButtons = resize_button.querySelectorAll('._se_resizing_btn_group ._se_rotation');
             context.resizing.percentageButtons = resize_button.querySelectorAll('._se_resizing_btn_group ._se_percentage');
-    
+
             context.resizing.alignMenu = resize_button.querySelector('.se-resizing-align-list');
             context.resizing.alignMenuList = context.resizing.alignMenu.querySelectorAll('button');
-    
+
             context.resizing.alignButton = resize_button.querySelector('._se_resizing_align_button');
             context.resizing.autoSizeButton = resize_button.querySelector('._se_resizing_btn_group ._se_auto_size');
             context.resizing.captionButton = resize_button.querySelector('._se_resizing_caption_button');
-    
+
             /** add event listeners */
             resize_div_container.addEventListener('mousedown', function (e) { e.preventDefault(); });
             resize_handles[0].addEventListener('mousedown', this.onMouseDown_resize_handle.bind(core));
@@ -112,128 +112,128 @@
             resize_handles[6].addEventListener('mousedown', this.onMouseDown_resize_handle.bind(core));
             resize_handles[7].addEventListener('mousedown', this.onMouseDown_resize_handle.bind(core));
             resize_button.addEventListener('click', this.onClick_resizeButton.bind(core));
-    
+
             /** append html */
             context.element.relative.appendChild(resize_div_container);
             context.element.relative.appendChild(resize_button);
-    
+
             /** empty memory */
             resize_div_container = null, resize_button = null, resize_handles = null;
         },
-    
+
         /** resize controller, button (image, iframe, video) */
         setController_resize: function (core) {
             const resize_container = core.util.createElement('DIV');
-            
+
             resize_container.className = 'se-controller se-resizing-container';
             resize_container.style.display = 'none';
             resize_container.innerHTML = '' +
                 '<div class="se-modal-resize"></div>' +
                 '<div class="se-resize-dot">' +
-                    '<span class="tl"></span>' +
-                    '<span class="tr"></span>' +
-                    '<span class="bl"></span>' +
-                    '<span class="br"></span>' +
-                    '<span class="lw"></span>' +
-                    '<span class="th"></span>' +
-                    '<span class="rw"></span>' +
-                    '<span class="bh"></span>' +
-                    '<div class="se-resize-display"></div>' +
+                '<span class="tl"></span>' +
+                '<span class="tr"></span>' +
+                '<span class="bl"></span>' +
+                '<span class="br"></span>' +
+                '<span class="lw"></span>' +
+                '<span class="th"></span>' +
+                '<span class="rw"></span>' +
+                '<span class="bh"></span>' +
+                '<div class="se-resize-display"></div>' +
                 '</div>';
-    
+
             return resize_container;
         },
-    
+
         setController_button: function (core) {
             const lang = core.lang;
             const icons = core.icons;
             const resize_button = core.util.createElement("DIV");
-    
+
             resize_button.className = "se-controller se-controller-resizing";
             resize_button.innerHTML = '' +
                 '<div class="se-arrow se-arrow-up"></div>' +
                 '<div class="se-btn-group _se_resizing_btn_group">' +
-                    '<button type="button" data-command="percent" data-value="1" class="se-tooltip _se_percentage">' +
-                        '<span>100%</span>' +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize100 + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="percent" data-value="0.75" class="se-tooltip _se_percentage">' +
-                        '<span>75%</span>' +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize75 + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="percent" data-value="0.5" class="se-tooltip _se_percentage">' +
-                        '<span>50%</span>' +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize50 + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="auto" class="se-btn se-tooltip _se_auto_size">' +
-                        icons.auto_size +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.autoSize + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="rotate" data-value="-90" class="se-btn se-tooltip _se_rotation">' +
-                        icons.rotate_left +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateLeft + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="rotate" data-value="90" class="se-btn se-tooltip _se_rotation">' +
-                        icons.rotate_right +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateRight + '</span></span>' +
-                    '</button>' +
+                '<button type="button" data-command="percent" data-value="1" class="se-tooltip _se_percentage">' +
+                '<span>100%</span>' +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize100 + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="percent" data-value="0.75" class="se-tooltip _se_percentage">' +
+                '<span>75%</span>' +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize75 + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="percent" data-value="0.5" class="se-tooltip _se_percentage">' +
+                '<span>50%</span>' +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.resize50 + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="auto" class="se-btn se-tooltip _se_auto_size">' +
+                icons.auto_size +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.autoSize + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="rotate" data-value="-90" class="se-btn se-tooltip _se_rotation">' +
+                icons.rotate_left +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateLeft + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="rotate" data-value="90" class="se-btn se-tooltip _se_rotation">' +
+                icons.rotate_right +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.rotateRight + '</span></span>' +
+                '</button>' +
                 '</div>' +
                 '<div class="se-btn-group" style="padding-top: 0;">' +
-                    '<button type="button" data-command="mirror" data-value="h" class="se-btn se-tooltip">' +
-                        icons.mirror_horizontal +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorHorizontal + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="mirror" data-value="v" class="se-btn se-tooltip">' +
-                        icons.mirror_vertical +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorVertical + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="onalign" class="se-btn se-tooltip _se_resizing_align_button">' +
-                        icons.align_justify +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.toolbar.align + '</span></span>' +
-                    '</button>' +
-                    '<div class="se-btn-group-sub sun-editor-common se-list-layer se-resizing-align-list">' +
-                        '<div class="se-list-inner">' +
-                            '<ul class="se-list-basic">' +
-                                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="basic">' +
-                                    icons.align_justify +
-                                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.basic + '</span></span>' +
-                                '</button></li>' +
-                                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="left">' +
-                                    icons.align_left +
-                                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.left + '</span></span>' +
-                                '</button></li>' +
-                                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="center">' +
-                                    icons.align_center +
-                                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.center + '</span></span>' +
-                                '</button></li>' +
-                                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="right">' +
-                                    icons.align_right +
-                                    '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.right + '</span></span>' +
-                                '</button></li>' +
-                            '</ul>' +
-                        '</div>' +
-                    '</div>' +
-                    '<button type="button" data-command="caption" class="se-btn se-tooltip _se_resizing_caption_button">' +
-                        icons.caption +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.caption + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="revert" class="se-btn se-tooltip">' +
-                        icons.revert +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.revertButton + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="update" class="se-btn se-tooltip">' +
-                        icons.modify +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
-                    '</button>' +
-                    '<button type="button" data-command="delete" class="se-btn se-tooltip">' +
-                        icons.delete +
-                        '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
-                    '</button>' +
+                '<button type="button" data-command="mirror" data-value="h" class="se-btn se-tooltip">' +
+                icons.mirror_horizontal +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorHorizontal + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="mirror" data-value="v" class="se-btn se-tooltip">' +
+                icons.mirror_vertical +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.mirrorVertical + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="onalign" class="se-btn se-tooltip _se_resizing_align_button">' +
+                icons.align_justify +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.toolbar.align + '</span></span>' +
+                '</button>' +
+                '<div class="se-btn-group-sub sun-editor-common se-list-layer se-resizing-align-list">' +
+                '<div class="se-list-inner">' +
+                '<ul class="se-list-basic">' +
+                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="basic">' +
+                icons.align_justify +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.basic + '</span></span>' +
+                '</button></li>' +
+                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="left">' +
+                icons.align_left +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.left + '</span></span>' +
+                '</button></li>' +
+                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="center">' +
+                icons.align_center +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.center + '</span></span>' +
+                '</button></li>' +
+                '<li><button type="button" class="se-btn-list se-tooltip" data-command="align" data-value="right">' +
+                icons.align_right +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.right + '</span></span>' +
+                '</button></li>' +
+                '</ul>' +
+                '</div>' +
+                '</div>' +
+                '<button type="button" data-command="caption" class="se-btn se-tooltip _se_resizing_caption_button">' +
+                icons.caption +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.caption + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="revert" class="se-btn se-tooltip">' +
+                icons.revert +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.dialogBox.revertButton + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="update" class="se-btn se-tooltip">' +
+                icons.modify +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.edit + '</span></span>' +
+                '</button>' +
+                '<button type="button" data-command="delete" class="se-btn se-tooltip">' +
+                icons.delete +
+                '<span class="se-tooltip-inner"><span class="se-tooltip-text">' + lang.controller.remove + '</span></span>' +
+                '</button>' +
                 '</div>';
-    
+
             return resize_button;
         },
-    
+
         /**
          * @description Gets the width size
          * @param {Object} contextPlugin context object of plugin (core.context[plugin])
@@ -246,12 +246,12 @@
             if (!element) element = contextPlugin._element;
             if (!cover) cover = contextPlugin._cover;
             if (!container) container = contextPlugin._container;
-    
+
             if (!element) return '';
-    
+
             return !/%$/.test(element.style.width) ? element.style.width : ((container && this.util.getNumber(container.style.width, 2)) || 100) + '%';
         },
-    
+
         /**
          * @description Gets the height size
          * @param {Object} contextPlugin context object of plugin (core.context[plugin])
@@ -264,9 +264,9 @@
             if (!element) element = contextPlugin._element;
             if (!cover) cover = contextPlugin._cover;
             if (!container) container = contextPlugin._container;
-    
+
             if (!container || !cover) return (element && element.style.height) || '';
-    
+
             return this.util.getNumber(cover.style.paddingBottom, 0) > 0 && !this.context.resizing._rotateVertical ? cover.style.height : (!/%$/.test(element.style.height) || !/%$/.test(element.style.width) ? element.style.height : ((container && this.util.getNumber(container.style.height, 2)) || 100) + '%');
         },
 
@@ -278,27 +278,27 @@
         _module_setModifyInputSize: function (contextPlugin, pluginObj) {
             const percentageRotation = contextPlugin._onlyPercentage && this.context.resizing._rotateVertical;
             contextPlugin.proportion.checked = contextPlugin._proportionChecked = contextPlugin._element.getAttribute('data-proportion') !== 'false';
-    
+
             let x = percentageRotation ? '' : this.plugins.resizing._module_getSizeX.call(this, contextPlugin);
             if (x === contextPlugin._defaultSizeX) x = '';
             if (contextPlugin._onlyPercentage) x = this.util.getNumber(x, 2);
             contextPlugin.inputX.value = x;
             pluginObj.setInputSize.call(this, 'x');
-            
+
             if (!contextPlugin._onlyPercentage) {
                 let y = percentageRotation ? '' : this.plugins.resizing._module_getSizeY.call(this, contextPlugin);
                 if (y === contextPlugin._defaultSizeY) y = '';
                 if (contextPlugin._onlyPercentage) y = this.util.getNumber(y, 2);
                 contextPlugin.inputY.value = y;
             }
-            
+
             contextPlugin.inputX.disabled = percentageRotation ? true : false;
             contextPlugin.inputY.disabled = percentageRotation ? true : false;
             contextPlugin.proportion.disabled = percentageRotation ? true : false;
-    
+
             pluginObj.setRatio.call(this);
         },
-    
+
         /**
          * @description It is called in "setInputSize" (input tag keyupEvent), 
          * checks the value entered in the input tag, 
@@ -311,15 +311,15 @@
                 if (xy === 'x' && contextPlugin.inputX.value > 100) contextPlugin.inputX.value = 100;
                 return;
             }
-    
+
             if (contextPlugin.proportion.checked && contextPlugin._ratio && /\d/.test(contextPlugin.inputX.value) && /\d/.test(contextPlugin.inputY.value)) {
                 const xUnit = contextPlugin.inputX.value.replace(/\d+|\./g, '') || contextPlugin.sizeUnit;
                 const yUnit = contextPlugin.inputY.value.replace(/\d+|\./g, '') || contextPlugin.sizeUnit;
-    
+
                 if (xUnit !== yUnit) return;
-    
+
                 const dec = xUnit === '%' ? 2 : 0;
-    
+
                 if (xy === 'x') {
                     contextPlugin.inputY.value = this.util.getNumber(contextPlugin._ratioY * this.util.getNumber(contextPlugin.inputX.value, dec), dec) + yUnit;
                 } else {
@@ -327,7 +327,7 @@
                 }
             }
         },
-    
+
         /**
          * @description It is called in "setRatio" (input and proportionCheck tags changeEvent), 
          * checks the value of the input tag, calculates the ratio, and resets it in the input tag.
@@ -336,17 +336,17 @@
         _module_setRatio: function (contextPlugin) {
             const xValue = contextPlugin.inputX.value;
             const yValue = contextPlugin.inputY.value;
-    
+
             if (contextPlugin.proportion.checked && /\d+/.test(xValue) && /\d+/.test(yValue)) {
                 const xUnit = xValue.replace(/\d+|\./g, '') || contextPlugin.sizeUnit;
                 const yUnit = yValue.replace(/\d+|\./g, '') || contextPlugin.sizeUnit;
-    
+
                 if (xUnit !== yUnit) {
                     contextPlugin._ratio = false;
                 } else if (!contextPlugin._ratio) {
                     const x = this.util.getNumber(xValue, 0);
                     const y = this.util.getNumber(yValue, 0);
-    
+
                     contextPlugin._ratio = true;
                     contextPlugin._ratioX = x / y;
                     contextPlugin._ratioY = y / x;
@@ -355,7 +355,7 @@
                 contextPlugin._ratio = false;
             }
         },
-    
+
         /**
          * @description Revert size of element to origin size (plugin._origin_w, plugin._origin_h)
          * @param {Object} contextPlugin context object of plugin (core.context[plugin])
@@ -368,7 +368,7 @@
                 contextPlugin.inputY.value = contextPlugin._origin_h;
             }
         },
-    
+
         /**
          * @description Save the size data (element.setAttribute("data-size"))
          * Used at the "setSize" method
@@ -377,10 +377,13 @@
         _module_saveCurrentSize: function (contextPlugin) {
             const x = this.plugins.resizing._module_getSizeX.call(this, contextPlugin);
             const y = this.plugins.resizing._module_getSizeY.call(this, contextPlugin);
+            // add too width, height attribute
+            contextPlugin._element.setAttribute('width', x.replace('px', ''));
+            contextPlugin._element.setAttribute('height', y.replace('px', ''));
             contextPlugin._element.setAttribute('data-size', x + ',' + y);
             if (!!contextPlugin._videoRatio) contextPlugin._videoRatio = y;
         },
-    
+
         /**
          * @description Call the resizing module
          * @param {Element} targetElement Resizing target element
@@ -391,38 +394,38 @@
             const contextResizing = this.context.resizing;
             const contextPlugin = this.context[plugin];
             contextResizing._resize_plugin = plugin;
-    
+
             const resizeContainer = contextResizing.resizeContainer;
             const resizeDiv = contextResizing.resizeDiv;
             const offset = this.util.getOffset(targetElement, this.context.element.wysiwygFrame);
-    
+
             const isVertical = contextResizing._rotateVertical = /^(90|270)$/.test(Math.abs(targetElement.getAttribute('data-rotate')).toString());
-    
+
             const w = isVertical ? targetElement.offsetHeight : targetElement.offsetWidth;
             const h = isVertical ? targetElement.offsetWidth : targetElement.offsetHeight;
             const t = offset.top;
             const l = offset.left - this.context.element.wysiwygFrame.scrollLeft;
-    
+
             resizeContainer.style.top = t + 'px';
             resizeContainer.style.left = l + 'px';
             resizeContainer.style.width = w + 'px';
             resizeContainer.style.height = h + 'px';
-    
+
             resizeDiv.style.top = '0px';
             resizeDiv.style.left = '0px';
             resizeDiv.style.width =  w + 'px';
             resizeDiv.style.height =  h + 'px';
-    
+
             let align = targetElement.getAttribute('data-align') || 'basic';
             align = align === 'none' ? 'basic' : align;
-    
+
             // text
             const container = this.util.getParentElement(targetElement, this.util.isComponent);
             const cover = this.util.getParentElement(targetElement, 'FIGURE');
             const displayX = this.plugins.resizing._module_getSizeX.call(this, contextPlugin, targetElement, cover, container) || 'auto';
             const displayY = contextPlugin._onlyPercentage && plugin === 'image' ? '' : ', ' + (this.plugins.resizing._module_getSizeY.call(this, contextPlugin, targetElement, cover, container) || 'auto');
             this.util.changeTxt(contextResizing.resizeDisplay, this.lang.dialogBox[align] + ' (' + displayX + displayY + ')');
-    
+
             // resizing display
             contextResizing.resizeButtonGroup.style.display = contextPlugin._resizing ? '' : 'none';
             const resizeDotShow = contextPlugin._resizing && !contextPlugin._resizeDotHide && !contextPlugin._onlyPercentage ? 'flex' : 'none';
@@ -430,12 +433,12 @@
             for (let i = 0, len = resizeHandles.length; i < len; i++) {
                 resizeHandles[i].style.display = resizeDotShow;
             }
-    
+
             if (contextPlugin._resizing) {
                 const rotations = contextResizing.rotationButtons;
                 rotations[0].style.display = rotations[1].style.display = contextPlugin._rotation ? '' : 'none';
             }
-    
+
             // align icon
             if (contextPlugin._alignHide) {
                 contextResizing.alignButton.style.display = 'none';
@@ -448,7 +451,7 @@
                     else this.util.removeClass(alignList[i], 'on');
                 }
             }
-    
+
             // percentage active
             const pButtons = contextResizing.percentageButtons;
             const value = /%$/.test(targetElement.style.width) && /%$/.test(container.style.width) ? (this.util.getNumber(container.style.width, 0) / 100) + '' : '' ;
@@ -459,7 +462,7 @@
                     this.util.removeClass(pButtons[i], 'active');
                 }
             }
-    
+
             // caption display, active
             if (!contextPlugin._captionShow) {
                 contextResizing.captionButton.style.display = 'none';
@@ -483,16 +486,20 @@
             }
 
             this.setControllerPosition(contextResizing.resizeButton, resizeContainer, 'bottom', addOffset);
-            this.controllersOn(resizeContainer, contextResizing.resizeButton, this.util.setDisabledButtons.bind(this.util, false, this.resizingDisabledButtons), targetElement, plugin);
+            const onControlsOff = function () {
+                this.util.setDisabledButtons.call(this.util, false, this.resizingDisabledButtons);
+                this.history._resetCachingButton();
+            };
+            this.controllersOn(resizeContainer, contextResizing.resizeButton, onControlsOff.bind(this), targetElement, plugin);
             this.util.setDisabledButtons(true, this.resizingDisabledButtons);
-    
+
             contextResizing._resize_w = w;
             contextResizing._resize_h = h;
-    
+
             const originSize = (targetElement.getAttribute('origin-size') || '').split(',');
             contextResizing._origin_w = originSize[0] || targetElement.naturalWidth;
             contextResizing._origin_h = originSize[1] || targetElement.naturalHeight;
-    
+
             return {
                 w: w,
                 h: h,
@@ -500,7 +507,7 @@
                 l: l
             };
         },
-    
+
         _closeAlignMenu: null,
 
         /**
@@ -512,17 +519,17 @@
             this.context.resizing.alignMenu.style.top = (alignButton.offsetTop + alignButton.offsetHeight) + 'px';
             this.context.resizing.alignMenu.style.left = (alignButton.offsetLeft - alignButton.offsetWidth / 2) + 'px';
             this.context.resizing.alignMenu.style.display = 'block';
-    
+
             this.plugins.resizing._closeAlignMenu = function () {
                 this.util.removeClass(this.context.resizing.alignButton, 'on');
                 this.context.resizing.alignMenu.style.display = 'none';
                 this.removeDocEvent('click', this.plugins.resizing._closeAlignMenu);
                 this.plugins.resizing._closeAlignMenu = null;
             }.bind(this);
-    
+
             this.addDocEvent('click', this.plugins.resizing._closeAlignMenu);
         },
-    
+
         /**
          * @description Click event of resizing toolbar
          * Performs the action of the clicked toolbar button.
@@ -530,26 +537,26 @@
          */
         onClick_resizeButton: function (e) {
             e.stopPropagation();
-    
+
             const target = e.target;
             const command = target.getAttribute('data-command') || target.parentNode.getAttribute('data-command');
-    
+
             if (!command) return;
-    
+
             const value = target.getAttribute('data-value') || target.parentNode.getAttribute('data-value');
-    
+
             const pluginName = this.context.resizing._resize_plugin;
             const currentContext = this.context[pluginName];
             const contextEl = currentContext._element;
             const currentModule = this.plugins[pluginName];
-    
+
             e.preventDefault();
-    
+
             if (typeof this.plugins.resizing._closeAlignMenu === 'function') {
                 this.plugins.resizing._closeAlignMenu();
                 if (command === 'onalign') return;
             }
-    
+
             switch (command) {
                 case 'auto':
                     this.plugins.resizing.resetTransform.call(this, contextEl);
@@ -562,7 +569,7 @@
                         const percentage = contextEl.getAttribute('data-percentage');
                         if (percentage) percentY = percentage.split(',')[1];
                     }
-    
+
                     this.plugins.resizing.resetTransform.call(this, contextEl);
                     currentModule.setPercentSize.call(this, (value * 100), (this.util.getNumber(percentY, 0) === null || !/%$/.test(percentY)) ? '' : percentY);
                     this.selectComponent(contextEl, pluginName);
@@ -571,27 +578,27 @@
                     const r = contextEl.getAttribute('data-rotate') || '0';
                     let x = contextEl.getAttribute('data-rotateX') || '';
                     let y = contextEl.getAttribute('data-rotateY') || '';
-        
+
                     if ((value === 'h' && !this.context.resizing._rotateVertical) || (value === 'v' && this.context.resizing._rotateVertical)) {
                         y = y ? '' : '180';
                     } else {
                         x = x ? '' : '180';
                     }
-        
+
                     contextEl.setAttribute('data-rotateX', x);
                     contextEl.setAttribute('data-rotateY', y);
-        
+
                     this.plugins.resizing._setTransForm(contextEl, r, x, y);
                     break;
                 case 'rotate':
                     const contextResizing = this.context.resizing;
                     const slope = (contextEl.getAttribute('data-rotate') * 1) + (value * 1);
                     const deg = this._w.Math.abs(slope) >= 360 ? 0 : slope;
-        
+
                     contextEl.setAttribute('data-rotate', deg);
                     contextResizing._rotateVertical = /^(90|270)$/.test(this._w.Math.abs(deg).toString());
                     this.plugins.resizing.setTransformSize.call(this, contextEl, null, null);
-        
+
                     this.selectComponent(contextEl, pluginName);
                     break;
                 case 'onalign':
@@ -606,26 +613,26 @@
                     const caption = !currentContext._captionChecked;
                     currentModule.openModify.call(this, true);
                     currentContext._captionChecked = currentContext.captionCheckEl.checked = caption;
-    
+
                     currentModule.update_image.call(this, false, false, false);
-    
+
                     if (caption) {
                         const captionText = this.util.getChildElement(currentContext._caption, function (current) {
                             return current.nodeType === 3;
                         });
-    
+
                         if (!captionText) {
                             currentContext._caption.focus();
                         } else {
                             this.setRange(captionText, 0, captionText, captionText.textContent.length);
                         }
-    
+
                         this.controllersOff();
                     } else {
                         this.selectComponent(contextEl, pluginName);
                         currentModule.openModify.call(this, true);
                     }
-    
+
                     break;
                 case 'revert':
                     currentModule.setOriginSize.call(this);
@@ -639,11 +646,11 @@
                     currentModule.destroy.call(this);
                     break;
             }
-    
+
             // history stack
             this.history.push(false);
         },
-    
+
         /**
          * @description Initialize the transform style (rotation) of the element.
          * @param {Element} element Target element
@@ -651,17 +658,17 @@
         resetTransform: function (element) {
             const size = (element.getAttribute('data-size') || element.getAttribute('data-origin') || '').split(',');
             this.context.resizing._rotateVertical = false;
-    
+
             element.style.maxWidth = '';
             element.style.transform = '';
             element.style.transformOrigin = '';
             element.setAttribute('data-rotate', '');
             element.setAttribute('data-rotateX', '');
             element.setAttribute('data-rotateY', '');
-    
+
             this.plugins[this.context.resizing._resize_plugin].setSize.call(this, size[0] ? size[0] : 'auto', size[1] ? size[1] : '', true);
         },
-    
+
         /**
          * @description Set the transform style (rotation) of the element.
          * @param {Element} element Target element
@@ -673,7 +680,7 @@
             const isVertical = this.context.resizing._rotateVertical;
             const deg = element.getAttribute('data-rotate') * 1;
             let transOrigin = '';
-    
+
             if (percentage && !isVertical) {
                 percentage = percentage.split(',');
                 if (percentage[0] === 'auto' && percentage[1] === 'auto') {
@@ -683,41 +690,41 @@
                 }
             } else {
                 const cover = this.util.getParentElement(element, 'FIGURE');
-        
+
                 const offsetW = width || element.offsetWidth;
                 const offsetH = height || element.offsetHeight;
                 const w = (isVertical ? offsetH : offsetW) + 'px';
                 const h = (isVertical ? offsetW : offsetH) + 'px';
-        
+
                 this.plugins[this.context.resizing._resize_plugin].cancelPercentAttr.call(this);
                 this.plugins[this.context.resizing._resize_plugin].setSize.call(this, offsetW + 'px', offsetH + 'px', true);
-        
+
                 cover.style.width = w;
                 cover.style.height = (!!this.context[this.context.resizing._resize_plugin]._caption ? '' : h);
-    
+
                 if (isVertical) {
-                    let transW = (offsetW/2) + 'px ' + (offsetW/2) + 'px 0';
-                    let transH = (offsetH/2) + 'px ' + (offsetH/2) + 'px 0';
+                    let transW = (offsetW / 2) + 'px ' + (offsetW / 2) + 'px 0';
+                    let transH = (offsetH / 2) + 'px ' + (offsetH / 2) + 'px 0';
                     transOrigin = deg === 90 || deg === -270 ? transH : transW;
                 }
             }
-    
+
             element.style.transformOrigin = transOrigin;
             this.plugins.resizing._setTransForm(element, deg.toString(), element.getAttribute('data-rotateX') || '', element.getAttribute('data-rotateY') || '');
-            
+
             if (isVertical) element.style.maxWidth = 'none';
             else element.style.maxWidth = '';
-    
+
             this.plugins.resizing.setCaptionPosition.call(this, element);
         },
-    
+
         _setTransForm: function (element, r, x, y) {
             let width = (element.offsetWidth - element.offsetHeight) * (/-/.test(r) ? 1 : -1);
             let translate = '';
-    
+
             if (/[1-9]/.test(r) && (x || y)) {
                 translate = x ? 'Y' : 'X';
-    
+
                 switch (r) {
                     case '90':
                         translate = x && y ? 'X' : y ? translate : '';
@@ -737,14 +744,14 @@
                         translate = '';
                 }
             }
-    
+
             if (r % 180 === 0) {
                 element.style.maxWidth = '';
             }
-            
+
             element.style.transform = 'rotate(' + r + 'deg)' + (x ? ' rotateX(' + x + 'deg)' : '') + (y ? ' rotateY(' + y + 'deg)' : '') + (translate ? ' translate' + translate + '(' + width + 'px)' : '');
         },
-    
+
         /**
          * @description The position of the caption is set automatically.
          * @param {Element} element Target element (not caption element)
@@ -755,7 +762,7 @@
                 figcaption.style.marginTop = (this.context.resizing._rotateVertical ? element.offsetWidth - element.offsetHeight : 0) + 'px';
             }
         },
-    
+
         /**
          * @description Mouse down event of resize handles
          * @param {MouseEvent} e Event object 
@@ -763,26 +770,26 @@
         onMouseDown_resize_handle: function (e) {
             e.stopPropagation();
             e.preventDefault();
-            
+
             const contextResizing = this.context.resizing;
             const direction = contextResizing._resize_direction = e.target.classList[0];
-    
+
             contextResizing._resizeClientX = e.clientX;
             contextResizing._resizeClientY = e.clientY;
             this.context.element.resizeBackground.style.display = 'block';
             contextResizing.resizeButton.style.display = 'none';
             contextResizing.resizeDiv.style.float = /l/.test(direction) ? 'right' : /r/.test(direction) ? 'left' : 'none';
-    
+
             const closureFunc_bind = function closureFunc(e) {
                 if (e.type === 'keydown' && e.keyCode !== 27) return;
-    
+
                 const change = contextResizing._isChange;
                 contextResizing._isChange = false;
-    
+
                 this.removeDocEvent('mousemove', resizing_element_bind);
                 this.removeDocEvent('mouseup', closureFunc_bind);
                 this.removeDocEvent('keydown', closureFunc_bind);
-                
+
                 if (e.type === 'keydown') {
                     this.controllersOff();
                     this.context.element.resizeBackground.style.display = 'none';
@@ -794,13 +801,13 @@
                     if (change) this.history.push(false);
                 }
             }.bind(this);
-    
+
             const resizing_element_bind = this.plugins.resizing.resizing_element.bind(this, contextResizing, direction, this.context[contextResizing._resize_plugin]);
             this.addDocEvent('mousemove', resizing_element_bind);
             this.addDocEvent('mouseup', closureFunc_bind);
             this.addDocEvent('keydown', closureFunc_bind);
         },
-    
+
         /**
          * @description Mouse move event after call "onMouseDown_resize_handle" of resize handles
          * The size of the module's "div" is adjusted according to the mouse move event.
@@ -812,22 +819,22 @@
         resizing_element: function (contextResizing, direction, plugin, e) {
             const clientX = e.clientX;
             const clientY = e.clientY;
-    
+
             let resultW = plugin._element_w;
             let resultH = plugin._element_h;
-    
+
             const w = plugin._element_w + (/r/.test(direction) ? clientX - contextResizing._resizeClientX : contextResizing._resizeClientX - clientX);
             const h = plugin._element_h + (/b/.test(direction) ? clientY - contextResizing._resizeClientY : contextResizing._resizeClientY - clientY);
             const wh = ((plugin._element_h / plugin._element_w) * w);
-    
+
             if (/t/.test(direction)) contextResizing.resizeDiv.style.top = (plugin._element_h - (/h/.test(direction) ? h : wh)) + 'px';
             if (/l/.test(direction)) contextResizing.resizeDiv.style.left = (plugin._element_w - w) + 'px';
-    
+
             if (/r|l/.test(direction)) {
                 contextResizing.resizeDiv.style.width = w + 'px';
                 resultW = w;
             }
-    
+
             if (/^(t|b)[^h]$/.test(direction)) {
                 contextResizing.resizeDiv.style.height = wh + 'px';
                 resultH = wh;
@@ -836,13 +843,13 @@
                 contextResizing.resizeDiv.style.height = h + 'px';
                 resultH = h;
             }
-    
+
             contextResizing._resize_w = resultW;
             contextResizing._resize_h = resultH;
             this.util.changeTxt(contextResizing.resizeDisplay, this._w.Math.round(resultW) + ' x ' + this._w.Math.round(resultH));
             contextResizing._isChange = true;
         },
-    
+
         /**
          * @description Resize the element to the size of the "div" adjusted in the "resizing_element" method.
          * Called at the mouse-up event registered in "onMouseDown_resize_handle".
@@ -852,20 +859,20 @@
             const isVertical = this.context.resizing._rotateVertical;
             this.controllersOff();
             this.context.element.resizeBackground.style.display = 'none';
-    
+
             let w = this._w.Math.round(isVertical ? this.context.resizing._resize_h : this.context.resizing._resize_w);
             let h = this._w.Math.round(isVertical ? this.context.resizing._resize_w : this.context.resizing._resize_h);
-    
+
             if (!isVertical && !/%$/.test(w)) {
                 const padding = 16;
                 const limit = this.context.element.wysiwygFrame.clientWidth - (padding * 2) - 2;
-                
+
                 if (this.util.getNumber(w, 0) > limit) {
                     h = this._w.Math.round((h / w) * limit);
                     w = limit;
                 }
             }
-    
+
             const pluginName = this.context.resizing._resize_plugin;
             this.plugins[pluginName].setSize.call(this, w, h, false, direction);
             if (isVertical) this.plugins.resizing.setTransformSize.call(this, this.context[this.context.resizing._resize_plugin]._element, w, h);