lakelib 0.1.13 → 0.1.15

package/lib/lake.js

@@ -135,17 +135,19 @@ var unlink = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32
 
 var hr$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z\"></path></svg>";
 
+var codeBlock$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M58.34,101.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,69.66,37.66L43.31,64,69.66,90.34a8,8,0,0,1-11.32,11.32Zm40,0a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0,0-11.32l-32-32A8,8,0,0,0,98.34,37.66L124.69,64,98.34,90.34A8,8,0,0,0,98.34,101.66ZM200,40H176a8,8,0,0,0,0,16h24V200H56V136a8,8,0,0,0-16,0v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Z\"></path></svg>";
+
 var image$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z\"></path></svg>";
 
 var video$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M164.44,121.34l-48-32A8,8,0,0,0,104,96v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,145.05V111l25.58,17ZM234.33,69.52a24,24,0,0,0-14.49-16.4C185.56,39.88,131,40,128,40s-57.56-.12-91.84,13.12a24,24,0,0,0-14.49,16.4C19.08,79.5,16,97.74,16,128s3.08,48.5,5.67,58.48a24,24,0,0,0,14.49,16.41C69,215.56,120.4,216,127.34,216h1.32c6.94,0,58.37-.44,91.18-13.11a24,24,0,0,0,14.49-16.41c2.59-10,5.67-28.22,5.67-58.48S236.92,79.5,234.33,69.52Zm-15.49,113a8,8,0,0,1-4.77,5.49c-31.65,12.22-85.48,12-86,12H128c-.54,0-54.33.2-86-12a8,8,0,0,1-4.77-5.49C34.8,173.39,32,156.57,32,128s2.8-45.39,5.16-54.47A8,8,0,0,1,41.93,68c30.52-11.79,81.66-12,85.85-12h.27c.54,0,54.38-.18,86,12a8,8,0,0,1,4.77,5.49C221.2,82.61,224,99.43,224,128S221.2,173.39,218.84,182.47Z\"></path></svg>";
 
 var attachment = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z\"></path></svg>";
 
-var codeBlock$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M58.34,101.66l-32-32a8,8,0,0,1,0-11.32l32-32A8,8,0,0,1,69.66,37.66L43.31,64,69.66,90.34a8,8,0,0,1-11.32,11.32Zm40,0a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0,0-11.32l-32-32A8,8,0,0,0,98.34,37.66L124.69,64,98.34,90.34A8,8,0,0,0,98.34,101.66ZM200,40H176a8,8,0,0,0,0,16h24V200H56V136a8,8,0,0,0-16,0v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Z\"></path></svg>";
+var emoji$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z\"></path></svg>";
 
 var table = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z\"></path></svg>";
 
-// These icons are from open source projects.
+// These icons are sourced from open source projects.
 //
 // Fluent Icons by Microsoft (https://fluenticons.co/).
 // - superscript.svg
@@ -217,10 +219,11 @@ const icons = new Map([
     ['link', link$1],
     ['unlink', unlink],
     ['hr', hr$1],
+    ['codeBlock', codeBlock$1],
     ['image', image$1],
     ['video', video$1],
     ['attachment', attachment],
-    ['codeBlock', codeBlock$1],
+    ['emoji', emoji$1],
     ['table', table],
 ]);
 
@@ -269,9 +272,10 @@ function safeTemplate(strings, ...keys) {
 function camelCase(value) {
     const valueList = value.split('-');
     let camelString = '';
-    valueList.forEach((val, index) => {
-        camelString += (index > 0) ? val.charAt(0).toUpperCase() + val.substring(1) : val;
-    });
+    for (let i = 0; i < valueList.length; i++) {
+        const val = valueList[i];
+        camelString += (i > 0) ? val.charAt(0).toUpperCase() + val.substring(1) : val;
+    }
     return camelString;
 }
 
@@ -876,15 +880,16 @@ class Nodes {
             var _a;
             const elementId = element.lakeId;
             const eventItems = (_a = eventData[elementId]) !== null && _a !== void 0 ? _a : [];
-            eventItems.forEach((item, index) => {
+            for (let i = 0; i < eventItems.length; i++) {
+                const item = eventItems[i];
                 if (!type || type === item.type && (!listener || listener === item.listener)) {
                     element.removeEventListener(item.type, item.listener, false);
-                    eventItems[index] = {
+                    eventItems[i] = {
                         type: '',
                         listener: () => { },
                     };
                 }
-            });
+            }
             eventData[elementId] = eventItems.filter((item) => item.type !== '');
         });
     }
@@ -893,11 +898,11 @@ class Nodes {
         return this.eachElement(element => {
             const elementId = element.lakeId;
             const eventItems = eventData[elementId];
-            eventItems.forEach(item => {
+            for (const item of eventItems) {
                 if (item.type === type) {
                     item.listener(event !== null && event !== void 0 ? event : new Event(type));
                 }
-            });
+            }
         });
     }
     // Gets all event listeners attached to the Nodes object.
@@ -953,9 +958,9 @@ class Nodes {
     }
     addClass(className) {
         if (Array.isArray(className)) {
-            className.forEach(name => {
+            for (const name of className) {
                 this.addClass(name);
-            });
+            }
             return this;
         }
         return this.eachElement(element => {
@@ -967,9 +972,9 @@ class Nodes {
     }
     removeClass(className) {
         if (Array.isArray(className)) {
-            className.forEach(name => {
+            for (const name of className) {
                 this.removeClass(name);
-            });
+            }
             return this;
         }
         return this.eachElement(element => {
@@ -1061,22 +1066,21 @@ class Nodes {
         this.html('');
         return this;
     }
-    // Inserts the specified content as the first child of each element.
+    // Inserts the specified content to the beginning of the first element.
     prepend(content) {
+        const element = this.get(0);
         if (typeof content === 'string') {
-            return this.eachElement(element => {
-                const list = toNodeList(content).reverse();
-                list.forEach((node) => {
-                    if (element.firstChild) {
-                        element.insertBefore(node, element.firstChild);
-                    }
-                    else {
-                        element.appendChild(node);
-                    }
-                });
-            });
+            const list = toNodeList(content).reverse();
+            for (const node of list) {
+                if (element.firstChild) {
+                    element.insertBefore(node, element.firstChild);
+                }
+                else {
+                    element.appendChild(node);
+                }
+            }
+            return this;
         }
-        const element = this.get(0);
         if (content instanceof Nodes) {
             content = content.get(0);
         }
@@ -1088,71 +1092,62 @@ class Nodes {
         }
         return this;
     }
-    // Inserts the specified content as the last child of each element.
+    // Inserts the specified content to the end of the first element.
     append(content) {
+        const element = this.get(0);
         if (typeof content === 'string') {
-            return this.eachElement(element => {
-                const list = toNodeList(content);
-                list.forEach((node) => {
-                    element.appendChild(node);
-                });
-            });
+            const list = toNodeList(content);
+            for (const node of list) {
+                element.appendChild(node);
+            }
+            return this;
         }
-        const element = this.get(0);
         if (content instanceof Nodes) {
             content = content.get(0);
         }
         element.appendChild(content);
         return this;
     }
-    // Inserts the specified content before each node.
+    // Inserts the specified content before the first node.
     before(content) {
+        const node = this.get(0);
+        if (!node.parentNode) {
+            return this;
+        }
         if (typeof content === 'string') {
-            return this.each(node => {
-                const list = toNodeList(content);
-                list.forEach(target => {
-                    if (!node.parentNode) {
-                        return;
-                    }
-                    node.parentNode.insertBefore(target, node);
-                });
-            });
+            const list = toNodeList(content);
+            for (const target of list) {
+                node.parentNode.insertBefore(target, node);
+            }
+            return this;
         }
-        const node = this.get(0);
         if (content instanceof Nodes) {
             content = content.get(0);
         }
-        if (!node.parentNode) {
-            return this;
-        }
         node.parentNode.insertBefore(content, node);
         return this;
     }
-    // Inserts the specified content after each node.
+    // Inserts the specified content after the first node.
     after(content) {
+        const node = this.get(0);
+        if (!node.parentNode) {
+            return this;
+        }
         if (typeof content === 'string') {
-            return this.each(node => {
-                const list = toNodeList(content).reverse();
-                list.forEach(target => {
-                    if (!node.parentNode) {
-                        return;
-                    }
-                    if (node.nextSibling) {
-                        node.parentNode.insertBefore(target, node.nextSibling);
-                    }
-                    else {
-                        node.parentNode.appendChild(target);
-                    }
-                });
-            });
+            const list = toNodeList(content).reverse();
+            for (const target of list) {
+                if (node.nextSibling) {
+                    node.parentNode.insertBefore(target, node.nextSibling);
+                }
+                else {
+                    node.parentNode.appendChild(target);
+                }
+            }
+            return this;
         }
-        const node = this.get(0);
         if (content instanceof Nodes) {
             content = content.get(0);
         }
-        if (!node.parentNode) {
-            return this;
-        }
         if (node.nextSibling) {
             node.parentNode.insertBefore(content, node.nextSibling);
         }
@@ -1161,21 +1156,21 @@ class Nodes {
         }
         return this;
     }
-    // Replaces each node with the provided new content.
+    // Replaces the first node with the provided new content.
     replaceWith(newContent) {
-        return this.each(node => {
-            let target;
-            if (newContent instanceof Nodes) {
-                target = newContent.get(0);
-            }
-            else {
-                target = toNodeList(newContent)[0];
-            }
-            if (!node.parentNode) {
-                return;
-            }
-            node.parentNode.replaceChild(target, node);
-        });
+        const node = this.get(0);
+        if (!node.parentNode) {
+            return this;
+        }
+        let target;
+        if (newContent instanceof Nodes) {
+            target = newContent.get(0);
+        }
+        else {
+            target = toNodeList(newContent)[0];
+        }
+        node.parentNode.replaceChild(target, node);
+        return this;
     }
     // Removes each node from the DOM.
     // keepChildren parameter:
@@ -1470,7 +1465,7 @@ class Range {
     selectBox(boxNode) {
         const boxContainer = boxNode.find('.lake-box-container');
         if (boxContainer.length === 0) {
-            throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
         }
         this.setStart(boxContainer, 0);
         this.collapseToStart();
@@ -1479,7 +1474,7 @@ class Range {
     selectBoxStart(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToStart();
@@ -1488,7 +1483,7 @@ class Range {
     selectBoxEnd(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box cannot be selected because the box '${boxNode.attr('name')}' (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(1));
         this.collapseToStart();
@@ -2020,19 +2015,24 @@ function wrapNodeList(nodeList, wrapper) {
     wrapper = wrapper.clone(true);
     const deepestElement = getDeepest(wrapper);
     nodeList[0].before(wrapper);
-    nodeList.forEach(node => {
+    for (const node of nodeList) {
         deepestElement.append(node);
-    });
+    }
     return wrapper;
 }
 
 // Removes Zero-width spaces that are dependent on some other text nodes.
 function removeZWS(node) {
     for (const child of node.getWalker()) {
-        if (child.isText && child.text().length > 1) {
-            const nodeValue = child.text();
-            if (/\u200B/.test(child.text())) {
-                child.get(0).nodeValue = nodeValue.replace(/\u200B/g, '');
+        if (child.isText) {
+            const text = child.text();
+            if (text === '') {
+                child.remove();
+            }
+            else if (text.length > 1) {
+                if (/\u200B/.test(text)) {
+                    child.get(0).nodeValue = text.replace(/\u200B/g, '');
+                }
             }
         }
     }
@@ -2850,6 +2850,7 @@ var enUS = {
         highlight: 'Highlight',
         image: 'Image',
         file: 'File',
+        emoji: 'Emoji',
         removeColor: 'Remove color',
     },
     link: {
@@ -2933,6 +2934,7 @@ var zhCN = {
         highlight: '文字背景',
         image: '图片',
         file: '文件',
+        emoji: '表情',
         removeColor: '默认',
     },
     link: {
@@ -3016,6 +3018,7 @@ var ja = {
         highlight: '文字の背景',
         image: '画像',
         file: 'ファイル',
+        emoji: '絵文字',
         removeColor: 'デフォルト',
     },
     link: {
@@ -3099,6 +3102,7 @@ var ko = {
         highlight: '글자 배경',
         image: '이미지',
         file: '파일',
+        emoji: '이모지',
         removeColor: '기본색',
     },
     link: {
@@ -3279,7 +3283,7 @@ class Dropdown {
             }
         });
         menuNode.css('visibility', 'hidden');
-        menuNode.show(config.menuType === 'color' ? 'flex' : 'block');
+        menuNode.show(config.menuType === 'list' ? 'block' : 'flex');
         const dropdownNativeNode = dropdownNode.get(0);
         const dropdownRect = dropdownNativeNode.getBoundingClientRect();
         // A overflow width on the left side, greater than 0 indicates an overflow.
@@ -3342,7 +3346,7 @@ class Dropdown {
                 if (dropdownNode.attr('disabled')) {
                     return;
                 }
-                const value = dropdownNode.attr('color') || config.defaultValue;
+                const value = dropdownNode.attr('color') || config.defaultValue || '';
                 config.onSelect(value);
             });
         }
@@ -3369,14 +3373,17 @@ class Dropdown {
         });
     }
     render() {
-        var _a;
+        var _a, _b;
         const config = this.config;
+        const defaultValue = (_a = config.defaultValue) !== null && _a !== void 0 ? _a : '';
         const dropdownNode = this.node;
         const titleNode = dropdownNode.find('.lake-dropdown-title');
         if (!config.downIcon) {
             titleNode.addClass('lake-dropdown-title-no-down');
         }
-        titleNode.css('width', config.width);
+        if (config.width) {
+            titleNode.css('width', config.width);
+        }
         const tooltip = typeof config.tooltip === 'string' ? config.tooltip : config.tooltip(this.locale);
         titleNode.attr('title', tooltip);
         const textNode = titleNode.find('.lake-dropdown-text');
@@ -3393,13 +3400,16 @@ class Dropdown {
         }
         const menuNode = query('<ul class="lake-dropdown-menu" />');
         menuNode.addClass(`lake-${config.menuType}-dropdown-menu`);
-        Dropdown.setValue(dropdownNode, [config.defaultValue]);
+        if (config.menuWidth) {
+            menuNode.css('width', config.menuWidth);
+        }
+        Dropdown.setValue(dropdownNode, [defaultValue]);
         if (textNode.length > 0) {
             const menuMap = Dropdown.getMenuMap(config.menuItems, this.locale);
-            textNode.text((_a = menuMap.get(config.defaultValue)) !== null && _a !== void 0 ? _a : config.defaultValue);
+            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== void 0 ? _b : defaultValue);
         }
         if (config.menuType === 'color') {
-            this.updateColorAccent(titleNode, config.defaultValue);
+            this.updateColorAccent(titleNode, defaultValue);
         }
         this.apppendMenuItems(menuNode);
         dropdownNode.append(titleNode);
@@ -3484,21 +3494,19 @@ class BoxToolbar {
     // Renders a toolbar for the specified box.
     render() {
         this.root.append(this.container);
-        this.items.forEach(item => {
+        for (const item of this.items) {
             if (item === '|') {
                 this.appendDivider();
-                return;
             }
-            if (item.type === 'button') {
+            else if (item.type === 'button') {
                 this.buttonItemList.push(item);
                 this.appendButton(item);
-                return;
             }
-            if (item.type === 'dropdown') {
+            else if (item.type === 'dropdown') {
                 this.dropdownItemList.push(item);
                 this.appendDropdown(item);
             }
-        });
+        }
         this.updatePosition();
     }
     unmount() {
@@ -3506,8 +3514,6 @@ class BoxToolbar {
     }
 }
 
-// A key-value object for storing data about box.
-const boxData = {};
 const framework = safeTemplate `
   <span class="lake-box-strip"><br /></span>
   <div class="lake-box-container" contenteditable="false"></div>
@@ -3519,7 +3525,7 @@ class Box {
         if (typeof node === 'string') {
             const component = boxes.get(node);
             if (component === undefined) {
-                throw new Error(`Box '${node}' has not been defined yet.`);
+                throw new Error(`Box "${node}" has not been defined yet.`);
             }
             const type = encode(component.type);
             const name = encode(component.name);
@@ -3532,15 +3538,12 @@ class Box {
             this.node = query(node);
             const component = boxes.get(this.name);
             if (component === undefined) {
-                throw new Error(`Box '${this.name}' has not been defined yet.`);
+                throw new Error(`Box "${this.name}" has not been defined yet.`);
             }
             if (component.value && !this.node.hasAttr('value')) {
                 this.value = component.value;
             }
         }
-        if (!boxData[this.node.id]) {
-            boxData[this.node.id] = {};
-        }
     }
     // Adds the framework of the box.
     addFramework() {
@@ -3566,7 +3569,7 @@ class Box {
             container.removeClass('lake-box-hovered');
         });
         container.on('click', () => {
-            debug(`Box '${this.name}' (id = ${this.node.id}) value:`);
+            debug(`Box "${this.name}" (id = ${this.node.id}) value:`);
             debug(this.value);
         });
         if (this.type === 'block' && this.node.isContentEditable) {
@@ -3605,14 +3608,6 @@ class Box {
         }
         this.value = value;
     }
-    // Returns data of the box.
-    getData(key) {
-        return boxData[this.node.id][key];
-    }
-    // Updates data of the box.
-    setData(key, value) {
-        boxData[this.node.id][key] = value;
-    }
     // Returns the editor instance of the box.
     getEditor() {
         const container = this.node.closest('div[contenteditable]');
@@ -3667,16 +3662,15 @@ class Box {
             newContainer.append(content);
             morph(container, newContainer);
         }
-        debug(`Box '${this.name}' (id: ${this.node.id}) rendered`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
     }
     // Destroys a rendered box.
     unmount() {
         this.event.emit('blur');
         this.event.emit('beforeunmount');
-        boxData[this.node.id] = {};
         this.event.removeAllListeners();
         this.node.empty();
-        debug(`Box '${this.name}' (id: ${this.node.id}) unmounted`);
+        debug(`Box "${this.name}" (id: ${this.node.id}) unmounted`);
     }
     // Returns a HTML string of the box.
     getHTML() {
@@ -3847,6 +3841,71 @@ function request(option) {
     return xhr;
 }
 
+function uploadFile(config) {
+    const { editor, name, file, onError, onSuccess } = config;
+    const { requestMethod, requestAction, requestTypes } = editor.config[name];
+    if (requestTypes.indexOf(file.type) < 0) {
+        if (onError) {
+            onError(`File "${file.name}" is not allowed for uploading.`);
+        }
+        throw new Error(`Cannot upload file "${file.name}" because its type "${file.type}" is not found in ['${requestTypes.join('\', \'')}'].`);
+    }
+    const box = editor.selection.insertBox(name, {
+        url: URL.createObjectURL(file),
+        status: 'uploading',
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        lastModified: file.lastModified,
+    });
+    let xhr = request({
+        onProgress: e => {
+            const percentNode = box.node.find('.lake-percent');
+            const percent = Math.round(e.percent);
+            percentNode.text(`${percent < 100 ? percent : 99} %`);
+        },
+        onError: (error, body) => {
+            xhr = null;
+            debug(error.toString(), body);
+            box.updateValue('status', 'error');
+            box.render();
+            if (onError) {
+                onError(error.toString());
+            }
+        },
+        onSuccess: body => {
+            xhr = null;
+            if (!body.url) {
+                box.updateValue('status', 'error');
+                box.render();
+                if (onError) {
+                    onError('Cannot find the url field.');
+                }
+                return;
+            }
+            box.updateValue({
+                status: 'done',
+                url: body.url,
+            });
+            box.render();
+            editor.history.save();
+            if (onSuccess) {
+                onSuccess();
+            }
+        },
+        file,
+        action: requestAction,
+        method: requestMethod,
+    });
+    box.event.on('beforeunmount', () => {
+        if (xhr) {
+            xhr.abort();
+            debug('Upload canceled');
+        }
+    });
+    return box;
+}
+
 // String
 
 var index = /*#__PURE__*/Object.freeze({
@@ -3879,6 +3938,7 @@ var index = /*#__PURE__*/Object.freeze({
     template: template,
     toHex: toHex,
     toNodeList: toNodeList,
+    uploadFile: uploadFile,
     wrapNodeList: wrapNodeList
 });
 
@@ -3886,6 +3946,10 @@ class Fragment {
     constructor(fragment) {
         this.fragment = fragment !== null && fragment !== void 0 ? fragment : document.createDocumentFragment();
     }
+    // Gets a native fragment.
+    get() {
+        return this.fragment;
+    }
     // Returns the descendants of the fragment which are selected by the specified CSS selector.
     find(selector) {
         const nodeList = [];
@@ -3905,7 +3969,7 @@ class Fragment {
     }
     // Inserts the specified node as the last child.
     append(node) {
-        node.each(nativeNode => {
+        query(node).each(nativeNode => {
             this.fragment.appendChild(nativeNode);
         });
     }
@@ -4287,9 +4351,8 @@ function insertBookmark(range) {
 function removeAndNormalizeNode(node, range) {
     const previousNode = node.prev();
     const nextNode = node.next();
-    if (previousNode.isText && nextNode.isText) {
+    if (previousNode.isText || nextNode.isText) {
         const parentNode = node.parent();
-        removeZWS(parentNode);
         node.remove();
         parentNode.get(0).normalize();
     }
@@ -4407,6 +4470,9 @@ function deleteContents(range) {
 
 // Inserts a DocumentFragment object into the specified range.
 function insertFragment(range, fragment) {
+    if (fragment instanceof Fragment) {
+        fragment = fragment.get();
+    }
     if (range.commonAncestor.isOutside) {
         return;
     }
@@ -4424,16 +4490,6 @@ function insertFragment(range, fragment) {
     range.adjustBlock();
 }
 
-// Inserts a HTML string into the specified range.
-function insertContents(range, value) {
-    const nodes = query(value);
-    const fragment = document.createDocumentFragment();
-    nodes.each(nativeNode => {
-        fragment.appendChild(nativeNode);
-    });
-    insertFragment(range, fragment);
-}
-
 function getTopNonBlockNodes(range) {
     const container = range.commonAncestor.closest('div[contenteditable="true"],td');
     let nodeList = [];
@@ -4495,7 +4551,7 @@ function setBlocks(range, value) {
             }
             else {
                 const block = valueNode.clone(true);
-                if (node.isList && node.attr('indent') !== '') {
+                if (block.isList && node.isList && node.attr('indent') !== '') {
                     block.attr('indent', node.attr('indent'));
                 }
                 const deepestBlock = getDeepest(block);
@@ -4593,7 +4649,7 @@ function splitBlock$1(range) {
 }
 
 // Removes empty marks that contain no content.
-function removeEmptyMarks$1(node) {
+function removeEmptyMarks$2(node) {
     if (node.isMark && node.isEmpty) {
         node.remove();
         return;
@@ -4615,8 +4671,8 @@ function splitMarksAtPoint(node, offset, removeEmptyMark) {
     const parts = splitNodes(node, offset, limitBlock);
     if (parts) {
         if (removeEmptyMark) {
-            removeEmptyMarks$1(parts.start);
-            removeEmptyMarks$1(parts.end);
+            removeEmptyMarks$2(parts.start);
+            removeEmptyMarks$2(parts.end);
             if (!parts.start.isEmpty) {
                 start = parts.start;
             }
@@ -4802,7 +4858,7 @@ function addMark(range, value) {
 }
 
 // Removes empty marks that contain no content.
-function removeEmptyMarks(node) {
+function removeEmptyMarks$1(node) {
     if (node.isMark && node.isEmpty) {
         node.remove();
         return;
@@ -4860,13 +4916,13 @@ function removeMark(range, value) {
             return;
         }
         if (parts.end) {
-            removeEmptyMarks(parts.end);
+            removeEmptyMarks$1(parts.end);
         }
         const zeroWidthSpace = new Nodes(document.createTextNode('\u200B'));
         const newMark = copyNestedMarks(parts.start, tagName);
         if (!newMark) {
             parts.start.after(zeroWidthSpace);
-            removeEmptyMarks(parts.start);
+            removeEmptyMarks$1(parts.start);
             if (zeroWidthSpace.prev().isText) {
                 range.setStartAfter(zeroWidthSpace.prev());
                 range.collapseToStart();
@@ -4879,7 +4935,7 @@ function removeMark(range, value) {
         }
         appendDeepest(newMark, zeroWidthSpace);
         parts.start.after(newMark);
-        removeEmptyMarks(parts.start);
+        removeEmptyMarks$1(parts.start);
         range.shrinkAfter(newMark);
         return;
     }
@@ -4947,8 +5003,6 @@ function insertLink(range, value) {
     return linkNode;
 }
 
-var version = "0.1.13";
-
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
     if (range.commonAncestor.isOutside) {
@@ -5026,6 +5080,8 @@ function removeBox(range) {
     return box;
 }
 
+var version = "0.1.15";
+
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
     const nativeNode = node.get(0);
@@ -5116,7 +5172,10 @@ class Selection {
     // Updates the saved range with the range of the native selection.
     updateByRange() {
         const newRange = this.getRangeFromNativeSelection();
-        if (this.range.get() === newRange.get()) {
+        if (this.range.startNode.get(0) === newRange.startNode.get(0) &&
+            this.range.startOffset === newRange.startOffset &&
+            this.range.endNode.get(0) === newRange.endNode.get(0) &&
+            this.range.endOffset === newRange.endOffset) {
             return;
         }
         this.range = newRange;
@@ -5160,9 +5219,6 @@ class Selection {
     insertFragment(fragment) {
         return insertFragment(this.range, fragment);
     }
-    insertContents(value) {
-        return insertContents(this.range, value);
-    }
     deleteContents() {
         return deleteContents(this.range);
     }
@@ -5202,7 +5258,7 @@ class Selection {
     insertBox(boxName, boxValue) {
         const box = insertBox(this.range, boxName, boxValue);
         if (!box) {
-            throw new Error(`Box '${boxName}' cannot be inserted outside the editor.`);
+            throw new Error(`Box "${boxName}" cannot be inserted outside the editor.`);
         }
         return box;
     }
@@ -5218,7 +5274,6 @@ class Selection {
 class Command {
     constructor(selection) {
         this.commandMap = new Map();
-        this.event = new EventEmitter();
         this.selection = selection;
     }
     add(name, commandItem) {
@@ -5236,7 +5291,7 @@ class Command {
     getItem(name) {
         const commandItem = this.commandMap.get(name);
         if (commandItem === undefined) {
-            throw new Error(`Command '${name}' does not exist`);
+            throw new Error(`Command "${name}" has not been defined yet.`);
         }
         return commandItem;
     }
@@ -5266,10 +5321,8 @@ class Command {
     }
     execute(name, ...data) {
         const commandItem = this.getItem(name);
-        this.event.emit('beforeexecute', name);
         commandItem.execute.apply(this, data);
-        this.event.emit('execute', name);
-        debug(`Command '${name}' executed`);
+        debug(`Command "${name}" executed`);
     }
 }
 
@@ -5287,11 +5340,11 @@ class Command {
 // inputs 'e': value: 'abe', list: ['a', 'ab', 'abe'], index: 3, canRedo: false
 class History {
     constructor(selection) {
+        this.canSave = true;
         // an array for storing the history items
         this.list = [];
         // the next index of the list
         this.index = 0;
-        this.canSave = true;
         this.limit = 100;
         this.event = new EventEmitter();
         this.selection = selection;
@@ -5343,6 +5396,12 @@ class History {
         this.removeIdfromBoxes(container);
         this.removeIdfromBoxes(otherContainer);
     }
+    get canUndo() {
+        return this.index > 1 && !!this.list[this.index - 1];
+    }
+    get canRedo() {
+        return !!this.list[this.index];
+    }
     cloneContainer() {
         const range = this.selection.range;
         const newContainer = this.container.clone(true);
@@ -5354,6 +5413,12 @@ class History {
             return newContainer;
         }
         if (range.isInsideBox) {
+            const boxNode = range.commonAncestor.closest('lake-box');
+            const boxNodePath = boxNode.path();
+            const newBoxNode = newContainer.find(boxNodePath);
+            const newRange = range.clone();
+            newRange.selectBox(newBoxNode);
+            insertBookmark(newRange);
             return newContainer;
         }
         const startNodePath = range.startNode.path();
@@ -5366,23 +5431,14 @@ class History {
         insertBookmark(newRange);
         return newContainer;
     }
-    get count() {
-        return this.list.length;
-    }
-    get canUndo() {
-        return this.index > 1 && !!this.list[this.index - 1];
-    }
-    get canRedo() {
-        return !!this.list[this.index];
-    }
     undo() {
-        if (!this.list[this.index - 1]) {
+        if (!this.list[this.index - 2]) {
             return;
         }
         this.selection.insertBookmark();
         const value = this.getValue(this.container);
-        while (this.index > 0) {
-            const prevItem = this.list[this.index - 1];
+        while (this.index > 1) {
+            const prevItem = this.list[this.index - 2];
             if (!prevItem) {
                 break;
             }
@@ -5394,9 +5450,6 @@ class History {
                 break;
             }
         }
-        if (this.index < 1) {
-            this.index = 1;
-        }
         this.selection.updateByBookmark();
         debug(`History undone (index: ${this.index})`);
     }
@@ -5428,7 +5481,11 @@ class History {
     pause() {
         this.canSave = false;
     }
-    save(emitSaveEvent = true) {
+    save(options = {}) {
+        var _a, _b, _c;
+        const inputType = (_a = options.inputType) !== null && _a !== void 0 ? _a : '';
+        const update = (_b = options.update) !== null && _b !== void 0 ? _b : false;
+        const emitEvent = (_c = options.emitEvent) !== null && _c !== void 0 ? _c : true;
         if (!this.canSave) {
             return;
         }
@@ -5438,16 +5495,25 @@ class History {
             this.removeBookmark(this.getValue(this.list[this.index - 1])) === this.removeBookmark(value)) {
             return;
         }
-        this.list.splice(this.index, Infinity, item);
-        this.index++;
+        if (update) {
+            this.list.splice(this.index - 1, Infinity, item);
+        }
+        else {
+            this.list.splice(this.index, Infinity, item);
+            this.index++;
+        }
         if (this.list.length > this.limit) {
             this.list.shift();
             this.index = this.list.length;
         }
-        if (emitSaveEvent) {
-            this.event.emit('save', denormalizeValue(value));
+        debug(`History saved (index: ${this.index}, inputType: "${inputType}", update: ${update}, emitEvent: ${emitEvent})`);
+        if (emitEvent) {
+            this.event.emit('save', denormalizeValue(value), {
+                inputType,
+                update,
+                emitEvent,
+            });
         }
-        debug(`History saved (index: ${this.index})`);
     }
 }
 
@@ -5536,9 +5602,9 @@ class Plugin {
         this.pluginList.push(plugin);
     }
     loadAll(editor) {
-        this.pluginList.forEach(plugin => {
+        for (const plugin of this.pluginList) {
             plugin(editor);
-        });
+        }
     }
 }
 
@@ -5551,6 +5617,7 @@ const defaultConfig = {
     indentWithTab: true,
     lang: 'en-US',
     minChangeSize: 5,
+    historySize: 100,
     onMessage: (type, message) => {
         if (type === 'success') {
             // eslint-disable-next-line no-console
@@ -5571,6 +5638,7 @@ const defaultConfig = {
 class Editor {
     constructor(config) {
         this.unsavedInputData = '';
+        this.unsavedInputCount = 0;
         this.state = {
             appliedItems: [],
             disabledNameMap: new Map(),
@@ -5601,9 +5669,6 @@ class Editor {
             }
             this.event.emit('paste', event);
         };
-        this.beforeunloadListener = () => {
-            this.history.save();
-        };
         this.selectionchangeListener = () => {
             this.selection.updateByRange();
             this.updateBoxSelectionStyle();
@@ -5619,6 +5684,7 @@ class Editor {
         this.resizeListener = () => {
             this.event.emit('resize');
         };
+        // Updates the classes of all boxes when the current selection of the editor is changed.
         this.updateBoxSelectionStyle = debounce(() => {
             // The editor has been unmounted.
             if (this.root.first().length === 0) {
@@ -5663,12 +5729,12 @@ class Editor {
                 boxContainer.removeClass('lake-box-selected');
                 box.event.emit('blur');
             });
-            this.event.emit('boxselectionstylechange');
         }, 50, {
             leading: false,
             trailing: true,
             maxWait: 50,
         });
+        // Triggers the statechange event when the current selection of the editor is changed.
         this.emitStateChangeEvent = debounce(() => {
             const commandNames = this.command.getNames();
             let appliedItems = this.selection.getAppliedItems();
@@ -5715,13 +5781,6 @@ class Editor {
             trailing: true,
             maxWait: 100,
         });
-        this.emitChangeEvent = (value) => {
-            this.fixContent();
-            this.emitStateChangeEvent();
-            this.togglePlaceholderClass(value);
-            this.scrollToCaret();
-            this.event.emit('change', value);
-        };
         if (!config.root) {
             throw new Error('The root of the config must be specified.');
         }
@@ -5748,9 +5807,11 @@ class Editor {
         this.selection = new Selection(this.container);
         this.command = new Command(this.selection);
         this.history = new History(this.selection);
+        this.history.limit = this.config.historySize;
         this.keystroke = new Keystroke(this.container);
         editors.set(this.container.id, this);
     }
+    // Adds or Removes a placeholder class.
     togglePlaceholderClass(value) {
         value = denormalizeValue(value);
         const className = 'lake-show-placeholder';
@@ -5761,7 +5822,8 @@ class Editor {
             this.container.removeClass(className);
         }
     }
-    inputInBoxStrip() {
+    // Moves the input text from box strip to normal position.
+    moveBoxStripText() {
         const selection = this.selection;
         const range = selection.range;
         const stripNode = range.startNode.closest('.lake-box-strip');
@@ -5791,6 +5853,12 @@ class Editor {
         stripNode.html('<br />');
         selection.insertNode(document.createTextNode(text));
     }
+    // Resets the value of unsaved input property.
+    resetUnsavedInputData() {
+        this.unsavedInputData = '';
+        this.unsavedInputCount = 0;
+    }
+    // Binds events about input.
     bindInputEvents() {
         this.container.on('compositionstart', () => {
             this.isComposing = true;
@@ -5798,19 +5866,6 @@ class Editor {
         this.container.on('compositionend', () => {
             this.isComposing = false;
         });
-        this.container.on('beforeinput', event => {
-            const inputEvent = event;
-            const range = this.selection.range;
-            if (range.isBoxStart || range.isBoxEnd) {
-                this.commitUnsavedInputData();
-                return;
-            }
-            if (inputEvent.inputType === 'insertText' ||
-                inputEvent.inputType === 'insertCompositionText') {
-                return;
-            }
-            this.commitUnsavedInputData();
-        });
         this.container.on('input', event => {
             const inputEvent = event;
             // Here setTimeout is necessary because isComposing is not false after ending composition.
@@ -5826,7 +5881,7 @@ class Editor {
                     return;
                 }
                 if (range.isBoxStart || range.isBoxEnd) {
-                    this.inputInBoxStrip();
+                    this.moveBoxStripText();
                     this.history.save();
                     this.event.emit('input', inputEvent);
                     return;
@@ -5834,30 +5889,60 @@ class Editor {
                 if (inputEvent.inputType === 'insertText' ||
                     inputEvent.inputType === 'insertCompositionText') {
                     this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
+                    this.unsavedInputCount++;
                     if (this.unsavedInputData.length < this.config.minChangeSize) {
-                        this.event.emit('input', inputEvent);
-                        this.emitChangeEvent(this.getValue());
-                        return;
+                        this.history.save({
+                            inputType: 'insertText',
+                            update: this.unsavedInputCount > 1,
+                        });
+                    }
+                    else {
+                        this.history.save({
+                            inputType: 'insertText',
+                            update: true,
+                        });
+                        this.resetUnsavedInputData();
                     }
+                    this.event.emit('input', inputEvent);
+                    return;
                 }
                 this.history.save();
                 this.event.emit('input', inputEvent);
             }, 0);
         });
-        this.command.event.on('beforeexecute', () => this.commitUnsavedInputData());
     }
+    // Binds events about history.
     bindHistoryEvents() {
+        const executeCommonMethods = (value) => {
+            if (this.fixContent()) {
+                this.history.save({
+                    update: true,
+                    emitEvent: false,
+                });
+                value = this.getValue();
+            }
+            this.emitStateChangeEvent();
+            this.togglePlaceholderClass(value);
+            this.scrollToCaret();
+            this.event.emit('change', value);
+        };
         this.history.event.on('undo', value => {
             this.renderBoxes();
-            this.emitChangeEvent(value);
+            executeCommonMethods(value);
+            this.resetUnsavedInputData();
         });
         this.history.event.on('redo', value => {
             this.renderBoxes();
-            this.emitChangeEvent(value);
+            executeCommonMethods(value);
+            this.resetUnsavedInputData();
         });
-        this.history.event.on('save', value => {
+        this.history.event.on('save', (value, options) => {
             this.removeBoxGarbage();
-            this.emitChangeEvent(value);
+            executeCommonMethods(value);
+            this.selection.sync();
+            if (options.inputType !== 'insertText') {
+                this.resetUnsavedInputData();
+            }
         });
     }
     // Returns a boolean value indicating whether the editor has focus.
@@ -5874,47 +5959,34 @@ class Editor {
     }
     // Fixes wrong content, especially empty tag.
     fixContent() {
+        let changed = false;
         let children = this.container.children();
         for (const child of children) {
             if ((child.isBlock || child.isMark) && child.html() === '') {
                 child.remove();
-                debug('fixContent(): empty tag was removed');
+                changed = true;
+                debug(`Content fixed: empty tag "${child.name}" was removed`);
             }
         }
         children = this.container.children();
         if (children.length === 0) {
             this.container.html('<p><br /></p>');
             this.selection.range.shrinkAfter(this.container);
-            debug('fixContent(): default paragraph was added');
-            return;
+            changed = true;
+            debug('Content fixed: default paragraph was added');
         }
-        if (children.length === 1) {
+        else if (children.length === 1) {
             const child = children[0];
             if (child.isVoid) {
                 const paragraph = query('<p />');
                 child.before(paragraph);
                 paragraph.append(child);
                 this.selection.range.shrinkAfter(paragraph);
-                debug('fixContent(): void element was wrapped in paragraph');
+                changed = true;
+                debug(`Content fixed: void element "${child.name}" was wrapped in paragraph`);
             }
         }
-    }
-    // Saves the input data which is unsaved.
-    commitUnsavedInputData() {
-        if (this.unsavedInputData.length > 0) {
-            this.history.save(false);
-            this.unsavedInputData = '';
-        }
-    }
-    // Updates some state before custom modifications.
-    prepareOperation() {
-        this.commitUnsavedInputData();
-        this.history.pause();
-    }
-    // Saves custom modifications to the history.
-    commitOperation() {
-        this.history.continue();
-        this.history.save();
+        return changed;
     }
     // Sets default config for a plugin.
     setPluginConfig(name, config) {
@@ -5951,11 +6023,11 @@ class Editor {
             box.render();
         });
     }
-    // Sets focus on the editor area.
+    // Sets focus on the editor.
     focus() {
         this.container.focus();
     }
-    // Removes focus from the editor area.
+    // Removes focus from the editor.
     blur() {
         this.container.blur();
     }
@@ -5963,6 +6035,9 @@ class Editor {
     scrollToCaret() {
         // Creates an artificial caret that is the same size as the caret at the current caret position.
         const rangeRect = this.selection.range.getRect();
+        if (rangeRect.x === 0 || rangeRect.y === 0) {
+            return;
+        }
         const containerRect = this.container.get(0).getBoundingClientRect();
         const artificialCaret = query('<div class="lake-artificial-caret" />');
         const left = rangeRect.x - containerRect.x;
@@ -5991,7 +6066,7 @@ class Editor {
         }
         artificialCaret.remove();
     }
-    // Sets the specified HTML string to the editor area.
+    // Sets the specified value to the editor.
     setValue(value) {
         value = normalizeValue(value);
         const htmlParser = new HTMLParser(value);
@@ -6002,15 +6077,14 @@ class Editor {
         this.renderBoxes();
         this.selection.updateByBookmark();
     }
-    // Returns the contents from the editor.
+    // Returns the value of the editor.
     getValue() {
-        const bookmark = this.selection.insertBookmark();
-        let value = new HTMLParser(this.container).getHTML();
+        const item = this.history.cloneContainer();
+        let value = new HTMLParser(item).getHTML();
         value = denormalizeValue(value);
-        this.selection.toBookmark(bookmark);
         return value;
     }
-    // Renders an editor area and set default value to it.
+    // Renders an editor area and sets default value to it.
     render() {
         const value = normalizeValue(this.config.value);
         const htmlParser = new HTMLParser(value);
@@ -6025,7 +6099,9 @@ class Editor {
         Editor.plugin.loadAll(this);
         if (!this.readonly) {
             this.selection.updateByBookmark();
-            this.history.save();
+            this.history.save({
+                emitEvent: false,
+            });
         }
         this.renderBoxes();
         if (this.toolbar) {
@@ -6035,7 +6111,6 @@ class Editor {
         if (!this.readonly) {
             document.addEventListener('cut', this.cutListener);
             document.addEventListener('paste', this.pasteListener);
-            window.addEventListener('beforeunload', this.beforeunloadListener);
             document.addEventListener('selectionchange', this.selectionchangeListener);
             document.addEventListener('click', this.clickListener);
             window.addEventListener('resize', this.resizeListener);
@@ -6043,10 +6118,9 @@ class Editor {
             this.bindHistoryEvents();
         }
     }
-    // Destroys a rendered editor.
+    // Destroys the rendered editor.
     unmount() {
         this.event.removeAllListeners();
-        this.command.event.removeAllListeners();
         this.history.event.removeAllListeners();
         this.root.empty();
         this.popupContainer.remove();
@@ -6054,7 +6128,6 @@ class Editor {
         if (!this.readonly) {
             document.removeEventListener('cut', this.cutListener);
             document.removeEventListener('paste', this.pasteListener);
-            window.removeEventListener('beforeunload', this.beforeunloadListener);
             document.removeEventListener('selectionchange', this.selectionchangeListener);
             document.removeEventListener('click', this.clickListener);
             window.removeEventListener('resize', this.resizeListener);
@@ -6258,7 +6331,7 @@ const moreStyleMenuItems = [
         text: locale => locale.toolbar.code(),
     },
 ];
-// These colors are from Ant Design (https://ant.design/docs/spec/colors)
+// These colors are sourced from Ant Design (https://ant.design/docs/spec/colors)
 const colors = [
     // Dust Red, Volcano, Sunset Orange, Calendula Gold, Sunrise Yellow, Lime, Polar Green, Cyan, Daybreak Blue, Geek Blue, Golden Purple, Magenta
     '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#1677ff', '#2f54eb', '#722ed1', '#eb2f96', // color 6
@@ -6533,19 +6606,19 @@ const toolbarItems = [
         },
     },
     {
-        name: 'video',
+        name: 'codeBlock',
         type: 'button',
-        icon: icons.get('video'),
-        tooltip: locale => locale.toolbar.video(),
+        icon: icons.get('codeBlock'),
+        tooltip: locale => locale.toolbar.codeBlock(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
     },
     {
-        name: 'codeBlock',
+        name: 'video',
         type: 'button',
-        icon: icons.get('codeBlock'),
-        tooltip: locale => locale.toolbar.codeBlock(),
+        icon: icons.get('video'),
+        tooltip: locale => locale.toolbar.video(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6568,9 +6641,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         icon: icons.get('list'),
-        defaultValue: '',
         tooltip: locale => locale.toolbar.list(),
-        width: 'auto',
         menuType: 'list',
         menuItems: listMenuItems,
         onSelect: (editor, value) => {
@@ -6582,9 +6653,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         icon: icons.get('alignLeft'),
-        defaultValue: '',
         tooltip: locale => locale.toolbar.align(),
-        width: 'auto',
         menuType: 'list',
         menuItems: alignMenuItems,
         onSelect: (editor, value) => {
@@ -6596,9 +6665,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         icon: icons.get('increaseIndent'),
-        defaultValue: '',
         tooltip: locale => locale.toolbar.indent(),
-        width: 'auto',
         menuType: 'list',
         menuItems: indentMenuItems,
         onSelect: (editor, value) => {
@@ -6635,9 +6702,7 @@ const toolbarItems = [
         name: 'moreStyle',
         type: 'dropdown',
         icon: icons.get('more'),
-        defaultValue: '',
         tooltip: locale => locale.toolbar.moreStyle(),
-        width: 'auto',
         menuType: 'list',
         menuItems: moreStyleMenuItems,
         selectedValues: appliedItems => {
@@ -6663,9 +6728,9 @@ const toolbarItems = [
         accentIcon: icons.get('fontColorAccent'),
         defaultValue: '#f5222d',
         tooltip: locale => locale.toolbar.fontColor(),
-        width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
+        menuWidth: '296px',
         onSelect: (editor, value) => {
             editor.command.execute('fontColor', value);
         },
@@ -6678,9 +6743,9 @@ const toolbarItems = [
         accentIcon: icons.get('highlightAccent'),
         defaultValue: '#fadb14',
         tooltip: locale => locale.toolbar.highlight(),
-        width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
+        menuWidth: '296px',
         onSelect: (editor, value) => {
             editor.command.execute('highlight', value);
         },
@@ -6703,64 +6768,6 @@ const toolbarItems = [
     },
 ];
 
-function uploadFile(config) {
-    const { editor, name, file, onError, onSuccess } = config;
-    const { requestMethod, requestAction, requestTypes } = editor.config[name];
-    if (requestTypes.indexOf(file.type) < 0) {
-        if (onError) {
-            onError(`File '${file.name}' is not allowed for uploading.`);
-        }
-        throw new Error(`Cannot upload file '${file.name}' because its type '${file.type}' is not found in ['${requestTypes.join('\', \'')}'].`);
-    }
-    const box = editor.selection.insertBox(name, {
-        url: URL.createObjectURL(file),
-        status: 'uploading',
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        lastModified: file.lastModified,
-    });
-    const xhr = request({
-        onProgress: e => {
-            const percentNode = box.node.find('.lake-percent');
-            const percent = Math.round(e.percent);
-            percentNode.text(`${percent < 100 ? percent : 99} %`);
-        },
-        onError: (error, body) => {
-            debug(error.toString(), body);
-            box.updateValue('status', 'error');
-            box.render();
-            if (onError) {
-                onError(error.toString());
-            }
-        },
-        onSuccess: body => {
-            if (!body.url) {
-                box.updateValue('status', 'error');
-                box.render();
-                if (onError) {
-                    onError('Cannot find the url field.');
-                }
-                return;
-            }
-            box.updateValue({
-                status: 'done',
-                url: body.url,
-            });
-            box.render();
-            editor.history.save();
-            if (onSuccess) {
-                onSuccess();
-            }
-        },
-        file,
-        action: requestAction,
-        method: requestMethod,
-    });
-    box.setData('xhr', xhr);
-    return box;
-}
-
 const defaultItems = [
     'undo',
     'redo',
@@ -6783,9 +6790,9 @@ const defaultItems = [
     'hr',
 ];
 const toolbarItemMap = new Map();
-toolbarItems.forEach(item => {
+for (const item of toolbarItems) {
     toolbarItemMap.set(item.name, item);
-});
+}
 class Toolbar {
     constructor(config) {
         this.placement = 'top';
@@ -6830,6 +6837,7 @@ class Toolbar {
             width: item.width,
             menuType: item.menuType,
             menuItems: item.menuItems,
+            menuWidth: item.menuWidth,
             tabIndex: -1,
             placement: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
@@ -6931,7 +6939,7 @@ class Toolbar {
                 Dropdown.setValue(dropdownNode, selectedValues);
                 const textNode = dropdownNode.find('.lake-dropdown-text');
                 if (textNode.length > 0) {
-                    const key = selectedValues[0] || item.defaultValue;
+                    const key = selectedValues[0] || item.defaultValue || '';
                     const menuMap = this.allMenuMap.get(item.name);
                     const text = (_a = (menuMap && menuMap.get(key))) !== null && _a !== void 0 ? _a : key;
                     textNode.text(text);
@@ -6943,36 +6951,35 @@ class Toolbar {
     render(editor) {
         this.root.empty();
         this.root.append(this.container);
-        this.items.forEach(name => {
+        for (const name of this.items) {
             if (name === '|') {
                 this.appendDivider();
-                return;
-            }
-            let item;
-            if (typeof name === 'string') {
-                item = toolbarItemMap.get(name);
-                if (!item) {
-                    return;
-                }
             }
             else {
-                item = name;
-            }
-            if (item.type === 'button') {
-                this.buttonItemList.push(item);
-                this.appendButton(editor, item);
-                return;
-            }
-            if (item.type === 'dropdown') {
-                this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems, editor.locale));
-                this.dropdownItemList.push(item);
-                this.appendDropdown(editor, item);
-                return;
-            }
-            if (item.type === 'upload') {
-                this.appendUpload(editor, item);
+                let item;
+                if (typeof name === 'string') {
+                    item = toolbarItemMap.get(name);
+                    if (!item) {
+                        throw new Error(`ToolbarItem "${name}" has not been defined yet.`);
+                    }
+                }
+                else {
+                    item = name;
+                }
+                if (item.type === 'button') {
+                    this.buttonItemList.push(item);
+                    this.appendButton(editor, item);
+                }
+                else if (item.type === 'dropdown') {
+                    this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems, editor.locale));
+                    this.dropdownItemList.push(item);
+                    this.appendDropdown(editor, item);
+                }
+                else if (item.type === 'upload') {
+                    this.appendUpload(editor, item);
+                }
             }
-        });
+        }
     }
 }
 
@@ -6984,248 +6991,15 @@ const hrBox = {
         if (!editor) {
             return;
         }
-        const hrNode = query('<div class="lake-hr"><hr /></div>');
-        box.getContainer().append(hrNode);
-        hrNode.on('click', () => {
+        const rootNode = query('<div class="lake-hr"><hr /></div>');
+        box.getContainer().append(rootNode);
+        rootNode.on('click', () => {
             editor.selection.selectBox(box);
         });
     },
     html: () => '<hr />',
 };
 
-class BoxResizer {
-    constructor(config) {
-        this.config = config;
-        this.root = config.root;
-        this.box = config.box;
-    }
-    bindEvents(pointerNode) {
-        const box = this.box;
-        const boxContainer = box.getContainer();
-        const resizerNode = pointerNode.closest('.lake-resizer');
-        const infoNode = resizerNode.find('.lake-resizer-info');
-        const isPlus = pointerNode.attr('class').indexOf('-right') >= 0;
-        const initialWidth = boxContainer.width();
-        const initialHeight = boxContainer.height();
-        const rate = initialHeight / initialWidth;
-        let clientX = 0;
-        let width = 0;
-        // resizing box
-        const pointermoveListener = (event) => {
-            const pointerEvent = event;
-            const diffX = pointerEvent.clientX - clientX;
-            const newWidth = Math.round(isPlus ? width + diffX : width - diffX);
-            const newHeight = Math.round(rate * newWidth);
-            infoNode.text(`${newWidth} x ${newHeight}`);
-            boxContainer.css({
-                width: `${newWidth}px`,
-                height: `${newHeight}px`,
-            });
-            if (this.config.onResize) {
-                this.config.onResize(newWidth, newHeight);
-            }
-        };
-        // start resizing
-        const pointerdownListener = (event) => {
-            const pointerEvent = event;
-            const pointerNativeNode = pointerNode.get(0);
-            // The capture will be implicitly released after a pointerup or pointercancel event.
-            // https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
-            pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
-            clientX = pointerEvent.clientX;
-            width = boxContainer.width();
-            infoNode.show();
-            pointerNode.on('pointermove', pointermoveListener);
-        };
-        // stop resizing
-        const pointerupListner = () => {
-            pointerNode.off('pointermove');
-            infoNode.hide();
-            width = box.getContainer().width();
-            const height = Math.round(rate * width);
-            this.config.onStop(width, height);
-        };
-        // cancel resizing
-        const pointercancelListner = () => {
-            pointerNode.off('pointermove');
-            infoNode.hide();
-        };
-        pointerNode.on('pointerdown', pointerdownListener);
-        pointerNode.on('pointerup', pointerupListner);
-        pointerNode.on('pointercancel', pointercancelListner);
-    }
-    render() {
-        const { width, height } = this.config;
-        const resizerNode = query(safeTemplate `
-      <div class="lake-resizer">
-        <div class="lake-resizer-top-left"></div>
-        <div class="lake-resizer-top-right"></div>
-        <div class="lake-resizer-bottom-left"></div>
-        <div class="lake-resizer-bottom-right"></div>
-        <div class="lake-resizer-info">${width} x ${height}</div>
-      </div>
-    `);
-        this.bindEvents(resizerNode.find('.lake-resizer-top-left'));
-        this.bindEvents(resizerNode.find('.lake-resizer-top-right'));
-        this.bindEvents(resizerNode.find('.lake-resizer-bottom-left'));
-        this.bindEvents(resizerNode.find('.lake-resizer-bottom-right'));
-        this.root.append(resizerNode);
-    }
-}
-
-function getVideoId(url) {
-    const result = /\w+$/i.exec(url || '');
-    return result ? result[0] : '';
-}
-function getInputValue(videoNode, name) {
-    const inputElement = videoNode.find(`input[name="${name}"]`);
-    const nativeInputElement = inputElement.get(0);
-    return nativeInputElement.value;
-}
-function appendButtonGroup(box) {
-    const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
-    const boxContainer = box.getContainer();
-    const videoNode = boxContainer.find('.lake-video');
-    const buttonGroupNode = query(safeTemplate `
-    <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.video.remove()}"></button>
-    </div>
-  `);
-    const removeButton = buttonGroupNode.find('.lake-button-remove');
-    const removeIcon = icons.get('remove');
-    if (removeIcon) {
-        removeButton.append(removeIcon);
-    }
-    buttonGroupNode.find('.lake-button-remove').on('click', event => {
-        event.stopPropagation();
-        editor.selection.removeBox(box);
-        editor.history.save();
-        editor.selection.sync();
-    });
-    videoNode.append(buttonGroupNode);
-}
-function showVideo(box) {
-    const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
-    const boxContainer = box.getContainer();
-    const value = box.value;
-    const width = value.width || 560;
-    const height = value.height || 315;
-    boxContainer.css({
-        width: `${width}px`,
-        height: `${height}px`,
-    });
-    const videoId = getVideoId(value.url);
-    if (videoId === '') {
-        throw new Error(`Invalid link: ${value.url}`);
-    }
-    // YouTube URL: https://www.youtube.com/watch?v=5sMBhDv4sik
-    // The script for embedding YouTube:
-    // <iframe width="560" height="315" src="https://www.youtube.com/embed/5sMBhDv4sik" title="YouTube video player"
-    // frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    // referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-    const iframeNode = query(safeTemplate `
-    <iframe width="100%" height="${height}" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player"
-      frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-  `);
-    const videoNode = boxContainer.find('.lake-video');
-    if (!editor.readonly) {
-        iframeNode.on('load', () => {
-            appendButtonGroup(box);
-            new BoxResizer({
-                root: videoNode,
-                box,
-                width,
-                height,
-                onResize: (newWidth, newHeight) => {
-                    iframeNode.attr({
-                        height: newHeight.toString(),
-                    });
-                },
-                onStop: (newWidth, newHeight) => {
-                    box.updateValue({
-                        width: newWidth,
-                        height: newHeight,
-                    });
-                    editor.history.save();
-                },
-            }).render();
-        });
-    }
-    videoNode.append(iframeNode);
-}
-const videoBox = {
-    type: 'inline',
-    name: 'video',
-    render: box => {
-        const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
-        const locale = editor.locale;
-        const value = box.value;
-        const boxContainer = box.getContainer();
-        const videoNode = query('<div class="lake-video" />');
-        boxContainer.empty();
-        boxContainer.css({
-            width: '',
-            height: '',
-        });
-        boxContainer.append(videoNode);
-        if (!value.url) {
-            if (editor.readonly) {
-                box.node.hide();
-                return;
-            }
-            const formNode = query(safeTemplate `
-        <div class="lake-video-form">
-          <div class="lake-row lake-desc-row">${locale.video.description()}</div>
-          <div class="lake-row">${locale.video.url()}</div>
-          <div class="lake-row">
-            <input type="text" name="url" placeholder="https://www.youtube.com/watch?v=..." />
-          </div>
-          <div class="lake-row lake-button-row"></div>
-        </div>
-      `);
-            const button = new Button({
-                root: formNode.find('.lake-button-row'),
-                name: 'embed',
-                type: 'primary',
-                text: locale.video.embed(),
-                onClick: () => {
-                    const url = getInputValue(formNode, 'url');
-                    if (url.indexOf('https://www.youtube.com/') < 0 || getVideoId(url) === '') {
-                        editor.config.onMessage('error', locale.video.urlError());
-                        return;
-                    }
-                    box.updateValue('url', url);
-                    editor.history.save();
-                    formNode.remove();
-                    showVideo(box);
-                },
-            });
-            formNode.find('input[name="url"]').on('keydown', createKeybindingsHandler({
-                'Enter': event => {
-                    event.preventDefault();
-                    button.node.emit('click');
-                },
-            }));
-            button.render();
-            videoNode.append(formNode);
-            appendButtonGroup(box);
-        }
-        else {
-            showVideo(box);
-        }
-    },
-};
-
 const config = {
     comment: '#57606a',
     name: '#444d56',
@@ -7312,12 +7086,12 @@ const codeBlockBox = {
         if (!editor) {
             return;
         }
-        const codeBlockNode = query('<div class="lake-code-block" />');
+        const rootNode = query('<div class="lake-code-block" />');
         const container = box.getContainer();
         container.css('width', `${editor.container.innerWidth() - 2}px`);
         container.empty();
-        container.append(codeBlockNode);
-        const codeBlockNativeNode = codeBlockNode.get(0);
+        container.append(rootNode);
+        const codeBlockNativeNode = rootNode.get(0);
         if (!codeBlockNativeNode) {
             return;
         }
@@ -7328,12 +7102,12 @@ const codeBlockBox = {
                 box.node.hide();
                 return;
             }
-            codeBlockNode.addClass('lake-code-block-error');
-            codeBlockNode.text(`
+            rootNode.addClass('lake-code-block-error');
+            rootNode.text(`
         The code cannot be displayed because window.LakeCodeMirror is not found.
         Please check if the "lake-codemirror" library is added to this page.
       `.trim());
-            codeBlockNode.on('click', () => {
+            rootNode.on('click', () => {
                 editor.selection.selectBox(box);
             });
             return;
@@ -7383,14 +7157,13 @@ const codeBlockBox = {
                 updateListener,
             ],
         });
-        codeBlockNode.find('[contenteditable="true"]').attr('tabindex', '-1');
+        rootNode.find('[contenteditable="true"]').attr('tabindex', '-1');
         const dropdown = new Dropdown({
-            root: codeBlockNode,
+            root: rootNode,
             name: 'langType',
             downIcon: icons.get('down'),
             defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
             tooltip: editor.locale.codeBlock.langType(),
-            width: 'auto',
             menuType: 'list',
             menuItems: langItems.map((item) => ({
                 value: item.value,
@@ -7408,11 +7181,16 @@ const codeBlockBox = {
             },
         });
         dropdown.render();
-        box.setData('codeEditor', codeEditor);
         const resizeListener = () => {
             container.css('width', `${editor.container.innerWidth() - 2}px`);
         };
         editor.event.on('resize', resizeListener);
+        rootNode.on('click', () => {
+            if (codeEditor.hasFocus) {
+                return;
+            }
+            codeEditor.focus();
+        });
         box.event.on('beforeunmount', () => {
             codeEditor.destroy();
             editor.event.off('resize', resizeListener);
@@ -7453,6 +7231,86 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+class BoxResizer {
+    constructor(config) {
+        this.config = config;
+        this.root = config.root;
+        this.box = config.box;
+    }
+    bindEvents(pointerNode) {
+        const box = this.box;
+        const boxContainer = box.getContainer();
+        const resizerNode = pointerNode.closest('.lake-resizer');
+        const infoNode = resizerNode.find('.lake-resizer-info');
+        const isPlus = pointerNode.attr('class').indexOf('-right') >= 0;
+        const initialWidth = boxContainer.width();
+        const initialHeight = boxContainer.height();
+        const rate = initialHeight / initialWidth;
+        let clientX = 0;
+        let width = 0;
+        // resizing box
+        const pointermoveListener = (event) => {
+            const pointerEvent = event;
+            const diffX = pointerEvent.clientX - clientX;
+            const newWidth = Math.round(isPlus ? width + diffX : width - diffX);
+            const newHeight = Math.round(rate * newWidth);
+            infoNode.text(`${newWidth} x ${newHeight}`);
+            boxContainer.css({
+                width: `${newWidth}px`,
+                height: `${newHeight}px`,
+            });
+            if (this.config.onResize) {
+                this.config.onResize(newWidth, newHeight);
+            }
+        };
+        // start resizing
+        const pointerdownListener = (event) => {
+            const pointerEvent = event;
+            const pointerNativeNode = pointerNode.get(0);
+            // The capture will be implicitly released after a pointerup or pointercancel event.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
+            pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
+            clientX = pointerEvent.clientX;
+            width = boxContainer.width();
+            infoNode.show();
+            pointerNode.on('pointermove', pointermoveListener);
+        };
+        // stop resizing
+        const pointerupListner = () => {
+            pointerNode.off('pointermove');
+            infoNode.hide();
+            width = box.getContainer().width();
+            const height = Math.round(rate * width);
+            this.config.onStop(width, height);
+        };
+        // cancel resizing
+        const pointercancelListner = () => {
+            pointerNode.off('pointermove');
+            infoNode.hide();
+        };
+        pointerNode.on('pointerdown', pointerdownListener);
+        pointerNode.on('pointerup', pointerupListner);
+        pointerNode.on('pointercancel', pointercancelListner);
+    }
+    render() {
+        const { width, height } = this.config;
+        const resizerNode = query(safeTemplate `
+      <div class="lake-resizer">
+        <div class="lake-resizer-top-left"></div>
+        <div class="lake-resizer-top-right"></div>
+        <div class="lake-resizer-bottom-left"></div>
+        <div class="lake-resizer-bottom-right"></div>
+        <div class="lake-resizer-info">${width} x ${height}</div>
+      </div>
+    `);
+        this.bindEvents(resizerNode.find('.lake-resizer-top-left'));
+        this.bindEvents(resizerNode.find('.lake-resizer-top-right'));
+        this.bindEvents(resizerNode.find('.lake-resizer-bottom-left'));
+        this.bindEvents(resizerNode.find('.lake-resizer-bottom-right'));
+        this.root.append(resizerNode);
+    }
+}
+
 // Loads an image and get its width and height.
 function getImageInfo(url) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -7590,7 +7448,7 @@ function openFullScreen(box) {
     lightbox.loadAndOpen(currentIndex);
 }
 // Displays error icon and filename.
-function renderError(imageNode, box) {
+function renderError(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7621,12 +7479,12 @@ function renderError(imageNode, box) {
         if (imageIcon) {
             errorNode.find('.lake-error-icon').append(imageIcon);
         }
-        imageNode.append(buttonGroupNode);
-        imageNode.append(errorNode);
+        rootNode.append(buttonGroupNode);
+        rootNode.append(errorNode);
     });
 }
 // Displays an image with uplaoding progress.
-function renderUploading(imageNode, box) {
+function renderUploading(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7635,7 +7493,7 @@ function renderUploading(imageNode, box) {
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(imageNode, box);
+            yield renderError(rootNode, box);
             return;
         }
         const maxWidth = editor.container.innerWidth() - 2;
@@ -7680,13 +7538,13 @@ function renderUploading(imageNode, box) {
             draggable: 'false',
             alt: value.name,
         });
-        imageNode.append(buttonGroupNode);
-        imageNode.append(progressNode);
-        imageNode.append(imgNode);
+        rootNode.append(buttonGroupNode);
+        rootNode.append(progressNode);
+        rootNode.append(imgNode);
     });
 }
 // Displays an image that can be previewed or removed.
-function renderDone(imageNode, box) {
+function renderDone(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7699,7 +7557,7 @@ function renderDone(imageNode, box) {
             return;
         }
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(imageNode, box);
+            yield renderError(rootNode, box);
             return;
         }
         let width = value.width;
@@ -7742,9 +7600,9 @@ function renderDone(imageNode, box) {
             draggable: 'false',
             alt: value.name,
         });
-        imageNode.append(buttonGroupNode);
+        rootNode.append(buttonGroupNode);
         new BoxResizer({
-            root: imageNode,
+            root: rootNode,
             box,
             width,
             height,
@@ -7756,7 +7614,7 @@ function renderDone(imageNode, box) {
                 editor.history.save();
             },
         }).render();
-        imageNode.append(imgNode);
+        rootNode.append(imgNode);
     });
 }
 const imageBox = {
@@ -7797,46 +7655,193 @@ const imageBox = {
         if (value.status === 'loading') {
             return;
         }
-        const imageNode = query('<div class="lake-image" />');
-        imageNode.addClass(`lake-image-${value.status}`);
+        const rootNode = query('<div class="lake-image" />');
+        rootNode.addClass(`lake-image-${value.status}`);
         let promise;
         if (value.status === 'uploading') {
-            promise = renderUploading(imageNode, box);
+            promise = renderUploading(rootNode, box);
         }
         else if (value.status === 'error') {
-            promise = renderError(imageNode, box);
+            promise = renderError(rootNode, box);
         }
         else {
-            promise = renderDone(imageNode, box);
+            promise = renderDone(rootNode, box);
         }
         promise.then(() => {
             container.empty();
-            container.append(imageNode);
-            imageNode.find('.lake-button-view').on('click', () => openFullScreen(box));
+            container.append(rootNode);
+            rootNode.find('.lake-button-view').on('click', () => openFullScreen(box));
             if (editor.readonly) {
-                imageNode.find('.lake-button-remove').hide();
+                rootNode.find('.lake-button-remove').hide();
             }
             else {
-                imageNode.find('.lake-button-remove').on('click', event => {
+                rootNode.find('.lake-button-remove').on('click', event => {
                     event.stopPropagation();
-                    const xhr = box.getData('xhr');
-                    if (xhr) {
-                        xhr.abort();
-                    }
                     editor.selection.removeBox(box);
                     editor.history.save();
-                    editor.selection.sync();
                 });
             }
             box.event.emit('render');
         });
-        imageNode.on('click', () => {
+        rootNode.on('click', () => {
             editor.selection.selectBox(box);
         });
     },
     html: box => {
-        const value = box.node.attr('value');
-        return safeTemplate `<img src="${box.value.url}" data-lake-value="${value}" />`;
+        const rawValue = box.node.attr('value');
+        return safeTemplate `<img src="${box.value.url}" data-lake-value="${rawValue}" />`;
+    },
+};
+
+function getVideoId(url) {
+    const result = /\w+$/i.exec(url || '');
+    return result ? result[0] : '';
+}
+function getInputValue(videoNode, name) {
+    const inputElement = videoNode.find(`input[name="${name}"]`);
+    const nativeInputElement = inputElement.get(0);
+    return nativeInputElement.value;
+}
+function appendButtonGroup(box) {
+    const editor = box.getEditor();
+    if (!editor) {
+        return;
+    }
+    const boxContainer = box.getContainer();
+    const videoNode = boxContainer.find('.lake-video');
+    const buttonGroupNode = query(safeTemplate `
+    <div class="lake-button-group">
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.video.remove()}"></button>
+    </div>
+  `);
+    const removeButton = buttonGroupNode.find('.lake-button-remove');
+    const removeIcon = icons.get('remove');
+    if (removeIcon) {
+        removeButton.append(removeIcon);
+    }
+    buttonGroupNode.find('.lake-button-remove').on('click', event => {
+        event.stopPropagation();
+        editor.selection.removeBox(box);
+        editor.history.save();
+    });
+    videoNode.append(buttonGroupNode);
+}
+function showVideo(box) {
+    const editor = box.getEditor();
+    if (!editor) {
+        return;
+    }
+    const boxContainer = box.getContainer();
+    const value = box.value;
+    const width = value.width || 560;
+    const height = value.height || 315;
+    boxContainer.css({
+        width: `${width}px`,
+        height: `${height}px`,
+    });
+    const videoId = getVideoId(value.url);
+    if (videoId === '') {
+        throw new Error(`Invalid link: ${value.url}`);
+    }
+    // YouTube URL: https://www.youtube.com/watch?v=5sMBhDv4sik
+    // The script for embedding YouTube:
+    // <iframe width="560" height="315" src="https://www.youtube.com/embed/5sMBhDv4sik" title="YouTube video player"
+    // frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    // referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    const iframeNode = query(safeTemplate `
+    <iframe width="100%" height="${height}" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player"
+      frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  `);
+    const rootNode = boxContainer.find('.lake-video');
+    if (!editor.readonly) {
+        iframeNode.on('load', () => {
+            appendButtonGroup(box);
+            new BoxResizer({
+                root: rootNode,
+                box,
+                width,
+                height,
+                onResize: (newWidth, newHeight) => {
+                    iframeNode.attr({
+                        height: newHeight.toString(),
+                    });
+                },
+                onStop: (newWidth, newHeight) => {
+                    box.updateValue({
+                        width: newWidth,
+                        height: newHeight,
+                    });
+                    editor.history.save();
+                },
+            }).render();
+        });
+    }
+    rootNode.append(iframeNode);
+}
+const videoBox = {
+    type: 'inline',
+    name: 'video',
+    render: box => {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
+        const locale = editor.locale;
+        const value = box.value;
+        const boxContainer = box.getContainer();
+        const rootNode = query('<div class="lake-video" />');
+        boxContainer.empty();
+        boxContainer.css({
+            width: '',
+            height: '',
+        });
+        boxContainer.append(rootNode);
+        if (!value.url) {
+            if (editor.readonly) {
+                box.node.hide();
+                return;
+            }
+            const formNode = query(safeTemplate `
+        <div class="lake-video-form">
+          <div class="lake-row lake-desc-row">${locale.video.description()}</div>
+          <div class="lake-row">${locale.video.url()}</div>
+          <div class="lake-row">
+            <input type="text" name="url" placeholder="https://www.youtube.com/watch?v=..." />
+          </div>
+          <div class="lake-row lake-button-row"></div>
+        </div>
+      `);
+            const button = new Button({
+                root: formNode.find('.lake-button-row'),
+                name: 'embed',
+                type: 'primary',
+                text: locale.video.embed(),
+                onClick: () => {
+                    const url = getInputValue(formNode, 'url');
+                    if (url.indexOf('https://www.youtube.com/') < 0 || getVideoId(url) === '') {
+                        editor.config.onMessage('error', locale.video.urlError());
+                        return;
+                    }
+                    box.updateValue('url', url);
+                    editor.history.save();
+                    formNode.remove();
+                    showVideo(box);
+                },
+            });
+            formNode.find('input[name="url"]').on('keydown', createKeybindingsHandler({
+                'Enter': event => {
+                    event.preventDefault();
+                    button.node.emit('click');
+                },
+            }));
+            button.render();
+            rootNode.append(formNode);
+            appendButtonGroup(box);
+        }
+        else {
+            showVideo(box);
+        }
     },
 };
 
@@ -7862,11 +7867,10 @@ const boxToolbarItems = [
             }
             editor.selection.removeBox(box);
             editor.history.save();
-            editor.selection.sync();
         },
     },
 ];
-function appendContent(fileNode, box) {
+function appendContent(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7899,7 +7903,7 @@ function appendContent(fileNode, box) {
                 typeNode.append(fileIcon);
             }
         }
-        fileNode.append(infoNode);
+        rootNode.append(infoNode);
     });
 }
 const fileBox = {
@@ -7916,26 +7920,45 @@ const fileBox = {
             return;
         }
         const container = box.getContainer();
-        const fileNode = query('<div class="lake-file" />');
-        fileNode.addClass(`lake-file-${value.status}`);
-        appendContent(fileNode, box);
+        const rootNode = query('<div class="lake-file" />');
+        rootNode.addClass(`lake-file-${value.status}`);
+        appendContent(rootNode, box);
         container.empty();
-        container.append(fileNode);
+        container.append(rootNode);
         if (!editor.readonly) {
-            fileNode.on('click', () => {
+            rootNode.on('click', () => {
                 editor.selection.selectBox(box);
             });
             const items = value.status === 'done' ? boxToolbarItems : boxToolbarItems.filter(item => item.name === 'remove');
             box.setToolbar(items);
         }
         else {
-            fileNode.on('click', () => {
+            rootNode.on('click', () => {
                 window.open(value.url);
             });
         }
     },
 };
 
+const emojiBox = {
+    type: 'inline',
+    name: 'emoji',
+    render: box => {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
+        const value = box.value;
+        const rootNode = query(safeTemplate `
+      <div class="lake-emoji"><img src="${value.url}" title="${value.title}" /></div>
+    `);
+        box.getContainer().append(rootNode);
+        rootNode.on('click', () => {
+            editor.selection.selectBox(box);
+        });
+    },
+};
+
 var copy = (editor) => {
     editor.event.on('copy', event => {
         const range = editor.selection.range;
@@ -8554,7 +8577,6 @@ var list = (editor) => {
                 }
             }
             editor.history.save();
-            editor.selection.sync();
         },
     });
     editor.container.on('click', event => {
@@ -9166,14 +9188,12 @@ var link = (editor) => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.sync();
             editor.history.save();
         },
         onRemove: node => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
-            editor.selection.sync();
             editor.history.save();
         },
     });
@@ -9232,21 +9252,6 @@ var hr = (editor) => {
     });
 };
 
-var video = (editor) => {
-    if (editor.readonly) {
-        return;
-    }
-    editor.command.add('video', {
-        execute: (value) => {
-            const box = editor.selection.insertBox('video', value);
-            editor.history.save();
-            if (box) {
-                box.getContainer().find('input[name="url"]').focus();
-            }
-        },
-    });
-};
-
 const langList = [
     'text',
     'c',
@@ -9282,8 +9287,7 @@ var codeBlock = (editor) => {
         execute: (value) => {
             const box = editor.selection.insertBox('codeBlock', value);
             editor.history.save();
-            const codeEditor = box.getData('codeEditor');
-            codeEditor.focus();
+            box.getContainer().find('.lake-code-block').emit('click');
         },
     });
 };
@@ -9322,6 +9326,21 @@ var image = (editor) => {
     });
 };
 
+var video = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('video', {
+        execute: (value) => {
+            const box = editor.selection.insertBox('video', value);
+            editor.history.save();
+            if (box) {
+                box.getContainer().find('input[name="url"]').focus();
+            }
+        },
+    });
+};
+
 var file = (editor) => {
     editor.setPluginConfig('file', {
         requestMethod: 'POST',
@@ -9355,6 +9374,18 @@ var file = (editor) => {
     });
 };
 
+var emoji = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('emoji', {
+        execute: (value) => {
+            editor.selection.insertBox('emoji', value);
+            editor.history.save();
+        },
+    });
+};
+
 const headingTypeMap = new Map([
     ['#', 'h1'],
     ['##', 'h2'],
@@ -9554,7 +9585,7 @@ function executeMarkCommand(editor, point) {
             // <p>foobold\u200B<focus /></p>,
             // to
             // <p>foo[bold]\u200B<focus /></p>, startOffset = 3, endOffset = 7
-            editor.prepareOperation();
+            editor.history.pause();
             const bookmark = selection.insertBookmark();
             const node = bookmark.focus.prev();
             const oldValue = node.text();
@@ -9564,7 +9595,8 @@ function executeMarkCommand(editor, point) {
             range.setEnd(node, offset - (oldValue.length - newValue.length) - 1);
             editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
-            editor.commitOperation();
+            editor.history.continue();
+            editor.history.save();
             return true;
         }
     }
@@ -9586,16 +9618,14 @@ function spaceKeyExecutesBlockCommand(editor, point) {
             // <p>#<focus />foo</p>
             // to
             // <h1><focus />foo</h1>
-            editor.prepareOperation();
             const bookmark = selection.insertBookmark();
             const node = bookmark.focus.prev();
             node.remove();
             const block = bookmark.focus.closestBlock();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
-            editor.command.execute(commandName, ...parameters);
             selection.toBookmark(bookmark);
-            editor.commitOperation();
+            editor.command.execute(commandName, ...parameters);
             return true;
         }
     }
@@ -9616,12 +9646,10 @@ function enterKeyExecutesBlockCommand(editor, block) {
             // <p>---<focus /></p>
             // to
             // <lake-box type="block" name="hr" focus="end"></lake-box>
-            editor.prepareOperation();
             block.empty();
             fixEmptyBlock(block);
             selection.range.shrinkAfter(block);
             editor.command.execute(commandName, ...parameters);
-            editor.commitOperation();
             return true;
         }
     }
@@ -9700,7 +9728,7 @@ function splitBlock(editor, block) {
         block.find('li').attr('value', 'false');
     }
 }
-function addBlockOrSplitBlockForBox(editor) {
+function addOrSplitBlockForBox(editor) {
     const range = editor.selection.range;
     const boxNode = range.startNode.closest('lake-box');
     const block = boxNode.closestBlock();
@@ -9744,7 +9772,7 @@ var enterKey = (editor) => {
         event.preventDefault();
         editor.fixContent();
         if (range.isBox) {
-            addBlockOrSplitBlockForBox(editor);
+            addOrSplitBlockForBox(editor);
             editor.history.save();
             return;
         }
@@ -9753,7 +9781,7 @@ var enterKey = (editor) => {
             return;
         }
         if (range.isBox) {
-            addBlockOrSplitBlockForBox(editor);
+            addOrSplitBlockForBox(editor);
             editor.history.save();
             return;
         }
@@ -9779,7 +9807,9 @@ function addLineBreak(editor) {
         const prevNode = range.getPrevNode();
         const endText = range.getEndText();
         if (prevNode.name !== 'br' && endText === '') {
-            editor.selection.insertContents('<br /><br />');
+            const fragment = new Fragment();
+            fragment.append('<br /><br />');
+            editor.selection.insertFragment(fragment);
             editor.history.save();
             return;
         }
@@ -9848,6 +9878,14 @@ var shiftEnterKey = (editor) => {
     });
 };
 
+function removeEmptyMarks(range) {
+    const block = range.getBlocks()[0];
+    if (block && block.isEmpty && block.first().name !== 'br') {
+        block.empty();
+        appendDeepest(block, query('<br />'));
+        range.shrinkAfter(block);
+    }
+}
 function mergeWithPreviousBlock(editor, block) {
     const range = editor.selection.range;
     let prevBlock = block.prev();
@@ -9878,6 +9916,7 @@ function mergeWithPreviousBlock(editor, block) {
         prevBlock.remove();
         return;
     }
+    removeEmptyMarks(range);
     const bookmark = editor.selection.insertBookmark();
     mergeNodes(prevBlock, block);
     editor.selection.toBookmark(bookmark);
@@ -9890,6 +9929,14 @@ var backspaceKey = (editor) => {
     editor.keystroke.setKeydown('backspace', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
+            const boxNode = range.commonAncestor.closest('lake-box');
+            const box = getBox(boxNode);
+            const boxValue = box.value;
+            if (box.name === 'codeBlock' && (boxValue.code === undefined || boxValue.code === '')) {
+                event.preventDefault();
+                editor.selection.removeBox(box);
+                editor.history.save();
+            }
             return;
         }
         editor.fixContent();
@@ -9948,7 +9995,7 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        if (prevNode.isText && prevNode.text().length === 1) {
+        if (prevNode.isText && prevNode.text().length === 1 && prevNode.parent().isBlock) {
             event.preventDefault();
             const block = prevNode.closestBlock();
             range.setStartBefore(prevNode);
@@ -10111,13 +10158,14 @@ var tabKey = (editor) => {
         }
         event.preventDefault();
         const blocks = editor.selection.range.getBlocks();
-        blocks.forEach(block => {
+        for (const block of blocks) {
             if (block.name !== 'p' || block.css('text-indent') === '2em') {
                 setBlockIndent(block, 'increase');
-                return;
             }
-            block.css('text-indent', '2em');
-        });
+            else {
+                block.css('text-indent', '2em');
+            }
+        }
         editor.history.save();
     });
 };
@@ -10268,10 +10316,11 @@ var escapeKey = (editor) => {
 };
 
 Editor.box.add(hrBox);
-Editor.box.add(videoBox);
 Editor.box.add(codeBlockBox);
 Editor.box.add(imageBox);
+Editor.box.add(videoBox);
 Editor.box.add(fileBox);
+Editor.box.add(emojiBox);
 Editor.plugin.add(copy);
 Editor.plugin.add(cut);
 Editor.plugin.add(paste);
@@ -10299,10 +10348,11 @@ Editor.plugin.add(removeFormat);
 Editor.plugin.add(formatPainter);
 Editor.plugin.add(link);
 Editor.plugin.add(hr);
-Editor.plugin.add(video);
 Editor.plugin.add(codeBlock);
 Editor.plugin.add(image);
+Editor.plugin.add(video);
 Editor.plugin.add(file);
+Editor.plugin.add(emoji);
 Editor.plugin.add(markdown);
 Editor.plugin.add(enterKey);
 Editor.plugin.add(shiftEnterKey);
@@ -10312,5 +10362,5 @@ Editor.plugin.add(tabKey);
 Editor.plugin.add(arrowKeys);
 Editor.plugin.add(escapeKey);
 
-export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertContents, insertFragment, insertLink, insertNode, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertBox, insertFragment, insertLink, insertNode, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
 //# sourceMappingURL=lake.js.map