lakelib 0.1.14 → 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,9 +2015,9 @@ 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;
 }
 
@@ -2855,6 +2850,7 @@ var enUS = {
         highlight: 'Highlight',
         image: 'Image',
         file: 'File',
+        emoji: 'Emoji',
         removeColor: 'Remove color',
     },
     link: {
@@ -2938,6 +2934,7 @@ var zhCN = {
         highlight: '文字背景',
         image: '图片',
         file: '文件',
+        emoji: '表情',
         removeColor: '默认',
     },
     link: {
@@ -3021,6 +3018,7 @@ var ja = {
         highlight: '文字の背景',
         image: '画像',
         file: 'ファイル',
+        emoji: '絵文字',
         removeColor: 'デフォルト',
     },
     link: {
@@ -3104,6 +3102,7 @@ var ko = {
         highlight: '글자 배경',
         image: '이미지',
         file: '파일',
+        emoji: '이모지',
         removeColor: '기본색',
     },
     link: {
@@ -3284,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.
@@ -3347,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);
             });
         }
@@ -3374,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');
@@ -3398,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);
@@ -3489,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() {
@@ -3511,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>
@@ -3524,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);
@@ -3537,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() {
@@ -3610,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]');
@@ -3678,7 +3668,6 @@ class 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`);
@@ -3852,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({
@@ -3884,6 +3938,7 @@ var index = /*#__PURE__*/Object.freeze({
     template: template,
     toHex: toHex,
     toNodeList: toNodeList,
+    uploadFile: uploadFile,
     wrapNodeList: wrapNodeList
 });
 
@@ -3891,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 = [];
@@ -3910,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);
         });
     }
@@ -4411,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;
     }
@@ -4428,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 = [];
@@ -4499,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);
@@ -4951,8 +5003,6 @@ function insertLink(range, value) {
     return linkNode;
 }
 
-var version = "0.1.14";
-
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
     if (range.commonAncestor.isOutside) {
@@ -5030,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);
@@ -5167,9 +5219,6 @@ class Selection {
     insertFragment(fragment) {
         return insertFragment(this.range, fragment);
     }
-    insertContents(value) {
-        return insertContents(this.range, value);
-    }
     deleteContents() {
         return deleteContents(this.range);
     }
@@ -5209,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;
     }
@@ -5242,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;
     }
@@ -5553,9 +5602,9 @@ class Plugin {
         this.pluginList.push(plugin);
     }
     loadAll(editor) {
-        this.pluginList.forEach(plugin => {
+        for (const plugin of this.pluginList) {
             plugin(editor);
-        });
+        }
     }
 }
 
@@ -5568,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
@@ -5679,7 +5729,6 @@ class Editor {
                 boxContainer.removeClass('lake-box-selected');
                 box.event.emit('blur');
             });
-            this.event.emit('boxselectionstylechange');
         }, 50, {
             leading: false,
             trailing: true,
@@ -5758,6 +5807,7 @@ 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);
     }
@@ -6281,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
@@ -6556,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);
         },
@@ -6591,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) => {
@@ -6605,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) => {
@@ -6619,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) => {
@@ -6658,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 => {
@@ -6686,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);
         },
@@ -6701,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);
         },
@@ -6726,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',
@@ -6806,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';
@@ -6853,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 => {
@@ -6954,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);
@@ -6966,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);
+                }
             }
-        });
+        }
     }
 }
 
@@ -7007,247 +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();
-    });
-    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',
@@ -7334,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;
         }
@@ -7350,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;
@@ -7405,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,
@@ -7430,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);
@@ -7475,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* () {
@@ -7612,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) {
@@ -7643,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) {
@@ -7657,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;
@@ -7702,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) {
@@ -7721,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;
@@ -7764,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,
@@ -7778,7 +7614,7 @@ function renderDone(imageNode, box) {
                 editor.history.save();
             },
         }).render();
-        imageNode.append(imgNode);
+        rootNode.append(imgNode);
     });
 }
 const imageBox = {
@@ -7819,45 +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();
                 });
             }
             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);
+        }
     },
 };
 
@@ -7886,7 +7870,7 @@ const boxToolbarItems = [
         },
     },
 ];
-function appendContent(fileNode, box) {
+function appendContent(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7919,7 +7903,7 @@ function appendContent(fileNode, box) {
                 typeNode.append(fileIcon);
             }
         }
-        fileNode.append(infoNode);
+        rootNode.append(infoNode);
     });
 }
 const fileBox = {
@@ -7936,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;
@@ -9249,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',
@@ -9299,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');
         },
     });
 };
@@ -9339,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',
@@ -9372,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'],
@@ -9714,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();
@@ -9758,7 +9772,7 @@ var enterKey = (editor) => {
         event.preventDefault();
         editor.fixContent();
         if (range.isBox) {
-            addBlockOrSplitBlockForBox(editor);
+            addOrSplitBlockForBox(editor);
             editor.history.save();
             return;
         }
@@ -9767,7 +9781,7 @@ var enterKey = (editor) => {
             return;
         }
         if (range.isBox) {
-            addBlockOrSplitBlockForBox(editor);
+            addOrSplitBlockForBox(editor);
             editor.history.save();
             return;
         }
@@ -9793,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;
         }
@@ -10142,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();
     });
 };
@@ -10299,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);
@@ -10330,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);
@@ -10343,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