suneditor 2.43.13 → 2.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.43.13",
+  "version": "2.44.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "author": "JiHong.Lee",
   "license": "MIT",

package/src/assets/css/suneditor-contents.css

@@ -32,6 +32,10 @@
     direction: rtl;
 }
 
+.sun-editor-editable .se-component > figure {
+    direction: initial;
+}
+
 /** controllers on tag */
 .sun-editor-editable td, .sun-editor-editable th, 
 .sun-editor-editable figure, .sun-editor-editable figcaption, .sun-editor-editable img, 
@@ -39,20 +43,6 @@
     position: relative;
 }
 
-/* float */
-.sun-editor-editable .__se__float-left {
-    float: left;
-}
-.sun-editor-editable .__se__float-right {
-    float: right;
-}
-.sun-editor-editable .__se__float-center {
-    float: center;
-}
-.sun-editor-editable .__se__float-none {
-    float: none;
-}
-
 /** span */
 .sun-editor-editable span {
     display: inline;
@@ -364,6 +354,22 @@
     -webkit-box-shadow:0 0 0 0.2rem #80bdff; box-shadow:0 0 0 0.2rem #3f9dff; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
+/* float */
+.sun-editor-editable .__se__float-left {
+    float: left;
+    margin-right: 4px;
+}
+.sun-editor-editable .__se__float-right {
+    float: right;
+    margin-left: 4px;
+}
+.sun-editor-editable .__se__float-center {
+    float: center;
+}
+.sun-editor-editable .__se__float-none {
+    float: none;
+}
+
 /** image, video .. */
 .sun-editor-editable img, .sun-editor-editable iframe, .sun-editor-editable video, .sun-editor-editable audio {
     display: block;

package/src/assets/css/suneditor.css

@@ -2,7 +2,7 @@
 /* font color #333, background color: #fff */
 /* grey color #e1e1e1 , #d1d1d1 , #c1c1c1 , #b1b1b1 */
 /* blue color #c7deff , #80bdff , #3f9dff , #4592ff, #407dd1, #3288ff */
-/* red color #b94a48 , #f2dede , #eed3d7 */
+/* red color #b94a48 , #f2dede , #eed3d7, #d9534f */
 
 /** --- suneditor main */
 .sun-editor {width:auto; height:auto; box-sizing:border-box; font-family:Helvetica Neue; border:1px solid #dadada; background-color:#FFF; color:#000; user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none;}
@@ -32,6 +32,9 @@
 
 /** --- Icons ---------------------------------------------------------- */
 /* default svg */
+.sun-editor svg {
+    fill: currentColor;
+}
 .sun-editor button > svg, .sun-editor .se-svg {
     width: 16px;
     height: 16px;
@@ -340,6 +343,8 @@
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview {font-size:13px;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > span {display:inline-block; -webkit-box-shadow:0 0 0 0.1rem #c7deff; box-shadow:0 0 0 0.1rem #c7deff;}
 .sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > span * {direction:ltr;}
+.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > .se-math-katex-error {color:#b94a48; -webkit-box-shadow:0 0 0 0.1rem #f2dede; box-shadow:0 0 0 0.1rem #f2dede;}
+.sun-editor .se-dialog .se-dialog-inner .se-dialog-form .se-math-preview > .se-math-katex-error svg {width:auto; height:30px; color:#b94a48;}
 /* dialog - modal - link preview */
 .sun-editor .se-dialog .se-dialog-inner .se-link-preview {display:block; height:auto; max-height:18px; font-size:13px; font-weight:normal; font-family:inherit; color:#666; background-color:transparent; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:pre;}
 /* dialog - modal - anchor module */
@@ -454,8 +459,8 @@
 
 /** --- tooltip */
 .sun-editor .se-tooltip {position:relative; overflow:visible;}
-.sun-editor .se-tooltip .se-tooltip-inner {visibility:hidden; position:absolute; display:block; width:auto; top:120%; left:50%; background:transparent; opacity:0; z-index:1; line-height:1.5; transition:opacity 0.5s; margin:0; padding:0; bottom:auto; float:none; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden;}
-.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text {position:relative; display:inline-block; width:auto; left:-50%; font-size:0.9em; margin:0; padding:4px 6px; border-radius:2px; background-color:#333; color:#fff; text-align:center; line-height:unset; white-space:nowrap; cursor:auto;}
+.sun-editor .se-tooltip .se-tooltip-inner {visibility:hidden; position:absolute; display:block; width:auto; height:auto; top:120%; left:50%; background:transparent; opacity:0; z-index:1; line-height:1.5; transition:opacity 0.5s; margin:0; padding:0; bottom:auto; float:none; pointer-events:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden;}
+.sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text {position:relative; display:inline-block; width:auto; height:auto; left:-50%; font-size:0.9em; margin:0; padding:4px 6px; border-radius:2px; background-color:#333; color:#fff; text-align:center; line-height:unset; white-space:nowrap; cursor:auto;}
 .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text::after {content:""; position:absolute; bottom:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:transparent transparent #333 transparent;}
 .sun-editor .se-tooltip:hover .se-tooltip-inner {visibility:visible; opacity:1;}
 .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text .se-shortcut {display:block !important;}
@@ -496,6 +501,7 @@
 
 /* dialog--- */
 .sun-editor.se-rtl .se-dialog * {direction:rtl;}
+.sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-form .se-video-ratio {margin-left:0; margin-right:4px;}
 /* dialog - header */
 .sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-header .se-dialog-close {float:left;}
 .sun-editor.se-rtl .se-dialog .se-dialog-inner .se-dialog-header .se-modal-title {float:right;}
@@ -530,6 +536,17 @@
 .sun-editor .se-btn-module-border.module-float-right {float:right;}
 
 
+/** --- error ---------------------------------------------------------- */
+.sun-editor .se-error {color:#d9534f;}
+.sun-editor input.se-error:focus, select.se-error:focus, textarea.se-error:focus {
+    border: 1px solid #f2dede;
+    outline: 0;
+    -webkit-box-shadow: 0 0 0 0.2rem #eed3d7;
+    box-shadow: 0 0 0 0.2rem #eed3d7;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+
 /** ---------------------------------------------------------- menu items style ---------------------------------------------------------- */
 /** hr menu items */
 .sun-editor hr.__se__solid {

package/src/assets/defaultIcons.js

@@ -87,6 +87,8 @@ export default {
    download: '<svg viewBox="0 0 24 24"><path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" /></svg>',
    dir_ltr: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z"/></svg>',
    dir_rtl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z"/></svg>',
+   // Error
+   alert_outline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>',
    // More icons
    more_text: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 180 180"><g><path d="M49.711,142.188h49.027c2.328,0.002,4.394,1.492,5.129,3.699l9.742,29.252c0.363,1.092,1.385,1.828,2.537,1.83l15.883,0.01c0.859,0,1.667-0.412,2.17-1.109s0.641-1.594,0.37-2.41l-16.625-50.045L86.503,28.953c-0.36-1.097-1.383-1.839-2.537-1.842H64.532c-1.153-0.001-2.178,0.736-2.542,1.831L13.847,173.457c-0.271,0.816-0.135,1.713,0.369,2.412c0.503,0.697,1.311,1.109,2.171,1.109h15.872c1.151,0,2.173-0.736,2.537-1.828l9.793-29.287C45.325,143.66,47.39,142.18,49.711,142.188L49.711,142.188z M53.493,119.098l15.607-46.9c0.744-2.196,2.806-3.674,5.125-3.674s4.381,1.478,5.125,3.674l15.607,46.904c0.537,1.621,0.263,3.402-0.736,4.789c-1.018,1.408-2.649,2.24-4.386,2.24H58.615c-1.736,0-3.368-0.832-4.386-2.24C53.23,122.504,52.956,120.721,53.493,119.098L53.493,119.098z M190.465,63.32c0-2.919-1.015-5.396-3.059-7.428c-2.029-2.031-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.016-7.388,3.047c-2.029,2.032-3.056,4.498-3.056,7.386c0,2.889,1.026,5.354,3.056,7.385c2.032,2.032,4.499,3.059,7.388,3.059c2.887,0,5.354-1.026,7.383-3.059C189.45,68.633,190.465,66.178,190.465,63.32L190.465,63.32z M190.465,101.994c0-2.858-1.015-5.313-3.059-7.333c-2.029-2.042-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.005-7.388,3.047c-2.029,2.021-3.056,4.486-3.056,7.376c0,2.887,1.026,5.352,3.056,7.395c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,107.389,190.465,104.914,190.465,101.994L190.465,101.994z M190.465,140.76c0-2.918-1.015-5.395-3.059-7.438c-2.029-2.041-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.006-7.388,3.047c-2.029,2.043-3.056,4.52-3.056,7.438c0,2.922,1.026,5.398,3.056,7.439c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,146.158,190.465,143.682,190.465,140.76L190.465,140.76z"/></g></svg>',
    more_paragraph: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 180 180"><g><path d="M128.39,28.499H63.493c-25.558,0-46.354,20.796-46.354,46.354c0,25.559,20.796,46.353,46.354,46.353h9.271v55.625h18.542V47.04h9.271V176.83h18.543V47.04h9.271V28.499z M72.764,102.664h-9.271c-15.337,0-27.813-12.475-27.813-27.812c0-15.336,12.476-27.813,27.813-27.813h9.271V102.664z M190.465,63.32c0-2.919-1.015-5.396-3.059-7.428c-2.029-2.031-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.016-7.388,3.047c-2.029,2.032-3.056,4.498-3.056,7.386c0,2.889,1.026,5.354,3.056,7.385c2.032,2.032,4.499,3.059,7.388,3.059c2.887,0,5.354-1.026,7.383-3.059C189.45,68.633,190.465,66.178,190.465,63.32L190.465,63.32z M190.465,101.994c0-2.858-1.015-5.313-3.059-7.333c-2.029-2.042-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.005-7.388,3.047c-2.029,2.021-3.056,4.486-3.056,7.376c0,2.887,1.026,5.352,3.056,7.395c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,107.389,190.465,104.914,190.465,101.994L190.465,101.994z M190.465,140.76c0-2.918-1.015-5.395-3.059-7.438c-2.029-2.041-4.496-3.047-7.383-3.047c-2.889,0-5.355,1.006-7.388,3.047c-2.029,2.043-3.056,4.52-3.056,7.438c0,2.922,1.026,5.398,3.056,7.439c2.032,2.021,4.499,3.047,7.388,3.047c2.887,0,5.354-1.025,7.383-3.047C189.45,146.158,190.465,143.682,190.465,140.76L190.465,140.76z"/></g></svg>',

package/src/lib/constructor.js

@@ -410,6 +410,7 @@ export default {
         options.lang = options.lang || _defaultLang;
         options.value = typeof options.value === 'string' ? options.value : null;
         options.historyStackDelayTime = typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400;
+        options.frameAttrbutes = options.frameAttrbutes || {};
         // tag style
         options.defaultTag = typeof options.defaultTag === 'string' && options.defaultTag.length > 0 ? options.defaultTag : 'p';
         const textTags = options.textTags = [{bold: 'STRONG', underline: 'U', italic: 'EM', strike: 'DEL', sub: 'SUB', sup: 'SUP'}, (options.textTags || {})].reduce(function (_default, _new) {
@@ -511,7 +512,7 @@ export default {
         options.lineHeights = !options.lineHeights ? null : options.lineHeights;
         options.paragraphStyles = !options.paragraphStyles ? null : options.paragraphStyles;
         options.textStyles = !options.textStyles ? null : options.textStyles;
-        options.fontSizeUnit = typeof options.fontSizeUnit === 'string' ? (options.fontSizeUnit.trim() || 'px') : 'px';
+        options.fontSizeUnit = typeof options.fontSizeUnit === 'string' ? (options.fontSizeUnit.trim().toLowerCase() || 'px') : 'px';
         options.alignItems = typeof options.alignItems === 'object' ? options.alignItems : (options.rtl ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify']);
         /** Image */
         options.imageResizing = options.imageResizing === undefined ? true : options.imageResizing;

package/src/lib/core.js

@@ -474,8 +474,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @private
          */
         _cleanStyleRegExp: {
-            span: new _w.RegExp('\s*(font-family|font-size|color|background-color)\s*:[^;]+(?!;)*', 'ig'),
-            format: new _w.RegExp('\s*(text-align|margin-left|margin-right)\s*:[^;]+(?!;)*', 'ig')
+            span: new _w.RegExp('\\s*(font-family|font-size|color|background-color)\\s*:[^;]+(?!;)*', 'ig'),
+            format: new _w.RegExp('\\s*(text-align|margin-left|margin-right)\\s*:[^;]+(?!;)*', 'ig'),
+            fontSizeUnit: new _w.RegExp('\\d+' + options.fontSizeUnit + '$', 'i'),
         },
 
         /**
@@ -1777,7 +1778,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                                 let c = parentNode.childNodes[startOff];
                                 const focusNode = (c && c.nodeType === 3 && util.onlyZeroWidthSpace(c) && util.isBreak(c.nextSibling)) ? c.nextSibling : c;
                                 if (focusNode) {
-                                    if (!focusNode.nextSibling) {
+                                    if (!focusNode.nextSibling && util.isBreak(focusNode)) {
                                         parentNode.removeChild(focusNode);
                                         afterNode = null;
                                     } else {
@@ -1793,7 +1794,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         }
                     } else { /** Select range nodes */
                         const isSameContainer = startCon === endCon;
-    
                         if (isSameContainer) {
                             if (this.isEdgePoint(endCon, endOff)) afterNode = endCon.nextSibling;
                             else afterNode = endCon.splitText(endOff);
@@ -2057,6 +2057,16 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 startOff = endOff = 0;
             }
 
+            if (startCon === endCon && range.collapsed) {
+                if (startCon.textContent && util.onlyZeroWidthSpace(startCon.textContent.substr(startOff))) {
+                    return {
+                        container: startCon,
+                        offset: offset,
+                        prevContainer: startCon && startCon.parentNode ? startCon : null
+                    };
+                }
+            }
+
             let beforeNode = null;
             let afterNode = null;
 
@@ -4721,7 +4731,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 _var._codeOriginCssText = code.style.cssText;
 
                 editorArea.style.cssText = toolbar.style.cssText = '';
-                wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0];
+                wysiwygFrame.style.cssText = (wysiwygFrame.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0] + options.defaultStyle;
                 code.style.cssText = (code.style.cssText.match(/\s?display(\s+)?:(\s+)?[a-zA-Z]+;/) || [''])[0];
                 toolbar.style.width = wysiwygFrame.style.height = code.style.height = '100%';
                 toolbar.style.position = 'relative';
@@ -4889,7 +4899,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     '<!DOCTYPE html><html>' +
                     '<head>' +
                     '<meta charset="utf-8" />' +
-                    '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+                    '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">' +
                     '<title>' + lang.toolbar.preview + '</title>' +
                     linkHTML +
                     '</head>' +
@@ -5102,6 +5112,32 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 .replace(this.editorTagsBlacklistRegExp, '');
         },
 
+        _convertFontSize: function (to, size) {
+            const value = size.match(/(\d+(?:\.\d+)?)(.+)/);
+            const sizeNum = value[1] * 1;
+            const from = value[2];
+            let pxSize = sizeNum;
+            
+            if (/em/.test(from)) {
+                pxSize = this.round(sizeNum / 0.0625);
+            } else if (from === 'pt') {
+                pxSize = this.round(sizeNum * 1.333);
+            } else if (from === '%') {
+                pxSize = sizeNum / 100;
+            }
+
+            switch (to) {
+                case 'em':
+                case 'rem':
+                case '%':
+                    return (pxSize * 0.0625).toFixed(2) + to;
+                case 'pt':
+                    return this._w.Math.floor(pxSize / 1.333) + to;
+                default: // px
+                    return pxSize + to;
+            }
+        },
+
         _cleanStyle: function (m, v, name) {
             const sv = m.match(/style\s*=\s*(?:"|')[^"']*(?:"|')/);
             if (sv) {
@@ -5121,6 +5157,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                                     break;
                                 case 'fontSize':
                                     if (!options.plugins.fontSize) continue;
+                                    if (!this._cleanStyleRegExp.fontSizeUnit.test(r[0])) {
+                                        r[0] = r[0].replace(this._w.RegExp('\\d+' + r[0].match(/\d+(.+$)/)[1]), this._convertFontSize.bind(this._w.Math, options.fontSizeUnit));
+                                    }
                                     break;
                                 case 'color':
                                     if (!options.plugins.fontColor || /rgba\(([0-9]+\s*,\s*){3}0\)|windowtext/i.test(c)) continue;
@@ -5299,7 +5338,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {String}
          */
         cleanHTML: function (html, whitelist, blacklist) {
-            html = this._deleteDisallowedTags(this._parser.parseFromString(html, 'text/html').body.innerHTML).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, true)).replace(/^.+\x3C!--StartFragment--\>|\x3C!--EndFragment-->.+$/g, '');
+            html = this._deleteDisallowedTags(this._parser.parseFromString(html, 'text/html').body.innerHTML).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, true));
 
             const dom = _d.createRange().createContextualFragment(html);
             try {
@@ -5925,7 +5964,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         },
 
         __callResizeFunction: function (h, resizeObserverEntry) {
-            h = h === -1 ? (resizeObserverEntry.borderBoxSize ? resizeObserverEntry.borderBoxSize[0].blockSize : (resizeObserverEntry.contentRect.height + this._editorHeightPadding)) : h;
+            h = h === -1 ? (resizeObserverEntry.borderBoxSize && resizeObserverEntry.borderBoxSize[0] ? resizeObserverEntry.borderBoxSize[0].blockSize : (resizeObserverEntry.contentRect.height + this._editorHeightPadding)) : h;
             if (this._editorHeight !== h) {
                 if (typeof functions.onResizeEditor === 'function') functions.onResizeEditor(h, this._editorHeight, core, resizeObserverEntry);
                 this._editorHeight = h;
@@ -6063,18 +6102,24 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             // toolbar visibility
             context.element.toolbar.style.visibility = '';
+            // wisywig attributes
+            const attr = options.frameAttrbutes;
+            for (let k in attr) {
+                context.element.wysiwyg.setAttribute(k, attr[k]);
+            }
 
             this._checkComponents();
             this._componentsInfoInit = false;
             this._componentsInfoReset = false;
 
             this.history.reset(true);
-            this._resourcesStateChange();
-
+            
             _w.setTimeout(function () {
                 // observer
                 if (event._resizeObserver) event._resizeObserver.observe(context.element.wysiwygFrame);
                 if (event._toolbarObserver) event._toolbarObserver.observe(context.element._toolbarShadow);
+                // resource state
+                core._resourcesStateChange();
                 // user event
                 if (typeof functions.onload === 'function') functions.onload(core, reload);
             });
@@ -6617,9 +6662,6 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             core._editorRange();
 
-            // user event
-            if (typeof functions.onInput === 'function' && functions.onInput(e, core) === false) return;
-
             const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';       
             if (!core._charCount(data)) {
                 e.preventDefault();
@@ -6627,6 +6669,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return false;
             }
 
+            // user event
+            if (typeof functions.onInput === 'function' && functions.onInput(e, core) === false) return;
+
             // history stack
             core.history.push(true);
         },
@@ -7774,6 +7819,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const onlyText = !cleanData;
 
             if (!onlyText) {
+                cleanData = cleanData.replace(/^<html>\r\n<body>\r\n\x3C!--StartFragment--\>|\x3C!--EndFragment-->\r\n<\/body\>\r\n<\/html>$/g, '');
                 if (MSData) {
                     cleanData = cleanData.replace(/\n/g, ' ');
                     plainText = plainText.replace(/\n/g, ' ');
@@ -8061,12 +8107,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         onChange: null,
 
-         /**
+        /**
          * @description Event functions
          * @param {String} contents Current contents
          * @param {Object} core Core object
          */
-          onSave: null,
+        onSave: null,
 
         /**
          * @description Event functions (drop, paste)
@@ -8435,6 +8481,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         /**
          * @description Copying the contents of the editor to the original textarea and execute onSave callback
+         * * not working during enabled codeView mode
          */
         save: function () {
             const contents = core.getContents(false);
@@ -8452,6 +8499,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         /**
          * @description Gets the contents of the suneditor
+         * * not working during enabled codeView mode
          * @param {Boolean} onlyContents - Return only the contents of the body without headers when the "fullPage" option is true
          * @returns {String}
          */
@@ -8461,6 +8509,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
         /**
          * @description Gets only the text of the suneditor contents
+         * * not working during enabled codeView mode
          * @returns {String}
          */
         getText: function () {

package/src/lib/util.js

@@ -1805,7 +1805,7 @@ const util = {
         // wrong position
         const wrongTags = this.getListChildNodes(documentFragment, function (current) {
             if (current.nodeType !== 1) {
-                if (this.isList(current.parentNode)) removeTags.push(current);
+                if (this.isList(current.parentElement)) removeTags.push(current);
                 return false;
             }
 
@@ -1947,7 +1947,7 @@ const util = {
         frame.setAttribute('scrolling', 'auto');
         frame.contentDocument.head.innerHTML = '' +
             '<meta charset="utf-8" />' +
-            '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+            '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">' +
             this._setIframeCssTags(options);
         frame.contentDocument.body.className = options._editableClass;
         frame.contentDocument.body.setAttribute('contenteditable', true);

package/src/plugins/dialog/image.js

@@ -649,7 +649,7 @@ export default {
         oImg.src = src;
         oImg.alt = alt;
         oImg.setAttribute('data-rotate', '0');
-        anchor = imagePlugin.onRender_link.call(this, oImg, anchor);
+        anchor = imagePlugin.onRender_link.call(this, oImg, anchor ?  anchor.cloneNode(false) : null);
 
         if (contextImage._resizing) {
             oImg.setAttribute('data-proportion', contextImage._proportionChecked);
@@ -933,8 +933,8 @@ export default {
      */
     setSize: function (w, h, notResetPercentage, direction) {
         const contextImage = this.context.image;
-        const onlyW = /^(rw|lw)$/.test(direction);
-        const onlyH = /^(th|bh)$/.test(direction);
+        const onlyW = /^(rw|lw)$/.test(direction) && /\d+/.test(contextImage._element.style.height);
+        const onlyH = /^(th|bh)$/.test(direction) && /\d+/.test(contextImage._element.style.width);
 
         if (!onlyH) {
             contextImage._element.style.width = this.util.isNumber(w) ? w + contextImage.sizeUnit : w;
@@ -957,6 +957,7 @@ export default {
     setAutoSize: function () {
         const contextImage = this.context.image;
 
+        if (contextImage._caption) contextImage._caption.style.marginTop = '';
         this.plugins.resizing.resetTransform.call(this, contextImage._element);
         this.plugins.image.cancelPercentAttr.call(this);
 

package/src/plugins/dialog/math.js

@@ -2,6 +2,8 @@
 
 import dialog from '../modules/dialog';
 
+const KATEX_WEBSITE = "https://katex.org/docs/supported.html";
+
 export default {
     name: 'math',
     display: 'dialog',
@@ -63,7 +65,7 @@ export default {
             '</div>' +
             '<div class="se-dialog-body">' +
                 '<div class="se-dialog-form">' +
-                    '<label>' + lang.dialogBox.mathBox.inputLabel + ' (<a href="https://katex.org/docs/supported.html" target="_blank">KaTeX</a>)</label>' +
+                    '<label>' + lang.dialogBox.mathBox.inputLabel + ' (<a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</label>' +
                     '<textarea class="se-input-form se-math-exp" type="text"></textarea>' +
                 '</div>' +
                 '<div class="se-dialog-form">' +
@@ -138,8 +140,16 @@ export default {
     },
 
     _renderer: function (exp) {
-        const katex = this.options.katex;
-        return katex.src.renderToString(exp, {throwOnError: true, displayMode: true});
+        let result = '';
+        try {
+            this.util.removeClass(this.context.math.focusElement, 'se-error');
+            result = this.options.katex.src.renderToString(exp, {throwOnError: true, displayMode: true});
+        } catch(error) {
+            this.util.addClass(this.context.math.focusElement, 'se-error');
+            result = '<span class="se-math-katex-error">Katex syntax error. (Refer <a href="' + KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</span>';
+            console.warn('[SUNEDITOR.math.Katex.error] ', error);
+        }
+        return result;
     },
 
     _renderMathExp: function (contextMath, e) {

package/src/plugins/dialog/video.js

@@ -540,7 +540,7 @@ export default {
                 url = 'https://player.vimeo.com/video/' + url.slice(url.lastIndexOf('/') + 1);
             }
 
-            this.plugins.video.create_video.call(this, this.plugins.video[(!/youtu\.?be/.test(url) && !/vimeo\.com/.test(url) ? "createVideoTag" : "createIframeTag")].call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
+            this.plugins.video.create_video.call(this, this.plugins.video[(!/embed|iframe|player|\/e\/|\.php|\.html?/.test(url) && !/vimeo\.com/.test(url) ? "createVideoTag" : "createIframeTag")].call(this), url, contextVideo.inputX.value, contextVideo.inputY.value, contextVideo._align, null, this.context.dialog.updateModal);
         } catch (error) {
             throw Error('[SUNEDITOR.video.upload.fail] cause : "' + error.message + '"');
         } finally {