lakelib 0.1.2 → 0.1.4

package/lib/lake.js

@@ -1,10 +1,10 @@
 import { Base64 } from 'js-base64';
 import EventEmitter from 'eventemitter3';
+import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 import md5 from 'blueimp-md5';
 import { createKeybindingsHandler } from 'tinykeys';
-import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
 import 'photoswipe/style.css';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -2862,6 +2862,7 @@ class Box {
             container.off('mouseleave');
             container.off('click');
         }
+        // fix: should not activate box when clicking box
         container.on('mousedown', event => {
             event.preventDefault();
         });
@@ -4060,489 +4061,802 @@ class Button {
     }
 }
 
-class Dropdown {
-    constructor(config) {
-        this.documentClickListener = (event) => {
-            const targetNode = new Nodes(event.target);
-            const titleNode = this.node.find('.lake-dropdown-title');
-            const menuNode = this.node.find('.lake-dropdown-menu');
-            if (targetNode.closest('.lake-dropdown-title').get(0) === titleNode.get(0)) {
-                return;
-            }
-            menuNode.hide();
-            document.removeEventListener('click', this.documentClickListener);
-        };
-        this.config = config;
-        this.root = config.root;
-        this.node = query(safeTemplate `
-      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}">
-        <button type="button" name="${config.name}" class="lake-dropdown-title">
-          <div class="lake-dropdown-${config.icon ? 'icon' : 'text'}"></div>
-          <div class="lake-dropdown-down-icon"></div>
-        </button>
-      </div>
-    `);
-        if (config.tabIndex !== undefined) {
-            const titleNode = this.node.find('.lake-dropdown-title');
-            titleNode.attr('tabindex', config.tabIndex.toString());
-        }
-    }
-    // Returns the value of the node.
-    static getValue(node) {
-        const value = node.attr('value');
-        if (value === '') {
-            return [];
-        }
-        return JSON.parse(Base64.decode(value));
-    }
-    // Updates the value of the node.
-    static setValue(node, value) {
-        node.attr('value', Base64.encode(JSON.stringify(value)));
-    }
-    static getMenuMap(menuItems) {
-        const menuMap = new Map();
-        for (const menuItem of menuItems) {
-            // remove HTML tags
-            const text = menuItem.text.replace(/<[^>]*>/g, '');
-            menuMap.set(menuItem.value, text);
-        }
-        return menuMap;
-    }
-    updateColorAccent(titleNode, value) {
-        const svgNode = titleNode.find('.lake-dropdown-icon svg').eq(1);
-        const lineNode = svgNode.find('line');
-        if (lineNode.length > 0) {
-            lineNode.attr('stroke', value);
-        }
-        else {
-            svgNode.find('path').attr('fill', value);
-        }
-    }
-    apppendMenuItems(menuNode) {
-        const config = this.config;
-        for (const menuItem of config.menuItems) {
-            const listContent = template `
-        <li value="${encode(menuItem.value)}">
-          <div class="lake-dropdown-menu-text">${menuItem.text}</div>
-        </li>
-      `;
-            const listNode = query(listContent);
-            menuNode.append(listNode);
-            if (config.menuType === 'color') {
-                listNode.attr('title', menuItem.text);
-                listNode.find('.lake-dropdown-menu-text').css('background-color', menuItem.value);
-            }
-            if (menuItem.icon) {
-                const menuIconNode = query('<div class="lake-dropdown-menu-icon"></div>');
-                menuIconNode.append(menuItem.icon);
-                listNode.prepend(menuIconNode);
-            }
-            const checkIcon = icons.get('check');
-            if (checkIcon) {
-                const checkNode = query('<div class="lake-dropdown-menu-check"></div>');
-                checkNode.append(checkIcon);
-                listNode.prepend(checkNode);
-            }
-        }
-    }
-    showMenu() {
-        const config = this.config;
-        const dropdownNode = this.node;
-        const menuNode = dropdownNode.find('.lake-dropdown-menu');
-        if (dropdownNode.attr('disabled')) {
-            return;
-        }
-        const currentValues = Dropdown.getValue(dropdownNode);
-        menuNode.find('.lake-dropdown-menu-check').css('visibility', 'hidden');
-        menuNode.find('li').each(node => {
-            const listNode = query(node);
-            listNode.on('mouseenter', () => {
-                if (listNode.hasClass('lake-dropdown-item-selected')) {
-                    return;
-                }
-                listNode.addClass('lake-dropdown-item-hovered');
-            });
-            listNode.on('mouseleave', () => {
-                listNode.removeClass('lake-dropdown-item-hovered');
-            });
-            if (currentValues.indexOf(listNode.attr('value')) >= 0) {
-                listNode.find('.lake-dropdown-menu-check').css('visibility', 'visible');
-            }
-        });
-        menuNode.css('visibility', 'hidden');
-        menuNode.show(config.menuType === 'color' ? 'flex' : 'block');
-        const dropdownNativeNode = dropdownNode.get(0);
-        const dropdownRect = dropdownNativeNode.getBoundingClientRect();
-        if (dropdownRect.x + menuNode.width() + 50 > window.innerWidth) {
-            menuNode.css('left', 'auto');
-            menuNode.css('right', '0');
-        }
-        else {
-            menuNode.css('left', '');
-            menuNode.css('right', '');
-        }
-        menuNode.css('visibility', '');
-        document.addEventListener('click', this.documentClickListener);
-    }
-    bindEvents() {
-        const config = this.config;
-        const dropdownNode = this.node;
-        const titleNode = dropdownNode.find('.lake-dropdown-title');
-        const textNode = titleNode.find('.lake-dropdown-text');
-        const iconNode = titleNode.find('.lake-dropdown-icon');
-        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
-        const menuNode = dropdownNode.find('.lake-dropdown-menu');
-        if (config.menuType === 'color') {
-            iconNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
-                    return;
-                }
-                iconNode.addClass('lake-dropdown-icon-hovered');
-            });
-            iconNode.on('mouseleave', () => {
-                iconNode.removeClass('lake-dropdown-icon-hovered');
-            });
-            downIconNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
-                    return;
-                }
-                downIconNode.addClass('lake-dropdown-down-icon-hovered');
-            });
-            downIconNode.on('mouseleave', () => {
-                downIconNode.removeClass('lake-dropdown-down-icon-hovered');
-            });
-        }
-        else {
-            titleNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
-                    return;
-                }
-                titleNode.addClass('lake-dropdown-title-hovered');
-            });
-            titleNode.on('mouseleave', () => {
-                titleNode.removeClass('lake-dropdown-title-hovered');
-            });
-        }
-        if (config.menuType === 'color') {
-            iconNode.on('click', event => {
-                event.preventDefault();
-                if (dropdownNode.attr('disabled')) {
-                    return;
-                }
-                const value = dropdownNode.attr('color') || config.defaultValue;
-                config.onSelect(value);
-            });
-        }
-        const triggerNode = (config.menuType === 'color' && downIconNode) ? downIconNode : titleNode;
-        triggerNode.on('click', event => {
-            event.preventDefault();
-            this.showMenu();
-        });
-        menuNode.on('click', event => {
-            event.preventDefault();
-            const listItem = query(event.target).closest('li');
-            const value = listItem.attr('value');
-            Dropdown.setValue(dropdownNode, [value]);
-            if (textNode.length > 0) {
-                textNode.text(listItem.text());
-            }
-            if (config.menuType === 'color' && value !== '') {
-                dropdownNode.attr('color', value);
-                this.updateColorAccent(titleNode, value);
-            }
-            config.onSelect(value);
-            menuNode.hide();
-            document.removeEventListener('click', this.documentClickListener);
-        });
-    }
-    render() {
-        var _a;
-        const config = this.config;
-        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);
-        titleNode.attr('title', config.tooltip);
-        const textNode = titleNode.find('.lake-dropdown-text');
-        const iconNode = titleNode.find('.lake-dropdown-icon');
-        if (config.icon) {
-            iconNode.append(config.icon);
-        }
-        if (config.accentIcon) {
-            iconNode.append(config.accentIcon);
-        }
-        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
-        if (config.downIcon) {
-            downIconNode.append(config.downIcon);
-        }
-        const menuNode = query('<ul class="lake-dropdown-menu" />');
-        menuNode.addClass(`lake-${config.menuType}-dropdown-menu`);
-        Dropdown.setValue(dropdownNode, [config.defaultValue]);
-        if (textNode.length > 0) {
-            const menuMap = Dropdown.getMenuMap(config.menuItems);
-            textNode.text((_a = menuMap.get(config.defaultValue)) !== null && _a !== void 0 ? _a : config.defaultValue);
-        }
-        if (config.menuType === 'color') {
-            this.updateColorAccent(titleNode, config.defaultValue);
-        }
-        this.apppendMenuItems(menuNode);
-        dropdownNode.append(titleNode);
-        dropdownNode.append(menuNode);
-        this.root.append(dropdownNode);
-        this.bindEvents();
-    }
-    unmount() {
-        this.node.remove();
-        document.removeEventListener('click', this.documentClickListener);
-    }
-}
-
-var version = "0.1.2";
-
-// Inserts a box into the specified range.
-function insertBox(range, boxName, boxValue) {
-    if (range.commonAncestor.isOutside) {
-        return null;
-    }
-    const box = new Box(boxName);
-    if (boxValue) {
-        box.value = boxValue;
-    }
-    const fragment = document.createDocumentFragment();
-    fragment.appendChild(box.node.get(0));
-    // inline box
-    if (box.type === 'inline') {
-        insertFragment(range, fragment);
-        box.render();
-        range.selectBoxEnd(box.node);
-        return box;
-    }
-    // block box
-    const parts = splitBlock$1(range);
-    if (parts.start) {
-        range.setEndAfter(parts.start);
-        range.collapseToEnd();
-    }
-    if (parts.end && parts.end.isEmpty) {
-        parts.end.remove();
-    }
-    insertFragment(range, fragment);
-    box.render();
-    range.selectBoxEnd(box.node);
-    if (parts.start && parts.start.isEmpty) {
-        parts.start.remove();
-    }
-    return box;
-}
+var enUS = {
+    toolbar: {
+        undo: `Undo (${modifierText('mod+Z')})`,
+        redo: `Redo (${modifierText('mod+Y')})`,
+        selectAll: `Select all (${modifierText('mod+A')})`,
+        paragraph: 'Paragraph',
+        blockQuote: 'Block quotation',
+        numberedList: 'Numbered list',
+        bulletedList: 'Bulleted list',
+        checklist: 'Checklist',
+        alignLeft: 'Align left',
+        alignCenter: 'Align center',
+        alignRight: 'Align right',
+        alignJustify: 'Align justify',
+        increaseIndent: 'Increase indent',
+        decreaseIndent: 'Decrease indent',
+        bold: `Bold (${modifierText('mod+B')})`,
+        italic: `Italic (${modifierText('mod+I')})`,
+        underline: `Underline (${modifierText('mod+U')})`,
+        strikethrough: 'Strikethrough',
+        superscript: 'Superscript',
+        subscript: 'Subscript',
+        code: 'Inline code',
+        removeFormat: 'Remove format',
+        formatPainter: 'Format painter',
+        link: 'Link',
+        hr: 'Horizontal line',
+        codeBlock: 'Code block',
+        heading: 'Heading',
+        heading1: 'Heading 1',
+        heading2: 'Heading 2',
+        heading3: 'Heading 3',
+        heading4: 'Heading 4',
+        heading5: 'Heading 5',
+        heading6: 'Heading 6',
+        list: 'List',
+        align: 'Alignment',
+        indent: 'Indent',
+        fontFamily: 'Font family',
+        fontSize: 'Font size',
+        moreStyle: 'More style',
+        fontColor: 'Font color',
+        highlight: 'Highlight',
+        image: 'Image',
+        removeColor: 'Remove color',
+    },
+    link: {
+        newLink: 'New link',
+        url: 'Link URL',
+        title: 'Link title',
+        copy: 'Copy link to clipboard',
+        open: 'Open link in new tab',
+        save: 'Save',
+        unlink: 'Remove link',
+    },
+    image: {
+        view: 'Full screen',
+        remove: 'Delete',
+        previous: 'Previous',
+        next: 'Next',
+        close: 'Close (Esc)',
+        loadingError: 'The image cannot be loaded',
+        zoomOut: 'Zoom out',
+        zoomIn: 'Zoom in',
+    },
+    codeBlock: {
+        langType: 'Select language',
+    },
+};
 
-function removeBox(range) {
-    if (range.commonAncestor.isOutside) {
-        return null;
-    }
-    const boxNode = range.commonAncestor.closest('lake-box');
-    if (boxNode.length === 0) {
-        return null;
-    }
-    const box = new Box(boxNode);
-    if (box.type === 'block') {
-        const paragraph = query('<p><br /></p>');
-        boxNode.before(paragraph);
-        range.shrinkAfter(paragraph);
-        box.unmount();
-        boxNode.remove();
-        return box;
-    }
-    range.setStartBefore(boxNode);
-    range.collapseToStart();
-    const parentNode = boxNode.parent();
-    box.unmount();
-    boxNode.remove();
-    if (parentNode.isEmpty) {
-        appendDeepest(parentNode, query('<br />'));
-        range.shrinkAfter(parentNode);
-    }
-    return box;
-}
+var zhCN = {
+    toolbar: {
+        undo: `撤消 (${modifierText('mod+Z')})`,
+        redo: `重做 (${modifierText('mod+Y')})`,
+        selectAll: `全选 (${modifierText('mod+A')})`,
+        paragraph: '正文',
+        blockQuote: '引用',
+        numberedList: '编号',
+        bulletedList: '项目符号',
+        checklist: '任务列表',
+        alignLeft: '左对齐',
+        alignCenter: '居中',
+        alignRight: '右对齐',
+        alignJustify: '两端对齐',
+        increaseIndent: '增加缩进',
+        decreaseIndent: '减少缩进',
+        bold: `粗体 (${modifierText('mod+B')})`,
+        italic: `斜体 (${modifierText('mod+I')})`,
+        underline: `下划线 (${modifierText('mod+U')})`,
+        strikethrough: '删除线',
+        superscript: '上标',
+        subscript: '下标',
+        code: '行内代码',
+        removeFormat: '清除格式',
+        formatPainter: '格式刷',
+        link: '链接',
+        hr: '分割线',
+        codeBlock: '代码块',
+        heading: '标题',
+        heading1: '标题 1',
+        heading2: '标题 2',
+        heading3: '标题 3',
+        heading4: '标题 4',
+        heading5: '标题 5',
+        heading6: '标题 6',
+        list: '列表',
+        align: '对齐方式',
+        indent: '缩进',
+        fontFamily: '字体',
+        fontSize: '文字大小',
+        moreStyle: '更多样式',
+        fontColor: '文字颜色',
+        highlight: '文字背景',
+        image: '图片',
+        removeColor: '默认',
+    },
+    link: {
+        newLink: '新链接',
+        url: '链接 URL',
+        title: '链接文本',
+        copy: '复制到剪贴板',
+        open: '打开链接',
+        save: '确定',
+        unlink: '取消链接',
+    },
+    image: {
+        view: '查看大图',
+        remove: '删除',
+        previous: '上一张',
+        next: '下一张',
+        close: '关闭 (Esc)',
+        loadingError: '图片加载失败',
+        zoomOut: '缩小',
+        zoomIn: '放大',
+    },
+    codeBlock: {
+        langType: '选择代码语言',
+    },
+};
 
-// Returns the attributes of the element as an key-value object.
-function getAttributes(node) {
-    const nativeNode = node.get(0);
-    const attributes = {};
-    if (nativeNode.hasAttributes()) {
-        for (const attr of nativeNode.attributes) {
-            attributes[attr.name] = attr.value;
-        }
-    }
-    return attributes;
-}
-function pushAncestralNodes(appliedItems, range) {
-    let parentNode = range.startNode;
-    if (parentNode.isText) {
-        parentNode = parentNode.parent();
-    }
-    while (parentNode.length > 0) {
-        if (!parentNode.isInside) {
-            break;
-        }
-        appliedItems.push({
-            node: parentNode,
-            name: parentNode.name,
-            attributes: getAttributes(parentNode),
-            styles: parseStyle(parentNode.attr('style')),
-        });
-        parentNode = parentNode.parent();
-    }
-}
-function pushNextNestedNodes(appliedItems, range) {
-    const startNode = range.startNode;
-    let nextNode;
-    if (startNode.isText && startNode.text().length === range.startOffset) {
-        const node = startNode.next();
-        if (node.length > 0 && node.isElement) {
-            nextNode = node;
-        }
-    }
-    if (startNode.isElement) {
-        const children = startNode.children();
-        if (children.length > 0) {
-            const node = children[range.startOffset];
-            if (node && node.isElement) {
-                nextNode = node;
-            }
-        }
-    }
-    if (nextNode) {
-        let child = nextNode;
-        while (child.length > 0) {
-            if (child.isElement) {
-                appliedItems.push({
-                    node: child,
-                    name: child.name,
-                    attributes: getAttributes(child),
-                    styles: parseStyle(child.attr('style')),
-                });
-            }
-            child = child.first();
-        }
-    }
-}
-class Selection {
-    constructor(container) {
-        const selection = window.getSelection();
-        // When called on an <iframe> that is not displayed (e.g., where 'display: none' is set) Firefox will return null,
-        // whereas other browsers will return a selection object with Selection.type set to None.
-        if (!selection) {
-            throw new Error('Selection object is null.');
-        }
-        this.selection = selection;
-        this.container = container;
-        this.range = this.getRangeFromNativeSelection();
-    }
-    // Returns the current selected range from the native selection.
-    getRangeFromNativeSelection() {
-        if (this.selection.rangeCount > 0) {
-            const range = this.selection.getRangeAt(0);
-            return new Range(range);
-        }
-        return new Range();
-    }
-    // Adds the saved range to the native selection.
-    addRangeToNativeSelection() {
-        this.selection.removeAllRanges();
-        this.selection.addRange(this.range.get());
+var ja = {
+    toolbar: {
+        undo: `元に戻す (${modifierText('mod+Z')})`,
+        redo: `やり直し (${modifierText('mod+Y')})`,
+        selectAll: `すべて選択 (${modifierText('mod+A')})`,
+        paragraph: 'テキスト',
+        blockQuote: 'ブロック引用',
+        numberedList: '番号付きリスト',
+        bulletedList: '箇条書きリスト',
+        checklist: 'タスクリスト',
+        alignLeft: '左揃え',
+        alignCenter: '中心揃え',
+        alignRight: '右揃え',
+        alignJustify: '左右に並べ替え',
+        increaseIndent: 'インデントを増やす',
+        decreaseIndent: 'インデントを減らす',
+        bold: `太字 (${modifierText('mod+B')})`,
+        italic: `斜体 (${modifierText('mod+I')})`,
+        underline: `下線 (${modifierText('mod+U')})`,
+        strikethrough: '取り消し線',
+        superscript: '上付き文字',
+        subscript: '下付き文字',
+        code: 'インラインコード',
+        removeFormat: '形式を削除',
+        formatPainter: '形式ペインタ',
+        link: 'リンク',
+        hr: '区切り線',
+        codeBlock: 'コードブロック',
+        heading: 'タイトル',
+        heading1: 'タイトル 1',
+        heading2: 'タイトル 2',
+        heading3: 'タイトル 3',
+        heading4: 'タイトル 4',
+        heading5: 'タイトル 5',
+        heading6: 'タイトル 6',
+        list: 'リスト',
+        align: '文字揃え',
+        indent: 'インデント',
+        fontFamily: 'フォント',
+        fontSize: '文字サイズ',
+        moreStyle: 'その他のスタイル',
+        fontColor: '文字色',
+        highlight: '文字の背景',
+        image: '画像',
+        removeColor: 'デフォルト',
+    },
+    link: {
+        newLink: '新しいリンク',
+        url: 'リンク URL',
+        title: 'リンク文字',
+        copy: 'クリップボードにコピー',
+        open: 'リンクを開く',
+        save: '確認',
+        unlink: 'リンクを削除',
+    },
+    image: {
+        view: '大きな画像を見る',
+        remove: '削除',
+        previous: '前の画像',
+        next: '次の画像',
+        close: '閉じる (Esc)',
+        loadingError: '画像を読み込めません',
+        zoomOut: '縮小',
+        zoomIn: '拡大',
+    },
+    codeBlock: {
+        langType: 'コード言語を選択',
+    },
+};
+
+var ko = {
+    toolbar: {
+        undo: `작업취소 (${modifierText('mod+Z')})`,
+        redo: `작업재개 (${modifierText('mod+Y')})`,
+        selectAll: `전체 선택 (${modifierText('mod+A')})`,
+        paragraph: '텍스트',
+        blockQuote: '인용문',
+        numberedList: '순서 목록',
+        bulletedList: '비순서 목록',
+        checklist: '체크리스트',
+        alignLeft: '왼쪽 정렬',
+        alignCenter: '가운데 정렬',
+        alignRight: '오른쪽 정렬',
+        alignJustify: '좌우로 정렬',
+        increaseIndent: '들여쓰기 증가',
+        decreaseIndent: '들여쓰기 줄이기',
+        bold: `굵게 (${modifierText('mod+B')})`,
+        italic: `기울임꼴 (${modifierText('mod+I')})`,
+        underline: `밑줄 (${modifierText('mod+U')})`,
+        strikethrough: '취소선',
+        superscript: '위첨자',
+        subscript: '아래 첨자',
+        code: '인라인 코드',
+        removeFormat: '형식 지우기',
+        formatPainter: '형식 페인터',
+        link: '링크',
+        hr: '구분선',
+        codeBlock: '코드 블록',
+        heading: '제목',
+        heading1: '제목 1',
+        heading2: '제목 2',
+        heading3: '제목 3',
+        heading4: '제목 4',
+        heading5: '제목 5',
+        heading6: '제목 6',
+        list: '목록',
+        align: '정렬',
+        indent: '들여쓰기',
+        fontFamily: '글꼴',
+        fontSize: '글자 크기',
+        moreStyle: '더 많은 스타일',
+        fontColor: '글자 색상',
+        highlight: '글자 배경',
+        image: '이미지',
+        removeColor: '기본색',
+    },
+    link: {
+        newLink: '새 링크',
+        url: '링크 URL',
+        title: '링크 텍스트',
+        copy: '클립보드에 복사',
+        open: '링크 열기',
+        save: '확인',
+        unlink: '링크 제거',
+    },
+    image: {
+        view: '큰 이미지 보기',
+        remove: '삭제',
+        previous: '이전 이미지',
+        next: '다음 이미지',
+        close: '닫기 (Esc)',
+        loadingError: '이미지를 로드할 수 없습니다',
+        zoomOut: '축소',
+        zoomIn: '확대',
+    },
+    codeBlock: {
+        langType: '코드언어 선택',
+    },
+};
+
+const localeTranslations = {
+    'en-US': enUS,
+    'zh-CN': zhCN,
+    ja,
+    ko,
+};
+const locales = Object.keys(localeTranslations);
+const loadedLocales = {};
+const loadedFormatters = {};
+const initFormatters = () => {
+    const formatters = {
+    // add your formatter functions here
+    };
+    return formatters;
+};
+const loadFormatters = (locale) => {
+    loadedFormatters[locale] = initFormatters();
+};
+const loadLocale = (locale) => {
+    if (loadedLocales[locale]) {
+        return;
     }
-    // Synchronizes the saved range with the range of the native selection.
-    syncByRange() {
-        const newRange = this.getRangeFromNativeSelection();
-        if (this.range.get() === newRange.get()) {
-            return;
+    loadedLocales[locale] = localeTranslations[locale];
+    loadFormatters(locale);
+};
+const loadAllLocales = () => locales.forEach(loadLocale);
+const i18nObject = (locale) => i18nObject$1(locale, loadedLocales[locale], loadedFormatters[locale]);
+loadAllLocales();
+
+class Dropdown {
+    constructor(config) {
+        this.documentClickListener = (event) => {
+            const targetNode = new Nodes(event.target);
+            const titleNode = this.node.find('.lake-dropdown-title');
+            const menuNode = this.node.find('.lake-dropdown-menu');
+            if (targetNode.closest('.lake-dropdown-title').get(0) === titleNode.get(0)) {
+                return;
+            }
+            menuNode.hide();
+            document.removeEventListener('click', this.documentClickListener);
+        };
+        this.config = config;
+        this.root = config.root;
+        this.locale = config.locale || i18nObject('en-US');
+        this.node = query(safeTemplate `
+      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}">
+        <button type="button" name="${config.name}" class="lake-dropdown-title">
+          <div class="lake-dropdown-${config.icon ? 'icon' : 'text'}"></div>
+          <div class="lake-dropdown-down-icon"></div>
+        </button>
+      </div>
+    `);
+        if (config.tabIndex !== undefined) {
+            const titleNode = this.node.find('.lake-dropdown-title');
+            titleNode.attr('tabindex', config.tabIndex.toString());
         }
-        this.range = newRange;
     }
-    // Synchronizes the saved range with the range represented by the bookmark.
-    synByBookmark() {
-        const range = this.range;
-        const container = this.container;
-        const boxFocus = container.find('lake-box[focus]');
-        if (boxFocus.length > 0) {
-            toBookmark(range, {
-                anchor: new Nodes(),
-                focus: boxFocus,
-            });
-            this.addRangeToNativeSelection();
-            return;
+    // Returns the value of the node.
+    static getValue(node) {
+        const value = node.attr('value');
+        if (value === '') {
+            return [];
         }
-        const anchor = container.find('lake-bookmark[type="anchor"]');
-        const focus = container.find('lake-bookmark[type="focus"]');
-        toBookmark(range, {
-            anchor,
-            focus,
-        });
-        this.addRangeToNativeSelection();
-    }
-    getAppliedItems() {
-        const appliedItems = [];
-        pushAncestralNodes(appliedItems, this.range);
-        pushNextNestedNodes(appliedItems, this.range);
-        return appliedItems;
+        return JSON.parse(Base64.decode(value));
     }
-    insertBookmark() {
-        return insertBookmark(this.range);
+    // Updates the value of the node.
+    static setValue(node, value) {
+        node.attr('value', Base64.encode(JSON.stringify(value)));
     }
-    toBookmark(bookmark) {
-        return toBookmark(this.range, bookmark);
+    static getMenuMap(menuItems, locale) {
+        const menuMap = new Map();
+        for (const menuItem of menuItems) {
+            // remove HTML tags
+            let text = typeof menuItem.text === 'string' ? menuItem.text : menuItem.text(locale);
+            text = text.replace(/<[^>]*>/g, '');
+            menuMap.set(menuItem.value, text);
+        }
+        return menuMap;
     }
-    insertNode(node) {
-        return insertNode(this.range, node);
+    updateColorAccent(titleNode, value) {
+        const svgNode = titleNode.find('.lake-dropdown-icon svg').eq(1);
+        const lineNode = svgNode.find('line');
+        if (lineNode.length > 0) {
+            lineNode.attr('stroke', value);
+        }
+        else {
+            svgNode.find('path').attr('fill', value);
+        }
     }
-    insertFragment(fragment) {
-        return insertFragment(this.range, fragment);
+    apppendMenuItems(menuNode) {
+        const config = this.config;
+        for (const menuItem of config.menuItems) {
+            const menuText = typeof menuItem.text === 'string' ? menuItem.text : menuItem.text(this.locale);
+            const listContent = template `
+        <li value="${encode(menuItem.value)}">
+          <div class="lake-dropdown-menu-text">${menuText}</div>
+        </li>
+      `;
+            const listNode = query(listContent);
+            menuNode.append(listNode);
+            if (config.menuType === 'color') {
+                listNode.attr('title', menuText);
+                listNode.find('.lake-dropdown-menu-text').css('background-color', menuItem.value);
+            }
+            if (menuItem.icon) {
+                const menuIconNode = query('<div class="lake-dropdown-menu-icon"></div>');
+                menuIconNode.append(menuItem.icon);
+                listNode.prepend(menuIconNode);
+            }
+            const checkIcon = icons.get('check');
+            if (checkIcon) {
+                const checkNode = query('<div class="lake-dropdown-menu-check"></div>');
+                checkNode.append(checkIcon);
+                listNode.prepend(checkNode);
+            }
+        }
     }
-    insertContents(value) {
-        return insertContents(this.range, value);
+    showMenu() {
+        const config = this.config;
+        const dropdownNode = this.node;
+        const menuNode = dropdownNode.find('.lake-dropdown-menu');
+        if (dropdownNode.attr('disabled')) {
+            return;
+        }
+        const currentValues = Dropdown.getValue(dropdownNode);
+        menuNode.find('.lake-dropdown-menu-check').css('visibility', 'hidden');
+        menuNode.find('li').each(node => {
+            const listNode = query(node);
+            listNode.on('mouseenter', () => {
+                if (listNode.hasClass('lake-dropdown-item-selected')) {
+                    return;
+                }
+                listNode.addClass('lake-dropdown-item-hovered');
+            });
+            listNode.on('mouseleave', () => {
+                listNode.removeClass('lake-dropdown-item-hovered');
+            });
+            if (currentValues.indexOf(listNode.attr('value')) >= 0) {
+                listNode.find('.lake-dropdown-menu-check').css('visibility', 'visible');
+            }
+        });
+        menuNode.css('visibility', 'hidden');
+        menuNode.show(config.menuType === 'color' ? 'flex' : 'block');
+        const dropdownNativeNode = dropdownNode.get(0);
+        const dropdownRect = dropdownNativeNode.getBoundingClientRect();
+        if (dropdownRect.x + menuNode.width() + 50 > window.innerWidth) {
+            menuNode.css('left', 'auto');
+            menuNode.css('right', '0');
+        }
+        else {
+            menuNode.css('left', '');
+            menuNode.css('right', '');
+        }
+        menuNode.css('visibility', '');
+        document.addEventListener('click', this.documentClickListener);
     }
-    deleteContents() {
-        return deleteContents(this.range);
+    bindEvents() {
+        const config = this.config;
+        const dropdownNode = this.node;
+        const titleNode = dropdownNode.find('.lake-dropdown-title');
+        const textNode = titleNode.find('.lake-dropdown-text');
+        const iconNode = titleNode.find('.lake-dropdown-icon');
+        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
+        const menuNode = dropdownNode.find('.lake-dropdown-menu');
+        if (config.menuType === 'color') {
+            iconNode.on('mouseenter', () => {
+                if (dropdownNode.attr('disabled')) {
+                    return;
+                }
+                iconNode.addClass('lake-dropdown-icon-hovered');
+            });
+            iconNode.on('mouseleave', () => {
+                iconNode.removeClass('lake-dropdown-icon-hovered');
+            });
+            downIconNode.on('mouseenter', () => {
+                if (dropdownNode.attr('disabled')) {
+                    return;
+                }
+                downIconNode.addClass('lake-dropdown-down-icon-hovered');
+            });
+            downIconNode.on('mouseleave', () => {
+                downIconNode.removeClass('lake-dropdown-down-icon-hovered');
+            });
+        }
+        else {
+            titleNode.on('mouseenter', () => {
+                if (dropdownNode.attr('disabled')) {
+                    return;
+                }
+                titleNode.addClass('lake-dropdown-title-hovered');
+            });
+            titleNode.on('mouseleave', () => {
+                titleNode.removeClass('lake-dropdown-title-hovered');
+            });
+        }
+        if (config.menuType === 'color') {
+            iconNode.on('click', event => {
+                event.preventDefault();
+                if (dropdownNode.attr('disabled')) {
+                    return;
+                }
+                const value = dropdownNode.attr('color') || config.defaultValue;
+                config.onSelect(value);
+            });
+        }
+        const triggerNode = (config.menuType === 'color' && downIconNode) ? downIconNode : titleNode;
+        triggerNode.on('click', event => {
+            event.preventDefault();
+            this.showMenu();
+        });
+        menuNode.on('click', event => {
+            event.preventDefault();
+            const listItem = query(event.target).closest('li');
+            const value = listItem.attr('value');
+            Dropdown.setValue(dropdownNode, [value]);
+            if (textNode.length > 0) {
+                textNode.text(listItem.text());
+            }
+            if (config.menuType === 'color' && value !== '') {
+                dropdownNode.attr('color', value);
+                this.updateColorAccent(titleNode, value);
+            }
+            config.onSelect(value);
+            menuNode.hide();
+            document.removeEventListener('click', this.documentClickListener);
+        });
     }
-    setBlocks(value) {
-        return setBlocks(this.range, value);
+    render() {
+        var _a;
+        const config = this.config;
+        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);
+        const tooltip = typeof config.tooltip === 'string' ? config.tooltip : config.tooltip(this.locale);
+        titleNode.attr('title', tooltip);
+        const textNode = titleNode.find('.lake-dropdown-text');
+        const iconNode = titleNode.find('.lake-dropdown-icon');
+        if (config.icon) {
+            iconNode.append(config.icon);
+        }
+        if (config.accentIcon) {
+            iconNode.append(config.accentIcon);
+        }
+        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
+        if (config.downIcon) {
+            downIconNode.append(config.downIcon);
+        }
+        const menuNode = query('<ul class="lake-dropdown-menu" />');
+        menuNode.addClass(`lake-${config.menuType}-dropdown-menu`);
+        Dropdown.setValue(dropdownNode, [config.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);
+        }
+        if (config.menuType === 'color') {
+            this.updateColorAccent(titleNode, config.defaultValue);
+        }
+        this.apppendMenuItems(menuNode);
+        dropdownNode.append(titleNode);
+        dropdownNode.append(menuNode);
+        this.root.append(dropdownNode);
+        this.bindEvents();
     }
-    splitBlock() {
-        return splitBlock$1(this.range);
+    unmount() {
+        this.node.remove();
+        document.removeEventListener('click', this.documentClickListener);
     }
-    splitMarks(removeEmptyMark) {
-        return splitMarks(this.range, removeEmptyMark);
+}
+
+var version = "0.1.4";
+
+// Inserts a box into the specified range.
+function insertBox(range, boxName, boxValue) {
+    if (range.commonAncestor.isOutside) {
+        return null;
     }
-    addMark(value) {
-        return addMark(this.range, value);
+    const box = new Box(boxName);
+    if (boxValue) {
+        box.value = boxValue;
     }
-    removeMark(value) {
-        return removeMark(this.range, value);
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(box.node.get(0));
+    // inline box
+    if (box.type === 'inline') {
+        insertFragment(range, fragment);
+        box.render();
+        range.selectBoxEnd(box.node);
+        return box;
     }
-    fixList() {
-        return fixList(this.range);
+    // block box
+    const parts = splitBlock$1(range);
+    if (parts.start) {
+        range.setEndAfter(parts.start);
+        range.collapseToEnd();
     }
-    insertLink(value) {
-        return insertLink(this.range, value);
+    if (parts.end && parts.end.isEmpty) {
+        parts.end.remove();
     }
+    insertFragment(range, fragment);
+    box.render();
+    range.selectBoxEnd(box.node);
+    if (parts.start && parts.start.isEmpty) {
+        parts.start.remove();
+    }
+    return box;
 }
 
-class Command {
-    constructor(selection) {
-        this.commandMap = new Map();
-        this.event = new EventEmitter();
-        this.selection = selection;
+function removeBox(range) {
+    if (range.commonAncestor.isOutside) {
+        return null;
     }
-    add(name, commandItem) {
-        this.commandMap.set(name, commandItem);
+    const boxNode = range.commonAncestor.closest('lake-box');
+    if (boxNode.length === 0) {
+        return null;
     }
-    delete(name) {
-        this.commandMap.delete(name);
+    const box = new Box(boxNode);
+    if (box.type === 'block') {
+        const paragraph = query('<p><br /></p>');
+        boxNode.before(paragraph);
+        range.shrinkAfter(paragraph);
+        box.unmount();
+        boxNode.remove();
+        return box;
     }
-    getNames() {
-        return Array.from(this.commandMap.keys());
+    range.setStartBefore(boxNode);
+    range.collapseToStart();
+    const parentNode = boxNode.parent();
+    box.unmount();
+    boxNode.remove();
+    if (parentNode.isEmpty) {
+        appendDeepest(parentNode, query('<br />'));
+        range.shrinkAfter(parentNode);
+    }
+    return box;
+}
+
+// Returns the attributes of the element as an key-value object.
+function getAttributes(node) {
+    const nativeNode = node.get(0);
+    const attributes = {};
+    if (nativeNode.hasAttributes()) {
+        for (const attr of nativeNode.attributes) {
+            attributes[attr.name] = attr.value;
+        }
+    }
+    return attributes;
+}
+function pushAncestralNodes(appliedItems, range) {
+    let parentNode = range.startNode;
+    if (parentNode.isText) {
+        parentNode = parentNode.parent();
+    }
+    while (parentNode.length > 0) {
+        if (!parentNode.isInside) {
+            break;
+        }
+        appliedItems.push({
+            node: parentNode,
+            name: parentNode.name,
+            attributes: getAttributes(parentNode),
+            styles: parseStyle(parentNode.attr('style')),
+        });
+        parentNode = parentNode.parent();
+    }
+}
+function pushNextNestedNodes(appliedItems, range) {
+    const startNode = range.startNode;
+    let nextNode;
+    if (startNode.isText && startNode.text().length === range.startOffset) {
+        const node = startNode.next();
+        if (node.length > 0 && node.isElement) {
+            nextNode = node;
+        }
+    }
+    if (startNode.isElement) {
+        const children = startNode.children();
+        if (children.length > 0) {
+            const node = children[range.startOffset];
+            if (node && node.isElement) {
+                nextNode = node;
+            }
+        }
+    }
+    if (nextNode) {
+        let child = nextNode;
+        while (child.length > 0) {
+            if (child.isElement) {
+                appliedItems.push({
+                    node: child,
+                    name: child.name,
+                    attributes: getAttributes(child),
+                    styles: parseStyle(child.attr('style')),
+                });
+            }
+            child = child.first();
+        }
+    }
+}
+class Selection {
+    constructor(container) {
+        const selection = window.getSelection();
+        // When called on an <iframe> that is not displayed (e.g., where 'display: none' is set) Firefox will return null,
+        // whereas other browsers will return a selection object with Selection.type set to None.
+        if (!selection) {
+            throw new Error('Selection object is null.');
+        }
+        this.selection = selection;
+        this.container = container;
+        this.range = this.getRangeFromNativeSelection();
+    }
+    // Returns the current selected range from the native selection.
+    getRangeFromNativeSelection() {
+        if (this.selection.rangeCount > 0) {
+            const range = this.selection.getRangeAt(0);
+            return new Range(range);
+        }
+        return new Range();
+    }
+    // Adds the saved range to the native selection.
+    addRangeToNativeSelection() {
+        this.selection.removeAllRanges();
+        this.selection.addRange(this.range.get());
+    }
+    // Synchronizes the saved range with the range of the native selection.
+    syncByRange() {
+        const newRange = this.getRangeFromNativeSelection();
+        if (this.range.get() === newRange.get()) {
+            return;
+        }
+        this.range = newRange;
+    }
+    // Synchronizes the saved range with the range represented by the bookmark.
+    synByBookmark() {
+        const range = this.range;
+        const container = this.container;
+        const boxFocus = container.find('lake-box[focus]');
+        if (boxFocus.length > 0) {
+            toBookmark(range, {
+                anchor: new Nodes(),
+                focus: boxFocus,
+            });
+            this.addRangeToNativeSelection();
+            return;
+        }
+        const anchor = container.find('lake-bookmark[type="anchor"]');
+        const focus = container.find('lake-bookmark[type="focus"]');
+        toBookmark(range, {
+            anchor,
+            focus,
+        });
+        this.addRangeToNativeSelection();
+    }
+    getAppliedItems() {
+        const appliedItems = [];
+        pushAncestralNodes(appliedItems, this.range);
+        pushNextNestedNodes(appliedItems, this.range);
+        return appliedItems;
+    }
+    insertBookmark() {
+        return insertBookmark(this.range);
+    }
+    toBookmark(bookmark) {
+        return toBookmark(this.range, bookmark);
+    }
+    insertNode(node) {
+        return insertNode(this.range, node);
+    }
+    insertFragment(fragment) {
+        return insertFragment(this.range, fragment);
+    }
+    insertContents(value) {
+        return insertContents(this.range, value);
+    }
+    deleteContents() {
+        return deleteContents(this.range);
+    }
+    setBlocks(value) {
+        return setBlocks(this.range, value);
+    }
+    splitBlock() {
+        return splitBlock$1(this.range);
+    }
+    splitMarks(removeEmptyMark) {
+        return splitMarks(this.range, removeEmptyMark);
+    }
+    addMark(value) {
+        return addMark(this.range, value);
+    }
+    removeMark(value) {
+        return removeMark(this.range, value);
+    }
+    fixList() {
+        return fixList(this.range);
+    }
+    insertLink(value) {
+        return insertLink(this.range, value);
+    }
+}
+
+class Command {
+    constructor(selection) {
+        this.commandMap = new Map();
+        this.event = new EventEmitter();
+        this.selection = selection;
+    }
+    add(name, commandItem) {
+        this.commandMap.set(name, commandItem);
+    }
+    delete(name) {
+        this.commandMap.delete(name);
+    }
+    getNames() {
+        return Array.from(this.commandMap.keys());
     }
     has(name) {
         return this.commandMap.get(name) !== undefined;
@@ -4825,880 +5139,573 @@ class Keystroke {
     // Executes the keyup shortcuts.
     keyup(type) {
         type = this.normalizeType(type);
-        for (const item of this.keyupEventList) {
-            if (item.type === type) {
-                if (item.listener(new Event(type)) === false) {
-                    break;
-                }
-            }
-        }
-    }
-}
-
-class BoxManager {
-    add(component) {
-        boxes.set(component.name, component);
-    }
-    remove(name) {
-        boxes.delete(name);
-    }
-    getNames() {
-        return Array.from(boxes.keys());
-    }
-    getInstances(editor) {
-        let instanceMap = boxInstances.get(editor.container.id);
-        if (!instanceMap) {
-            instanceMap = new Map();
-            boxInstances.set(editor.container.id, instanceMap);
-            return instanceMap;
-        }
-        return instanceMap;
-    }
-    rectifyInstances(editor) {
-        const instanceMap = this.getInstances(editor);
-        for (const box of instanceMap.values()) {
-            if (!box.node.get(0).isConnected) {
-                box.unmount();
-                instanceMap.delete(box.node.id);
-            }
-        }
-    }
-    findAll(editor) {
-        return editor.container.find('lake-box');
-    }
-    renderAll(editor) {
-        this.rectifyInstances(editor);
-        const instanceMap = this.getInstances(editor);
-        this.findAll(editor).each(boxNativeNode => {
-            const boxNode = new Nodes(boxNativeNode);
-            if (instanceMap.get(boxNode.id)) {
-                return;
-            }
-            const box = new Box(boxNode);
-            box.render();
-            instanceMap.set(box.node.id, box);
-        });
-    }
-}
-
-class Plugin {
-    constructor() {
-        this.pluginList = [];
-    }
-    add(plugin) {
-        this.pluginList.push(plugin);
-    }
-    loadAll(editor) {
-        this.pluginList.forEach(plugin => {
-            plugin(editor);
-        });
-    }
-}
-
-const defaultConfig = {
-    value: '<p><br /><focus /></p>',
-    readonly: false,
-    spellcheck: false,
-    tabIndex: 0,
-    indentWithTab: true,
-    minChangeSize: 5,
-};
-class Editor {
-    constructor(config) {
-        this.unsavedInputData = '';
-        this.stateData = {
-            appliedItems: [],
-            disabledNameMap: new Map(),
-            selectedNameMap: new Map(),
-            selectedValuesMap: new Map(),
-        };
-        this.isComposing = false;
-        this.event = new EventEmitter();
-        this.box = Editor.box;
-        this.beforeunloadListener = () => {
-            this.history.save();
-        };
-        this.selectionchangeListener = () => {
-            this.selection.syncByRange();
-            this.updateBoxSelectionStyle();
-            this.emitStateChangeEvent();
-        };
-        this.clickListener = event => {
-            const targetNode = new Nodes(event.target);
-            if (targetNode.closest('.lake-popup').length > 0) {
-                return;
-            }
-            this.event.emit('click', targetNode);
-        };
-        this.resizeListener = () => {
-            this.event.emit('resize');
-        };
-        this.updateBoxSelectionStyle = debounce(() => {
-            // The editor has been unmounted.
-            if (this.root.first().length === 0) {
-                return;
-            }
-            const range = this.selection.range;
-            const clonedRange = range.clone();
-            clonedRange.adaptBox();
-            this.box.findAll(this).each(boxNode => {
-                const box = new Box(boxNode);
-                const boxContainer = box.getContainer();
-                if (boxContainer.length === 0) {
-                    return;
-                }
-                if (range.compareBeforeNode(boxContainer) < 0 && range.compareAfterNode(boxContainer) > 0) {
-                    if (!(range.isCollapsed && range.startNode.get(0) === boxContainer.get(0) && range.startOffset === 0)) {
-                        boxContainer.removeClass('lake-box-hovered');
-                        boxContainer.removeClass('lake-box-selected');
-                        boxContainer.removeClass('lake-box-focused');
-                        boxContainer.addClass('lake-box-activated');
-                        return;
-                    }
-                }
-                if (clonedRange.intersectsNode(box.node)) {
-                    boxContainer.removeClass('lake-box-activated');
-                    if (range.isCollapsed) {
-                        boxContainer.removeClass('lake-box-hovered');
-                        boxContainer.removeClass('lake-box-selected');
-                        boxContainer.addClass('lake-box-focused');
-                    }
-                    else {
-                        boxContainer.removeClass('lake-box-focused');
-                        boxContainer.addClass('lake-box-selected');
-                    }
-                    return;
-                }
-                boxContainer.removeClass('lake-box-activated');
-                boxContainer.removeClass('lake-box-focused');
-                boxContainer.removeClass('lake-box-selected');
-            });
-            this.event.emit('boxselectionstylechange');
-        }, 50, {
-            leading: false,
-            trailing: true,
-            maxWait: 50,
-        });
-        this.emitStateChangeEvent = debounce(() => {
-            const commandNames = this.command.getNames();
-            let appliedItems = this.selection.getAppliedItems();
-            if (appliedItems.length > 0 &&
-                appliedItems[0].node.closestContainer().get(0) !== this.container.get(0)) {
-                appliedItems = [];
-            }
-            const disabledNameMap = new Map();
-            const selectedNameMap = new Map();
-            const selectedValuesMap = new Map();
-            if (appliedItems.length > 0) {
-                for (const name of commandNames) {
-                    const commandItem = this.command.getItem(name);
-                    if (commandItem.isDisabled && commandItem.isDisabled(appliedItems)) {
-                        disabledNameMap.set(name, true);
-                    }
-                    if (commandItem.isSelected && commandItem.isSelected(appliedItems)) {
-                        selectedNameMap.set(name, true);
-                    }
-                    if (commandItem.selectedValues) {
-                        const values = commandItem.selectedValues(appliedItems);
-                        if (values.length > 0) {
-                            selectedValuesMap.set(name, values);
-                        }
-                    }
-                }
-            }
-            const stateData = {
-                appliedItems,
-                disabledNameMap,
-                selectedNameMap,
-                selectedValuesMap,
-            };
-            if (isEqual(stateData, this.stateData)) {
-                return;
-            }
-            if (this.toolbar) {
-                this.toolbar.updateState(stateData);
-            }
-            this.event.emit('statechange', stateData);
-            this.stateData = stateData;
-        }, 100, {
-            leading: false,
-            trailing: true,
-            maxWait: 100,
-        });
-        this.emitChangeEvent = (value) => {
-            this.rectifyContent();
-            this.emitStateChangeEvent();
-            this.event.emit('change', value);
-        };
-        if (!config.root) {
-            throw new Error('The root of the config must be specified.');
-        }
-        this.root = query(config.root);
-        this.toolbar = config.toolbar;
-        this.config = Object.assign({}, defaultConfig);
-        for (const key of Object.keys(config)) {
-            this.config[key] = config[key];
-        }
-        this.containerWrapper = query('<div class="lake-container-wrapper" />');
-        this.container = query('<div class="lake-container" />');
-        this.overlayContainer = query('<div class="lake-overlay" />');
-        this.popupContainer = query('<div class="lake-popup lake-custom-properties" />');
-        this.readonly = this.config.readonly;
-        this.root.addClass('lake-custom-properties');
-        this.container.attr({
-            contenteditable: this.readonly ? 'false' : 'true',
-            spellcheck: this.config.spellcheck ? 'true' : 'false',
-            tabindex: this.config.tabIndex.toString(),
-        });
-        this.selection = new Selection(this.container);
-        this.command = new Command(this.selection);
-        this.history = new History(this.selection);
-        this.keystroke = new Keystroke(this.container);
-        editors.set(this.container.id, this);
-    }
-    inputInBoxStrip() {
-        const selection = this.selection;
-        const range = selection.range;
-        const stripNode = range.startNode.closest('.lake-box-strip');
-        const boxNode = stripNode.closest('lake-box');
-        const box = new Box(boxNode);
-        if (box.type === 'inline') {
-            if (range.isBoxStart) {
-                range.setStartBefore(boxNode);
-                range.collapseToStart();
-            }
-            else {
-                range.setStartAfter(boxNode);
-                range.collapseToStart();
-            }
-        }
-        else {
-            const paragraph = query('<p />');
-            if (range.isBoxStart) {
-                boxNode.before(paragraph);
-            }
-            else {
-                boxNode.after(paragraph);
-            }
-            range.shrinkAfter(paragraph);
-        }
-        const text = stripNode.text();
-        stripNode.html('<br />');
-        selection.insertNode(document.createTextNode(text));
-    }
-    bindInputEvents() {
-        this.container.on('compositionstart', () => {
-            this.isComposing = true;
-        });
-        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.
-            window.setTimeout(() => {
-                var _a;
-                const range = this.selection.range;
-                if (range.isInsideBox) {
-                    return;
-                }
-                // isComposing is false after ending composition because compositionend event has been emitted.
-                if (this.isComposing) {
-                    this.event.emit('input', inputEvent);
-                    return;
-                }
-                if (range.isBoxStart || range.isBoxEnd) {
-                    this.inputInBoxStrip();
-                    this.history.save();
-                    this.event.emit('input', inputEvent);
-                    return;
-                }
-                if (inputEvent.inputType === 'insertText' ||
-                    inputEvent.inputType === 'insertCompositionText') {
-                    this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
-                    if (this.unsavedInputData.length < this.config.minChangeSize) {
-                        this.event.emit('input', inputEvent);
-                        this.emitChangeEvent(this.getValue());
-                        return;
-                    }
-                }
-                this.history.save();
-                this.event.emit('input', inputEvent);
-            }, 0);
-        });
-        this.command.event.on('beforeexecute', () => this.commitUnsavedInputData());
-    }
-    bindHistoryEvents() {
-        this.history.event.on('undo', value => {
-            this.box.renderAll(this);
-            this.emitChangeEvent(value);
-        });
-        this.history.event.on('redo', value => {
-            this.box.renderAll(this);
-            this.emitChangeEvent(value);
-        });
-        this.history.event.on('save', value => {
-            this.box.rectifyInstances(this);
-            this.emitChangeEvent(value);
-        });
-    }
-    bindFocusEvents() {
-        this.container.on('focus', () => {
-            this.root.addClass('lake-root-focused');
-        });
-        this.container.on('blur', () => {
-            this.root.removeClass('lake-root-focused');
-        });
-    }
-    // Fixes wrong content, especially empty tag.
-    rectifyContent() {
-        let children = this.container.children();
-        for (const child of children) {
-            if ((child.isBlock || child.isMark) && child.html() === '') {
-                child.remove();
-                debug('Rectifying content: empty tag was removed');
-            }
-        }
-        children = this.container.children();
-        if (children.length === 0) {
-            this.container.html('<p><br /></p>');
-            this.selection.range.shrinkAfter(this.container);
-            debug('Rectifying content: default paragraph was added');
-            return;
-        }
-        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('Rectifying content: void element 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();
-    }
-    // Sets default config for a plugin.
-    setPluginConfig(pluginName, pluginConfig) {
-        if (!this.config[pluginName]) {
-            this.config[pluginName] = {};
-        }
-        for (const key of Object.keys(pluginConfig)) {
-            if (this.config[pluginName][key] === undefined) {
-                this.config[pluginName][key] = pluginConfig[key];
-            }
-        }
-    }
-    // Sets focus on the editor area.
-    focus() {
-        this.container.focus();
-    }
-    // Removes focus from the editor area.
-    blur() {
-        this.container.blur();
-    }
-    // Sets the specified HTML string to the editor area.
-    setValue(value) {
-        value = normalizeValue(value);
-        const htmlParser = new HTMLParser(value);
-        const fragment = htmlParser.getFragment();
-        this.container.empty();
-        this.container.append(fragment);
-        Editor.box.renderAll(this);
-        this.selection.synByBookmark();
-    }
-    // Returns the contents from the editor.
-    getValue() {
-        const bookmark = this.selection.insertBookmark();
-        let value = new HTMLParser(this.container).getHTML();
-        value = denormalizeValue(value);
-        this.selection.toBookmark(bookmark);
-        return value;
-    }
-    // Inserts a box into the position of the selection.
-    insertBox(boxName, boxValue) {
-        const box = insertBox(this.selection.range, boxName, boxValue);
-        if (!box) {
-            throw new Error(`Box '${boxName}' cannot be inserted outside the editor.`);
-        }
-        const instanceMap = this.box.getInstances(this);
-        instanceMap.set(box.node.id, box);
-        return box;
-    }
-    // Removes the selected box.
-    removeBox() {
-        const box = removeBox(this.selection.range);
-        if (box) {
-            const instanceMap = this.box.getInstances(this);
-            instanceMap.delete(box.node.id);
-        }
-        return box;
-    }
-    // Renders an editor area and set default value to it.
-    render() {
-        const value = normalizeValue(this.config.value);
-        const htmlParser = new HTMLParser(value);
-        const fragment = htmlParser.getFragment();
-        this.root.empty();
-        this.root.append(this.containerWrapper);
-        this.containerWrapper.append(this.container);
-        this.containerWrapper.append(this.overlayContainer);
-        query(document.body).append(this.popupContainer);
-        this.container.append(fragment);
-        Editor.plugin.loadAll(this);
-        if (!this.readonly) {
-            this.bindFocusEvents();
-            this.selection.synByBookmark();
-            this.history.save();
-        }
-        Editor.box.renderAll(this);
-        if (this.toolbar) {
-            this.toolbar.render(this);
-        }
-        if (!this.readonly) {
-            window.addEventListener('beforeunload', this.beforeunloadListener);
-            document.addEventListener('selectionchange', this.selectionchangeListener);
-            document.addEventListener('click', this.clickListener);
-            window.addEventListener('resize', this.resizeListener);
-            this.bindInputEvents();
-            this.bindHistoryEvents();
-        }
-    }
-    // Destroys a rendered editor.
-    unmount() {
-        this.root.empty();
-        this.popupContainer.remove();
-        if (!this.readonly) {
-            window.removeEventListener('beforeunload', this.beforeunloadListener);
-            document.removeEventListener('selectionchange', this.selectionchangeListener);
-            document.removeEventListener('click', this.clickListener);
-            window.removeEventListener('resize', this.resizeListener);
-        }
-    }
-}
-Editor.version = version;
-Editor.box = new BoxManager();
-Editor.plugin = new Plugin();
-
-var enUS = {
-    toolbar: {
-        undo: `Undo (${modifierText('mod+Z')})`,
-        redo: `Redo (${modifierText('mod+Y')})`,
-        selectAll: `Select all (${modifierText('mod+A')})`,
-        paragraph: 'Paragraph',
-        blockQuote: 'Block quotation',
-        numberedList: 'Numbered list',
-        bulletedList: 'Bulleted list',
-        checklist: 'Checklist',
-        alignLeft: 'Align left',
-        alignCenter: 'Align center',
-        alignRight: 'Align right',
-        alignJustify: 'Align justify',
-        increaseIndent: 'Increase indent',
-        decreaseIndent: 'Decrease indent',
-        bold: `Bold (${modifierText('mod+B')})`,
-        italic: `Italic (${modifierText('mod+I')})`,
-        underline: `Underline (${modifierText('mod+U')})`,
-        strikethrough: 'Strikethrough',
-        superscript: 'Superscript',
-        subscript: 'Subscript',
-        code: 'Inline code',
-        removeFormat: 'Remove format',
-        formatPainter: 'Format painter',
-        link: 'Link',
-        hr: 'Horizontal line',
-        codeBlock: 'Code block',
-        heading: 'Heading',
-        heading1: 'Heading 1',
-        heading2: 'Heading 2',
-        heading3: 'Heading 3',
-        heading4: 'Heading 4',
-        heading5: 'Heading 5',
-        heading6: 'Heading 6',
-        list: 'List',
-        align: 'Alignment',
-        indent: 'Indent',
-        fontFamily: 'Font family',
-        fontSize: 'Font size',
-        moreStyle: 'More style',
-        fontColor: 'Font color',
-        highlight: 'Highlight',
-        image: 'Image',
-        removeColor: 'Remove color',
-    },
-    link: {
-        newLink: 'New link',
-        url: 'Link URL',
-        title: 'Link title',
-        copy: 'Copy link to clipboard',
-        open: 'Open link in new tab',
-        save: 'Save',
-        unlink: 'Remove link',
-    },
-    image: {
-        view: 'Full screen',
-        remove: 'Delete',
-        previous: 'Previous',
-        next: 'Next',
-        close: 'Close (Esc)',
-        loadingError: 'The image cannot be loaded',
-        zoomOut: 'Zoom out',
-        zoomIn: 'Zoom in',
-    },
-    codeBlock: {
-        langType: 'Select language',
-    },
-};
-
-var zhCN = {
-    toolbar: {
-        undo: `撤消 (${modifierText('mod+Z')})`,
-        redo: `重做 (${modifierText('mod+Y')})`,
-        selectAll: `全选 (${modifierText('mod+A')})`,
-        paragraph: '正文',
-        blockQuote: '引用',
-        numberedList: '编号',
-        bulletedList: '项目符号',
-        checklist: '任务列表',
-        alignLeft: '左对齐',
-        alignCenter: '居中',
-        alignRight: '右对齐',
-        alignJustify: '两端对齐',
-        increaseIndent: '增加缩进',
-        decreaseIndent: '减少缩进',
-        bold: `粗体 (${modifierText('mod+B')})`,
-        italic: `斜体 (${modifierText('mod+I')})`,
-        underline: `下划线 (${modifierText('mod+U')})`,
-        strikethrough: '删除线',
-        superscript: '上标',
-        subscript: '下标',
-        code: '行内代码',
-        removeFormat: '清除格式',
-        formatPainter: '格式刷',
-        link: '链接',
-        hr: '分割线',
-        codeBlock: '代码块',
-        heading: '标题',
-        heading1: '标题 1',
-        heading2: '标题 2',
-        heading3: '标题 3',
-        heading4: '标题 4',
-        heading5: '标题 5',
-        heading6: '标题 6',
-        list: '列表',
-        align: '对齐方式',
-        indent: '缩进',
-        fontFamily: '字体',
-        fontSize: '文字大小',
-        moreStyle: '更多样式',
-        fontColor: '文字颜色',
-        highlight: '文字背景',
-        image: '图片',
-        removeColor: '默认',
-    },
-    link: {
-        newLink: '新链接',
-        url: '链接 URL',
-        title: '链接文本',
-        copy: '复制到剪贴板',
-        open: '打开链接',
-        save: '确定',
-        unlink: '取消链接',
-    },
-    image: {
-        view: '查看大图',
-        remove: '删除',
-        previous: '上一张',
-        next: '下一张',
-        close: '关闭 (Esc)',
-        loadingError: '图片加载失败',
-        zoomOut: '缩小',
-        zoomIn: '放大',
-    },
-    codeBlock: {
-        langType: '选择代码语言',
-    },
-};
-
-var ja = {
-    toolbar: {
-        undo: `元に戻す (${modifierText('mod+Z')})`,
-        redo: `やり直し (${modifierText('mod+Y')})`,
-        selectAll: `すべて選択 (${modifierText('mod+A')})`,
-        paragraph: 'テキスト',
-        blockQuote: 'ブロック引用',
-        numberedList: '番号付きリスト',
-        bulletedList: '箇条書きリスト',
-        checklist: 'タスクリスト',
-        alignLeft: '左揃え',
-        alignCenter: '中心揃え',
-        alignRight: '右揃え',
-        alignJustify: '左右に並べ替え',
-        increaseIndent: 'インデントを増やす',
-        decreaseIndent: 'インデントを減らす',
-        bold: `太字 (${modifierText('mod+B')})`,
-        italic: `斜体 (${modifierText('mod+I')})`,
-        underline: `下線 (${modifierText('mod+U')})`,
-        strikethrough: '取り消し線',
-        superscript: '上付き文字',
-        subscript: '下付き文字',
-        code: 'インラインコード',
-        removeFormat: '形式を削除',
-        formatPainter: '形式ペインタ',
-        link: 'リンク',
-        hr: '区切り線',
-        codeBlock: 'コードブロック',
-        heading: 'タイトル',
-        heading1: 'タイトル 1',
-        heading2: 'タイトル 2',
-        heading3: 'タイトル 3',
-        heading4: 'タイトル 4',
-        heading5: 'タイトル 5',
-        heading6: 'タイトル 6',
-        list: 'リスト',
-        align: '文字揃え',
-        indent: 'インデント',
-        fontFamily: 'フォント',
-        fontSize: '文字サイズ',
-        moreStyle: 'その他のスタイル',
-        fontColor: '文字色',
-        highlight: '文字の背景',
-        image: '画像',
-        removeColor: 'デフォルト',
-    },
-    link: {
-        newLink: '新しいリンク',
-        url: 'リンク URL',
-        title: 'リンク文字',
-        copy: 'クリップボードにコピー',
-        open: 'リンクを開く',
-        save: '確認',
-        unlink: 'リンクを削除',
-    },
-    image: {
-        view: '大きな画像を見る',
-        remove: '削除',
-        previous: '前の画像',
-        next: '次の画像',
-        close: '閉じる (Esc)',
-        loadingError: '画像を読み込めません',
-        zoomOut: '縮小',
-        zoomIn: '拡大',
-    },
-    codeBlock: {
-        langType: 'コード言語を選択',
-    },
-};
-
-var ko = {
-    toolbar: {
-        undo: `작업취소 (${modifierText('mod+Z')})`,
-        redo: `작업재개 (${modifierText('mod+Y')})`,
-        selectAll: `전체 선택 (${modifierText('mod+A')})`,
-        paragraph: '텍스트',
-        blockQuote: '인용문',
-        numberedList: '순서 목록',
-        bulletedList: '비순서 목록',
-        checklist: '체크리스트',
-        alignLeft: '왼쪽 정렬',
-        alignCenter: '가운데 정렬',
-        alignRight: '오른쪽 정렬',
-        alignJustify: '좌우로 정렬',
-        increaseIndent: '들여쓰기 증가',
-        decreaseIndent: '들여쓰기 줄이기',
-        bold: `굵게 (${modifierText('mod+B')})`,
-        italic: `기울임꼴 (${modifierText('mod+I')})`,
-        underline: `밑줄 (${modifierText('mod+U')})`,
-        strikethrough: '취소선',
-        superscript: '위첨자',
-        subscript: '아래 첨자',
-        code: '인라인 코드',
-        removeFormat: '형식 지우기',
-        formatPainter: '형식 페인터',
-        link: '링크',
-        hr: '구분선',
-        codeBlock: '코드 블록',
-        heading: '제목',
-        heading1: '제목 1',
-        heading2: '제목 2',
-        heading3: '제목 3',
-        heading4: '제목 4',
-        heading5: '제목 5',
-        heading6: '제목 6',
-        list: '목록',
-        align: '정렬',
-        indent: '들여쓰기',
-        fontFamily: '글꼴',
-        fontSize: '글자 크기',
-        moreStyle: '더 많은 스타일',
-        fontColor: '글자 색상',
-        highlight: '글자 배경',
-        image: '이미지',
-        removeColor: '기본색',
-    },
-    link: {
-        newLink: '새 링크',
-        url: '링크 URL',
-        title: '링크 텍스트',
-        copy: '클립보드에 복사',
-        open: '링크 열기',
-        save: '확인',
-        unlink: '링크 제거',
-    },
-    image: {
-        view: '큰 이미지 보기',
-        remove: '삭제',
-        previous: '이전 이미지',
-        next: '다음 이미지',
-        close: '닫기 (Esc)',
-        loadingError: '이미지를 로드할 수 없습니다',
-        zoomOut: '축소',
-        zoomIn: '확대',
-    },
-    codeBlock: {
-        langType: '코드언어 선택',
-    },
-};
+        for (const item of this.keyupEventList) {
+            if (item.type === type) {
+                if (item.listener(new Event(type)) === false) {
+                    break;
+                }
+            }
+        }
+    }
+}
 
-const localeTranslations = {
-    'en-US': enUS,
-    'zh-CN': zhCN,
-    ja,
-    ko,
-};
-const locales = Object.keys(localeTranslations);
-const loadedLocales = {};
-const loadedFormatters = {};
-const initFormatters = () => {
-    const formatters = {
-    // add your formatter functions here
-    };
-    return formatters;
-};
-const loadFormatters = (locale) => {
-    loadedFormatters[locale] = initFormatters();
+class BoxManager {
+    add(component) {
+        boxes.set(component.name, component);
+    }
+    remove(name) {
+        boxes.delete(name);
+    }
+    getNames() {
+        return Array.from(boxes.keys());
+    }
+    getInstances(editor) {
+        let instanceMap = boxInstances.get(editor.container.id);
+        if (!instanceMap) {
+            instanceMap = new Map();
+            boxInstances.set(editor.container.id, instanceMap);
+            return instanceMap;
+        }
+        return instanceMap;
+    }
+    rectifyInstances(editor) {
+        const instanceMap = this.getInstances(editor);
+        for (const box of instanceMap.values()) {
+            if (!box.node.get(0).isConnected) {
+                box.unmount();
+                instanceMap.delete(box.node.id);
+            }
+        }
+    }
+    findAll(editor) {
+        return editor.container.find('lake-box');
+    }
+    renderAll(editor) {
+        this.rectifyInstances(editor);
+        const instanceMap = this.getInstances(editor);
+        this.findAll(editor).each(boxNativeNode => {
+            const boxNode = new Nodes(boxNativeNode);
+            if (instanceMap.get(boxNode.id)) {
+                return;
+            }
+            const box = new Box(boxNode);
+            box.render();
+            instanceMap.set(box.node.id, box);
+        });
+    }
+}
+
+class Plugin {
+    constructor() {
+        this.pluginList = [];
+    }
+    add(plugin) {
+        this.pluginList.push(plugin);
+    }
+    loadAll(editor) {
+        this.pluginList.forEach(plugin => {
+            plugin(editor);
+        });
+    }
+}
+
+const defaultConfig = {
+    value: '<p><br /><focus /></p>',
+    readonly: false,
+    spellcheck: false,
+    tabIndex: 0,
+    indentWithTab: true,
+    lang: 'en-US',
+    minChangeSize: 5,
 };
-const loadLocale = (locale) => {
-    if (loadedLocales[locale]) {
-        return;
+class Editor {
+    constructor(config) {
+        this.unsavedInputData = '';
+        this.stateData = {
+            appliedItems: [],
+            disabledNameMap: new Map(),
+            selectedNameMap: new Map(),
+            selectedValuesMap: new Map(),
+        };
+        this.isComposing = false;
+        this.event = new EventEmitter();
+        this.box = Editor.box;
+        this.beforeunloadListener = () => {
+            this.history.save();
+        };
+        this.selectionchangeListener = () => {
+            this.selection.syncByRange();
+            this.updateBoxSelectionStyle();
+            this.emitStateChangeEvent();
+        };
+        this.clickListener = event => {
+            const targetNode = new Nodes(event.target);
+            if (targetNode.closest('.lake-popup').length > 0) {
+                return;
+            }
+            this.event.emit('click', targetNode);
+        };
+        this.resizeListener = () => {
+            this.event.emit('resize');
+        };
+        this.updateBoxSelectionStyle = debounce(() => {
+            // The editor has been unmounted.
+            if (this.root.first().length === 0) {
+                return;
+            }
+            const range = this.selection.range;
+            const clonedRange = range.clone();
+            clonedRange.adaptBox();
+            this.box.findAll(this).each(boxNode => {
+                const box = new Box(boxNode);
+                const boxContainer = box.getContainer();
+                if (boxContainer.length === 0) {
+                    return;
+                }
+                if (range.compareBeforeNode(boxContainer) < 0 && range.compareAfterNode(boxContainer) > 0) {
+                    if (!(range.isCollapsed && range.startNode.get(0) === boxContainer.get(0) && range.startOffset === 0)) {
+                        boxContainer.removeClass('lake-box-hovered');
+                        boxContainer.removeClass('lake-box-selected');
+                        boxContainer.removeClass('lake-box-focused');
+                        boxContainer.addClass('lake-box-activated');
+                        return;
+                    }
+                }
+                if (clonedRange.intersectsNode(box.node)) {
+                    boxContainer.removeClass('lake-box-activated');
+                    if (range.isCollapsed) {
+                        boxContainer.removeClass('lake-box-hovered');
+                        boxContainer.removeClass('lake-box-selected');
+                        boxContainer.addClass('lake-box-focused');
+                    }
+                    else {
+                        boxContainer.removeClass('lake-box-focused');
+                        boxContainer.addClass('lake-box-selected');
+                    }
+                    return;
+                }
+                boxContainer.removeClass('lake-box-activated');
+                boxContainer.removeClass('lake-box-focused');
+                boxContainer.removeClass('lake-box-selected');
+            });
+            this.event.emit('boxselectionstylechange');
+        }, 50, {
+            leading: false,
+            trailing: true,
+            maxWait: 50,
+        });
+        this.emitStateChangeEvent = debounce(() => {
+            const commandNames = this.command.getNames();
+            let appliedItems = this.selection.getAppliedItems();
+            if (appliedItems.length > 0 &&
+                appliedItems[0].node.closestContainer().get(0) !== this.container.get(0)) {
+                appliedItems = [];
+            }
+            const disabledNameMap = new Map();
+            const selectedNameMap = new Map();
+            const selectedValuesMap = new Map();
+            if (appliedItems.length > 0) {
+                for (const name of commandNames) {
+                    const commandItem = this.command.getItem(name);
+                    if (commandItem.isDisabled && commandItem.isDisabled(appliedItems)) {
+                        disabledNameMap.set(name, true);
+                    }
+                    if (commandItem.isSelected && commandItem.isSelected(appliedItems)) {
+                        selectedNameMap.set(name, true);
+                    }
+                    if (commandItem.selectedValues) {
+                        const values = commandItem.selectedValues(appliedItems);
+                        if (values.length > 0) {
+                            selectedValuesMap.set(name, values);
+                        }
+                    }
+                }
+            }
+            const stateData = {
+                appliedItems,
+                disabledNameMap,
+                selectedNameMap,
+                selectedValuesMap,
+            };
+            if (isEqual(stateData, this.stateData)) {
+                return;
+            }
+            if (this.toolbar) {
+                this.toolbar.updateState(stateData);
+            }
+            this.event.emit('statechange', stateData);
+            this.stateData = stateData;
+        }, 100, {
+            leading: false,
+            trailing: true,
+            maxWait: 100,
+        });
+        this.emitChangeEvent = (value) => {
+            this.rectifyContent();
+            this.emitStateChangeEvent();
+            this.event.emit('change', value);
+        };
+        if (!config.root) {
+            throw new Error('The root of the config must be specified.');
+        }
+        this.root = query(config.root);
+        this.toolbar = config.toolbar;
+        this.config = Object.assign({}, defaultConfig);
+        for (const key of Object.keys(config)) {
+            this.config[key] = config[key];
+        }
+        this.containerWrapper = query('<div class="lake-container-wrapper" />');
+        this.container = query('<div class="lake-container" />');
+        this.overlayContainer = query('<div class="lake-overlay" />');
+        this.popupContainer = query('<div class="lake-popup lake-custom-properties" />');
+        this.readonly = this.config.readonly;
+        this.root.addClass('lake-custom-properties');
+        this.container.attr({
+            contenteditable: this.readonly ? 'false' : 'true',
+            spellcheck: this.config.spellcheck ? 'true' : 'false',
+            tabindex: this.config.tabIndex.toString(),
+        });
+        this.selection = new Selection(this.container);
+        this.command = new Command(this.selection);
+        this.history = new History(this.selection);
+        this.keystroke = new Keystroke(this.container);
+        editors.set(this.container.id, this);
+    }
+    inputInBoxStrip() {
+        const selection = this.selection;
+        const range = selection.range;
+        const stripNode = range.startNode.closest('.lake-box-strip');
+        const boxNode = stripNode.closest('lake-box');
+        const box = new Box(boxNode);
+        if (box.type === 'inline') {
+            if (range.isBoxStart) {
+                range.setStartBefore(boxNode);
+                range.collapseToStart();
+            }
+            else {
+                range.setStartAfter(boxNode);
+                range.collapseToStart();
+            }
+        }
+        else {
+            const paragraph = query('<p />');
+            if (range.isBoxStart) {
+                boxNode.before(paragraph);
+            }
+            else {
+                boxNode.after(paragraph);
+            }
+            range.shrinkAfter(paragraph);
+        }
+        const text = stripNode.text();
+        stripNode.html('<br />');
+        selection.insertNode(document.createTextNode(text));
     }
-    loadedLocales[locale] = localeTranslations[locale];
-    loadFormatters(locale);
-};
-const loadAllLocales = () => locales.forEach(loadLocale);
-const i18nObject = (locale) => i18nObject$1(locale, loadedLocales[locale], loadedFormatters[locale]);
-loadAllLocales();
-const language = locales.indexOf(window.LAKE_LANGUAGE) >= 0 ? window.LAKE_LANGUAGE : 'en-US';
-const locale = i18nObject(language);
+    bindInputEvents() {
+        this.container.on('compositionstart', () => {
+            this.isComposing = true;
+        });
+        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.
+            window.setTimeout(() => {
+                var _a;
+                const range = this.selection.range;
+                if (range.isInsideBox) {
+                    return;
+                }
+                // isComposing is false after ending composition because compositionend event has been emitted.
+                if (this.isComposing) {
+                    this.event.emit('input', inputEvent);
+                    return;
+                }
+                if (range.isBoxStart || range.isBoxEnd) {
+                    this.inputInBoxStrip();
+                    this.history.save();
+                    this.event.emit('input', inputEvent);
+                    return;
+                }
+                if (inputEvent.inputType === 'insertText' ||
+                    inputEvent.inputType === 'insertCompositionText') {
+                    this.unsavedInputData += (_a = inputEvent.data) !== null && _a !== void 0 ? _a : '';
+                    if (this.unsavedInputData.length < this.config.minChangeSize) {
+                        this.event.emit('input', inputEvent);
+                        this.emitChangeEvent(this.getValue());
+                        return;
+                    }
+                }
+                this.history.save();
+                this.event.emit('input', inputEvent);
+            }, 0);
+        });
+        this.command.event.on('beforeexecute', () => this.commitUnsavedInputData());
+    }
+    bindHistoryEvents() {
+        this.history.event.on('undo', value => {
+            this.box.renderAll(this);
+            this.emitChangeEvent(value);
+        });
+        this.history.event.on('redo', value => {
+            this.box.renderAll(this);
+            this.emitChangeEvent(value);
+        });
+        this.history.event.on('save', value => {
+            this.box.rectifyInstances(this);
+            this.emitChangeEvent(value);
+        });
+    }
+    // Returns a boolean value indicating whether the editor has focus.
+    get hasFocus() {
+        const activeElement = document.activeElement;
+        if (!activeElement) {
+            return false;
+        }
+        return query(activeElement).closest('.lake-container').get(0) === this.container.get(0);
+    }
+    // Returns translation functions by the specified lang.
+    get locale() {
+        return i18nObject(this.config.lang);
+    }
+    // Fixes wrong content, especially empty tag.
+    rectifyContent() {
+        let children = this.container.children();
+        for (const child of children) {
+            if ((child.isBlock || child.isMark) && child.html() === '') {
+                child.remove();
+                debug('Rectifying content: empty tag was removed');
+            }
+        }
+        children = this.container.children();
+        if (children.length === 0) {
+            this.container.html('<p><br /></p>');
+            this.selection.range.shrinkAfter(this.container);
+            debug('Rectifying content: default paragraph was added');
+            return;
+        }
+        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('Rectifying content: void element 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();
+    }
+    // Sets default config for a plugin.
+    setPluginConfig(pluginName, pluginConfig) {
+        if (!this.config[pluginName]) {
+            this.config[pluginName] = {};
+        }
+        for (const key of Object.keys(pluginConfig)) {
+            if (this.config[pluginName][key] === undefined) {
+                this.config[pluginName][key] = pluginConfig[key];
+            }
+        }
+    }
+    // Sets focus on the editor area.
+    focus() {
+        this.container.focus();
+    }
+    // Removes focus from the editor area.
+    blur() {
+        this.container.blur();
+    }
+    // Sets the specified HTML string to the editor area.
+    setValue(value) {
+        value = normalizeValue(value);
+        const htmlParser = new HTMLParser(value);
+        const fragment = htmlParser.getFragment();
+        this.container.empty();
+        this.container.append(fragment);
+        Editor.box.renderAll(this);
+        this.selection.synByBookmark();
+    }
+    // Returns the contents from the editor.
+    getValue() {
+        const bookmark = this.selection.insertBookmark();
+        let value = new HTMLParser(this.container).getHTML();
+        value = denormalizeValue(value);
+        this.selection.toBookmark(bookmark);
+        return value;
+    }
+    // Inserts a box into the position of the selection.
+    insertBox(boxName, boxValue) {
+        const box = insertBox(this.selection.range, boxName, boxValue);
+        if (!box) {
+            throw new Error(`Box '${boxName}' cannot be inserted outside the editor.`);
+        }
+        const instanceMap = this.box.getInstances(this);
+        instanceMap.set(box.node.id, box);
+        return box;
+    }
+    // Removes the selected box.
+    removeBox() {
+        const box = removeBox(this.selection.range);
+        if (box) {
+            const instanceMap = this.box.getInstances(this);
+            instanceMap.delete(box.node.id);
+        }
+        return box;
+    }
+    // Renders an editor area and set default value to it.
+    render() {
+        const value = normalizeValue(this.config.value);
+        const htmlParser = new HTMLParser(value);
+        const fragment = htmlParser.getFragment();
+        this.root.empty();
+        this.root.append(this.containerWrapper);
+        this.containerWrapper.append(this.container);
+        this.containerWrapper.append(this.overlayContainer);
+        query(document.body).append(this.popupContainer);
+        this.container.append(fragment);
+        Editor.plugin.loadAll(this);
+        if (!this.readonly) {
+            this.selection.synByBookmark();
+            this.history.save();
+        }
+        Editor.box.renderAll(this);
+        if (this.toolbar) {
+            this.toolbar.render(this);
+        }
+        if (!this.readonly) {
+            window.addEventListener('beforeunload', this.beforeunloadListener);
+            document.addEventListener('selectionchange', this.selectionchangeListener);
+            document.addEventListener('click', this.clickListener);
+            window.addEventListener('resize', this.resizeListener);
+            this.bindInputEvents();
+            this.bindHistoryEvents();
+        }
+    }
+    // Destroys a rendered editor.
+    unmount() {
+        this.root.empty();
+        this.popupContainer.remove();
+        if (!this.readonly) {
+            window.removeEventListener('beforeunload', this.beforeunloadListener);
+            document.removeEventListener('selectionchange', this.selectionchangeListener);
+            document.removeEventListener('click', this.clickListener);
+            window.removeEventListener('resize', this.resizeListener);
+        }
+    }
+}
+Editor.version = version;
+Editor.box = new BoxManager();
+Editor.plugin = new Plugin();
 
 const headingMenuItems = [
     {
         value: 'h1',
-        text: `<span style="font-weight: bold; font-size: 26px;">${locale.toolbar.heading1()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 26px;">${locale.toolbar.heading1()}</span>`,
     },
     {
         value: 'h2',
-        text: `<span style="font-weight: bold; font-size: 24px;">${locale.toolbar.heading2()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 24px;">${locale.toolbar.heading2()}</span>`,
     },
     {
         value: 'h3',
-        text: `<span style="font-weight: bold; font-size: 22px;">${locale.toolbar.heading3()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 22px;">${locale.toolbar.heading3()}</span>`,
     },
     {
         value: 'h4',
-        text: `<span style="font-weight: bold; font-size: 20px;">${locale.toolbar.heading4()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 20px;">${locale.toolbar.heading4()}</span>`,
     },
     {
         value: 'h5',
-        text: `<span style="font-weight: bold; font-size: 18px;">${locale.toolbar.heading5()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 18px;">${locale.toolbar.heading5()}</span>`,
     },
     {
         value: 'h6',
-        text: `<span style="font-weight: bold; font-size: 16px;">${locale.toolbar.heading6()}</span>`,
+        text: locale => `<span style="font-weight: bold; font-size: 16px;">${locale.toolbar.heading6()}</span>`,
     },
     {
         value: 'p',
-        text: locale.toolbar.paragraph(),
+        text: locale => locale.toolbar.paragraph(),
     },
 ];
 const listMenuItems = [
     {
         icon: icons.get('numberedList'),
         value: 'numbered',
-        text: locale.toolbar.numberedList(),
+        text: locale => locale.toolbar.numberedList(),
     },
     {
         icon: icons.get('bulletedList'),
         value: 'bulleted',
-        text: locale.toolbar.bulletedList(),
+        text: locale => locale.toolbar.bulletedList(),
     },
     {
         icon: icons.get('checklist'),
         value: 'checklist',
-        text: locale.toolbar.checklist(),
+        text: locale => locale.toolbar.checklist(),
     },
 ];
 const alignMenuItems = [
     {
         icon: icons.get('alignLeft'),
         value: 'left',
-        text: locale.toolbar.alignLeft(),
+        text: locale => locale.toolbar.alignLeft(),
     },
     {
         icon: icons.get('alignCenter'),
         value: 'center',
-        text: locale.toolbar.alignCenter(),
+        text: locale => locale.toolbar.alignCenter(),
     },
     {
         icon: icons.get('alignRight'),
         value: 'right',
-        text: locale.toolbar.alignRight(),
+        text: locale => locale.toolbar.alignRight(),
     },
     {
         icon: icons.get('alignJustify'),
         value: 'justify',
-        text: locale.toolbar.alignJustify(),
+        text: locale => locale.toolbar.alignJustify(),
     },
 ];
 const indentMenuItems = [
     {
         icon: icons.get('increaseIndent'),
         value: 'increase',
-        text: locale.toolbar.increaseIndent(),
+        text: locale => locale.toolbar.increaseIndent(),
     },
     {
         icon: icons.get('decreaseIndent'),
         value: 'decrease',
-        text: locale.toolbar.decreaseIndent(),
+        text: locale => locale.toolbar.decreaseIndent(),
     },
 ];
 const fontFamilyMenuItems = [
@@ -5785,32 +5792,32 @@ const moreStyleMenuItems = [
     {
         icon: icons.get('italic'),
         value: 'italic',
-        text: locale.toolbar.italic(),
+        text: locale => locale.toolbar.italic(),
     },
     {
         icon: icons.get('underline'),
         value: 'underline',
-        text: locale.toolbar.underline(),
+        text: locale => locale.toolbar.underline(),
     },
     {
         icon: icons.get('strikethrough'),
         value: 'strikethrough',
-        text: locale.toolbar.strikethrough(),
+        text: locale => locale.toolbar.strikethrough(),
     },
     {
         icon: icons.get('superscript'),
         value: 'superscript',
-        text: locale.toolbar.superscript(),
+        text: locale => locale.toolbar.superscript(),
     },
     {
         icon: icons.get('subscript'),
         value: 'subscript',
-        text: locale.toolbar.subscript(),
+        text: locale => locale.toolbar.subscript(),
     },
     {
         icon: icons.get('code'),
         value: 'code',
-        text: locale.toolbar.code(),
+        text: locale => locale.toolbar.code(),
     },
 ];
 // These colors are from Ant Design (https://ant.design/docs/spec/colors)
@@ -5833,7 +5840,7 @@ const colorMenuItems = [
     {
         icon: icons.get('removeFormat'),
         value: '',
-        text: locale.toolbar.removeColor(),
+        text: locale => locale.toolbar.removeColor(),
     },
 ];
 for (const color of colors) {
@@ -5858,7 +5865,7 @@ const toolbarItems = [
         name: 'undo',
         type: 'button',
         icon: icons.get('undo'),
-        tooltip: locale.toolbar.undo(),
+        tooltip: locale => locale.toolbar.undo(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5867,7 +5874,7 @@ const toolbarItems = [
         name: 'redo',
         type: 'button',
         icon: icons.get('redo'),
-        tooltip: locale.toolbar.redo(),
+        tooltip: locale => locale.toolbar.redo(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5876,7 +5883,7 @@ const toolbarItems = [
         name: 'selectAll',
         type: 'button',
         icon: icons.get('selectAll'),
-        tooltip: locale.toolbar.selectAll(),
+        tooltip: locale => locale.toolbar.selectAll(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5885,7 +5892,7 @@ const toolbarItems = [
         name: 'paragraph',
         type: 'button',
         icon: icons.get('paragraph'),
-        tooltip: locale.toolbar.paragraph(),
+        tooltip: locale => locale.toolbar.paragraph(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'p'),
         onClick: editor => {
             editor.command.execute('heading', 'p');
@@ -5895,7 +5902,7 @@ const toolbarItems = [
         name: 'blockQuote',
         type: 'button',
         icon: icons.get('blockQuote'),
-        tooltip: locale.toolbar.blockQuote(),
+        tooltip: locale => locale.toolbar.blockQuote(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5904,7 +5911,7 @@ const toolbarItems = [
         name: 'numberedList',
         type: 'button',
         icon: icons.get('numberedList'),
-        tooltip: locale.toolbar.numberedList(),
+        tooltip: locale => locale.toolbar.numberedList(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ol'),
         onClick: editor => {
             editor.command.execute('list', 'numbered');
@@ -5914,7 +5921,7 @@ const toolbarItems = [
         name: 'bulletedList',
         type: 'button',
         icon: icons.get('bulletedList'),
-        tooltip: locale.toolbar.bulletedList(),
+        tooltip: locale => locale.toolbar.bulletedList(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ul' && !item.node.hasAttr('type')),
         onClick: editor => {
             editor.command.execute('list', 'bulleted');
@@ -5924,7 +5931,7 @@ const toolbarItems = [
         name: 'checklist',
         type: 'button',
         icon: icons.get('checklist'),
-        tooltip: locale.toolbar.checklist(),
+        tooltip: locale => locale.toolbar.checklist(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ul' && item.node.attr('type') === 'checklist'),
         onClick: editor => {
             editor.command.execute('list', 'checklist');
@@ -5934,7 +5941,7 @@ const toolbarItems = [
         name: 'alignLeft',
         type: 'button',
         icon: icons.get('alignLeft'),
-        tooltip: locale.toolbar.alignLeft(),
+        tooltip: locale => locale.toolbar.alignLeft(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'left'),
         onClick: editor => {
             editor.command.execute('align', 'left');
@@ -5944,7 +5951,7 @@ const toolbarItems = [
         name: 'alignCenter',
         type: 'button',
         icon: icons.get('alignCenter'),
-        tooltip: locale.toolbar.alignCenter(),
+        tooltip: locale => locale.toolbar.alignCenter(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'center'),
         onClick: editor => {
             editor.command.execute('align', 'center');
@@ -5954,7 +5961,7 @@ const toolbarItems = [
         name: 'alignRight',
         type: 'button',
         icon: icons.get('alignRight'),
-        tooltip: locale.toolbar.alignRight(),
+        tooltip: locale => locale.toolbar.alignRight(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'right'),
         onClick: editor => {
             editor.command.execute('align', 'right');
@@ -5964,7 +5971,7 @@ const toolbarItems = [
         name: 'alignJustify',
         type: 'button',
         icon: icons.get('alignJustify'),
-        tooltip: locale.toolbar.alignJustify(),
+        tooltip: locale => locale.toolbar.alignJustify(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'justify'),
         onClick: editor => {
             editor.command.execute('align', 'justify');
@@ -5974,7 +5981,7 @@ const toolbarItems = [
         name: 'increaseIndent',
         type: 'button',
         icon: icons.get('increaseIndent'),
-        tooltip: locale.toolbar.increaseIndent(),
+        tooltip: locale => locale.toolbar.increaseIndent(),
         onClick: editor => {
             editor.command.execute('indent', 'increase');
         },
@@ -5983,7 +5990,7 @@ const toolbarItems = [
         name: 'decreaseIndent',
         type: 'button',
         icon: icons.get('decreaseIndent'),
-        tooltip: locale.toolbar.decreaseIndent(),
+        tooltip: locale => locale.toolbar.decreaseIndent(),
         onClick: editor => {
             editor.command.execute('indent', 'decrease');
         },
@@ -5992,7 +5999,7 @@ const toolbarItems = [
         name: 'bold',
         type: 'button',
         icon: icons.get('bold'),
-        tooltip: locale.toolbar.bold(),
+        tooltip: locale => locale.toolbar.bold(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6001,7 +6008,7 @@ const toolbarItems = [
         name: 'italic',
         type: 'button',
         icon: icons.get('italic'),
-        tooltip: locale.toolbar.italic(),
+        tooltip: locale => locale.toolbar.italic(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6010,7 +6017,7 @@ const toolbarItems = [
         name: 'underline',
         type: 'button',
         icon: icons.get('underline'),
-        tooltip: locale.toolbar.underline(),
+        tooltip: locale => locale.toolbar.underline(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6019,7 +6026,7 @@ const toolbarItems = [
         name: 'strikethrough',
         type: 'button',
         icon: icons.get('strikethrough'),
-        tooltip: locale.toolbar.strikethrough(),
+        tooltip: locale => locale.toolbar.strikethrough(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6028,7 +6035,7 @@ const toolbarItems = [
         name: 'superscript',
         type: 'button',
         icon: icons.get('superscript'),
-        tooltip: locale.toolbar.superscript(),
+        tooltip: locale => locale.toolbar.superscript(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6037,7 +6044,7 @@ const toolbarItems = [
         name: 'subscript',
         type: 'button',
         icon: icons.get('subscript'),
-        tooltip: locale.toolbar.subscript(),
+        tooltip: locale => locale.toolbar.subscript(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6046,7 +6053,7 @@ const toolbarItems = [
         name: 'code',
         type: 'button',
         icon: icons.get('code'),
-        tooltip: locale.toolbar.code(),
+        tooltip: locale => locale.toolbar.code(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6055,7 +6062,7 @@ const toolbarItems = [
         name: 'removeFormat',
         type: 'button',
         icon: icons.get('removeFormat'),
-        tooltip: locale.toolbar.removeFormat(),
+        tooltip: locale => locale.toolbar.removeFormat(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6064,7 +6071,7 @@ const toolbarItems = [
         name: 'formatPainter',
         type: 'button',
         icon: icons.get('formatPainter'),
-        tooltip: locale.toolbar.formatPainter(),
+        tooltip: locale => locale.toolbar.formatPainter(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6073,7 +6080,7 @@ const toolbarItems = [
         name: 'link',
         type: 'button',
         icon: icons.get('link'),
-        tooltip: locale.toolbar.link(),
+        tooltip: locale => locale.toolbar.link(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6082,7 +6089,7 @@ const toolbarItems = [
         name: 'hr',
         type: 'button',
         icon: icons.get('hr'),
-        tooltip: locale.toolbar.hr(),
+        tooltip: locale => locale.toolbar.hr(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6091,7 +6098,7 @@ const toolbarItems = [
         name: 'codeBlock',
         type: 'button',
         icon: icons.get('codeBlock'),
-        tooltip: locale.toolbar.codeBlock(),
+        tooltip: locale => locale.toolbar.codeBlock(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -6101,7 +6108,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: 'p',
-        tooltip: locale.toolbar.heading(),
+        tooltip: locale => locale.toolbar.heading(),
         width: '100px',
         menuType: 'list',
         menuItems: headingMenuItems,
@@ -6115,7 +6122,7 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('list'),
         defaultValue: '',
-        tooltip: locale.toolbar.list(),
+        tooltip: locale => locale.toolbar.list(),
         width: 'auto',
         menuType: 'list',
         menuItems: listMenuItems,
@@ -6129,7 +6136,7 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('alignLeft'),
         defaultValue: '',
-        tooltip: locale.toolbar.align(),
+        tooltip: locale => locale.toolbar.align(),
         width: 'auto',
         menuType: 'list',
         menuItems: alignMenuItems,
@@ -6143,7 +6150,7 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('increaseIndent'),
         defaultValue: '',
-        tooltip: locale.toolbar.indent(),
+        tooltip: locale => locale.toolbar.indent(),
         width: 'auto',
         menuType: 'list',
         menuItems: indentMenuItems,
@@ -6156,7 +6163,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: 'Segoe UI',
-        tooltip: locale.toolbar.fontFamily(),
+        tooltip: locale => locale.toolbar.fontFamily(),
         width: '100px',
         menuType: 'list',
         menuItems: fontFamilyMenuItems,
@@ -6169,7 +6176,7 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: '16px',
-        tooltip: locale.toolbar.fontSize(),
+        tooltip: locale => locale.toolbar.fontSize(),
         width: '65px',
         menuType: 'list',
         menuItems: fontSizeMenuItems,
@@ -6182,7 +6189,7 @@ const toolbarItems = [
         type: 'dropdown',
         icon: icons.get('more'),
         defaultValue: '',
-        tooltip: locale.toolbar.moreStyle(),
+        tooltip: locale => locale.toolbar.moreStyle(),
         width: 'auto',
         menuType: 'list',
         menuItems: moreStyleMenuItems,
@@ -6208,7 +6215,7 @@ const toolbarItems = [
         icon: icons.get('fontColor'),
         accentIcon: icons.get('fontColorAccent'),
         defaultValue: '#f5222d',
-        tooltip: locale.toolbar.fontColor(),
+        tooltip: locale => locale.toolbar.fontColor(),
         width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
@@ -6223,7 +6230,7 @@ const toolbarItems = [
         icon: icons.get('highlight'),
         accentIcon: icons.get('highlightAccent'),
         defaultValue: '#fadb14',
-        tooltip: locale.toolbar.highlight(),
+        tooltip: locale => locale.toolbar.highlight(),
         width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
@@ -6235,7 +6242,7 @@ const toolbarItems = [
         name: 'image',
         type: 'upload',
         icon: icons.get('image'),
-        tooltip: locale.toolbar.image(),
+        tooltip: locale => locale.toolbar.image(),
         accept: 'image/*',
         multiple: true,
     },
@@ -6339,7 +6346,7 @@ class Toolbar {
             root: this.container,
             name: item.name,
             icon: item.icon,
-            tooltip: item.tooltip,
+            tooltip: typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(editor.locale),
             tabIndex: -1,
             onClick: () => {
                 editor.focus();
@@ -6351,6 +6358,7 @@ class Toolbar {
     appendDropdown(editor, item) {
         const dropdown = new Dropdown({
             root: this.container,
+            locale: editor.locale,
             name: item.name,
             icon: item.icon,
             accentIcon: item.accentIcon,
@@ -6386,7 +6394,7 @@ class Toolbar {
             root: uploadNode,
             name: item.name,
             icon: item.icon,
-            tooltip: item.tooltip,
+            tooltip: typeof item.tooltip === 'string' ? item.tooltip : item.tooltip(editor.locale),
             tabIndex: -1,
             onClick: () => {
                 editor.focus();
@@ -6491,7 +6499,7 @@ class Toolbar {
                 return;
             }
             if (item.type === 'dropdown') {
-                this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems));
+                this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems, editor.locale));
                 this.dropdownItemList.push(item);
                 this.appendDropdown(editor, item);
                 return;
@@ -6683,10 +6691,10 @@ function openFullScreen(box) {
         arrowPrevSVG: icons.get('left'),
         arrowNextSVG: icons.get('right'),
         closeSVG: icons.get('close'),
-        arrowPrevTitle: locale.image.previous(),
-        arrowNextTitle: locale.image.next(),
-        closeTitle: locale.image.close(),
-        errorMsg: locale.image.loadingError(),
+        arrowPrevTitle: editor.locale.image.previous(),
+        arrowNextTitle: editor.locale.image.next(),
+        closeTitle: editor.locale.image.close(),
+        errorMsg: editor.locale.image.loadingError(),
     });
     lightbox.on('uiRegister', () => {
         const pswp = lightbox.pswp;
@@ -6694,7 +6702,7 @@ function openFullScreen(box) {
             name: 'zoom-out-button',
             order: 8,
             isButton: true,
-            title: locale.image.zoomOut(),
+            title: editor.locale.image.zoomOut(),
             html: icons.get('zoomOut'),
             onClick: () => {
                 const currSlide = pswp.currSlide;
@@ -6707,7 +6715,7 @@ function openFullScreen(box) {
             name: 'zoom-in-button',
             order: 9,
             isButton: true,
-            title: locale.image.zoomIn(),
+            title: editor.locale.image.zoomIn(),
             html: icons.get('zoomIn'),
             onClick: () => {
                 const currSlide = pswp.currSlide;
@@ -6759,6 +6767,10 @@ function removeImageBox(box) {
 // Displays error icon and filename.
 function renderError(imageNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
         const value = box.value;
         box.getContainer().css({
             width: '',
@@ -6766,7 +6778,7 @@ function renderError(imageNode, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${locale.image.remove()}"></button>
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
     </div>
   `);
         const removeButton = buttonGroupNode.find('.lake-button-remove');
@@ -6816,7 +6828,7 @@ function renderUploading(imageNode, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${locale.image.remove()}"></button>
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
     </div>
   `);
         const removeButton = buttonGroupNode.find('.lake-button-remove');
@@ -6878,8 +6890,8 @@ function renderDone(imageNode, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" tabindex="-1" class="lake-button-view" title="${locale.image.view()}"></button>
-      <button type="button" tabindex="-1" class="lake-button-remove" title="${locale.image.remove()}"></button>
+      <button type="button" tabindex="-1" class="lake-button-view" title="${editor.locale.image.view()}"></button>
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${editor.locale.image.remove()}"></button>
     </div>
   `);
         const viewButton = buttonGroupNode.find('.lake-button-view');
@@ -7130,6 +7142,7 @@ const codeBlockBox = {
             doc: (_a = boxValue.code) !== null && _a !== void 0 ? _a : '',
             extensions: [
                 EditorState.readOnly.of(editor.readonly),
+                EditorView.editable.of(!editor.readonly),
                 history(),
                 keymap.of([
                     ...defaultKeymap,
@@ -7147,7 +7160,7 @@ const codeBlockBox = {
             name: 'langType',
             downIcon: icons.get('down'),
             defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
-            tooltip: locale.codeBlock.langType(),
+            tooltip: editor.locale.codeBlock.langType(),
             width: 'auto',
             menuType: 'list',
             menuItems: langItems.map((item) => ({
@@ -7505,9 +7518,7 @@ var heading = (editor) => {
 const typeList = [
     'info',
     'tip',
-    'success',
     'warning',
-    'error',
     'danger',
 ];
 var blockQuote = (editor) => {
@@ -7975,17 +7986,18 @@ var formatPainter = (editor) => {
 };
 
 class LinkPopup {
-    constructor(root) {
+    constructor(config) {
         this.linkNode = null;
         this.event = new EventEmitter();
-        this.root = root;
+        this.root = config.root;
+        this.locale = config.locale || i18nObject('en-US');
         this.container = query(safeTemplate `
       <div class="lake-link-popup">
-        <div class="lake-row">${locale.link.url()}</div>
+        <div class="lake-row">${this.locale.link.url()}</div>
         <div class="lake-row lake-url-row">
           <input type="text" name="url" />
         </div>
-        <div class="lake-row">${locale.link.title()}</div>
+        <div class="lake-row">${this.locale.link.title()}</div>
         <div class="lake-row">
           <input type="text" name="title" />
         </div>
@@ -8020,7 +8032,7 @@ class LinkPopup {
             root: this.container.find('.lake-url-row'),
             name: 'copy',
             icon: icons.get('copy'),
-            tooltip: locale.link.copy(),
+            tooltip: this.locale.link.copy(),
             onClick: () => {
                 if (!this.linkNode) {
                     return;
@@ -8062,7 +8074,7 @@ class LinkPopup {
             root: this.container.find('.lake-url-row'),
             name: 'open',
             icon: icons.get('open'),
-            tooltip: locale.link.open(),
+            tooltip: this.locale.link.open(),
             onClick: () => {
                 if (!this.linkNode) {
                     return;
@@ -8079,7 +8091,7 @@ class LinkPopup {
             root: this.container.find('.lake-button-row'),
             name: 'save',
             icon: icons.get('check'),
-            text: locale.link.save(),
+            text: this.locale.link.save(),
             onClick: () => {
                 if (!this.linkNode) {
                     return;
@@ -8098,7 +8110,7 @@ class LinkPopup {
             root: this.container.find('.lake-button-row'),
             name: 'unlink',
             icon: icons.get('unlink'),
-            text: locale.link.unlink(),
+            text: this.locale.link.unlink(),
             onClick: () => {
                 if (!this.linkNode) {
                     return;
@@ -8204,7 +8216,10 @@ var link = (editor) => {
     if (editor.readonly) {
         return;
     }
-    const popup = new LinkPopup(editor.popupContainer);
+    const popup = new LinkPopup({
+        root: editor.popupContainer,
+        locale: editor.locale,
+    });
     popup.event.on('save', node => {
         const range = editor.selection.range;
         range.setStartAfter(node);
@@ -8244,7 +8259,7 @@ var link = (editor) => {
     });
     editor.command.add('link', {
         execute: () => {
-            const linkNode = editor.selection.insertLink(`<a href="">${locale.link.newLink()}</a>`);
+            const linkNode = editor.selection.insertLink(`<a href="">${editor.locale.link.newLink()}</a>`);
             if (!linkNode) {
                 return;
             }
@@ -8357,6 +8372,12 @@ const headingTypeMap = new Map([
     ['#####', 'h5'],
     ['######', 'h6'],
 ]);
+const shortLangTypeMap = new Map([
+    ['js', 'javascript'],
+    ['ts', 'typescript'],
+    ['md', 'markdown'],
+    ['htm', 'html'],
+]);
 const markItemList = [
     {
         re: /\*\*(.+?)\*\*$/,
@@ -8475,6 +8496,7 @@ const blockItemListForEnterKey = [
     {
         re: /^`+([a-z]*)$/i,
         getParameters: (results) => {
+            var _a;
             if (!results[1]) {
                 return [
                     'codeBlock',
@@ -8483,7 +8505,7 @@ const blockItemListForEnterKey = [
             return [
                 'codeBlock',
                 {
-                    lang: results[1],
+                    lang: (_a = shortLangTypeMap.get(results[1])) !== null && _a !== void 0 ? _a : results[1],
                 },
             ];
         },
@@ -9232,7 +9254,7 @@ var escapeKey = (editor) => {
             selection.addRangeToNativeSelection();
             return;
         }
-        if (editor.root.hasClass('lake-root-focused')) {
+        if (editor.hasFocus) {
             event.preventDefault();
             editor.blur();
         }