@toast-ui/editor 3.0.2 → 3.1.2

package/dist/esm/index.js

@@ -1,3 +1,10 @@
+/**
+ * @toast-ui/editor
+ * @version 3.1.2 | Mon Dec 27 2021
+ * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+
 import { Fragment, Schema, Slice, NodeRange, Mark as Mark$1, DOMParser, Node as Node$3 } from 'prosemirror-model';
 import { DecorationSet, Decoration, EditorView } from 'prosemirror-view';
 import { ReplaceAroundStep, liftTarget, canSplit, StepMap } from 'prosemirror-transform';
@@ -49,10 +56,14 @@ var __assign$1 = function() {
     return __assign$1.apply(this, arguments);
 };
 
-function __spreadArray$1(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+function __spreadArray$1(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 function __makeTemplateObject(cooked, raw) {
@@ -77,12 +88,16 @@ function __makeTemplateObject(cooked, raw) {
  * @param {Object} [context] Context(this) of callback function
  * @memberof module:collection
  * @example
- * var forEachOwnProperties = require('tui-code-snippet/collection/forEachOwnProperties'); // node, commonjs
+ * // ES6
+ * import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
+ * 
+ * // CommonJS
+ * const forEachOwnProperties = require('tui-code-snippet/collection/forEachOwnProperties'); 
  *
- * var sum = 0;
+ * let sum = 0;
  *
  * forEachOwnProperties({a:1,b:2,c:3}, function(value){
- *     sum += value;
+ *   sum += value;
  * });
  * alert(sum); // 6
  */
@@ -190,12 +205,16 @@ var isArray_1 = isArray$3;
  * @param {Object} [context] Context(this) of callback function
  * @memberof module:collection
  * @example
- * var forEachArray = require('tui-code-snippet/collection/forEachArray'); // node, commonjs
+ * // ES6
+ * import forEachArray from 'tui-code-snippet/collection/forEachArray';
+ * 
+ * // CommonJS
+ * const forEachArray = require('tui-code-snippet/collection/forEachArray'); 
  *
- * var sum = 0;
+ * let sum = 0;
  *
  * forEachArray([1,2,3], function(value){
- *     sum += value;
+ *   sum += value;
  * });
  * alert(sum); // 6
  */
@@ -240,19 +259,23 @@ var forEachOwnProperties$1 = forEachOwnProperties_1;
  * @param {Object} [context] Context(this) of callback function
  * @memberof module:collection
  * @example
- * var forEach = require('tui-code-snippet/collection/forEach'); // node, commonjs
+ * // ES6
+ * import forEach from 'tui-code-snippet/collection/forEach'; 
+ * 
+ * // CommonJS
+ * const forEach = require('tui-code-snippet/collection/forEach'); 
  *
- * var sum = 0;
+ * let sum = 0;
  *
  * forEach([1,2,3], function(value){
- *     sum += value;
+ *   sum += value;
  * });
  * alert(sum); // 6
  *
  * // In case of Array-like object
- * var array = Array.prototype.slice.call(arrayLike); // change to array
+ * const array = Array.prototype.slice.call(arrayLike); // change to array
  * forEach(array, function(value){
- *     sum += value;
+ *   sum += value;
  * });
  */
 function forEach$4(obj, iteratee, context) {
@@ -315,11 +338,15 @@ var isArray$1 = isArray_1;
  * @returns {number} the First index at which a given element, or -1 if it is not present
  * @memberof module:array
  * @example
- * var inArray = require('tui-code-snippet/array/inArray'); // node, commonjs
+ * // ES6
+ * import inArray from 'tui-code-snippet/array/inArray';
+ * 
+ * // CommonJS
+ * const inArray = require('tui-code-snippet/array/inArray');
  *
- * var arr = ['one', 'two', 'three', 'four'];
- * var idx1 = inArray('one', arr, 3); // -1
- * var idx2 = inArray('one', arr); // 0
+ * const arr = ['one', 'two', 'three', 'four'];
+ * const idx1 = inArray('one', arr, 3); // -1
+ * const idx2 = inArray('one', arr); // 0
  */
 function inArray$4(searchElement, array, startIndex) {
   var i;
@@ -569,15 +596,19 @@ var forEachOwnProperties = forEachOwnProperties_1;
  * @returns {HTMLElement}
  * @memberof module:request
  * @example
- * var imagePing = require('tui-code-snippet/request/imagePing'); // node, commonjs
+ * // ES6
+ * import imagePing from 'tui-code-snippet/request/imagePing';
+ * 
+ * // CommonJS
+ * const imagePing = require('tui-code-snippet/request/imagePing');
  *
  * imagePing('https://www.google-analytics.com/collect', {
- *     v: 1,
- *     t: 'event',
- *     tid: 'trackingid',
- *     cid: 'cid',
- *     dp: 'dp',
- *     dh: 'dh'
+ *   v: 1,
+ *   t: 'event',
+ *   tid: 'trackingid',
+ *   cid: 'cid',
+ *   dp: 'dp',
+ *   dh: 'dh'
  * });
  */
 function imagePing$1(url, trackingInfo) {
@@ -672,6 +703,28 @@ var reEscapeChars$1 = /[>(){}[\]+-.!#|]/g;
 var reEscapeHTML = /<([a-zA-Z_][a-zA-Z0-9\-._]*)(\s|[^\\/>])*\/?>|<(\/)([a-zA-Z_][a-zA-Z0-9\-._]*)\s*\/?>|<!--[^-]+-->|<([a-zA-Z_][a-zA-Z0-9\-.:/]*)>/g;
 var reEscapeBackSlash = /\\[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~\\]/g;
 var reEscapePairedChars = /[*_~`]/g;
+var XMLSPECIAL$1 = '[&<>"]';
+var reXmlSpecial$1 = new RegExp(XMLSPECIAL$1, 'g');
+function replaceUnsafeChar$1(char) {
+    switch (char) {
+        case '&':
+            return '&amp;';
+        case '<':
+            return '&lt;';
+        case '>':
+            return '&gt;';
+        case '"':
+            return '&quot;';
+        default:
+            return char;
+    }
+}
+function escapeXml$1(text) {
+    if (reXmlSpecial$1.test(text)) {
+        return text.replace(reXmlSpecial$1, replaceUnsafeChar$1);
+    }
+    return text;
+}
 function sendHostName() {
     sendHostname_1('editor', 'UA-129966929-1');
 }
@@ -1234,16 +1287,20 @@ var forEachArray = forEachArray_1;
  * @returns {Array} Array
  * @memberof module:collection
  * @example
- * var toArray = require('tui-code-snippet/collection/toArray'); // node, commonjs
+ * // ES6
+ * import toArray from 'tui-code-snippet/collection/toArray'; 
+ * 
+ * // CommonJS
+ * const toArray = require('tui-code-snippet/collection/toArray'); 
  *
- * var arrayLike = {
- *     0: 'one',
- *     1: 'two',
- *     2: 'three',
- *     3: 'four',
- *     length: 4
+ * const arrayLike = {
+ *   0: 'one',
+ *   1: 'two',
+ *   2: 'three',
+ *   3: 'four',
+ *   length: 4
  * };
- * var result = toArray(arrayLike);
+ * const result = toArray(arrayLike);
  *
  * alert(result instanceof Array); // true
  * alert(result); // one,two,three,four
@@ -1422,7 +1479,7 @@ var EditorBase = /** @class */ (function () {
             var _a = getDefaultCommands(), undo = _a.undo, redo = _a.redo;
             var rules = this.createInputRules();
             var plugins = __spreadArray$1(__spreadArray$1([], this.keymaps), [
-                keymap(__assign$1({ 'Mod-z': undo(), 'Shift-Mod-z': redo() }, baseKeymap)),
+                keymap(__assign$1({ 'Mod-z': undo(), 'Shift-Mod-z': redo(), 'Shift-Enter': baseKeymap.Enter }, baseKeymap)),
                 history(),
                 placeholder(this.placeholder),
                 addWidget(this.eventEmitter),
@@ -1493,15 +1550,19 @@ var EditorBase = /** @class */ (function () {
             delete _this[prop];
         });
     };
-    EditorBase.prototype.moveCursorToStart = function () {
+    EditorBase.prototype.moveCursorToStart = function (focus) {
         var tr = this.view.state.tr;
         this.view.dispatch(tr.setSelection(createTextSelection(tr, 1)).scrollIntoView());
-        this.focus();
+        if (focus) {
+            this.focus();
+        }
     };
-    EditorBase.prototype.moveCursorToEnd = function () {
+    EditorBase.prototype.moveCursorToEnd = function (focus) {
         var tr = this.view.state.tr;
         this.view.dispatch(tr.setSelection(createTextSelection(tr, tr.doc.content.size - 1)).scrollIntoView());
-        this.focus();
+        if (focus) {
+            this.focus();
+        }
     };
     EditorBase.prototype.setScrollTop = function (top) {
         this.view.dom.scrollTop = top;
@@ -1692,6 +1753,8 @@ var OPEN_TAG = "<(" + TAG_NAME + ")(" + ATTRIBUTE$1 + ")*\\s*/?>";
 var CLOSE_TAG = "</(" + TAG_NAME + ")\\s*[>]";
 var HTML_TAG = "(?:" + OPEN_TAG + "|" + CLOSE_TAG + ")";
 var reHTMLTag = new RegExp("^" + HTML_TAG, 'i');
+var reBR = /<br\s*\/*>/i;
+var ALTERNATIVE_TAG_FOR_BR = '</p><p>';
 
 function isPositionInBox(style, offsetX, offsetY) {
     var left = parseInt(style.left, 10);
@@ -1824,51 +1887,36 @@ function getTotalOffset(el, root) {
     }
     return { offsetTop: offsetTop, offsetLeft: offsetLeft };
 }
-function finalizeHtml(html, needHtmlText) {
-    var result;
-    if (needHtmlText) {
-        result = html.innerHTML;
-    }
-    else {
-        var frag = document.createDocumentFragment();
-        var childNodes = toArray_1(html.childNodes);
-        var length_1 = childNodes.length;
-        for (var i = 0; i < length_1; i += 1) {
-            frag.appendChild(childNodes[i]);
-        }
-        result = frag;
-    }
-    return result;
-}
 function setAttributes(attributes, element) {
     Object.keys(attributes).forEach(function (attrName) {
-        if (attributes[attrName]) {
-            element.setAttribute(attrName, attributes[attrName]);
+        if (isNil(attributes[attrName])) {
+            element.removeAttribute(attrName);
         }
         else {
-            element.removeAttribute(attrName);
+            element.setAttribute(attrName, attributes[attrName]);
         }
     });
 }
 function replaceBRWithEmptyBlock(html) {
-    var reBr = /<br\s*\/*>/i;
+    // remove br in paragraph to compatible with markdown
+    var replacedHTML = html.replace(/<p><br\s*\/*><\/p>/gi, '<p></p>');
     var reHTMLTag = new RegExp(HTML_TAG, 'ig');
-    var htmlTagMatched = html.match(reHTMLTag);
+    var htmlTagMatched = replacedHTML.match(reHTMLTag);
     htmlTagMatched === null || htmlTagMatched === void 0 ? void 0 : htmlTagMatched.forEach(function (htmlTag, index) {
-        if (reBr.test(htmlTag)) {
-            var alternativeTag = '';
+        if (reBR.test(htmlTag)) {
+            var alternativeTag = ALTERNATIVE_TAG_FOR_BR;
             if (index) {
                 var prevTag = htmlTagMatched[index - 1];
                 var openTagMatched = prevTag.match(OPEN_TAG);
-                if (openTagMatched) {
+                if (openTagMatched && !/br/i.test(openTagMatched[1])) {
                     var tagName = openTagMatched[1];
                     alternativeTag = "</" + tagName + "><" + tagName + ">";
                 }
             }
-            html = html.replace(reBr, alternativeTag);
+            replacedHTML = replacedHTML.replace(reBR, alternativeTag);
         }
     });
-    return html;
+    return replacedHTML;
 }
 
 function resolveSelectionPos(selection) {
@@ -2096,7 +2144,7 @@ function customBlock$2(node, start, end) {
     var marks = [markInfo(setOffsetPos(start, 1), end, CUSTOM_BLOCK)];
     marks.push(markInfo(start, addOffsetPos(start, syntaxEnd), DELIM));
     if (info) {
-        marks.push(markInfo(addOffsetPos(start, 2), addOffsetPos(start, syntaxLength + info.length), META));
+        marks.push(markInfo(addOffsetPos(start, syntaxEnd), addOffsetPos(start, syntaxLength + info.length), META));
     }
     marks.push(markInfo(setOffsetPos(end, 1), end, DELIM));
     var lineBackgroundMarkInfo = lineBackground(parent, start, end, 'custom-block');
@@ -3320,9 +3368,11 @@ var ThematicBreak$1 = /** @class */ (function (_super) {
     return ThematicBreak;
 }(Mark));
 
-function cannotBeListNode(_a) {
-    var type = _a.type;
-    return type === 'codeBlock' || type === 'heading' || type.indexOf('table') !== -1;
+function cannotBeListNode(_a, line) {
+    var type = _a.type, sourcepos = _a.sourcepos;
+    // eslint-disable-next-line prefer-destructuring
+    var startLine = sourcepos[0][0];
+    return line <= startLine && (type === 'codeBlock' || type === 'heading' || type.match('table'));
 }
 var ListItem$1 = /** @class */ (function (_super) {
     __extends$1(ListItem, _super);
@@ -3425,7 +3475,7 @@ var ListItem$1 = /** @class */ (function (_super) {
             var skipLines = [];
             for (var line = startLine; line <= endLine; line += 1) {
                 var mdNode = toastMark.findFirstNodeAtLine(line);
-                if (mdNode && cannotBeListNode(mdNode)) {
+                if (mdNode && cannotBeListNode(mdNode, line)) {
                     break;
                 }
                 // to skip unnecessary processing
@@ -4073,15 +4123,20 @@ var MdEditor = /** @class */ (function (_super) {
         _this.commands = _this.createCommands();
         _this.specs.setContext(__assign$1(__assign$1({}, _this.context), { view: _this.view }));
         _this.createClipboard();
-        _this.eventEmitter.listen('changePreviewTabWrite', function () { return _this.toggleActive(true); });
+        // To prevent unnecessary focus setting during initial rendering
+        _this.eventEmitter.listen('changePreviewTabWrite', function (isMarkdownTabMounted) {
+            return _this.toggleActive(true, isMarkdownTabMounted);
+        });
         _this.eventEmitter.listen('changePreviewTabPreview', function () { return _this.toggleActive(false); });
         _this.initEvent();
         return _this;
     }
-    MdEditor.prototype.toggleActive = function (active) {
+    MdEditor.prototype.toggleActive = function (active, isMarkdownTabMounted) {
         toggleClass(this.el, 'active', active);
         if (active) {
-            this.focus();
+            if (!isMarkdownTabMounted) {
+                this.focus();
+            }
         }
         else {
             this.blur();
@@ -4298,7 +4353,7 @@ var MdEditor = /** @class */ (function (_super) {
         });
         this.view.dispatch(tr.replaceWith(0, doc.content.size, nodes));
         if (cursorToEnd) {
-            this.moveCursorToEnd();
+            this.moveCursorToEnd(true);
         }
     };
     MdEditor.prototype.addWidget = function (node, style, mdPos) {
@@ -4485,7 +4540,7 @@ var safeEvent = _safeEvent;
  * @param {object} [context] context - context for handler method.
  * @memberof module:domEvent
  * @example
- * var div = document.querySelector('div');
+ * const div = document.querySelector('div');
  * 
  * // Bind one event to an element.
  * on(div, 'click', toggle);
@@ -4502,10 +4557,10 @@ var safeEvent = _safeEvent;
  * });
  * 
  * // Set a context for handler method.
- * var name = 'global';
- * var repository = {name: 'CodeSnippet'};
+ * const name = 'global';
+ * const repository = {name: 'CodeSnippet'};
  * on(div, 'drag', function() {
- *  console.log(this.name);
+ *   console.log(this.name);
  * }, repository);
  * // Result when you drag a div: "CodeSnippet"
  */
@@ -4622,10 +4677,14 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-function __spreadArray(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -9958,7 +10017,7 @@ function isCustomBlock(node) {
 function isCustomInline(node) {
     return node.type === 'customInline';
 }
-function text(s, sourcepos) {
+function text$1(s, sourcepos) {
     var node = createNode$1('text', sourcepos);
     node.literal = s;
     return node;
@@ -10134,17 +10193,17 @@ function convertExtAutoLinks(walker, autolinkParser) {
             for (var _i = 0, linkInfos_1 = linkInfos; _i < linkInfos_1.length; _i++) {
                 var _b = linkInfos_1[_i], range = _b.range, url = _b.url, linkText = _b.text;
                 if (range[0] > lastIdx) {
-                    newNodes.push(text(literal.substring(lastIdx, range[0]), sourcepos(lastIdx, range[0] - 1)));
+                    newNodes.push(text$1(literal.substring(lastIdx, range[0]), sourcepos(lastIdx, range[0] - 1)));
                 }
                 var linkNode = createNode$1('link', sourcepos.apply(void 0, range));
-                linkNode.appendChild(text(linkText, sourcepos.apply(void 0, range)));
+                linkNode.appendChild(text$1(linkText, sourcepos.apply(void 0, range)));
                 linkNode.destination = url;
                 linkNode.extendedAutolink = true;
                 newNodes.push(linkNode);
                 lastIdx = range[1] + 1;
             }
             if (lastIdx < literal.length) {
-                newNodes.push(text(literal.substring(lastIdx), sourcepos(lastIdx, literal.length - 1)));
+                newNodes.push(text$1(literal.substring(lastIdx), sourcepos(lastIdx, literal.length - 1)));
             }
             for (var _c = 0, newNodes_1 = newNodes; _c < newNodes_1.length; _c++) {
                 var newNode = newNodes_1[_c];
@@ -10335,7 +10394,7 @@ var InlineParser = /** @class */ (function () {
         }
         // If we got here, we didn't match a closing backtick sequence.
         this.pos = afterOpenTicks;
-        block.appendChild(text(ticks, this.sourcepos(startpos, this.pos - 1)));
+        block.appendChild(text$1(ticks, this.sourcepos(startpos, this.pos - 1)));
         return true;
     };
     // Parse a backslash-escaped special character, adding either the escaped
@@ -10354,11 +10413,11 @@ var InlineParser = /** @class */ (function () {
             this.nextLine();
         }
         else if (reEscapable.test(subj.charAt(this.pos))) {
-            block.appendChild(text(subj.charAt(this.pos), this.sourcepos(startpos, this.pos)));
+            block.appendChild(text$1(subj.charAt(this.pos), this.sourcepos(startpos, this.pos)));
             this.pos += 1;
         }
         else {
-            block.appendChild(text('\\', this.sourcepos(startpos, startpos)));
+            block.appendChild(text$1('\\', this.sourcepos(startpos, startpos)));
         }
         return true;
     };
@@ -10373,7 +10432,7 @@ var InlineParser = /** @class */ (function () {
             node = createNode$1('link', this.sourcepos(startpos, this.pos));
             node.destination = normalizeURI("mailto:" + dest);
             node.title = '';
-            node.appendChild(text(dest, this.sourcepos(startpos + 1, this.pos - 1)));
+            node.appendChild(text$1(dest, this.sourcepos(startpos + 1, this.pos - 1)));
             block.appendChild(node);
             return true;
         }
@@ -10382,7 +10441,7 @@ var InlineParser = /** @class */ (function () {
             node = createNode$1('link', this.sourcepos(startpos, this.pos));
             node.destination = normalizeURI(dest);
             node.title = '';
-            node.appendChild(text(dest, this.sourcepos(startpos + 1, this.pos - 1)));
+            node.appendChild(text$1(dest, this.sourcepos(startpos + 1, this.pos - 1)));
             block.appendChild(node);
             return true;
         }
@@ -10476,7 +10535,7 @@ var InlineParser = /** @class */ (function () {
         else {
             contents = this.subject.slice(startpos - 1, this.pos);
         }
-        var node = text(contents, this.sourcepos(startpos, this.pos));
+        var node = text$1(contents, this.sourcepos(startpos, this.pos));
         block.appendChild(node);
         // Add entry to stack for this opener
         if ((res.canOpen || res.canClose) &&
@@ -10747,7 +10806,7 @@ var InlineParser = /** @class */ (function () {
     InlineParser.prototype.parseOpenBracket = function (block) {
         var startpos = this.pos;
         this.pos += 1;
-        var node = text('[', this.sourcepos(this.pos, this.pos));
+        var node = text$1('[', this.sourcepos(this.pos, this.pos));
         block.appendChild(node);
         // Add entry to stack for this opener
         this.addBracket(node, startpos, false);
@@ -10760,13 +10819,13 @@ var InlineParser = /** @class */ (function () {
         this.pos += 1;
         if (this.peek() === C_OPEN_BRACKET$1) {
             this.pos += 1;
-            var node = text('![', this.sourcepos(this.pos - 1, this.pos));
+            var node = text$1('![', this.sourcepos(this.pos - 1, this.pos));
             block.appendChild(node);
             // Add entry to stack for this opener
             this.addBracket(node, startpos + 1, true);
         }
         else {
-            var node = text('!', this.sourcepos(this.pos, this.pos));
+            var node = text$1('!', this.sourcepos(this.pos, this.pos));
             block.appendChild(node);
         }
         return true;
@@ -10785,12 +10844,12 @@ var InlineParser = /** @class */ (function () {
         var opener = this.brackets;
         if (opener === null) {
             // no matched opener, just return a literal
-            block.appendChild(text(']', this.sourcepos(startpos, startpos)));
+            block.appendChild(text$1(']', this.sourcepos(startpos, startpos)));
             return true;
         }
         if (!opener.active) {
             // no matched opener, just return a literal
-            block.appendChild(text(']', this.sourcepos(startpos, startpos)));
+            block.appendChild(text$1(']', this.sourcepos(startpos, startpos)));
             // take opener off brackets stack
             this.removeBracket();
             return true;
@@ -10882,7 +10941,7 @@ var InlineParser = /** @class */ (function () {
         } // no match
         this.removeBracket(); // remove this opener from stack
         this.pos = startpos;
-        block.appendChild(text(']', this.sourcepos(startpos, startpos)));
+        block.appendChild(text$1(']', this.sourcepos(startpos, startpos)));
         if (this.options.referenceDefinition) {
             this.refLinkCandidateMap[block.id] = { node: block, refLabel: refLabel };
         }
@@ -10912,7 +10971,7 @@ var InlineParser = /** @class */ (function () {
         var m;
         var startpos = this.pos + 1;
         if ((m = this.match(reEntityHere))) {
-            block.appendChild(text(lib.decodeHTML(m), this.sourcepos(startpos, this.pos)));
+            block.appendChild(text$1(lib.decodeHTML(m), this.sourcepos(startpos, this.pos)));
             return true;
         }
         return false;
@@ -10947,10 +11006,10 @@ var InlineParser = /** @class */ (function () {
                     }
                     return repeat('\u2014', emCount) + repeat('\u2013', enCount);
                 });
-                block.appendChild(text(lit, this.sourcepos(startpos, this.pos)));
+                block.appendChild(text$1(lit, this.sourcepos(startpos, this.pos)));
             }
             else {
-                var node = text(m, this.sourcepos(startpos, this.pos));
+                var node = text$1(m, this.sourcepos(startpos, this.pos));
                 block.appendChild(node);
             }
             return true;
@@ -11173,7 +11232,7 @@ var InlineParser = /** @class */ (function () {
         }
         if (!res) {
             this.pos += 1;
-            block.appendChild(text(fromCodePoint$1(c), this.sourcepos(this.pos, this.pos + 1)));
+            block.appendChild(text$1(fromCodePoint$1(c), this.sourcepos(this.pos, this.pos + 1)));
         }
         return true;
     };
@@ -13059,6 +13118,7 @@ function filterDisallowedTags(str) {
     return str;
 }
 
+var CUSTOM_SYNTAX_LENGTH = 4;
 var baseConvertors$1 = {
     heading: function (node, _a) {
         var entering = _a.entering;
@@ -13226,7 +13286,7 @@ var baseConvertors$1 = {
                 return customConvertor(node, context);
             }
             catch (e) {
-                console.warn(e);
+                console.warn("[@toast-ui/editor] - The error occurred when " + info + " block node was parsed in markdown renderer: " + e);
             }
         }
         return [
@@ -13249,15 +13309,30 @@ var baseConvertors$1 = {
         ];
     },
     customInline: function (node, context, convertors) {
-        var info = node.info.trim().toLowerCase();
-        var customConvertor = convertors[info];
+        var _a = node, sourcepos = _a.sourcepos, info = _a.info;
+        var nomalizedInfo = info.trim().toLowerCase();
+        var customConvertor = convertors[nomalizedInfo];
+        var entering = context.entering;
         if (customConvertor) {
-            return customConvertor(node, context);
-        }
-        return {
-            type: context.entering ? 'openTag' : 'closeTag',
-            tagName: 'span',
-        };
+            try {
+                return customConvertor(node, context);
+            }
+            catch (e) {
+                console.warn("[@toast-ui/editor] - The error occurred when " + nomalizedInfo + " inline node was parsed in markdown renderer: " + e);
+            }
+        }
+        var text = sourcepos[1][1] - sourcepos[0][1] + 1 === info.length + CUSTOM_SYNTAX_LENGTH
+            ? ''
+            : info + " ";
+        return entering
+            ? [
+                { type: 'openTag', tagName: 'span' },
+                { type: 'text', content: "$$" + text },
+            ]
+            : [
+                { type: 'text', content: '$$' },
+                { type: 'closeTag', tagName: 'span' },
+            ];
     },
 };
 
@@ -13422,8 +13497,8 @@ var Renderer = /** @class */ (function () {
                     ? nodeType.toLowerCase()
                     : nodeType;
                 if (orgConvertor) {
-                    convertors[convertorType] = function (node, context) {
-                        context.origin = function () { return orgConvertor(node, context); };
+                    convertors[convertorType] = function (node, context, convertors) {
+                        context.origin = function () { return orgConvertor(node, context, convertors); };
                         return convertor(node, context);
                     };
                 }
@@ -13568,216 +13643,1527 @@ var Renderer = /** @class */ (function () {
     return Renderer;
 }());
 
-var reHTMLAttr = new RegExp('^(abbr|align|alt|axis|bgcolor|border|cellpadding|cellspacing|class|clear|' +
-    'color|cols|compact|coords|dir|face|headers|height|hreflang|hspace|' +
-    'ismap|lang|language|nohref|nowrap|rel|rev|rows|rules|' +
-    'scope|scrolling|shape|size|span|start|summary|tabindex|target|title|type|' +
-    'valign|value|vspace|width|checked|mathvariant|encoding|id|name|' +
-    'background|cite|href|longdesc|src|usemap|xlink:href|data-+|checked|style)', 'g');
-var reSvgAttr = new RegExp('^(accent-height|accumulate|additive|alphabetic|arabic-form|ascent|' +
-    'baseProfile|bbox|begin|by|calcMode|cap-height|class|color|color-rendering|content|' +
-    'cx|cy|d|dx|dy|descent|display|dur|end|fill|fill-rule|font-family|font-size|font-stretch|' +
-    'font-style|font-variant|font-weight|from|fx|fy|g1|g2|glyph-name|gradientUnits|hanging|' +
-    'height|horiz-adv-x|horiz-origin-x|ideographic|k|keyPoints|keySplines|keyTimes|lang|' +
-    'marker-end|marker-mid|marker-start|markerHeight|markerUnits|markerWidth|mathematical|' +
-    'max|min|offset|opacity|orient|origin|overline-position|overline-thickness|panose-1|' +
-    'path|pathLength|points|preserveAspectRatio|r|refX|refY|repeatCount|repeatDur|' +
-    'requiredExtensions|requiredFeatures|restart|rotate|rx|ry|slope|stemh|stemv|stop-color|' +
-    'stop-opacity|strikethrough-position|strikethrough-thickness|stroke|stroke-dasharray|' +
-    'stroke-dashoffset|stroke-linecap|stroke-linejoin|stroke-miterlimit|stroke-opacity|' +
-    'stroke-width|systemLanguage|target|text-anchor|to|transform|type|u1|u2|underline-position|' +
-    'underline-thickness|unicode|unicode-range|units-per-em|values|version|viewBox|visibility|' +
-    'width|widths|x|x-height|x1|x2|xlink:actuate|xlink:arcrole|xlink:role|xlink:show|xlink:title|' +
-    'xlink:type|xml:base|xml:lang|xml:space|xmlns|xmlns:xlink|y|y1|y2|zoomAndPan)', 'g');
-var reXSSAttr = /href|src|background/i;
-var reXSSAttrValue = /((java|vb|live)script|x):/i;
-var reOnEvent = /^on\S+/i;
-var reXSSOnload = new RegExp("(<" + TAG_NAME + "[^>]*)(onload\\s*=)", 'ig');
-var reComment = /<!--[\s\S]*?-->/g;
-var reWhitespace = /[ \t\r\n]/g;
-var DEFAULT_TAG_BLACK_LIST = [
-    'script',
-    'iframe',
-    'textarea',
-    'form',
-    'button',
-    'select',
-    'input',
-    'meta',
-    'style',
-    'link',
-    'title',
-    'embed',
-    'object',
-    'details',
-    'summary',
-    'base',
-];
-var CAN_BE_TAG_WHITE_LIST = ['iframe', 'embed', 'details', 'summary'];
-var tagBlacklist = __spreadArray$1([], DEFAULT_TAG_BLACK_LIST);
-function registerTagWhitelistIfPossible(tagName) {
-    if (includes(CAN_BE_TAG_WHITE_LIST, tagName)) {
-        var index = tagBlacklist.indexOf(tagName);
-        if (index > -1) {
-            tagBlacklist.splice(index, 1);
-        }
-    }
-}
-function sanitizeHTML(html) {
-    var root = document.createElement('div');
-    if (isString_1(html)) {
-        html = html.replace(reComment, '').replace(reXSSOnload, '$1');
-        root.innerHTML = html;
-    }
-    removeUnnecessaryTags(root);
-    leaveOnlyWhitelistAttribute(root);
-    return finalizeHtml(root, true);
-}
-function removeUnnecessaryTags(html) {
-    var removedTags = findNodes(html, tagBlacklist.join(','));
-    removedTags.forEach(function (node) {
-        removeNode$1(node);
-    });
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var hasOwnProperty = Object.hasOwnProperty,
+    setPrototypeOf = Object.setPrototypeOf,
+    isFrozen = Object.isFrozen,
+    getPrototypeOf = Object.getPrototypeOf,
+    getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+var freeze = Object.freeze,
+    seal = Object.seal,
+    create = Object.create; // eslint-disable-line import/no-mutable-exports
+
+var _ref = typeof Reflect !== 'undefined' && Reflect,
+    apply = _ref.apply,
+    construct = _ref.construct;
+
+if (!apply) {
+  apply = function apply(fun, thisValue, args) {
+    return fun.apply(thisValue, args);
+  };
 }
-function isXSSAttribute(attrName, attrValue) {
-    return attrName.match(reXSSAttr) && attrValue.replace(reWhitespace, '').match(reXSSAttrValue);
+
+if (!freeze) {
+  freeze = function freeze(x) {
+    return x;
+  };
 }
-function removeBlacklistAttributes(node, blacklistAttrs) {
-    blacklistAttrs.forEach(function (_a) {
-        var name = _a.name;
-        if (reOnEvent.test(name)) {
-            node[name] = null;
-        }
-        node.removeAttribute(name);
-    });
+
+if (!seal) {
+  seal = function seal(x) {
+    return x;
+  };
 }
-function leaveOnlyWhitelistAttribute(html) {
-    findNodes(html, '*').forEach(function (node) {
-        var attributes = node.attributes;
-        var blacklist = toArray_1(attributes).filter(function (attr) {
-            var name = attr.name, value = attr.value;
-            var htmlAttr = name.match(reHTMLAttr);
-            var svgAttr = name.match(reSvgAttr);
-            var xssAttr = htmlAttr && isXSSAttribute(name, value);
-            return (!htmlAttr && !svgAttr) || xssAttr;
-        });
-        removeBlacklistAttributes(node, blacklist);
-    });
+
+if (!construct) {
+  construct = function construct(Func, args) {
+    return new (Function.prototype.bind.apply(Func, [null].concat(_toConsumableArray(args))))();
+  };
 }
-function sanitizeXSSAttributeValue(attrValue) {
-    attrValue = attrValue.replace(reComment, '');
-    return reXSSAttrValue.test(attrValue) ? '' : attrValue;
+
+var arrayForEach = unapply(Array.prototype.forEach);
+var arrayPop = unapply(Array.prototype.pop);
+var arrayPush = unapply(Array.prototype.push);
+
+var stringToLowerCase = unapply(String.prototype.toLowerCase);
+var stringMatch = unapply(String.prototype.match);
+var stringReplace = unapply(String.prototype.replace);
+var stringIndexOf = unapply(String.prototype.indexOf);
+var stringTrim = unapply(String.prototype.trim);
+
+var regExpTest = unapply(RegExp.prototype.test);
+
+var typeErrorCreate = unconstruct(TypeError);
+
+function unapply(func) {
+  return function (thisArg) {
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return apply(func, thisArg, args);
+  };
 }
 
-function getChildrenHTML(node, typeName) {
-    return node
-        .literal.replace(new RegExp("(<\\s*" + typeName + "[^>]+?>)|(</" + typeName + "\\s*[>])", 'ig'), '')
-        .trim();
+function unconstruct(func) {
+  return function () {
+    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return construct(func, args);
+  };
 }
-function getHTMLAttrsByHTMLString(html) {
-    html = html.match(reHTMLTag)[0];
-    var attrs = html.match(new RegExp(ATTRIBUTE$1, 'g'));
-    return attrs
-        ? attrs.reduce(function (acc, attr) {
-            var _a = attr.trim().split('='), name = _a[0], values = _a.slice(1);
-            if (values.length) {
-                acc[name] = values.join('=').replace(/'|"/g, '').trim();
-            }
-            return acc;
-        }, {})
-        : {};
+
+/* Add properties to a lookup table */
+function addToSet(set, array) {
+  if (setPrototypeOf) {
+    // Make 'in' and truthy checks like Boolean(set.constructor)
+    // independent of any properties defined on Object.prototype.
+    // Prevent prototype setters from intercepting set as a this value.
+    setPrototypeOf(set, null);
+  }
+
+  var l = array.length;
+  while (l--) {
+    var element = array[l];
+    if (typeof element === 'string') {
+      var lcElement = stringToLowerCase(element);
+      if (lcElement !== element) {
+        // Config presets (e.g. tags.js, attrs.js) are immutable.
+        if (!isFrozen(array)) {
+          array[l] = lcElement;
+        }
+
+        element = lcElement;
+      }
+    }
+
+    set[element] = true;
+  }
+
+  return set;
 }
-function getHTMLAttrs(dom) {
-    return toArray_1(dom.attributes).reduce(function (acc, attr) {
-        acc[attr.nodeName] = attr.nodeValue;
-        return acc;
-    }, {});
+
+/* Shallow clone an object */
+function clone(object) {
+  var newObject = create(null);
+
+  var property = void 0;
+  for (property in object) {
+    if (apply(hasOwnProperty, object, [property])) {
+      newObject[property] = object[property];
+    }
+  }
+
+  return newObject;
 }
-function sanitizeDOM(node, typeName, sanitizer, wwToDOMAdaptor) {
-    var dom = wwToDOMAdaptor.getToDOMNode(typeName)(node);
-    var html = sanitizer(dom.outerHTML);
-    var container = document.createElement('div');
-    container.innerHTML = html;
-    dom = container.firstChild;
-    var htmlAttrs = getHTMLAttrs(dom);
-    return { dom: dom, htmlAttrs: htmlAttrs };
+
+/* IE10 doesn't support __lookupGetter__ so lets'
+ * simulate it. It also automatically checks
+ * if the prop is function or getter and behaves
+ * accordingly. */
+function lookupGetter(object, prop) {
+  while (object !== null) {
+    var desc = getOwnPropertyDescriptor(object, prop);
+    if (desc) {
+      if (desc.get) {
+        return unapply(desc.get);
+      }
+
+      if (typeof desc.value === 'function') {
+        return unapply(desc.value);
+      }
+    }
+
+    object = getPrototypeOf(object);
+  }
+
+  function fallbackValue(element) {
+    console.warn('fallback value for', element);
+    return null;
+  }
+
+  return fallbackValue;
 }
-var schemaFactory = {
-    htmlBlock: function (typeName, sanitizeHTML, wwToDOMAdaptor) {
-        return {
-            atom: true,
-            content: 'block+',
-            group: 'block',
-            attrs: {
-                htmlAttrs: { default: {} },
-                childrenHTML: { default: '' },
-                htmlBlock: { default: true },
-            },
-            parseDOM: [
-                {
-                    tag: typeName,
-                    getAttrs: function (dom) {
-                        return {
-                            htmlAttrs: getHTMLAttrs(dom),
-                            childrenHTML: dom.innerHTML,
-                        };
-                    },
-                },
-            ],
-            toDOM: function (node) {
-                var _a = sanitizeDOM(node, typeName, sanitizeHTML, wwToDOMAdaptor), dom = _a.dom, htmlAttrs = _a.htmlAttrs;
-                htmlAttrs.class = htmlAttrs.class ? htmlAttrs.class + " html-block" : 'html-block';
-                return __spreadArray$1([typeName, htmlAttrs], toArray_1(dom.childNodes));
-            },
-        };
-    },
-    htmlInline: function (typeName, sanitizeHTML, wwToDOMAdaptor) {
-        return {
-            attrs: {
-                htmlAttrs: { default: {} },
-                htmlInline: { default: true },
-            },
-            parseDOM: [
-                {
-                    tag: typeName,
-                    getAttrs: function (dom) {
-                        return {
-                            htmlAttrs: getHTMLAttrs(dom),
-                        };
-                    },
-                },
-            ],
-            toDOM: function (node) {
-                var htmlAttrs = sanitizeDOM(node, typeName, sanitizeHTML, wwToDOMAdaptor).htmlAttrs;
-                return [typeName, htmlAttrs, 0];
-            },
-        };
-    },
+
+var html$2 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
+
+// SVG
+var svg = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+
+var svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
+
+// List of SVG elements that are disallowed by default.
+// We still need to know them so that we can do namespace
+// checks properly in case one wants to add them to
+// allow-list.
+var svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'fedropshadow', 'feimage', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);
+
+var mathMl = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover']);
+
+// Similarly to SVG, we want to know all MathML elements,
+// even those that we disallow by default.
+var mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
+
+var text = freeze(['#text']);
+
+var html$1$1 = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'xmlns', 'slot']);
+
+var svg$1 = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'targetx', 'targety', 'transform', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
+
+var mathMl$1 = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
+
+var xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
+
+// eslint-disable-next-line unicorn/better-regex
+var MUSTACHE_EXPR = seal(/\{\{[\s\S]*|[\s\S]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
+var ERB_EXPR = seal(/<%[\s\S]*|[\s\S]*%>/gm);
+var DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]/); // eslint-disable-line no-useless-escape
+var ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
+var IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
+);
+var IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i);
+var ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex
+);
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var getGlobal = function getGlobal() {
+  return typeof window === 'undefined' ? null : window;
 };
-function createHTMLSchemaMap(convertorMap, sanitizeHTML, wwToDOMAdaptor) {
-    var htmlSchemaMap = { nodes: {}, marks: {} };
-    ['htmlBlock', 'htmlInline'].forEach(function (htmlType) {
-        if (convertorMap[htmlType]) {
-            Object.keys(convertorMap[htmlType]).forEach(function (type) {
-                var targetType = htmlType === 'htmlBlock' ? 'nodes' : 'marks';
-                // register tag white list for preventing to remove the html in sanitizer
-                registerTagWhitelistIfPossible(type);
-                htmlSchemaMap[targetType][type] = schemaFactory[htmlType](type, sanitizeHTML, wwToDOMAdaptor);
-            });
-        }
+
+/**
+ * Creates a no-op policy for internal use only.
+ * Don't export this function outside this module!
+ * @param {?TrustedTypePolicyFactory} trustedTypes The policy factory.
+ * @param {Document} document The document object (to determine policy name suffix)
+ * @return {?TrustedTypePolicy} The policy created (or null, if Trusted Types
+ * are not supported).
+ */
+var _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, document) {
+  if ((typeof trustedTypes === 'undefined' ? 'undefined' : _typeof(trustedTypes)) !== 'object' || typeof trustedTypes.createPolicy !== 'function') {
+    return null;
+  }
+
+  // Allow the callers to control the unique policy name
+  // by adding a data-tt-policy-suffix to the script element with the DOMPurify.
+  // Policy creation with duplicate names throws in Trusted Types.
+  var suffix = null;
+  var ATTR_NAME = 'data-tt-policy-suffix';
+  if (document.currentScript && document.currentScript.hasAttribute(ATTR_NAME)) {
+    suffix = document.currentScript.getAttribute(ATTR_NAME);
+  }
+
+  var policyName = 'dompurify' + (suffix ? '#' + suffix : '');
+
+  try {
+    return trustedTypes.createPolicy(policyName, {
+      createHTML: function createHTML(html$$1) {
+        return html$$1;
+      }
     });
-    return htmlSchemaMap;
-}
+  } catch (_) {
+    // Policy creation failed (most likely another DOMPurify script has
+    // already run). Skip creating the policy, as this will only cause errors
+    // if TT are enforced.
+    console.warn('TrustedTypes policy ' + policyName + ' could not be created.');
+    return null;
+  }
+};
 
-var reCloseTag = /^\s*<\s*\//;
-var baseConvertors = {
-    paragraph: function (_, _a) {
-        var entering = _a.entering, origin = _a.origin, options = _a.options;
-        if (options.nodeId) {
-            return {
-                type: entering ? 'openTag' : 'closeTag',
-                outerNewLine: true,
-                tagName: 'p',
+function createDOMPurify() {
+  var window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
+
+  var DOMPurify = function DOMPurify(root) {
+    return createDOMPurify(root);
+  };
+
+  /**
+   * Version label, exposed for easier checks
+   * if DOMPurify is up to date or not
+   */
+  DOMPurify.version = '2.3.3';
+
+  /**
+   * Array of elements that DOMPurify removed during sanitation.
+   * Empty if nothing was removed.
+   */
+  DOMPurify.removed = [];
+
+  if (!window || !window.document || window.document.nodeType !== 9) {
+    // Not running in a browser, provide a factory function
+    // so that you can pass your own Window
+    DOMPurify.isSupported = false;
+
+    return DOMPurify;
+  }
+
+  var originalDocument = window.document;
+
+  var document = window.document;
+  var DocumentFragment = window.DocumentFragment,
+      HTMLTemplateElement = window.HTMLTemplateElement,
+      Node = window.Node,
+      Element = window.Element,
+      NodeFilter = window.NodeFilter,
+      _window$NamedNodeMap = window.NamedNodeMap,
+      NamedNodeMap = _window$NamedNodeMap === undefined ? window.NamedNodeMap || window.MozNamedAttrMap : _window$NamedNodeMap,
+      Text = window.Text,
+      Comment = window.Comment,
+      DOMParser = window.DOMParser,
+      trustedTypes = window.trustedTypes;
+
+
+  var ElementPrototype = Element.prototype;
+
+  var cloneNode = lookupGetter(ElementPrototype, 'cloneNode');
+  var getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');
+  var getChildNodes = lookupGetter(ElementPrototype, 'childNodes');
+  var getParentNode = lookupGetter(ElementPrototype, 'parentNode');
+
+  // As per issue #47, the web-components registry is inherited by a
+  // new document created via createHTMLDocument. As per the spec
+  // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)
+  // a new empty registry is used when creating a template contents owner
+  // document, so we use that as our parent document to ensure nothing
+  // is inherited.
+  if (typeof HTMLTemplateElement === 'function') {
+    var template = document.createElement('template');
+    if (template.content && template.content.ownerDocument) {
+      document = template.content.ownerDocument;
+    }
+  }
+
+  var trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, originalDocument);
+  var emptyHTML = trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML('') : '';
+
+  var _document = document,
+      implementation = _document.implementation,
+      createNodeIterator = _document.createNodeIterator,
+      createDocumentFragment = _document.createDocumentFragment,
+      getElementsByTagName = _document.getElementsByTagName;
+  var importNode = originalDocument.importNode;
+
+
+  var documentMode = {};
+  try {
+    documentMode = clone(document).documentMode ? document.documentMode : {};
+  } catch (_) {}
+
+  var hooks = {};
+
+  /**
+   * Expose whether this browser supports running the full DOMPurify.
+   */
+  DOMPurify.isSupported = typeof getParentNode === 'function' && implementation && typeof implementation.createHTMLDocument !== 'undefined' && documentMode !== 9;
+
+  var MUSTACHE_EXPR$$1 = MUSTACHE_EXPR,
+      ERB_EXPR$$1 = ERB_EXPR,
+      DATA_ATTR$$1 = DATA_ATTR,
+      ARIA_ATTR$$1 = ARIA_ATTR,
+      IS_SCRIPT_OR_DATA$$1 = IS_SCRIPT_OR_DATA,
+      ATTR_WHITESPACE$$1 = ATTR_WHITESPACE;
+  var IS_ALLOWED_URI$$1 = IS_ALLOWED_URI;
+
+  /**
+   * We consider the elements and attributes below to be safe. Ideally
+   * don't add any new ones but feel free to remove unwanted ones.
+   */
+
+  /* allowed element names */
+
+  var ALLOWED_TAGS = null;
+  var DEFAULT_ALLOWED_TAGS = addToSet({}, [].concat(_toConsumableArray$1(html$2), _toConsumableArray$1(svg), _toConsumableArray$1(svgFilters), _toConsumableArray$1(mathMl), _toConsumableArray$1(text)));
+
+  /* Allowed attribute names */
+  var ALLOWED_ATTR = null;
+  var DEFAULT_ALLOWED_ATTR = addToSet({}, [].concat(_toConsumableArray$1(html$1$1), _toConsumableArray$1(svg$1), _toConsumableArray$1(mathMl$1), _toConsumableArray$1(xml)));
+
+  /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */
+  var FORBID_TAGS = null;
+
+  /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
+  var FORBID_ATTR = null;
+
+  /* Decide if ARIA attributes are okay */
+  var ALLOW_ARIA_ATTR = true;
+
+  /* Decide if custom data attributes are okay */
+  var ALLOW_DATA_ATTR = true;
+
+  /* Decide if unknown protocols are okay */
+  var ALLOW_UNKNOWN_PROTOCOLS = false;
+
+  /* Output should be safe for common template engines.
+   * This means, DOMPurify removes data attributes, mustaches and ERB
+   */
+  var SAFE_FOR_TEMPLATES = false;
+
+  /* Decide if document with <html>... should be returned */
+  var WHOLE_DOCUMENT = false;
+
+  /* Track whether config is already set on this instance of DOMPurify. */
+  var SET_CONFIG = false;
+
+  /* Decide if all elements (e.g. style, script) must be children of
+   * document.body. By default, browsers might move them to document.head */
+  var FORCE_BODY = false;
+
+  /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html
+   * string (or a TrustedHTML object if Trusted Types are supported).
+   * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead
+   */
+  var RETURN_DOM = false;
+
+  /* Decide if a DOM `DocumentFragment` should be returned, instead of a html
+   * string  (or a TrustedHTML object if Trusted Types are supported) */
+  var RETURN_DOM_FRAGMENT = false;
+
+  /* If `RETURN_DOM` or `RETURN_DOM_FRAGMENT` is enabled, decide if the returned DOM
+   * `Node` is imported into the current `Document`. If this flag is not enabled the
+   * `Node` will belong (its ownerDocument) to a fresh `HTMLDocument`, created by
+   * DOMPurify.
+   *
+   * This defaults to `true` starting DOMPurify 2.2.0. Note that setting it to `false`
+   * might cause XSS from attacks hidden in closed shadowroots in case the browser
+   * supports Declarative Shadow: DOM https://web.dev/declarative-shadow-dom/
+   */
+  var RETURN_DOM_IMPORT = true;
+
+  /* Try to return a Trusted Type object instead of a string, return a string in
+   * case Trusted Types are not supported  */
+  var RETURN_TRUSTED_TYPE = false;
+
+  /* Output should be free from DOM clobbering attacks? */
+  var SANITIZE_DOM = true;
+
+  /* Keep element content when removing element? */
+  var KEEP_CONTENT = true;
+
+  /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead
+   * of importing it into a new Document and returning a sanitized copy */
+  var IN_PLACE = false;
+
+  /* Allow usage of profiles like html, svg and mathMl */
+  var USE_PROFILES = {};
+
+  /* Tags to ignore content of when KEEP_CONTENT is true */
+  var FORBID_CONTENTS = null;
+  var DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);
+
+  /* Tags that are safe for data: URIs */
+  var DATA_URI_TAGS = null;
+  var DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);
+
+  /* Attributes safe for values like "javascript:" */
+  var URI_SAFE_ATTRIBUTES = null;
+  var DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);
+
+  var MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+  var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+  var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+  /* Document namespace */
+  var NAMESPACE = HTML_NAMESPACE;
+  var IS_EMPTY_INPUT = false;
+
+  /* Parsing of strict XHTML documents */
+  var PARSER_MEDIA_TYPE = void 0;
+  var SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];
+  var DEFAULT_PARSER_MEDIA_TYPE = 'text/html';
+  var transformCaseFunc = void 0;
+
+  /* Keep a reference to config to pass to hooks */
+  var CONFIG = null;
+
+  /* Ideally, do not touch anything below this line */
+  /* ______________________________________________ */
+
+  var formElement = document.createElement('form');
+
+  /**
+   * _parseConfig
+   *
+   * @param  {Object} cfg optional config literal
+   */
+  // eslint-disable-next-line complexity
+  var _parseConfig = function _parseConfig(cfg) {
+    if (CONFIG && CONFIG === cfg) {
+      return;
+    }
+
+    /* Shield configuration object from tampering */
+    if (!cfg || (typeof cfg === 'undefined' ? 'undefined' : _typeof(cfg)) !== 'object') {
+      cfg = {};
+    }
+
+    /* Shield configuration object from prototype pollution */
+    cfg = clone(cfg);
+
+    /* Set configuration parameters */
+    ALLOWED_TAGS = 'ALLOWED_TAGS' in cfg ? addToSet({}, cfg.ALLOWED_TAGS) : DEFAULT_ALLOWED_TAGS;
+    ALLOWED_ATTR = 'ALLOWED_ATTR' in cfg ? addToSet({}, cfg.ALLOWED_ATTR) : DEFAULT_ALLOWED_ATTR;
+    URI_SAFE_ATTRIBUTES = 'ADD_URI_SAFE_ATTR' in cfg ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR) : DEFAULT_URI_SAFE_ATTRIBUTES;
+    DATA_URI_TAGS = 'ADD_DATA_URI_TAGS' in cfg ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS) : DEFAULT_DATA_URI_TAGS;
+    FORBID_CONTENTS = 'FORBID_CONTENTS' in cfg ? addToSet({}, cfg.FORBID_CONTENTS) : DEFAULT_FORBID_CONTENTS;
+    FORBID_TAGS = 'FORBID_TAGS' in cfg ? addToSet({}, cfg.FORBID_TAGS) : {};
+    FORBID_ATTR = 'FORBID_ATTR' in cfg ? addToSet({}, cfg.FORBID_ATTR) : {};
+    USE_PROFILES = 'USE_PROFILES' in cfg ? cfg.USE_PROFILES : false;
+    ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true
+    ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true
+    ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false
+    SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false
+    WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false
+    RETURN_DOM = cfg.RETURN_DOM || false; // Default false
+    RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false
+    RETURN_DOM_IMPORT = cfg.RETURN_DOM_IMPORT !== false; // Default true
+    RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false
+    FORCE_BODY = cfg.FORCE_BODY || false; // Default false
+    SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true
+    KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true
+    IN_PLACE = cfg.IN_PLACE || false; // Default false
+    IS_ALLOWED_URI$$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI$$1;
+    NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
+
+    PARSER_MEDIA_TYPE =
+    // eslint-disable-next-line unicorn/prefer-includes
+    SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? PARSER_MEDIA_TYPE = DEFAULT_PARSER_MEDIA_TYPE : PARSER_MEDIA_TYPE = cfg.PARSER_MEDIA_TYPE;
+
+    // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.
+    transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? function (x) {
+      return x;
+    } : stringToLowerCase;
+
+    if (SAFE_FOR_TEMPLATES) {
+      ALLOW_DATA_ATTR = false;
+    }
+
+    if (RETURN_DOM_FRAGMENT) {
+      RETURN_DOM = true;
+    }
+
+    /* Parse profile info */
+    if (USE_PROFILES) {
+      ALLOWED_TAGS = addToSet({}, [].concat(_toConsumableArray$1(text)));
+      ALLOWED_ATTR = [];
+      if (USE_PROFILES.html === true) {
+        addToSet(ALLOWED_TAGS, html$2);
+        addToSet(ALLOWED_ATTR, html$1$1);
+      }
+
+      if (USE_PROFILES.svg === true) {
+        addToSet(ALLOWED_TAGS, svg);
+        addToSet(ALLOWED_ATTR, svg$1);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+
+      if (USE_PROFILES.svgFilters === true) {
+        addToSet(ALLOWED_TAGS, svgFilters);
+        addToSet(ALLOWED_ATTR, svg$1);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+
+      if (USE_PROFILES.mathMl === true) {
+        addToSet(ALLOWED_TAGS, mathMl);
+        addToSet(ALLOWED_ATTR, mathMl$1);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+    }
+
+    /* Merge configuration parameters */
+    if (cfg.ADD_TAGS) {
+      if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
+        ALLOWED_TAGS = clone(ALLOWED_TAGS);
+      }
+
+      addToSet(ALLOWED_TAGS, cfg.ADD_TAGS);
+    }
+
+    if (cfg.ADD_ATTR) {
+      if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
+        ALLOWED_ATTR = clone(ALLOWED_ATTR);
+      }
+
+      addToSet(ALLOWED_ATTR, cfg.ADD_ATTR);
+    }
+
+    if (cfg.ADD_URI_SAFE_ATTR) {
+      addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR);
+    }
+
+    if (cfg.FORBID_CONTENTS) {
+      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
+        FORBID_CONTENTS = clone(FORBID_CONTENTS);
+      }
+
+      addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS);
+    }
+
+    /* Add #text in case KEEP_CONTENT is set to true */
+    if (KEEP_CONTENT) {
+      ALLOWED_TAGS['#text'] = true;
+    }
+
+    /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */
+    if (WHOLE_DOCUMENT) {
+      addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);
+    }
+
+    /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */
+    if (ALLOWED_TAGS.table) {
+      addToSet(ALLOWED_TAGS, ['tbody']);
+      delete FORBID_TAGS.tbody;
+    }
+
+    // Prevent further manipulation of configuration.
+    // Not available in IE8, Safari 5, etc.
+    if (freeze) {
+      freeze(cfg);
+    }
+
+    CONFIG = cfg;
+  };
+
+  var MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);
+
+  var HTML_INTEGRATION_POINTS = addToSet({}, ['foreignobject', 'desc', 'title', 'annotation-xml']);
+
+  /* Keep track of all possible SVG and MathML tags
+   * so that we can perform the namespace checks
+   * correctly. */
+  var ALL_SVG_TAGS = addToSet({}, svg);
+  addToSet(ALL_SVG_TAGS, svgFilters);
+  addToSet(ALL_SVG_TAGS, svgDisallowed);
+
+  var ALL_MATHML_TAGS = addToSet({}, mathMl);
+  addToSet(ALL_MATHML_TAGS, mathMlDisallowed);
+
+  /**
+   *
+   *
+   * @param  {Element} element a DOM element whose namespace is being checked
+   * @returns {boolean} Return false if the element has a
+   *  namespace that a spec-compliant parser would never
+   *  return. Return true otherwise.
+   */
+  var _checkValidNamespace = function _checkValidNamespace(element) {
+    var parent = getParentNode(element);
+
+    // In JSDOM, if we're inside shadow DOM, then parentNode
+    // can be null. We just simulate parent in this case.
+    if (!parent || !parent.tagName) {
+      parent = {
+        namespaceURI: HTML_NAMESPACE,
+        tagName: 'template'
+      };
+    }
+
+    var tagName = stringToLowerCase(element.tagName);
+    var parentTagName = stringToLowerCase(parent.tagName);
+
+    if (element.namespaceURI === SVG_NAMESPACE) {
+      // The only way to switch from HTML namespace to SVG
+      // is via <svg>. If it happens via any other tag, then
+      // it should be killed.
+      if (parent.namespaceURI === HTML_NAMESPACE) {
+        return tagName === 'svg';
+      }
+
+      // The only way to switch from MathML to SVG is via
+      // svg if parent is either <annotation-xml> or MathML
+      // text integration points.
+      if (parent.namespaceURI === MATHML_NAMESPACE) {
+        return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);
+      }
+
+      // We only allow elements that are defined in SVG
+      // spec. All others are disallowed in SVG namespace.
+      return Boolean(ALL_SVG_TAGS[tagName]);
+    }
+
+    if (element.namespaceURI === MATHML_NAMESPACE) {
+      // The only way to switch from HTML namespace to MathML
+      // is via <math>. If it happens via any other tag, then
+      // it should be killed.
+      if (parent.namespaceURI === HTML_NAMESPACE) {
+        return tagName === 'math';
+      }
+
+      // The only way to switch from SVG to MathML is via
+      // <math> and HTML integration points
+      if (parent.namespaceURI === SVG_NAMESPACE) {
+        return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];
+      }
+
+      // We only allow elements that are defined in MathML
+      // spec. All others are disallowed in MathML namespace.
+      return Boolean(ALL_MATHML_TAGS[tagName]);
+    }
+
+    if (element.namespaceURI === HTML_NAMESPACE) {
+      // The only way to switch from SVG to HTML is via
+      // HTML integration points, and from MathML to HTML
+      // is via MathML text integration points
+      if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
+        return false;
+      }
+
+      if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
+        return false;
+      }
+
+      // Certain elements are allowed in both SVG and HTML
+      // namespace. We need to specify them explicitly
+      // so that they don't get erronously deleted from
+      // HTML namespace.
+      var commonSvgAndHTMLElements = addToSet({}, ['title', 'style', 'font', 'a', 'script']);
+
+      // We disallow tags that are specific for MathML
+      // or SVG and should never appear in HTML namespace
+      return !ALL_MATHML_TAGS[tagName] && (commonSvgAndHTMLElements[tagName] || !ALL_SVG_TAGS[tagName]);
+    }
+
+    // The code should never reach this place (this means
+    // that the element somehow got namespace that is not
+    // HTML, SVG or MathML). Return false just in case.
+    return false;
+  };
+
+  /**
+   * _forceRemove
+   *
+   * @param  {Node} node a DOM node
+   */
+  var _forceRemove = function _forceRemove(node) {
+    arrayPush(DOMPurify.removed, { element: node });
+    try {
+      // eslint-disable-next-line unicorn/prefer-dom-node-remove
+      node.parentNode.removeChild(node);
+    } catch (_) {
+      try {
+        node.outerHTML = emptyHTML;
+      } catch (_) {
+        node.remove();
+      }
+    }
+  };
+
+  /**
+   * _removeAttribute
+   *
+   * @param  {String} name an Attribute name
+   * @param  {Node} node a DOM node
+   */
+  var _removeAttribute = function _removeAttribute(name, node) {
+    try {
+      arrayPush(DOMPurify.removed, {
+        attribute: node.getAttributeNode(name),
+        from: node
+      });
+    } catch (_) {
+      arrayPush(DOMPurify.removed, {
+        attribute: null,
+        from: node
+      });
+    }
+
+    node.removeAttribute(name);
+
+    // We void attribute values for unremovable "is"" attributes
+    if (name === 'is' && !ALLOWED_ATTR[name]) {
+      if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
+        try {
+          _forceRemove(node);
+        } catch (_) {}
+      } else {
+        try {
+          node.setAttribute(name, '');
+        } catch (_) {}
+      }
+    }
+  };
+
+  /**
+   * _initDocument
+   *
+   * @param  {String} dirty a string of dirty markup
+   * @return {Document} a DOM, filled with the dirty markup
+   */
+  var _initDocument = function _initDocument(dirty) {
+    /* Create a HTML document */
+    var doc = void 0;
+    var leadingWhitespace = void 0;
+
+    if (FORCE_BODY) {
+      dirty = '<remove></remove>' + dirty;
+    } else {
+      /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */
+      var matches = stringMatch(dirty, /^[\r\n\t ]+/);
+      leadingWhitespace = matches && matches[0];
+    }
+
+    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml') {
+      // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)
+      dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>';
+    }
+
+    var dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;
+    /*
+     * Use the DOMParser API by default, fallback later if needs be
+     * DOMParser not work for svg when has multiple root element.
+     */
+    if (NAMESPACE === HTML_NAMESPACE) {
+      try {
+        doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);
+      } catch (_) {}
+    }
+
+    /* Use createHTMLDocument in case DOMParser is not available */
+    if (!doc || !doc.documentElement) {
+      doc = implementation.createDocument(NAMESPACE, 'template', null);
+      try {
+        doc.documentElement.innerHTML = IS_EMPTY_INPUT ? '' : dirtyPayload;
+      } catch (_) {
+        // Syntax error if dirtyPayload is invalid xml
+      }
+    }
+
+    var body = doc.body || doc.documentElement;
+
+    if (dirty && leadingWhitespace) {
+      body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
+    }
+
+    /* Work on whole document or just its body */
+    if (NAMESPACE === HTML_NAMESPACE) {
+      return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];
+    }
+
+    return WHOLE_DOCUMENT ? doc.documentElement : body;
+  };
+
+  /**
+   * _createIterator
+   *
+   * @param  {Document} root document/fragment to create iterator for
+   * @return {Iterator} iterator instance
+   */
+  var _createIterator = function _createIterator(root) {
+    return createNodeIterator.call(root.ownerDocument || root, root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, null, false);
+  };
+
+  /**
+   * _isClobbered
+   *
+   * @param  {Node} elm element to check for clobbering attacks
+   * @return {Boolean} true if clobbered, false if safe
+   */
+  var _isClobbered = function _isClobbered(elm) {
+    if (elm instanceof Text || elm instanceof Comment) {
+      return false;
+    }
+
+    if (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function') {
+      return true;
+    }
+
+    return false;
+  };
+
+  /**
+   * _isNode
+   *
+   * @param  {Node} obj object to check whether it's a DOM node
+   * @return {Boolean} true is object is a DOM node
+   */
+  var _isNode = function _isNode(object) {
+    return (typeof Node === 'undefined' ? 'undefined' : _typeof(Node)) === 'object' ? object instanceof Node : object && (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string';
+  };
+
+  /**
+   * _executeHook
+   * Execute user configurable hooks
+   *
+   * @param  {String} entryPoint  Name of the hook's entry point
+   * @param  {Node} currentNode node to work on with the hook
+   * @param  {Object} data additional hook parameters
+   */
+  var _executeHook = function _executeHook(entryPoint, currentNode, data) {
+    if (!hooks[entryPoint]) {
+      return;
+    }
+
+    arrayForEach(hooks[entryPoint], function (hook) {
+      hook.call(DOMPurify, currentNode, data, CONFIG);
+    });
+  };
+
+  /**
+   * _sanitizeElements
+   *
+   * @protect nodeName
+   * @protect textContent
+   * @protect removeChild
+   *
+   * @param   {Node} currentNode to check for permission to exist
+   * @return  {Boolean} true if node was killed, false if left alive
+   */
+  var _sanitizeElements = function _sanitizeElements(currentNode) {
+    var content = void 0;
+
+    /* Execute a hook if present */
+    _executeHook('beforeSanitizeElements', currentNode, null);
+
+    /* Check if element is clobbered or can clobber */
+    if (_isClobbered(currentNode)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Check if tagname contains Unicode */
+    if (stringMatch(currentNode.nodeName, /[\u0080-\uFFFF]/)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Now let's check the element's type and name */
+    var tagName = transformCaseFunc(currentNode.nodeName);
+
+    /* Execute a hook if present */
+    _executeHook('uponSanitizeElement', currentNode, {
+      tagName: tagName,
+      allowedTags: ALLOWED_TAGS
+    });
+
+    /* Detect mXSS attempts abusing namespace confusion */
+    if (!_isNode(currentNode.firstElementChild) && (!_isNode(currentNode.content) || !_isNode(currentNode.content.firstElementChild)) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Mitigate a problem with templates inside select */
+    if (tagName === 'select' && regExpTest(/<template/i, currentNode.innerHTML)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Remove element if anything forbids its presence */
+    if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+      /* Keep content except for bad-listed elements */
+      if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {
+        var parentNode = getParentNode(currentNode) || currentNode.parentNode;
+        var childNodes = getChildNodes(currentNode) || currentNode.childNodes;
+
+        if (childNodes && parentNode) {
+          var childCount = childNodes.length;
+
+          for (var i = childCount - 1; i >= 0; --i) {
+            parentNode.insertBefore(cloneNode(childNodes[i], true), getNextSibling(currentNode));
+          }
+        }
+      }
+
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Check whether element has a valid namespace */
+    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    if ((tagName === 'noscript' || tagName === 'noembed') && regExpTest(/<\/no(script|embed)/i, currentNode.innerHTML)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+
+    /* Sanitize element content to be template-safe */
+    if (SAFE_FOR_TEMPLATES && currentNode.nodeType === 3) {
+      /* Get the element's text content */
+      content = currentNode.textContent;
+      content = stringReplace(content, MUSTACHE_EXPR$$1, ' ');
+      content = stringReplace(content, ERB_EXPR$$1, ' ');
+      if (currentNode.textContent !== content) {
+        arrayPush(DOMPurify.removed, { element: currentNode.cloneNode() });
+        currentNode.textContent = content;
+      }
+    }
+
+    /* Execute a hook if present */
+    _executeHook('afterSanitizeElements', currentNode, null);
+
+    return false;
+  };
+
+  /**
+   * _isValidAttribute
+   *
+   * @param  {string} lcTag Lowercase tag name of containing element.
+   * @param  {string} lcName Lowercase attribute name.
+   * @param  {string} value Attribute value.
+   * @return {Boolean} Returns true if `value` is valid, otherwise false.
+   */
+  // eslint-disable-next-line complexity
+  var _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
+    /* Make sure attribute cannot clobber */
+    if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
+      return false;
+    }
+
+    /* Allow valid data-* attributes: At least one character after "-"
+        (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
+        XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
+        We don't need to check the value; it's always URI safe. */
+    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR$$1, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR$$1, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+      return false;
+
+      /* Check value is safe. First, is attr inert? If so, is safe */
+    } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$$1, stringReplace(value, ATTR_WHITESPACE$$1, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA$$1, stringReplace(value, ATTR_WHITESPACE$$1, ''))) ; else if (!value) ; else {
+      return false;
+    }
+
+    return true;
+  };
+
+  /**
+   * _sanitizeAttributes
+   *
+   * @protect attributes
+   * @protect nodeName
+   * @protect removeAttribute
+   * @protect setAttribute
+   *
+   * @param  {Node} currentNode to sanitize
+   */
+  var _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
+    var attr = void 0;
+    var value = void 0;
+    var lcName = void 0;
+    var l = void 0;
+    /* Execute a hook if present */
+    _executeHook('beforeSanitizeAttributes', currentNode, null);
+
+    var attributes = currentNode.attributes;
+
+    /* Check if we have attributes; if not we might have a text node */
+
+    if (!attributes) {
+      return;
+    }
+
+    var hookEvent = {
+      attrName: '',
+      attrValue: '',
+      keepAttr: true,
+      allowedAttributes: ALLOWED_ATTR
+    };
+    l = attributes.length;
+
+    /* Go backwards over all attributes; safely remove bad ones */
+    while (l--) {
+      attr = attributes[l];
+      var _attr = attr,
+          name = _attr.name,
+          namespaceURI = _attr.namespaceURI;
+
+      value = stringTrim(attr.value);
+      lcName = transformCaseFunc(name);
+
+      /* Execute a hook if present */
+      hookEvent.attrName = lcName;
+      hookEvent.attrValue = value;
+      hookEvent.keepAttr = true;
+      hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
+      _executeHook('uponSanitizeAttribute', currentNode, hookEvent);
+      value = hookEvent.attrValue;
+      /* Did the hooks approve of the attribute? */
+      if (hookEvent.forceKeepAttr) {
+        continue;
+      }
+
+      /* Remove attribute */
+      _removeAttribute(name, currentNode);
+
+      /* Did the hooks approve of the attribute? */
+      if (!hookEvent.keepAttr) {
+        continue;
+      }
+
+      /* Work around a security issue in jQuery 3.0 */
+      if (regExpTest(/\/>/i, value)) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+
+      /* Sanitize attribute content to be template-safe */
+      if (SAFE_FOR_TEMPLATES) {
+        value = stringReplace(value, MUSTACHE_EXPR$$1, ' ');
+        value = stringReplace(value, ERB_EXPR$$1, ' ');
+      }
+
+      /* Is `value` valid for this attribute? */
+      var lcTag = transformCaseFunc(currentNode.nodeName);
+      if (!_isValidAttribute(lcTag, lcName, value)) {
+        continue;
+      }
+
+      /* Handle invalid data-* attribute set by try-catching it */
+      try {
+        if (namespaceURI) {
+          currentNode.setAttributeNS(namespaceURI, name, value);
+        } else {
+          /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". */
+          currentNode.setAttribute(name, value);
+        }
+
+        arrayPop(DOMPurify.removed);
+      } catch (_) {}
+    }
+
+    /* Execute a hook if present */
+    _executeHook('afterSanitizeAttributes', currentNode, null);
+  };
+
+  /**
+   * _sanitizeShadowDOM
+   *
+   * @param  {DocumentFragment} fragment to iterate over recursively
+   */
+  var _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
+    var shadowNode = void 0;
+    var shadowIterator = _createIterator(fragment);
+
+    /* Execute a hook if present */
+    _executeHook('beforeSanitizeShadowDOM', fragment, null);
+
+    while (shadowNode = shadowIterator.nextNode()) {
+      /* Execute a hook if present */
+      _executeHook('uponSanitizeShadowNode', shadowNode, null);
+
+      /* Sanitize tags and elements */
+      if (_sanitizeElements(shadowNode)) {
+        continue;
+      }
+
+      /* Deep shadow DOM detected */
+      if (shadowNode.content instanceof DocumentFragment) {
+        _sanitizeShadowDOM(shadowNode.content);
+      }
+
+      /* Check attributes, sanitize if necessary */
+      _sanitizeAttributes(shadowNode);
+    }
+
+    /* Execute a hook if present */
+    _executeHook('afterSanitizeShadowDOM', fragment, null);
+  };
+
+  /**
+   * Sanitize
+   * Public method providing core sanitation functionality
+   *
+   * @param {String|Node} dirty string or DOM node
+   * @param {Object} configuration object
+   */
+  // eslint-disable-next-line complexity
+  DOMPurify.sanitize = function (dirty, cfg) {
+    var body = void 0;
+    var importedNode = void 0;
+    var currentNode = void 0;
+    var oldNode = void 0;
+    var returnNode = void 0;
+    /* Make sure we have a string to sanitize.
+      DO NOT return early, as this will return the wrong type if
+      the user has requested a DOM object rather than a string */
+    IS_EMPTY_INPUT = !dirty;
+    if (IS_EMPTY_INPUT) {
+      dirty = '<!-->';
+    }
+
+    /* Stringify, in case dirty is an object */
+    if (typeof dirty !== 'string' && !_isNode(dirty)) {
+      // eslint-disable-next-line no-negated-condition
+      if (typeof dirty.toString !== 'function') {
+        throw typeErrorCreate('toString is not a function');
+      } else {
+        dirty = dirty.toString();
+        if (typeof dirty !== 'string') {
+          throw typeErrorCreate('dirty is not a string, aborting');
+        }
+      }
+    }
+
+    /* Check we can run. Otherwise fall back or ignore */
+    if (!DOMPurify.isSupported) {
+      if (_typeof(window.toStaticHTML) === 'object' || typeof window.toStaticHTML === 'function') {
+        if (typeof dirty === 'string') {
+          return window.toStaticHTML(dirty);
+        }
+
+        if (_isNode(dirty)) {
+          return window.toStaticHTML(dirty.outerHTML);
+        }
+      }
+
+      return dirty;
+    }
+
+    /* Assign config vars */
+    if (!SET_CONFIG) {
+      _parseConfig(cfg);
+    }
+
+    /* Clean up removed elements */
+    DOMPurify.removed = [];
+
+    /* Check if dirty is correctly typed for IN_PLACE */
+    if (typeof dirty === 'string') {
+      IN_PLACE = false;
+    }
+
+    if (IN_PLACE) ; else if (dirty instanceof Node) {
+      /* If dirty is a DOM element, append to an empty document to avoid
+         elements being stripped by the parser */
+      body = _initDocument('<!---->');
+      importedNode = body.ownerDocument.importNode(dirty, true);
+      if (importedNode.nodeType === 1 && importedNode.nodeName === 'BODY') {
+        /* Node is already a body, use as is */
+        body = importedNode;
+      } else if (importedNode.nodeName === 'HTML') {
+        body = importedNode;
+      } else {
+        // eslint-disable-next-line unicorn/prefer-dom-node-append
+        body.appendChild(importedNode);
+      }
+    } else {
+      /* Exit directly if we have nothing to do */
+      if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&
+      // eslint-disable-next-line unicorn/prefer-includes
+      dirty.indexOf('<') === -1) {
+        return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;
+      }
+
+      /* Initialize the document to work on */
+      body = _initDocument(dirty);
+
+      /* Check we have a DOM node from the data */
+      if (!body) {
+        return RETURN_DOM ? null : emptyHTML;
+      }
+    }
+
+    /* Remove first element node (ours) if FORCE_BODY is set */
+    if (body && FORCE_BODY) {
+      _forceRemove(body.firstChild);
+    }
+
+    /* Get node iterator */
+    var nodeIterator = _createIterator(IN_PLACE ? dirty : body);
+
+    /* Now start iterating over the created document */
+    while (currentNode = nodeIterator.nextNode()) {
+      /* Fix IE's strange behavior with manipulated textNodes #89 */
+      if (currentNode.nodeType === 3 && currentNode === oldNode) {
+        continue;
+      }
+
+      /* Sanitize tags and elements */
+      if (_sanitizeElements(currentNode)) {
+        continue;
+      }
+
+      /* Shadow DOM detected, sanitize it */
+      if (currentNode.content instanceof DocumentFragment) {
+        _sanitizeShadowDOM(currentNode.content);
+      }
+
+      /* Check attributes, sanitize if necessary */
+      _sanitizeAttributes(currentNode);
+
+      oldNode = currentNode;
+    }
+
+    oldNode = null;
+
+    /* If we sanitized `dirty` in-place, return it. */
+    if (IN_PLACE) {
+      return dirty;
+    }
+
+    /* Return sanitized string or DOM */
+    if (RETURN_DOM) {
+      if (RETURN_DOM_FRAGMENT) {
+        returnNode = createDocumentFragment.call(body.ownerDocument);
+
+        while (body.firstChild) {
+          // eslint-disable-next-line unicorn/prefer-dom-node-append
+          returnNode.appendChild(body.firstChild);
+        }
+      } else {
+        returnNode = body;
+      }
+
+      if (RETURN_DOM_IMPORT) {
+        /*
+          AdoptNode() is not used because internal state is not reset
+          (e.g. the past names map of a HTMLFormElement), this is safe
+          in theory but we would rather not risk another attack vector.
+          The state that is cloned by importNode() is explicitly defined
+          by the specs.
+        */
+        returnNode = importNode.call(originalDocument, returnNode, true);
+      }
+
+      return returnNode;
+    }
+
+    var serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;
+
+    /* Sanitize final string template-safe */
+    if (SAFE_FOR_TEMPLATES) {
+      serializedHTML = stringReplace(serializedHTML, MUSTACHE_EXPR$$1, ' ');
+      serializedHTML = stringReplace(serializedHTML, ERB_EXPR$$1, ' ');
+    }
+
+    return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;
+  };
+
+  /**
+   * Public method to set the configuration once
+   * setConfig
+   *
+   * @param {Object} cfg configuration object
+   */
+  DOMPurify.setConfig = function (cfg) {
+    _parseConfig(cfg);
+    SET_CONFIG = true;
+  };
+
+  /**
+   * Public method to remove the configuration
+   * clearConfig
+   *
+   */
+  DOMPurify.clearConfig = function () {
+    CONFIG = null;
+    SET_CONFIG = false;
+  };
+
+  /**
+   * Public method to check if an attribute value is valid.
+   * Uses last set config, if any. Otherwise, uses config defaults.
+   * isValidAttribute
+   *
+   * @param  {string} tag Tag name of containing element.
+   * @param  {string} attr Attribute name.
+   * @param  {string} value Attribute value.
+   * @return {Boolean} Returns true if `value` is valid. Otherwise, returns false.
+   */
+  DOMPurify.isValidAttribute = function (tag, attr, value) {
+    /* Initialize shared config vars if necessary. */
+    if (!CONFIG) {
+      _parseConfig({});
+    }
+
+    var lcTag = transformCaseFunc(tag);
+    var lcName = transformCaseFunc(attr);
+    return _isValidAttribute(lcTag, lcName, value);
+  };
+
+  /**
+   * AddHook
+   * Public method to add DOMPurify hooks
+   *
+   * @param {String} entryPoint entry point for the hook to add
+   * @param {Function} hookFunction function to execute
+   */
+  DOMPurify.addHook = function (entryPoint, hookFunction) {
+    if (typeof hookFunction !== 'function') {
+      return;
+    }
+
+    hooks[entryPoint] = hooks[entryPoint] || [];
+    arrayPush(hooks[entryPoint], hookFunction);
+  };
+
+  /**
+   * RemoveHook
+   * Public method to remove a DOMPurify hook at a given entryPoint
+   * (pops it from the stack of hooks if more are present)
+   *
+   * @param {String} entryPoint entry point for the hook to remove
+   */
+  DOMPurify.removeHook = function (entryPoint) {
+    if (hooks[entryPoint]) {
+      arrayPop(hooks[entryPoint]);
+    }
+  };
+
+  /**
+   * RemoveHooks
+   * Public method to remove all DOMPurify hooks at a given entryPoint
+   *
+   * @param  {String} entryPoint entry point for the hooks to remove
+   */
+  DOMPurify.removeHooks = function (entryPoint) {
+    if (hooks[entryPoint]) {
+      hooks[entryPoint] = [];
+    }
+  };
+
+  /**
+   * RemoveAllHooks
+   * Public method to remove all DOMPurify hooks
+   *
+   */
+  DOMPurify.removeAllHooks = function () {
+    hooks = {};
+  };
+
+  return DOMPurify;
+}
+
+var purify = createDOMPurify();
+
+var CAN_BE_WHITE_TAG_LIST = ['iframe', 'embed'];
+var whiteTagList = [];
+function registerTagWhitelistIfPossible(tagName) {
+    if (includes(CAN_BE_WHITE_TAG_LIST, tagName)) {
+        whiteTagList.push(tagName.toLowerCase());
+    }
+}
+function sanitizeHTML(html, options) {
+    return purify.sanitize(html, __assign$1({ ADD_TAGS: whiteTagList, ADD_ATTR: ['rel', 'target', 'hreflang', 'type'], FORBID_TAGS: [
+            'input',
+            'script',
+            'textarea',
+            'form',
+            'button',
+            'select',
+            'meta',
+            'style',
+            'link',
+            'title',
+            'object',
+            'base',
+        ] }, options));
+}
+
+function getChildrenHTML(node, typeName) {
+    return node
+        .literal.replace(new RegExp("(<\\s*" + typeName + "[^>]+?>)|(</" + typeName + "\\s*[>])", 'ig'), '')
+        .trim();
+}
+function getHTMLAttrsByHTMLString(html) {
+    html = html.match(reHTMLTag)[0];
+    var attrs = html.match(new RegExp(ATTRIBUTE$1, 'g'));
+    return attrs
+        ? attrs.reduce(function (acc, attr) {
+            var _a = attr.trim().split('='), name = _a[0], values = _a.slice(1);
+            if (values.length) {
+                acc[name] = values.join('=').replace(/'|"/g, '').trim();
+            }
+            return acc;
+        }, {})
+        : {};
+}
+function getHTMLAttrs(dom) {
+    return toArray_1(dom.attributes).reduce(function (acc, attr) {
+        acc[attr.nodeName] = attr.nodeValue;
+        return acc;
+    }, {});
+}
+function sanitizeDOM(node, typeName, sanitizer, wwToDOMAdaptor) {
+    var dom = wwToDOMAdaptor.getToDOMNode(typeName)(node);
+    var html = sanitizer(dom.outerHTML);
+    var container = document.createElement('div');
+    container.innerHTML = html;
+    dom = container.firstChild;
+    var htmlAttrs = getHTMLAttrs(dom);
+    return { dom: dom, htmlAttrs: htmlAttrs };
+}
+var schemaFactory = {
+    htmlBlock: function (typeName, sanitizeHTML, wwToDOMAdaptor) {
+        return {
+            atom: true,
+            content: 'block+',
+            group: 'block',
+            attrs: {
+                htmlAttrs: { default: {} },
+                childrenHTML: { default: '' },
+                htmlBlock: { default: true },
+            },
+            parseDOM: [
+                {
+                    tag: typeName,
+                    getAttrs: function (dom) {
+                        return {
+                            htmlAttrs: getHTMLAttrs(dom),
+                            childrenHTML: dom.innerHTML,
+                        };
+                    },
+                },
+            ],
+            toDOM: function (node) {
+                var _a = sanitizeDOM(node, typeName, sanitizeHTML, wwToDOMAdaptor), dom = _a.dom, htmlAttrs = _a.htmlAttrs;
+                htmlAttrs.class = htmlAttrs.class ? htmlAttrs.class + " html-block" : 'html-block';
+                return __spreadArray$1([typeName, htmlAttrs], toArray_1(dom.childNodes));
+            },
+        };
+    },
+    htmlInline: function (typeName, sanitizeHTML, wwToDOMAdaptor) {
+        return {
+            attrs: {
+                htmlAttrs: { default: {} },
+                htmlInline: { default: true },
+            },
+            parseDOM: [
+                {
+                    tag: typeName,
+                    getAttrs: function (dom) {
+                        return {
+                            htmlAttrs: getHTMLAttrs(dom),
+                        };
+                    },
+                },
+            ],
+            toDOM: function (node) {
+                var htmlAttrs = sanitizeDOM(node, typeName, sanitizeHTML, wwToDOMAdaptor).htmlAttrs;
+                return [typeName, htmlAttrs, 0];
+            },
+        };
+    },
+};
+function createHTMLSchemaMap(convertorMap, sanitizeHTML, wwToDOMAdaptor) {
+    var htmlSchemaMap = { nodes: {}, marks: {} };
+    ['htmlBlock', 'htmlInline'].forEach(function (htmlType) {
+        if (convertorMap[htmlType]) {
+            Object.keys(convertorMap[htmlType]).forEach(function (type) {
+                var targetType = htmlType === 'htmlBlock' ? 'nodes' : 'marks';
+                // register tag white list for preventing to remove the html in sanitizer
+                registerTagWhitelistIfPossible(type);
+                htmlSchemaMap[targetType][type] = schemaFactory[htmlType](type, sanitizeHTML, wwToDOMAdaptor);
+            });
+        }
+    });
+    return htmlSchemaMap;
+}
+
+var reCloseTag = /^\s*<\s*\//;
+var baseConvertors = {
+    paragraph: function (_, _a) {
+        var entering = _a.entering, origin = _a.origin, options = _a.options;
+        if (options.nodeId) {
+            return {
+                type: entering ? 'openTag' : 'closeTag',
+                outerNewLine: true,
+                tagName: 'p',
             };
         }
         return origin();
@@ -14080,10 +15466,16 @@ var MarkdownPreview = /** @class */ (function () {
         this.sanitizer = sanitizer;
         this.initEvent(highlight);
         this.initContentSection();
+        // To prevent overflowing contents in the viewer
+        if (this.isViewer) {
+            this.previewContent.style.overflowWrap = 'break-word';
+        }
     }
     MarkdownPreview.prototype.initContentSection = function () {
         this.previewContent = createElementWith("<div class=\"" + cls('contents') + "\"></div>");
-        this.el.appendChild(this.previewContent);
+        if (!this.isViewer) {
+            this.el.appendChild(this.previewContent);
+        }
     };
     MarkdownPreview.prototype.toggleActive = function (active) {
         toggleClass(this.el, 'active', active);
@@ -14091,6 +15483,9 @@ var MarkdownPreview = /** @class */ (function () {
     MarkdownPreview.prototype.initEvent = function (highlight) {
         var _this = this;
         this.eventEmitter.listen('updatePreview', this.update.bind(this));
+        if (this.isViewer) {
+            return;
+        }
         if (highlight) {
             this.eventEmitter.listen('changeToolbarState', function (_a) {
                 var mdNode = _a.mdNode, cursorPos = _a.cursorPos;
@@ -15404,6 +16799,7 @@ var CustomBlockView = /** @class */ (function () {
             if (_this.innerEditorView) {
                 throw new Error('The editor is already opened.');
             }
+            _this.dom.draggable = false;
             _this.wrapper.style.display = 'none';
             _this.innerViewContainer.style.display = 'block';
             _this.innerEditorView = new EditorView(_this.innerViewContainer, {
@@ -15918,7 +17314,7 @@ function getContentBetweenFragmentComments(html) {
     if (startFragmentIndex > -1 && endFragmentIndex > -1) {
         html = html.slice(startFragmentIndex + START_FRAGMENT_COMMENT.length, endFragmentIndex);
     }
-    return html;
+    return html.replace(/<br[^>]*>/g, ALTERNATIVE_TAG_FOR_BR);
 }
 function convertMsoTableToCompletedTable(html) {
     // wrap with <tr> if html contains dangling <td> tags
@@ -16006,9 +17402,9 @@ function createTableBody(tableBodyRows, maxColumnCount, schema) {
     }
     return schema.nodes.tableBody.create(null, copiedRows);
 }
-function createTableFromPastingTable(rows, schema, startFromBody) {
+function createTableFromPastingTable(rows, schema, startFromBody, isInTable) {
     var columnCount = getMaxColumnCount(rows);
-    if (startFromBody) {
+    if (startFromBody && isInTable) {
         return schema.nodes.table.create(null, [createTableBody(rows, columnCount, schema)]);
     }
     var tableHeadRow = rows[0];
@@ -16019,15 +17415,16 @@ function createTableFromPastingTable(rows, schema, startFromBody) {
     }
     return schema.nodes.table.create(null, nodes);
 }
-function changePastedSlice(slice, schema) {
+function changePastedSlice(slice, schema, isInTable) {
     var nodes = [];
-    slice.content.forEach(function (node) {
+    var content = slice.content, openStart = slice.openStart, openEnd = slice.openEnd;
+    content.forEach(function (node) {
         if (node.type.name === 'table') {
             var tableContent = getTableContentFromSlice(new Slice(Fragment.from(node), 0, 0));
             if (tableContent) {
                 var rows = createRowsFromPastingTable(tableContent);
                 var startFromBody = tableContent.firstChild.type.name === 'tableBody';
-                var table = createTableFromPastingTable(rows, schema, startFromBody);
+                var table = createTableFromPastingTable(rows, schema, startFromBody, isInTable);
                 nodes.push(table);
             }
         }
@@ -16035,7 +17432,7 @@ function changePastedSlice(slice, schema) {
             nodes.push(node);
         }
     });
-    return new Slice(Fragment.from(nodes), 0, 0);
+    return new Slice(Fragment.from(nodes), openStart, openEnd);
 }
 
 var DUMMY_CELL_SIZE = 4;
@@ -16248,7 +17645,7 @@ var Paragraph = /** @class */ (function (_super) {
         get: function () {
             return {
                 content: 'inline*',
-                group: 'block listGroup',
+                group: 'block',
                 attrs: __assign$1({}, getDefaultCustomAttrs()),
                 parseDOM: [{ tag: 'p' }],
                 toDOM: function (_a) {
@@ -16371,7 +17768,8 @@ var Heading = /** @class */ (function (_super) {
     });
     Heading.prototype.commands = function () {
         return function (payload) { return function (state, dispatch) {
-            return setBlockType(state.schema.nodes.heading, payload)(state, dispatch);
+            var nodeType = state.schema.nodes[payload.level ? 'heading' : 'paragraph'];
+            return setBlockType(nodeType, payload)(state, dispatch);
         }; };
     };
     return Heading;
@@ -16477,7 +17875,7 @@ var BulletList = /** @class */ (function (_super) {
         get: function () {
             return {
                 content: 'listItem+',
-                group: 'block listGroup',
+                group: 'block',
                 attrs: __assign$1({ rawHTML: { default: null } }, getDefaultCustomAttrs()),
                 parseDOM: [createDOMInfoParsedRawHTML('ul')],
                 toDOM: function (_a) {
@@ -16527,7 +17925,7 @@ var OrderedList = /** @class */ (function (_super) {
         get: function () {
             return {
                 content: 'listItem+',
-                group: 'block listGroup',
+                group: 'block',
                 attrs: __assign$1({ order: { default: 1 }, rawHTML: { default: null } }, getDefaultCustomAttrs()),
                 parseDOM: [
                     {
@@ -16583,7 +17981,8 @@ var ListItem = /** @class */ (function (_super) {
     Object.defineProperty(ListItem.prototype, "schema", {
         get: function () {
             return {
-                content: 'paragraph listGroup*',
+                content: 'paragraph block*',
+                selectable: false,
                 attrs: {
                     task: { default: false },
                     checked: { default: false },
@@ -17431,9 +18830,13 @@ var Image = /** @class */ (function (_super) {
                     {
                         tag: 'img[src]',
                         getAttrs: function (dom) {
-                            var imageUrl = dom.getAttribute('src') || '';
-                            var rawHTML = dom.getAttribute('data-raw-html');
-                            return __assign$1({ imageUrl: sanitizeXSSAttributeValue(imageUrl), altText: dom.getAttribute('alt') }, (rawHTML && { rawHTML: rawHTML }));
+                            var sanitizedDOM = sanitizeHTML(dom, { RETURN_DOM_FRAGMENT: true })
+                                .firstChild;
+                            var imageUrl = sanitizedDOM.getAttribute('src') || '';
+                            var rawHTML = sanitizedDOM.getAttribute('data-raw-html');
+                            var altText = sanitizedDOM.getAttribute('alt');
+                            return __assign$1({ imageUrl: imageUrl,
+                                altText: altText }, (rawHTML && { rawHTML: rawHTML }));
                         },
                     },
                 ],
@@ -17456,7 +18859,7 @@ var Image = /** @class */ (function (_super) {
             if (!imageUrl) {
                 return false;
             }
-            var node = schema.nodes.image.createAndFill(__assign$1({ imageUrl: encodeMarkdownText(imageUrl) }, (altText && { altText: altText })));
+            var node = schema.nodes.image.createAndFill(__assign$1({ imageUrl: escapeXml$1(imageUrl) }, (altText && { altText: altText })));
             dispatch(tr.replaceSelectionWith(node).scrollIntoView());
             return true;
         }; };
@@ -17707,9 +19110,11 @@ var Link = /** @class */ (function (_super) {
                     {
                         tag: 'a[href]',
                         getAttrs: function (dom) {
-                            var href = dom.getAttribute('href') || '';
-                            var rawHTML = dom.getAttribute('data-raw-html');
-                            return __assign$1({ linkUrl: sanitizeXSSAttributeValue(href), linkText: dom.textContent }, (rawHTML && { rawHTML: rawHTML }));
+                            var sanitizedDOM = sanitizeHTML(dom, { RETURN_DOM_FRAGMENT: true })
+                                .firstChild;
+                            var href = sanitizedDOM.getAttribute('href') || '';
+                            var rawHTML = sanitizedDOM.getAttribute('data-raw-html');
+                            return __assign$1({ linkUrl: href, linkText: sanitizedDOM.textContent }, (rawHTML && { rawHTML: rawHTML }));
                         },
                     },
                 ],
@@ -17732,7 +19137,7 @@ var Link = /** @class */ (function (_super) {
             var empty = selection.empty, from = selection.from, to = selection.to;
             if (from && to && linkUrl) {
                 var attrs = {
-                    linkUrl: encodeMarkdownText(linkUrl),
+                    linkUrl: escapeXml$1(linkUrl),
                     linkText: escapeMarkdownText(linkText),
                 };
                 var mark = schema.mark('link', attrs);
@@ -18013,7 +19418,9 @@ var WysiwygEditor = /** @class */ (function (_super) {
                 _this.eventEmitter.emit('setFocusedNode', state.selection.$from.node(1));
             },
             transformPastedHTML: changePastedHTML,
-            transformPasted: function (slice) { return changePastedSlice(slice, _this.schema); },
+            transformPasted: function (slice) {
+                return changePastedSlice(slice, _this.schema, isInTableNode(_this.view.state.selection.$from));
+            },
             handlePaste: function (view, _, slice) { return pasteToTable(view, slice); },
             handleKeyDown: function (_, ev) {
                 _this.eventEmitter.emit('keydown', _this.editorType, ev);
@@ -18022,8 +19429,8 @@ var WysiwygEditor = /** @class */ (function (_super) {
             handleDOMEvents: {
                 paste: function (_, ev) {
                     var clipboardData = ev.clipboardData || window.clipboardData;
-                    var items = clipboardData && clipboardData.items;
-                    if (items) {
+                    var items = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.items;
+                    if ((items === null || items === void 0 ? void 0 : items.length) === 1) {
                         var imageBlob = pasteImageOnly(items);
                         if (imageBlob) {
                             ev.preventDefault();
@@ -18091,7 +19498,7 @@ var WysiwygEditor = /** @class */ (function (_super) {
         var _a = this.view.state, tr = _a.tr, doc = _a.doc;
         this.view.dispatch(tr.replaceWith(0, doc.content.size, newDoc));
         if (cursorToEnd) {
-            this.moveCursorToEnd();
+            this.moveCursorToEnd(true);
         }
     };
     WysiwygEditor.prototype.setSelection = function (start, end) {
@@ -18155,7 +19562,11 @@ var isNull = isNull_1;
  * @returns {boolean} Is existy?
  * @memberof module:type
  * @example
- * var isExisty = require('tui-code-snippet/type/isExisty'); // node, commonjs
+ * // ES6
+ * import isExisty from 'tui-code-snippet/type/isExisty');
+ * 
+ * // CommonJS
+ * const isExisty = require('tui-code-snippet/type/isExisty');
  *
  * isExisty(''); //true
  * isExisty(0); //true
@@ -18230,6 +19641,7 @@ var eventTypeList = [
     'mixinTableOffsetMapPrototype',
     'setFocusedNode',
     'removePopupWidget',
+    'query',
     // provide event for user
     'openPopup',
     'closePopup',
@@ -18484,6 +19896,9 @@ function isInlineNode(_a) {
     var type = _a.type;
     return includes(['text', 'strong', 'emph', 'strike', 'image', 'link', 'code'], type);
 }
+function isSoftbreak(mdNode) {
+    return (mdNode === null || mdNode === void 0 ? void 0 : mdNode.type) === 'softbreak';
+}
 function isListNode(_a) {
     var type = _a.type, literal = _a.literal;
     var matched = type === 'htmlInline' && literal.match(reHTMLTag);
@@ -18502,11 +19917,15 @@ function getListItemAttrs(_a) {
     var checked = /data-task-checked/.test(literal);
     return { task: task, checked: checked };
 }
-function getMatchedAttributeValue(rawHTML, attrName) {
+function getMatchedAttributeValue(rawHTML) {
+    var attrNames = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        attrNames[_i - 1] = arguments[_i];
+    }
     var wrapper = document.createElement('div');
-    wrapper.innerHTML = rawHTML;
+    wrapper.innerHTML = sanitizeHTML(rawHTML);
     var el = wrapper.firstChild;
-    return el.getAttribute(attrName) || '';
+    return attrNames.map(function (attrName) { return el.getAttribute(attrName) || ''; });
 }
 function createConvertors(convertors) {
     var convertorMap = {};
@@ -18560,9 +19979,9 @@ var convertors = {
         var tag = node.literal;
         var link = state.schema.marks.link;
         if (openTagName) {
-            var linkUrl = getMatchedAttributeValue(tag, 'href');
+            var linkUrl = getMatchedAttributeValue(tag, 'href')[0];
             state.openMark(link.create({
-                linkUrl: sanitizeXSSAttributeValue(linkUrl),
+                linkUrl: linkUrl,
                 rawHTML: openTagName,
             }));
         }
@@ -18572,11 +19991,10 @@ var convertors = {
     },
     img: function (state, node, openTagName) {
         var tag = node.literal;
-        var imageUrl = getMatchedAttributeValue(tag, 'src');
-        if (imageUrl) {
-            var altText = getMatchedAttributeValue(tag, 'alt');
+        if (openTagName) {
+            var _a = getMatchedAttributeValue(tag, 'src', 'alt'), imageUrl = _a[0], altText = _a[1];
             var image = state.schema.nodes.image;
-            state.addNode(image, __assign$1({ rawHTML: openTagName, imageUrl: sanitizeXSSAttributeValue(imageUrl) }, (altText && { altText: altText })));
+            state.addNode(image, __assign$1({ rawHTML: openTagName, imageUrl: imageUrl }, (altText && { altText: altText })));
         }
     },
     hr: function (state, _, openTagName) {
@@ -18586,11 +20004,22 @@ var convertors = {
         var paragraph = state.schema.nodes.paragraph;
         var parent = node.parent, prev = node.prev, next = node.next;
         if ((parent === null || parent === void 0 ? void 0 : parent.type) === 'paragraph') {
-            if (prev && !(prev.type === 'htmlInline' && prev.literal.match(CLOSE_TAG))) {
+            // should open a paragraph node when line text has only <br> tag
+            // ex) first line\n\n<br>\nfourth line
+            if (isSoftbreak(prev)) {
                 state.openNode(paragraph);
             }
-            if (next) {
+            // should close a paragraph node when line text has only <br> tag
+            // ex) first line\n\n<br>\nfourth line
+            if (isSoftbreak(next)) {
+                state.closeNode();
+                // should close a paragraph node and open a paragraph node to separate between blocks
+                // when <br> tag is in the middle of the paragraph
+                // ex) first <br>line\nthird line
+            }
+            else if (next) {
                 state.closeNode();
+                state.openNode(paragraph);
             }
         }
         else if ((parent === null || parent === void 0 ? void 0 : parent.type) === 'tableCell') {
@@ -18657,7 +20086,7 @@ var convertors = {
 var htmlToWwConvertors = createConvertors(convertors);
 
 function isBRTag(node) {
-    return node.type === 'htmlInline' && /<br ?\/?>/.test(node.literal);
+    return node.type === 'htmlInline' && reBR.test(node.literal);
 }
 function addRawHTMLAttributeToDOM(parent) {
     toArray_1(parent.childNodes).forEach(function (child) {
@@ -18838,32 +20267,37 @@ var toWwConvertors = {
         }
     },
     tableCell: function (state, node, _a) {
+        var _b;
         var entering = _a.entering;
-        if (!node.ignored) {
-            var hasParaNode = function (childNode) {
-                return childNode && (isInlineNode(childNode) || isCustomHTMLInlineNode(state, childNode));
-            };
-            if (entering) {
-                var _b = state.schema.nodes, tableHeadCell = _b.tableHeadCell, tableBodyCell = _b.tableBodyCell, paragraph = _b.paragraph;
-                var tablePart = node.parent.parent;
-                var cell = tablePart.type === 'tableHead' ? tableHeadCell : tableBodyCell;
+        var _c = state.schema.nodes, tableHeadCell = _c.tableHeadCell, tableBodyCell = _c.tableBodyCell, paragraph = _c.paragraph;
+        var tablePart = node.parent.parent;
+        var cell = tablePart.type === 'tableHead' ? tableHeadCell : tableBodyCell;
+        var hasParaNode = function (childNode) {
+            return childNode && (isInlineNode(childNode) || isCustomHTMLInlineNode(state, childNode));
+        };
+        if (entering) {
+            var attrs = null;
+            if (!node.ignored) {
                 var table = tablePart.parent;
-                var align = table.columns[node.startIdx].align;
-                var attrs = __assign$1({}, node.attrs);
-                if (align) {
-                    attrs.align = align;
-                }
-                state.openNode(cell, attrs);
-                if (hasParaNode(node.firstChild)) {
-                    state.openNode(paragraph);
+                var startIdx = node.startIdx;
+                if (table.columns.length > startIdx) {
+                    var align = table.columns[startIdx].align;
+                    attrs = (_b = node.attrs) !== null && _b !== void 0 ? _b : {};
+                    if (align) {
+                        attrs.align = align;
+                    }
                 }
             }
-            else {
-                if (hasParaNode(node.lastChild)) {
-                    state.closeNode();
-                }
+            state.openNode(cell, attrs);
+            if (hasParaNode(node.firstChild)) {
+                state.openNode(paragraph);
+            }
+        }
+        else {
+            if (hasParaNode(node.lastChild)) {
                 state.closeNode();
             }
+            state.closeNode();
         }
     },
     strike: function (state, _, _a, customAttrs) {
@@ -18905,10 +20339,11 @@ var toWwConvertors = {
         var openTagName = matched[1], closeTagName = matched[3];
         var typeName = (openTagName || closeTagName).toLowerCase();
         var markType = state.schema.marks[typeName];
+        var sanitizedHTML = sanitizeHTML(html);
         // for user defined html schema
         if (markType === null || markType === void 0 ? void 0 : markType.spec.attrs.htmlInline) {
             if (openTagName) {
-                var htmlAttrs = getHTMLAttrsByHTMLString(html);
+                var htmlAttrs = getHTMLAttrsByHTMLString(sanitizedHTML);
                 state.openMark(markType.create({ htmlAttrs: htmlAttrs }));
             }
             else {
@@ -18929,14 +20364,15 @@ var toWwConvertors = {
         var openTagName = matched[1], closeTagName = matched[3];
         var typeName = (openTagName || closeTagName).toLowerCase();
         var nodeType = state.schema.nodes[typeName];
+        var sanitizedHTML = sanitizeHTML(html);
         // for user defined html schema
         if (nodeType === null || nodeType === void 0 ? void 0 : nodeType.spec.attrs.htmlBlock) {
-            var htmlAttrs = getHTMLAttrsByHTMLString(html);
+            var htmlAttrs = getHTMLAttrsByHTMLString(sanitizedHTML);
             var childrenHTML = getChildrenHTML(node, typeName);
             state.addNode(nodeType, { htmlAttrs: htmlAttrs, childrenHTML: childrenHTML });
         }
         else {
-            container.innerHTML = html;
+            container.innerHTML = sanitizedHTML;
             addRawHTMLAttributeToDOM(container);
             state.convertByDOMParser(container);
         }
@@ -19047,6 +20483,27 @@ var ToWwConvertorState = /** @class */ (function () {
         var doc = DOMParser.fromSchema(this.schema).parse(root);
         doc.content.forEach(function (node) { return _this.push(node); });
     };
+    ToWwConvertorState.prototype.closeUnmatchedHTMLInline = function (node, entering) {
+        var _a;
+        if (!entering && node.type !== 'htmlInline') {
+            var length_1 = this.stack.length - 1;
+            for (var i = length_1; i >= 0; i -= 1) {
+                var nodeInfo = this.stack[i];
+                if ((_a = nodeInfo.attrs) === null || _a === void 0 ? void 0 : _a.rawHTML) {
+                    if (nodeInfo.content.length) {
+                        this.closeNode();
+                    }
+                    else {
+                        // just pop useless unmatched html inline node
+                        this.stack.pop();
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    };
     ToWwConvertorState.prototype.convert = function (mdNode, infoForPosSync) {
         var walker = mdNode.walker();
         var event = walker.next();
@@ -19064,6 +20521,7 @@ var ToWwConvertorState = /** @class */ (function () {
                         skipped = true;
                     },
                 };
+                this_1.closeUnmatchedHTMLInline(node, entering);
                 convertor(this_1, node, context);
                 if ((infoForPosSync === null || infoForPosSync === void 0 ? void 0 : infoForPosSync.node) === node) {
                     var pos = this_1.stack.reduce(function (nodeSize, stackItem) {
@@ -19460,7 +20918,7 @@ var toMdConvertors = {
         var node = _a.node;
         var attrs = node.attrs;
         var altText = escape$1(attrs.altText || '');
-        var imageUrl = escape$1(attrs.imageUrl);
+        var imageUrl = escapeXml$1(attrs.imageUrl);
         var altAttr = altText ? " alt=\"" + altText + "\"" : '';
         return {
             rawHTML: attrs.rawHTML ? "<" + attrs.rawHTML + " src=\"" + imageUrl + "\"" + altAttr + ">" : null,
@@ -19528,7 +20986,7 @@ var toMdConvertors = {
         var node = _a.node;
         var entering = _b.entering;
         var attrs = node.attrs;
-        var linkUrl = escape$1(attrs.linkUrl);
+        var linkUrl = escapeXml$1(attrs.linkUrl);
         var rawHTML = attrs.rawHTML;
         if (entering) {
             return {
@@ -19565,7 +21023,8 @@ var toMdConvertors = {
         var openTag = "<" + tagName;
         var closeTag = "</" + tagName + ">";
         Object.keys(attrs).forEach(function (attrName) {
-            openTag += " " + attrName + "=\"" + attrs[attrName] + "\"";
+            // To prevent broken converting when attributes has double quote string
+            openTag += " " + attrName + "=\"" + attrs[attrName].replace(/"/g, "'") + "\"";
         });
         openTag += '>';
         if (node.attrs.htmlInline) {
@@ -20029,6 +21488,14 @@ function getPluginInfo(plugins, eventEmitter, usageStatistics) {
 var TASK_ATTR_NAME = 'data-task';
 var DISABLED_TASK_ATTR_NAME = 'data-task-disabled';
 var TASK_CHECKED_CLASS_NAME = 'checked';
+function registerHTMLTagToWhitelist(convertorMap) {
+    ['htmlBlock', 'htmlInline'].forEach(function (htmlType) {
+        if (convertorMap[htmlType]) {
+            // register tag white list for preventing to remove the html in sanitizer
+            Object.keys(convertorMap[htmlType]).forEach(function (type) { return registerTagWhitelistIfPossible(type); });
+        }
+    });
+}
 /**
  * Class ToastUIEditorViewer
  * @param {object} options Option object
@@ -20074,6 +21541,7 @@ var ToastUIEditorViewer = /** @class */ (function () {
             frontMatter: frontMatter,
             sanitizer: customHTMLSanitizer || sanitizeHTML,
         };
+        registerHTMLTagToWhitelist(rendererOptions.customHTMLRenderer);
         if (this.options.events) {
             forEachOwnProperties_1(this.options.events, function (fn, key) {
                 _this.on(key, fn);
@@ -20094,7 +21562,7 @@ var ToastUIEditorViewer = /** @class */ (function () {
             customParser: markdownParsers,
         });
         this.preview = new MarkdownPreview(this.eventEmitter, __assign$1(__assign$1({}, rendererOptions), { isViewer: true }));
-        on_1(this.preview.el, 'mousedown', this.toggleTask.bind(this));
+        on_1(this.preview.previewContent, 'mousedown', this.toggleTask.bind(this));
         if (initialValue) {
             this.setMarkdown(initialValue);
         }
@@ -20508,6 +21976,18 @@ var ScrollSync = /** @class */ (function () {
     return ScrollSync;
 }());
 
+var queryMap = {
+    getPopupInitialValues: function (editor, payload) {
+        var popupName = payload.popupName;
+        return popupName === 'link' ? { linkText: editor.getSelectedText() } : {};
+    },
+};
+function buildQuery(editor) {
+    editor.eventEmitter.listen('query', function (query, payload) {
+        return queryMap[query](editor, payload);
+    });
+}
+
 /**
  * ToastUIEditorCore
  * @param {Object} options Option object
@@ -20547,11 +22027,12 @@ var ScrollSync = /** @class */ (function () {
  *     @param {boolean} [options.frontMatter=false] - whether use the front matter
  *     @param {Array.<object>} [options.widgetRules=[]] - The rules for replacing the text with widget node
  *     @param {string} [options.theme] - The theme to style the editor with. The default is included in toastui-editor.css.
+ *     @param {autofocus} [options.autofocus=true] - automatically focus the editor on creation.
  */
 var ToastUIEditorCore = /** @class */ (function () {
     function ToastUIEditorCore(options) {
         var _this = this;
-        this.initialHtml = options.el.innerHTML;
+        this.initialHTML = options.el.innerHTML;
         options.el.innerHTML = '';
         this.options = extend_1({
             previewStyle: 'tab',
@@ -20580,10 +22061,13 @@ var ToastUIEditorCore = /** @class */ (function () {
             frontMatter: false,
             widgetRules: [],
             theme: 'light',
+            autofocus: true,
         }, options);
         var _a = this.options, customHTMLRenderer = _a.customHTMLRenderer, extendedAutolinks = _a.extendedAutolinks, referenceDefinition = _a.referenceDefinition, frontMatter = _a.frontMatter, customMarkdownRenderer = _a.customMarkdownRenderer, useCommandShortcut = _a.useCommandShortcut, initialEditType = _a.initialEditType, widgetRules = _a.widgetRules, customHTMLSanitizer = _a.customHTMLSanitizer;
         this.mode = initialEditType || 'markdown';
         this.mdPreviewStyle = this.options.previewStyle;
+        this.i18n = i18n;
+        this.i18n.setCode(this.options.language);
         this.eventEmitter = new EventEmitter();
         setWidgetRules(widgetRules);
         var linkAttributes = sanitizeLinkAttribute(this.options.linkAttributes);
@@ -20599,8 +22083,6 @@ var ToastUIEditorCore = /** @class */ (function () {
         };
         var wwToDOMAdaptor = new WwToDOMAdaptor(linkAttributes, rendererOptions.customHTMLRenderer);
         var htmlSchemaMap = createHTMLSchemaMap(rendererOptions.customHTMLRenderer, rendererOptions.sanitizer, wwToDOMAdaptor);
-        this.i18n = i18n;
-        this.i18n.setCode(this.options.language);
         this.toastMark = new ToastMark('', {
             disallowedHtmlBlockTags: ['br', 'img'],
             extendedAutolinks: extendedAutolinks,
@@ -20631,7 +22113,7 @@ var ToastUIEditorCore = /** @class */ (function () {
             this.setPlaceholder(this.options.placeholder);
         }
         if (!this.options.initialValue) {
-            this.setHTML(this.initialHtml, false);
+            this.setHTML(this.initialHTML, false);
         }
         this.commandManager = new CommandManager(this.eventEmitter, this.mdEditor.commands, this.wwEditor.commands, function () { return _this.mode; });
         if (this.options.usageStatistics) {
@@ -20640,6 +22122,7 @@ var ToastUIEditorCore = /** @class */ (function () {
         this.scrollSync = new ScrollSync(this.mdEditor, this.preview, this.eventEmitter);
         this.addInitEvent();
         this.addInitCommand(mdCommands, wwCommands);
+        buildQuery(this);
         if (this.options.hooks) {
             forEachOwnProperties_1(this.options.hooks, function (fn, key) { return _this.addHook(key, fn); });
         }
@@ -20647,7 +22130,7 @@ var ToastUIEditorCore = /** @class */ (function () {
             forEachOwnProperties_1(this.options.events, function (fn, key) { return _this.on(key, fn); });
         }
         this.eventEmitter.emit('load', this);
-        this.moveCursorToStart();
+        this.moveCursorToStart(this.options.autofocus);
     }
     ToastUIEditorCore.prototype.addInitEvent = function () {
         this.on('needChangeMode', this.changeMode.bind(this));
@@ -20763,15 +22246,19 @@ var ToastUIEditorCore = /** @class */ (function () {
     };
     /**
      * Set cursor position to end
+     * @param {boolean} [focus] - automatically focus the editor
      */
-    ToastUIEditorCore.prototype.moveCursorToEnd = function () {
-        this.getCurrentModeEditor().moveCursorToEnd();
+    ToastUIEditorCore.prototype.moveCursorToEnd = function (focus) {
+        if (focus === void 0) { focus = true; }
+        this.getCurrentModeEditor().moveCursorToEnd(focus);
     };
     /**
      * Set cursor position to start
+     * @param {boolean} [focus] - automatically focus the editor
      */
-    ToastUIEditorCore.prototype.moveCursorToStart = function () {
-        this.getCurrentModeEditor().moveCursorToStart();
+    ToastUIEditorCore.prototype.moveCursorToStart = function (focus) {
+        if (focus === void 0) { focus = true; }
+        this.getCurrentModeEditor().moveCursorToStart(focus);
     };
     /**
      * Set markdown syntax text.
@@ -20824,16 +22311,13 @@ var ToastUIEditorCore = /** @class */ (function () {
     ToastUIEditorCore.prototype.getHTML = function () {
         var _this = this;
         this.eventEmitter.holdEventInvoke(function () {
-            if (_this.isWysiwygMode()) {
-                _this.mdEditor.setMarkdown(_this.convertor.toMarkdownText(_this.wwEditor.getModel()));
+            if (_this.isMarkdownMode()) {
+                var mdNode = _this.toastMark.getRootNode();
+                var wwNode = _this.convertor.toWysiwygModel(mdNode);
+                _this.wwEditor.setModel(wwNode);
             }
         });
-        var mdNode = this.toastMark.getRootNode();
-        var mdRenderer = this.preview.getRenderer();
-        return mdRenderer
-            .render(mdNode)
-            .replace(/\sdata-nodeid="\d{1,}"/g, '')
-            .trim();
+        return this.wwEditor.view.dom.innerHTML;
     };
     /**
      * Insert text
@@ -21640,11 +23124,15 @@ var templateObject_1$h;
  * @returns {function} debounced function.
  * @memberof module:tricks
  * @example
- * var debounce = require('tui-code-snippet/tricks/debounce'); // node, commonjs
+ * // ES6
+ * import debounce from 'tui-code-snippet/tricks/debounce';
+ * 
+ * // CommonJS
+ * const debounce = require('tui-code-snippet/tricks/debounce');
  *
  * function someMethodToInvokeDebounced() {}
  *
- * var debounced = debounce(someMethodToInvokeDebounced, 300);
+ * const debounced = debounce(someMethodToInvokeDebounced, 300);
  *
  * // invoke repeatedly
  * debounced();
@@ -21692,11 +23180,15 @@ var debounce = debounce_1;
  * @returns {function} throttled function
  * @memberof module:tricks
  * @example
- * var throttle = require('tui-code-snippet/tricks/throttle'); // node, commonjs
+ * // ES6
+ * import throttle from 'tui-code-snippet/tricks/throttle';
+ * 
+ * // CommonJS
+ * const throttle = require('tui-code-snippet/tricks/throttle');
  *
  * function someMethodToInvokeThrottled() {}
  *
- * var throttled = throttle(someMethodToInvokeThrottled, 300);
+ * const throttled = throttle(someMethodToInvokeThrottled, 300);
  *
  * // invoke repeatedly
  * throttled();    // invoke (leading)
@@ -21711,7 +23203,7 @@ var debounce = debounce_1;
  * // if you need reuse throttled method. then invoke reset()
  * throttled.reset();
  */
-function throttle(fn, interval) {
+function throttle$1(fn, interval) {
   var base;
   var isLeading = true;
   var tick = function(_args) {
@@ -21761,7 +23253,934 @@ function throttle(fn, interval) {
   return throttled;
 }
 
-var throttle_1 = throttle;
+var throttle_1 = throttle$1;
+
+/**
+ * A collection of shims that provide minimal functionality of the ES6 collections.
+ *
+ * These implementations are not meant to be used outside of the ResizeObserver
+ * modules as they cover only a limited range of use cases.
+ */
+/* eslint-disable require-jsdoc, valid-jsdoc */
+var MapShim = (function () {
+    if (typeof Map !== 'undefined') {
+        return Map;
+    }
+    /**
+     * Returns index in provided array that matches the specified key.
+     *
+     * @param {Array<Array>} arr
+     * @param {*} key
+     * @returns {number}
+     */
+    function getIndex(arr, key) {
+        var result = -1;
+        arr.some(function (entry, index) {
+            if (entry[0] === key) {
+                result = index;
+                return true;
+            }
+            return false;
+        });
+        return result;
+    }
+    return /** @class */ (function () {
+        function class_1() {
+            this.__entries__ = [];
+        }
+        Object.defineProperty(class_1.prototype, "size", {
+            /**
+             * @returns {boolean}
+             */
+            get: function () {
+                return this.__entries__.length;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {*} key
+         * @returns {*}
+         */
+        class_1.prototype.get = function (key) {
+            var index = getIndex(this.__entries__, key);
+            var entry = this.__entries__[index];
+            return entry && entry[1];
+        };
+        /**
+         * @param {*} key
+         * @param {*} value
+         * @returns {void}
+         */
+        class_1.prototype.set = function (key, value) {
+            var index = getIndex(this.__entries__, key);
+            if (~index) {
+                this.__entries__[index][1] = value;
+            }
+            else {
+                this.__entries__.push([key, value]);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.delete = function (key) {
+            var entries = this.__entries__;
+            var index = getIndex(entries, key);
+            if (~index) {
+                entries.splice(index, 1);
+            }
+        };
+        /**
+         * @param {*} key
+         * @returns {void}
+         */
+        class_1.prototype.has = function (key) {
+            return !!~getIndex(this.__entries__, key);
+        };
+        /**
+         * @returns {void}
+         */
+        class_1.prototype.clear = function () {
+            this.__entries__.splice(0);
+        };
+        /**
+         * @param {Function} callback
+         * @param {*} [ctx=null]
+         * @returns {void}
+         */
+        class_1.prototype.forEach = function (callback, ctx) {
+            if (ctx === void 0) { ctx = null; }
+            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                var entry = _a[_i];
+                callback.call(ctx, entry[1], entry[0]);
+            }
+        };
+        return class_1;
+    }());
+})();
+
+/**
+ * Detects whether window and document objects are available in current environment.
+ */
+var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
+
+// Returns global object of a current environment.
+var global$1 = (function () {
+    if (typeof global !== 'undefined' && global.Math === Math) {
+        return global;
+    }
+    if (typeof self !== 'undefined' && self.Math === Math) {
+        return self;
+    }
+    if (typeof window !== 'undefined' && window.Math === Math) {
+        return window;
+    }
+    // eslint-disable-next-line no-new-func
+    return Function('return this')();
+})();
+
+/**
+ * A shim for the requestAnimationFrame which falls back to the setTimeout if
+ * first one is not supported.
+ *
+ * @returns {number} Requests' identifier.
+ */
+var requestAnimationFrame$1 = (function () {
+    if (typeof requestAnimationFrame === 'function') {
+        // It's required to use a bounded function because IE sometimes throws
+        // an "Invalid calling object" error if rAF is invoked without the global
+        // object on the left hand side.
+        return requestAnimationFrame.bind(global$1);
+    }
+    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
+})();
+
+// Defines minimum timeout before adding a trailing call.
+var trailingTimeout = 2;
+/**
+ * Creates a wrapper function which ensures that provided callback will be
+ * invoked only once during the specified delay period.
+ *
+ * @param {Function} callback - Function to be invoked after the delay period.
+ * @param {number} delay - Delay after which to invoke callback.
+ * @returns {Function}
+ */
+function throttle (callback, delay) {
+    var leadingCall = false, trailingCall = false, lastCallTime = 0;
+    /**
+     * Invokes the original callback function and schedules new invocation if
+     * the "proxy" was called during current request.
+     *
+     * @returns {void}
+     */
+    function resolvePending() {
+        if (leadingCall) {
+            leadingCall = false;
+            callback();
+        }
+        if (trailingCall) {
+            proxy();
+        }
+    }
+    /**
+     * Callback invoked after the specified delay. It will further postpone
+     * invocation of the original function delegating it to the
+     * requestAnimationFrame.
+     *
+     * @returns {void}
+     */
+    function timeoutCallback() {
+        requestAnimationFrame$1(resolvePending);
+    }
+    /**
+     * Schedules invocation of the original function.
+     *
+     * @returns {void}
+     */
+    function proxy() {
+        var timeStamp = Date.now();
+        if (leadingCall) {
+            // Reject immediately following calls.
+            if (timeStamp - lastCallTime < trailingTimeout) {
+                return;
+            }
+            // Schedule new call to be in invoked when the pending one is resolved.
+            // This is important for "transitions" which never actually start
+            // immediately so there is a chance that we might miss one if change
+            // happens amids the pending invocation.
+            trailingCall = true;
+        }
+        else {
+            leadingCall = true;
+            trailingCall = false;
+            setTimeout(timeoutCallback, delay);
+        }
+        lastCallTime = timeStamp;
+    }
+    return proxy;
+}
+
+// Minimum delay before invoking the update of observers.
+var REFRESH_DELAY = 20;
+// A list of substrings of CSS properties used to find transition events that
+// might affect dimensions of observed elements.
+var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
+// Check if MutationObserver is available.
+var mutationObserverSupported = typeof MutationObserver !== 'undefined';
+/**
+ * Singleton controller class which handles updates of ResizeObserver instances.
+ */
+var ResizeObserverController = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserverController.
+     *
+     * @private
+     */
+    function ResizeObserverController() {
+        /**
+         * Indicates whether DOM listeners have been added.
+         *
+         * @private {boolean}
+         */
+        this.connected_ = false;
+        /**
+         * Tells that controller has subscribed for Mutation Events.
+         *
+         * @private {boolean}
+         */
+        this.mutationEventsAdded_ = false;
+        /**
+         * Keeps reference to the instance of MutationObserver.
+         *
+         * @private {MutationObserver}
+         */
+        this.mutationsObserver_ = null;
+        /**
+         * A list of connected observers.
+         *
+         * @private {Array<ResizeObserverSPI>}
+         */
+        this.observers_ = [];
+        this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+        this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+    }
+    /**
+     * Adds observer to observers list.
+     *
+     * @param {ResizeObserverSPI} observer - Observer to be added.
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.addObserver = function (observer) {
+        if (!~this.observers_.indexOf(observer)) {
+            this.observers_.push(observer);
+        }
+        // Add listeners if they haven't been added yet.
+        if (!this.connected_) {
+            this.connect_();
+        }
+    };
+    /**
+     * Removes observer from observers list.
+     *
+     * @param {ResizeObserverSPI} observer - Observer to be removed.
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.removeObserver = function (observer) {
+        var observers = this.observers_;
+        var index = observers.indexOf(observer);
+        // Remove observer if it's present in registry.
+        if (~index) {
+            observers.splice(index, 1);
+        }
+        // Remove listeners if controller has no connected observers.
+        if (!observers.length && this.connected_) {
+            this.disconnect_();
+        }
+    };
+    /**
+     * Invokes the update of observers. It will continue running updates insofar
+     * it detects changes.
+     *
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.refresh = function () {
+        var changesDetected = this.updateObservers_();
+        // Continue running updates if changes have been detected as there might
+        // be future ones caused by CSS transitions.
+        if (changesDetected) {
+            this.refresh();
+        }
+    };
+    /**
+     * Updates every observer from observers list and notifies them of queued
+     * entries.
+     *
+     * @private
+     * @returns {boolean} Returns "true" if any observer has detected changes in
+     *      dimensions of it's elements.
+     */
+    ResizeObserverController.prototype.updateObservers_ = function () {
+        // Collect observers that have active observations.
+        var activeObservers = this.observers_.filter(function (observer) {
+            return observer.gatherActive(), observer.hasActive();
+        });
+        // Deliver notifications in a separate cycle in order to avoid any
+        // collisions between observers, e.g. when multiple instances of
+        // ResizeObserver are tracking the same element and the callback of one
+        // of them changes content dimensions of the observed target. Sometimes
+        // this may result in notifications being blocked for the rest of observers.
+        activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
+        return activeObservers.length > 0;
+    };
+    /**
+     * Initializes DOM listeners.
+     *
+     * @private
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.connect_ = function () {
+        // Do nothing if running in a non-browser environment or if listeners
+        // have been already added.
+        if (!isBrowser || this.connected_) {
+            return;
+        }
+        // Subscription to the "Transitionend" event is used as a workaround for
+        // delayed transitions. This way it's possible to capture at least the
+        // final state of an element.
+        document.addEventListener('transitionend', this.onTransitionEnd_);
+        window.addEventListener('resize', this.refresh);
+        if (mutationObserverSupported) {
+            this.mutationsObserver_ = new MutationObserver(this.refresh);
+            this.mutationsObserver_.observe(document, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+        }
+        else {
+            document.addEventListener('DOMSubtreeModified', this.refresh);
+            this.mutationEventsAdded_ = true;
+        }
+        this.connected_ = true;
+    };
+    /**
+     * Removes DOM listeners.
+     *
+     * @private
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.disconnect_ = function () {
+        // Do nothing if running in a non-browser environment or if listeners
+        // have been already removed.
+        if (!isBrowser || !this.connected_) {
+            return;
+        }
+        document.removeEventListener('transitionend', this.onTransitionEnd_);
+        window.removeEventListener('resize', this.refresh);
+        if (this.mutationsObserver_) {
+            this.mutationsObserver_.disconnect();
+        }
+        if (this.mutationEventsAdded_) {
+            document.removeEventListener('DOMSubtreeModified', this.refresh);
+        }
+        this.mutationsObserver_ = null;
+        this.mutationEventsAdded_ = false;
+        this.connected_ = false;
+    };
+    /**
+     * "Transitionend" event handler.
+     *
+     * @private
+     * @param {TransitionEvent} event
+     * @returns {void}
+     */
+    ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
+        var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
+        // Detect whether transition may affect dimensions of an element.
+        var isReflowProperty = transitionKeys.some(function (key) {
+            return !!~propertyName.indexOf(key);
+        });
+        if (isReflowProperty) {
+            this.refresh();
+        }
+    };
+    /**
+     * Returns instance of the ResizeObserverController.
+     *
+     * @returns {ResizeObserverController}
+     */
+    ResizeObserverController.getInstance = function () {
+        if (!this.instance_) {
+            this.instance_ = new ResizeObserverController();
+        }
+        return this.instance_;
+    };
+    /**
+     * Holds reference to the controller's instance.
+     *
+     * @private {ResizeObserverController}
+     */
+    ResizeObserverController.instance_ = null;
+    return ResizeObserverController;
+}());
+
+/**
+ * Defines non-writable/enumerable properties of the provided target object.
+ *
+ * @param {Object} target - Object for which to define properties.
+ * @param {Object} props - Properties to be defined.
+ * @returns {Object} Target object.
+ */
+var defineConfigurable = (function (target, props) {
+    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+        var key = _a[_i];
+        Object.defineProperty(target, key, {
+            value: props[key],
+            enumerable: false,
+            writable: false,
+            configurable: true
+        });
+    }
+    return target;
+});
+
+/**
+ * Returns the global object associated with provided element.
+ *
+ * @param {Object} target
+ * @returns {Object}
+ */
+var getWindowOf = (function (target) {
+    // Assume that the element is an instance of Node, which means that it
+    // has the "ownerDocument" property from which we can retrieve a
+    // corresponding global object.
+    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+    // Return the local global object if it's not possible extract one from
+    // provided element.
+    return ownerGlobal || global$1;
+});
+
+// Placeholder of an empty content rectangle.
+var emptyRect = createRectInit(0, 0, 0, 0);
+/**
+ * Converts provided string to a number.
+ *
+ * @param {number|string} value
+ * @returns {number}
+ */
+function toFloat(value) {
+    return parseFloat(value) || 0;
+}
+/**
+ * Extracts borders size from provided styles.
+ *
+ * @param {CSSStyleDeclaration} styles
+ * @param {...string} positions - Borders positions (top, right, ...)
+ * @returns {number}
+ */
+function getBordersSize(styles) {
+    var positions = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        positions[_i - 1] = arguments[_i];
+    }
+    return positions.reduce(function (size, position) {
+        var value = styles['border-' + position + '-width'];
+        return size + toFloat(value);
+    }, 0);
+}
+/**
+ * Extracts paddings sizes from provided styles.
+ *
+ * @param {CSSStyleDeclaration} styles
+ * @returns {Object} Paddings box.
+ */
+function getPaddings(styles) {
+    var positions = ['top', 'right', 'bottom', 'left'];
+    var paddings = {};
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+        var position = positions_1[_i];
+        var value = styles['padding-' + position];
+        paddings[position] = toFloat(value);
+    }
+    return paddings;
+}
+/**
+ * Calculates content rectangle of provided SVG element.
+ *
+ * @param {SVGGraphicsElement} target - Element content rectangle of which needs
+ *      to be calculated.
+ * @returns {DOMRectInit}
+ */
+function getSVGContentRect(target) {
+    var bbox = target.getBBox();
+    return createRectInit(0, 0, bbox.width, bbox.height);
+}
+/**
+ * Calculates content rectangle of provided HTMLElement.
+ *
+ * @param {HTMLElement} target - Element for which to calculate the content rectangle.
+ * @returns {DOMRectInit}
+ */
+function getHTMLElementContentRect(target) {
+    // Client width & height properties can't be
+    // used exclusively as they provide rounded values.
+    var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+    // By this condition we can catch all non-replaced inline, hidden and
+    // detached elements. Though elements with width & height properties less
+    // than 0.5 will be discarded as well.
+    //
+    // Without it we would need to implement separate methods for each of
+    // those cases and it's not possible to perform a precise and performance
+    // effective test for hidden elements. E.g. even jQuery's ':visible' filter
+    // gives wrong results for elements with width & height less than 0.5.
+    if (!clientWidth && !clientHeight) {
+        return emptyRect;
+    }
+    var styles = getWindowOf(target).getComputedStyle(target);
+    var paddings = getPaddings(styles);
+    var horizPad = paddings.left + paddings.right;
+    var vertPad = paddings.top + paddings.bottom;
+    // Computed styles of width & height are being used because they are the
+    // only dimensions available to JS that contain non-rounded values. It could
+    // be possible to utilize the getBoundingClientRect if only it's data wasn't
+    // affected by CSS transformations let alone paddings, borders and scroll bars.
+    var width = toFloat(styles.width), height = toFloat(styles.height);
+    // Width & height include paddings and borders when the 'border-box' box
+    // model is applied (except for IE).
+    if (styles.boxSizing === 'border-box') {
+        // Following conditions are required to handle Internet Explorer which
+        // doesn't include paddings and borders to computed CSS dimensions.
+        //
+        // We can say that if CSS dimensions + paddings are equal to the "client"
+        // properties then it's either IE, and thus we don't need to subtract
+        // anything, or an element merely doesn't have paddings/borders styles.
+        if (Math.round(width + horizPad) !== clientWidth) {
+            width -= getBordersSize(styles, 'left', 'right') + horizPad;
+        }
+        if (Math.round(height + vertPad) !== clientHeight) {
+            height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
+        }
+    }
+    // Following steps can't be applied to the document's root element as its
+    // client[Width/Height] properties represent viewport area of the window.
+    // Besides, it's as well not necessary as the <html> itself neither has
+    // rendered scroll bars nor it can be clipped.
+    if (!isDocumentElement(target)) {
+        // In some browsers (only in Firefox, actually) CSS width & height
+        // include scroll bars size which can be removed at this step as scroll
+        // bars are the only difference between rounded dimensions + paddings
+        // and "client" properties, though that is not always true in Chrome.
+        var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+        var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+        // Chrome has a rather weird rounding of "client" properties.
+        // E.g. for an element with content width of 314.2px it sometimes gives
+        // the client width of 315px and for the width of 314.7px it may give
+        // 314px. And it doesn't happen all the time. So just ignore this delta
+        // as a non-relevant.
+        if (Math.abs(vertScrollbar) !== 1) {
+            width -= vertScrollbar;
+        }
+        if (Math.abs(horizScrollbar) !== 1) {
+            height -= horizScrollbar;
+        }
+    }
+    return createRectInit(paddings.left, paddings.top, width, height);
+}
+/**
+ * Checks whether provided element is an instance of the SVGGraphicsElement.
+ *
+ * @param {Element} target - Element to be checked.
+ * @returns {boolean}
+ */
+var isSVGGraphicsElement = (function () {
+    // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
+    // interface.
+    if (typeof SVGGraphicsElement !== 'undefined') {
+        return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
+    }
+    // If it's so, then check that element is at least an instance of the
+    // SVGElement and that it has the "getBBox" method.
+    // eslint-disable-next-line no-extra-parens
+    return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
+        typeof target.getBBox === 'function'); };
+})();
+/**
+ * Checks whether provided element is a document element (<html>).
+ *
+ * @param {Element} target - Element to be checked.
+ * @returns {boolean}
+ */
+function isDocumentElement(target) {
+    return target === getWindowOf(target).document.documentElement;
+}
+/**
+ * Calculates an appropriate content rectangle for provided html or svg element.
+ *
+ * @param {Element} target - Element content rectangle of which needs to be calculated.
+ * @returns {DOMRectInit}
+ */
+function getContentRect(target) {
+    if (!isBrowser) {
+        return emptyRect;
+    }
+    if (isSVGGraphicsElement(target)) {
+        return getSVGContentRect(target);
+    }
+    return getHTMLElementContentRect(target);
+}
+/**
+ * Creates rectangle with an interface of the DOMRectReadOnly.
+ * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
+ *
+ * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
+ * @returns {DOMRectReadOnly}
+ */
+function createReadOnlyRect(_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+    // If DOMRectReadOnly is available use it as a prototype for the rectangle.
+    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
+    var rect = Object.create(Constr.prototype);
+    // Rectangle's properties are not writable and non-enumerable.
+    defineConfigurable(rect, {
+        x: x, y: y, width: width, height: height,
+        top: y,
+        right: x + width,
+        bottom: height + y,
+        left: x
+    });
+    return rect;
+}
+/**
+ * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
+ * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
+ *
+ * @param {number} x - X coordinate.
+ * @param {number} y - Y coordinate.
+ * @param {number} width - Rectangle's width.
+ * @param {number} height - Rectangle's height.
+ * @returns {DOMRectInit}
+ */
+function createRectInit(x, y, width, height) {
+    return { x: x, y: y, width: width, height: height };
+}
+
+/**
+ * Class that is responsible for computations of the content rectangle of
+ * provided DOM element and for keeping track of it's changes.
+ */
+var ResizeObservation = /** @class */ (function () {
+    /**
+     * Creates an instance of ResizeObservation.
+     *
+     * @param {Element} target - Element to be observed.
+     */
+    function ResizeObservation(target) {
+        /**
+         * Broadcasted width of content rectangle.
+         *
+         * @type {number}
+         */
+        this.broadcastWidth = 0;
+        /**
+         * Broadcasted height of content rectangle.
+         *
+         * @type {number}
+         */
+        this.broadcastHeight = 0;
+        /**
+         * Reference to the last observed content rectangle.
+         *
+         * @private {DOMRectInit}
+         */
+        this.contentRect_ = createRectInit(0, 0, 0, 0);
+        this.target = target;
+    }
+    /**
+     * Updates content rectangle and tells whether it's width or height properties
+     * have changed since the last broadcast.
+     *
+     * @returns {boolean}
+     */
+    ResizeObservation.prototype.isActive = function () {
+        var rect = getContentRect(this.target);
+        this.contentRect_ = rect;
+        return (rect.width !== this.broadcastWidth ||
+            rect.height !== this.broadcastHeight);
+    };
+    /**
+     * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
+     * from the corresponding properties of the last observed content rectangle.
+     *
+     * @returns {DOMRectInit} Last observed content rectangle.
+     */
+    ResizeObservation.prototype.broadcastRect = function () {
+        var rect = this.contentRect_;
+        this.broadcastWidth = rect.width;
+        this.broadcastHeight = rect.height;
+        return rect;
+    };
+    return ResizeObservation;
+}());
+
+var ResizeObserverEntry = /** @class */ (function () {
+    /**
+     * Creates an instance of ResizeObserverEntry.
+     *
+     * @param {Element} target - Element that is being observed.
+     * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
+     */
+    function ResizeObserverEntry(target, rectInit) {
+        var contentRect = createReadOnlyRect(rectInit);
+        // According to the specification following properties are not writable
+        // and are also not enumerable in the native implementation.
+        //
+        // Property accessors are not being used as they'd require to define a
+        // private WeakMap storage which may cause memory leaks in browsers that
+        // don't support this type of collections.
+        defineConfigurable(this, { target: target, contentRect: contentRect });
+    }
+    return ResizeObserverEntry;
+}());
+
+var ResizeObserverSPI = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {ResizeObserverCallback} callback - Callback function that is invoked
+     *      when one of the observed elements changes it's content dimensions.
+     * @param {ResizeObserverController} controller - Controller instance which
+     *      is responsible for the updates of observer.
+     * @param {ResizeObserver} callbackCtx - Reference to the public
+     *      ResizeObserver instance which will be passed to callback function.
+     */
+    function ResizeObserverSPI(callback, controller, callbackCtx) {
+        /**
+         * Collection of resize observations that have detected changes in dimensions
+         * of elements.
+         *
+         * @private {Array<ResizeObservation>}
+         */
+        this.activeObservations_ = [];
+        /**
+         * Registry of the ResizeObservation instances.
+         *
+         * @private {Map<Element, ResizeObservation>}
+         */
+        this.observations_ = new MapShim();
+        if (typeof callback !== 'function') {
+            throw new TypeError('The callback provided as parameter 1 is not a function.');
+        }
+        this.callback_ = callback;
+        this.controller_ = controller;
+        this.callbackCtx_ = callbackCtx;
+    }
+    /**
+     * Starts observing provided element.
+     *
+     * @param {Element} target - Element to be observed.
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.observe = function (target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        // Do nothing if current environment doesn't have the Element interface.
+        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+            return;
+        }
+        if (!(target instanceof getWindowOf(target).Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+        var observations = this.observations_;
+        // Do nothing if element is already being observed.
+        if (observations.has(target)) {
+            return;
+        }
+        observations.set(target, new ResizeObservation(target));
+        this.controller_.addObserver(this);
+        // Force the update of observations.
+        this.controller_.refresh();
+    };
+    /**
+     * Stops observing provided element.
+     *
+     * @param {Element} target - Element to stop observing.
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.unobserve = function (target) {
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        // Do nothing if current environment doesn't have the Element interface.
+        if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+            return;
+        }
+        if (!(target instanceof getWindowOf(target).Element)) {
+            throw new TypeError('parameter 1 is not of type "Element".');
+        }
+        var observations = this.observations_;
+        // Do nothing if element is not being observed.
+        if (!observations.has(target)) {
+            return;
+        }
+        observations.delete(target);
+        if (!observations.size) {
+            this.controller_.removeObserver(this);
+        }
+    };
+    /**
+     * Stops observing all elements.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.disconnect = function () {
+        this.clearActive();
+        this.observations_.clear();
+        this.controller_.removeObserver(this);
+    };
+    /**
+     * Collects observation instances the associated element of which has changed
+     * it's content rectangle.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.gatherActive = function () {
+        var _this = this;
+        this.clearActive();
+        this.observations_.forEach(function (observation) {
+            if (observation.isActive()) {
+                _this.activeObservations_.push(observation);
+            }
+        });
+    };
+    /**
+     * Invokes initial callback function with a list of ResizeObserverEntry
+     * instances collected from active resize observations.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.broadcastActive = function () {
+        // Do nothing if observer doesn't have active observations.
+        if (!this.hasActive()) {
+            return;
+        }
+        var ctx = this.callbackCtx_;
+        // Create ResizeObserverEntry instance for every active observation.
+        var entries = this.activeObservations_.map(function (observation) {
+            return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+        });
+        this.callback_.call(ctx, entries, ctx);
+        this.clearActive();
+    };
+    /**
+     * Clears the collection of active observations.
+     *
+     * @returns {void}
+     */
+    ResizeObserverSPI.prototype.clearActive = function () {
+        this.activeObservations_.splice(0);
+    };
+    /**
+     * Tells whether observer has active observations.
+     *
+     * @returns {boolean}
+     */
+    ResizeObserverSPI.prototype.hasActive = function () {
+        return this.activeObservations_.length > 0;
+    };
+    return ResizeObserverSPI;
+}());
+
+// Registry of internal observers. If WeakMap is not available use current shim
+// for the Map collection as it has all required methods and because WeakMap
+// can't be fully polyfilled anyway.
+var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
+/**
+ * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
+ * exposing only those methods and properties that are defined in the spec.
+ */
+var ResizeObserver = /** @class */ (function () {
+    /**
+     * Creates a new instance of ResizeObserver.
+     *
+     * @param {ResizeObserverCallback} callback - Callback that is invoked when
+     *      dimensions of the observed elements change.
+     */
+    function ResizeObserver(callback) {
+        if (!(this instanceof ResizeObserver)) {
+            throw new TypeError('Cannot call a class as a function.');
+        }
+        if (!arguments.length) {
+            throw new TypeError('1 argument required, but only 0 present.');
+        }
+        var controller = ResizeObserverController.getInstance();
+        var observer = new ResizeObserverSPI(callback, controller, this);
+        observers.set(this, observer);
+    }
+    return ResizeObserver;
+}());
+// Expose public methods of ResizeObserver.
+[
+    'observe',
+    'unobserve',
+    'disconnect'
+].forEach(function (method) {
+    ResizeObserver.prototype[method] = function () {
+        var _a;
+        return (_a = observers.get(this))[method].apply(_a, arguments);
+    };
+});
+
+var index = (function () {
+    // Export existing implementation if available.
+    if (typeof global$1.ResizeObserver !== 'undefined') {
+        return global$1.ResizeObserver;
+    }
+    return ResizeObserver;
+})();
 
 var HeadingPopupBody = /** @class */ (function (_super) {
     __extends$1(HeadingPopupBody, _super);
@@ -22022,17 +24441,17 @@ var TablePopupBody = /** @class */ (function (_super) {
         range.colIdx = Math.min(Math.max(range.colIdx, MIN_COL_SELECTION_INDEX), MAX_COL_INDEX);
         return range;
     };
-    TablePopupBody.prototype.mounted = function () {
-        var _a = this.refs.tableEl.getBoundingClientRect(), left = _a.left, top = _a.top;
-        this.offsetRect = {
-            left: window.pageXOffset + left,
-            top: window.pageYOffset + top,
-        };
-    };
     TablePopupBody.prototype.updated = function () {
         if (!this.props.show) {
             this.setState({ colIdx: -1, rowIdx: -1 });
         }
+        else if (this.state.colIdx === -1 && this.state.rowIdx === -1) {
+            var _a = this.refs.tableEl.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+            this.offsetRect = {
+                left: window.pageXOffset + left,
+                top: window.pageYOffset + top_1,
+            };
+        }
     };
     TablePopupBody.prototype.createTableArea = function (tableRange) {
         var colIdx = tableRange.colIdx, rowIdx = tableRange.rowIdx;
@@ -22059,15 +24478,17 @@ var templateObject_1$c, templateObject_2$6, templateObject_3$2, templateObject_4
 
 var CustomPopupBody = /** @class */ (function (_super) {
     __extends$1(CustomPopupBody, _super);
-    function CustomPopupBody(props) {
-        var _this = _super.call(this, props) || this;
-        props.eventEmitter.listen('closePopup', _this.props.hidePopup);
-        return _this;
+    function CustomPopupBody() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     CustomPopupBody.prototype.mounted = function () {
         // append the custom popup body element
         this.refs.el.appendChild(this.props.body);
     };
+    CustomPopupBody.prototype.updated = function (prevProps) {
+        // update custom popup element
+        this.refs.el.replaceChild(this.props.body, prevProps.body);
+    };
     CustomPopupBody.prototype.render = function () {
         var _this = this;
         return html(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["<div ref=", "></div>"], ["<div ref=", "></div>"])), function (el) { return (_this.refs.el = el); });
@@ -22344,6 +24765,7 @@ var Popup = /** @class */ (function (_super) {
     }
     Popup.prototype.mounted = function () {
         document.addEventListener('mousedown', this.handleMousedown);
+        this.props.eventEmitter.listen('closePopup', this.props.hidePopup);
     };
     Popup.prototype.beforeDestroy = function () {
         document.removeEventListener('mousedown', this.handleMousedown);
@@ -22420,7 +24842,7 @@ function connectHOC(WrappedComponent) {
 }
 var templateObject_1$8;
 
-var DEFAULT_WIDTH$1 = 80;
+var DEFAULT_WIDTH = 80;
 var ToolbarButtonComp = /** @class */ (function (_super) {
     __extends$1(ToolbarButtonComp, _super);
     function ToolbarButtonComp() {
@@ -22429,17 +24851,19 @@ var ToolbarButtonComp = /** @class */ (function (_super) {
             _this.props.showTooltip(_this.refs.el);
         };
         _this.execCommand = function () {
-            var _a = _this.props, item = _a.item, execCommand = _a.execCommand, setPopupInfo = _a.setPopupInfo, getBound = _a.getBound;
+            var _a = _this.props, item = _a.item, execCommand = _a.execCommand, setPopupInfo = _a.setPopupInfo, getBound = _a.getBound, eventEmitter = _a.eventEmitter;
             var command = item.command, name = item.name, popup = item.popup;
             if (command) {
                 execCommand(command);
             }
             else {
                 var popupName = popup ? 'customPopupBody' : name;
+                var initialValues = eventEmitter.emit('query', 'getPopupInitialValues', { popupName: popupName })[0];
                 var info = createPopupInfo(popupName, {
                     el: _this.refs.el,
                     pos: getBound(_this.refs.el),
                     popup: popup,
+                    initialValues: initialValues,
                 });
                 if (info) {
                     setPopupInfo(info);
@@ -22460,7 +24884,7 @@ var ToolbarButtonComp = /** @class */ (function (_super) {
         var _a = this.props, setItemWidth = _a.setItemWidth, item = _a.item;
         // set width only if it is not a dropdown toolbar
         if (setItemWidth) {
-            setItemWidth(item.name, getOuterWidth(this.refs.el) + (item.hidden ? DEFAULT_WIDTH$1 : 0));
+            setItemWidth(item.name, getOuterWidth(this.refs.el) + (item.hidden ? DEFAULT_WIDTH : 0));
         }
     };
     ToolbarButtonComp.prototype.render = function () {
@@ -22601,8 +25025,7 @@ var DropdownToolbarButtonComp = /** @class */ (function (_super) {
 var DropdownToolbarButton = connectHOC(DropdownToolbarButtonComp);
 var templateObject_1$4, templateObject_2$3;
 
-var DROPDOWN_WIDTH = 120;
-var DEFAULT_WIDTH = 80;
+var INLINE_PADDING = 50;
 var Toolbar = /** @class */ (function (_super) {
     __extends$1(Toolbar, _super);
     function Toolbar(props) {
@@ -22660,6 +25083,7 @@ var Toolbar = /** @class */ (function (_super) {
             activeTab: 'write',
         };
         _this.tooltipRef = { current: null };
+        _this.resizeObserver = new index(function () { return _this.handleResize(); });
         _this.addEvent();
         return _this;
     }
@@ -22693,9 +25117,13 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.addEvent = function () {
         var _this = this;
-        this.props.eventEmitter.listen('openPopup', this.openPopup);
-        this.handleResize = throttle_1(function () { return _this.setState(_this.classifyToolbarItems()); }, 200);
-        window.addEventListener('resize', this.handleResize);
+        var eventEmitter = this.props.eventEmitter;
+        this.handleResize = throttle_1(function () {
+            // reset toolbar items to re-layout toolbar items with each clientWidth
+            _this.setState({ items: _this.initialItems, dropdownItems: [] });
+            _this.setState(_this.classifyToolbarItems());
+        }, 200);
+        eventEmitter.listen('openPopup', this.openPopup);
     };
     Toolbar.prototype.appendTooltipToRoot = function () {
         var tooltip = "<div class=\"" + cls('tooltip') + "\" style=\"display:none\">\n        <div class=\"arrow\"></div>\n        <span class=\"text\"></span>\n      </div>";
@@ -22704,6 +25132,23 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.hiddenScrollSync = function () {
         return this.props.editorType === 'wysiwyg' || this.props.previewStyle === 'tab';
     };
+    Toolbar.prototype.movePrevItemToDropdownToolbar = function (itemIndex, items, group, dropdownGroup) {
+        var moveItem = function (targetGroup) {
+            var item = targetGroup.pop();
+            if (item) {
+                dropdownGroup.push(item);
+            }
+        };
+        if (itemIndex > 1) {
+            moveItem(group);
+        }
+        else {
+            var prevGroup = last$1(items);
+            if (prevGroup) {
+                moveItem(prevGroup);
+            }
+        }
+    };
     Toolbar.prototype.classifyToolbarItems = function () {
         var _this = this;
         var totalWidth = 0;
@@ -22712,13 +25157,25 @@ var Toolbar = /** @class */ (function (_super) {
         var dividerWidth = divider ? getOuterWidth(divider) : 0;
         var items = [];
         var dropdownItems = [];
-        this.initialItems.forEach(function (initialGroup, index) {
+        var moved = false;
+        this.initialItems.forEach(function (initialGroup, groupIndex) {
             var group = [];
             var dropdownGroup = [];
-            initialGroup.forEach(function (item) {
-                totalWidth += _this.itemWidthMap[item.name] || DEFAULT_WIDTH;
-                var target = totalWidth >= clientWidth - DROPDOWN_WIDTH ? dropdownGroup : group;
-                target.push(item);
+            initialGroup.forEach(function (item, itemIndex) {
+                if (!item.hidden) {
+                    totalWidth += _this.itemWidthMap[item.name];
+                    if (totalWidth > clientWidth - INLINE_PADDING) {
+                        // should move the prev item to dropdown toolbar for placing the more button
+                        if (!moved) {
+                            _this.movePrevItemToDropdownToolbar(itemIndex, items, group, dropdownGroup);
+                            moved = true;
+                        }
+                        dropdownGroup.push(item);
+                    }
+                    else {
+                        group.push(item);
+                    }
+                }
             });
             if (group.length) {
                 setGroupState(group);
@@ -22729,7 +25186,7 @@ var Toolbar = /** @class */ (function (_super) {
                 dropdownItems.push(dropdownGroup);
             }
             // add divider width
-            if (index < _this.state.items.length - 1) {
+            if (groupIndex < _this.state.items.length - 1) {
                 totalWidth += dividerWidth;
             }
         });
@@ -22737,11 +25194,12 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.mounted = function () {
         if (this.props.previewStyle === 'tab') {
-            this.props.eventEmitter.emit('changePreviewTabWrite');
+            this.props.eventEmitter.emit('changePreviewTabWrite', true);
         }
         // classify toolbar and dropdown toolbar after DOM has been rendered
         this.setState(this.classifyToolbarItems());
         this.appendTooltipToRoot();
+        this.resizeObserver.observe(this.refs.el);
     };
     Toolbar.prototype.updated = function (prevProps) {
         var _a = this.props, editorType = _a.editorType, previewStyle = _a.previewStyle, eventEmitter = _a.eventEmitter;
@@ -22760,6 +25218,7 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.beforeDestroy = function () {
         window.removeEventListener('resize', this.handleResize);
+        this.resizeObserver.disconnect();
         removeNode$1(this.tooltipRef.current);
     };
     Toolbar.prototype.render = function () {
@@ -22894,8 +25353,8 @@ var Layout = /** @class */ (function (_super) {
         var editorTypeClassName = cls(editorType === 'markdown' ? 'md-mode' : 'ww-mode');
         var previewClassName = cls('md') + "-" + previewStyle + "-style";
         var themeClassName = cls([theme !== 'light', theme + " "]);
-        return html(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <div\n        class=\"", "", "", "\"\n        ref=", "\n      >\n        <", "\n          ref=", "\n          eventEmitter=", "\n          previewStyle=", "\n          toolbarItems=", "\n          editorType=", "\n        />\n        <div\n          class=\"", " ", "\"\n          ref=", "\n        >\n          <div\n            class=\"", " ", "\"\n            ref=", "\n          >\n            <div class=\"", "\"></div>\n          </div>\n          <div\n            class=\"", "\"\n            ref=", "\n          />\n        </div>\n        ", "\n        <", " eventEmitter=", " />\n      </div>\n    "], ["\n      <div\n        class=\"", "", "", "\"\n        ref=", "\n      >\n        <", "\n          ref=", "\n          eventEmitter=", "\n          previewStyle=", "\n          toolbarItems=", "\n          editorType=", "\n        />\n        <div\n          class=\"", " ", "\"\n          ref=", "\n        >\n          <div\n            class=\"", " ", "\"\n            ref=", "\n          >\n            <div class=\"", "\"></div>\n          </div>\n          <div\n            class=\"", "\"\n            ref=", "\n          />\n        </div>\n        ",
-            "\n        <", " eventEmitter=", " />\n      </div>\n    "])), themeClassName, cls('defaultUI'), displayClassName, function (el) { return (_this.refs.el = el); }, Toolbar, function (toolbar) { return (_this.toolbar = toolbar); }, eventEmitter, previewStyle, toolbarItems, editorType, cls('main'), editorTypeClassName, function (el) { return (_this.refs.editorSection = el); }, cls('md-container'), previewClassName, function (el) { return (_this.refs.mdContainer = el); }, cls('md-splitter'), cls('ww-container'), function (el) { return (_this.refs.wwContainer = el); }, !hideModeSwitch && html(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["<", " eventEmitter=", " editorType=", " />"], ["<", " eventEmitter=", " editorType=", " />"])), Switch, eventEmitter, editorType), ContextMenu, eventEmitter);
+        return html(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <div\n        class=\"", "", "", "\"\n        ref=", "\n      >\n        <", "\n          ref=", "\n          eventEmitter=", "\n          previewStyle=", "\n          toolbarItems=", "\n          editorType=", "\n        />\n        <div\n          class=\"", " ", "\"\n          ref=", "\n        >\n          <div class=\"", "\">\n            <div\n              class=\"", " ", "\"\n              ref=", "\n            >\n              <div class=\"", "\"></div>\n            </div>\n            <div\n              class=\"", "\"\n              ref=", "\n            />\n          </div>\n        </div>\n        ", "\n        <", " eventEmitter=", " />\n      </div>\n    "], ["\n      <div\n        class=\"", "", "", "\"\n        ref=", "\n      >\n        <", "\n          ref=", "\n          eventEmitter=", "\n          previewStyle=", "\n          toolbarItems=", "\n          editorType=", "\n        />\n        <div\n          class=\"", " ", "\"\n          ref=", "\n        >\n          <div class=\"", "\">\n            <div\n              class=\"", " ", "\"\n              ref=", "\n            >\n              <div class=\"", "\"></div>\n            </div>\n            <div\n              class=\"", "\"\n              ref=", "\n            />\n          </div>\n        </div>\n        ",
+            "\n        <", " eventEmitter=", " />\n      </div>\n    "])), themeClassName, cls('defaultUI'), displayClassName, function (el) { return (_this.refs.el = el); }, Toolbar, function (toolbar) { return (_this.toolbar = toolbar); }, eventEmitter, previewStyle, toolbarItems, editorType, cls('main'), editorTypeClassName, function (el) { return (_this.refs.editorSection = el); }, cls('main-container'), cls('md-container'), previewClassName, function (el) { return (_this.refs.mdContainer = el); }, cls('md-splitter'), cls('ww-container'), function (el) { return (_this.refs.wwContainer = el); }, !hideModeSwitch && html(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["<", " eventEmitter=", " editorType=", " />"], ["<", " eventEmitter=", " editorType=", " />"])), Switch, eventEmitter, editorType), ContextMenu, eventEmitter);
     };
     Layout.prototype.addEvent = function () {
         var eventEmitter = this.props.eventEmitter;