suneditor 2.43.14 → 2.44.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.43.14",
+  "version": "2.44.1",
   "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;}
@@ -459,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;}
@@ -501,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;}
@@ -535,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/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*[^-a-zA-Z](font-family|font-size|color|background-color)\\s*:[^;]+(?!;)*', 'ig'),
+            format: new _w.RegExp('\\s*[^-a-zA-Z](text-align|margin-left|margin-right)\\s*:[^;]+(?!;)*', 'ig'),
+            fontSizeUnit: new _w.RegExp('\\d+' + options.fontSizeUnit + '$', 'i'),
         },
 
         /**
@@ -1670,6 +1671,51 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
         },
 
+        _checkDuplicateNode: function (oNode, parentNode) {
+            (function recursionFunc(current) {
+                core._dupleCheck(current, parentNode);
+                const childNodes = current.childNodes;
+                for (let i = 0, len = childNodes.length; i < len; i++) {
+                    recursionFunc(childNodes[i]);
+                }
+            })(oNode);
+        },
+
+        _dupleCheck: function (oNode, parentNode) {
+            if (!util.isTextStyleElement(oNode)) return;
+            
+            const oStyles = (oNode.style.cssText.match(/[^;]+;/g) || []).map(function(v){ return v.trim(); });
+            const nodeName = oNode.nodeName;
+            if (/^span$/i.test(nodeName) && oStyles.length === 0) return oNode;
+
+            let duple = false;
+            (function recursionFunc(ancestor) {
+                if (util.isWysiwygDiv(ancestor) || !util.isTextStyleElement(ancestor)) return;
+
+                if (ancestor.nodeName === nodeName) {
+                    duple = true;
+                    (ancestor.style.cssText.match(/[^;]+;/g) || []).forEach(function(v){
+                        let i;
+                        if ((i = oStyles.indexOf(v.trim())) > -1) {
+                            oStyles.splice(i, 1);
+                        }
+                    });
+                    ancestor.classList.forEach(function(v){
+                        oNode.classList.remove(v);
+                    });
+                }
+
+                recursionFunc(ancestor.parentElement);
+            })(parentNode);
+
+            if (duple) {
+                if (!(oNode.style.cssText = oStyles.join(' '))) oNode.removeAttribute('style');
+                if (!oNode.attributes.length) oNode.setAttribute('data-se-duple', 'true');
+            }
+
+            return oNode;
+        },
+
         /**
          * @description Delete selected node and insert argument value node and return.
          * If the "afterNode" exists, it is inserted after the "afterNode"
@@ -1777,7 +1823,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 +1839,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);
@@ -1916,6 +1961,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     insertListCell = true;
                 }
 
+                this._checkDuplicateNode(oNode, parentNode);
                 parentNode.insertBefore(oNode, afterNode);
 
                 if (insertListCell) {
@@ -1939,9 +1985,27 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         }
                     }
                 }
-            } catch (e) {
+            } catch (error) {
                 parentNode.appendChild(oNode);
+                console.warn('[SUNEDITOR.insertNode.warn] ' + error);
             } finally {
+                const dupleNodes = parentNode.querySelectorAll('[data-se-duple]');
+                if (dupleNodes.length > 0) {
+                    for (let i = 0, len = dupleNodes.length, d, c, ch, parent; i < len; i++) {
+                        d = dupleNodes[i];
+                        ch = d.childNodes;
+                        parent = d.parentNode;
+
+                        while (ch[0]) {
+                            c = ch[0];
+                            parent.insertBefore(c, d);
+                        }
+
+                        if (d === oNode) oNode = c;
+                        util.removeItem(d);
+                    }
+                }
+
                 if ((util.isFormatElement(oNode) || util.isComponent(oNode)) && startCon === endCon) {
                     const cItem = util.getFormatElement(commonCon, null);
                     if (cItem && cItem.nodeType === 1 && util.isEmptyLine(cItem)) {
@@ -2057,6 +2121,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 +4795,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 +4963,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 +5176,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 +5221,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 +5402,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 +6028,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 +6166,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 +6726,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 +6733,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 +7883,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 +8171,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 +8545,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 +8563,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 +8573,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">' +
@@ -140,9 +142,11 @@ export default {
     _renderer: function (exp) {
         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) {
-            result = '<span class="se-math-katex-error">' + error + '</span>';
+            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;

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 {