lakelib 0.0.1 → 0.0.3

package/lib/lake.js

@@ -3,13 +3,10 @@ import EventEmitter from 'eventemitter3';
 import debounce from 'lodash/debounce';
 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';
-import { basicSetup } from 'codemirror';
-import { EditorView, keymap } from '@codemirror/view';
-import { indentWithTab } from '@codemirror/commands';
-import { javascript } from '@codemirror/lang-javascript';
 
 class BoxElement extends HTMLElement {
 }
@@ -318,6 +315,16 @@ function denormalizeValue(value) {
         replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/ig, '<focus />');
 }
 
+// Returns the text of keyboard shortcuts used for a tooltip or help.
+// Mac: mod+Z returns ⌘+Z
+// Windows / Linux: mod+Z returns Ctrl+Z
+function modifierText(value, userAgent) {
+    userAgent = userAgent !== null && userAgent !== void 0 ? userAgent : navigator.userAgent;
+    const isMac = userAgent.indexOf('Mac OS X') >= 0;
+    const modText = isMac ? '⌘' : 'Ctrl';
+    return value.replace(/(^|\+|\s)mod(\+|\s|$)/g, `$1${modText}$2`);
+}
+
 function forEach(map, callback) {
     for (const key in map) {
         if (callback(key, map[key]) === false) {
@@ -437,7 +444,7 @@ const tableTagNames = new Set([
 
 /* eslint no-console: "off" */
 function debug(...data) {
-    if (window.DEBUG) {
+    if (window.LAKE_DEBUG) {
         console.log.apply(console.log, data);
     }
 }
@@ -965,6 +972,12 @@ class Nodes {
         const element = this.get(0);
         return element.offsetWidth;
     }
+    // Returns the interior width of the first element, which does not include padding.
+    innerWidth() {
+        const paddingLeft = parseInt(this.computedCSS('padding-left'), 10) || 0;
+        const paddingRight = parseInt(this.computedCSS('padding-right'), 10) || 0;
+        return this.width() - paddingLeft - paddingRight;
+    }
     // Returns the height of of the first element.
     height() {
         const element = this.get(0);
@@ -2738,6 +2751,7 @@ var index = /*#__PURE__*/Object.freeze({
     getDeepest: getDeepest,
     inString: inString,
     mergeNodes: mergeNodes,
+    modifierText: modifierText,
     morph: morph,
     normalizeValue: normalizeValue,
     parseStyle: parseStyle,
@@ -2901,7 +2915,7 @@ class Box {
     }
     // Returns the editor instance of the box.
     getEditor() {
-        const container = this.node.closestContainer();
+        const container = this.node.closest('div[contenteditable]');
         return container.length > 0 ? editors.get(container.id) : undefined;
     }
     // Returns the container node of the box.
@@ -2963,7 +2977,7 @@ const blockAttributeRules = {
     id: /^[\w-]+$/,
     class: /^[\w-]+$/,
     style: {
-        'text-align': ['left', 'center', 'right', 'justify'],
+        'text-align': ['left', 'center', 'right', 'justify', 'start', 'end'],
         'margin-left': /^-?\d+px$/i,
         'text-indent': /^-?\d+em$/i,
     },
@@ -3991,102 +4005,293 @@ function insertLink(range, value) {
     return linkNode;
 }
 
-var name = "lake-lib";
-var description = "Rich text editor based on the browser";
+class Button {
+    constructor(config) {
+        this.config = config;
+        this.root = config.root;
+        this.node = query(safeTemplate `
+      <button type="button" name="${config.name}" class="lake-button" />
+    `);
+        if (config.tabIndex !== undefined) {
+            this.node.attr('tabindex', config.tabIndex.toString());
+        }
+    }
+    render() {
+        const config = this.config;
+        const buttonNode = this.node;
+        buttonNode.addClass(`lake-${config.text ? 'text' : 'icon'}-button`);
+        if (config.tooltip) {
+            buttonNode.attr('title', config.tooltip);
+        }
+        if (config.icon) {
+            buttonNode.append(config.icon);
+        }
+        if (config.text) {
+            buttonNode.append(`<span>${config.text}</span>`);
+        }
+        this.root.append(buttonNode);
+        buttonNode.on('mouseenter', () => {
+            if (buttonNode.attr('disabled')) {
+                return;
+            }
+            if (buttonNode.hasClass('lake-button-selected')) {
+                return;
+            }
+            buttonNode.addClass('lake-button-hovered');
+        });
+        buttonNode.on('mouseleave', () => {
+            if (buttonNode.attr('disabled')) {
+                return;
+            }
+            buttonNode.removeClass('lake-button-hovered');
+        });
+        buttonNode.on('click', event => {
+            event.preventDefault();
+            config.onClick();
+        });
+    }
+}
+
+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.0.2";
-var author = "Luo Longhao <luolonghao@gmail.com>";
-var license = "MIT";
-var homepage = "http://lakejs.com";
-var repository = {
-	type: "git",
-	url: "git+https://github.com/lakejs/lake.git"
-};
-var main = "./lib/lake";
-var files = [
-	"dist",
-	"lib"
-];
-var keywords = [
-	"rich text",
-	"wysiwyg",
-	"editor"
-];
-var bugs = {
-	url: "https://github.com/lakejs/lake/issues"
-};
-var dependencies = {
-	"@codemirror/commands": "^6.3.3",
-	"@codemirror/lang-javascript": "^6.2.2",
-	"@codemirror/view": "^6.26.0",
-	"@types/blueimp-md5": "^2.18.2",
-	"@types/lodash": "^4.14.202",
-	"blueimp-md5": "^2.19.0",
-	codemirror: "^6.0.1",
-	eventemitter3: "^4.0.7",
-	"js-base64": "^3.7.6",
-	lodash: "^4.17.21",
-	photoswipe: "^5.4.3",
-	tinykeys: "^2.1.0"
-};
-var devDependencies = {
-	"@rollup/plugin-commonjs": "^25.0.7",
-	"@rollup/plugin-json": "^6.1.0",
-	"@rollup/plugin-node-resolve": "^15.2.3",
-	"@rollup/plugin-terser": "^0.4.4",
-	"@rollup/plugin-typescript": "^11.1.6",
-	"@types/chai": "^4.3.11",
-	"@types/mocha": "^10.0.6",
-	"@types/sinon": "^17.0.3",
-	"@typescript-eslint/eslint-plugin": "^6.21.0",
-	"@typescript-eslint/parser": "^6.21.0",
-	chai: "^4.4.1",
-	eslint: "^8.56.0",
-	"eslint-config-airbnb-base": "^15.0.0",
-	"eslint-config-prettier": "^8.10.0",
-	express: "^4.18.2",
-	mocha: "^10.3.0",
-	multer: "1.4.5-lts.1",
-	"npm-run-all": "^4.1.5",
-	puppeteer: "^22.6.1",
-	rimraf: "^5.0.5",
-	rollup: "^3.29.4",
-	"rollup-plugin-import-css": "^3.4.0",
-	"rollup-plugin-svg-import": "^3.0.0",
-	"simple-git-hooks": "^2.9.0",
-	sinon: "^17.0.1",
-	tslib: "^2.6.2",
-	typescript: "^5.3.3"
-};
-var scripts = {
-	start: "npm-run-all --parallel --print-label express watch",
-	express: "node ./scripts/start-server.mjs",
-	watch: "rollup --watch --config rollup.config.mjs",
-	build: "rimraf ./dist ./lib & rollup --config rollup.config.mjs",
-	lint: "eslint . --config .eslintrc.cjs --ext \".ts,.js,.cjs,.mjs\"",
-	test: "node ./scripts/run-tests.mjs",
-	clean: "rimraf ./dist ./lib ./temp"
-};
-var packageManager = "pnpm@8.7.5";
-var pkg = {
-	name: name,
-	description: description,
-	version: version,
-	author: author,
-	license: license,
-	homepage: homepage,
-	repository: repository,
-	main: main,
-	files: files,
-	keywords: keywords,
-	bugs: bugs,
-	dependencies: dependencies,
-	devDependencies: devDependencies,
-	scripts: scripts,
-	"simple-git-hooks": {
-	"pre-commit": "pnpm lint"
-},
-	packageManager: packageManager
-};
 
 // Inserts a box into the specified range.
 function insertBox(range, boxName, boxValue) {
@@ -4226,7 +4431,6 @@ class Selection {
         this.selection = selection;
         this.container = container;
         this.range = this.getRangeFromNativeSelection();
-        this.appliedItems = [];
     }
     // Returns the current selected range from the native selection.
     getRangeFromNativeSelection() {
@@ -4318,9 +4522,10 @@ class Selection {
 }
 
 class Command {
-    constructor() {
+    constructor(selection) {
         this.commandMap = new Map();
         this.event = new EventEmitter();
+        this.selection = selection;
     }
     add(name, handler) {
         this.commandMap.set(name, handler);
@@ -4328,13 +4533,41 @@ class Command {
     getNames() {
         return Array.from(this.commandMap.keys());
     }
-    execute(name, ...data) {
-        const handler = this.commandMap.get(name);
-        if (handler === undefined) {
+    getItem(name) {
+        const commandItem = this.commandMap.get(name);
+        if (commandItem === undefined) {
             throw new Error(`Command '${name}' does not exist.`);
         }
+        return commandItem;
+    }
+    isDisabled(name) {
+        const commandItem = this.getItem(name);
+        if (!commandItem.isDisabled) {
+            return false;
+        }
+        const appliedItems = this.selection.getAppliedItems();
+        return commandItem.isDisabled(appliedItems);
+    }
+    isSelected(name) {
+        const commandItem = this.getItem(name);
+        if (!commandItem.isSelected) {
+            return false;
+        }
+        const appliedItems = this.selection.getAppliedItems();
+        return commandItem.isSelected(appliedItems);
+    }
+    selectedValues(name) {
+        const commandItem = this.getItem(name);
+        if (!commandItem.selectedValues) {
+            return [];
+        }
+        const appliedItems = this.selection.getAppliedItems();
+        return commandItem.selectedValues(appliedItems);
+    }
+    execute(name, ...data) {
+        const commandItem = this.getItem(name);
         this.event.emit('beforeexecute', name);
-        handler.apply(this, data);
+        commandItem.execute.apply(this, data);
         this.event.emit('execute', name);
         debug(`Command '${name}' executed`);
     }
@@ -4356,13 +4589,15 @@ const boxInstances = new Map();
 // inputs 'e': value: 'abe', list: ['a', 'ab', 'abe'], index: 3, canRedo: false
 class History {
     constructor(selection) {
-        this.selection = selection;
-        this.container = selection.container;
+        // an array for storing the history items
         this.list = [];
+        // the next index of the list
         this.index = 0;
         this.canSave = true;
         this.limit = 100;
         this.event = new EventEmitter();
+        this.selection = selection;
+        this.container = selection.container;
     }
     removeBookmark(value) {
         return value.replace(/(<lake-box[^>]+)\s+focus="\w+"([^>]*>)/ig, '$1$2').
@@ -4524,9 +4759,9 @@ const shortenedTypeMap = new Map([
 ]);
 class Keystroke {
     constructor(container) {
-        this.container = container;
         this.keydownEventList = [];
         this.keyupEventList = [];
+        this.container = container;
     }
     normalizeType(type) {
         var _a;
@@ -4565,7 +4800,9 @@ class Keystroke {
         type = this.normalizeType(type);
         for (const item of this.keydownEventList) {
             if (item.type === type) {
-                item.listener(new Event(type));
+                if (item.listener(new Event(type)) === false) {
+                    break;
+                }
             }
         }
     }
@@ -4574,7 +4811,9 @@ class Keystroke {
         type = this.normalizeType(type);
         for (const item of this.keyupEventList) {
             if (item.type === type) {
-                item.listener(new Event(type));
+                if (item.listener(new Event(type)) === false) {
+                    break;
+                }
             }
         }
     }
@@ -4644,6 +4883,8 @@ const defaultConfig = {
     value: '<p><br /><focus /></p>',
     readonly: false,
     spellcheck: false,
+    tabIndex: 0,
+    indentWithTab: true,
     minChangeSize: 5,
     imageRequestMethod: 'POST',
     imageRequestAction: '/upload',
@@ -4651,34 +4892,29 @@ const defaultConfig = {
 };
 class Editor {
     constructor(config) {
-        if (!config.root) {
-            throw new Error('The root of the config must be specified.');
-        }
-        this.root = query(config.root);
-        this.config = Object.assign(Object.assign({}, defaultConfig), config);
-        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.unsavedInputData = '';
         this.isComposing = false;
-        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',
-        });
         this.event = new EventEmitter();
-        this.selection = new Selection(this.container);
-        this.command = new Command();
-        this.history = new History(this.selection);
-        this.keystroke = new Keystroke(this.container);
         this.box = Editor.box;
-        this.unsavedInputData = '';
-        editors.set(this.container.id, this);
         this.beforeunloadListener = () => {
             this.commitUnsavedInputData();
         };
-        const updateBoxSelectionStyleHandler = debounce(() => {
+        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;
@@ -4716,28 +4952,76 @@ class Editor {
                 boxContainer.removeClass('lake-box-focused');
                 boxContainer.removeClass('lake-box-selected');
             });
+            this.event.emit('boxselectionstylechange');
         }, 50, {
             leading: false,
             trailing: true,
             maxWait: 50,
         });
-        this.selectionchangeListener = () => {
-            this.selection.syncByRange();
-            this.selection.appliedItems = this.selection.getAppliedItems();
-            updateBoxSelectionStyleHandler();
-            this.event.emit('selectionchange');
-        };
-        this.clickListener = event => {
-            const targetNode = new Nodes(event.target);
-            this.event.emit('click', targetNode);
-        };
-        this.mouseoverListener = event => {
-            const targetNode = new Nodes(event.target);
-            this.event.emit('mouseover', targetNode);
-        };
-        this.resizeListener = () => {
-            this.event.emit('resize');
+        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);
+                        }
+                    }
+                }
+            }
+            this.event.emit('statechange', {
+                appliedItems,
+                disabledNameMap,
+                selectedNameMap,
+                selectedValuesMap,
+            });
+        }, 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.config = Object.assign(Object.assign({}, defaultConfig), config);
+        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;
@@ -4819,17 +5103,52 @@ class Editor {
     bindHistoryEvents() {
         this.history.event.on('undo', value => {
             this.box.renderAll(this);
-            this.event.emit('change', value);
+            this.emitChangeEvent(value);
         });
         this.history.event.on('redo', value => {
             this.box.renderAll(this);
-            this.event.emit('change', value);
+            this.emitChangeEvent(value);
         });
         this.history.event.on('save', value => {
             this.box.rectifyInstances(this);
-            this.event.emit('change', value);
+            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) {
@@ -4877,7 +5196,7 @@ class Editor {
     insertBox(boxName, boxValue) {
         const box = insertBox(this.selection.range, boxName, boxValue);
         if (!box) {
-            return box;
+            throw new Error(`Box '${boxName}' cannot be inserted outside the editor.`);
         }
         const instanceMap = this.box.getInstances(this);
         instanceMap.set(box.node.id, box);
@@ -4892,12 +5211,6 @@ class Editor {
         }
         return box;
     }
-    // Returns the interior width of the editor area, which does not include padding.
-    innerWidth() {
-        const paddingLeft = parseInt(this.container.computedCSS('padding-left'), 10) || 0;
-        const paddingRight = parseInt(this.container.computedCSS('padding-right'), 10) || 0;
-        return this.container.width() - paddingLeft - paddingRight;
-    }
     // Renders an editor area and set default value to it.
     render() {
         const value = normalizeValue(this.config.value);
@@ -4910,11 +5223,12 @@ class Editor {
         query(document.body).append(this.popupContainer);
         this.container.append(fragment);
         if (!this.readonly) {
+            this.bindFocusEvents();
             this.focus();
             this.selection.synByBookmark();
             this.history.save();
+            Editor.plugin.loadAll(this);
         }
-        Editor.plugin.loadAll(this);
         Editor.box.renderAll(this);
         if (!this.readonly) {
             window.addEventListener('beforeunload', this.beforeunloadListener);
@@ -4923,7 +5237,6 @@ class Editor {
             this.bindHistoryEvents();
         }
         document.addEventListener('click', this.clickListener);
-        document.addEventListener('mouseover', this.mouseoverListener);
         window.addEventListener('resize', this.resizeListener);
     }
     // Destroys a rendered editor.
@@ -4935,93 +5248,403 @@ class Editor {
             document.removeEventListener('selectionchange', this.selectionchangeListener);
         }
         document.removeEventListener('click', this.clickListener);
-        document.removeEventListener('mouseover', this.mouseoverListener);
         window.removeEventListener('resize', this.resizeListener);
     }
 }
-Editor.version = pkg.version;
+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: '코드언어 선택',
+    },
+};
+
+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;
+    }
+    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);
+
 const headingMenuItems = [
     {
         value: 'h1',
-        text: '<span style="font-weight: bold; font-size: 26px;">Heading 1</span>',
+        text: `<span style="font-weight: bold; font-size: 26px;">${locale.toolbar.heading1()}</span>`,
     },
     {
         value: 'h2',
-        text: '<span style="font-weight: bold; font-size: 24px;">Heading 2</span>',
+        text: `<span style="font-weight: bold; font-size: 24px;">${locale.toolbar.heading2()}</span>`,
     },
     {
         value: 'h3',
-        text: '<span style="font-weight: bold; font-size: 22px;">Heading 3</span>',
+        text: `<span style="font-weight: bold; font-size: 22px;">${locale.toolbar.heading3()}</span>`,
     },
     {
         value: 'h4',
-        text: '<span style="font-weight: bold; font-size: 20px;">Heading 4</span>',
+        text: `<span style="font-weight: bold; font-size: 20px;">${locale.toolbar.heading4()}</span>`,
     },
     {
         value: 'h5',
-        text: '<span style="font-weight: bold; font-size: 18px;">Heading 5</span>',
+        text: `<span style="font-weight: bold; font-size: 18px;">${locale.toolbar.heading5()}</span>`,
     },
     {
         value: 'h6',
-        text: '<span style="font-weight: bold; font-size: 16px;">Heading 6</span>',
+        text: `<span style="font-weight: bold; font-size: 16px;">${locale.toolbar.heading6()}</span>`,
     },
     {
         value: 'p',
-        text: 'Paragraph',
+        text: locale.toolbar.paragraph(),
     },
 ];
 const listMenuItems = [
     {
         icon: icons.get('numberedList'),
         value: 'numbered',
-        text: 'Numbered list',
+        text: locale.toolbar.numberedList(),
     },
     {
         icon: icons.get('bulletedList'),
         value: 'bulleted',
-        text: 'Bulleted list',
+        text: locale.toolbar.bulletedList(),
     },
     {
         icon: icons.get('checklist'),
         value: 'checklist',
-        text: 'Checklist',
+        text: locale.toolbar.checklist(),
     },
 ];
 const alignMenuItems = [
     {
         icon: icons.get('alignLeft'),
         value: 'left',
-        text: 'Align left',
+        text: locale.toolbar.alignLeft(),
     },
     {
         icon: icons.get('alignCenter'),
         value: 'center',
-        text: 'Align center',
+        text: locale.toolbar.alignCenter(),
     },
     {
         icon: icons.get('alignRight'),
         value: 'right',
-        text: 'Align right',
+        text: locale.toolbar.alignRight(),
     },
     {
         icon: icons.get('alignJustify'),
         value: 'justify',
-        text: 'Align justify',
+        text: locale.toolbar.alignJustify(),
     },
 ];
 const indentMenuItems = [
     {
         icon: icons.get('increaseIndent'),
         value: 'increase',
-        text: 'Increase indent',
+        text: locale.toolbar.increaseIndent(),
     },
     {
         icon: icons.get('decreaseIndent'),
         value: 'decrease',
-        text: 'Decrease indent',
+        text: locale.toolbar.decreaseIndent(),
     },
 ];
 const fontFamilyMenuItems = [
@@ -5108,32 +5731,32 @@ const moreStyleMenuItems = [
     {
         icon: icons.get('italic'),
         value: 'italic',
-        text: 'Italic',
+        text: locale.toolbar.italic(),
     },
     {
         icon: icons.get('underline'),
         value: 'underline',
-        text: 'Underline',
+        text: locale.toolbar.underline(),
     },
     {
         icon: icons.get('strikethrough'),
         value: 'strikethrough',
-        text: 'Strikethrough',
+        text: locale.toolbar.strikethrough(),
     },
     {
         icon: icons.get('superscript'),
         value: 'superscript',
-        text: 'Superscript',
+        text: locale.toolbar.superscript(),
     },
     {
         icon: icons.get('subscript'),
         value: 'subscript',
-        text: 'Subscript',
+        text: locale.toolbar.subscript(),
     },
     {
         icon: icons.get('code'),
         value: 'code',
-        text: 'Code',
+        text: locale.toolbar.code(),
     },
 ];
 // These colors are from Ant Design (https://ant.design/docs/spec/colors)
@@ -5156,7 +5779,7 @@ const colorMenuItems = [
     {
         icon: icons.get('removeFormat'),
         value: '',
-        text: 'Remove color',
+        text: locale.toolbar.removeColor(),
     },
 ];
 for (const color of colors) {
@@ -5181,7 +5804,7 @@ const toolbarItems = [
         name: 'undo',
         type: 'button',
         icon: icons.get('undo'),
-        tooltip: 'Undo',
+        tooltip: locale.toolbar.undo(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5190,7 +5813,7 @@ const toolbarItems = [
         name: 'redo',
         type: 'button',
         icon: icons.get('redo'),
-        tooltip: 'Redo',
+        tooltip: locale.toolbar.redo(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5199,7 +5822,7 @@ const toolbarItems = [
         name: 'selectAll',
         type: 'button',
         icon: icons.get('selectAll'),
-        tooltip: 'Select all',
+        tooltip: locale.toolbar.selectAll(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5208,7 +5831,7 @@ const toolbarItems = [
         name: 'paragraph',
         type: 'button',
         icon: icons.get('paragraph'),
-        tooltip: 'Paragraph',
+        tooltip: locale.toolbar.paragraph(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'p'),
         onClick: editor => {
             editor.command.execute('heading', 'p');
@@ -5218,8 +5841,7 @@ const toolbarItems = [
         name: 'blockQuote',
         type: 'button',
         icon: icons.get('blockQuote'),
-        tooltip: 'Block quotation',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'blockquote'),
+        tooltip: locale.toolbar.blockQuote(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5228,7 +5850,7 @@ const toolbarItems = [
         name: 'numberedList',
         type: 'button',
         icon: icons.get('numberedList'),
-        tooltip: 'Numbered list',
+        tooltip: locale.toolbar.numberedList(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ol'),
         onClick: editor => {
             editor.command.execute('list', 'numbered');
@@ -5238,7 +5860,7 @@ const toolbarItems = [
         name: 'bulletedList',
         type: 'button',
         icon: icons.get('bulletedList'),
-        tooltip: 'Bulleted list',
+        tooltip: locale.toolbar.bulletedList(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ul' && !item.node.hasAttr('type')),
         onClick: editor => {
             editor.command.execute('list', 'bulleted');
@@ -5248,7 +5870,7 @@ const toolbarItems = [
         name: 'checklist',
         type: 'button',
         icon: icons.get('checklist'),
-        tooltip: 'Checklist',
+        tooltip: locale.toolbar.checklist(),
         isSelected: appliedItems => !!appliedItems.find(item => item.name === 'ul' && item.node.attr('type') === 'checklist'),
         onClick: editor => {
             editor.command.execute('list', 'checklist');
@@ -5258,7 +5880,7 @@ const toolbarItems = [
         name: 'alignLeft',
         type: 'button',
         icon: icons.get('alignLeft'),
-        tooltip: 'Align left',
+        tooltip: locale.toolbar.alignLeft(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'left'),
         onClick: editor => {
             editor.command.execute('align', 'left');
@@ -5268,7 +5890,7 @@ const toolbarItems = [
         name: 'alignCenter',
         type: 'button',
         icon: icons.get('alignCenter'),
-        tooltip: 'Align center',
+        tooltip: locale.toolbar.alignCenter(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'center'),
         onClick: editor => {
             editor.command.execute('align', 'center');
@@ -5278,7 +5900,7 @@ const toolbarItems = [
         name: 'alignRight',
         type: 'button',
         icon: icons.get('alignRight'),
-        tooltip: 'Align right',
+        tooltip: locale.toolbar.alignRight(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'right'),
         onClick: editor => {
             editor.command.execute('align', 'right');
@@ -5288,7 +5910,7 @@ const toolbarItems = [
         name: 'alignJustify',
         type: 'button',
         icon: icons.get('alignJustify'),
-        tooltip: 'Align justify',
+        tooltip: locale.toolbar.alignJustify(),
         isSelected: appliedItems => !!appliedItems.find(item => item.node.isBlock && item.node.css('text-align') === 'justify'),
         onClick: editor => {
             editor.command.execute('align', 'justify');
@@ -5298,7 +5920,7 @@ const toolbarItems = [
         name: 'increaseIndent',
         type: 'button',
         icon: icons.get('increaseIndent'),
-        tooltip: 'Increase indent',
+        tooltip: locale.toolbar.increaseIndent(),
         onClick: editor => {
             editor.command.execute('indent', 'increase');
         },
@@ -5307,7 +5929,7 @@ const toolbarItems = [
         name: 'decreaseIndent',
         type: 'button',
         icon: icons.get('decreaseIndent'),
-        tooltip: 'Decrease indent',
+        tooltip: locale.toolbar.decreaseIndent(),
         onClick: editor => {
             editor.command.execute('indent', 'decrease');
         },
@@ -5316,9 +5938,7 @@ const toolbarItems = [
         name: 'bold',
         type: 'button',
         icon: icons.get('bold'),
-        tooltip: 'Bold',
-        isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'strong'),
+        tooltip: locale.toolbar.bold(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5327,8 +5947,7 @@ const toolbarItems = [
         name: 'italic',
         type: 'button',
         icon: icons.get('italic'),
-        tooltip: 'Italic',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'i'),
+        tooltip: locale.toolbar.italic(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5337,8 +5956,7 @@ const toolbarItems = [
         name: 'underline',
         type: 'button',
         icon: icons.get('underline'),
-        tooltip: 'Underline',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'u'),
+        tooltip: locale.toolbar.underline(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5347,8 +5965,7 @@ const toolbarItems = [
         name: 'strikethrough',
         type: 'button',
         icon: icons.get('strikethrough'),
-        tooltip: 'Strikethrough',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 's'),
+        tooltip: locale.toolbar.strikethrough(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5357,8 +5974,7 @@ const toolbarItems = [
         name: 'superscript',
         type: 'button',
         icon: icons.get('superscript'),
-        tooltip: 'Superscript',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'sup'),
+        tooltip: locale.toolbar.superscript(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5367,8 +5983,7 @@ const toolbarItems = [
         name: 'subscript',
         type: 'button',
         icon: icons.get('subscript'),
-        tooltip: 'Subscript',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'sub'),
+        tooltip: locale.toolbar.subscript(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5377,8 +5992,7 @@ const toolbarItems = [
         name: 'code',
         type: 'button',
         icon: icons.get('code'),
-        tooltip: 'Inline code',
-        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'code'),
+        tooltip: locale.toolbar.code(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5387,7 +6001,7 @@ const toolbarItems = [
         name: 'removeFormat',
         type: 'button',
         icon: icons.get('removeFormat'),
-        tooltip: 'Remove format',
+        tooltip: locale.toolbar.removeFormat(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5396,7 +6010,7 @@ const toolbarItems = [
         name: 'formatPainter',
         type: 'button',
         icon: icons.get('formatPainter'),
-        tooltip: 'Format painter',
+        tooltip: locale.toolbar.formatPainter(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5405,7 +6019,7 @@ const toolbarItems = [
         name: 'link',
         type: 'button',
         icon: icons.get('link'),
-        tooltip: 'Link',
+        tooltip: locale.toolbar.link(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5414,7 +6028,7 @@ const toolbarItems = [
         name: 'hr',
         type: 'button',
         icon: icons.get('hr'),
-        tooltip: 'Horizontal line',
+        tooltip: locale.toolbar.hr(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5423,7 +6037,7 @@ const toolbarItems = [
         name: 'codeBlock',
         type: 'button',
         icon: icons.get('codeBlock'),
-        tooltip: 'Code block',
+        tooltip: locale.toolbar.codeBlock(),
         onClick: (editor, value) => {
             editor.command.execute(value);
         },
@@ -5433,14 +6047,10 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: 'p',
-        tooltip: 'Heading',
+        tooltip: locale.toolbar.heading(),
         width: '100px',
         menuType: 'list',
         menuItems: headingMenuItems,
-        selectedValues: appliedItems => {
-            const currentItem = appliedItems.find(item => item.node.isHeading || item.name === 'p');
-            return currentItem ? [currentItem.name] : [];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('heading', value);
         },
@@ -5451,28 +6061,10 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('list'),
         defaultValue: '',
-        tooltip: 'List',
+        tooltip: locale.toolbar.list(),
         width: 'auto',
         menuType: 'list',
         menuItems: listMenuItems,
-        selectedValues: appliedItems => {
-            let currentValue = '';
-            for (const item of appliedItems) {
-                if (item.name === 'ol') {
-                    currentValue = 'numbered';
-                    break;
-                }
-                if (item.name === 'ul' && !item.node.hasAttr('type')) {
-                    currentValue = 'bulleted';
-                    break;
-                }
-                if (item.name === 'ul' && item.node.attr('type') === 'checklist') {
-                    currentValue = 'checklist';
-                    break;
-                }
-            }
-            return [currentValue];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('list', value);
         },
@@ -5483,20 +6075,10 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('alignLeft'),
         defaultValue: '',
-        tooltip: 'Alignment',
+        tooltip: locale.toolbar.align(),
         width: 'auto',
         menuType: 'list',
         menuItems: alignMenuItems,
-        selectedValues: appliedItems => {
-            let currentValue = '';
-            for (const item of appliedItems) {
-                if (item.node.isBlock) {
-                    currentValue = item.node.computedCSS('text-align');
-                    break;
-                }
-            }
-            return [currentValue];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('align', value);
         },
@@ -5507,7 +6089,7 @@ const toolbarItems = [
         downIcon: icons.get('down'),
         icon: icons.get('increaseIndent'),
         defaultValue: '',
-        tooltip: 'Indent',
+        tooltip: locale.toolbar.indent(),
         width: 'auto',
         menuType: 'list',
         menuItems: indentMenuItems,
@@ -5520,19 +6102,10 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: 'Segoe UI',
-        tooltip: 'Font family',
+        tooltip: locale.toolbar.fontFamily(),
         width: '100px',
         menuType: 'list',
         menuItems: fontFamilyMenuItems,
-        selectedValues: appliedItems => {
-            for (const item of appliedItems) {
-                if (item.name === 'span') {
-                    const currentValue = item.node.css('font-family');
-                    return [currentValue.replace(/['"]/g, '')];
-                }
-            }
-            return [];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('fontFamily', value);
         },
@@ -5542,20 +6115,10 @@ const toolbarItems = [
         type: 'dropdown',
         downIcon: icons.get('down'),
         defaultValue: '16px',
-        tooltip: 'Font size',
+        tooltip: locale.toolbar.fontSize(),
         width: '65px',
         menuType: 'list',
         menuItems: fontSizeMenuItems,
-        isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
-        selectedValues: appliedItems => {
-            for (const item of appliedItems) {
-                if (item.name === 'span') {
-                    const currentValue = item.node.css('font-size');
-                    return [currentValue.replace(/\.\d+/, '')];
-                }
-            }
-            return [];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('fontSize', value);
         },
@@ -5565,7 +6128,7 @@ const toolbarItems = [
         type: 'dropdown',
         icon: icons.get('more'),
         defaultValue: '',
-        tooltip: 'More style',
+        tooltip: locale.toolbar.moreStyle(),
         width: 'auto',
         menuType: 'list',
         menuItems: moreStyleMenuItems,
@@ -5591,19 +6154,10 @@ const toolbarItems = [
         icon: icons.get('fontColor'),
         accentIcon: icons.get('fontColorAccent'),
         defaultValue: '#f5222d',
-        tooltip: 'Font color',
+        tooltip: locale.toolbar.fontColor(),
         width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
-        selectedValues: appliedItems => {
-            for (const item of appliedItems) {
-                if (item.name === 'span') {
-                    const currentValue = item.node.computedCSS('color');
-                    return [toHex(currentValue)];
-                }
-            }
-            return [];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('fontColor', value);
         },
@@ -5615,19 +6169,10 @@ const toolbarItems = [
         icon: icons.get('highlight'),
         accentIcon: icons.get('highlightAccent'),
         defaultValue: '#fadb14',
-        tooltip: 'Highlight',
+        tooltip: locale.toolbar.highlight(),
         width: 'auto',
         menuType: 'color',
         menuItems: colorMenuItems,
-        selectedValues: appliedItems => {
-            for (const item of appliedItems) {
-                if (item.name === 'span') {
-                    const currentValue = item.node.computedCSS('background-color');
-                    return [toHex(currentValue)];
-                }
-            }
-            return [];
-        },
         onSelect: (editor, value) => {
             editor.command.execute('highlight', value);
         },
@@ -5636,7 +6181,7 @@ const toolbarItems = [
         name: 'image',
         type: 'upload',
         icon: icons.get('image'),
-        tooltip: 'Image',
+        tooltip: locale.toolbar.image(),
         accept: 'image/*',
         multiple: true,
     },
@@ -5656,9 +6201,6 @@ function uploadImage(config) {
         type: file.type,
         lastModified: file.lastModified,
     });
-    if (!box) {
-        throw new Error('The image box cannot be inserted outside the editor.');
-    }
     const xhr = request({
         onProgress: e => {
             const percentNode = box.node.find('.lake-percent');
@@ -5731,306 +6273,136 @@ class Toolbar {
         this.items = config.items || defaultItems;
         this.editor = config.editor;
         this.root = query(config.root);
-        this.event = new EventEmitter();
-    }
-    // Returns the value of the node.
-    getValue(node) {
-        const value = node.attr('value');
-        if (value === '') {
-            return [];
-        }
-        return JSON.parse(Base64.decode(value));
-    }
-    // Updates the value of the node.
-    setValue(node, value) {
-        node.attr('value', Base64.encode(JSON.stringify(value)));
+        this.container = query('<div class="lake-toolbar" />');
+        this.root.addClass('lake-custom-properties');
     }
     appendDivider() {
-        this.root.append('<div class="lake-toolbar-divider" />');
+        this.container.append('<div class="lake-toolbar-divider" />');
     }
     appendButton(item) {
         const editor = this.editor;
-        const buttonNode = query('<button type="button" class="lake-toolbar-button" />');
-        buttonNode.attr('name', item.name);
-        buttonNode.attr('title', item.tooltip);
-        if (item.icon) {
-            buttonNode.append(item.icon);
-        }
-        this.root.append(buttonNode);
-        buttonNode.on('mouseenter', () => {
-            if (buttonNode.attr('disabled')) {
-                return;
-            }
-            buttonNode.addClass('lake-toolbar-button-hovered');
-        });
-        buttonNode.on('mouseleave', () => {
-            if (buttonNode.attr('disabled')) {
-                return;
-            }
-            buttonNode.removeClass('lake-toolbar-button-hovered');
-        });
-        buttonNode.on('click', event => {
-            event.preventDefault();
-            editor.focus();
-            item.onClick(editor, item.name);
+        const button = new Button({
+            root: this.container,
+            name: item.name,
+            icon: item.icon,
+            tooltip: item.tooltip,
+            tabIndex: -1,
+            onClick: () => {
+                editor.focus();
+                item.onClick(editor, item.name);
+            },
         });
+        button.render();
     }
-    getMenuMap(item) {
-        const menuMap = new Map();
-        if (!item.menuItems) {
-            return menuMap;
-        }
-        for (const menuItem of item.menuItems) {
-            // remove HTML tags
-            const text = menuItem.text.replace(/<[^>]*>/g, '');
-            menuMap.set(menuItem.value, text);
-        }
-        return menuMap;
+    appendDropdown(item) {
+        const editor = this.editor;
+        const dropdown = new Dropdown({
+            root: this.container,
+            name: item.name,
+            icon: item.icon,
+            accentIcon: item.accentIcon,
+            downIcon: item.downIcon,
+            defaultValue: item.defaultValue,
+            tooltip: item.tooltip,
+            width: item.width,
+            menuType: item.menuType,
+            menuItems: item.menuItems,
+            tabIndex: -1,
+            onSelect: value => {
+                editor.focus();
+                item.onSelect(editor, value);
+            },
+        });
+        dropdown.render();
     }
-    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);
+    appendUpload(item) {
+        const editor = this.editor;
+        const uploadNode = query(safeTemplate `
+      <div class="lake-upload" name="${item.name}">
+        <input type="file" />
+      </div>
+    `);
+        const fileNode = uploadNode.find('input[type="file"]');
+        const fileNativeNode = fileNode.get(0);
+        if (item.accept) {
+            fileNode.attr('accept', item.accept);
         }
-        else {
-            svgNode.find('path').attr('fill', value);
+        if (item.multiple === true) {
+            fileNode.attr('multiple', 'true');
         }
-    }
-    addDropdownMenu(menuNode, item) {
-        for (const menuItem of item.menuItems) {
-            const listContent = template `
-        <li value="${menuItem.value}">
-          <div class="lake-dropdown-menu-text">${menuItem.text}</div>
-        </li>
-      `;
-            const listNode = query(listContent);
-            menuNode.append(listNode);
-            if (item.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);
+        const button = new Button({
+            root: uploadNode,
+            name: item.name,
+            icon: item.icon,
+            tooltip: item.tooltip,
+            tabIndex: -1,
+            onClick: () => {
+                editor.focus();
+                fileNativeNode.click();
+            },
+        });
+        button.render();
+        this.container.append(uploadNode);
+        fileNode.on('click', event => event.stopPropagation());
+        fileNode.on('change', event => {
+            const target = event.target;
+            const files = target.files || [];
+            for (const file of files) {
+                uploadImage({
+                    editor,
+                    file,
+                });
             }
-        }
+        });
     }
-    bindDropdownEvents(dropdownNode, item) {
+    // Renders a toolbar for the specified editor.
+    render() {
         const editor = this.editor;
-        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 (item.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 (item.menuType === 'color') {
-            iconNode.on('click', event => {
-                event.preventDefault();
-                if (dropdownNode.attr('disabled')) {
-                    return;
-                }
-                editor.focus();
-                const value = dropdownNode.attr('color') || item.defaultValue;
-                item.onSelect(editor, value);
-            });
-        }
-        const triggerNode = (item.menuType === 'color' && downIconNode) ? downIconNode : titleNode;
-        triggerNode.on('click', event => {
-            event.preventDefault();
-            if (dropdownNode.attr('disabled')) {
+        this.root.empty();
+        this.root.append(this.container);
+        const allMenuMap = new Map();
+        const buttonItemList = [];
+        const dropdownItemList = [];
+        this.items.forEach(name => {
+            if (name === '|') {
+                this.appendDivider();
                 return;
             }
-            const currentValues = this.getValue(dropdownNode);
-            menuNode.find('.lake-dropdown-menu-check').css('visibility', 'hidden');
-            menuNode.find('li').each(node => {
-                const listNode = query(node);
-                if (currentValues.indexOf(listNode.attr('value')) >= 0) {
-                    listNode.find('.lake-dropdown-menu-check').css('visibility', 'visible');
+            let item;
+            if (typeof name === 'string') {
+                item = toolbarItemMap.get(name);
+                if (!item) {
+                    return;
                 }
-            });
-            menuNode.css('visibility', 'hidden');
-            menuNode.show(item.menuType === 'color' ? 'flex' : 'block');
-            const dropdownNativeNode = dropdownNode.get(0);
-            const dropdownRect = dropdownNativeNode.getBoundingClientRect();
-            if (dropdownRect.x + menuNode.width() > window.innerWidth) {
-                menuNode.css('left', 'auto');
-                menuNode.css('right', '0');
             }
             else {
-                menuNode.css('left', '');
-                menuNode.css('right', '');
-            }
-            menuNode.css('visibility', '');
-        });
-        menuNode.on('click', event => {
-            event.preventDefault();
-            editor.focus();
-            const listItem = query(event.target).closest('li');
-            const value = listItem.attr('value');
-            if (textNode.length > 0) {
-                textNode.text(listItem.text());
+                item = name;
             }
-            if (item.menuType === 'color' && value !== '') {
-                dropdownNode.attr('color', value);
-                this.updateColorAccent(titleNode, value);
+            if (item.type === 'button') {
+                buttonItemList.push(item);
+                this.appendButton(item);
+                return;
             }
-            item.onSelect(editor, value);
-        });
-        editor.event.on('click', target => {
-            if (target.closest('.lake-dropdown-title').get(0) === titleNode.get(0)) {
+            if (item.type === 'dropdown') {
+                allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems));
+                dropdownItemList.push(item);
+                this.appendDropdown(item);
                 return;
             }
-            menuNode.hide();
-        });
-    }
-    appendDropdown(item) {
-        var _a;
-        const menuMap = this.getMenuMap(item);
-        const dropdownNode = item.icon ? query(safeTemplate `
-      <div class="lake-dropdown">
-        <button type="button" class="lake-dropdown-title">
-          <div class="lake-dropdown-icon"></div>
-          <div class="lake-dropdown-down-icon"></div>
-        </button>
-      </div>
-    `) : query(safeTemplate `
-      <div class="lake-dropdown">
-        <button type="button" class="lake-dropdown-title">
-          <div class="lake-dropdown-text"></div>
-          <div class="lake-dropdown-down-icon"></div>
-        </button>
-      </div>
-    `);
-        dropdownNode.attr('name', item.name);
-        dropdownNode.addClass(`lake-dropdown-${item.menuType}`);
-        const titleNode = dropdownNode.find('.lake-dropdown-title');
-        if (!item.downIcon) {
-            titleNode.addClass('lake-dropdown-title-no-down');
-        }
-        titleNode.css('width', item.width);
-        titleNode.attr('title', item.tooltip);
-        const textNode = titleNode.find('.lake-dropdown-text');
-        const iconNode = titleNode.find('.lake-dropdown-icon');
-        if (item.icon) {
-            iconNode.append(item.icon);
-        }
-        if (item.accentIcon) {
-            iconNode.append(item.accentIcon);
-        }
-        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
-        if (item.downIcon) {
-            downIconNode.append(item.downIcon);
-        }
-        const menuNode = query('<ul class="lake-dropdown-menu" />');
-        menuNode.addClass(`lake-dropdown-${item.menuType}-menu`);
-        if (textNode.length > 0) {
-            textNode.text((_a = menuMap.get(item.defaultValue)) !== null && _a !== void 0 ? _a : item.defaultValue);
-        }
-        if (item.menuType === 'color') {
-            this.updateColorAccent(titleNode, item.defaultValue);
-        }
-        this.addDropdownMenu(menuNode, item);
-        dropdownNode.append(titleNode);
-        dropdownNode.append(menuNode);
-        this.root.append(dropdownNode);
-        this.bindDropdownEvents(dropdownNode, item);
-    }
-    appendUpload(item) {
-        const editor = this.editor;
-        const uploadNode = query(safeTemplate `
-      <div class="lake-upload">
-        <input type="file" />
-        <button type="button" class="lake-toolbar-button" />
-      </div>
-    `);
-        const fileNode = uploadNode.find('input[type="file"]');
-        const fileNativeNode = fileNode.get(0);
-        if (item.accept) {
-            fileNode.attr('accept', item.accept);
-        }
-        if (item.multiple === true) {
-            fileNode.attr('multiple', 'true');
-        }
-        const buttonNode = uploadNode.find('button');
-        buttonNode.attr('name', item.name);
-        buttonNode.attr('title', item.tooltip);
-        if (item.icon) {
-            buttonNode.append(item.icon);
-        }
-        this.root.append(uploadNode);
-        buttonNode.on('mouseenter', () => {
-            buttonNode.addClass('lake-toolbar-button-hovered');
-        });
-        buttonNode.on('mouseleave', () => {
-            buttonNode.removeClass('lake-toolbar-button-hovered');
-        });
-        buttonNode.on('click', event => {
-            event.preventDefault();
-            fileNativeNode.click();
-        });
-        fileNode.on('click', event => event.stopPropagation());
-        fileNode.on('change', event => {
-            const target = event.target;
-            const files = target.files || [];
-            for (const file of files) {
-                uploadImage({
-                    editor,
-                    file,
-                });
+            if (item.type === 'upload') {
+                this.appendUpload(item);
             }
         });
-    }
-    getUpdateStateHandler(config) {
-        const { editor, allMenuMap, buttonItemList, dropdownItemList } = config;
-        return debounce(() => {
+        editor.event.on('statechange', data => {
             var _a;
-            let appliedItems = editor.selection.appliedItems;
-            if (appliedItems.length > 0 &&
-                appliedItems[0].node.closestContainer().get(0) !== editor.container.get(0)) {
-                appliedItems = [];
-            }
+            const { appliedItems, disabledNameMap, selectedNameMap, selectedValuesMap } = data;
             for (const item of buttonItemList) {
-                const selectedClass = 'lake-toolbar-button-selected';
-                const buttonNode = this.root.find(`button[name="${item.name}"]`);
-                const isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems, editor) : false;
+                const selectedClass = 'lake-button-selected';
+                const buttonNode = this.container.find(`button[name="${item.name}"]`);
+                let isDisabled = disabledNameMap.get(item.name);
+                if (isDisabled === undefined) {
+                    isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
+                }
                 if (isDisabled) {
                     buttonNode.attr('disabled', 'true');
                     buttonNode.removeClass(selectedClass);
@@ -6039,7 +6411,10 @@ class Toolbar {
                     buttonNode.removeAttr('disabled');
                 }
                 if (!isDisabled) {
-                    const isSelected = item.isSelected && appliedItems.length > 0 ? item.isSelected(appliedItems, editor) : false;
+                    let isSelected = selectedNameMap.get(item.name);
+                    if (isSelected === undefined) {
+                        isSelected = item.isSelected && appliedItems.length > 0 ? item.isSelected(appliedItems) : false;
+                    }
                     if (isSelected) {
                         buttonNode.addClass(selectedClass);
                     }
@@ -6049,9 +6424,15 @@ class Toolbar {
                 }
             }
             for (const item of dropdownItemList) {
-                const selectedValues = item.selectedValues && appliedItems.length > 0 ? item.selectedValues(appliedItems, editor) : [];
-                const dropdownNode = this.root.find(`div.lake-dropdown[name="${item.name}"]`);
-                const isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems, editor) : false;
+                let selectedValues = selectedValuesMap.get(item.name);
+                if (selectedValues === undefined) {
+                    selectedValues = item.selectedValues && appliedItems.length > 0 ? item.selectedValues(appliedItems) : [];
+                }
+                const dropdownNode = this.container.find(`div.lake-dropdown[name="${item.name}"]`);
+                let isDisabled = disabledNameMap.get(item.name);
+                if (isDisabled === undefined) {
+                    isDisabled = item.isDisabled && appliedItems.length > 0 ? item.isDisabled(appliedItems) : false;
+                }
                 if (isDisabled) {
                     dropdownNode.attr('disabled', 'true');
                 }
@@ -6059,7 +6440,7 @@ class Toolbar {
                     dropdownNode.removeAttr('disabled');
                 }
                 if (!isDisabled) {
-                    this.setValue(dropdownNode, selectedValues);
+                    Dropdown.setValue(dropdownNode, selectedValues);
                     const textNode = dropdownNode.find('.lake-dropdown-text');
                     if (textNode.length > 0) {
                         const key = selectedValues[0] || item.defaultValue;
@@ -6069,57 +6450,7 @@ class Toolbar {
                     }
                 }
             }
-            this.event.emit('updatestate');
-        }, 100, {
-            leading: false,
-            trailing: true,
-            maxWait: 100,
-        });
-    }
-    render() {
-        const editor = this.editor;
-        this.root.addClass('lake-custom-properties');
-        const allMenuMap = new Map();
-        const buttonItemList = [];
-        const dropdownItemList = [];
-        this.items.forEach(name => {
-            if (name === '|') {
-                this.appendDivider();
-                return;
-            }
-            let item;
-            if (typeof name === 'string') {
-                item = toolbarItemMap.get(name);
-                if (!item) {
-                    return;
-                }
-            }
-            else {
-                item = name;
-            }
-            if (item.type === 'button') {
-                buttonItemList.push(item);
-                this.appendButton(item);
-                return;
-            }
-            if (item.type === 'dropdown') {
-                allMenuMap.set(item.name, this.getMenuMap(item));
-                dropdownItemList.push(item);
-                this.appendDropdown(item);
-                return;
-            }
-            if (item.type === 'upload') {
-                this.appendUpload(item);
-            }
         });
-        const updateStateHandler = this.getUpdateStateHandler({
-            editor,
-            allMenuMap,
-            buttonItemList,
-            dropdownItemList,
-        });
-        editor.event.on('selectionchange', updateStateHandler);
-        editor.event.on('change', updateStateHandler);
     }
 }
 
@@ -6132,8 +6463,8 @@ const hrBox = {
             return;
         }
         box.useEffect(() => {
-            const root = box.getContainer().find('.lake-hr');
-            root.on('click', () => {
+            const hrNode = box.getContainer().find('.lake-hr');
+            hrNode.on('click', () => {
                 editor.selection.range.selectBox(box.node);
             });
         });
@@ -6302,10 +6633,10 @@ function openFullScreen(box) {
         arrowPrevSVG: icons.get('left'),
         arrowNextSVG: icons.get('right'),
         closeSVG: icons.get('close'),
-        arrowPrevTitle: 'Previous',
-        arrowNextTitle: 'Next',
-        closeTitle: 'Close (Esc)',
-        errorMsg: 'The image cannot be loaded',
+        arrowPrevTitle: locale.image.previous(),
+        arrowNextTitle: locale.image.next(),
+        closeTitle: locale.image.close(),
+        errorMsg: locale.image.loadingError(),
     });
     lightbox.on('uiRegister', () => {
         const pswp = lightbox.pswp;
@@ -6313,7 +6644,7 @@ function openFullScreen(box) {
             name: 'zoom-out-button',
             order: 8,
             isButton: true,
-            title: 'Zoom out',
+            title: locale.image.zoomOut(),
             html: icons.get('zoomOut'),
             onClick: () => {
                 const currSlide = pswp.currSlide;
@@ -6326,7 +6657,7 @@ function openFullScreen(box) {
             name: 'zoom-in-button',
             order: 9,
             isButton: true,
-            title: 'Zoom in',
+            title: locale.image.zoomIn(),
             html: icons.get('zoomIn'),
             onClick: () => {
                 const currSlide = pswp.currSlide;
@@ -6371,7 +6702,7 @@ function removeImageBox(box) {
     editor.history.save();
 }
 // Displays error icon and filename.
-function renderError(root, box) {
+function renderError(imageNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const value = box.value;
         box.getContainer().css({
@@ -6380,7 +6711,7 @@ function renderError(root, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" class="lake-button-remove" title="Delete"></button>
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${locale.image.remove()}"></button>
     </div>
   `);
         const removeButton = buttonGroupNode.find('.lake-button-remove');
@@ -6398,12 +6729,12 @@ function renderError(root, box) {
         if (imageIcon) {
             errorNode.find('.lake-error-icon').append(imageIcon);
         }
-        root.append(buttonGroupNode);
-        root.append(errorNode);
+        imageNode.append(buttonGroupNode);
+        imageNode.append(errorNode);
     });
 }
 // Displays an image with uplaoding progress.
-function renderUploading(root, box) {
+function renderUploading(imageNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -6412,10 +6743,10 @@ function renderUploading(root, box) {
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(root, box);
+            yield renderError(imageNode, box);
             return;
         }
-        const maxWidth = editor.innerWidth() - 2;
+        const maxWidth = editor.container.innerWidth() - 2;
         const width = imageInfo.width < maxWidth ? imageInfo.width : maxWidth;
         const height = Math.round(width * imageInfo.height / imageInfo.width);
         box.updateValue({
@@ -6430,7 +6761,7 @@ function renderUploading(root, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" class="lake-button-remove" title="Delete"></button>
+      <button type="button" tabindex="-1" class="lake-button-remove" title="${locale.image.remove()}"></button>
     </div>
   `);
         const removeButton = buttonGroupNode.find('.lake-button-remove');
@@ -6457,13 +6788,13 @@ function renderUploading(root, box) {
             draggable: 'false',
             alt: value.name,
         });
-        root.append(buttonGroupNode);
-        root.append(progressNode);
-        root.append(imgNode);
+        imageNode.append(buttonGroupNode);
+        imageNode.append(progressNode);
+        imageNode.append(imgNode);
     });
 }
 // Displays an image that can be previewed or removed.
-function renderDone(root, box) {
+function renderDone(imageNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -6472,13 +6803,13 @@ function renderDone(root, box) {
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(root, box);
+            yield renderError(imageNode, box);
             return;
         }
         let width = value.width;
         let height = value.height;
         if (!width || !height) {
-            const maxWidth = editor.innerWidth() - 2;
+            const maxWidth = editor.container.innerWidth() - 2;
             width = Math.round(imageInfo.width < maxWidth ? imageInfo.width : maxWidth);
             height = Math.round(width * imageInfo.height / imageInfo.width);
             box.updateValue({
@@ -6492,8 +6823,8 @@ function renderDone(root, box) {
         });
         const buttonGroupNode = query(safeTemplate `
     <div class="lake-button-group">
-      <button type="button" class="lake-button-view" title="Full screen"></button>
-      <button type="button" class="lake-button-remove" title="Delete"></button>
+      <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>
     </div>
   `);
         const viewButton = buttonGroupNode.find('.lake-button-view');
@@ -6501,7 +6832,7 @@ function renderDone(root, box) {
         if (maximizeIcon) {
             viewButton.append(maximizeIcon);
         }
-        if (width < 80) {
+        if (width < 80 || PhotoSwipeLightbox === null) {
             viewButton.hide();
         }
         const removeButton = buttonGroupNode.find('.lake-button-remove');
@@ -6528,9 +6859,9 @@ function renderDone(root, box) {
         bindResizerEvents(resizerNode.find('.lake-resizer-top-right'), box);
         bindResizerEvents(resizerNode.find('.lake-resizer-bottom-left'), box);
         bindResizerEvents(resizerNode.find('.lake-resizer-bottom-right'), box);
-        root.append(buttonGroupNode);
-        root.append(resizerNode);
-        root.append(imgNode);
+        imageNode.append(buttonGroupNode);
+        imageNode.append(resizerNode);
+        imageNode.append(imgNode);
     });
 }
 const imageBox = {
@@ -6567,29 +6898,29 @@ const imageBox = {
         if (value.status === 'loading') {
             return;
         }
-        const root = query('<div class="lake-image" />');
-        root.addClass(`lake-image-${value.status}`);
+        const imageNode = query('<div class="lake-image" />');
+        imageNode.addClass(`lake-image-${value.status}`);
         let promise;
         if (value.status === 'uploading') {
-            promise = renderUploading(root, box);
+            promise = renderUploading(imageNode, box);
         }
         else if (value.status === 'error') {
-            promise = renderError(root, box);
+            promise = renderError(imageNode, box);
         }
         else {
-            promise = renderDone(root, box);
+            promise = renderDone(imageNode, box);
         }
         promise.then(() => {
             container.empty();
-            container.append(root);
-            root.find('.lake-button-view').on('click', () => openFullScreen(box));
-            root.find('.lake-button-remove').on('click', event => {
+            container.append(imageNode);
+            imageNode.find('.lake-button-view').on('click', () => openFullScreen(box));
+            imageNode.find('.lake-button-remove').on('click', event => {
                 event.stopPropagation();
                 removeImageBox(box);
             });
             box.event.emit('render');
         });
-        root.on('click', () => {
+        imageNode.on('click', () => {
             editor.selection.range.selectBox(box.node);
         });
     },
@@ -6599,25 +6930,51 @@ const imageBox = {
     },
 };
 
-function CodeMirror (config) {
-    const updateListener = (update) => {
-        if (!update.docChanged) {
-            return;
-        }
-        config.onChange(update.state.doc.toString());
-    };
-    return new EditorView({
-        doc: config.value,
-        extensions: [
-            basicSetup,
-            keymap.of([indentWithTab]),
-            javascript(),
-            EditorView.updateListener.of(updateListener),
-        ],
-        parent: config.parent,
-    });
+const config = {
+    defaultLang: 'text',
+    background: '#0000000a',
+    foreground: '#444d56',
+    selection: '#1ba2e333',
+    cursor: '#044289',
+    keyword: '#cf222e',
+    variable: '#1f2328',
+    parameter: '#24292e',
+    function: '#005cc5',
+    string: '#0a3069',
+    constant: '#0550ae',
+    type: '#24292f',
+    class: '#24292e',
+    number: '#0550ae',
+    comment: '#57606a',
+    heading: '#0550ae',
+    invalid: '#f6f8fa',
+    regexp: '#116329',
+};
+function getHighlightStyle(CodeMirror) {
+    const { HighlightStyle, tags } = CodeMirror;
+    return HighlightStyle.define([
+        { tag: tags.keyword, color: config.keyword },
+        { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
+        { tag: [tags.propertyName], color: config.function },
+        { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
+        { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
+        { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
+        { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+        { tag: [tags.className], color: config.class },
+        { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+        { tag: [tags.typeName], color: config.type },
+        { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+        { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+        { tag: [tags.meta, tags.comment], color: config.comment },
+        { tag: tags.strong, fontWeight: 'bold' },
+        { tag: tags.emphasis, fontStyle: 'italic' },
+        { tag: tags.link, textDecoration: 'underline' },
+        { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+        { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+        { tag: tags.invalid, color: config.invalid },
+        { tag: tags.strikethrough, textDecoration: 'line-through' },
+    ]);
 }
-
 const codeBlockBox = {
     type: 'block',
     name: 'codeBlock',
@@ -6627,17 +6984,34 @@ const codeBlockBox = {
         if (!editor) {
             return;
         }
-        const width = editor.innerWidth() - 2;
-        const root = query('<div class="lake-code-block" />');
-        root.css('width', `${width}px`);
+        const codeBlockNode = query('<div class="lake-code-block" />');
         const container = box.getContainer();
         container.empty();
-        container.append(root);
-        const parent = root.get(0);
-        if (!parent) {
+        container.append(codeBlockNode);
+        const codeBlockNativeNode = codeBlockNode.get(0);
+        if (!codeBlockNativeNode) {
+            return;
+        }
+        // begin to create CodeMirror
+        const CodeMirror = window.CodeMirror;
+        if (!CodeMirror) {
+            codeBlockNode.addClass('lake-code-block-error');
+            codeBlockNode.text('The code cannot be displayed because window.CodeMirror is not found. Please check if the CodeMirror file is added to this page.');
+            codeBlockNode.on('click', () => {
+                editor.selection.range.selectBox(box.node);
+            });
             return;
         }
-        const onChangeHandler = (value) => {
+        const { EditorState, Compartment, EditorView, keymap, history, defaultKeymap, historyKeymap, indentWithTab, syntaxHighlighting, langItems, } = CodeMirror;
+        // language menu items
+        const langItemMap = new Map();
+        for (const item of langItems) {
+            langItemMap.set(item.value, item);
+        }
+        const boxValue = box.value;
+        const langItem = langItemMap.get(boxValue.lang);
+        const language = new Compartment();
+        const changeHandler = (value) => {
             // Here setTimeout is necessary because isComposing is not false after ending composition.
             window.setTimeout(() => {
                 if (editor.isComposing) {
@@ -6647,12 +7021,58 @@ const codeBlockBox = {
                 editor.history.save();
             }, 0);
         };
-        const codeEditor = CodeMirror({
-            parent: root.get(0),
-            value: (_a = box.value.code) !== null && _a !== void 0 ? _a : '',
-            onChange: onChangeHandler,
+        const updateListener = EditorView.updateListener.of((update) => {
+            if (!update.docChanged) {
+                return;
+            }
+            changeHandler(update.state.doc.toString());
+        });
+        const codeEditor = new EditorView({
+            parent: codeBlockNativeNode,
+            doc: (_a = boxValue.code) !== null && _a !== void 0 ? _a : '',
+            extensions: [
+                EditorState.readOnly.of(editor.readonly),
+                history(),
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap,
+                    indentWithTab,
+                ]),
+                syntaxHighlighting(getHighlightStyle(CodeMirror)),
+                language.of(langItem && langItem.component ? langItem.component() : []),
+                updateListener,
+            ],
+        });
+        codeBlockNode.find('[contenteditable="true"]').attr('tabindex', '-1');
+        const dropdown = new Dropdown({
+            root: codeBlockNode,
+            name: 'langType',
+            downIcon: icons.get('down'),
+            defaultValue: langItem ? boxValue.lang : config.defaultLang,
+            tooltip: locale.codeBlock.langType(),
+            width: 'auto',
+            menuType: 'list',
+            menuItems: langItems.map((item) => ({
+                value: item.value,
+                text: item.text,
+            })),
+            onSelect: value => {
+                const item = langItemMap.get(value);
+                codeEditor.dispatch({
+                    effects: language.reconfigure(item && item.component ? item.component() : []),
+                });
+                box.updateValue({
+                    lang: value,
+                });
+                editor.history.save();
+            },
         });
+        dropdown.render();
         box.setData('codeEditor', codeEditor);
+        box.useEffect(() => () => {
+            codeEditor.destroy();
+            debug('CodeMirror destroyed');
+        });
     },
 };
 
@@ -6907,8 +7327,10 @@ var paste = (editor) => {
 };
 
 var undo = (editor) => {
-    editor.command.add('undo', () => {
-        editor.history.undo();
+    editor.command.add('undo', {
+        execute: () => {
+            editor.history.undo();
+        },
     });
     editor.keystroke.setKeydown('mod+z', event => {
         const range = editor.selection.range;
@@ -6921,38 +7343,53 @@ var undo = (editor) => {
 };
 
 var redo = (editor) => {
-    editor.command.add('redo', () => {
-        editor.history.redo();
+    editor.command.add('redo', {
+        execute: () => {
+            editor.history.redo();
+        },
     });
-    editor.keystroke.setKeydown('mod+y', event => {
+    const redoHandler = (event) => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
         }
         event.preventDefault();
         editor.command.execute('redo');
-    });
+    };
+    editor.keystroke.setKeydown('mod+y', redoHandler);
+    editor.keystroke.setKeydown('mod+shift+z', redoHandler);
 };
 
 var selectAll = (editor) => {
-    editor.command.add('selectAll', () => {
-        const range = editor.selection.range;
-        range.selectNodeContents(editor.container);
-        range.shrink();
+    editor.command.add('selectAll', {
+        execute: () => {
+            const range = editor.selection.range;
+            range.selectNodeContents(editor.container);
+            range.shrink();
+        },
     });
 };
 
 var heading = (editor) => {
-    editor.command.add('heading', (type) => {
-        editor.selection.setBlocks(`<${type} />`);
-        editor.history.save();
+    editor.command.add('heading', {
+        selectedValues: appliedItems => {
+            const currentItem = appliedItems.find(item => item.node.isHeading || item.name === 'p');
+            return currentItem ? [currentItem.name] : [];
+        },
+        execute: (type) => {
+            editor.selection.setBlocks(`<${type} />`);
+            editor.history.save();
+        },
     });
 };
 
 var blockQuote = (editor) => {
-    editor.command.add('blockQuote', () => {
-        editor.selection.setBlocks('<blockquote />');
-        editor.history.save();
+    editor.command.add('blockQuote', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === 'blockquote'),
+        execute: () => {
+            editor.selection.setBlocks('<blockquote />');
+            editor.history.save();
+        },
     });
 };
 
@@ -6969,73 +7406,90 @@ function setChecklist(editor, value) {
     editor.selection.setBlocks(`<ul type="checklist"><li value="${value}"></li></ul>`);
 }
 var list = (editor) => {
-    editor.command.add('list', (type, value = false) => {
-        const blocks = editor.selection.range.getBlocks();
-        let isNumberedList = false;
-        let isBulletedList = false;
-        let isChecklist = false;
-        for (const block of blocks) {
-            if (!isNumberedList && block.name === 'ol') {
-                isNumberedList = true;
-            }
-            if (!isBulletedList && block.name === 'ul' && !block.hasAttr('type')) {
-                isBulletedList = true;
-            }
-            if (!isChecklist && block.name === 'ul' && block.attr('type') === 'checklist') {
-                isChecklist = true;
+    editor.command.add('list', {
+        selectedValues: appliedItems => {
+            let currentValue;
+            for (const item of appliedItems) {
+                if (item.name === 'ol') {
+                    currentValue = 'numbered';
+                    break;
+                }
+                if (item.name === 'ul' && !item.node.hasAttr('type')) {
+                    currentValue = 'bulleted';
+                    break;
+                }
+                if (item.name === 'ul' && item.node.attr('type') === 'checklist') {
+                    currentValue = 'checklist';
+                    break;
+                }
             }
-        }
-        if (isNumberedList) {
-            if (type === 'numbered') {
-                setParagraph(editor);
+            return currentValue ? [currentValue] : [];
+        },
+        execute: (type, value = false) => {
+            const blocks = editor.selection.range.getBlocks();
+            let isNumberedList = false;
+            let isBulletedList = false;
+            let isChecklist = false;
+            for (const block of blocks) {
+                if (!isNumberedList && block.name === 'ol') {
+                    isNumberedList = true;
+                }
+                if (!isBulletedList && block.name === 'ul' && !block.hasAttr('type')) {
+                    isBulletedList = true;
+                }
+                if (!isChecklist && block.name === 'ul' && block.attr('type') === 'checklist') {
+                    isChecklist = true;
+                }
             }
-            if (type === 'bulleted') {
-                setBulletedList(editor);
+            if (isNumberedList) {
+                if (type === 'numbered') {
+                    setParagraph(editor);
+                }
+                if (type === 'bulleted') {
+                    setBulletedList(editor);
+                }
+                if (type === 'checklist') {
+                    setChecklist(editor, value);
+                }
             }
-            if (type === 'checklist') {
-                setChecklist(editor, value);
+            else if (isBulletedList) {
+                if (type === 'numbered') {
+                    setNumberedList(editor);
+                }
+                if (type === 'bulleted') {
+                    setParagraph(editor);
+                }
+                if (type === 'checklist') {
+                    setChecklist(editor, value);
+                }
             }
-        }
-        else if (isBulletedList) {
-            if (type === 'numbered') {
-                setNumberedList(editor);
-            }
-            if (type === 'bulleted') {
-                setParagraph(editor);
-            }
-            if (type === 'checklist') {
-                setChecklist(editor, value);
-            }
-        }
-        else if (isChecklist) {
-            if (type === 'numbered') {
-                setNumberedList(editor);
-            }
-            if (type === 'bulleted') {
-                setBulletedList(editor);
-            }
-            if (type === 'checklist') {
-                setParagraph(editor);
-            }
-        }
-        else {
-            if (type === 'numbered') {
-                setNumberedList(editor);
-            }
-            if (type === 'bulleted') {
-                setBulletedList(editor);
+            else if (isChecklist) {
+                if (type === 'numbered') {
+                    setNumberedList(editor);
+                }
+                if (type === 'bulleted') {
+                    setBulletedList(editor);
+                }
+                if (type === 'checklist') {
+                    setParagraph(editor);
+                }
             }
-            if (type === 'checklist') {
-                setChecklist(editor, value);
+            else {
+                if (type === 'numbered') {
+                    setNumberedList(editor);
+                }
+                if (type === 'bulleted') {
+                    setBulletedList(editor);
+                }
+                if (type === 'checklist') {
+                    setChecklist(editor, value);
+                }
             }
-        }
-        editor.history.save();
+            editor.history.save();
+        },
     });
     editor.container.on('click', event => {
         const mouseEvent = event;
-        if (editor.readonly) {
-            return;
-        }
         if (!mouseEvent.target) {
             return;
         }
@@ -7047,36 +7501,60 @@ var list = (editor) => {
     });
 };
 
+const alignValueMap = {
+    start: 'left',
+    end: 'right',
+};
 var align = (editor) => {
-    editor.command.add('align', (type) => {
-        editor.selection.setBlocks({
-            'text-align': type,
-        });
-        editor.history.save();
+    editor.command.add('align', {
+        selectedValues: appliedItems => {
+            let currentValue;
+            for (const item of appliedItems) {
+                if (item.node.isBlock) {
+                    currentValue = item.node.computedCSS('text-align');
+                    break;
+                }
+            }
+            if (!currentValue) {
+                return [];
+            }
+            return [alignValueMap[currentValue] || currentValue];
+        },
+        execute: (type) => {
+            editor.selection.setBlocks({
+                'text-align': type,
+            });
+            editor.history.save();
+        },
     });
 };
 
 var indent = (editor) => {
-    editor.command.add('indent', (type) => {
-        const blocks = editor.selection.range.getBlocks();
-        for (const block of blocks) {
-            setBlockIndent(block, type);
-        }
-        editor.history.save();
+    editor.command.add('indent', {
+        execute: (type) => {
+            const blocks = editor.selection.range.getBlocks();
+            for (const block of blocks) {
+                setBlockIndent(block, type);
+            }
+            editor.history.save();
+        },
     });
 };
 
 const tagName$6 = 'strong';
 var bold = (editor) => {
-    editor.command.add('bold', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$6)) {
-            editor.selection.removeMark(`<${tagName$6} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$6} />`);
-        }
-        editor.history.save();
+    editor.command.add('bold', {
+        isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$6),
+        execute: () => {
+            if (editor.command.isSelected('bold')) {
+                editor.selection.removeMark(`<${tagName$6} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$6} />`);
+            }
+            editor.history.save();
+        },
     });
     editor.keystroke.setKeydown('mod+b', event => {
         event.preventDefault();
@@ -7086,15 +7564,17 @@ var bold = (editor) => {
 
 const tagName$5 = 'i';
 var italic = (editor) => {
-    editor.command.add('italic', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$5)) {
-            editor.selection.removeMark(`<${tagName$5} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$5} />`);
-        }
-        editor.history.save();
+    editor.command.add('italic', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$5),
+        execute: () => {
+            if (editor.command.isSelected('italic')) {
+                editor.selection.removeMark(`<${tagName$5} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$5} />`);
+            }
+            editor.history.save();
+        },
     });
     editor.keystroke.setKeydown('mod+i', event => {
         event.preventDefault();
@@ -7104,15 +7584,17 @@ var italic = (editor) => {
 
 const tagName$4 = 'u';
 var underline = (editor) => {
-    editor.command.add('underline', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$4)) {
-            editor.selection.removeMark(`<${tagName$4} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$4} />`);
-        }
-        editor.history.save();
+    editor.command.add('underline', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$4),
+        execute: () => {
+            if (editor.command.isSelected('underline')) {
+                editor.selection.removeMark(`<${tagName$4} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$4} />`);
+            }
+            editor.history.save();
+        },
     });
     editor.keystroke.setKeydown('mod+u', event => {
         event.preventDefault();
@@ -7122,15 +7604,17 @@ var underline = (editor) => {
 
 const tagName$3 = 's';
 var strikethrough = (editor) => {
-    editor.command.add('strikethrough', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$3)) {
-            editor.selection.removeMark(`<${tagName$3} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$3} />`);
-        }
-        editor.history.save();
+    editor.command.add('strikethrough', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$3),
+        execute: () => {
+            if (editor.command.isSelected('strikethrough')) {
+                editor.selection.removeMark(`<${tagName$3} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$3} />`);
+            }
+            editor.history.save();
+        },
     });
     editor.keystroke.setKeydown('mod+shift+x', event => {
         event.preventDefault();
@@ -7140,93 +7624,148 @@ var strikethrough = (editor) => {
 
 const tagName$2 = 'sub';
 var subscript = (editor) => {
-    editor.command.add('subscript', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$2)) {
-            editor.selection.removeMark(`<${tagName$2} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$2} />`);
-        }
-        editor.history.save();
+    editor.command.add('subscript', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$2),
+        execute: () => {
+            if (editor.command.isSelected('subscript')) {
+                editor.selection.removeMark(`<${tagName$2} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$2} />`);
+            }
+            editor.history.save();
+        },
     });
 };
 
 const tagName$1 = 'sup';
 var superscript = (editor) => {
-    editor.command.add('superscript', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName$1)) {
-            editor.selection.removeMark(`<${tagName$1} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName$1} />`);
-        }
-        editor.history.save();
+    editor.command.add('superscript', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName$1),
+        execute: () => {
+            if (editor.command.isSelected('superscript')) {
+                editor.selection.removeMark(`<${tagName$1} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName$1} />`);
+            }
+            editor.history.save();
+        },
     });
 };
 
 const tagName = 'code';
 var code = (editor) => {
-    editor.command.add('code', () => {
-        const appliedItems = editor.selection.getAppliedItems();
-        if (appliedItems.find(item => item.name === tagName)) {
-            editor.selection.removeMark(`<${tagName} />`);
-        }
-        else {
-            editor.selection.addMark(`<${tagName} />`);
-        }
-        editor.history.save();
+    editor.command.add('code', {
+        isSelected: appliedItems => !!appliedItems.find(item => item.name === tagName),
+        execute: () => {
+            if (editor.command.isSelected('code')) {
+                editor.selection.removeMark(`<${tagName} />`);
+            }
+            else {
+                editor.selection.addMark(`<${tagName} />`);
+            }
+            editor.history.save();
+        },
     });
 };
 
 var fontFamily = (editor) => {
-    editor.command.add('fontFamily', (value) => {
-        editor.selection.addMark(`<span style="font-family: ${value};" />`);
-        editor.history.save();
+    editor.command.add('fontFamily', {
+        selectedValues: appliedItems => {
+            for (const item of appliedItems) {
+                if (item.name === 'span') {
+                    const currentValue = item.node.css('font-family');
+                    return [currentValue.replace(/['"]/g, '')];
+                }
+            }
+            return [];
+        },
+        execute: (value) => {
+            editor.selection.addMark(`<span style="font-family: ${value};" />`);
+            editor.history.save();
+        },
     });
 };
 
 var fontSize = (editor) => {
-    editor.command.add('fontSize', (value) => {
-        editor.selection.addMark(`<span style="font-size: ${value};" />`);
-        editor.history.save();
+    editor.command.add('fontSize', {
+        isDisabled: appliedItems => !!appliedItems.find(item => item.node.isHeading),
+        selectedValues: appliedItems => {
+            for (const item of appliedItems) {
+                if (item.name === 'span') {
+                    const currentValue = item.node.css('font-size');
+                    return [currentValue.replace(/\.\d+/, '')];
+                }
+            }
+            return [];
+        },
+        execute: (value) => {
+            editor.selection.addMark(`<span style="font-size: ${value};" />`);
+            editor.history.save();
+        },
     });
 };
 
 var fontColor = (editor) => {
-    editor.command.add('fontColor', (value) => {
-        editor.selection.addMark(`<span style="color: ${value};" />`);
-        editor.history.save();
+    editor.command.add('fontColor', {
+        selectedValues: appliedItems => {
+            for (const item of appliedItems) {
+                if (item.name === 'span') {
+                    const currentValue = item.node.computedCSS('color');
+                    return [toHex(currentValue)];
+                }
+            }
+            return [];
+        },
+        execute: (value) => {
+            editor.selection.addMark(`<span style="color: ${value};" />`);
+            editor.history.save();
+        },
     });
 };
 
 var highlight = (editor) => {
-    editor.command.add('highlight', (value) => {
-        editor.selection.addMark(`<span style="background-color: ${value};" />`);
-        editor.history.save();
+    editor.command.add('highlight', {
+        selectedValues: appliedItems => {
+            for (const item of appliedItems) {
+                if (item.name === 'span') {
+                    const currentValue = item.node.computedCSS('background-color');
+                    return [toHex(currentValue)];
+                }
+            }
+            return [];
+        },
+        execute: (value) => {
+            editor.selection.addMark(`<span style="background-color: ${value};" />`);
+            editor.history.save();
+        },
     });
 };
 
 var removeFormat = (editor) => {
-    editor.command.add('removeFormat', () => {
-        editor.selection.removeMark();
-        editor.history.save();
+    editor.command.add('removeFormat', {
+        execute: () => {
+            editor.selection.removeMark();
+            editor.history.save();
+        },
     });
 };
 
 let markList = [];
 const formatPainterClassName = 'lake-format-painter';
 var formatPainter = (editor) => {
-    editor.command.add('formatPainter', () => {
-        editor.container.addClass(formatPainterClassName);
-        const appliedItems = editor.selection.getAppliedItems();
-        for (const item of appliedItems) {
-            const node = item.node.clone();
-            if (node.isMark && node.name !== 'a') {
-                markList.push(node);
+    editor.command.add('formatPainter', {
+        execute: () => {
+            editor.container.addClass(formatPainterClassName);
+            const appliedItems = editor.selection.getAppliedItems();
+            for (const item of appliedItems) {
+                const node = item.node.clone();
+                if (node.isMark && node.name !== 'a') {
+                    markList.push(node);
+                }
             }
-        }
+        },
     });
     editor.container.on('click', () => {
         editor.container.removeClass(formatPainterClassName);
@@ -7243,8 +7782,8 @@ var formatPainter = (editor) => {
         if (tagetNode.isInside) {
             return;
         }
-        const buttonNode = tagetNode.closest('.lake-toolbar-button');
-        if (buttonNode.length > 0 && buttonNode.attr('name') === 'formatPainter') {
+        const buttonNode = tagetNode.closest('button[name="formatPainter"]');
+        if (buttonNode.length > 0) {
             return;
         }
         editor.container.removeClass(formatPainterClassName);
@@ -7253,123 +7792,147 @@ var formatPainter = (editor) => {
 };
 
 class LinkPopup {
-    constructor(target) {
+    constructor(root) {
         this.linkNode = null;
         this.event = new EventEmitter();
-        this.root = query(safeTemplate `
+        this.root = root;
+        this.container = query(safeTemplate `
       <div class="lake-link-popup">
-        <div class="lake-row">URL</div>
+        <div class="lake-row">${locale.link.url()}</div>
         <div class="lake-row lake-url-row">
           <input type="text" name="url" />
-          <button type="button" class="lake-button-copy" title="Copy link to clipboard"></button>
-          <button type="button" class="lake-button-open" title="Open link in new tab"></button>
         </div>
-        <div class="lake-row">Link title</div>
+        <div class="lake-row">${locale.link.title()}</div>
         <div class="lake-row">
           <input type="text" name="title" />
         </div>
-        <div class="lake-row">
-          <button type="button" class="lake-button-save"><span>Save</span></button>
-          <button type="button" class="lake-button-unlink"><span>Remove link</span></button>
-        </div>
+        <div class="lake-row lake-button-row"></div>
       </div>
     `);
-        const openIcon = icons.get('open');
-        if (openIcon) {
-            this.root.find('.lake-button-open').append(openIcon);
-        }
-        const copyButton = this.root.find('.lake-button-copy');
-        const copyIcon = icons.get('copy');
-        if (copyIcon) {
-            copyButton.append(copyIcon);
-        }
-        const copyDoneIcon = icons.get('checkCircle');
-        if (copyDoneIcon) {
-            copyButton.append(copyDoneIcon);
-        }
-        const copyErrorIcon = icons.get('warningCircle');
-        if (copyErrorIcon) {
-            copyButton.append(copyErrorIcon);
-        }
-        const saveIcon = icons.get('check');
-        if (saveIcon) {
-            this.root.find('.lake-button-save').prepend(saveIcon);
-        }
-        const unlinkIcon = icons.get('unlink');
-        if (unlinkIcon) {
-            this.root.find('.lake-button-unlink').prepend(unlinkIcon);
-        }
-        target.append(this.root);
-        this.bindEvents();
     }
-    writeClipboardText(text, errorCallback) {
+    // Writes the specified text to the system clipboard
+    writeClipboardText(text) {
         return __awaiter(this, void 0, void 0, function* () {
+            let error = false;
             try {
-                yield navigator.clipboard.writeText(text);
+                if (window.LAKE_TEST) {
+                    error = window.LAKE_ERROR;
+                }
+                else {
+                    yield navigator.clipboard.writeText(text);
+                }
             }
             catch (_a) {
-                errorCallback();
+                error = true;
             }
+            return new Promise(resolve => {
+                resolve(error);
+            });
         });
     }
-    bindEvents() {
-        // Copy link to clipboard
+    // Copy link to clipboard
+    appendCopyButton() {
         let timeoutId = null;
-        this.root.find('.lake-button-copy').on('click', () => {
-            if (!this.linkNode) {
-                return;
-            }
-            const url = this.getInputValue('url');
-            this.writeClipboardText(url, () => {
-                const svgNode = this.root.find('.lake-button-copy svg');
-                svgNode.hide();
-                svgNode.eq(2).show('inline');
-            });
-            const svgNode = this.root.find('.lake-button-copy svg');
-            svgNode.hide();
-            svgNode.eq(1).show('inline');
-            if (timeoutId) {
-                window.clearTimeout(timeoutId);
-            }
-            timeoutId = window.setTimeout(() => {
-                svgNode.hide();
-                svgNode.eq(0).show('inline');
-            }, 2000);
+        const button = new Button({
+            root: this.container.find('.lake-url-row'),
+            name: 'copy',
+            icon: icons.get('copy'),
+            tooltip: locale.link.copy(),
+            onClick: () => {
+                if (!this.linkNode) {
+                    return;
+                }
+                const url = this.getInputValue('url');
+                this.writeClipboardText(url).then((error) => {
+                    const svgNode = this.container.find('button[name="copy"] svg');
+                    svgNode.hide();
+                    if (error) {
+                        svgNode.eq(2).show('inline');
+                        this.event.emit('copy', error);
+                        return;
+                    }
+                    svgNode.eq(1).show('inline');
+                    this.event.emit('copy', error);
+                    if (timeoutId) {
+                        window.clearTimeout(timeoutId);
+                    }
+                    timeoutId = window.setTimeout(() => {
+                        svgNode.hide();
+                        svgNode.eq(0).show('inline');
+                    }, 2000);
+                });
+            },
         });
-        // Open link in new tab
-        this.root.find('.lake-button-open').on('click', () => {
-            if (!this.linkNode) {
-                return;
-            }
-            const url = this.getInputValue('url');
-            window.open(url);
+        button.render();
+        const copyDoneIcon = icons.get('checkCircle');
+        if (copyDoneIcon) {
+            button.node.append(copyDoneIcon);
+        }
+        const copyErrorIcon = icons.get('warningCircle');
+        if (copyErrorIcon) {
+            button.node.append(copyErrorIcon);
+        }
+    }
+    // Open link in new tab
+    appendOpenButton() {
+        const button = new Button({
+            root: this.container.find('.lake-url-row'),
+            name: 'open',
+            icon: icons.get('open'),
+            tooltip: locale.link.open(),
+            onClick: () => {
+                if (!this.linkNode) {
+                    return;
+                }
+                const url = this.getInputValue('url');
+                window.open(url);
+            },
         });
-        // Save link
-        this.root.find('.lake-button-save').on('click', () => {
-            if (!this.linkNode) {
-                return;
-            }
-            this.save();
-            this.hide();
-            this.event.emit('save');
+        button.render();
+    }
+    // Save link
+    appendSaveButton() {
+        const button = new Button({
+            root: this.container.find('.lake-button-row'),
+            name: 'save',
+            icon: icons.get('check'),
+            text: locale.link.save(),
+            onClick: () => {
+                if (!this.linkNode) {
+                    return;
+                }
+                this.save();
+                this.hide();
+                this.event.emit('save');
+            },
         });
-        // Remove link
-        this.root.find('.lake-button-unlink').on('click', () => {
-            if (!this.linkNode) {
-                return;
-            }
-            this.linkNode.remove(true);
-            this.hide();
-            this.event.emit('remove');
+        button.render();
+    }
+    // Remove link
+    appendUnlinkButton() {
+        const button = new Button({
+            root: this.container.find('.lake-button-row'),
+            name: 'unlink',
+            icon: icons.get('unlink'),
+            text: locale.link.unlink(),
+            onClick: () => {
+                if (!this.linkNode) {
+                    return;
+                }
+                this.linkNode.remove(true);
+                this.hide();
+                this.event.emit('remove');
+            },
         });
+        button.render();
     }
     getInputValue(name) {
-        const inputElement = this.root.find(`input[name="${name}"]`);
+        const inputElement = this.container.find(`input[name="${name}"]`);
         const nativeInputElement = inputElement.get(0);
         return nativeInputElement.value;
     }
     setInputValue(name, value) {
-        const inputElement = this.root.find(`input[name="${name}"]`);
+        const inputElement = this.container.find(`input[name="${name}"]`);
         const nativeInputElement = inputElement.get(0);
         nativeInputElement.value = value;
     }
@@ -7379,8 +7942,12 @@ class LinkPopup {
         }
         const url = this.getInputValue('url');
         let title = this.getInputValue('title');
+        if (url === '' && title === '') {
+            this.linkNode.remove();
+            return;
+        }
         if (title === '') {
-            title = 'Link';
+            title = url;
         }
         this.linkNode.attr('href', url);
         this.linkNode.text(title);
@@ -7399,90 +7966,93 @@ class LinkPopup {
             return;
         }
         // link.x + popup.width > window.width
-        if (linkRect.x + this.root.width() > window.innerWidth) {
+        if (linkRect.x + this.container.width() > window.innerWidth) {
             // link.x + window.scrollX - (popup.width - link.width)
-            this.root.css('left', `${linkX - this.root.width() + linkRect.width}px`);
+            this.container.css('left', `${linkX - this.container.width() + linkRect.width}px`);
         }
         else {
-            this.root.css('left', `${linkX}px`);
+            this.container.css('left', `${linkX}px`);
         }
         // link.y + link.height + popup.height > window.height
-        if (linkRect.y + linkRect.height + this.root.height() > window.innerHeight) {
+        if (linkRect.y + linkRect.height + this.container.height() > window.innerHeight) {
             // link.y + window.scrollY - popup.height
-            this.root.css('top', `${linkY - this.root.height()}px`);
+            this.container.css('top', `${linkY - this.container.height()}px`);
         }
         else {
-            this.root.css('top', `${linkY + linkRect.height}px`);
+            this.container.css('top', `${linkY + linkRect.height}px`);
         }
     }
+    render() {
+        this.appendCopyButton();
+        this.appendOpenButton();
+        this.appendSaveButton();
+        this.appendUnlinkButton();
+        this.root.append(this.container);
+    }
     show(linkNode) {
+        if (this.root.find('.lake-link-popup').length === 0) {
+            this.render();
+        }
+        if (this.linkNode && this.linkNode.get(0) === linkNode.get(0)) {
+            return;
+        }
         this.linkNode = linkNode;
         const url = linkNode.attr('href');
         const title = linkNode.text();
         this.setInputValue('url', url);
-        this.setInputValue('title', title);
-        this.root.css('visibility', 'hidden');
-        this.root.show();
+        if (title !== url) {
+            this.setInputValue('title', title);
+        }
+        this.container.css('visibility', 'hidden');
+        this.container.show();
         this.updatePosition();
-        this.root.css('visibility', '');
+        this.container.css('visibility', '');
+        this.container.find('input[name="url"]').focus();
     }
     hide() {
         this.linkNode = null;
-        this.root.hide();
+        this.container.hide();
     }
 }
 
 var link = (editor) => {
-    let popup;
-    const showPopup = (lineNode) => {
-        if (popup) {
-            popup.show(lineNode);
-            return;
-        }
-        popup = new LinkPopup(editor.popupContainer);
-        popup.event.on('save', () => {
-            editor.history.save();
-        });
-        popup.event.on('remove', () => {
-            editor.history.save();
-        });
-        popup.show(lineNode);
-    };
+    const popup = new LinkPopup(editor.popupContainer);
+    popup.event.on('save', () => {
+        editor.history.save();
+    });
+    popup.event.on('remove', () => {
+        editor.history.save();
+    });
     editor.root.on('scroll', () => {
-        if (!popup) {
-            return;
-        }
         popup.updatePosition();
     });
     editor.event.on('resize', () => {
-        if (!popup) {
-            return;
-        }
         popup.updatePosition();
     });
     editor.event.on('click', (targetNode) => {
-        if (targetNode.isOutside) {
-            return;
-        }
-        if (targetNode.closest('lake-box').length > 0) {
+        if (targetNode.closest('button[name="link"]').length > 0) {
             return;
         }
         const linkNode = targetNode.closest('a');
         if (linkNode.length === 0) {
-            if (popup) {
-                popup.hide();
-            }
+            popup.hide();
             return;
         }
-        showPopup(linkNode);
-    });
-    editor.command.add('link', () => {
-        const linkNode = editor.selection.insertLink('<a href="">New link</a>');
-        if (!linkNode) {
+        if (linkNode.isOutside ||
+            linkNode.closest('lake-box').length > 0) {
             return;
         }
-        editor.history.save();
-        showPopup(linkNode);
+        popup.show(linkNode);
+    });
+    editor.command.add('link', {
+        execute: () => {
+            const linkNode = editor.selection.insertLink(`<a href="">${locale.link.newLink()}</a>`);
+            if (!linkNode) {
+                return;
+            }
+            editor.history.save();
+            popup.show(linkNode);
+        },
     });
 };
 
@@ -7495,9 +8065,11 @@ var hr = (editor) => {
             node.replaceWith(box.node);
         });
     });
-    editor.command.add('hr', () => {
-        editor.insertBox('hr');
-        editor.history.save();
+    editor.command.add('hr', {
+        execute: () => {
+            editor.insertBox('hr');
+            editor.history.save();
+        },
     });
 };
 
@@ -7520,21 +8092,314 @@ var image = (editor) => {
             node.replaceWith(box.node);
         });
     });
-    editor.command.add('image', (value) => {
-        editor.insertBox('image', value);
-        editor.history.save();
+    editor.command.add('image', {
+        execute: (value) => {
+            editor.insertBox('image', value);
+            editor.history.save();
+        },
+    });
+};
+
+var codeBlock = (editor) => {
+    editor.command.add('codeBlock', {
+        execute: (value) => {
+            const box = editor.insertBox('codeBlock', value);
+            editor.history.save();
+            const codeEditor = box.getData('codeEditor');
+            codeEditor.focus();
+        },
+    });
+};
+
+const headingTypeMap = new Map([
+    ['#', 'h1'],
+    ['##', 'h2'],
+    ['###', 'h3'],
+    ['####', 'h4'],
+    ['#####', 'h5'],
+    ['######', 'h6'],
+]);
+const markItemList = [
+    {
+        re: /\*\*(.+?)\*\*$/,
+        getParameters: () => [
+            'bold',
+        ],
+    },
+    {
+        re: /__(.+?)__$/,
+        getParameters: () => [
+            'bold',
+        ],
+    },
+    {
+        re: /_(.+?)_$/,
+        getParameters: () => [
+            'italic',
+        ],
+    },
+    {
+        re: /\*(.+?)\*$/,
+        getParameters: () => [
+            'italic',
+        ],
+    },
+    {
+        re: /==(.+?)==$/,
+        getParameters: () => [
+            'highlight',
+            '#fff566', // yellow-4, from https://ant.design/docs/spec/colors
+        ],
+    },
+    {
+        re: /~~(.+?)~~$/,
+        getParameters: () => [
+            'strikethrough',
+        ],
+    },
+    {
+        re: /`(.+?)`$/,
+        getParameters: () => [
+            'code',
+        ],
+    },
+];
+const blockItemListForSpaceKey = [
+    {
+        re: /^#+$/,
+        getParameters: (results) => {
+            var _a;
+            return [
+                'heading',
+                (_a = headingTypeMap.get(results[0])) !== null && _a !== void 0 ? _a : 'h6',
+            ];
+        },
+    },
+    {
+        re: /^\d+\.$/,
+        getParameters: () => [
+            'list',
+            'numbered',
+        ],
+    },
+    {
+        re: /^[*\-+]$/,
+        getParameters: () => [
+            'list',
+            'bulleted',
+        ],
+    },
+    {
+        re: /^\[\s?\]$/,
+        getParameters: () => [
+            'list',
+            'checklist',
+            false,
+        ],
+    },
+    {
+        re: /^\[x\]$/i,
+        getParameters: () => [
+            'list',
+            'checklist',
+            true,
+        ],
+    },
+    {
+        re: /^>$/,
+        getParameters: () => [
+            'blockQuote',
+        ],
+    },
+];
+const blockItemListForEnterKey = [
+    {
+        re: /^-+$/,
+        getParameters: () => [
+            'hr',
+        ],
+    },
+    {
+        re: /^`+([a-z]*)$/i,
+        getParameters: (results) => {
+            if (!results[1]) {
+                return [
+                    'codeBlock',
+                ];
+            }
+            return [
+                'codeBlock',
+                {
+                    lang: results[1],
+                },
+            ];
+        },
+    },
+];
+function getMarkdownPoint(editor) {
+    const selection = editor.selection;
+    const range = selection.range;
+    let node = range.startNode;
+    let offset = range.startOffset;
+    if (offset === 0) {
+        return;
+    }
+    if (node.isElement) {
+        const child = node.children()[offset - 1];
+        if (!child || !child.isText) {
+            return;
+        }
+        node = child;
+        offset = node.text().length;
+    }
+    if (offset < 1) {
+        return;
+    }
+    return {
+        node,
+        offset,
+    };
+}
+// case 1: <p></p> to <p><br /></p>
+// case 2: <p><focus /></p> to <p><br /><focus /></p>
+function fixEmptyBlock(block) {
+    const newBlock = block.clone(true);
+    newBlock.find('lake-bookmark').remove();
+    if (newBlock.html() !== '') {
+        return;
+    }
+    block.prepend('<br />');
+}
+function executeMarkCommand(editor, point) {
+    const selection = editor.selection;
+    const range = selection.range;
+    const offset = point.offset;
+    const text = point.node.text().slice(0, offset);
+    for (const item of markItemList) {
+        const results = item.re.exec(text);
+        if (results !== null) {
+            // <p>foo**bold**<focus /></p>, offset = 11
+            // to
+            // <p>foobold\u200B<focus /></p>,
+            // to
+            // <p>foo[bold]\u200B<focus /></p>, startOffset = 3, endOffset = 7
+            editor.prepareOperation();
+            const bookmark = selection.insertBookmark();
+            const node = bookmark.focus.prev();
+            const oldValue = node.text();
+            const newValue = `${oldValue.replace(item.re, '$1')}\u200B`;
+            node.get(0).nodeValue = newValue;
+            range.setStart(node, offset - results[0].length);
+            range.setEnd(node, offset - (oldValue.length - newValue.length) - 1);
+            const parameters = item.getParameters();
+            editor.command.execute(parameters.shift(), ...parameters);
+            selection.toBookmark(bookmark);
+            editor.commitOperation();
+            return true;
+        }
+    }
+    return false;
+}
+function spaceKeyExecutesBlockCommand(editor, point) {
+    const selection = editor.selection;
+    const offset = point.offset;
+    let text = point.node.text().slice(0, offset);
+    text = text.replace(/[\u200B\u2060]/g, '');
+    for (const item of blockItemListForSpaceKey) {
+        const results = item.re.exec(text);
+        if (results !== null) {
+            // <p>#<focus />foo</p>
+            // to
+            // <h1><focus />foo</h1>
+            editor.prepareOperation();
+            const bookmark = selection.insertBookmark();
+            const node = bookmark.focus.prev();
+            node.remove();
+            const block = bookmark.focus.closestBlock();
+            fixEmptyBlock(block);
+            selection.range.shrinkAfter(block);
+            const parameters = item.getParameters(results);
+            editor.command.execute(parameters.shift(), ...parameters);
+            selection.toBookmark(bookmark);
+            editor.commitOperation();
+            return true;
+        }
+    }
+    return false;
+}
+function enterKeyExecutesBlockCommand(editor, block) {
+    const selection = editor.selection;
+    let text = block.text();
+    text = text.replace(/[\u200B\u2060]/g, '');
+    for (const item of blockItemListForEnterKey) {
+        const results = item.re.exec(text);
+        if (results !== null) {
+            // <p>---<focus /></p>
+            // to
+            // <lake-box type="block" name="hr" focus="right"></lake-box>
+            editor.prepareOperation();
+            block.empty();
+            fixEmptyBlock(block);
+            selection.range.shrinkAfter(block);
+            const parameters = item.getParameters(results);
+            editor.command.execute(parameters.shift(), ...parameters);
+            editor.commitOperation();
+            return true;
+        }
+    }
+    return false;
+}
+var markdown = (editor) => {
+    editor.keystroke.setKeydown('space', event => {
+        const selection = editor.selection;
+        const range = selection.range;
+        if (range.isBox) {
+            return;
+        }
+        const point = getMarkdownPoint(editor);
+        if (!point) {
+            return;
+        }
+        if (executeMarkCommand(editor, point)) {
+            event.preventDefault();
+            return;
+        }
+        const block = range.getBlocks()[0];
+        if (!block) {
+            return;
+        }
+        if (!(block.isHeading || block.name === 'p')) {
+            return;
+        }
+        if (spaceKeyExecutesBlockCommand(editor, point)) {
+            event.preventDefault();
+        }
     });
-};
-
-var codeBlock = (editor) => {
-    editor.command.add('codeBlock', () => {
-        const box = editor.insertBox('codeBlock');
-        if (!box) {
+    editor.keystroke.setKeydown('enter', event => {
+        const selection = editor.selection;
+        const range = selection.range;
+        if (range.isBox) {
             return;
         }
-        editor.history.save();
-        const codeEditor = box.getData('codeEditor');
-        codeEditor.focus();
+        const block = range.getBlocks()[0];
+        if (!block) {
+            return;
+        }
+        if (!(block.isHeading || block.name === 'p')) {
+            return;
+        }
+        if (block.find('lake-box').length > 0) {
+            return;
+        }
+        if (range.getRightText() !== '') {
+            return;
+        }
+        if (enterKeyExecutesBlockCommand(editor, block)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            // returning false is for unit test
+            return false;
+        }
     });
 };
 
@@ -7595,6 +8460,7 @@ var enterKey = (editor) => {
             return;
         }
         event.preventDefault();
+        editor.rectifyContent();
         if (range.isBox) {
             addBlockOrSplitBlockForBox(editor);
             editor.history.save();
@@ -7636,7 +8502,7 @@ function addLineBreak(editor) {
             return;
         }
     }
-    editor.selection.insertContents('<br />');
+    editor.selection.insertNode(query('<br />'));
 }
 function addBlockOrLineBreakForBox(editor) {
     const range = editor.selection.range;
@@ -7676,6 +8542,7 @@ var shiftEnterKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
+        editor.rectifyContent();
         event.preventDefault();
         if (range.isBox) {
             addBlockOrLineBreakForBox(editor);
@@ -7737,6 +8604,7 @@ var backspaceKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
+        editor.rectifyContent();
         if (range.isBoxLeft) {
             const boxNode = range.startNode.closest('lake-box');
             const prevNode = boxNode.prev();
@@ -7787,6 +8655,14 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
+        if (prevNode.name === 'br' && prevNode.prev().length > 0) {
+            event.preventDefault();
+            range.setStartBefore(prevNode);
+            range.collapseToStart();
+            prevNode.remove();
+            editor.history.save();
+            return;
+        }
         const leftText = range.getLeftText();
         if (leftText === '') {
             event.preventDefault();
@@ -7809,14 +8685,6 @@ var backspaceKey = (editor) => {
             }
             mergeWithPreviousBlock(editor, block);
             editor.history.save();
-            return;
-        }
-        if (prevNode.name === 'br') {
-            event.preventDefault();
-            range.setStartBefore(prevNode);
-            range.collapseToStart();
-            prevNode.remove();
-            editor.history.save();
         }
     });
 };
@@ -7853,6 +8721,7 @@ var deleteKey = (editor) => {
         if (range.isInsideBox) {
             return;
         }
+        editor.rectifyContent();
         if (range.isBoxRight) {
             const boxNode = range.startNode.closest('lake-box');
             const nextNode = boxNode.next();
@@ -7903,6 +8772,13 @@ var deleteKey = (editor) => {
             editor.history.save();
             return;
         }
+        if (nextNode.name === 'br' && nextNode.next().length > 0) {
+            event.preventDefault();
+            range.setStartBefore(nextNode);
+            range.collapseToStart();
+            nextNode.remove();
+            editor.history.save();
+        }
         const rightText = range.getRightText();
         if (rightText === '') {
             event.preventDefault();
@@ -7913,20 +8789,15 @@ var deleteKey = (editor) => {
             }
             mergeWithNextBlock(editor, block);
             editor.history.save();
-            return;
-        }
-        if (nextNode.name === 'br') {
-            event.preventDefault();
-            range.setStartBefore(nextNode);
-            range.collapseToStart();
-            nextNode.remove();
-            editor.history.save();
         }
     });
 };
 
 var tabKey = (editor) => {
     editor.keystroke.setKeydown('tab', event => {
+        if (editor.config.indentWithTab === false) {
+            return;
+        }
         event.preventDefault();
         const blocks = editor.selection.range.getBlocks();
         blocks.forEach(block => {
@@ -8061,218 +8932,6 @@ var arrowKeys = (editor) => {
     });
 };
 
-const headingTypeMap = new Map([
-    ['#', 'h1'],
-    ['##', 'h2'],
-    ['###', 'h3'],
-    ['####', 'h4'],
-    ['#####', 'h5'],
-    ['######', 'h6'],
-]);
-const markItemList = [
-    {
-        re: /\*\*(.+?)\*\*$/,
-        getParameters: () => [
-            'bold',
-        ],
-    },
-    {
-        re: /__(.+?)__$/,
-        getParameters: () => [
-            'bold',
-        ],
-    },
-    {
-        re: /_(.+?)_$/,
-        getParameters: () => [
-            'italic',
-        ],
-    },
-    {
-        re: /\*(.+?)\*$/,
-        getParameters: () => [
-            'italic',
-        ],
-    },
-    {
-        re: /==(.+?)==$/,
-        getParameters: () => [
-            'highlight',
-            '#fff566', // yellow-4, from https://ant.design/docs/spec/colors
-        ],
-    },
-    {
-        re: /~~(.+?)~~$/,
-        getParameters: () => [
-            'strikethrough',
-        ],
-    },
-    {
-        re: /`(.+?)`$/,
-        getParameters: () => [
-            'code',
-        ],
-    },
-];
-const blockItemList = [
-    {
-        re: /^#+$/,
-        getParameters: (text) => {
-            var _a;
-            return [
-                'heading',
-                (_a = headingTypeMap.get(text)) !== null && _a !== void 0 ? _a : 'h6',
-            ];
-        },
-    },
-    {
-        re: /^\d+\.$/,
-        getParameters: () => [
-            'list',
-            'numbered',
-        ],
-    },
-    {
-        re: /^[*\-+]$/,
-        getParameters: () => [
-            'list',
-            'bulleted',
-        ],
-    },
-    {
-        re: /^\[\s?\]$/,
-        getParameters: () => [
-            'list',
-            'checklist',
-            false,
-        ],
-    },
-    {
-        re: /^\[x\]$/i,
-        getParameters: () => [
-            'list',
-            'checklist',
-            true,
-        ],
-    },
-    {
-        re: /^>$/,
-        getParameters: () => [
-            'blockQuote',
-        ],
-    },
-];
-function getMarkdownPoint(editor) {
-    const selection = editor.selection;
-    const range = selection.range;
-    let node = range.startNode;
-    let offset = range.startOffset;
-    if (offset === 0) {
-        return;
-    }
-    if (node.isElement) {
-        const child = node.children()[offset - 1];
-        if (!child || !child.isText) {
-            return;
-        }
-        node = child;
-        offset = node.text().length;
-    }
-    if (offset < 1) {
-        return;
-    }
-    return {
-        node,
-        offset,
-    };
-}
-// case 1: <p></p> to <p><br /></p>
-// case 2: <p><focus /></p> to <p><br /><focus /></p>
-function fixEmptyBlock(block) {
-    const newBlock = block.clone(true);
-    newBlock.find('lake-bookmark').remove();
-    if (newBlock.html() !== '') {
-        return;
-    }
-    block.prepend('<br />');
-}
-function executeMarkCommand(editor, point) {
-    const selection = editor.selection;
-    const range = selection.range;
-    const offset = point.offset;
-    const text = point.node.text().slice(0, offset);
-    for (const item of markItemList) {
-        const result = item.re.exec(text);
-        if (result !== null) {
-            // <p>foo**bold**<focus /></p>, offset = 11
-            // to
-            // <p>foobold\u200B<focus /></p>,
-            // to
-            // <p>foo[bold]\u200B<focus /></p>, startOffset = 3, endOffset = 7
-            editor.prepareOperation();
-            const bookmark = selection.insertBookmark();
-            const node = bookmark.focus.prev();
-            const oldValue = node.text();
-            const newValue = `${oldValue.replace(item.re, '$1')}\u200B`;
-            node.get(0).nodeValue = newValue;
-            range.setStart(node, offset - result[0].length);
-            range.setEnd(node, offset - (oldValue.length - newValue.length) - 1);
-            const parameters = item.getParameters();
-            editor.command.execute(parameters.shift(), ...parameters);
-            selection.toBookmark(bookmark);
-            editor.commitOperation();
-            return true;
-        }
-    }
-    return false;
-}
-function executeBlockCommand(editor, point) {
-    const selection = editor.selection;
-    const offset = point.offset;
-    let text = point.node.text().slice(0, offset);
-    text = text.replace(/[\u200B\u2060]/g, '');
-    for (const item of blockItemList) {
-        if (item.re.test(text)) {
-            // <p>#<focus />foo</p>
-            // to
-            // <h1><focus />foo</h1>
-            editor.prepareOperation();
-            const bookmark = selection.insertBookmark();
-            const node = bookmark.focus.prev();
-            node.remove();
-            const block = bookmark.focus.closestBlock();
-            fixEmptyBlock(block);
-            selection.range.shrinkAfter(block);
-            const parameters = item.getParameters(text);
-            editor.command.execute(parameters.shift(), ...parameters);
-            selection.toBookmark(bookmark);
-            editor.commitOperation();
-            return true;
-        }
-    }
-    return false;
-}
-var markdown = (editor) => {
-    editor.keystroke.setKeydown('space', event => {
-        const selection = editor.selection;
-        const point = getMarkdownPoint(editor);
-        if (!point) {
-            return;
-        }
-        if (executeMarkCommand(editor, point)) {
-            event.preventDefault();
-            return;
-        }
-        const block = selection.range.getBlocks()[0];
-        if (block && !(block.isHeading || block.name === 'p')) {
-            return;
-        }
-        if (executeBlockCommand(editor, point)) {
-            event.preventDefault();
-        }
-    });
-};
-
 Editor.box.add(hrBox);
 Editor.box.add(imageBox);
 Editor.box.add(codeBlockBox);
@@ -8304,12 +8963,13 @@ Editor.plugin.add(link);
 Editor.plugin.add(hr);
 Editor.plugin.add(image);
 Editor.plugin.add(codeBlock);
+Editor.plugin.add(markdown);
 Editor.plugin.add(enterKey);
 Editor.plugin.add(shiftEnterKey);
 Editor.plugin.add(backspaceKey);
 Editor.plugin.add(deleteKey);
 Editor.plugin.add(tabKey);
 Editor.plugin.add(arrowKeys);
-Editor.plugin.add(markdown);
 
-export { Box, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertContents, insertFragment, insertLink, insertNode, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertContents, insertFragment, insertLink, insertNode, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
+//# sourceMappingURL=lake.js.map