suneditor 2.47.0 → 2.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.47.0",
+  "version": "2.47.2",
   "description": "Vanilla javascript based WYSIWYG web editor, with no dependencies",
   "author": "JiHong.Lee",
   "license": "MIT",

package/src/lib/constructor.js

@@ -416,6 +416,7 @@ export default {
         options.plugins = plugins;
         /** Values */
         options.strictMode = options.strictMode !== false;
+        options.strictHTMLValidation = options.strictHTMLValidation !== false;
         options.lang = options.lang || _defaultLang;
         options.value = typeof options.value === 'string' ? options.value : null;
         options.allowedClassNames = new util._w.RegExp((options.allowedClassNames && typeof options.allowedClassNames === 'string' ? options.allowedClassNames + '|' : '') + '^__se__|se-|katex');
@@ -542,6 +543,7 @@ export default {
         options.imageMultipleFile = !!options.imageMultipleFile;
         options.imageAccept = (typeof options.imageAccept !== 'string' || options.imageAccept.trim() === "*") ? 'image/*' : options.imageAccept.trim() || 'image/*';
         /** Image - image gallery */
+        options.imageGalleryData = options.imageGalleryData || null;
         options.imageGalleryUrl = typeof options.imageGalleryUrl === 'string' ? options.imageGalleryUrl : null;
         options.imageGalleryHeader = options.imageGalleryHeader || null;
         /** Video */

package/src/lib/core.js

@@ -1270,6 +1270,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const range = this.getRange();
             if (this._selectionVoid(range)) return false;
 
+            const collapsed = range.collapsed;
             let startCon = range.startContainer;
             let startOff = range.startOffset;
             let endCon = range.endContainer;
@@ -1294,7 +1295,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 while (endCon && endCon.nodeType === 1 && endCon.lastChild) {
                     endCon = endCon.lastChild;
                 }
-                endOff = endCon.textContent.length;
+                endOff = collapsed ? 0 : endCon.textContent.length;
             }
 
             // startContainer
@@ -1474,18 +1475,19 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @description Determine if this offset is the edge offset of container
          * @param {Node} container The node of the selection object. (range.startContainer..)
          * @param {Number} offset The offset of the selection object. (core.getRange().startOffset...)
-         * @param {String|undefined} dir Select check point - Both edge, Front edge or End edge. ("front": Front edge, "end": End edge, undefined: Both edge)
+         * @param {String|undefined} dir Select check point - Both edge, Front edge or End edge. ("start": Front edge, "end": End edge, undefined: Both edge)
          * @returns {Boolean}
          */
         isEdgePoint: function (container, offset, dir) {
-            return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'front') && !container.nodeValue && offset === 1) || ((!dir || dir === 'end') && !!container.nodeValue && offset === container.nodeValue.length);
+            if (container.nodeType === 1 && !container.textContent.length) return true;
+            return (dir !== 'end' && offset === 0) || ((!dir || dir !== 'start') && !container.nodeValue && offset === 1) || ((!dir || dir === 'end') && !!container.nodeValue && offset === container.nodeValue.length);
         },
 
         /**
          * @description Check if the container and offset values are the edges of the format tag
          * @param {Node} container The node of the selection object. (range.startContainer..)
          * @param {Number} offset The offset of the selection object. (core.getRange().startOffset...)
-         * @param {String} dir Select check point - "front": Front edge, "end": End edge, undefined: Both edge.
+         * @param {String} dir Select check point - "start": Front edge, "end": End edge, undefined: Both edge.
          * @returns {Array|null}
          * @private
          */
@@ -1493,7 +1495,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             if (!this.isEdgePoint(node, offset, dir)) return false;
 
             const result = [];
-            dir = dir === 'front' ? 'previousSibling' : 'nextSibling';
+            dir = dir === 'start' ? 'previousSibling' : 'nextSibling';
             while (node && !util.isFormatElement(node) && !util.isWysiwygDiv(node)) {
                 if (!node[dir] || (util.isBreak(node[dir]) && !node[dir][dir])) {
                     if (node.nodeType === 1) result.push(node.cloneNode(false));
@@ -5478,12 +5480,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {String}
          */
         cleanHTML: function (html, whitelist, blacklist) {
-            if (!options.strictMode) return html;
+            if (!options.strictMode) return util.htmlCompress(html);
 
             html = this._deleteDisallowedTags(this._parser.parseFromString(util.htmlCompress(html), 'text/html').body.innerHTML).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, true)).replace(/<br\/?>$/i, '');
             const dom = _d.createRange().createContextualFragment(html);
             try {
-                util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter);
+                util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter, options.strictHTMLValidation);
             } catch (error) {
                 console.warn('[SUNEDITOR.cleanHTML.consistencyCheck.fail] ' + error);
             }
@@ -5536,12 +5538,13 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {String}
          */
         convertContentsForEditor: function (contents) {
-            if (!options.strictMode) return contents;
+            if (!options.strictMode) return util.htmlCompress(contents);
+
             contents = this._deleteDisallowedTags(this._parser.parseFromString(util.htmlCompress(contents), 'text/html').body.innerHTML).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, true));
             const dom = _d.createRange().createContextualFragment(contents);
 
             try {
-                util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter);
+                util._consistencyCheckOfHTML(dom, this._htmlCheckWhitelistRegExp, this._htmlCheckBlacklistRegExp, this._classNameFilter, options.strictHTMLValidation);
             } catch (error) {
                 console.warn('[SUNEDITOR.convertContentsForEditor.consistencyCheck.fail] ' + error);
             }
@@ -6235,6 +6238,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 this.execCommand('formatBlock', false, (formatName || options.defaultTag));
                 this.removeRange();
                 this._editorRange();
+                this.effectNode = null;
+                return;
             }
 
             if (format) {
@@ -6248,7 +6253,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             this.effectNode = null;
-            this.nativeFocus();
+
+            if (startCon) {
+                this.setRange(startCon, 1, startCon, 1);
+            } else {
+                this.nativeFocus();
+            }
         },
 
         /**
@@ -6532,7 +6542,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
         },
 
-        addGlobalEvent(type, listener, useCapture) {
+        addGlobalEvent: function (type, listener, useCapture) {
             if (options.iframe) {
                 core._ww.addEventListener(type, listener, useCapture);
             }
@@ -6544,7 +6554,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             };
         },
     
-        removeGlobalEvent(type, listener, useCapture) {
+        removeGlobalEvent: function (type, listener, useCapture) {
             if (!type) return;
     
             if (typeof type === 'object') {
@@ -6588,7 +6598,9 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             event.removeGlobalEvent(event.__selectionSyncEvent);
             event.__selectionSyncEvent = event.addGlobalEvent('mouseup', function() {
-                core._editorRange();
+                if (core) {
+                    core._editorRange();
+                }
                 event.removeGlobalEvent(event.__selectionSyncEvent);
             });
 
@@ -6670,7 +6682,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             const rangeEl = util.getRangeFormatElement(selectionNode, null);
 
             let selectionNodeDeepestFirstChild = selectionNode;
-            while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+            while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
 
             const selectedComponentInfo = core.getFileComponent(selectionNodeDeepestFirstChild);
             if (selectedComponentInfo) {
@@ -6716,10 +6728,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
         },
 
         _toggleToolbarBalloon: function () {
-            core._editorRange();
-            const range = core.getRange();
-            if (core._bindControllersOff || (!core._isBalloonAlways && range.collapsed)) event._hideToolbar();
-            else event._showToolbarBalloon(range);
+            if (core) {
+                core._editorRange();
+                const range = core.getRange();
+                if (core._bindControllersOff || (!core._isBalloonAlways && range.collapsed)) event._hideToolbar();
+                else event._showToolbarBalloon(range);
+            }
         },
 
         _showToolbarBalloon: function (rangeObj) {
@@ -6896,6 +6910,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return false;
             }
 
+            const range = core.getRange();
+            const selectionNode = core.getSelectionNode();
+            const formatEl = util.getFormatElement(selectionNode, null);
+            if (!formatEl && range.collapsed && !util.isComponent(selectionNode) && !util.isList(selectionNode)) {
+                const rangeEl = util.getRangeFormatElement(formatEl, null);
+                core._setDefaultFormat(util.isRangeFormatElement(rangeEl) ? 'DIV' : options.defaultTag);
+            }
+
             core._editorRange();
 
             const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || '';
@@ -6924,7 +6946,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 return siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false';
             } else {
                 siblingNode = event._isUneditableNode_getSibling(container, siblingKey, container);
-                return core.isEdgePoint(container, offset, isFront ? 'front' : 'end') && (siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false');
+                return core.isEdgePoint(container, offset, isFront ? 'start' : 'end') && (siblingNode && siblingNode.nodeType === 1 && siblingNode.getAttribute('contenteditable') === 'false');
             }
         },
 
@@ -6978,6 +7000,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             /** default key action */
+            if (keyCode === 13 && util.isFormatElement(core.getRange().startContainer)) {
+                core._resetRangeToTextNode();
+                selectionNode = core.getSelectionNode();
+            }
+            
             const range = core.getRange();
             const selectRange = !range.collapsed || range.startContainer !== range.endContainer;
             const fileComponentName = core._fileManager.pluginRegExp.test(core.currentControllerName) ? core.currentControllerName : '';
@@ -7204,6 +7231,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         break;
                     }
 
+                    if (!selectRange && core._isEdgeFormat(range.endContainer, range.endOffset, 'end') && !formatEl.nextSibling) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return;
+                    }
+
                     // tag[contenteditable="false"]
                     if (event._isUneditableNode(range, false)) {
                         e.preventDefault();
@@ -7358,15 +7391,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                         if (!shift) {
                             const tabText = util.createTextNode(new _w.Array(core._variable.tabSize + 1).join('\u00A0'));
                             if (lines.length === 1) {
-                                const textRange = core.insertNode(tabText, null, true);
-                                if (!textRange) return false;
+                                if (!core.insertNode(tabText, null, true)) return false;
                                 if (!fc) {
                                     r.sc = tabText;
-                                    r.so = textRange.endOffset;
+                                    r.so = tabText.length;
                                 }
                                 if (!lc) {
                                     r.ec = tabText;
-                                    r.eo = textRange.endOffset;
+                                    r.eo = tabText.length;
                                 }
                             } else {
                                 const len = lines.length - 1;
@@ -7596,7 +7628,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                                 const isMultiLine = util.getFormatElement(range.startContainer, null) !== util.getFormatElement(range.endContainer, null);
                                 const newFormat = formatEl.cloneNode(false);
                                 newFormat.innerHTML = '<br>';
-                                const r = core.removeNode();
+                                const commonCon = range.commonAncestorContainer;
+                                const r = commonCon === range.startContainer && commonCon === range.endContainer && util.onlyZeroWidthSpace(commonCon) ? range : core.removeNode();
                                 newEl = util.getFormatElement(r.container, null);
                                 if (!newEl) {
                                     if (util.isWysiwygDiv(r.container)) {
@@ -7711,8 +7744,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 e.preventDefault();
                 e.stopPropagation();
                 const nbsp = core.insertNode(util.createTextNode('\u00a0'));
-                if (nbsp && nbsp.container) {
-                    core.setRange(nbsp.container, nbsp.endOffset, nbsp.container, nbsp.endOffset);
+                if (nbsp) {
+                    core.setRange(nbsp, nbsp.length, nbsp, nbsp.length);
                     return;
                 }
             }
@@ -7724,7 +7757,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             if (event._directionKeyCode.test(keyCode)) {
-                core._editorRange();
+                _w.setTimeout(core._editorRange.bind(core), 0);
                 event._applyTagEffects();
             }
         },
@@ -7734,7 +7767,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
             let selectionNode = core.getSelectionNode();
 
-            const selectNode = function (node, offset = 0) {
+            const selectNode = function (node, offset) {
+                if (!offset) offset = 0;
                 e.preventDefault();
                 e.stopPropagation();
 
@@ -7757,12 +7791,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 let currentCellFirstNode = currentCell;
                 let currentCellLastNode = currentCell;
                 if (currentCell) {
-                    while (currentCellFirstNode.firstChild) currentCellFirstNode = currentCellFirstNode.firstChild;
-                    while (currentCellLastNode.lastChild) currentCellLastNode = currentCellLastNode.lastChild;
+                    while (currentCellFirstNode && currentCellFirstNode.firstChild) currentCellFirstNode = currentCellFirstNode.firstChild;
+                    while (currentCellLastNode && currentCellLastNode.lastChild) currentCellLastNode = currentCellLastNode.lastChild;
                 }
 
                 let selectionNodeDeepestFirstChild = selectionNode;
-                while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+                while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
                 const isCellFirstNode = (selectionNodeDeepestFirstChild === currentCellFirstNode);
                 const isCellLastNode = (selectionNodeDeepestFirstChild === currentCellLastNode);
 
@@ -7773,14 +7807,14 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (previousRow) siblingToSet = previousRow.children[currentCell.cellIndex];
                     else siblingToSet = util.getPreviousDeepestNode(table, core.context.element.wysiwyg);
 
-                    while (siblingToSet.lastChild) siblingToSet = siblingToSet.lastChild;
+                    while (siblingToSet && siblingToSet.lastChild) siblingToSet = siblingToSet.lastChild;
                     if (siblingToSet) offset = siblingToSet.textContent.length;
                 } else if (e.keyCode === 40 && isCellLastNode) {  // DOWN
                     const nextRow = currentRow && currentRow.nextElementSibling;
                     if (nextRow) siblingToSet = nextRow.children[currentCell.cellIndex];
                     else siblingToSet = util.getNextDeepestNode(table, core.context.element.wysiwyg);
 
-                    while (siblingToSet.firstChild) siblingToSet = siblingToSet.firstChild;
+                    while (siblingToSet && siblingToSet.firstChild) siblingToSet = siblingToSet.firstChild;
                 }
 
                 if (siblingToSet) {
@@ -7831,7 +7865,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             let selectionNodeDeepestFirstChild = selectionNode;
-            while (selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
+            while (selectionNodeDeepestFirstChild && selectionNodeDeepestFirstChild.firstChild) selectionNodeDeepestFirstChild = selectionNodeDeepestFirstChild.firstChild;
 
             const selectedComponentInfo = core.getFileComponent(selectionNodeDeepestFirstChild);
             if (!(e.keyCode === 16 || e.shiftKey) && selectedComponentInfo) core.selectComponent(selectedComponentInfo.target, selectedComponentInfo.pluginName);
@@ -8353,7 +8387,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
         },
 
-        _enterPrevent(e) {
+        _enterPrevent: function (e) {
             e.preventDefault();
             if (!util.isMobile) return;
 

package/src/lib/util.js

@@ -28,7 +28,7 @@ const util = {
         this.isOSX_IOS = /(Mac|iPhone|iPod|iPad)/.test(navigator.platform);
         this.isChromium = !!window.chrome;
         this.isResizeObserverSupported = (typeof ResizeObserver === 'function');
-        this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+        this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ((navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) && 'ontouchstart' in window);
     },
 
     _allowedEmptyNodeList: '.se-component, pre, blockquote, hr, li, table, img, iframe, video, audio, canvas',
@@ -1931,9 +1931,10 @@ const util = {
      * @param {RegExp} htmlCheckWhitelistRegExp Editor tags whitelist (core._htmlCheckWhitelistRegExp)
      * @param {RegExp} htmlCheckBlacklistRegExp Editor tags blacklist (core._htmlCheckBlacklistRegExp)
      * @param {Function} classNameFilter Class name filter function
+     * @param {Function} strictHTMLValidation Enforces strict HTML validation based on the editor`s policy
      * @private
      */
-    _consistencyCheckOfHTML: function (documentFragment, htmlCheckWhitelistRegExp, htmlCheckBlacklistRegExp, classNameFilter) {
+    _consistencyCheckOfHTML: function (documentFragment, htmlCheckWhitelistRegExp, htmlCheckBlacklistRegExp, classNameFilter, strictHTMLValidation) {
         /**
          * It is can use ".children(util.getListChildren)" to exclude text nodes, but "documentFragment.children" is not supported in IE.
          * So check the node type and exclude the text no (current.nodeType !== 1)
@@ -1982,7 +1983,7 @@ const util = {
                 else current.removeAttribute('class');
             }
 
-            const result = current.parentNode !== documentFragment && nrtag &&
+            const result = strictHTMLValidation && current.parentNode !== documentFragment && nrtag &&
                 ((this.isListCell(current) && !this.isList(current.parentNode)) ||
                     ((this.isFormatElement(current) || this.isComponent(current)) && !this.isRangeFormatElement(current.parentNode) && !this.getParentElement(current, this.isComponent)));
 

package/src/options.d.ts

@@ -3,6 +3,14 @@ import { Plugin } from './plugins/Plugin';
 
 export interface SunEditorOptions {
     plugins?: Plugin[] | Record<string, Plugin>;
+    /**
+     * Option to disable clean mode, which checks the styles, classes, etc. of the editor content
+     */
+    strictMode?: boolean;
+    /**
+     * Enforces strict HTML validation based on the editor`s policy. Applies to methods like setContents to ensure content compliance when enabled.
+     */
+    strictHTMLValidation?: boolean;
     /**
      * Values
      * ======
@@ -355,6 +363,10 @@ export interface SunEditorOptions {
      * Image - image gallery
      * =====
      */
+    /**
+     * Direct JSON data without making server requests.
+     */
+    imageGalleryData?: Array;
     /**
      * The url of the image gallery, if you use the image gallery
      */

package/src/plugins/dialog/image.js

@@ -684,7 +684,7 @@ export default {
         imagePlugin.setAlign.call(this, align, oImg, cover, container);
 
         oImg.onload = imagePlugin._image_create_onload.bind(this, oImg, contextImage.svgDefaultSize, container);
-        if (this.insertComponent(container, true, true, true)) this.plugins.fileManager.setInfo.call(this, 'image', oImg, this.functions.onImageUpload, file, true);
+        if (this.insertComponent(container, true, true, !this.options.mediaAutoSelect)) this.plugins.fileManager.setInfo.call(this, 'image', oImg, this.functions.onImageUpload, file, true);
         this.context.resizing._resize_plugin = '';
     },
 
@@ -697,6 +697,7 @@ export default {
             const line = this.appendFormatTag(container, null);
             if (line) this.setRange(line, 0, line, 0);
         }
+        this.history.push(false);
     },
 
     update_image: function (init, openController, notHistoryPush) {

package/src/plugins/fileBrowser/imageGallery.js

@@ -21,7 +21,8 @@ export default {
         const context = core.context;
         context.imageGallery = {
             title: core.lang.toolbar.imageGallery, // @Required @Override fileBrowser - File browser window title.
-            url: core.options.imageGalleryUrl, // @Required @Override fileBrowser - File server url.
+            directData: core.options.imageGalleryData, // @option @Override fileBrowser - Direct JSON data without making server requests.
+            url: core.options.imageGalleryUrl, // @option @Override fileBrowser - File server url.
             header: core.options.imageGalleryHeader, // @Required @Override fileBrowser - File server http header.
             listClass: 'se-image-list', // @Required @Override fileBrowser - Class name of list div.
             itemTemplateHandler: this.drawItems, // @Required @Override fileBrowser - Function that defines the HTML of an file item.

package/src/plugins/modules/fileBrowser.js

@@ -162,7 +162,11 @@
             fileBrowserContext.titleArea.textContent = pluginContext.title;
             fileBrowserContext.area.style.display = 'block';
 
-            this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            if (this.context[pluginName].directData) {
+                this.plugins.fileBrowser._drawListItem.call(this, this.context[pluginName].directData, true);
+            } else {
+                this.plugins.fileBrowser._drawFileList.call(this, this.context[pluginName].url, this.context[pluginName].header);
+            }
         },
 
         _bindClose: null,

package/src/plugins/submenu/list.js

@@ -286,7 +286,7 @@ export default {
         }
         
         this.effectNode = null;
-        return !isCollapsed ? originRange : afterRange;
+        return !isCollapsed ? originRange : afterRange || originRange;
     },
 
     _detachNested: function (cells) {

package/src/plugins/dialog/mention.d.ts

@@ -1,5 +0,0 @@
-import { DialogPlugin } from '../DialogPlugin';
-
-declare const mention: DialogPlugin;
-
-export default mention;