@toast-ui/editor 3.1.2 → 3.1.5

package/dist/toastui-editor.js

@@ -1,7 +1,7 @@
 /*!
  * @toast-ui/editor
- * @version 3.1.2 | Mon Dec 27 2021
- * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ * @version 3.1.5 | Sat Apr 23 2022
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  * @license MIT
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -13,7 +13,7 @@
 		exports["toastui"] = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
 	else
 		root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = factory(root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__818__, __WEBPACK_EXTERNAL_MODULE__168__, __WEBPACK_EXTERNAL_MODULE__925__, __WEBPACK_EXTERNAL_MODULE__703__, __WEBPACK_EXTERNAL_MODULE__959__, __WEBPACK_EXTERNAL_MODULE__676__, __WEBPACK_EXTERNAL_MODULE__747__, __WEBPACK_EXTERNAL_MODULE__754__) {
+})(self, function(__WEBPACK_EXTERNAL_MODULE__695__, __WEBPACK_EXTERNAL_MODULE__412__, __WEBPACK_EXTERNAL_MODULE__479__, __WEBPACK_EXTERNAL_MODULE__481__, __WEBPACK_EXTERNAL_MODULE__43__, __WEBPACK_EXTERNAL_MODULE__814__, __WEBPACK_EXTERNAL_MODULE__785__, __WEBPACK_EXTERNAL_MODULE__311__) {
 return /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -2961,67 +2961,67 @@ module.exports = isUndefined;
 
 /***/ }),
 
-/***/ 818:
+/***/ 695:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__818__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__695__;
 
 /***/ }),
 
-/***/ 168:
+/***/ 412:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__168__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__412__;
 
 /***/ }),
 
-/***/ 925:
+/***/ 479:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__925__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__479__;
 
 /***/ }),
 
-/***/ 703:
+/***/ 481:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__703__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__481__;
 
 /***/ }),
 
-/***/ 959:
+/***/ 43:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__959__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__43__;
 
 /***/ }),
 
-/***/ 676:
+/***/ 814:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__676__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__814__;
 
 /***/ }),
 
-/***/ 747:
+/***/ 785:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__747__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__785__;
 
 /***/ }),
 
-/***/ 754:
+/***/ 311:
 /***/ (function(module) {
 
 "use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__754__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__311__;
 
 /***/ })
 
@@ -3348,7 +3348,7 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
 }
 
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-model","commonjs2":"prosemirror-model","amd":"prosemirror-model"}
-var external_commonjs_prosemirror_model_commonjs2_prosemirror_model_amd_prosemirror_model_ = __webpack_require__(959);
+var external_commonjs_prosemirror_model_commonjs2_prosemirror_model_amd_prosemirror_model_ = __webpack_require__(43);
 // EXTERNAL MODULE: ../../node_modules/tui-code-snippet/collection/forEachOwnProperties.js
 var forEachOwnProperties = __webpack_require__(956);
 var forEachOwnProperties_default = /*#__PURE__*/__webpack_require__.n(forEachOwnProperties);
@@ -3388,9 +3388,11 @@ var sendHostname_default = /*#__PURE__*/__webpack_require__.n(sendHostname);
 var isMac = /Mac/.test(navigator.platform);
 var reSpaceMoreThanOne = /[\u0020]+/g;
 var reEscapeChars = /[>(){}[\]+-.!#|]/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 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 reMdImageSyntax = /!\[.*\]\(.*\)/g;
+var reEscapedCharInLinkSyntax = /[[\]]/g; //
 var XMLSPECIAL = '[&<>"]';
 var reXmlSpecial = new RegExp(XMLSPECIAL, 'g');
 function replaceUnsafeChar(char) {
@@ -3462,6 +3464,18 @@ function isNeedEscapeText(text) {
     });
     return needEscape;
 }
+function escapeTextForLink(text) {
+    var imageSyntaxRanges = [];
+    var result = reMdImageSyntax.exec(text);
+    while (result) {
+        imageSyntaxRanges.push([result.index, result.index + result[0].length]);
+        result = reMdImageSyntax.exec(text);
+    }
+    return text.replace(reEscapedCharInLinkSyntax, function (matched, offset) {
+        var isDelimiter = imageSyntaxRanges.some(function (range) { return offset > range[0] && offset < range[1]; });
+        return isDelimiter ? matched : "\\" + matched;
+    });
+}
 function common_escape(text) {
     var replacer = function (matched) { return "\\" + matched; };
     var escapedText = text.replace(reSpaceMoreThanOne, ' ');
@@ -3585,19 +3599,22 @@ function getSortedNumPair(valueA, valueB) {
 }
 
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-view","commonjs2":"prosemirror-view","amd":"prosemirror-view"}
-var external_commonjs_prosemirror_view_commonjs2_prosemirror_view_amd_prosemirror_view_ = __webpack_require__(754);
+var external_commonjs_prosemirror_view_commonjs2_prosemirror_view_amd_prosemirror_view_ = __webpack_require__(311);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-transform","commonjs2":"prosemirror-transform","amd":"prosemirror-transform"}
-var external_commonjs_prosemirror_transform_commonjs2_prosemirror_transform_amd_prosemirror_transform_ = __webpack_require__(747);
+var external_commonjs_prosemirror_transform_commonjs2_prosemirror_transform_amd_prosemirror_transform_ = __webpack_require__(785);
+// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/collection/toArray.js
+var collection_toArray = __webpack_require__(990);
+var toArray_default = /*#__PURE__*/__webpack_require__.n(collection_toArray);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-state","commonjs2":"prosemirror-state","amd":"prosemirror-state"}
-var external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_ = __webpack_require__(676);
+var external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_ = __webpack_require__(814);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-keymap","commonjs2":"prosemirror-keymap","amd":"prosemirror-keymap"}
-var external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_ = __webpack_require__(703);
+var external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_ = __webpack_require__(481);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-commands","commonjs2":"prosemirror-commands","amd":"prosemirror-commands"}
-var external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_ = __webpack_require__(818);
+var external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_ = __webpack_require__(695);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-inputrules","commonjs2":"prosemirror-inputrules","amd":"prosemirror-inputrules"}
-var external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_ = __webpack_require__(925);
+var external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_ = __webpack_require__(479);
 // EXTERNAL MODULE: external {"commonjs":"prosemirror-history","commonjs2":"prosemirror-history","amd":"prosemirror-history"}
-var external_commonjs_prosemirror_history_commonjs2_prosemirror_history_amd_prosemirror_history_ = __webpack_require__(168);
+var external_commonjs_prosemirror_history_commonjs2_prosemirror_history_amd_prosemirror_history_ = __webpack_require__(412);
 ;// CONCATENATED MODULE: ./src/helper/manipulation.ts
 
 
@@ -3956,22 +3973,275 @@ function placeholder(options) {
     });
 }
 
+// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/type/isArray.js
+var isArray = __webpack_require__(322);
+var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray);
+// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/domUtil/hasClass.js
+var hasClass = __webpack_require__(714);
+var hasClass_default = /*#__PURE__*/__webpack_require__.n(hasClass);
+// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/domUtil/matches.js
+var matches = __webpack_require__(471);
+var matches_default = /*#__PURE__*/__webpack_require__.n(matches);
+;// CONCATENATED MODULE: ./src/utils/constants.ts
+var TAG_NAME = '[A-Za-z][A-Za-z0-9-]*';
+var ATTRIBUTE_NAME = '[a-zA-Z_:][a-zA-Z0-9:._-]*';
+var UNQUOTED_VALUE = '[^"\'=<>`\\x00-\\x20]+';
+var SINGLE_QUOTED_VALUE = "'[^']*'";
+var DOUBLE_QUOTED_VALUE = '"[^"]*"';
+var ATTRIBUTE_VALUE = "(?:" + UNQUOTED_VALUE + "|" + SINGLE_QUOTED_VALUE + "|" + DOUBLE_QUOTED_VALUE + ")";
+var ATTRIBUTE_VALUE_SPEC = "" + '(?:\\s*=\\s*' + ATTRIBUTE_VALUE + ")";
+var ATTRIBUTE = "" + '(?:\\s+' + ATTRIBUTE_NAME + ATTRIBUTE_VALUE_SPEC + "?)";
+var OPEN_TAG = "<(" + TAG_NAME + ")(" + ATTRIBUTE + ")*\\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 reHTMLComment = /<! ---->|<!--(?:-?[^>-])(?:-?[^-])*-->/;
+var ALTERNATIVE_TAG_FOR_BR = '</p><p>';
+
+;// CONCATENATED MODULE: ./src/utils/dom.ts
+
+
+
+
+
+
+
+
+
+
+function isPositionInBox(style, offsetX, offsetY) {
+    var left = parseInt(style.left, 10);
+    var top = parseInt(style.top, 10);
+    var width = parseInt(style.width, 10) + parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+    var height = parseInt(style.height, 10) + parseInt(style.paddingTop, 10) + parseInt(style.paddingBottom, 10);
+    return offsetX >= left && offsetX <= left + width && offsetY >= top && offsetY <= top + height;
+}
+var CLS_PREFIX = 'toastui-editor-';
+function cls() {
+    var names = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        names[_i] = arguments[_i];
+    }
+    var result = [];
+    for (var _a = 0, names_1 = names; _a < names_1.length; _a++) {
+        var name = names_1[_a];
+        var className = void 0;
+        if (Array.isArray(name)) {
+            className = name[0] ? name[1] : null;
+        }
+        else {
+            className = name;
+        }
+        if (className) {
+            result.push("" + CLS_PREFIX + className);
+        }
+    }
+    return result.join(' ');
+}
+function clsWithMdPrefix() {
+    var names = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        names[_i] = arguments[_i];
+    }
+    return names.map(function (className) { return CLS_PREFIX + "md-" + className; }).join(' ');
+}
+function isTextNode(node) {
+    return (node === null || node === void 0 ? void 0 : node.nodeType) === Node.TEXT_NODE;
+}
+function isElemNode(node) {
+    return node && node.nodeType === Node.ELEMENT_NODE;
+}
+function findNodes(element, selector) {
+    var nodeList = toArray_default()(element.querySelectorAll(selector));
+    if (nodeList.length) {
+        return nodeList;
+    }
+    return [];
+}
+function appendNodes(node, nodesToAppend) {
+    nodesToAppend = isArray_default()(nodesToAppend) ? toArray_default()(nodesToAppend) : [nodesToAppend];
+    nodesToAppend.forEach(function (nodeToAppend) {
+        node.appendChild(nodeToAppend);
+    });
+}
+function insertBeforeNode(insertedNode, node) {
+    if (node.parentNode) {
+        node.parentNode.insertBefore(insertedNode, node);
+    }
+}
+function removeNode(node) {
+    if (node.parentNode) {
+        node.parentNode.removeChild(node);
+    }
+}
+function unwrapNode(node) {
+    var result = [];
+    while (node.firstChild) {
+        result.push(node.firstChild);
+        if (node.parentNode) {
+            node.parentNode.insertBefore(node.firstChild, node);
+        }
+    }
+    removeNode(node);
+    return result;
+}
+function toggleClass(element, className, state) {
+    if (isUndefined_default()(state)) {
+        state = !hasClass_default()(element, className);
+    }
+    var toggleFn = state ? (addClass_default()) : (removeClass_default());
+    toggleFn(element, className);
+}
+function createElementWith(contents, target) {
+    var container = document.createElement('div');
+    if (isString_default()(contents)) {
+        container.innerHTML = contents;
+    }
+    else {
+        container.appendChild(contents);
+    }
+    var firstChild = container.firstChild;
+    if (target) {
+        target.appendChild(firstChild);
+    }
+    return firstChild;
+}
+function getOuterWidth(el) {
+    var computed = window.getComputedStyle(el);
+    return (['margin-left', 'margin-right'].reduce(function (acc, type) { return acc + parseInt(computed.getPropertyValue(type), 10); }, 0) + el.offsetWidth);
+}
+function closest(node, found) {
+    var condition;
+    if (isString_default()(found)) {
+        condition = function (target) { return matches_default()(target, found); };
+    }
+    else {
+        condition = function (target) { return target === found; };
+    }
+    while (node && node !== document) {
+        if (isElemNode(node) && condition(node)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+    return null;
+}
+function getTotalOffset(el, root) {
+    var offsetTop = 0;
+    var offsetLeft = 0;
+    while (el && el !== root) {
+        var top = el.offsetTop, left = el.offsetLeft, offsetParent = el.offsetParent;
+        offsetTop += top;
+        offsetLeft += left;
+        if (offsetParent === root.offsetParent) {
+            break;
+        }
+        el = el.offsetParent;
+    }
+    return { offsetTop: offsetTop, offsetLeft: offsetLeft };
+}
+function finalizeHtml(html, needHtmlText) {
+    var result;
+    if (needHtmlText) {
+        result = html.innerHTML;
+    }
+    else {
+        var frag = document.createDocumentFragment();
+        var childNodes = toArray(html.childNodes);
+        var length = childNodes.length;
+        for (var i = 0; i < length; i += 1) {
+            frag.appendChild(childNodes[i]);
+        }
+        result = frag;
+    }
+    return result;
+}
+function empty(node) {
+    while (node.firstChild) {
+        node.removeChild(node.firstChild);
+    }
+}
+function appendNode(node, appended) {
+    if (isString(appended)) {
+        node.insertAdjacentHTML('beforeend', appended);
+    }
+    else {
+        var nodes = appended.length
+            ? toArray(appended)
+            : [appended];
+        for (var i = 0, len = nodes.length; i < len; i += 1) {
+            node.appendChild(nodes[i]);
+        }
+    }
+}
+function prependNode(node, appended) {
+    if (isString(appended)) {
+        node.insertAdjacentHTML('afterbegin', appended);
+    }
+    else {
+        var nodes = appended.length
+            ? toArray(appended)
+            : [appended];
+        for (var i = nodes.length - 1, len = 0; i >= len; i -= 1) {
+            node.insertBefore(nodes[i], node.firstChild);
+        }
+    }
+}
+function setAttributes(attributes, element) {
+    Object.keys(attributes).forEach(function (attrName) {
+        if (isNil(attributes[attrName])) {
+            element.removeAttribute(attrName);
+        }
+        else {
+            element.setAttribute(attrName, attributes[attrName]);
+        }
+    });
+}
+function replaceBRWithEmptyBlock(html) {
+    // 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 = replacedHTML.match(reHTMLTag);
+    htmlTagMatched === null || htmlTagMatched === void 0 ? void 0 : htmlTagMatched.forEach(function (htmlTag, index) {
+        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 && !/br/i.test(openTagMatched[1])) {
+                    var tagName = openTagMatched[1];
+                    alternativeTag = "</" + tagName + "><" + tagName + ">";
+                }
+            }
+            replacedHTML = replacedHTML.replace(reBR, alternativeTag);
+        }
+    });
+    return replacedHTML;
+}
+
 ;// CONCATENATED MODULE: ./src/plugins/popupWidget.ts
 
 
+
 var pluginKey = new external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.PluginKey('widget');
+var MARGIN = 5;
 var PopupWidget = /** @class */ (function () {
-    function PopupWidget(eventEmitter) {
+    function PopupWidget(view, eventEmitter) {
         var _this = this;
         this.popup = null;
         this.removeWidget = function () {
             if (_this.popup) {
-                document.body.removeChild(_this.popup);
+                _this.rootEl.removeChild(_this.popup);
                 _this.popup = null;
             }
         };
+        this.rootEl = view.dom.parentElement;
         this.eventEmitter = eventEmitter;
         this.eventEmitter.listen('blur', this.removeWidget);
+        this.eventEmitter.listen('loadUI', function () {
+            _this.rootEl = closest(view.dom.parentElement, "." + cls('defaultUI'));
+        });
         this.eventEmitter.listen('removePopupWidget', this.removeWidget);
     }
     PopupWidget.prototype.update = function (view) {
@@ -3981,10 +4251,14 @@ var PopupWidget = /** @class */ (function () {
             var node = widget.node, style = widget.style;
             var _a = view.coordsAtPos(widget.pos), top = _a.top, left = _a.left, bottom = _a.bottom;
             var height = bottom - top;
-            css_default()(node, { position: 'absolute', left: left + "px", opacity: '0' });
-            document.body.appendChild(node);
+            var rect = this.rootEl.getBoundingClientRect();
+            var relTopPos = top - rect.top;
+            css_default()(node, { opacity: '0' });
+            this.rootEl.appendChild(node);
             css_default()(node, {
-                top: (style === 'bottom' ? top + height : top - node.clientHeight - height) + "px",
+                position: 'absolute',
+                left: left - rect.left + MARGIN + "px",
+                top: (style === 'bottom' ? relTopPos + height - MARGIN : relTopPos - height) + "px",
                 opacity: '1',
             });
             this.popup = node;
@@ -4007,8 +4281,8 @@ function addWidget(eventEmitter) {
                 return tr.getMeta('widget');
             },
         },
-        view: function () {
-            return new PopupWidget(eventEmitter);
+        view: function (editorView) {
+            return new PopupWidget(editorView, eventEmitter);
         },
     });
 }
@@ -4016,9 +4290,6 @@ function addWidget(eventEmitter) {
 // EXTERNAL MODULE: ../../node_modules/tui-code-snippet/collection/forEachArray.js
 var forEachArray = __webpack_require__(893);
 var forEachArray_default = /*#__PURE__*/__webpack_require__.n(forEachArray);
-// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/collection/toArray.js
-var collection_toArray = __webpack_require__(990);
-var toArray_default = /*#__PURE__*/__webpack_require__.n(collection_toArray);
 ;// CONCATENATED MODULE: ./src/helper/image.ts
 
 function addDefaultImageBlobHook(eventEmitter) {
@@ -4180,6 +4451,7 @@ var Widget = /** @class */ (function (_super) {
 
 var EditorBase = /** @class */ (function () {
     function EditorBase(eventEmitter) {
+        this.timer = null;
         this.el = document.createElement('div');
         this.el.className = 'toastui-editor';
         this.eventEmitter = eventEmitter;
@@ -4204,10 +4476,9 @@ var EditorBase = /** @class */ (function () {
     };
     Object.defineProperty(EditorBase.prototype, "defaultPlugins", {
         get: function () {
-            var _a = getDefaultCommands(), undo = _a.undo, redo = _a.redo;
             var rules = this.createInputRules();
             var plugins = __spreadArray(__spreadArray([], this.keymaps), [
-                (0,external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_.keymap)(__assign({ 'Mod-z': undo(), 'Shift-Mod-z': redo(), 'Shift-Enter': external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.baseKeymap.Enter }, external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.baseKeymap)),
+                (0,external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_.keymap)(__assign({ 'Shift-Enter': external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.baseKeymap.Enter }, external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.baseKeymap)),
                 (0,external_commonjs_prosemirror_history_commonjs2_prosemirror_history_amd_prosemirror_history_.history)(),
                 placeholder(this.placeholder),
                 addWidget(this.eventEmitter),
@@ -4244,6 +4515,12 @@ var EditorBase = /** @class */ (function () {
         });
         return rules.length ? (0,external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_.inputRules)({ rules: rules }) : null;
     };
+    EditorBase.prototype.clearTimer = function () {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
     EditorBase.prototype.createSchema = function () {
         return new external_commonjs_prosemirror_model_commonjs2_prosemirror_model_amd_prosemirror_model_.Schema({
             nodes: this.specs.nodes,
@@ -4251,7 +4528,13 @@ var EditorBase = /** @class */ (function () {
         });
     };
     EditorBase.prototype.createKeymaps = function (useCommandShortcut) {
-        return useCommandShortcut ? this.specs.keymaps() : [];
+        var _a = getDefaultCommands(), undo = _a.undo, redo = _a.redo;
+        var allKeymaps = this.specs.keymaps(useCommandShortcut);
+        var historyKeymap = {
+            'Mod-z': undo(),
+            'Shift-Mod-z': redo(),
+        };
+        return useCommandShortcut ? allKeymaps.concat((0,external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_.keymap)(historyKeymap)) : allKeymaps;
     };
     EditorBase.prototype.createCommands = function () {
         return this.specs.commands(this.view);
@@ -4262,8 +4545,9 @@ var EditorBase = /** @class */ (function () {
     };
     EditorBase.prototype.focus = function () {
         var _this = this;
+        this.clearTimer();
         // prevent the error for IE11
-        setTimeout(function () {
+        this.timer = setTimeout(function () {
             _this.view.focus();
             _this.view.dispatch(_this.view.state.tr.scrollIntoView());
         });
@@ -4273,6 +4557,7 @@ var EditorBase = /** @class */ (function () {
     };
     EditorBase.prototype.destroy = function () {
         var _this = this;
+        this.clearTimer();
         this.view.destroy();
         Object.keys(this).forEach(function (prop) {
             delete _this[prop];
@@ -4323,6 +4608,26 @@ var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction);
 
 
 
+
+var defaultCommandShortcuts = [
+    'Enter',
+    'Shift-Enter',
+    'Mod-Enter',
+    'Tab',
+    'Shift-Tab',
+    'Delete',
+    'Backspace',
+    'Mod-Delete',
+    'Mod-Backspace',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Mod-d',
+    'Mod-D',
+    'Alt-ArrowUp',
+    'Alt-ArrowDown',
+];
 function execCommand(view, command, payload) {
     view.focus();
     return command(payload)(view.state, view.dispatch, view);
@@ -4339,312 +4644,75 @@ var SpecManager = /** @class */ (function () {
                 var _b;
                 var name = _a.name, schema = _a.schema;
                 return __assign(__assign({}, nodes), (_b = {}, _b[name] = schema, _b));
-            }, {});
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SpecManager.prototype, "marks", {
-        get: function () {
-            return this.specs
-                .filter(function (spec) { return spec.type === 'mark'; })
-                .reduce(function (marks, _a) {
-                var _b;
-                var name = _a.name, schema = _a.schema;
-                return __assign(__assign({}, marks), (_b = {}, _b[name] = schema, _b));
-            }, {});
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SpecManager.prototype.commands = function (view, addedCommands) {
-        var specCommands = this.specs
-            .filter(function (_a) {
-            var commands = _a.commands;
-            return commands;
-        })
-            .reduce(function (allCommands, spec) {
-            var commands = {};
-            var specCommand = spec.commands();
-            if (isFunction_default()(specCommand)) {
-                commands[spec.name] = function (payload) { return execCommand(view, specCommand, payload); };
-            }
-            else {
-                Object.keys(specCommand).forEach(function (name) {
-                    commands[name] = function (payload) { return execCommand(view, specCommand[name], payload); };
-                });
-            }
-            return __assign(__assign({}, allCommands), commands);
-        }, {});
-        var defaultCommands = getDefaultCommands();
-        Object.keys(defaultCommands).forEach(function (name) {
-            specCommands[name] = function (payload) { return execCommand(view, defaultCommands[name], payload); };
-        });
-        if (addedCommands) {
-            Object.keys(addedCommands).forEach(function (name) {
-                specCommands[name] = function (payload) { return execCommand(view, addedCommands[name], payload); };
-            });
-        }
-        return specCommands;
-    };
-    SpecManager.prototype.keymaps = function () {
-        var specKeymaps = this.specs.filter(function (spec) { return spec.keymaps; }).map(function (spec) { return spec.keymaps(); });
-        return specKeymaps.map(function (keys) { return (0,external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_.keymap)(keys); });
-    };
-    SpecManager.prototype.setContext = function (context) {
-        this.specs.forEach(function (spec) {
-            spec.setContext(context);
-        });
-    };
-    return SpecManager;
-}());
-/* harmony default export */ var specManager = (SpecManager);
-
-// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/type/isArray.js
-var isArray = __webpack_require__(322);
-var isArray_default = /*#__PURE__*/__webpack_require__.n(isArray);
-// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/domUtil/hasClass.js
-var hasClass = __webpack_require__(714);
-var hasClass_default = /*#__PURE__*/__webpack_require__.n(hasClass);
-// EXTERNAL MODULE: ../../node_modules/tui-code-snippet/domUtil/matches.js
-var matches = __webpack_require__(471);
-var matches_default = /*#__PURE__*/__webpack_require__.n(matches);
-;// CONCATENATED MODULE: ./src/utils/constants.ts
-var TAG_NAME = '[A-Za-z][A-Za-z0-9-]*';
-var ATTRIBUTE_NAME = '[a-zA-Z_:][a-zA-Z0-9:._-]*';
-var UNQUOTED_VALUE = '[^"\'=<>`\\x00-\\x20]+';
-var SINGLE_QUOTED_VALUE = "'[^']*'";
-var DOUBLE_QUOTED_VALUE = '"[^"]*"';
-var ATTRIBUTE_VALUE = "(?:" + UNQUOTED_VALUE + "|" + SINGLE_QUOTED_VALUE + "|" + DOUBLE_QUOTED_VALUE + ")";
-var ATTRIBUTE_VALUE_SPEC = "" + '(?:\\s*=\\s*' + ATTRIBUTE_VALUE + ")";
-var ATTRIBUTE = "" + '(?:\\s+' + ATTRIBUTE_NAME + ATTRIBUTE_VALUE_SPEC + "?)";
-var OPEN_TAG = "<(" + TAG_NAME + ")(" + ATTRIBUTE + ")*\\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>';
-
-;// CONCATENATED MODULE: ./src/utils/dom.ts
-
-
-
-
-
-
-
-
-
-
-function isPositionInBox(style, offsetX, offsetY) {
-    var left = parseInt(style.left, 10);
-    var top = parseInt(style.top, 10);
-    var width = parseInt(style.width, 10) + parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-    var height = parseInt(style.height, 10) + parseInt(style.paddingTop, 10) + parseInt(style.paddingBottom, 10);
-    return offsetX >= left && offsetX <= left + width && offsetY >= top && offsetY <= top + height;
-}
-var CLS_PREFIX = 'toastui-editor-';
-function cls() {
-    var names = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        names[_i] = arguments[_i];
-    }
-    var result = [];
-    for (var _a = 0, names_1 = names; _a < names_1.length; _a++) {
-        var name = names_1[_a];
-        var className = void 0;
-        if (Array.isArray(name)) {
-            className = name[0] ? name[1] : null;
-        }
-        else {
-            className = name;
-        }
-        if (className) {
-            result.push("" + CLS_PREFIX + className);
-        }
-    }
-    return result.join(' ');
-}
-function clsWithMdPrefix() {
-    var names = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        names[_i] = arguments[_i];
-    }
-    return names.map(function (className) { return CLS_PREFIX + "md-" + className; }).join(' ');
-}
-function isTextNode(node) {
-    return (node === null || node === void 0 ? void 0 : node.nodeType) === Node.TEXT_NODE;
-}
-function isElemNode(node) {
-    return node && node.nodeType === Node.ELEMENT_NODE;
-}
-function findNodes(element, selector) {
-    var nodeList = toArray_default()(element.querySelectorAll(selector));
-    if (nodeList.length) {
-        return nodeList;
-    }
-    return [];
-}
-function appendNodes(node, nodesToAppend) {
-    nodesToAppend = isArray_default()(nodesToAppend) ? toArray_default()(nodesToAppend) : [nodesToAppend];
-    nodesToAppend.forEach(function (nodeToAppend) {
-        node.appendChild(nodeToAppend);
-    });
-}
-function insertBeforeNode(insertedNode, node) {
-    if (node.parentNode) {
-        node.parentNode.insertBefore(insertedNode, node);
-    }
-}
-function removeNode(node) {
-    if (node.parentNode) {
-        node.parentNode.removeChild(node);
-    }
-}
-function unwrapNode(node) {
-    var result = [];
-    while (node.firstChild) {
-        result.push(node.firstChild);
-        if (node.parentNode) {
-            node.parentNode.insertBefore(node.firstChild, node);
-        }
-    }
-    removeNode(node);
-    return result;
-}
-function toggleClass(element, className, state) {
-    if (isUndefined_default()(state)) {
-        state = !hasClass_default()(element, className);
-    }
-    var toggleFn = state ? (addClass_default()) : (removeClass_default());
-    toggleFn(element, className);
-}
-function createElementWith(contents, target) {
-    var container = document.createElement('div');
-    if (isString_default()(contents)) {
-        container.innerHTML = contents;
-    }
-    else {
-        container.appendChild(contents);
-    }
-    var firstChild = container.firstChild;
-    if (target) {
-        target.appendChild(firstChild);
-    }
-    return firstChild;
-}
-function getOuterWidth(el) {
-    var computed = window.getComputedStyle(el);
-    return (['margin-left', 'margin-right'].reduce(function (acc, type) { return acc + parseInt(computed.getPropertyValue(type), 10); }, 0) + el.offsetWidth);
-}
-function closest(node, found) {
-    var condition;
-    if (isString_default()(found)) {
-        condition = function (target) { return matches_default()(target, found); };
-    }
-    else {
-        condition = function (target) { return target === found; };
-    }
-    while (node && node !== document) {
-        if (isElemNode(node) && condition(node)) {
-            return node;
-        }
-        node = node.parentNode;
-    }
-    return null;
-}
-function getTotalOffset(el, root) {
-    var offsetTop = 0;
-    var offsetLeft = 0;
-    while (el && el !== root) {
-        var top = el.offsetTop, left = el.offsetLeft, offsetParent = el.offsetParent;
-        offsetTop += top;
-        offsetLeft += left;
-        if (offsetParent === root.offsetParent) {
-            break;
-        }
-        el = el.offsetParent;
-    }
-    return { offsetTop: offsetTop, offsetLeft: offsetLeft };
-}
-function finalizeHtml(html, needHtmlText) {
-    var result;
-    if (needHtmlText) {
-        result = html.innerHTML;
-    }
-    else {
-        var frag = document.createDocumentFragment();
-        var childNodes = toArray(html.childNodes);
-        var length = childNodes.length;
-        for (var i = 0; i < length; i += 1) {
-            frag.appendChild(childNodes[i]);
-        }
-        result = frag;
-    }
-    return result;
-}
-function empty(node) {
-    while (node.firstChild) {
-        node.removeChild(node.firstChild);
-    }
-}
-function appendNode(node, appended) {
-    if (isString(appended)) {
-        node.insertAdjacentHTML('beforeend', appended);
-    }
-    else {
-        var nodes = appended.length
-            ? toArray(appended)
-            : [appended];
-        for (var i = 0, len = nodes.length; i < len; i += 1) {
-            node.appendChild(nodes[i]);
-        }
-    }
-}
-function prependNode(node, appended) {
-    if (isString(appended)) {
-        node.insertAdjacentHTML('afterbegin', appended);
-    }
-    else {
-        var nodes = appended.length
-            ? toArray(appended)
-            : [appended];
-        for (var i = nodes.length - 1, len = 0; i >= len; i -= 1) {
-            node.insertBefore(nodes[i], node.firstChild);
-        }
-    }
-}
-function setAttributes(attributes, element) {
-    Object.keys(attributes).forEach(function (attrName) {
-        if (isNil(attributes[attrName])) {
-            element.removeAttribute(attrName);
-        }
-        else {
-            element.setAttribute(attrName, attributes[attrName]);
-        }
+            }, {});
+        },
+        enumerable: false,
+        configurable: true
     });
-}
-function replaceBRWithEmptyBlock(html) {
-    // 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 = replacedHTML.match(reHTMLTag);
-    htmlTagMatched === null || htmlTagMatched === void 0 ? void 0 : htmlTagMatched.forEach(function (htmlTag, index) {
-        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 && !/br/i.test(openTagMatched[1])) {
-                    var tagName = openTagMatched[1];
-                    alternativeTag = "</" + tagName + "><" + tagName + ">";
-                }
+    Object.defineProperty(SpecManager.prototype, "marks", {
+        get: function () {
+            return this.specs
+                .filter(function (spec) { return spec.type === 'mark'; })
+                .reduce(function (marks, _a) {
+                var _b;
+                var name = _a.name, schema = _a.schema;
+                return __assign(__assign({}, marks), (_b = {}, _b[name] = schema, _b));
+            }, {});
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpecManager.prototype.commands = function (view, addedCommands) {
+        var specCommands = this.specs
+            .filter(function (_a) {
+            var commands = _a.commands;
+            return commands;
+        })
+            .reduce(function (allCommands, spec) {
+            var commands = {};
+            var specCommand = spec.commands();
+            if (isFunction_default()(specCommand)) {
+                commands[spec.name] = function (payload) { return execCommand(view, specCommand, payload); };
             }
-            replacedHTML = replacedHTML.replace(reBR, alternativeTag);
+            else {
+                Object.keys(specCommand).forEach(function (name) {
+                    commands[name] = function (payload) { return execCommand(view, specCommand[name], payload); };
+                });
+            }
+            return __assign(__assign({}, allCommands), commands);
+        }, {});
+        var defaultCommands = getDefaultCommands();
+        Object.keys(defaultCommands).forEach(function (name) {
+            specCommands[name] = function (payload) { return execCommand(view, defaultCommands[name], payload); };
+        });
+        if (addedCommands) {
+            Object.keys(addedCommands).forEach(function (name) {
+                specCommands[name] = function (payload) { return execCommand(view, addedCommands[name], payload); };
+            });
         }
-    });
-    return replacedHTML;
-}
+        return specCommands;
+    };
+    SpecManager.prototype.keymaps = function (useCommandShortcut) {
+        var specKeymaps = this.specs.filter(function (spec) { return spec.keymaps; }).map(function (spec) { return spec.keymaps(); });
+        return specKeymaps.map(function (keys) {
+            if (!useCommandShortcut) {
+                Object.keys(keys).forEach(function (key) {
+                    if (!common_includes(defaultCommandShortcuts, key)) {
+                        delete keys[key];
+                    }
+                });
+            }
+            return (0,external_commonjs_prosemirror_keymap_commonjs2_prosemirror_keymap_amd_prosemirror_keymap_.keymap)(keys);
+        });
+    };
+    SpecManager.prototype.setContext = function (context) {
+        this.specs.forEach(function (spec) {
+            spec.setContext(context);
+        });
+    };
+    return SpecManager;
+}());
+/* harmony default export */ var specManager = (SpecManager);
 
 ;// CONCATENATED MODULE: ./src/markdown/helper/pos.ts
 
@@ -5121,34 +5189,61 @@ function getMarkForAdding(node, toastMark) {
 ;// CONCATENATED MODULE: ./src/markdown/plugins/previewHighlight.ts
 
 
+
+var defaultToolbarStateKeys = [
+    'taskList',
+    'orderedList',
+    'bulletList',
+    'table',
+    'strong',
+    'emph',
+    'strike',
+    'heading',
+    'thematicBreak',
+    'blockQuote',
+    'code',
+    'codeBlock',
+    'indent',
+    'outdent',
+];
 function getToolbarStateType(mdNode) {
+    var type = mdNode.type;
     if (isListNode(mdNode)) {
         if (mdNode.listData.task) {
             return 'taskList';
         }
         return mdNode.listData.type === 'ordered' ? 'orderedList' : 'bulletList';
     }
-    if (mdNode.type.indexOf('table') !== -1) {
+    if (type.indexOf('table') !== -1) {
         return 'table';
     }
-    return mdNode.type;
+    if (!common_includes(defaultToolbarStateKeys, type)) {
+        return null;
+    }
+    return type;
 }
 function getToolbarState(targetNode) {
-    var toolbarState = {};
+    var toolbarState = {
+        indent: { active: false, disabled: true },
+        outdent: { active: false, disabled: true },
+    };
     var listEnabled = true;
     traverseParentNodes(targetNode, function (mdNode) {
         var type = getToolbarStateType(mdNode);
-        if (type === 'customBlock' || type === 'image' || type === 'link') {
+        if (!type) {
             return;
         }
         if (type === 'bulletList' || type === 'orderedList') {
+            // to apply the nearlist list state in the nested list
             if (listEnabled) {
-                toolbarState[type] = true;
+                toolbarState[type] = { active: true };
+                toolbarState.indent.disabled = false;
+                toolbarState.outdent.disabled = false;
                 listEnabled = false;
             }
         }
         else {
-            toolbarState[type] = true;
+            toolbarState[type] = { active: true };
         }
     });
     return toolbarState;
@@ -6616,57 +6711,6 @@ var Code = /** @class */ (function (_super) {
 }(mark));
 
 
-;// CONCATENATED MODULE: ./src/utils/encoder.ts
-var encoderList = [
-    {
-        regExp: /\(/g,
-        encoded: '%28',
-        escaped: '\\(',
-    },
-    {
-        regExp: /\)/g,
-        encoded: '%29',
-        escaped: '\\)',
-    },
-    {
-        regExp: /\[/g,
-        encoded: '%5B',
-        escaped: '\\[',
-    },
-    {
-        regExp: /\]/g,
-        encoded: '%5D',
-        escaped: '\\]',
-    },
-    {
-        regExp: /</g,
-        encoded: '%3C',
-        escaped: '\\<',
-    },
-    {
-        regExp: />/g,
-        encoded: '%3E',
-        escaped: '\\>',
-    },
-    {
-        regExp: / /g,
-        encoded: '%20',
-        escaped: ' ',
-    },
-];
-function escapeMarkdownText(text) {
-    return encoderList.reduce(function (result, _a) {
-        var regExp = _a.regExp, escaped = _a.escaped;
-        return result.replace(regExp, escaped);
-    }, text);
-}
-function encodeMarkdownText(text) {
-    return encoderList.reduce(function (result, _a) {
-        var regExp = _a.regExp, encoded = _a.encoded;
-        return result.replace(regExp, encoded);
-    }, text);
-}
-
 ;// CONCATENATED MODULE: ./src/markdown/marks/link.ts
 
 
@@ -6723,8 +6767,7 @@ var Link = /** @class */ (function (_super) {
                 url = imageUrl;
                 syntax = '!';
             }
-            text = escapeMarkdownText(text);
-            url = encodeMarkdownText(url);
+            text = escapeTextForLink(text);
             syntax += "[" + text + "](" + url + ")";
             dispatch(tr.replaceWith(from, to, createTextNode(schema, syntax)));
             return true;
@@ -6910,6 +6953,9 @@ var Html = /** @class */ (function (_super) {
 
 
 
+
+
+var customBlockSyntax = '$$';
 var CustomBlock = /** @class */ (function (_super) {
     __extends(CustomBlock, _super);
     function CustomBlock() {
@@ -6933,6 +6979,22 @@ var CustomBlock = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    CustomBlock.prototype.commands = function () {
+        return function (payload) { return function (state, dispatch) {
+            var selection = state.selection, schema = state.schema, tr = state.tr;
+            var _a = getRangeInfo(selection), startFromOffset = _a.startFromOffset, endToOffset = _a.endToOffset;
+            if (!(payload === null || payload === void 0 ? void 0 : payload.info)) {
+                return false;
+            }
+            var customBlock = "" + customBlockSyntax + payload.info;
+            var startNode = createTextNode(schema, customBlock);
+            var endNode = createTextNode(schema, customBlockSyntax);
+            tr.insert(startFromOffset, startNode).split(startFromOffset + customBlock.length);
+            tr.split(tr.mapping.map(endToOffset)).insert(tr.mapping.map(endToOffset), endNode);
+            dispatch(tr.setSelection(createTextSelection(tr, tr.mapping.map(endToOffset) - (customBlockSyntax.length + 2))));
+            return true;
+        }; };
+    };
     return CustomBlock;
 }(mark));
 
@@ -7017,6 +7079,7 @@ function smartTask(_a) {
 
 
 
+
 
 
 var EVENT_TYPE = 'cut';
@@ -7065,10 +7128,14 @@ var MdEditor = /** @class */ (function (_super) {
             var clipboardData = ev.clipboardData || window.clipboardData;
             var items = clipboardData && clipboardData.items;
             if (items) {
-                var imageBlob = pasteImageOnly(items);
-                if (imageBlob) {
-                    ev.preventDefault();
-                    emitImageBlobHook(_this.eventEmitter, imageBlob, ev.type);
+                var containRtfItem = toArray_default()(items).some(function (item) { return item.kind === 'string' && item.type === 'text/rtf'; });
+                // if it contains rtf, it's most likely copy paste from office -> no image
+                if (!containRtfItem) {
+                    var imageBlob = pasteImageOnly(items);
+                    if (imageBlob) {
+                        ev.preventDefault();
+                        emitImageBlobHook(_this.eventEmitter, imageBlob, ev.type);
+                    }
                 }
             }
         });
@@ -7115,11 +7182,11 @@ var MdEditor = /** @class */ (function (_super) {
         ]);
     };
     MdEditor.prototype.createPlugins = function () {
-        return this.defaultPlugins.concat(__spreadArray([
+        return __spreadArray([
             syntaxHighlight(this.context),
             previewHighlight(this.context),
             smartTask(this.context)
-        ], this.createPluginProps()));
+        ], this.createPluginProps()).concat(this.defaultPlugins);
     };
     MdEditor.prototype.createView = function () {
         var _this = this;
@@ -13315,7 +13382,7 @@ var InlineParser = /** @class */ (function () {
                             var literal = textNode.literal || '';
                             var info = literal.split(/\s/)[0];
                             newNode.info = info;
-                            if (literal.length === info.length + 1) {
+                            if (literal.length <= info.length) {
                                 textNode.unlink();
                             }
                             else {
@@ -15750,7 +15817,6 @@ function filterDisallowedTags(str) {
     }
     return str;
 }
-var CUSTOM_SYNTAX_LENGTH = 4;
 var baseConvertors = {
     heading: function (node, _a) {
         var entering = _a.entering;
@@ -15941,7 +16007,7 @@ var baseConvertors = {
         ];
     },
     customInline: function (node, context, convertors) {
-        var _a = node, sourcepos = _a.sourcepos, info = _a.info;
+        var _a = node, info = _a.info, firstChild = _a.firstChild;
         var nomalizedInfo = info.trim().toLowerCase();
         var customConvertor = convertors[nomalizedInfo];
         var entering = context.entering;
@@ -15953,13 +16019,10 @@ var baseConvertors = {
                 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: "$$" + info + (firstChild ? ' ' : '') },
             ]
             : [
                 { type: 'text', content: '$$' },
@@ -16312,7 +16375,7 @@ function sanitizeHTML(html, options) {
 
 function getChildrenHTML(node, typeName) {
     return node
-        .literal.replace(new RegExp("(<\\s*" + typeName + "[^>]+?>)|(</" + typeName + "\\s*[>])", 'ig'), '')
+        .literal.replace(new RegExp("(<\\s*" + typeName + "[^>]*>)|(</" + typeName + "\\s*[>])", 'ig'), '')
         .trim();
 }
 function getHTMLAttrsByHTMLString(html) {
@@ -16570,14 +16633,6 @@ function isBlankLine(doc, index) {
     var pmNode = doc.child(index);
     return !pmNode.childCount || (pmNode.childCount === 1 && !((_a = pmNode.firstChild.text) === null || _a === void 0 ? void 0 : _a.trim()));
 }
-function getNextNonBlankElement(mdNode) {
-    var next = mdNode.next, parent = mdNode.parent;
-    while (!next && parent) {
-        next = parent.next;
-        parent = parent.parent;
-    }
-    return next ? document.querySelector("[data-nodeid=\"" + next.id + "\"]") : null;
-}
 function getEditorRangeHeightInfo(doc, mdNode, children) {
     var start = getMdStartLine(mdNode) - 1;
     var end = getMdEndLine(mdNode) - 1;
@@ -16645,11 +16700,11 @@ function getAdditionalPos(scrollTop, offsetTop, height, targetNodeHeight) {
     var ratio = Math.min((scrollTop - offsetTop) / height, 1);
     return ratio * targetNodeHeight;
 }
-function getParentNodeObj(mdNode) {
-    var el = document.querySelector("[data-nodeid=\"" + mdNode.id + "\"]");
+function getParentNodeObj(previewContent, mdNode) {
+    var el = previewContent.querySelector("[data-nodeid=\"" + mdNode.id + "\"]");
     while (!el || isStyledInlineNode(mdNode)) {
         mdNode = mdNode.parent;
-        el = document.querySelector("[data-nodeid=\"" + mdNode.id + "\"]");
+        el = previewContent.querySelector("[data-nodeid=\"" + mdNode.id + "\"]");
     }
     return getNonNestableNodeObj({ mdNode: mdNode, el: el });
 }
@@ -17383,7 +17438,10 @@ var TableOffsetMap = /** @class */ (function () {
     };
     TableOffsetMap.prototype.getNodeAndPos = function (rowIdx, colIdx) {
         var cellInfo = this.rowInfo[rowIdx][colIdx];
-        return { node: this.table.nodeAt(cellInfo.offset - 1), pos: cellInfo.offset };
+        return {
+            node: this.table.nodeAt(cellInfo.offset - this.tableStartOffset),
+            pos: cellInfo.offset,
+        };
     };
     TableOffsetMap.prototype.extendedRowspan = function (rowIdx, colIdx) {
         return false;
@@ -17893,7 +17951,7 @@ var map_Map = /** @class */ (function () {
 ;// CONCATENATED MODULE: ./src/i18n/i18n.ts
 /**
  * @fileoverview Implements i18n
- * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  */
 
 
@@ -18075,7 +18133,6 @@ function task() {
 ;// CONCATENATED MODULE: ./src/wysiwyg/plugins/toolbarState.ts
 
 
-
 var EXCEPT_TYPES = ['image', 'link', 'customBlock', 'frontMatter'];
 var MARK_TYPES = ['strong', 'strike', 'emph', 'code'];
 var LIST_TYPES = ['bulletList', 'orderedList', 'taskList'];
@@ -18090,47 +18147,49 @@ function toolbarState_getToolbarStateType(node, parentNode) {
     return type;
 }
 function setListNodeToolbarState(type, nodeTypeState) {
-    nodeTypeState[type] = true;
+    nodeTypeState[type] = { active: true };
     LIST_TYPES.filter(function (listName) { return listName !== type; }).forEach(function (listType) {
         if (nodeTypeState[listType]) {
             delete nodeTypeState[listType];
         }
     });
 }
-function getMarkTypeStates(from, to, schema) {
-    var markTypeState = {};
+function setMarkTypeStates(from, to, schema, toolbarState) {
     MARK_TYPES.forEach(function (type) {
         var mark = schema.marks[type];
         var marksAtPos = from.marksAcross(to) || [];
         var foundMark = !!mark.isInSet(marksAtPos);
         if (foundMark) {
-            markTypeState[type] = true;
+            toolbarState[type] = { active: true };
         }
     });
-    return markTypeState;
 }
 function toolbarState_getToolbarState(selection, doc, schema) {
     var $from = selection.$from, $to = selection.$to, from = selection.from, to = selection.to;
-    var nodeTypeState = {};
-    var markTypeState = {};
+    var toolbarState = {
+        indent: { active: false, disabled: true },
+        outdent: { active: false, disabled: true },
+    };
     doc.nodesBetween(from, to, function (node, _, parentNode) {
         var type = toolbarState_getToolbarStateType(node, parentNode);
         if (common_includes(EXCEPT_TYPES, type)) {
             return;
         }
         if (common_includes(LIST_TYPES, type)) {
-            setListNodeToolbarState(type, nodeTypeState);
+            setListNodeToolbarState(type, toolbarState);
+            toolbarState.indent.disabled = false;
+            toolbarState.outdent.disabled = false;
         }
         else if (type === 'paragraph' || type === 'text') {
-            markTypeState = getMarkTypeStates($from, $to, schema);
+            setMarkTypeStates($from, $to, schema, toolbarState);
         }
         else {
-            nodeTypeState[type] = true;
+            toolbarState[type] = { active: true };
         }
     });
-    return __assign(__assign({}, nodeTypeState), markTypeState);
+    return toolbarState;
 }
-function toolbarState(eventEmitter) {
+function toolbarStateHighlight(eventEmitter) {
     return new external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Plugin({
         view: function () {
             return {
@@ -18417,6 +18476,7 @@ var CodeBlockView = /** @class */ (function () {
         this.dom = null;
         this.contentDOM = null;
         this.input = null;
+        this.timer = null;
         this.handleMousedown = function (ev) {
             var target = ev.target;
             var style = getComputedStyle(target, ':after');
@@ -18472,7 +18532,7 @@ var CodeBlockView = /** @class */ (function () {
         input.type = 'text';
         input.value = this.node.attrs.language;
         wrapper.appendChild(input);
-        document.querySelector('.toastui-editor.ww-mode').appendChild(wrapper);
+        this.view.dom.parentElement.appendChild(wrapper);
         var wrpperWidth = wrapper.clientWidth;
         css_default()(wrapper, {
             top: top + 10 + "px",
@@ -18482,7 +18542,10 @@ var CodeBlockView = /** @class */ (function () {
         this.input = input;
         this.input.addEventListener('blur', function () { return _this.changeLanguage(); });
         this.input.addEventListener('keydown', this.handleKeydown);
-        setTimeout(function () { return _this.input.focus(); });
+        this.clearTimer();
+        this.timer = setTimeout(function () {
+            _this.input.focus();
+        });
     };
     CodeBlockView.prototype.bindDOMEvent = function () {
         if (this.dom) {
@@ -18515,6 +18578,12 @@ var CodeBlockView = /** @class */ (function () {
             removeNode(parent);
         }
     };
+    CodeBlockView.prototype.clearTimer = function () {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
     CodeBlockView.prototype.stopEvent = function () {
         return true;
     };
@@ -18527,6 +18596,7 @@ var CodeBlockView = /** @class */ (function () {
     };
     CodeBlockView.prototype.destroy = function () {
         this.reset();
+        this.clearTimer();
         if (this.dom) {
             this.dom.removeEventListener('click', this.handleMousedown);
         }
@@ -19632,9 +19702,10 @@ function addParagraphBeforeTable(tr, map, schema) {
     }
     return tr.setSelection(external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Selection.near(tableStartPos, -1));
 }
-function addParagraphAfterTable(tr, map, schema) {
+function addParagraphAfterTable(tr, map, schema, forcedAddtion) {
+    if (forcedAddtion === void 0) { forcedAddtion = false; }
     var tableEndPos = tr.doc.resolve(map.tableEndOffset);
-    if (!tableEndPos.nodeAfter) {
+    if (forcedAddtion || !tableEndPos.nodeAfter) {
         return addParagraph(tr, tableEndPos, schema);
     }
     return tr.setSelection(external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Selection.near(tableEndPos, 1));
@@ -20056,6 +20127,29 @@ var table_Table = /** @class */ (function (_super) {
             return false;
         };
     };
+    Table.prototype.exitTable = function () {
+        return function (state, dispatch) {
+            var selection = state.selection, tr = state.tr, schema = state.schema;
+            var $from = selection.$from;
+            var cell = findNodeBy($from, function (_a) {
+                var type = _a.type;
+                return type.name === 'tableHeadCell' || type.name === 'tableBodyCell';
+            });
+            if (cell) {
+                var para = findNodeBy($from, function (_a) {
+                    var type = _a.type;
+                    return type.name === 'paragraph';
+                });
+                if (para) {
+                    var anchor = getResolvedSelection(selection).anchor;
+                    var map = TableOffsetMap.create(anchor);
+                    dispatch(addParagraphAfterTable(tr, map, schema, true));
+                    return true;
+                }
+            }
+            return false;
+        };
+    };
     Table.prototype.commands = function () {
         return {
             addTable: this.addTable(),
@@ -20082,6 +20176,7 @@ var table_Table = /** @class */ (function (_super) {
             'Mod-Backspace': deleteCellContent,
             Delete: deleteCellContent,
             'Mod-Delete': deleteCellContent,
+            'Mod-Enter': this.exitTable(),
         };
     };
     return Table;
@@ -20342,7 +20437,7 @@ var Image = /** @class */ (function (_super) {
                     var attrs = _a.attrs;
                     return [
                         attrs.rawHTML || 'img',
-                        __assign(__assign({ src: attrs.imageUrl }, (attrs.altText && { alt: attrs.altText })), getCustomAttrs(attrs)),
+                        __assign(__assign({ src: escapeXml(attrs.imageUrl) }, (attrs.altText && { alt: attrs.altText })), getCustomAttrs(attrs)),
                     ];
                 },
             };
@@ -20357,7 +20452,7 @@ var Image = /** @class */ (function (_super) {
             if (!imageUrl) {
                 return false;
             }
-            var node = schema.nodes.image.createAndFill(__assign({ imageUrl: escapeXml(imageUrl) }, (altText && { altText: altText })));
+            var node = schema.nodes.image.createAndFill(__assign({ imageUrl: imageUrl }, (altText && { altText: altText })));
             dispatch(tr.replaceSelectionWith(node).scrollIntoView());
             return true;
         }; };
@@ -20616,7 +20711,6 @@ var strike_Strike = /** @class */ (function (_super) {
 
 
 
-
 var link_Link = /** @class */ (function (_super) {
     __extends(Link, _super);
     function Link(linkAttributes) {
@@ -20635,7 +20729,7 @@ var link_Link = /** @class */ (function (_super) {
         get: function () {
             var _this = this;
             return {
-                attrs: __assign({ linkUrl: { default: '' }, linkText: { default: null }, rawHTML: { default: null } }, getDefaultCustomAttrs()),
+                attrs: __assign({ linkUrl: { default: '' }, title: { default: null }, rawHTML: { default: null } }, getDefaultCustomAttrs()),
                 inclusive: false,
                 parseDOM: [
                     {
@@ -20644,8 +20738,9 @@ var link_Link = /** @class */ (function (_super) {
                             var sanitizedDOM = sanitizeHTML(dom, { RETURN_DOM_FRAGMENT: true })
                                 .firstChild;
                             var href = sanitizedDOM.getAttribute('href') || '';
+                            var title = sanitizedDOM.getAttribute('title') || '';
                             var rawHTML = sanitizedDOM.getAttribute('data-raw-html');
-                            return __assign({ linkUrl: href, linkText: sanitizedDOM.textContent }, (rawHTML && { rawHTML: rawHTML }));
+                            return __assign({ linkUrl: href, title: title }, (rawHTML && { rawHTML: rawHTML }));
                         },
                     },
                 ],
@@ -20653,7 +20748,7 @@ var link_Link = /** @class */ (function (_super) {
                     var attrs = _a.attrs;
                     return [
                         attrs.rawHTML || 'a',
-                        __assign(__assign({ href: attrs.linkUrl }, _this.linkAttributes), getCustomAttrs(attrs)),
+                        __assign(__assign({ href: escapeXml(attrs.linkUrl) }, _this.linkAttributes), getCustomAttrs(attrs)),
                     ];
                 },
             };
@@ -20667,10 +20762,7 @@ var link_Link = /** @class */ (function (_super) {
             var schema = state.schema, tr = state.tr, selection = state.selection;
             var empty = selection.empty, from = selection.from, to = selection.to;
             if (from && to && linkUrl) {
-                var attrs = {
-                    linkUrl: escapeXml(linkUrl),
-                    linkText: escapeMarkdownText(linkText),
-                };
+                var attrs = { linkUrl: linkUrl };
                 var mark = schema.mark('link', attrs);
                 if (empty && linkText) {
                     var node = createTextNode(schema, linkText, mark);
@@ -20756,6 +20848,7 @@ var code_Code = /** @class */ (function (_super) {
 ;// CONCATENATED MODULE: ./src/wysiwyg/nodes/customBlock.ts
 
 
+
 var customBlock_CustomBlock = /** @class */ (function (_super) {
     __extends(CustomBlock, _super);
     function CustomBlock() {
@@ -20797,6 +20890,13 @@ var customBlock_CustomBlock = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    CustomBlock.prototype.commands = function () {
+        return function (payload) { return function (state, dispatch) {
+            return (payload === null || payload === void 0 ? void 0 : payload.info)
+                ? (0,external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.setBlockType)(state.schema.nodes.customBlock, payload)(state, dispatch)
+                : false;
+        }; };
+    };
     return CustomBlock;
 }(node));
 
@@ -20823,8 +20923,10 @@ var FrontMatter = /** @class */ (function (_super) {
                 content: 'text*',
                 group: 'block',
                 code: true,
+                defining: true,
                 parseDOM: [
                     {
+                        preserveWhitespace: 'full',
                         tag: 'div[data-front-matter]',
                     },
                 ],
@@ -20854,6 +20956,56 @@ var FrontMatter = /** @class */ (function (_super) {
 }(node));
 
 
+;// CONCATENATED MODULE: ./src/wysiwyg/nodes/htmlComment.ts
+
+
+
+var HTMLComment = /** @class */ (function (_super) {
+    __extends(HTMLComment, _super);
+    function HTMLComment() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(HTMLComment.prototype, "name", {
+        get: function () {
+            return 'htmlComment';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(HTMLComment.prototype, "schema", {
+        get: function () {
+            return {
+                content: 'text*',
+                group: 'block',
+                code: true,
+                defining: true,
+                parseDOM: [{ preserveWhitespace: 'full', tag: 'div[data-html-comment]' }],
+                toDOM: function () {
+                    return ['div', { 'data-html-comment': 'true' }, 0];
+                },
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HTMLComment.prototype.commands = function () {
+        return function () { return function (state, dispatch, view) {
+            var $from = state.selection.$from;
+            if (view.endOfTextblock('down') && $from.node().type.name === 'htmlComment') {
+                return (0,external_commonjs_prosemirror_commands_commonjs2_prosemirror_commands_amd_prosemirror_commands_.exitCode)(state, dispatch);
+            }
+            return false;
+        }; };
+    };
+    HTMLComment.prototype.keymaps = function () {
+        return {
+            Enter: this.commands()(),
+        };
+    };
+    return HTMLComment;
+}(node));
+
+
 ;// CONCATENATED MODULE: ./src/wysiwyg/specCreator.ts
 
 
@@ -20879,6 +21031,7 @@ var FrontMatter = /** @class */ (function (_super) {
 
 
 
+
 
 
 function createSpecs(linkAttributes) {
@@ -20908,6 +21061,7 @@ function createSpecs(linkAttributes) {
         new customBlock_CustomBlock(),
         new FrontMatter(),
         new Widget(),
+        new HTMLComment(),
     ]);
 }
 
@@ -20933,6 +21087,7 @@ function createSpecs(linkAttributes) {
 
 
 
+
 
 
 var CONTENTS_CLASS_NAME = cls('contents');
@@ -20973,12 +21128,12 @@ var WysiwygEditor = /** @class */ (function (_super) {
         });
     };
     WysiwygEditor.prototype.createPlugins = function () {
-        return this.defaultPlugins.concat(__spreadArray([
+        return __spreadArray([
             tableSelection(),
             tableContextMenu(this.eventEmitter),
             task(),
-            toolbarState(this.eventEmitter)
-        ], this.createPluginProps()));
+            toolbarStateHighlight(this.eventEmitter)
+        ], this.createPluginProps()).concat(this.defaultPlugins);
     };
     WysiwygEditor.prototype.createPluginNodeViews = function () {
         var _a = this, eventEmitter = _a.eventEmitter, pluginNodeViews = _a.pluginNodeViews;
@@ -21028,11 +21183,15 @@ var WysiwygEditor = /** @class */ (function (_super) {
                 paste: function (_, ev) {
                     var clipboardData = ev.clipboardData || window.clipboardData;
                     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();
-                            emitImageBlobHook(_this.eventEmitter, imageBlob, ev.type);
+                    if (items) {
+                        var containRtfItem = toArray_default()(items).some(function (item) { return item.kind === 'string' && item.type === 'text/rtf'; });
+                        // if it contains rtf, it's most likely copy paste from office -> no image
+                        if (!containRtfItem) {
+                            var imageBlob = pasteImageOnly(items);
+                            if (imageBlob) {
+                                ev.preventDefault();
+                                emitImageBlobHook(_this.eventEmitter, imageBlob, ev.type);
+                            }
                         }
                     }
                     return false;
@@ -21181,6 +21340,7 @@ var eventTypeList = [
     'beforePreviewRender',
     'beforeConvertWysiwygToMarkdown',
     'load',
+    'loadUI',
     'change',
     'caretChange',
     'destroy',
@@ -21762,7 +21922,7 @@ var toWwConvertors = {
         var link = state.schema.marks.link;
         var _b = node, destination = _b.destination, title = _b.title;
         if (entering) {
-            var attrs = __assign(__assign({ linkUrl: destination }, (title && { linkText: title })), customAttrs);
+            var attrs = __assign({ linkUrl: destination, title: title }, customAttrs);
             state.openMark(link.create(attrs));
         }
         else {
@@ -21818,37 +21978,32 @@ var toWwConvertors = {
         }
     },
     tableCell: function (state, node, _a) {
-        var _b;
         var entering = _a.entering;
-        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 && (htmlToWwConvertors_isInlineNode(childNode) || isCustomHTMLInlineNode(state, childNode));
-        };
-        if (entering) {
-            var attrs = null;
-            if (!node.ignored) {
+        if (!node.ignored) {
+            var hasParaNode = function (childNode) {
+                return childNode && (htmlToWwConvertors_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 table = tablePart.parent;
-                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;
-                    }
+                var align = (table.columns[node.startIdx] || {}).align;
+                var attrs = __assign({}, node.attrs);
+                if (align) {
+                    attrs.align = align;
+                }
+                state.openNode(cell, attrs);
+                if (hasParaNode(node.firstChild)) {
+                    state.openNode(paragraph);
                 }
             }
-            state.openNode(cell, attrs);
-            if (hasParaNode(node.firstChild)) {
-                state.openNode(paragraph);
-            }
-        }
-        else {
-            if (hasParaNode(node.lastChild)) {
+            else {
+                if (hasParaNode(node.lastChild)) {
+                    state.closeNode();
+                }
                 state.closeNode();
             }
-            state.closeNode();
         }
     },
     strike: function (state, _, _a, customAttrs) {
@@ -21911,26 +22066,34 @@ var toWwConvertors = {
     htmlBlock: function (state, node) {
         var html = node.literal;
         var container = document.createElement('div');
-        var matched = html.match(reHTMLTag);
-        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(sanitizedHTML);
-            var childrenHTML = getChildrenHTML(node, typeName);
-            state.addNode(nodeType, { htmlAttrs: htmlAttrs, childrenHTML: childrenHTML });
+        var isHTMLComment = reHTMLComment.test(html);
+        if (isHTMLComment) {
+            state.openNode(state.schema.nodes.htmlComment);
+            state.addText(node.literal);
+            state.closeNode();
         }
         else {
-            container.innerHTML = sanitizedHTML;
-            addRawHTMLAttributeToDOM(container);
-            state.convertByDOMParser(container);
+            var matched = html.match(reHTMLTag);
+            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(sanitizedHTML);
+                var childrenHTML = getChildrenHTML(node, typeName);
+                state.addNode(nodeType, { htmlAttrs: htmlAttrs, childrenHTML: childrenHTML });
+            }
+            else {
+                container.innerHTML = sanitizedHTML;
+                addRawHTMLAttributeToDOM(container);
+                state.convertByDOMParser(container);
+            }
         }
     },
     customInline: function (state, node, _a) {
         var entering = _a.entering, skipChildren = _a.skipChildren;
-        var info = node.info;
+        var _b = node, info = _b.info, firstChild = _b.firstChild;
         var schema = state.schema;
         if (info.indexOf('widget') !== -1 && entering) {
             var content = getWidgetContent(node);
@@ -21939,6 +22102,13 @@ var toWwConvertors = {
                 schema.text(createWidgetContent(info, content)),
             ]);
         }
+        else {
+            var text = '$$';
+            if (entering) {
+                text += firstChild ? info + " " : info;
+            }
+            state.addText(text);
+        }
     },
 };
 function createWwConvertors(customConvertors) {
@@ -21954,7 +22124,7 @@ function createWwConvertors(customConvertors) {
         var wwConvertor = toWwConvertors[type];
         if (wwConvertor && !common_includes(['htmlBlock', 'htmlInline'], type)) {
             convertors[type] = function (state, node, context) {
-                context.origin = function () { return orgConvertors[type](node, context); };
+                context.origin = function () { return orgConvertors[type](node, context, orgConvertors); };
                 var tokens = customConvertors[type](node, context);
                 var attrs;
                 if (tokens) {
@@ -22152,7 +22322,13 @@ var nodeTypeWriters = {
     text: function (state, _a) {
         var _b;
         var node = _a.node;
-        state.text((_b = node.text) !== null && _b !== void 0 ? _b : '');
+        var text = (_b = node.text) !== null && _b !== void 0 ? _b : '';
+        if ((node.marks || []).some(function (mark) { return mark.type.name === 'link'; })) {
+            state.text(escapeTextForLink(text), false);
+        }
+        else {
+            state.text(text);
+        }
     },
     paragraph: function (state, _a) {
         var node = _a.node, parent = _a.parent, _b = _a.index, index = _b === void 0 ? 0 : _b;
@@ -22317,9 +22493,19 @@ var nodeTypeWriters = {
         var text = _a.text;
         state.write(text);
     },
-    html: function (state, _, _a) {
-        var text = _a.text;
+    html: function (state, _a, _b) {
+        var node = _a.node;
+        var text = _b.text;
+        state.write(text);
+        if (node.attrs.htmlBlock) {
+            state.closeBlock(node);
+        }
+    },
+    htmlComment: function (state, _a, _b) {
+        var node = _a.node;
+        var text = _b.text;
         state.write(text);
+        state.closeBlock(node);
     },
 };
 function write(type, _a) {
@@ -22481,13 +22667,13 @@ var toMdConvertors = {
     image: function (_a) {
         var node = _a.node;
         var attrs = node.attrs;
-        var altText = common_escape(attrs.altText || '');
-        var imageUrl = escapeXml(attrs.imageUrl);
-        var altAttr = altText ? " alt=\"" + altText + "\"" : '';
+        var rawHTML = attrs.rawHTML, altText = attrs.altText;
+        var imageUrl = attrs.imageUrl.replace(/&amp;/g, '&');
+        var altAttr = altText ? " alt=\"" + escapeXml(altText) + "\"" : '';
         return {
-            rawHTML: attrs.rawHTML ? "<" + attrs.rawHTML + " src=\"" + imageUrl + "\"" + altAttr + ">" : null,
+            rawHTML: rawHTML ? "<" + rawHTML + " src=\"" + escapeXml(imageUrl) + "\"" + altAttr + ">" : null,
             attrs: {
-                altText: altText,
+                altText: escapeTextForLink(altText || ''),
                 imageUrl: imageUrl,
             },
         };
@@ -22550,17 +22736,17 @@ var toMdConvertors = {
         var node = _a.node;
         var entering = _b.entering;
         var attrs = node.attrs;
-        var linkUrl = escapeXml(attrs.linkUrl);
-        var rawHTML = attrs.rawHTML;
+        var title = attrs.title, rawHTML = attrs.rawHTML;
+        var linkUrl = attrs.linkUrl.replace(/&amp;/g, '&');
+        var titleAttr = title ? " title=\"" + escapeXml(title) + "\"" : '';
         if (entering) {
             return {
                 delim: '[',
-                rawHTML: rawHTML ? "<" + rawHTML + " href=\"" + linkUrl + "\">" : null,
+                rawHTML: rawHTML ? "<" + rawHTML + " href=\"" + escapeXml(linkUrl) + "\"" + titleAttr + ">" : null,
             };
         }
-        var linkText = attrs.title ? " " + quote(attrs.linkText) : '';
         return {
-            delim: "](" + linkText + linkUrl + ")",
+            delim: "](" + linkUrl + (title ? " " + quote(escapeTextForLink(title)) : '') + ")",
             rawHTML: getCloseRawHTML(rawHTML),
         };
     },
@@ -22578,6 +22764,12 @@ var toMdConvertors = {
             rawHTML: rawHTML,
         };
     },
+    htmlComment: function (_a) {
+        var node = _a.node;
+        return {
+            text: node.textContent,
+        };
+    },
     // html inline node, html block node
     html: function (_a, _b) {
         var node = _a.node;
@@ -23007,11 +23199,13 @@ var Convertor = /** @class */ (function () {
 
 
 
+
 function execPlugin(plugin, eventEmitter, usageStatistics) {
-    var pmState = { Plugin: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Plugin, Selection: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Selection, TextSelection: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.TextSelection };
+    var pmState = { Plugin: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Plugin, PluginKey: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.PluginKey, Selection: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.Selection, TextSelection: external_commonjs_prosemirror_state_commonjs2_prosemirror_state_amd_prosemirror_state_.TextSelection };
     var pmView = { Decoration: external_commonjs_prosemirror_view_commonjs2_prosemirror_view_amd_prosemirror_view_.Decoration, DecorationSet: external_commonjs_prosemirror_view_commonjs2_prosemirror_view_amd_prosemirror_view_.DecorationSet };
     var pmModel = { Fragment: external_commonjs_prosemirror_model_commonjs2_prosemirror_model_amd_prosemirror_model_.Fragment };
-    var context = { eventEmitter: eventEmitter, usageStatistics: usageStatistics, pmState: pmState, pmView: pmView, pmModel: pmModel, i18n: i18n };
+    var pmRules = { InputRule: external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_.InputRule, inputRules: external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_.inputRules, undoInputRule: external_commonjs_prosemirror_inputrules_commonjs2_prosemirror_inputrules_amd_prosemirror_inputrules_.undoInputRule };
+    var context = { eventEmitter: eventEmitter, usageStatistics: usageStatistics, pmState: pmState, pmView: pmView, pmModel: pmModel, pmRules: pmRules, i18n: i18n };
     if (isArray_default()(plugin)) {
         var pluginFn = plugin[0], _a = plugin[1], options = _a === void 0 ? {} : _a;
         return pluginFn(context, options);
@@ -23179,6 +23373,10 @@ var ToastUIEditorViewer = /** @class */ (function () {
             element.hasAttribute(TASK_ATTR_NAME) &&
             isPositionInBox(style, ev.offsetX, ev.offsetY)) {
             toggleClass(element, TASK_CHECKED_CLASS_NAME);
+            this.eventEmitter.emit('change', {
+                source: 'viewer',
+                date: ev,
+            });
         }
     };
     /**
@@ -23290,7 +23488,7 @@ function createMdLikeNode(node) {
     };
     var nodeTypeMap = {
         heading: { level: attrs.level },
-        link: { destination: attrs.linkUrl, title: attrs.linkText },
+        link: { destination: attrs.linkUrl, title: attrs.title },
         image: { destination: attrs.imageUrl },
         codeBlock: { info: attrs.language },
         bulletList: { type: 'list', listData: { type: 'bullet' } },
@@ -23443,6 +23641,7 @@ var ScrollSync = /** @class */ (function () {
         this.latestPreviewScrollTop = null;
         this.blockedScroll = null;
         this.active = true;
+        this.timer = null;
         var previewRoot = preview.previewContent, previewEl = preview.el;
         this.previewRoot = previewRoot;
         this.previewEl = previewEl;
@@ -23455,10 +23654,11 @@ var ScrollSync = /** @class */ (function () {
     ScrollSync.prototype.addScrollSyncEvent = function () {
         var _this = this;
         this.eventEmitter.listen('afterPreviewRender', function () {
+            _this.clearTimer();
             // Immediately after the 'afterPreviewRender' event has occurred,
             // browser rendering is not yet complete.
             // So the size of elements can not be accurately measured.
-            setTimeout(function () {
+            _this.timer = setTimeout(function () {
                 _this.syncPreviewScrollTop(true);
             }, 200);
         });
@@ -23485,7 +23685,7 @@ var ScrollSync = /** @class */ (function () {
         var pos = this.mdEditor.getSelection();
         var firstMdNode = this.toastMark.findFirstNodeAtLine(pos[0][0]);
         var previewHeight = this.previewEl.clientHeight;
-        var el = getParentNodeObj(firstMdNode).el;
+        var el = getParentNodeObj(this.previewRoot, firstMdNode).el;
         var totalOffsetTop = getTotalOffsetTop(el, this.previewRoot) || el.offsetTop;
         var nodeHeight = el.clientHeight;
         // multiply 0.5 for calculating the position in the middle of preview area
@@ -23517,7 +23717,7 @@ var ScrollSync = /** @class */ (function () {
                 targetScrollTop = scrollTopByEditing;
             }
             else {
-                var _d = getParentNodeObj(firstMdNode), el = _d.el, mdNode = _d.mdNode;
+                var _d = getParentNodeObj(this.previewRoot, firstMdNode), el = _d.el, mdNode = _d.mdNode;
                 var _e = getEditorRangeHeightInfo(doc, mdNode, children), height = _e.height, rect = _e.rect;
                 var totalOffsetTop = getTotalOffsetTop(el, previewRoot) || el.offsetTop;
                 var nodeHeight = el.clientHeight;
@@ -23545,7 +23745,7 @@ var ScrollSync = /** @class */ (function () {
             }
             var children = dom.children;
             var mdNodeId = Number(targetNode.getAttribute('data-nodeid'));
-            var _b = getParentNodeObj(toastMark.findNodeById(mdNodeId)), mdNode = _b.mdNode, el = _b.el;
+            var _b = getParentNodeObj(this.previewRoot, toastMark.findNodeById(mdNodeId)), mdNode = _b.mdNode, el = _b.el;
             var mdNodeStartLine = getMdStartLine(mdNode);
             targetScrollTop = children[mdNodeStartLine - 1].offsetTop;
             var height = getEditorRangeHeightInfo(state.doc, mdNode, children).height;
@@ -23584,7 +23784,14 @@ var ScrollSync = /** @class */ (function () {
         };
         animate(curScrollTop, targetScrollTop, syncCallbacks);
     };
+    ScrollSync.prototype.clearTimer = function () {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
     ScrollSync.prototype.destroy = function () {
+        this.clearTimer();
         this.eventEmitter.removeEventHandler('scroll');
         this.eventEmitter.removeEventHandler('afterPreviewRender');
     };
@@ -23780,7 +23987,15 @@ var ToastUIEditorCore = /** @class */ (function () {
         this.moveCursorToStart(this.options.autofocus);
     }
     ToastUIEditorCore.prototype.addInitEvent = function () {
+        var _this = this;
         this.on('needChangeMode', this.changeMode.bind(this));
+        this.on('loadUI', function () {
+            if (_this.height !== 'auto') {
+                // 75px equals default editor ui height - the editing area height
+                var minHeight = Math.min(parseInt(_this.minHeight, 10), parseInt(_this.height, 10) - 75) + "px";
+                _this.setMinHeight(minHeight);
+            }
+        });
         addDefaultImageBlobHook(this.eventEmitter);
     };
     ToastUIEditorCore.prototype.addInitCommand = function (mdCommands, wwCommands) {
@@ -23964,7 +24179,12 @@ var ToastUIEditorCore = /** @class */ (function () {
                 _this.wwEditor.setModel(wwNode);
             }
         });
-        return this.wwEditor.view.dom.innerHTML;
+        var html = this.wwEditor.view.dom.innerHTML;
+        if (this.placeholder) {
+            var rePlaceholder = new RegExp("<span class=\"placeholder[^>]+>" + this.placeholder + "</span>", 'i');
+            return html.replace(rePlaceholder, '');
+        }
+        return html;
     };
     /**
      * Insert text
@@ -24052,12 +24272,11 @@ var ToastUIEditorCore = /** @class */ (function () {
         if (isString_default()(height)) {
             if (height === 'auto') {
                 addClass_default()(el, 'auto-height');
-                this.setMinHeight(this.getMinHeight());
             }
             else {
                 removeClass_default()(el, 'auto-height');
-                this.setMinHeight(height);
             }
+            this.setMinHeight(this.getMinHeight());
         }
         css_default()(el, { height: height });
         this.height = height;
@@ -24074,16 +24293,18 @@ var ToastUIEditorCore = /** @class */ (function () {
      * @param {string} minHeight - min content height in pixel
      */
     ToastUIEditorCore.prototype.setMinHeight = function (minHeight) {
-        var _a;
-        this.minHeight = minHeight;
-        var editorHeight = this.options.el.clientHeight;
-        var editorSectionHeight = ((_a = document.querySelector("." + cls('main'))) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-        var diffHeight = editorHeight - editorSectionHeight;
-        var minHeightNum = parseInt(minHeight, 10);
-        minHeightNum = Math.max(minHeightNum - diffHeight, 0);
-        this.wwEditor.setMinHeight(minHeightNum);
-        this.mdEditor.setMinHeight(minHeightNum);
-        this.preview.setMinHeight(minHeightNum);
+        if (minHeight !== this.minHeight) {
+            var height = this.height || this.options.height;
+            if (height !== 'auto' && this.options.el.querySelector("." + cls('main'))) {
+                // 75px equals default editor ui height - the editing area height
+                minHeight = Math.min(parseInt(minHeight, 10), parseInt(height, 10) - 75) + "px";
+            }
+            var minHeightNum = parseInt(minHeight, 10);
+            this.minHeight = minHeight;
+            this.wwEditor.setMinHeight(minHeightNum);
+            this.mdEditor.setMinHeight(minHeightNum);
+            this.preview.setMinHeight(minHeightNum);
+        }
     };
     /**
      * Get minimum height of editor content
@@ -24219,6 +24440,7 @@ var ToastUIEditorCore = /** @class */ (function () {
      * @param {string} placeholder - placeholder to set
      */
     ToastUIEditorCore.prototype.setPlaceholder = function (placeholder) {
+        this.placeholder = placeholder;
         this.mdEditor.setPlaceholder(placeholder);
         this.wwEditor.setPlaceholder(placeholder);
     };
@@ -26223,6 +26445,7 @@ function createDefaultToolbarItemInfo(type) {
                 className: 'indent',
                 command: 'indent',
                 tooltip: i18n.get('Indent'),
+                state: 'indent',
             };
             break;
         case 'outdent':
@@ -26231,6 +26454,7 @@ function createDefaultToolbarItemInfo(type) {
                 className: 'outdent',
                 command: 'outdent',
                 tooltip: i18n.get('Outdent'),
+                state: 'outdent',
             };
             break;
         case 'scrollSync':
@@ -26395,7 +26619,7 @@ function connectHOC(WrappedComponent) {
             _this.hideTooltip = function () {
                 css_default()(_this.props.tooltipRef.current, 'display', 'none');
             };
-            _this.state = { active: false };
+            _this.state = { active: false, disabled: props.disabled };
             _this.addEvent();
             return _this;
         }
@@ -26404,9 +26628,10 @@ function connectHOC(WrappedComponent) {
             var _a = this.props, item = _a.item, eventEmitter = _a.eventEmitter;
             if (item.state) {
                 eventEmitter.listen('changeToolbarState', function (_a) {
+                    var _b;
                     var toolbarState = _a.toolbarState;
-                    var active = !!toolbarState[item.state];
-                    _this.setState({ active: active });
+                    var _c = (_b = toolbarState[item.state]) !== null && _b !== void 0 ? _b : {}, active = _c.active, disabled = _c.disabled;
+                    _this.setState({ active: !!active, disabled: disabled !== null && disabled !== void 0 ? disabled : _this.props.disabled });
                 });
             }
         };
@@ -26415,7 +26640,7 @@ function connectHOC(WrappedComponent) {
             return { left: offsetLeft, top: el.offsetHeight + offsetTop };
         };
         ButtonHOC.prototype.render = function () {
-            return template(buttonHoc_templateObject_1 || (buttonHoc_templateObject_1 = __makeTemplateObject(["\n        <", "\n          ...", "\n          active=", "\n          showTooltip=", "\n          hideTooltip=", "\n          getBound=", "\n        />\n      "], ["\n        <", "\n          ...", "\n          active=", "\n          showTooltip=", "\n          hideTooltip=", "\n          getBound=", "\n        />\n      "])), WrappedComponent, this.props, this.state.active, this.showTooltip, this.hideTooltip, this.getBound);
+            return template(buttonHoc_templateObject_1 || (buttonHoc_templateObject_1 = __makeTemplateObject(["\n        <", "\n          ...", "\n          active=", "\n          showTooltip=", "\n          hideTooltip=", "\n          getBound=", "\n          disabled=", "\n        />\n      "], ["\n        <", "\n          ...", "\n          active=", "\n          showTooltip=", "\n          hideTooltip=", "\n          getBound=", "\n          disabled=", "\n        />\n      "])), WrappedComponent, this.props, this.state.active, this.showTooltip, this.hideTooltip, this.getBound, this.state.disabled || this.props.disabled);
         };
         return ButtonHOC;
     }(Component));
@@ -26670,7 +26895,7 @@ var Toolbar = /** @class */ (function (_super) {
         };
         _this.openPopup = function (popupName, initialValues) {
             if (initialValues === void 0) { initialValues = {}; }
-            var el = document.querySelector("." + cls('toolbar-group') + " ." + popupName);
+            var el = _this.refs.el.querySelector("." + cls('toolbar-group') + " ." + popupName);
             if (el) {
                 var _a = getTotalOffset(el, closest(el, "." + cls('toolbar'))), offsetLeft = _a.offsetLeft, offsetTop = _a.offsetTop;
                 var info = createPopupInfo(popupName, {
@@ -27036,6 +27261,7 @@ var ToastUIEditor = /** @class */ (function (_super) {
             var groupIndex = toolbarItem.groupIndex, itemIndex = toolbarItem.itemIndex, item = toolbarItem.item;
             _this.defaultUI.insertToolbarItem({ groupIndex: groupIndex, itemIndex: itemIndex }, item);
         });
+        _this.eventEmitter.emit('loadUI', _this);
         return _this;
     }
     /**
@@ -27076,7 +27302,7 @@ var editor_templateObject_1;
 ;// CONCATENATED MODULE: ./src/i18n/en-us.ts
 /**
  * @fileoverview I18N for English
- * @author NHN FE Development Lab <dl_javascript@nhn.com>
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  */
 
 editorCore.setLanguage(['en', 'en-US'], {
@@ -27143,7 +27369,7 @@ editorCore.setLanguage(['en', 'en-US'], {
 
 
 }();
-__webpack_exports__ = __webpack_exports__.default;
+__webpack_exports__ = __webpack_exports__["default"];
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;