lakelib 0.1.15 → 0.1.17

package/lib/lake.js

@@ -1,10 +1,8 @@
-import { Base64 } from 'js-base64';
 import EventEmitter from 'eventemitter3';
 import { i18nObject as i18nObject$1 } from 'typesafe-i18n';
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
-import md5 from 'blueimp-md5';
-import { createKeybindingsHandler } from 'tinykeys';
+import debounce from 'debounce';
+import isEqual from 'fast-deep-equal/es6';
+import { isKeyHotkey } from 'is-hotkey';
 import 'photoswipe/style.css';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@@ -145,6 +143,10 @@ var attachment = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=
 
 var emoji$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.07,48c-10.29,17.79-27.4,28-46.93,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.07-20a8,8,0,0,1,13.86,8Z\"></path></svg>";
 
+var specialCharacter$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 32 32\"><path d=\"M22.7373,25A14.3093,14.3093,0,0,0,27,15C27,8.42,22.58,4,16,4S5,8.42,5,15A14.3093,14.3093,0,0,0,9.2627,25H4v2h8V24.7617A12.5683,12.5683,0,0,1,7,15c0-5.4673,3.5327-9,9-9s9,3.5327,9,9a12.5683,12.5683,0,0,1-5,9.7617V27h8V25Z\"/></svg>";
+
+var equation$1 = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M184,72V56H80.65l53.6,67a8,8,0,0,1,0,10l-53.6,67H184V184a8,8,0,0,1,16,0v24a8,8,0,0,1-8,8H64a8,8,0,0,1-6.25-13l60-75-60-75A8,8,0,0,1,64,40H192a8,8,0,0,1,8,8V72a8,8,0,0,1-16,0Z\"></path></svg>";
+
 var table = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z\"></path></svg>";
 
 // These icons are sourced from open source projects.
@@ -224,6 +226,8 @@ const icons = new Map([
     ['video', video$1],
     ['attachment', attachment],
     ['emoji', emoji$1],
+    ['specialCharacter', specialCharacter$1],
+    ['equation', equation$1],
     ['table', table],
 ]);
 
@@ -287,6 +291,28 @@ function inString(string, value, delimiter) {
     return (delimiter + string + delimiter).indexOf(delimiter + value + delimiter) >= 0;
 }
 
+// Creates a Base64-encoded ASCII string from a string.
+function toBase64(value) {
+    const encoder = new TextEncoder();
+    const byteArray = encoder.encode(value);
+    let binaryString = '';
+    byteArray.forEach(byte => {
+        binaryString += String.fromCharCode(byte);
+    });
+    return window.btoa(binaryString);
+}
+
+// Decodes a string of data which has been encoded using Base64 encoding.
+function fromBase64(value) {
+    const binaryString = window.atob(value);
+    const byteArray = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        byteArray[i] = binaryString.charCodeAt(i);
+    }
+    const decoder = new TextDecoder();
+    return decoder.decode(byteArray);
+}
+
 // Converts an alpha value to a hex value.
 function alphaToHex(value) {
     const hexString = Math.round(Number.parseFloat(value) * 255).toString(16);
@@ -405,8 +431,6 @@ function toNodeList(content, valueType) {
     return nodeList;
 }
 
-const NativeNode = Node;
-
 const blockTagNames = new Set([
     'h1',
     'h2',
@@ -515,7 +539,7 @@ class Nodes {
             return false;
         }
         const node = this.get(0);
-        return node.nodeType === NativeNode.ELEMENT_NODE;
+        return node.nodeType === Node.ELEMENT_NODE;
     }
     // Returns a boolean value indicating whether the node is a text node.
     get isText() {
@@ -523,7 +547,7 @@ class Nodes {
             return false;
         }
         const node = this.get(0);
-        return node.nodeType === NativeNode.TEXT_NODE;
+        return node.nodeType === Node.TEXT_NODE;
     }
     // Returns a boolean value indicating whether the node is a block element.
     get isBlock() {
@@ -679,7 +703,7 @@ class Nodes {
     eachElement(callback) {
         const nodes = this.getAll();
         for (let i = 0; i < nodes.length; i++) {
-            if (nodes[i].nodeType === NativeNode.ELEMENT_NODE) {
+            if (nodes[i].nodeType === Node.ELEMENT_NODE) {
                 if (callback(nodes[i], i) === false) {
                     return this;
                 }
@@ -1214,7 +1238,7 @@ class Nodes {
         return `node (${node.lakeId}): ${nodeValue}`;
     }
     // Prints information of the first node.
-    debug() {
+    info() {
         debug(this.toString());
     }
 }
@@ -1355,12 +1379,12 @@ class Range {
                     reference = 'right';
                 }
             }
-            else {
+            else if (range.startNode.isText) {
                 const text = range.startNode.text();
                 if (range.startOffset < text.length) {
                     range.setEnd(range.startNode, range.startOffset + 1);
                 }
-                else {
+                else if (range.startOffset > 0) {
                     range.setStart(range.startNode, range.startOffset - 1);
                     reference = 'right';
                 }
@@ -1813,7 +1837,7 @@ class Range {
         return this.range.cloneContents();
     }
     // Prints information of the range.
-    debug() {
+    info() {
         debug('--- range information ---');
         debug('start node:', this.startNode.toString(), ', offset:', this.startOffset);
         debug('end node:', this.endNode.toString(), ', offset:', this.endOffset);
@@ -2851,6 +2875,7 @@ var enUS = {
         image: 'Image',
         file: 'File',
         emoji: 'Emoji',
+        equation: 'Equation',
         removeColor: 'Remove color',
     },
     link: {
@@ -2886,6 +2911,10 @@ var enUS = {
     codeBlock: {
         langType: 'Select language',
     },
+    equation: {
+        save: 'Done',
+        placeholder: 'Type a TeX expression',
+    },
 };
 
 var zhCN = {
@@ -2935,6 +2964,7 @@ var zhCN = {
         image: '图片',
         file: '文件',
         emoji: '表情',
+        equation: '公式',
         removeColor: '默认',
     },
     link: {
@@ -2970,6 +3000,10 @@ var zhCN = {
     codeBlock: {
         langType: '选择代码语言',
     },
+    equation: {
+        save: '确定',
+        placeholder: '请输入 TeX 公式',
+    },
 };
 
 var ja = {
@@ -3019,6 +3053,7 @@ var ja = {
         image: '画像',
         file: 'ファイル',
         emoji: '絵文字',
+        equation: '公式',
         removeColor: 'デフォルト',
     },
     link: {
@@ -3054,6 +3089,10 @@ var ja = {
     codeBlock: {
         langType: 'コード言語を選択',
     },
+    equation: {
+        save: '確認',
+        placeholder: 'TeX 公式を入力してください。',
+    },
 };
 
 var ko = {
@@ -3103,6 +3142,7 @@ var ko = {
         image: '이미지',
         file: '파일',
         emoji: '이모지',
+        equation: '수식',
         removeColor: '기본색',
     },
     link: {
@@ -3138,6 +3178,10 @@ var ko = {
     codeBlock: {
         langType: '코드언어 선택',
     },
+    equation: {
+        save: '확인',
+        placeholder: 'TeX 수식을 입력하세요',
+    },
 };
 
 const localeTranslations = {
@@ -3204,11 +3248,11 @@ class Dropdown {
         if (value === '') {
             return [];
         }
-        return JSON.parse(Base64.decode(value));
+        return JSON.parse(fromBase64(value));
     }
     // Updates the value of the node.
     static setValue(node, value) {
-        node.attr('value', Base64.encode(JSON.stringify(value)));
+        node.attr('value', toBase64(JSON.stringify(value)));
     }
     static getMenuMap(menuItems, locale) {
         const menuMap = new Map();
@@ -3241,7 +3285,11 @@ class Dropdown {
       `;
             const listNode = query(listContent);
             menuNode.append(listNode);
-            if (config.menuType === 'color') {
+            if (config.menuType === 'character') {
+                listNode.attr('title', menuText);
+                listNode.find('.lake-dropdown-menu-text').text(menuItem.value);
+            }
+            else if (config.menuType === 'color') {
                 listNode.attr('title', menuText);
                 listNode.find('.lake-dropdown-menu-text').css('background-color', menuItem.value);
             }
@@ -3357,7 +3405,11 @@ class Dropdown {
         });
         menuNode.on('click', event => {
             event.preventDefault();
+            event.stopPropagation();
             const listItem = query(event.target).closest('li');
+            if (listItem.length === 0) {
+                return;
+            }
             const value = listItem.attr('value');
             Dropdown.setValue(dropdownNode, [value]);
             if (textNode.length > 0) {
@@ -3403,6 +3455,10 @@ class Dropdown {
         if (config.menuWidth) {
             menuNode.css('width', config.menuWidth);
         }
+        if (config.menuHeight) {
+            menuNode.addClass('lake-dropdown-menu-with-scroll');
+            menuNode.css('height', config.menuHeight);
+        }
         Dropdown.setValue(dropdownNode, [defaultValue]);
         if (textNode.length > 0) {
             const menuMap = Dropdown.getMenuMap(config.menuItems, this.locale);
@@ -3525,7 +3581,7 @@ class Box {
         if (typeof node === 'string') {
             const component = boxes.get(node);
             if (component === undefined) {
-                throw new Error(`Box "${node}" has not been defined yet.`);
+                throw new Error(`The box "${node}" has not been defined yet.`);
             }
             const type = encode(component.type);
             const name = encode(component.name);
@@ -3538,7 +3594,7 @@ class Box {
             this.node = query(node);
             const component = boxes.get(this.name);
             if (component === undefined) {
-                throw new Error(`Box "${this.name}" has not been defined yet.`);
+                throw new Error(`The box "${this.name}" has not been defined yet.`);
             }
             if (component.value && !this.node.hasAttr('value')) {
                 this.value = component.value;
@@ -3569,7 +3625,7 @@ class Box {
             container.removeClass('lake-box-hovered');
         });
         container.on('click', () => {
-            debug(`Box "${this.name}" (id = ${this.node.id}) value:`);
+            debug(`The box "${this.name}" (id = ${this.node.id}) value:`);
             debug(this.value);
         });
         if (this.type === 'block' && this.node.isContentEditable) {
@@ -3590,11 +3646,11 @@ class Box {
         if (value === '') {
             return {};
         }
-        return JSON.parse(Base64.decode(value));
+        return JSON.parse(fromBase64(value));
     }
     // Sets the value of the box.
     set value(value) {
-        this.node.attr('value', Base64.encode(JSON.stringify(value)));
+        this.node.attr('value', toBase64(JSON.stringify(value)));
     }
     updateValue(valueKey, valueValue) {
         const value = this.value;
@@ -3608,7 +3664,7 @@ class Box {
         }
         this.value = value;
     }
-    // Returns the editor instance of the box.
+    // Returns an instance of the editor that includes the box.
     getEditor() {
         const container = this.node.closest('div[contenteditable]');
         return container.length > 0 ? editors.get(container.id) : undefined;
@@ -3654,15 +3710,16 @@ class Box {
         if (component === undefined) {
             return;
         }
+        this.event.emit('beforeunmount');
+        this.event.removeAllListeners();
         this.addFramework();
         const content = component.render(this);
         if (content !== undefined) {
             const container = this.getContainer();
-            const newContainer = container.clone(false);
-            newContainer.append(content);
-            morph(container, newContainer);
+            container.empty();
+            container.append(content);
         }
-        debug(`Box "${this.name}" (id: ${this.node.id}) rendered`);
+        debug(`The box "${this.name}" (id: ${this.node.id}) rendered`);
     }
     // Destroys a rendered box.
     unmount() {
@@ -3670,7 +3727,7 @@ class Box {
         this.event.emit('beforeunmount');
         this.event.removeAllListeners();
         this.node.empty();
-        debug(`Box "${this.name}" (id: ${this.node.id}) unmounted`);
+        debug(`The box "${this.name}" (id: ${this.node.id}) unmounted`);
     }
     // Returns a HTML string of the box.
     getHTML() {
@@ -3918,6 +3975,7 @@ var index = /*#__PURE__*/Object.freeze({
     encode: encode,
     fileSize: fileSize,
     fixNumberedList: fixNumberedList,
+    fromBase64: fromBase64,
     getBox: getBox,
     getCSS: getCSS,
     getDeepest: getDeepest,
@@ -3936,6 +3994,7 @@ var index = /*#__PURE__*/Object.freeze({
     setBlockIndent: setBlockIndent,
     splitNodes: splitNodes,
     template: template,
+    toBase64: toBase64,
     toHex: toHex,
     toNodeList: toNodeList,
     uploadFile: uploadFile,
@@ -4236,13 +4295,7 @@ class HTMLParser {
         }
         return html.trim();
     }
-    // Returns the result as node list.
-    getNodeList() {
-        const html = this.getHTML();
-        const body = this.parseHTML(html);
-        return body.children();
-    }
-    // Returns the result as document fragment.
+    // Returns a document fragment.
     getFragment() {
         const html = this.getHTML();
         const body = this.parseHTML(html);
@@ -5080,7 +5133,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.1.15";
+var version = "0.1.17";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5258,7 +5311,7 @@ class Selection {
     insertBox(boxName, boxValue) {
         const box = insertBox(this.range, boxName, boxValue);
         if (!box) {
-            throw new Error(`Box "${boxName}" cannot be inserted outside the editor.`);
+            throw new Error(`The box "${boxName}" cannot be inserted outside the editor.`);
         }
         return box;
     }
@@ -5361,7 +5414,7 @@ class History {
     addIdToBoxes(node) {
         node.find('lake-box').each(nativeNode => {
             const boxNode = new Nodes(nativeNode);
-            const id = md5(`${boxNode.attr('type')}-${boxNode.attr('name')}-${boxNode.attr('value')}`);
+            const id = `${boxNode.attr('name')}-${boxNode.attr('value')}`;
             boxNode.attr('id', id);
         });
     }
@@ -5381,7 +5434,8 @@ class History {
             },
             afterAttributeUpdated: (attributeName, nativeNode) => {
                 const node = new Nodes(nativeNode);
-                if (attributeName === 'value' && node.name === 'lake-box') {
+                if (['name', 'value'].indexOf(attributeName) >= 0 && node.name === 'lake-box') {
+                    getBox(node).unmount();
                     const instanceMap = getInstanceMap(container.id);
                     instanceMap.delete(node.id);
                 }
@@ -5397,7 +5451,7 @@ class History {
         this.removeIdfromBoxes(otherContainer);
     }
     get canUndo() {
-        return this.index > 1 && !!this.list[this.index - 1];
+        return this.index > 1 && !!this.list[this.index - 2];
     }
     get canRedo() {
         return !!this.list[this.index];
@@ -5517,53 +5571,65 @@ class History {
     }
 }
 
-const shortenedTypeMap = new Map([
-    ['#', 'shift+#'],
+const aliasMap = new Map([
+    ['arrow-left', 'left'],
+    ['arrow-right', 'right'],
+    ['arrow-up', 'up'],
+    ['arrow-down', 'down'],
 ]);
 class Keystroke {
     constructor(container) {
         this.keydownEventList = [];
         this.keyupEventList = [];
         this.container = container;
+        this.container.on('keydown', event => {
+            const keyboardEvent = event;
+            for (const item of this.keydownEventList) {
+                if (isKeyHotkey(item.type, keyboardEvent)) {
+                    if (item.listener(keyboardEvent) === false) {
+                        break;
+                    }
+                }
+            }
+        });
+        this.container.on('keyup', event => {
+            const keyboardEvent = event;
+            for (const item of this.keyupEventList) {
+                if (isKeyHotkey(item.type, keyboardEvent)) {
+                    if (item.listener(keyboardEvent) === false) {
+                        break;
+                    }
+                }
+            }
+        });
     }
     normalizeType(type) {
         var _a;
-        type = (_a = shortenedTypeMap.get(type)) !== null && _a !== void 0 ? _a : type;
-        type = type.replace(/(^|\+|\s)mod(\+|\s|$)/g, '$1$mod$2').
-            replace(/shift|control|alt|meta|enter|tab|backspace|delete|space|escape|arrow-left|arrow-right|arrow-up|arrow-down/, (match) => match.charAt(0).toUpperCase() + camelCase(match.substring(1))).
-            replace(/(^|\+|\s)([a-z])(\+|\s|$)/g, (match, p1, p2, p3) => `${p1}Key${p2.toUpperCase()}${p3}`);
+        type = (_a = aliasMap.get(type)) !== null && _a !== void 0 ? _a : type;
         return type;
     }
     // Sets a keydown shortcut.
     setKeydown(type, listener) {
         type = this.normalizeType(type);
-        const handler = createKeybindingsHandler({
-            [type]: event => listener(event),
-        });
         this.keydownEventList.push({
             type,
             listener,
         });
-        this.container.on('keydown', handler);
     }
     // Sets a keyup shortcut.
     setKeyup(type, listener) {
         type = this.normalizeType(type);
-        const handler = createKeybindingsHandler({
-            [type]: event => listener(event),
-        });
         this.keyupEventList.push({
             type,
             listener,
         });
-        this.container.on('keyup', handler);
     }
     // Executes the keydown shortcuts.
     keydown(type) {
         type = this.normalizeType(type);
         for (const item of this.keydownEventList) {
             if (item.type === type) {
-                if (item.listener(new Event(type)) === false) {
+                if (item.listener(new KeyboardEvent(type)) === false) {
                     break;
                 }
             }
@@ -5574,7 +5640,7 @@ class Keystroke {
         type = this.normalizeType(type);
         for (const item of this.keyupEventList) {
             if (item.type === type) {
-                if (item.listener(new Event(type)) === false) {
+                if (item.listener(new KeyboardEvent(type)) === false) {
                     break;
                 }
             }
@@ -5730,9 +5796,7 @@ class Editor {
                 box.event.emit('blur');
             });
         }, 50, {
-            leading: false,
-            trailing: true,
-            maxWait: 50,
+            immediate: true,
         });
         // Triggers the statechange event when the current selection of the editor is changed.
         this.emitStateChangeEvent = debounce(() => {
@@ -5776,10 +5840,8 @@ class Editor {
             }
             this.event.emit('statechange', state);
             this.state = state;
-        }, 100, {
-            leading: false,
-            trailing: true,
-            maxWait: 100,
+        }, 50, {
+            immediate: false,
         });
         if (!config.root) {
             throw new Error('The root of the config must be specified.');
@@ -5814,7 +5876,7 @@ class Editor {
     // Adds or Removes a placeholder class.
     togglePlaceholderClass(value) {
         value = denormalizeValue(value);
-        const className = 'lake-show-placeholder';
+        const className = 'lake-placeholder';
         if (value.replace('<focus />', '') === '<p><br /></p>') {
             this.container.addClass(className);
         }
@@ -5866,6 +5928,18 @@ class Editor {
         this.container.on('compositionend', () => {
             this.isComposing = false;
         });
+        this.container.on('beforeinput', event => {
+            const inputEvent = event;
+            // <p><br /><focus /></p>
+            // When the caret is positioned behind a <br> tag, the input event is triggered twice after inserting a sharp(#) in composition mode.
+            if (this.isComposing && inputEvent.inputType === 'insertText') {
+                inputEvent.preventDefault();
+                this.isComposing = false;
+                this.history.save({
+                    inputType: 'insertText',
+                });
+            }
+        });
         this.container.on('input', event => {
             const inputEvent = event;
             // Here setTimeout is necessary because isComposing is not false after ending composition.
@@ -5877,6 +5951,9 @@ class Editor {
                 }
                 // isComposing is false after ending composition because compositionend event has been emitted.
                 if (this.isComposing) {
+                    if (inputEvent.inputType === 'insertCompositionText') {
+                        this.container.removeClass('lake-placeholder');
+                    }
                     this.event.emit('input', inputEvent);
                     return;
                 }
@@ -5959,6 +6036,7 @@ class Editor {
     }
     // Fixes wrong content, especially empty tag.
     fixContent() {
+        const range = this.selection.range;
         let changed = false;
         let children = this.container.children();
         for (const child of children) {
@@ -5971,7 +6049,7 @@ class Editor {
         children = this.container.children();
         if (children.length === 0) {
             this.container.html('<p><br /></p>');
-            this.selection.range.shrinkAfter(this.container);
+            range.shrinkAfter(this.container);
             changed = true;
             debug('Content fixed: default paragraph was added');
         }
@@ -5981,11 +6059,23 @@ class Editor {
                 const paragraph = query('<p />');
                 child.before(paragraph);
                 paragraph.append(child);
-                this.selection.range.shrinkAfter(paragraph);
+                range.shrinkAfter(paragraph);
                 changed = true;
                 debug(`Content fixed: void element "${child.name}" was wrapped in paragraph`);
             }
         }
+        // In composition mode (e.g., when a user starts entering a Chinese character using a Pinyin IME),
+        // uncompleted text is inserted if the caret is positioned behind a <br> tag.
+        // To fix this bug, the caret needs to be moved to the front of the <br> tag.
+        if (range.isCollapsed) {
+            const prevNode = range.getPrevNode();
+            const nextNode = range.getNextNode();
+            if (prevNode.name === 'br' && nextNode.length === 0) {
+                range.setStartBefore(prevNode);
+                range.collapseToStart();
+                debug('Range fixed: the caret has been moved to the front of the <br> tag');
+            }
+        }
         return changed;
     }
     // Sets default config for a plugin.
@@ -6033,8 +6123,12 @@ class Editor {
     }
     // Scrolls to the caret or the range of the selection.
     scrollToCaret() {
+        const range = this.selection.range;
+        if (range.isBox) {
+            return;
+        }
         // Creates an artificial caret that is the same size as the caret at the current caret position.
-        const rangeRect = this.selection.range.getRect();
+        const rangeRect = range.getRect();
         if (rangeRect.x === 0 || rangeRect.y === 0) {
             return;
         }
@@ -6623,6 +6717,15 @@ const toolbarItems = [
             editor.command.execute(value);
         },
     },
+    {
+        name: 'equation',
+        type: 'button',
+        icon: icons.get('equation'),
+        tooltip: locale => locale.toolbar.equation(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
     {
         name: 'heading',
         type: 'dropdown',
@@ -6838,6 +6941,7 @@ class Toolbar {
             menuType: item.menuType,
             menuItems: item.menuItems,
             menuWidth: item.menuWidth,
+            menuHeight: item.menuHeight,
             tabIndex: -1,
             placement: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
@@ -6991,8 +7095,10 @@ const hrBox = {
         if (!editor) {
             return;
         }
+        const boxContainer = box.getContainer();
         const rootNode = query('<div class="lake-hr"><hr /></div>');
-        box.getContainer().append(rootNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
         rootNode.on('click', () => {
             editor.selection.selectBox(box);
         });
@@ -7087,10 +7193,10 @@ const codeBlockBox = {
             return;
         }
         const rootNode = query('<div class="lake-code-block" />');
-        const container = box.getContainer();
-        container.css('width', `${editor.container.innerWidth() - 2}px`);
-        container.empty();
-        container.append(rootNode);
+        const boxContainer = box.getContainer();
+        boxContainer.css('width', `${editor.container.innerWidth() - 2}px`);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
         const codeBlockNativeNode = rootNode.get(0);
         if (!codeBlockNativeNode) {
             return;
@@ -7165,24 +7271,24 @@ const codeBlockBox = {
             defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
             tooltip: editor.locale.codeBlock.langType(),
             menuType: 'list',
+            menuHeight: '200px',
             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,
                 });
+                box.unmount();
+                box.render();
+                editor.selection.selectBox(box);
                 editor.history.save();
             },
         });
         dropdown.render();
         const resizeListener = () => {
-            container.css('width', `${editor.container.innerWidth() - 2}px`);
+            boxContainer.css('width', `${editor.container.innerWidth() - 2}px`);
         };
         editor.event.on('resize', resizeListener);
         rootNode.on('click', () => {
@@ -7448,7 +7554,7 @@ function openFullScreen(box) {
     lightbox.loadAndOpen(currentIndex);
 }
 // Displays error icon and filename.
-function renderError(rootNode, box) {
+function renderError$1(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
         if (!editor) {
@@ -7493,7 +7599,7 @@ function renderUploading(rootNode, box) {
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(rootNode, box);
+            yield renderError$1(rootNode, box);
             return;
         }
         const maxWidth = editor.container.innerWidth() - 2;
@@ -7557,7 +7663,7 @@ function renderDone(rootNode, box) {
             return;
         }
         if (!imageInfo.width || !imageInfo.height) {
-            yield renderError(rootNode, box);
+            yield renderError$1(rootNode, box);
             return;
         }
         let width = value.width;
@@ -7630,26 +7736,26 @@ const imageBox = {
             box.node.hide();
             return;
         }
-        const container = box.getContainer();
-        if (value.width && value.height && container.find('.lake-progress').length === 0) {
-            container.css({
+        const boxContainer = box.getContainer();
+        if (value.width && value.height && boxContainer.find('.lake-progress').length === 0) {
+            boxContainer.css({
                 width: `${value.width}px`,
                 height: `${value.height}px`,
             });
-            container.empty();
+            boxContainer.empty();
             const placeholderNode = query('<div class="lake-image-placeholder" />');
-            container.append(placeholderNode);
+            boxContainer.append(placeholderNode);
             const imageIcon = icons.get('image');
             if (imageIcon) {
                 placeholderNode.append(imageIcon);
             }
         }
-        if (container.first().length === 0) {
+        if (boxContainer.first().length === 0) {
             // The following code is for unit testing because some test cases need to
             // select the content of the box before it is completely loaded.
             // Example:
             // range.setStart(box.getContainer(), 1);
-            container.append('<div />');
+            boxContainer.append('<div />');
         }
         // for test
         if (value.status === 'loading') {
@@ -7662,14 +7768,14 @@ const imageBox = {
             promise = renderUploading(rootNode, box);
         }
         else if (value.status === 'error') {
-            promise = renderError(rootNode, box);
+            promise = renderError$1(rootNode, box);
         }
         else {
             promise = renderDone(rootNode, box);
         }
         promise.then(() => {
-            container.empty();
-            container.append(rootNode);
+            boxContainer.empty();
+            boxContainer.append(rootNode);
             rootNode.find('.lake-button-view').on('click', () => openFullScreen(box));
             if (editor.readonly) {
                 rootNode.find('.lake-button-remove').hide();
@@ -7829,12 +7935,12 @@ const videoBox = {
                     showVideo(box);
                 },
             });
-            formNode.find('input[name="url"]').on('keydown', createKeybindingsHandler({
-                'Enter': event => {
+            formNode.find('input[name="url"]').on('keydown', event => {
+                if (isKeyHotkey('enter', event)) {
                     event.preventDefault();
                     button.node.emit('click');
-                },
-            }));
+                }
+            });
             button.render();
             rootNode.append(formNode);
             appendButtonGroup(box);
@@ -7919,12 +8025,12 @@ const fileBox = {
             box.node.hide();
             return;
         }
-        const container = box.getContainer();
+        const boxContainer = box.getContainer();
         const rootNode = query('<div class="lake-file" />');
         rootNode.addClass(`lake-file-${value.status}`);
         appendContent(rootNode, box);
-        container.empty();
-        container.append(rootNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
         if (!editor.readonly) {
             rootNode.on('click', () => {
                 editor.selection.selectBox(box);
@@ -7949,16 +8055,100 @@ const emojiBox = {
             return;
         }
         const value = box.value;
+        const boxContainer = box.getContainer();
         const rootNode = query(safeTemplate `
       <div class="lake-emoji"><img src="${value.url}" title="${value.title}" /></div>
     `);
-        box.getContainer().append(rootNode);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
         rootNode.on('click', () => {
             editor.selection.selectBox(box);
         });
     },
 };
 
+const defaultExpression = String.raw `\sqrt{x}`;
+function renderError(box) {
+    const editor = box.getEditor();
+    if (!editor) {
+        return;
+    }
+    if (editor.readonly) {
+        box.node.hide();
+        return;
+    }
+    const defaultCode = (box.value.code || '').trim();
+    const rootNode = box.getContainer().find('.lake-equation');
+    rootNode.addClass('lake-equation-error');
+    rootNode.text(defaultCode);
+    rootNode.on('click', () => {
+        editor.selection.selectBox(box);
+    });
+    editor.config.onMessage('warning', `
+    The box "${box.name}" (id: ${box.node.id}) failed to display because window.katex was not found.
+    Please check if the "katex" library is added to this page.
+  `.trim());
+}
+const equationBox = {
+    type: 'inline',
+    name: 'equation',
+    render: box => {
+        const editor = box.getEditor();
+        if (!editor) {
+            return;
+        }
+        const rootNode = query('<div class="lake-equation" />');
+        const boxContainer = box.getContainer();
+        boxContainer.empty();
+        boxContainer.append(rootNode);
+        const katex = window.katex;
+        if (!katex) {
+            renderError(box);
+            return;
+        }
+        const defaultCode = (box.value.code || '').trim();
+        const viewNode = query('<div class="lake-equation-view" />');
+        rootNode.append(viewNode);
+        viewNode.html(window.katex.renderToString(defaultCode || defaultExpression, {
+            throwOnError: false,
+        }));
+        viewNode.on('click', () => {
+            editor.selection.selectBox(box);
+        });
+        const formNode = query(safeTemplate `
+      <div class="lake-equation-form">
+        <div class="lake-row">
+          <textarea name="code" placeholder="${editor.locale.equation.placeholder()}"></textarea>
+        </div>
+        <div class="lake-row lake-button-row"></div>
+      </div>
+    `);
+        rootNode.append(formNode);
+        const textareaNode = formNode.find('textarea');
+        const textareaNativeNode = textareaNode.get(0);
+        textareaNativeNode.value = defaultCode;
+        textareaNode.on('input', () => {
+            const code = textareaNativeNode.value.trim();
+            viewNode.html(window.katex.renderToString(code || defaultExpression, {
+                throwOnError: false,
+            }));
+            box.updateValue('code', code);
+        });
+        const button = new Button({
+            root: formNode.find('.lake-button-row'),
+            name: 'save',
+            type: 'primary',
+            text: editor.locale.equation.save(),
+            onClick: () => {
+                editor.selection.range.selectBoxEnd(box.node);
+                editor.selection.sync();
+                editor.history.save();
+            },
+        });
+        button.render();
+    },
+};
+
 var copy = (editor) => {
     editor.event.on('copy', event => {
         const range = editor.selection.range;
@@ -8393,6 +8583,7 @@ var undo = (editor) => {
         return;
     }
     editor.command.add('undo', {
+        isDisabled: () => !editor.history.canUndo,
         execute: () => {
             editor.history.undo();
         },
@@ -8412,6 +8603,7 @@ var redo = (editor) => {
         return;
     }
     editor.command.add('redo', {
+        isDisabled: () => !editor.history.canRedo,
         execute: () => {
             editor.history.redo();
         },
@@ -9052,18 +9244,18 @@ class LinkPopup {
             },
         });
         button.render();
-        this.container.find('input[name="url"]').on('keydown', createKeybindingsHandler({
-            'Enter': event => {
+        this.container.find('input[name="url"]').on('keydown', event => {
+            if (isKeyHotkey('enter', event)) {
                 event.preventDefault();
                 button.node.emit('click');
-            },
-        }));
-        this.container.find('input[name="title"]').on('keydown', createKeybindingsHandler({
-            'Enter': event => {
+            }
+        });
+        this.container.find('input[name="title"]').on('keydown', event => {
+            if (isKeyHotkey('enter', event)) {
                 event.preventDefault();
                 button.node.emit('click');
-            },
-        }));
+            }
+        });
     }
     // Remove link
     appendUnlinkButton() {
@@ -9386,6 +9578,36 @@ var emoji = (editor) => {
     });
 };
 
+var equation = (editor) => {
+    if (!window.katex) {
+        return;
+    }
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('equation', {
+        execute: (value) => {
+            const box = editor.selection.insertBox('equation', value);
+            editor.selection.selectBox(box);
+            editor.history.save();
+        },
+    });
+};
+
+var specialCharacter = (editor) => {
+    if (editor.readonly) {
+        return;
+    }
+    editor.command.add('specialCharacter', {
+        execute: (value) => {
+            const fragment = new Fragment();
+            fragment.append(document.createTextNode(value));
+            editor.selection.insertFragment(fragment);
+            editor.history.save();
+        },
+    });
+};
+
 const headingTypeMap = new Map([
     ['#', 'h1'],
     ['##', 'h2'],
@@ -10008,7 +10230,8 @@ var backspaceKey = (editor) => {
             editor.history.save();
             return;
         }
-        if (prevNode.name === 'br' && prevNode.prev().length > 0) {
+        const nextNode = range.getNextNode();
+        if (prevNode.name === 'br' && nextNode.length > 0) {
             event.preventDefault();
             range.setStartBefore(prevNode);
             range.collapseToStart();
@@ -10156,8 +10379,12 @@ var tabKey = (editor) => {
         if (editor.config.indentWithTab === false) {
             return;
         }
+        const range = editor.selection.range;
+        if (range.isInsideBox) {
+            return;
+        }
         event.preventDefault();
-        const blocks = editor.selection.range.getBlocks();
+        const blocks = range.getBlocks();
         for (const block of blocks) {
             if (block.name !== 'p' || block.css('text-indent') === '2em') {
                 setBlockIndent(block, 'increase');
@@ -10321,6 +10548,7 @@ Editor.box.add(imageBox);
 Editor.box.add(videoBox);
 Editor.box.add(fileBox);
 Editor.box.add(emojiBox);
+Editor.box.add(equationBox);
 Editor.plugin.add(copy);
 Editor.plugin.add(cut);
 Editor.plugin.add(paste);
@@ -10353,6 +10581,8 @@ Editor.plugin.add(image);
 Editor.plugin.add(video);
 Editor.plugin.add(file);
 Editor.plugin.add(emoji);
+Editor.plugin.add(equation);
+Editor.plugin.add(specialCharacter);
 Editor.plugin.add(markdown);
 Editor.plugin.add(enterKey);
 Editor.plugin.add(shiftEnterKey);