2.39.0

JiHong88 · May 16, 2021 · 0dd862c · 0dd862c
2 parents 31f8dba + cffa91a
commit 0dd862c
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1270,6 +1270,12 @@ editor.onAudioUploadError = function (errorMessage, result, core) {
     return Boolean
 }
 
+// Called when the editor is resized using the bottom bar
+// height, prevHeight are number
+editor.onResizeEditor = function (height, prevHeight, core) {
+    console.log(`height: ${height}, prevHeight: ${prevHeight}`)
+}
+
 // It replaces the default callback function of the image upload
 /**
  * xmlHttp: xmlHttpRequest object

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "suneditor",
-  "version": "2.38.10",
+  "version": "2.39.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [

diff --git a/dist/suneditor.min.js b/dist/suneditor.min.js
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "sideEffects": [
     "./src/assets/css/*.css"
   ],
-  "version": "2.38.10",
+  "version": "2.39.0",
   "description": "Pure JavaScript based WYSIWYG web editor",
   "main": "src/suneditor.js",
   "keywords": [
@@ -40,7 +40,7 @@
     "@webpack-cli/init": "^0.2.2",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^0.1.19",
-    "codemirror": "^5.57.0",
+    "codemirror": "^5.61.0",
     "css-loader": "^1.0.1",
     "csstype": "^2.6.13",
     "file-loader": "^2.0.0",

diff --git a/sample/html/out/document-editor.html b/sample/html/out/document-editor.html
@@ -727,7 +727,7 @@ <h5 class="subsection-title">Properties:</h5>
                     <td class="type">
                         <span class="param-type">Number</span>
                     </td>
-                    <td class="description last">Indent size of Code view mode (4)</td>
+                    <td class="description last">Indent size of Code view mode (2)</td>
                 </tr>
                 <tr>
                     <td class="name"><code>minResizingSize</code></td>

diff --git a/sample/html/out/document-user.html b/sample/html/out/document-user.html
@@ -1642,6 +1642,46 @@ <h4 class="name" id="onAudioUploadError"><span class="type-signature"></span>onA
             </table>
             <dl class="details"></dl>
 
+
+            <h4 class="name" id="onResizeEditor"><span class="type-signature"></span>onResizeEditor<span
+                    class="signature">(errorMessage, result, core)</span><span class="type-signature"> &rarr; {Boolean}</span></h4>
+            <div class="description">
+                Called when the audio upload failed
+            </div>
+            <table class="params">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="last">Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="name"><code>height</code></td>
+                    <td class="type">
+                        <span class="param-type">Number</span>
+                    </td>
+                    <td class="description last">Height after resized (px)</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>prevHeight</code></td>
+                    <td class="type">
+                        <span class="param-type">Number</span>
+                    </td>
+                    <td class="description last">Prev height before resized (px)</td>
+                </tr>
+                <tr>
+                    <td class="name"><code>core</code></td>
+                    <td class="type">
+                        <span class="param-type">Object</span>
+                    </td>
+                    <td class="description last"><a href="document-editor.html">Core Object</a></td>
+                </tr>
+                </tbody>
+            </table>
+            <dl class="details"></dl>
+
 
             <h4 class="name" id="audioUploadHandler"><span class="type-signature"></span>audioUploadHandler<span
                     class="signature">(xmlHttp, info, core)</span><span class="type-signature"></span></h4>
@@ -1891,6 +1931,7 @@ <h3>Functions & Events</h3>
         <li><a href="document-user.html#onAudioUploadBefore">onAudioUploadBefore</a></li>
         <li><a href="document-user.html#onAudioUpload">onAudioUpload</a></li>
         <li><a href="document-user.html#onAudioUploadError">onAudioUploadError</a></li>
+        <li><a href="document-user.html#onResizeEditor">onResizeEditor</a></li>
         <li><a href="document-user.html#audioUploadHandler">audioUploadHandler</a></li>
         <li><a href="document-user.html#toggleCodeView">toggleCodeView</a></li>
         <li><a href="document-user.html#toggleFullScreen">toggleFullScreen</a></li>

diff --git a/src/lib/core.d.ts b/src/lib/core.d.ts
@@ -867,6 +867,15 @@ export default class SunEditor {
      */
     onAudioUploadError: (errorMessage: string, result: any, core: Core) => boolean;
 
+    /**
+     * @description Called when the audio upload failed
+     * @param height Height after resized (px)
+     * @param prevHeight Prev height before resized (px)
+     * @param core Core object
+     * @returns
+     */
+    onResizeEditor: (height: number, prevHeight: number, core: core) => {};
+
     /**
      * @description Reset the buttons on the toolbar. (Editor is not reloaded)
      * You cannot set a new plugin for the button.

diff --git a/src/lib/core.js b/src/lib/core.js
@@ -438,7 +438,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @property {Number} innerHeight_fullScreen InnerHeight in editor when in full screen
          * @property {Number} resizeClientY Remember the vertical size of the editor before resizing the editor (Used when calculating during resize operation)
          * @property {Number} tabSize Indent size of tab (4)
-         * @property {Number} codeIndent Indent size of Code view mode (4)
+         * @property {Number} codeIndent Indent size of Code view mode (2)
          * @property {Number} minResizingSize Minimum size of editing area when resized {Number} (.se-wrapper-inner {min-height: 65px;} || 65)
          * @property {Array} currentNodes  An array of the current cursor's node structure
          * @private
@@ -450,7 +450,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             innerHeight_fullScreen: 0,
             resizeClientY: 0,
             tabSize: 4,
-            codeIndent: 4,
+            codeIndent: 2,
             minResizingSize: util.getNumber((context.element.wysiwygFrame.style.minHeight || '65'), 0),
             currentNodes: [],
             currentNodesMap: [],
@@ -4240,6 +4240,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
 
                 // history stack
                 this.history.push(false);
+                this.history._resetCachingButton();
             } else {
                 this._setEditorDataToCodeView();
                 this._variable._codeOriginCssText = this._variable._codeOriginCssText.replace(/(\s?display(\s+)?:(\s+)?)[a-zA-Z]+(?=;)/, 'display: block');
@@ -4267,7 +4268,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             }
 
             this._checkPlaceholder();
-
+            // user event
             if (typeof functions.toggleCodeView === 'function') functions.toggleCodeView(this._variable.isCodeView, this);
         },
 
@@ -4429,6 +4430,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 util.removeClass(this._styleCommandMap.fullScreen, 'active');
             }
 
+            // user event
             if (typeof functions.toggleFullScreen === 'function') functions.toggleFullScreen(this._variable.isFullScreen, this);
         },
 
@@ -4722,7 +4724,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {String}
          */
         cleanHTML: function (html, whitelist) {
-            html = this._deleteDisallowedTags(html).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, false));
+            html = this._deleteDisallowedTags(this._parser.parseFromString(html, 'text/html').body.innerHTML).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, false));
 
             const dom = _d.createRange().createContextualFragment(html);
             try {
@@ -4771,9 +4773,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @returns {String}
          */
         convertContentsForEditor: function (contents) {
-            contents = this._deleteDisallowedTags(contents).replace(/(<[a-zA-Z0-9\-]+)[^>]*(?=>)/g, this._cleanTags.bind(this, true));
-
-            const dom = _d.createRange().createContextualFragment(this._deleteDisallowedTags(contents));
+            contents = this._deleteDisallowedTags(this._parser.parseFromString(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);
@@ -4816,8 +4817,8 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             let returnHTML = '';
             const wRegExp = _w.RegExp;
             const brReg = new wRegExp('^(BLOCKQUOTE|PRE|TABLE|THEAD|TBODY|TR|TH|TD|OL|UL|IMG|IFRAME|VIDEO|AUDIO|FIGURE|FIGCAPTION|HR|BR|CANVAS|SELECT)$', 'i');
-            const isFormatElement = util.isFormatElement.bind(util);
             const wDoc = typeof html === 'string' ? _d.createRange().createContextualFragment(html) : html;
+            const isFormat = function (current) { return this.isFormatElement(current) || this.isComponent(current); }.bind(util);
 
             let indentSize = this._variable.codeIndent * 1;
             indentSize = indentSize > 0 ? new _w.Array(indentSize + 1).join(' ') : '';
@@ -4827,30 +4828,34 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 const elementRegTest = brReg.test(element.nodeName);
                 const elementIndent = (elementRegTest ? indent : '');
 
-                for (let i = 0, len = children.length, node, br, nodeRegTest; i < len; i++) {
+                for (let i = 0, len = children.length, node, br, nodeRegTest, tag, tagIndent; i < len; i++) {
                     node = children[i];
                     nodeRegTest = brReg.test(node.nodeName);
                     br = nodeRegTest ? '\n' : '';
-                    lineBR = isFormatElement(node) && !elementRegTest && !/^(TH|TD)$/i.test(element.nodeName) ? '\n' : '';
+                    lineBR = isFormat(node) && !elementRegTest && !/^(TH|TD)$/i.test(element.nodeName) ? '\n' : '';
 
                     if (node.nodeType === 8) {
                         returnHTML += '\n<!-- ' + node.textContent.trim() + ' -->' + br;
                         continue;
                     }
                     if (node.nodeType === 3) {
-                        returnHTML += util._HTMLConvertor((/^\n+$/.test(node.data) ? '' : node.data));
+                        if (!util.isList(node.parentElement)) returnHTML += util._HTMLConvertor(/^\n+$/.test(node.data) ? '' : node.data);
                         continue;
                     }
                     if (node.childNodes.length === 0) {
-                        returnHTML += (/^HR$/i.test(node.nodeName) ? '\n' : '') + elementIndent + node.outerHTML + br;
+                        returnHTML += (/^HR$/i.test(node.nodeName) ? '\n' : '') + (/^PRE$/i.test(node.parentElement.nodeName) && /^BR$/i.test(node.nodeName) ? '' : elementIndent) + node.outerHTML + br;
                         continue;
                     }
-
-                    node.innerHTML = node.innerHTML;
-                    const tag = node.nodeName.toLowerCase();
-                    returnHTML += (lineBR || (elementRegTest ? '' : br)) + (elementIndent || nodeRegTest ? indent : '') + node.outerHTML.match(wRegExp('<' + tag + '[^>]*>', 'i'))[0] + br;
-                    recursionFunc(node, indent + indentSize, '');
-                    returnHTML += (nodeRegTest ? indent : '') + '</' + tag + '>' + (lineBR || br || elementRegTest ? '\n' : '' || /^(TH|TD)$/i.test(node.nodeName) ? '\n' : '');
+
+                    if (!node.outerHTML) { // IE
+                        returnHTML += new _w.XMLSerializer().serializeToString(node);
+                    } else {
+                        tag = node.nodeName.toLowerCase();
+                        tagIndent = elementIndent || nodeRegTest ? indent : '';
+                        returnHTML += (lineBR || (elementRegTest ? '' : br)) + tagIndent + node.outerHTML.match(wRegExp('<' + tag + '[^>]*>', 'i'))[0] + br;
+                        recursionFunc(node, indent + indentSize, '');
+                        returnHTML += (/\n$/.test(returnHTML) ? tagIndent : '') + '</' + tag + '>' + (lineBR || br || elementRegTest ? '\n' : '' || /^(TH|TD)$/i.test(node.nodeName) ? '\n' : '');
+                    }
                 }
             }(wDoc, '', '\n'));
 
@@ -5063,6 +5068,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             this.editorTagsWhitelistRegExp = util.createTagsWhitelist(options._editorTagsWhitelist.replace('|//', '|<!--|-->'));
             this.pasteTagsWhitelistRegExp = util.createTagsWhitelist(options.pasteTagsWhitelist);
 
+            const regEndStr = '\\s*=\\s*(\")[^\"]*\\1';
             const _attr = options.attributesWhitelist;
             const tagsAttr = {};
             let allAttr = '';
@@ -5072,12 +5078,12 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                     if (k === 'all') {
                         allAttr = _attr[k] + '|';
                     } else {
-                        tagsAttr[k] = new wRegExp('((?:' + _attr[k] + '|' + defaultAttr + ')\\s*=.*\\S)', 'ig');
+                        tagsAttr[k] = new wRegExp('(?:' + _attr[k] + '|' + defaultAttr + ')' + regEndStr, 'ig');
                     }
                 }
             }
 
-            this._attributesWhitelistRegExp = new wRegExp('((?:' + allAttr + defaultAttr + ')\\s*=.*\\S)', 'ig');
+            this._attributesWhitelistRegExp = new wRegExp('(?:' + allAttr + defaultAttr + ')' + regEndStr, 'ig');
             this._attributesTagsWhitelist = tagsAttr;
 
             // set modes
@@ -5164,8 +5170,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          * @private
          */
         _cachingButtons: function () {
-            this.codeViewDisabledButtons = context.element.toolbar.querySelectorAll('.se-toolbar button:not([class~="se-code-view-enabled"])');
-            this.resizingDisabledButtons = context.element.toolbar.querySelectorAll('.se-toolbar button:not([class~="se-resizing-enabled"])');
+            _w.setTimeout(function () {
+                this.codeViewDisabledButtons = context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]:not([class~="se-code-view-enabled"])');
+                this.resizingDisabledButtons = context.element._buttonTray.querySelectorAll('.se-menu-list button[data-display]:not([class~="se-resizing-enabled"]):not([data-display="MORE"])');
+            }.bind(this));
+
             const tool = context.tool;
             this.commandMap = {
                 SUB: tool.subscript,
@@ -6719,13 +6728,15 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             core.submenuOff();
             core.controllersOff();
 
+            const prevHeight = util.getNumber(context.element.wysiwygFrame.style.height, 0);
             core._variable.resizeClientY = e.clientY;
             context.element.resizeBackground.style.display = 'block';
 
             function closureFunc() {
                 context.element.resizeBackground.style.display = 'none';
                 _d.removeEventListener('mousemove', event._resize_editor);
                 _d.removeEventListener('mouseup', closureFunc);
+                if (typeof functions.onResizeEditor === 'function') functions.onResizeEditor(util.getNumber(context.element.wysiwygFrame.style.height, 0), prevHeight, core);
             }
 
             _d.addEventListener('mousemove', event._resize_editor);
@@ -7032,25 +7043,23 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
                 }
                 cleanData = core.cleanHTML(cleanData, core.pasteTagsWhitelistRegExp);
             } else {
-                cleanData = plainText.replace(/\n/g, '<br>');
+                cleanData = util._HTMLConvertor(plainText).replace(/\n/g, '<br>');
             }
 
             const maxCharCount = core._charCount(core._charTypeHTML ? cleanData : plainText);
-            // // user event - paste
+            // user event - paste
             if (type === 'paste' && typeof functions.onPaste === 'function') {
                 const value = functions.onPaste(e, cleanData, maxCharCount, core);
                 if (!value) return false;
                 if (typeof value === 'string') cleanData = value;
             }
-            // // user event - drop
+            // user event - drop
             if (type === 'drop' && typeof functions.onDrop === 'function') {
                 const value = functions.onDrop(e, cleanData, maxCharCount, core);
                 if (!value) return false;
                 if (typeof value === 'string') cleanData = value;
             }
 
-            if (onlyText) cleanData = util._HTMLConvertor(cleanData);
-
             // files
             const files = data.files;
             if (files.length > 0 && !MSData) {
@@ -7508,6 +7517,11 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
          */
         onAudioUploadError: null,
 
+        /**
+         * @description Called when the editor is resized using the bottom bar
+         */
+        onResizeEditor: null,
+
         /**
          * @description Reset the buttons on the toolbar. (Editor is not reloaded)
          * You cannot set a new plugin for the button.
@@ -7915,6 +7929,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
             util.removeItem(context.element.topArea);
 
             /** remove object reference */
+            for (let k in core.functions) { if (util.hasOwn(core, k)) delete core.functions[k]; }
             for (let k in core) { if (util.hasOwn(core, k)) delete core[k]; }
             for (let k in event) { if (util.hasOwn(event, k)) delete event[k]; }
             for (let k in context) { if (util.hasOwn(context, k)) delete context[k]; }

diff --git a/src/lib/util.d.ts b/src/lib/util.d.ts
@@ -437,7 +437,7 @@ declare interface util {
      * Only one condition can be entered at a time.
      * @returns
      */
-    getParentElement(element: Node, query: TimerHandler): Element;
+    getParentElement(element: Node, query: string | Function): Element;
 
     /**
      * @description Get the child element of the argument value.
@@ -450,7 +450,7 @@ declare interface util {
      * Only one condition can be entered at a time.
      * @returns
      */
-    getChildElement(element: Node, query: TimerHandler, last: boolean): Element;
+    getChildElement(element: Node, query: string | Function, last: boolean): Element;
 
     /**
      * @description 1. The first node of all the child nodes of the "first" element is returned.
@@ -594,7 +594,7 @@ declare interface util {
      * @param element Element object
      * @param validation Validation function / String("tag1|tag2..") / If null, all tags are applicable.
      */
-    mergeNestedTags(element: Element, validation?: TimerHandler): void;
+    mergeNestedTags(element: Element, validation?: string | Function): void;
 
     /**
      * @description Delete a empty child node of argument element