lakelib 0.1.22 → 0.1.23

package/lib/lake.js

@@ -1098,6 +1098,15 @@ class Nodes {
             element.innerText = value;
         });
     }
+    value(value) {
+        if (value === undefined) {
+            const inputElement = this.get(0);
+            return inputElement.value;
+        }
+        return this.eachElement(element => {
+            element.value = value;
+        });
+    }
     outerHTML() {
         const element = this.get(0);
         return element.outerHTML;
@@ -1506,7 +1515,7 @@ class Range {
     selectBox(boxNode) {
         const boxContainer = boxNode.find('.lake-box-container');
         if (boxContainer.length === 0) {
-            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.setStart(boxContainer, 0);
         this.collapseToStart();
@@ -1515,7 +1524,7 @@ class Range {
     selectBoxStart(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(0));
         this.collapseToStart();
@@ -1524,7 +1533,7 @@ class Range {
     selectBoxEnd(boxNode) {
         const boxStrip = boxNode.find('.lake-box-strip');
         if (boxStrip.length === 0) {
-            throw new Error(`The box cannot be selected because the box "${boxNode.attr('name')}" (id=${boxNode.id}) has not been rendered yet.`);
+            throw new Error(`The box "${boxNode.attr('name')}" (id=${boxNode.id}) cannot be selected because it has not been rendered yet.`);
         }
         this.selectNodeContents(boxStrip.eq(1));
         this.collapseToStart();
@@ -2770,7 +2779,7 @@ function morph(node, otherNode, config = {}) {
 }
 
 // Returns an object that indicates the specified node's position relative to the viewport.
-function nodeAndView(node) {
+function nodePosition(node) {
     const nativeNode = node.get(0);
     const rect = nativeNode.getBoundingClientRect();
     let left = rect.left;
@@ -2801,6 +2810,15 @@ function nodeAndView(node) {
     return position;
 }
 
+// If a node is not visible, scrolls the container that contains this node to its position to make it visible.
+// If the node is visible, then scrolling takes place.
+function scrollToNode(node, options) {
+    const position = nodePosition(node);
+    if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
+        node.get(0).scrollIntoView(options);
+    }
+}
+
 const boxInstances = new Map();
 function getInstanceMap(id) {
     let instanceMap = boxInstances.get(id);
@@ -2916,6 +2934,42 @@ var enUS = {
         equation: 'Equation',
         removeColor: 'Remove color',
     },
+    slash: {
+        heading1: 'Heading 1',
+        heading1Desc: 'Create a heading level 1',
+        heading2: 'Heading 2',
+        heading2Desc: 'Create a heading level 2',
+        heading3: 'Heading 3',
+        heading3Desc: 'Create a heading level 3',
+        heading4: 'Heading 4',
+        heading4Desc: 'Create a heading level 4',
+        heading5: 'Heading 5',
+        heading5Desc: 'Create a heading level 5',
+        heading6: 'Heading 6',
+        heading6Desc: 'Create a heading level 6',
+        paragraph: 'Paragraph',
+        paragraphDesc: 'Create a paragraph',
+        blockQuote: 'Block quotation',
+        blockQuoteDesc: 'Create a block quotation',
+        numberedList: 'Numbered list',
+        numberedListDesc: 'Create a numbered list',
+        bulletedList: 'Bulleted list',
+        bulletedListDesc: 'Create a bulleted list',
+        checklist: 'Checklist',
+        checklistDesc: 'Create a checklist',
+        hr: 'Horizontal line',
+        hrDesc: 'Insert a horizontal line',
+        codeBlock: 'Code block',
+        codeBlockDesc: 'Insert a code block',
+        video: 'Video',
+        videoDesc: 'Insert a video from YouTube',
+        equation: 'Equation',
+        equationDesc: 'Insert TeX expression in text',
+        image: 'Image',
+        imageDesc: 'Upload an image',
+        file: 'File',
+        fileDesc: 'Upload a file',
+    },
     link: {
         newLink: 'New link',
         url: 'Link URL',
@@ -3005,6 +3059,42 @@ var zhCN = {
         equation: '公式',
         removeColor: '默认',
     },
+    slash: {
+        heading1: '标题 1',
+        heading1Desc: '创建标题 1',
+        heading2: '标题 2',
+        heading2Desc: '创建标题 2',
+        heading3: '标题 3',
+        heading3Desc: '创建标题 3',
+        heading4: '标题 4',
+        heading4Desc: '创建标题 4',
+        heading5: '标题 5',
+        heading5Desc: '创建标题 5',
+        heading6: '标题 6',
+        heading6Desc: '创建标题 6',
+        paragraph: '正文',
+        paragraphDesc: '把当前段落改成正文',
+        blockQuote: '引用',
+        blockQuoteDesc: '创建引用',
+        numberedList: '编号',
+        numberedListDesc: '创建编号列表',
+        bulletedList: '项目符号',
+        bulletedListDesc: '创建项目符号列表',
+        checklist: '任务列表',
+        checklistDesc: '创建任务列表',
+        hr: '分割线',
+        hrDesc: '插入分割线',
+        codeBlock: '代码块',
+        codeBlockDesc: '插入代码块',
+        video: '视频',
+        videoDesc: '插入 YouTube 视频',
+        equation: '公式',
+        equationDesc: '支持 TeX 语法',
+        image: '图片',
+        imageDesc: '上传图片',
+        file: '文件',
+        fileDesc: '上传文件',
+    },
     link: {
         newLink: '新链接',
         url: '链接 URL',
@@ -3050,7 +3140,7 @@ var ja = {
         redo: `やり直し (${modifierText('mod+Y')})`,
         selectAll: `すべて選択 (${modifierText('mod+A')})`,
         paragraph: 'テキスト',
-        blockQuote: 'ブロック引用',
+        blockQuote: '引用ブロック',
         numberedList: '番号付きリスト',
         bulletedList: '箇条書きリスト',
         checklist: 'タスクリスト',
@@ -3094,6 +3184,42 @@ var ja = {
         equation: '公式',
         removeColor: 'デフォルト',
     },
+    slash: {
+        heading1: 'タイトル 1',
+        heading1Desc: 'レベル 1 のタイトルを作成',
+        heading2: 'タイトル 2',
+        heading2Desc: 'レベル 2 のタイトルを作成',
+        heading3: 'タイトル 3',
+        heading3Desc: 'レベル 3 のタイトルを作成',
+        heading4: 'タイトル 4',
+        heading4Desc: 'レベル 4 のタイトルを作成',
+        heading5: 'タイトル 5',
+        heading5Desc: 'レベル 5 のタイトルを作成',
+        heading6: 'タイトル 6',
+        heading6Desc: 'レベル 6 のタイトルを作成',
+        paragraph: 'テキスト',
+        paragraphDesc: '段落を作成',
+        blockQuote: '引用ブロック',
+        blockQuoteDesc: '引用ブロックを作成',
+        numberedList: '番号付きリスト',
+        numberedListDesc: '番号付きリストを作成',
+        bulletedList: '箇条書きリスト',
+        bulletedListDesc: '箇条書きリストを作成',
+        checklist: 'タスクリスト',
+        checklistDesc: 'タスクリストを作成',
+        hr: '区切り線',
+        hrDesc: '水平線を挿入',
+        codeBlock: 'コードブロック',
+        codeBlockDesc: 'コードブロックを挿入',
+        video: '動画',
+        videoDesc: 'YouTube から動画を挿入',
+        equation: '公式',
+        equationDesc: 'TeX 式を挿入',
+        image: '画像',
+        imageDesc: '画像をアップロード',
+        file: 'ファイル',
+        fileDesc: 'ファイルをアップロード',
+    },
     link: {
         newLink: '新しいリンク',
         url: 'リンク URL',
@@ -3183,6 +3309,42 @@ var ko = {
         equation: '수식',
         removeColor: '기본색',
     },
+    slash: {
+        heading1: '제목 1',
+        heading1Desc: '1 단계 제목을 작성',
+        heading2: '제목 2',
+        heading2Desc: '2 단계 제목을 작성',
+        heading3: '제목 3',
+        heading3Desc: '3 단계 제목을 작성',
+        heading4: '제목 4',
+        heading4Desc: '4 단계 제목을 작성',
+        heading5: '제목 5',
+        heading5Desc: '5 단계 제목을 작성',
+        heading6: '제목 6',
+        heading6Desc: '6 단계 제목을 작성',
+        paragraph: '텍스트',
+        paragraphDesc: '단락을 작성',
+        blockQuote: '인용문',
+        blockQuoteDesc: '인용문을 작성',
+        numberedList: '순서 목록',
+        numberedListDesc: '순서 목록을 작성',
+        bulletedList: '비순서 목록',
+        bulletedListDesc: '비순서 목록을 작성',
+        checklist: '체크리스트',
+        checklistDesc: '체크리스트를 작성',
+        hr: '구분선',
+        hrDesc: '구분선을 삽입',
+        codeBlock: '코드 블록',
+        codeBlockDesc: '코드 블록을 삽입',
+        video: '동영상',
+        videoDesc: '유튜브 동영상을 삽입',
+        equation: '수식',
+        equationDesc: '텍스 표현식을 삽입',
+        image: '이미지',
+        imageDesc: '이미지를 업로드',
+        file: '파일',
+        fileDesc: '파일을 업로드',
+    },
     link: {
         newLink: '새 링크',
         url: '링크 URL',
@@ -3256,12 +3418,10 @@ class Dropdown {
         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.hideMenu();
         };
         this.config = config;
         this.root = config.root;
@@ -3323,6 +3483,15 @@ class Dropdown {
       `;
             const listNode = query(listContent);
             menuNode.append(listNode);
+            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 (config.menuType === 'character') {
                 listNode.attr('title', menuText);
                 listNode.find('.lake-dropdown-menu-text').text(menuItem.value);
@@ -3355,15 +3524,6 @@ class Dropdown {
         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');
             }
@@ -3387,6 +3547,12 @@ class Dropdown {
         menuNode.css('visibility', '');
         document.addEventListener('click', this.documentClickListener);
     }
+    hideMenu() {
+        const dropdownNode = this.node;
+        const menuNode = dropdownNode.find('.lake-dropdown-menu');
+        menuNode.hide();
+        document.removeEventListener('click', this.documentClickListener);
+    }
     bindEvents() {
         const config = this.config;
         const dropdownNode = this.node;
@@ -3458,8 +3624,7 @@ class Dropdown {
                 this.updateColorAccent(titleNode, value);
             }
             config.onSelect(value);
-            menuNode.hide();
-            document.removeEventListener('click', this.documentClickListener);
+            this.hideMenu();
         });
     }
     render() {
@@ -3512,8 +3677,8 @@ class Dropdown {
         this.bindEvents();
     }
     unmount() {
+        this.hideMenu();
         this.node.remove();
-        document.removeEventListener('click', this.documentClickListener);
     }
 }
 
@@ -3521,13 +3686,13 @@ class BoxToolbar {
     constructor(config) {
         this.buttonItemList = [];
         this.dropdownItemList = [];
+        this.dropdownList = [];
         this.root = query(config.root);
         this.box = config.box;
         this.items = config.items;
         this.locale = config.locale || i18nObject('en-US');
         this.placement = config.placement || 'top';
         this.container = query('<div class="lake-box-toolbar" />');
-        this.root.addClass('lake-custom-properties');
     }
     appendDivider() {
         this.container.append('<div class="lake-toolbar-divider" />');
@@ -3565,12 +3730,13 @@ class BoxToolbar {
             },
         });
         dropdown.render();
+        this.dropdownList.push(dropdown);
     }
-    updatePosition() {
+    position() {
         const boxNode = this.box.node;
         const boxNativeNode = boxNode.get(0);
         const boxRect = boxNativeNode.getBoundingClientRect();
-        const position = nodeAndView(boxNode);
+        const position = nodePosition(boxNode);
         if (position.top < 0 || position.bottom + boxRect.height < 0) {
             this.container.hide();
             return;
@@ -3601,9 +3767,13 @@ class BoxToolbar {
                 this.appendDropdown(item);
             }
         }
-        this.updatePosition();
+        this.position();
     }
+    // Destroys the toolbar.
     unmount() {
+        for (const dropdown of this.dropdownList) {
+            dropdown.unmount();
+        }
         this.container.remove();
     }
 }
@@ -3705,7 +3875,11 @@ class 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;
+        const editor = container.length > 0 ? editors.get(container.id) : undefined;
+        if (!editor) {
+            throw new Error(`The box "${this.name}" (id=${this.node.id}) is not rendered in the editor.`);
+        }
+        return editor;
     }
     // Returns the container node of the box.
     getContainer() {
@@ -3713,11 +3887,15 @@ class Box {
     }
     // Sets a popup toolbar for the box.
     setToolbar(items) {
-        const editor = this.getEditor();
+        let editor;
+        try {
+            editor = this.getEditor();
+        }
+        catch ( /* empty */_a) { /* empty */ }
         let toolbar = null;
         const scrollListener = () => {
             if (toolbar) {
-                toolbar.updatePosition();
+                toolbar.position();
             }
         };
         this.event.on('focus', () => {
@@ -3859,7 +4037,7 @@ function getBody(xhr) {
     try {
         return JSON.parse(text);
     }
-    catch (e) {
+    catch (_a) {
         return text;
     }
 }
@@ -4021,7 +4199,7 @@ var index = /*#__PURE__*/Object.freeze({
     mergeNodes: mergeNodes,
     modifierText: modifierText,
     morph: morph,
-    nodeAndView: nodeAndView,
+    nodePosition: nodePosition,
     normalizeValue: normalizeValue,
     parseStyle: parseStyle,
     query: query,
@@ -4029,6 +4207,7 @@ var index = /*#__PURE__*/Object.freeze({
     removeZWS: removeZWS,
     request: request,
     safeTemplate: safeTemplate,
+    scrollToNode: scrollToNode,
     setBlockIndent: setBlockIndent,
     splitNodes: splitNodes,
     template: template,
@@ -5173,7 +5352,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.1.22";
+var version = "0.1.23";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5247,10 +5426,10 @@ class Selection {
         }
         this.selection = selection;
         this.container = container;
-        this.range = this.getRangeFromNativeSelection();
+        this.range = this.getCurrentRange();
     }
-    // Returns the current selected range from the native selection.
-    getRangeFromNativeSelection() {
+    // Returns a range object currently selected.
+    getCurrentRange() {
         if (this.selection.rangeCount > 0) {
             const range = this.selection.getRangeAt(0);
             return new Range(range);
@@ -5264,7 +5443,7 @@ class Selection {
     }
     // Updates the saved range with the range of the native selection.
     updateByRange() {
-        const newRange = this.getRangeFromNativeSelection();
+        const newRange = this.getCurrentRange();
         if (!this.container.contains(newRange.commonAncestor)) {
             return;
         }
@@ -5416,6 +5595,11 @@ class Command {
         return commandItem.selectedValues(appliedItems);
     }
     execute(name, ...data) {
+        const container = this.selection.container;
+        const range = this.selection.range;
+        if (!container.contains(range.commonAncestor)) {
+            range.shrinkAfter(container);
+        }
         const commandItem = this.getItem(name);
         commandItem.execute.apply(this, data);
         debug(`Command "${name}" executed`);
@@ -5614,12 +5798,6 @@ class History {
     }
 }
 
-const aliasMap = new Map([
-    ['arrow-left', 'left'],
-    ['arrow-right', 'right'],
-    ['arrow-up', 'up'],
-    ['arrow-down', 'down'],
-]);
 class Keystroke {
     constructor(container) {
         this.keydownEventList = [];
@@ -5630,6 +5808,9 @@ class Keystroke {
             if (keyboardEvent.isComposing) {
                 return;
             }
+            if (keyboardEvent.defaultPrevented) {
+                return;
+            }
             for (const item of this.keydownEventList) {
                 if (isKeyHotkey(item.type, keyboardEvent)) {
                     if (item.listener(keyboardEvent) === false) {
@@ -5643,6 +5824,9 @@ class Keystroke {
             if (keyboardEvent.isComposing) {
                 return;
             }
+            if (keyboardEvent.defaultPrevented) {
+                return;
+            }
             for (const item of this.keyupEventList) {
                 if (isKeyHotkey(item.type, keyboardEvent)) {
                     if (item.listener(keyboardEvent) === false) {
@@ -5652,14 +5836,8 @@ class Keystroke {
             }
         });
     }
-    normalizeType(type) {
-        var _a;
-        type = (_a = aliasMap.get(type)) !== null && _a !== void 0 ? _a : type;
-        return type;
-    }
     // Sets a keydown shortcut.
     setKeydown(type, listener) {
-        type = this.normalizeType(type);
         this.keydownEventList.push({
             type,
             listener,
@@ -5667,7 +5845,6 @@ class Keystroke {
     }
     // Sets a keyup shortcut.
     setKeyup(type, listener) {
-        type = this.normalizeType(type);
         this.keyupEventList.push({
             type,
             listener,
@@ -5675,7 +5852,6 @@ class Keystroke {
     }
     // Executes the keydown shortcuts.
     keydown(type) {
-        type = this.normalizeType(type);
         for (const item of this.keydownEventList) {
             if (item.type === type) {
                 if (item.listener(new KeyboardEvent(type)) === false) {
@@ -5686,7 +5862,6 @@ class Keystroke {
     }
     // Executes the keyup shortcuts.
     keyup(type) {
-        type = this.normalizeType(type);
         for (const item of this.keyupEventList) {
             if (item.type === type) {
                 if (item.listener(new KeyboardEvent(type)) === false) {
@@ -5711,15 +5886,26 @@ class BoxManager {
 
 class Plugin {
     constructor() {
-        this.pluginList = [];
+        this.pluginMap = new Map();
     }
-    add(plugin) {
-        this.pluginList.push(plugin);
+    add(name, plugin) {
+        if (this.pluginMap.get(name)) {
+            throw new Error(`Plugin "${name}" is already defined.`);
+        }
+        this.pluginMap.set(name, plugin);
     }
     loadAll(editor) {
-        for (const plugin of this.pluginList) {
-            plugin(editor);
+        const unmountPluginMap = new Map();
+        for (const name of this.pluginMap.keys()) {
+            const plugin = this.pluginMap.get(name);
+            if (plugin && editor.config[name] !== false) {
+                const result = plugin(editor);
+                if (result) {
+                    unmountPluginMap.set(name, result);
+                }
+            }
         }
+        return unmountPluginMap;
     }
 }
 
@@ -5749,6 +5935,7 @@ const defaultConfig = {
             console.error(message);
         }
     },
+    slash: false,
 };
 class Editor {
     constructor(config) {
@@ -5760,25 +5947,26 @@ class Editor {
             selectedNameMap: new Map(),
             selectedValuesMap: new Map(),
         };
+        this.unmountPluginMap = new Map();
         this.isComposing = false;
         this.event = new EventEmitter();
         this.box = Editor.box;
         this.copyListener = event => {
-            const range = this.selection.range;
+            const range = this.selection.getCurrentRange();
             if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
             this.event.emit('copy', event);
         };
         this.cutListener = event => {
-            const range = this.selection.range;
+            const range = this.selection.getCurrentRange();
             if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
             this.event.emit('cut', event);
         };
         this.pasteListener = event => {
-            const range = this.selection.range;
+            const range = this.selection.getCurrentRange();
             if (!this.container.contains(range.commonAncestor)) {
                 return;
             }
@@ -5791,7 +5979,7 @@ class Editor {
         };
         this.clickListener = event => {
             const targetNode = new Nodes(event.target);
-            if (!targetNode.get(0).isConnected || targetNode.closest('.lake-popup').length > 0) {
+            if (!targetNode.get(0).isConnected) {
                 return;
             }
             this.event.emit('click', targetNode);
@@ -5799,6 +5987,9 @@ class Editor {
         this.resizeListener = () => {
             this.event.emit('resize');
         };
+        this.scrollListener = () => {
+            this.event.emit('scroll');
+        };
         this.updateSelectionRange = debounce(() => {
             this.selection.updateByRange();
         }, 1, {
@@ -6116,7 +6307,7 @@ class Editor {
     }
     // Sets default config for a plugin.
     setPluginConfig(name, config) {
-        if (!this.config[name]) {
+        if (typeof this.config[name] !== 'object') {
             this.config[name] = {};
         }
         for (const key of Object.keys(config)) {
@@ -6183,17 +6374,11 @@ class Editor {
         });
         this.overlayContainer.find('.lake-artificial-caret').remove();
         this.overlayContainer.append(artificialCaret);
-        const position = nodeAndView(artificialCaret);
-        // Scrolls the artificial caret element into the visible area of the browser window
-        // if it's not already within the visible area of the browser window.
-        // If the element is already within the visibposition.rightle area of the browser window, then no scrolling takes place.
-        if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
-            artificialCaret.get(0).scrollIntoView({
-                behavior: 'instant',
-                block: 'center',
-                inline: 'nearest',
-            });
-        }
+        scrollToNode(artificialCaret, {
+            behavior: 'instant',
+            block: 'center',
+            inline: 'nearest',
+        });
         artificialCaret.remove();
     }
     // Sets the specified value to the editor.
@@ -6226,7 +6411,7 @@ class Editor {
         query(document.body).append(this.popupContainer);
         this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
-        Editor.plugin.loadAll(this);
+        this.unmountPluginMap = Editor.plugin.loadAll(this);
         if (!this.readonly) {
             this.selection.updateByBookmark();
             this.history.save({
@@ -6237,30 +6422,53 @@ class Editor {
         if (this.toolbar) {
             this.toolbar.render(this);
         }
+        this.root.on('scroll', this.scrollListener);
         document.addEventListener('copy', this.copyListener);
+        window.addEventListener('resize', this.resizeListener);
         if (!this.readonly) {
             document.addEventListener('cut', this.cutListener);
             document.addEventListener('paste', this.pasteListener);
             document.addEventListener('selectionchange', this.selectionchangeListener);
             document.addEventListener('click', this.clickListener);
-            window.addEventListener('resize', this.resizeListener);
             this.bindInputEvents();
             this.bindHistoryEvents();
         }
     }
-    // Destroys the rendered editor.
+    // Destroys the editor.
     unmount() {
+        // Executes delayed executions immediately.
+        this.updateSelectionRange.flush();
+        this.updateBoxSelectionStyle.flush();
+        this.emitStateChangeEvent.flush();
+        for (const name of this.unmountPluginMap.keys()) {
+            const unmountPlugin = this.unmountPluginMap.get(name);
+            if (unmountPlugin) {
+                unmountPlugin();
+                debug(`The plugin "${name}" unmounted`);
+            }
+        }
+        if (this.toolbar) {
+            this.toolbar.unmount();
+        }
+        this.removeBoxGarbage();
+        this.container.find('lake-box').each(boxNativeNode => {
+            const boxNode = query(boxNativeNode);
+            const box = getBox(boxNode);
+            box.unmount();
+        });
         this.event.removeAllListeners();
         this.history.event.removeAllListeners();
+        this.root.off();
+        this.root.removeClass('lake-custom-properties');
         this.root.empty();
         this.popupContainer.remove();
         document.removeEventListener('copy', this.copyListener);
+        window.removeEventListener('resize', this.resizeListener);
         if (!this.readonly) {
             document.removeEventListener('cut', this.cutListener);
             document.removeEventListener('paste', this.pasteListener);
             document.removeEventListener('selectionchange', this.selectionchangeListener);
             document.removeEventListener('click', this.clickListener);
-            window.removeEventListener('resize', this.resizeListener);
         }
     }
 }
@@ -6907,7 +7115,7 @@ const toolbarItems = [
     },
 ];
 
-const defaultItems = [
+const defaultItems$1 = [
     'undo',
     'redo',
     '|',
@@ -6938,8 +7146,9 @@ class Toolbar {
         this.allMenuMap = new Map();
         this.buttonItemList = [];
         this.dropdownItemList = [];
+        this.dropdownList = [];
         this.root = query(config.root);
-        this.items = config.items || defaultItems;
+        this.items = config.items || defaultItems$1;
         if (config.placement) {
             this.placement = config.placement;
         }
@@ -6949,7 +7158,7 @@ class Toolbar {
     appendDivider() {
         this.container.append('<div class="lake-toolbar-divider" />');
     }
-    appendButton(editor, item) {
+    appendNormalButton(editor, item) {
         const button = new Button({
             root: this.container,
             name: item.name,
@@ -6986,8 +7195,9 @@ class Toolbar {
             },
         });
         dropdown.render();
+        this.dropdownList.push(dropdown);
     }
-    appendUpload(editor, item) {
+    appendUploadButton(editor, item) {
         const uploadNode = query(safeTemplate `
       <div class="lake-upload" name="${item.name}">
         <input type="file" />
@@ -7089,7 +7299,6 @@ class Toolbar {
     }
     // Renders a toolbar for the specified editor.
     render(editor) {
-        this.root.empty();
         this.root.append(this.container);
         for (const name of this.items) {
             if (name === '|') {
@@ -7108,7 +7317,7 @@ class Toolbar {
                 }
                 if (item.type === 'button') {
                     this.buttonItemList.push(item);
-                    this.appendButton(editor, item);
+                    this.appendNormalButton(editor, item);
                 }
                 else if (item.type === 'dropdown') {
                     this.allMenuMap.set(item.name, Dropdown.getMenuMap(item.menuItems, editor.locale));
@@ -7116,21 +7325,26 @@ class Toolbar {
                     this.appendDropdown(editor, item);
                 }
                 else if (item.type === 'upload') {
-                    this.appendUpload(editor, item);
+                    this.appendUploadButton(editor, item);
                 }
             }
         }
     }
+    // Destroys the toolbar.
+    unmount() {
+        for (const dropdown of this.dropdownList) {
+            dropdown.unmount();
+        }
+        this.root.removeClass('lake-custom-properties');
+        this.container.remove();
+    }
 }
 
-const hrBox = {
+var hrBox = {
     type: 'block',
     name: 'hr',
     render: box => {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const boxContainer = box.getContainer();
         const rootNode = query('<div class="lake-hr"><hr /></div>');
         boxContainer.empty();
@@ -7219,15 +7433,12 @@ function getHighlightStyle(CodeMirror) {
         { tag: [tags.special(tags.variableName)], color: config.special },
     ]);
 }
-const codeBlockBox = {
+var codeBlockBox = {
     type: 'block',
     name: 'codeBlock',
     render: box => {
         var _a;
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const rootNode = query('<div class="lake-code-block" />');
         const boxContainer = box.getContainer();
         boxContainer.css('width', `${editor.container.innerWidth() - 2}px`);
@@ -7334,6 +7545,7 @@ const codeBlockBox = {
             codeEditor.focus();
         });
         box.event.on('beforeunmount', () => {
+            dropdown.unmount();
             codeEditor.destroy();
             editor.event.off('resize', resizeListener);
             debug('CodeMirror destroyed');
@@ -7411,7 +7623,11 @@ class BoxResizer {
             const pointerNativeNode = pointerNode.get(0);
             // The capture will be implicitly released after a pointerup or pointercancel event.
             // https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
-            pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
+            try {
+                // Test case throws an exception on Firefox.
+                pointerNativeNode.setPointerCapture(pointerEvent.pointerId);
+            }
+            catch ( /* empty */_a) { /* empty */ }
             clientX = pointerEvent.clientX;
             width = boxContainer.width();
             infoNode.show();
@@ -7491,9 +7707,6 @@ function getImageInfo(url) {
 // Opens full screen view.
 function openFullScreen(box) {
     const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
     const dataSource = [];
     let currentIndex = 0;
     const allImageBox = editor.container.find('lake-box[name="image"]');
@@ -7584,9 +7797,6 @@ function openFullScreen(box) {
 function renderError$1(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         box.getContainer().css({
             width: '',
@@ -7620,9 +7830,6 @@ function renderError$1(rootNode, box) {
 function renderUploading(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
         if (!imageInfo.width || !imageInfo.height) {
@@ -7680,9 +7887,6 @@ function renderUploading(rootNode, box) {
 function renderDone(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const boxContainer = box.getContainer();
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
@@ -7750,14 +7954,11 @@ function renderDone(rootNode, box) {
         rootNode.append(imgNode);
     });
 }
-const imageBox = {
+var imageBox = {
     type: 'inline',
     name: 'image',
     render: box => {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         if (editor.readonly && ['uploading', 'loading', 'error'].indexOf(value.status) >= 0) {
             box.node.hide();
@@ -7830,16 +8031,8 @@ function getVideoId(url) {
     const result = /\w+$/i.exec(url || '');
     return result ? result[0] : '';
 }
-function getInputValue(videoNode, name) {
-    const inputElement = videoNode.find(`input[name="${name}"]`);
-    const nativeInputElement = inputElement.get(0);
-    return nativeInputElement.value;
-}
 function appendButtonGroup(box) {
     const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
     const boxContainer = box.getContainer();
     const videoNode = boxContainer.find('.lake-video');
     const buttonGroupNode = query(safeTemplate `
@@ -7861,9 +8054,6 @@ function appendButtonGroup(box) {
 }
 function showVideo(box) {
     const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
     const boxContainer = box.getContainer();
     const value = box.value;
     const width = value.width || 560;
@@ -7912,14 +8102,11 @@ function showVideo(box) {
     }
     rootNode.append(iframeNode);
 }
-const videoBox = {
+var videoBox = {
     type: 'inline',
     name: 'video',
     render: box => {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const locale = editor.locale;
         const value = box.value;
         const boxContainer = box.getContainer();
@@ -7951,7 +8138,7 @@ const videoBox = {
                 type: 'primary',
                 text: locale.video.embed(),
                 onClick: () => {
-                    const url = getInputValue(formNode, 'url');
+                    const url = formNode.find('input[name="url"]').value();
                     if (url.indexOf('https://www.youtube.com/') < 0 || getVideoId(url) === '') {
                         editor.config.onMessage('error', locale.video.urlError());
                         return;
@@ -7995,9 +8182,6 @@ const boxToolbarItems = [
         tooltip: locale => locale.file.remove(),
         onClick: box => {
             const editor = box.getEditor();
-            if (!editor) {
-                return;
-            }
             editor.selection.removeBox(box);
             editor.history.save();
         },
@@ -8005,10 +8189,6 @@ const boxToolbarItems = [
 ];
 function appendContent(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
-        const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         const infoNode = query(safeTemplate `
     <div class="lake-file-info">
@@ -8039,14 +8219,11 @@ function appendContent(rootNode, box) {
         rootNode.append(infoNode);
     });
 }
-const fileBox = {
+var fileBox = {
     type: 'inline',
     name: 'file',
     render: box => {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         if (editor.readonly && ['uploading', 'error'].indexOf(value.status) >= 0) {
             box.node.hide();
@@ -8073,14 +8250,11 @@ const fileBox = {
     },
 };
 
-const emojiBox = {
+var emojiBox = {
     type: 'inline',
     name: 'emoji',
     render: box => {
         const editor = box.getEditor();
-        if (!editor) {
-            return;
-        }
         const value = box.value;
         const boxContainer = box.getContainer();
         const rootNode = query(safeTemplate `
@@ -8097,9 +8271,6 @@ const emojiBox = {
 const defaultExpression = String.raw `\sqrt{x}`;
 function renderError(box) {
     const editor = box.getEditor();
-    if (!editor) {
-        return;
-    }
     if (editor.readonly) {
         box.node.hide();
         return;
@@ -8116,14 +8287,11 @@ function renderError(box) {
     Please check if the "katex" library is added to this page.
   `.trim());
 }
-const equationBox = {
+var 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();
@@ -8152,10 +8320,9 @@ const equationBox = {
     `);
         rootNode.append(formNode);
         const textareaNode = formNode.find('textarea');
-        const textareaNativeNode = textareaNode.get(0);
-        textareaNativeNode.value = defaultCode;
+        textareaNode.value(defaultCode);
         textareaNode.on('input', () => {
-            const code = textareaNativeNode.value.trim();
+            const code = textareaNode.value().trim();
             viewNode.html(window.katex.renderToString(code || defaultExpression, {
                 throwOnError: false,
             }));
@@ -9137,8 +9304,7 @@ var formatPainter = (editor) => {
         if (editor.container.contains(targetNode)) {
             return;
         }
-        const buttonNode = targetNode.closest('button[name="formatPainter"]');
-        if (buttonNode.length > 0) {
+        if (targetNode.closest('button[name="formatPainter"]').length > 0) {
             return;
         }
         editor.container.removeClass(formatPainterClassName);
@@ -9199,7 +9365,7 @@ class LinkPopup {
                 if (!this.linkNode) {
                     return;
                 }
-                const url = this.getInputValue('url');
+                const url = this.container.find('input[name="url"]').value();
                 this.writeClipboardText(url).then((error) => {
                     const svgNode = this.container.find('button[name="copy"] svg');
                     svgNode.hide();
@@ -9245,7 +9411,7 @@ class LinkPopup {
                 if (!this.linkNode) {
                     return;
                 }
-                const url = this.getInputValue('url');
+                const url = this.container.find('input[name="url"]').value();
                 window.open(url);
             },
         });
@@ -9305,22 +9471,15 @@ class LinkPopup {
         });
         button.render();
     }
-    getInputValue(name) {
-        const inputElement = this.container.find(`input[name="${name}"]`);
-        const nativeInputElement = inputElement.get(0);
-        return nativeInputElement.value;
-    }
-    setInputValue(name, value) {
-        const inputElement = this.container.find(`input[name="${name}"]`);
-        const nativeInputElement = inputElement.get(0);
-        nativeInputElement.value = value;
+    get visible() {
+        return this.container.get(0).isConnected && this.container.computedCSS('display') !== 'none';
     }
     save() {
         if (!this.linkNode) {
             return;
         }
-        const url = this.getInputValue('url');
-        let title = this.getInputValue('title');
+        const url = this.container.find('input[name="url"]').value();
+        let title = this.container.find('input[name="title"]').value();
         if (url === '' && title === '') {
             this.linkNode.remove();
             return;
@@ -9331,32 +9490,27 @@ class LinkPopup {
         this.linkNode.attr('href', url);
         this.linkNode.text(title);
     }
-    updatePosition() {
+    position() {
         if (!this.linkNode) {
             return;
         }
-        const position = nodeAndView(this.linkNode);
+        const position = nodePosition(this.linkNode);
         if (position.left < 0 || position.right < 0 || position.top < 0 || position.bottom < 0) {
             this.container.css('visibility', 'hidden');
             return;
         }
         this.container.css('visibility', '');
         const linkNativeNode = this.linkNode.get(0);
-        // Returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
         const linkRect = linkNativeNode.getBoundingClientRect();
         const linkX = linkRect.x + window.scrollX;
         const linkY = linkRect.y + window.scrollY;
-        // link.x + popup.width > window.width
         if (linkRect.x + this.container.width() > window.innerWidth) {
-            // link.x + window.scrollX - (popup.width - link.width)
             this.container.css('left', `${linkX - this.container.width() + linkRect.width}px`);
         }
         else {
             this.container.css('left', `${linkX}px`);
         }
-        // link.y + link.height + popup.height > window.height
         if (linkRect.y + linkRect.height + this.container.height() > window.innerHeight) {
-            // link.y + window.scrollY - popup.height
             this.container.css('top', `${linkY - this.container.height()}px`);
         }
         else {
@@ -9380,13 +9534,13 @@ class LinkPopup {
         this.linkNode = linkNode;
         const url = linkNode.attr('href');
         const title = linkNode.text();
-        this.setInputValue('url', url);
+        this.container.find('input[name="url"]').value(url);
         if (title !== url) {
-            this.setInputValue('title', title);
+            this.container.find('input[name="title"]').value(title);
         }
         this.container.css('visibility', 'hidden');
         this.container.show();
-        this.updatePosition();
+        this.position();
         this.container.css('visibility', '');
         this.container.find('input[name="url"]').focus();
     }
@@ -9407,31 +9561,38 @@ var link = (editor) => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
+            editor.selection.sync();
             editor.history.save();
         },
         onRemove: node => {
             const range = editor.selection.range;
             range.setStartAfter(node);
             range.collapseToStart();
+            editor.selection.sync();
             editor.history.save();
         },
     });
-    editor.root.on('scroll', () => {
-        popup.updatePosition();
+    editor.event.on('scroll', () => {
+        popup.position();
     });
     editor.event.on('resize', () => {
-        popup.updatePosition();
+        popup.position();
     });
     editor.event.on('click', (targetNode) => {
-        if (targetNode.closest('button[name="link"]').length > 0) {
+        if (popup.container.contains(targetNode)) {
             return;
         }
-        const linkNode = targetNode.closest('a');
-        if (linkNode.length === 0) {
-            popup.hide();
+        if (targetNode.closest('button[name="link"]').length > 0) {
             return;
         }
-        if (!editor.container.contains(linkNode) || linkNode.closest('lake-box').length > 0) {
+        const linkNode = targetNode.closest('a');
+        if (linkNode.length === 0 ||
+            !editor.container.contains(linkNode) ||
+            linkNode.closest('lake-box').length > 0) {
+            if (!popup.visible) {
+                return;
+            }
+            editor.selection.sync();
             popup.hide();
             return;
         }
@@ -9613,8 +9774,10 @@ var equation = (editor) => {
     editor.command.add('equation', {
         execute: (value) => {
             const box = editor.selection.insertBox('equation', value);
-            editor.selection.selectBox(box);
             editor.history.save();
+            const boxContainer = box.getContainer();
+            boxContainer.addClass('lake-box-activated');
+            boxContainer.find('textarea').focus();
         },
     });
 };
@@ -10435,7 +10598,7 @@ var arrowKeys = (editor) => {
     if (editor.readonly) {
         return;
     }
-    editor.keystroke.setKeydown('arrow-left', event => {
+    editor.keystroke.setKeydown('left', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -10475,7 +10638,7 @@ var arrowKeys = (editor) => {
             range.selectBox(prevNode);
         }
     });
-    editor.keystroke.setKeydown('arrow-right', event => {
+    editor.keystroke.setKeydown('right', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -10515,7 +10678,7 @@ var arrowKeys = (editor) => {
             range.selectBox(nextNode);
         }
     });
-    editor.keystroke.setKeydown('arrow-up', event => {
+    editor.keystroke.setKeydown('up', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -10534,7 +10697,7 @@ var arrowKeys = (editor) => {
             range.collapseToStart();
         }
     });
-    editor.keystroke.setKeydown('arrow-down', event => {
+    editor.keystroke.setKeydown('down', event => {
         const range = editor.selection.range;
         if (range.isInsideBox) {
             return;
@@ -10576,6 +10739,539 @@ var escapeKey = (editor) => {
     });
 };
 
+const slashItems = [
+    {
+        name: 'heading1',
+        type: 'button',
+        icon: icons.get('heading1'),
+        title: locale => locale.slash.heading1(),
+        description: locale => locale.slash.heading1Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h1');
+        },
+    },
+    {
+        name: 'heading2',
+        type: 'button',
+        icon: icons.get('heading2'),
+        title: locale => locale.slash.heading2(),
+        description: locale => locale.slash.heading2Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h2');
+        },
+    },
+    {
+        name: 'heading3',
+        type: 'button',
+        icon: icons.get('heading3'),
+        title: locale => locale.slash.heading3(),
+        description: locale => locale.slash.heading3Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h3');
+        },
+    },
+    {
+        name: 'heading4',
+        type: 'button',
+        icon: icons.get('heading4'),
+        title: locale => locale.slash.heading4(),
+        description: locale => locale.slash.heading4Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h4');
+        },
+    },
+    {
+        name: 'heading5',
+        type: 'button',
+        icon: icons.get('heading5'),
+        title: locale => locale.slash.heading5(),
+        description: locale => locale.slash.heading5Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h5');
+        },
+    },
+    {
+        name: 'heading6',
+        type: 'button',
+        icon: icons.get('heading6'),
+        title: locale => locale.slash.heading6(),
+        description: locale => locale.slash.heading6Desc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'h6');
+        },
+    },
+    {
+        name: 'paragraph',
+        type: 'button',
+        icon: icons.get('paragraph'),
+        title: locale => locale.slash.paragraph(),
+        description: locale => locale.slash.paragraphDesc(),
+        onClick: editor => {
+            editor.command.execute('heading', 'p');
+        },
+    },
+    {
+        name: 'blockQuote',
+        type: 'button',
+        icon: icons.get('blockQuote'),
+        title: locale => locale.slash.blockQuote(),
+        description: locale => locale.slash.blockQuoteDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
+    {
+        name: 'numberedList',
+        type: 'button',
+        icon: icons.get('numberedList'),
+        title: locale => locale.slash.numberedList(),
+        description: locale => locale.slash.numberedListDesc(),
+        onClick: editor => {
+            editor.command.execute('list', 'numbered');
+        },
+    },
+    {
+        name: 'bulletedList',
+        type: 'button',
+        icon: icons.get('bulletedList'),
+        title: locale => locale.slash.bulletedList(),
+        description: locale => locale.slash.bulletedListDesc(),
+        onClick: editor => {
+            editor.command.execute('list', 'bulleted');
+        },
+    },
+    {
+        name: 'checklist',
+        type: 'button',
+        icon: icons.get('checklist'),
+        title: locale => locale.slash.checklist(),
+        description: locale => locale.slash.checklistDesc(),
+        onClick: editor => {
+            editor.command.execute('list', 'checklist');
+        },
+    },
+    {
+        name: 'hr',
+        type: 'button',
+        icon: icons.get('hr'),
+        title: locale => locale.slash.hr(),
+        description: locale => locale.slash.hrDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
+    {
+        name: 'codeBlock',
+        type: 'button',
+        icon: icons.get('codeBlock'),
+        title: locale => locale.slash.codeBlock(),
+        description: locale => locale.slash.codeBlockDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
+    {
+        name: 'video',
+        type: 'button',
+        icon: icons.get('video'),
+        title: locale => locale.slash.video(),
+        description: locale => locale.slash.videoDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
+    {
+        name: 'equation',
+        type: 'button',
+        icon: icons.get('equation'),
+        title: locale => locale.slash.equation(),
+        description: locale => locale.slash.equationDesc(),
+        onClick: (editor, value) => {
+            editor.command.execute(value);
+        },
+    },
+    {
+        name: 'image',
+        type: 'upload',
+        icon: icons.get('image'),
+        title: locale => locale.slash.image(),
+        description: locale => locale.slash.imageDesc(),
+        accept: 'image/*',
+        multiple: true,
+    },
+    {
+        name: 'file',
+        type: 'upload',
+        icon: icons.get('attachment'),
+        title: locale => locale.slash.file(),
+        description: locale => locale.slash.fileDesc(),
+        accept: '*',
+        multiple: true,
+    },
+];
+
+const slashItemMap = new Map();
+for (const item of slashItems) {
+    slashItemMap.set(item.name, item);
+}
+class SlashPopup {
+    constructor(config) {
+        this.range = null;
+        this.noMouseEvent = false;
+        this.keyword = null;
+        this.keydownListener = (event) => {
+            if (isKeyHotkey('escape', event)) {
+                event.preventDefault();
+                this.hide();
+                return;
+            }
+            const isDownKey = isKeyHotkey('down', event);
+            const isUpKey = isKeyHotkey('up', event);
+            const isEnterKey = isKeyHotkey('enter', event);
+            if (!isDownKey && !isUpKey && !isEnterKey) {
+                return;
+            }
+            const selectedItemNode = this.container.find('.lake-slash-item-selected');
+            if (selectedItemNode.length === 0) {
+                const firstItem = this.container.find('.lake-slash-item').eq(0);
+                scrollToNode(firstItem, {
+                    behavior: 'instant',
+                    block: 'start',
+                });
+                firstItem.addClass('lake-slash-item-selected');
+                return;
+            }
+            this.noMouseEvent = true;
+            if (isDownKey) {
+                event.preventDefault();
+                let nextItemNode = selectedItemNode.next();
+                if (nextItemNode.length === 0) {
+                    nextItemNode = this.container.find('.lake-slash-item').eq(0);
+                }
+                scrollToNode(nextItemNode, {
+                    behavior: 'instant',
+                    block: 'end',
+                });
+                this.container.find('.lake-slash-item').removeClass('lake-slash-item-selected');
+                nextItemNode.addClass('lake-slash-item-selected');
+            }
+            else if (isUpKey) {
+                event.preventDefault();
+                let prevItemNode = selectedItemNode.prev();
+                if (prevItemNode.length === 0) {
+                    const itemNode = this.container.find('.lake-slash-item');
+                    prevItemNode = itemNode.eq(itemNode.length - 1);
+                }
+                scrollToNode(prevItemNode, {
+                    behavior: 'instant',
+                    block: 'start',
+                });
+                this.container.find('.lake-slash-item').removeClass('lake-slash-item-selected');
+                prevItemNode.addClass('lake-slash-item-selected');
+            }
+            else if (isEnterKey) {
+                event.preventDefault();
+                selectedItemNode.emit('click');
+            }
+            window.setTimeout(() => {
+                this.noMouseEvent = false;
+            }, 50);
+        };
+        this.clickListener = (targetNode) => {
+            if (this.container.contains(targetNode)) {
+                return;
+            }
+            this.hide();
+        };
+        this.scrollListener = () => this.position();
+        this.resizeListener = () => this.position();
+        this.editor = config.editor;
+        this.items = config.items;
+        this.root = config.editor.popupContainer;
+        this.container = query('<ul class="lake-slash-popup" />');
+    }
+    getItem(name) {
+        if (typeof name !== 'string') {
+            return name;
+        }
+        const item = slashItemMap.get(name);
+        if (!item) {
+            throw new Error(`SlashItem "${name}" has not been defined yet.`);
+        }
+        return item;
+    }
+    emptyBlock() {
+        const range = this.editor.selection.range;
+        const block = range.commonAncestor.closestBlock();
+        this.hide();
+        block.empty();
+        appendBreak(block);
+        range.shrinkBefore(block);
+    }
+    appendItem(item) {
+        const editor = this.editor;
+        const itemTitle = typeof item.title === 'string' ? item.title : item.title(editor.locale);
+        const itemDescription = typeof item.description === 'string' ? item.description : item.description(editor.locale);
+        const itemNode = query(safeTemplate `
+      <li class="lake-slash-item" name="${item.name}">
+        <div class="lake-slash-icon"></div>
+        <div class="lake-slash-text">
+          <div class="lake-slash-title">${itemTitle}</div>
+          <div class="lake-slash-description">${itemDescription}</div>
+        </div>
+      </li>
+    `);
+        const icon = item.icon;
+        if (icon) {
+            itemNode.find('.lake-slash-icon').append(icon);
+        }
+        this.container.append(itemNode);
+        itemNode.on('mouseenter', () => {
+            if (this.noMouseEvent) {
+                return;
+            }
+            this.container.find('.lake-slash-item').removeClass('lake-slash-item-selected');
+            itemNode.addClass('lake-slash-item-selected');
+        });
+        itemNode.on('mouseleave', () => {
+            if (this.noMouseEvent) {
+                return;
+            }
+            itemNode.removeClass('lake-slash-item-selected');
+        });
+        if (item.type === 'upload') {
+            itemNode.append('<input type="file" />');
+            const fileNode = itemNode.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');
+            }
+            fileNode.on('click', event => event.stopPropagation());
+            fileNode.on('change', event => {
+                editor.focus();
+                this.emptyBlock();
+                const target = event.target;
+                const files = target.files || [];
+                for (const file of files) {
+                    uploadFile({
+                        editor,
+                        name: item.name,
+                        file,
+                        onError: error => editor.config.onMessage('error', error),
+                    });
+                }
+            });
+            itemNode.on('click', () => {
+                fileNativeNode.click();
+            });
+        }
+        else {
+            itemNode.on('click', () => {
+                editor.focus();
+                this.emptyBlock();
+                item.onClick(editor, item.name);
+            });
+        }
+    }
+    get visible() {
+        return this.container.get(0).isConnected && this.container.computedCSS('display') !== 'none';
+    }
+    search(keyword) {
+        const editor = this.editor;
+        const localeEnglish = i18nObject('en-US');
+        keyword = keyword.toLowerCase();
+        const items = [];
+        for (const name of this.items) {
+            const item = this.getItem(name);
+            let itemTitle = typeof item.title === 'string' ? item.title : item.title(editor.locale);
+            itemTitle = itemTitle.toLowerCase();
+            let itemTitleEnglish = typeof item.title === 'string' ? item.title : item.title(localeEnglish);
+            itemTitleEnglish = itemTitleEnglish.toLowerCase();
+            if (itemTitle.indexOf(keyword) >= 0 ||
+                itemTitle.replace(/\s+/g, '').indexOf(keyword) >= 0 ||
+                itemTitleEnglish.indexOf(keyword) >= 0 ||
+                itemTitleEnglish.replace(/\s+/g, '').indexOf(keyword) >= 0) {
+                items.push(typeof name === 'string' ? item.name : name);
+            }
+        }
+        return items;
+    }
+    position() {
+        if (!this.range) {
+            return;
+        }
+        this.container.css('visibility', '');
+        const rangeRect = this.range.get().getBoundingClientRect();
+        const rangeX = rangeRect.x + window.scrollX;
+        const rangeY = rangeRect.y + window.scrollY;
+        if (rangeRect.x + this.container.width() > window.innerWidth) {
+            this.container.css('left', `${rangeX - this.container.width() + rangeRect.width}px`);
+        }
+        else {
+            this.container.css('left', `${rangeX}px`);
+        }
+        if (rangeRect.y + rangeRect.height + this.container.height() > window.innerHeight) {
+            this.container.css('top', `${rangeY - this.container.height() - 5}px`);
+        }
+        else {
+            this.container.css('top', `${rangeY + rangeRect.height + 5}px`);
+        }
+    }
+    render() {
+        this.root.append(this.container);
+        this.update();
+    }
+    update(keyword = null) {
+        if (keyword !== null && this.keyword === keyword) {
+            return;
+        }
+        const items = keyword !== null ? this.search(keyword) : this.items;
+        if (items.length === 0) {
+            this.hide();
+            return;
+        }
+        this.keyword = keyword;
+        this.container.empty();
+        for (const name of items) {
+            const item = this.getItem(name);
+            this.appendItem(item);
+        }
+        const selectedItemNode = this.container.find('.lake-slash-item-selected');
+        if (selectedItemNode.length === 0) {
+            this.container.find('.lake-slash-item').eq(0).addClass('lake-slash-item-selected');
+        }
+        this.position();
+    }
+    show(range, keyword) {
+        const editor = this.editor;
+        if (this.root.find('.lake-slash-popup').length === 0) {
+            this.render();
+        }
+        else {
+            this.update();
+        }
+        this.range = range;
+        this.container.css('visibility', 'hidden');
+        this.container.show();
+        this.position();
+        // for fixing the container's width
+        this.container.css('width', '');
+        this.container.css('width', `${this.container.width()}px`);
+        if (keyword) {
+            this.update(keyword);
+        }
+        this.container.css('visibility', '');
+        document.addEventListener('keydown', this.keydownListener, true);
+        editor.event.on('click', this.clickListener);
+        editor.event.on('scroll', this.scrollListener);
+        editor.event.on('resize', this.resizeListener);
+    }
+    hide() {
+        const editor = this.editor;
+        this.range = null;
+        this.container.hide();
+        document.removeEventListener('keydown', this.keydownListener, true);
+        editor.event.off('click', this.clickListener);
+        editor.event.off('scroll', this.scrollListener);
+        editor.event.off('resize', this.resizeListener);
+    }
+    unmount() {
+        this.hide();
+        this.container.remove();
+    }
+}
+
+const defaultItems = [
+    'heading1',
+    'heading2',
+    'heading3',
+    'heading4',
+    'heading5',
+    'heading6',
+    'paragraph',
+    'blockQuote',
+    'numberedList',
+    'bulletedList',
+    'checklist',
+    'hr',
+];
+function getKeyword(block) {
+    let text = block.text().trim();
+    text = text.replace(/[\u200B\u2060]/g, '');
+    if (!/^\//.test(text)) {
+        return null;
+    }
+    return text.substring(1);
+}
+function showPopup(editor, popup) {
+    const range = editor.selection.range;
+    if (!range.isCollapsed) {
+        return;
+    }
+    const block = range.getBlocks()[0];
+    if (!block) {
+        return;
+    }
+    if (block.find('lake-box').length > 0) {
+        return;
+    }
+    const keyword = getKeyword(block);
+    if (keyword === null) {
+        return;
+    }
+    const slashRange = range.clone();
+    slashRange.selectNodeContents(block);
+    popup.show(slashRange, keyword);
+}
+var slash = (editor) => {
+    editor.setPluginConfig('slash', {
+        items: defaultItems,
+    });
+    if (editor.readonly) {
+        return;
+    }
+    const popup = new SlashPopup({
+        editor,
+        items: editor.config.slash.items,
+    });
+    editor.container.on('keyup', event => {
+        if (editor.isComposing) {
+            return;
+        }
+        const keyboardEvent = event;
+        if (isKeyHotkey(['down', 'up', 'enter'], keyboardEvent)) {
+            return;
+        }
+        if (!popup.visible) {
+            if (isKeyHotkey('/', keyboardEvent)) {
+                showPopup(editor, popup);
+                return;
+            }
+            if (isKeyHotkey(['backspace', 'delete'], keyboardEvent)) {
+                showPopup(editor, popup);
+            }
+            else {
+                return;
+            }
+        }
+        const range = editor.selection.range;
+        const block = range.getBlocks()[0];
+        if (!block) {
+            return;
+        }
+        const keyword = getKeyword(block);
+        if (keyword === null) {
+            popup.hide();
+            return;
+        }
+        popup.update(keyword);
+    });
+    return () => popup.unmount();
+};
+
 Editor.box.add(hrBox);
 Editor.box.add(codeBlockBox);
 Editor.box.add(imageBox);
@@ -10583,48 +11279,49 @@ 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);
-Editor.plugin.add(drop);
-Editor.plugin.add(undo);
-Editor.plugin.add(redo);
-Editor.plugin.add(selectAll);
-Editor.plugin.add(heading);
-Editor.plugin.add(blockQuote);
-Editor.plugin.add(list);
-Editor.plugin.add(align);
-Editor.plugin.add(indent);
-Editor.plugin.add(bold);
-Editor.plugin.add(italic);
-Editor.plugin.add(underline);
-Editor.plugin.add(strikethrough);
-Editor.plugin.add(subscript);
-Editor.plugin.add(superscript);
-Editor.plugin.add(code);
-Editor.plugin.add(fontFamily);
-Editor.plugin.add(fontSize);
-Editor.plugin.add(fontColor);
-Editor.plugin.add(highlight);
-Editor.plugin.add(removeFormat);
-Editor.plugin.add(formatPainter);
-Editor.plugin.add(link);
-Editor.plugin.add(hr);
-Editor.plugin.add(codeBlock);
-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);
-Editor.plugin.add(backspaceKey);
-Editor.plugin.add(deleteKey);
-Editor.plugin.add(tabKey);
-Editor.plugin.add(arrowKeys);
-Editor.plugin.add(escapeKey);
+Editor.plugin.add('copy', copy);
+Editor.plugin.add('cut', cut);
+Editor.plugin.add('paste', paste);
+Editor.plugin.add('drop', drop);
+Editor.plugin.add('undo', undo);
+Editor.plugin.add('redo', redo);
+Editor.plugin.add('selectAll', selectAll);
+Editor.plugin.add('heading', heading);
+Editor.plugin.add('blockQuote', blockQuote);
+Editor.plugin.add('list', list);
+Editor.plugin.add('align', align);
+Editor.plugin.add('indent', indent);
+Editor.plugin.add('bold', bold);
+Editor.plugin.add('italic', italic);
+Editor.plugin.add('underline', underline);
+Editor.plugin.add('strikethrough', strikethrough);
+Editor.plugin.add('subscript', subscript);
+Editor.plugin.add('superscript', superscript);
+Editor.plugin.add('code', code);
+Editor.plugin.add('fontFamily', fontFamily);
+Editor.plugin.add('fontSize', fontSize);
+Editor.plugin.add('fontColor', fontColor);
+Editor.plugin.add('highlight', highlight);
+Editor.plugin.add('removeFormat', removeFormat);
+Editor.plugin.add('formatPainter', formatPainter);
+Editor.plugin.add('link', link);
+Editor.plugin.add('hr', hr);
+Editor.plugin.add('codeBlock', codeBlock);
+Editor.plugin.add('image', image);
+Editor.plugin.add('video', video);
+Editor.plugin.add('file', file);
+Editor.plugin.add('emoji', emoji);
+Editor.plugin.add('equation', equation);
+Editor.plugin.add('specialCharacter', specialCharacter);
+Editor.plugin.add('markdown', markdown);
+Editor.plugin.add('enterKey', enterKey);
+Editor.plugin.add('shiftEnterKey', shiftEnterKey);
+Editor.plugin.add('backspaceKey', backspaceKey);
+Editor.plugin.add('deleteKey', deleteKey);
+Editor.plugin.add('tabKey', tabKey);
+Editor.plugin.add('arrowKeys', arrowKeys);
+Editor.plugin.add('escapeKey', escapeKey);
+Editor.plugin.add('slash', slash);
 
 export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, index as Utils, addMark, deleteContents, fixList, icons, insertBookmark, insertBox, insertFragment, insertLink, insertNode, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, toBookmark };
 //# sourceMappingURL=lake.js.map