lakelib 0.2.1 → 0.2.3

package/lib/lake.js

@@ -813,8 +813,8 @@ class Nodes {
     // Traverses the first node and its parents until it finds an element which can scroll.
     closestScroller() {
         let parent = this.eq(0);
-        while (parent.length > 0 && parent.isElement) {
-            if (['scroll', 'auto'].indexOf(parent.computedCSS('overflow-y')) >= 0) {
+        while (parent.length > 0) {
+            if (parent.isElement && ['scroll', 'auto'].indexOf(parent.computedCSS('overflow-y')) >= 0) {
                 return parent;
             }
             parent = parent.parent();
@@ -1828,7 +1828,7 @@ class Range {
         return marks;
     }
     // Returns the text of the start part of the closest block divided into two parts by the start point of the range.
-    // "<p>one<anchor />two<focus />three</p>" returns "three".
+    // "<p>one<anchor />two<focus />three</p>" returns "one".
     getStartText() {
         const node = this.startNode;
         const offset = this.startOffset;
@@ -1873,6 +1873,45 @@ class Range {
         }
         return text;
     }
+    // Returns a new text range from the specified character to the beginning of the current range.
+    // The specified character must be preceded by a whitespace or be at the beginning of a paragraph,
+    // without being adjacent to other characters. If these conditions are not met, it returns null.
+    getCharacterRange(character) {
+        const newRange = this.clone();
+        newRange.shrink();
+        if (newRange.startOffset === 0) {
+            return null;
+        }
+        if (newRange.startNode.isElement) {
+            const textNode = newRange.startNode.children()[newRange.startOffset - 1];
+            if (!textNode.isText) {
+                return null;
+            }
+            newRange.setEnd(textNode, textNode.text().length);
+            newRange.collapseToEnd();
+        }
+        const textNode = newRange.startNode;
+        const text = textNode.text().slice(0, newRange.startOffset);
+        const lastIndexOfNormalSpace = text.lastIndexOf(` ${character}`);
+        const lastIndexOfNoBreakSpace = text.lastIndexOf(`\xA0${character}`);
+        const lastIndexOfZeroWidthSpace = text.lastIndexOf(`\u200B${character}`);
+        if (lastIndexOfNormalSpace >= 0) {
+            newRange.setStart(textNode, lastIndexOfNormalSpace + 1);
+        }
+        else if (lastIndexOfNoBreakSpace >= 0) {
+            newRange.setStart(textNode, lastIndexOfNoBreakSpace + 1);
+        }
+        else if (lastIndexOfZeroWidthSpace >= 0) {
+            newRange.setStart(textNode, lastIndexOfZeroWidthSpace + 1);
+        }
+        else if (text.indexOf(character) === 0) {
+            newRange.setStart(textNode, 0);
+        }
+        else {
+            return null;
+        }
+        return newRange;
+    }
     // Returns a range object with boundary points identical to the cloned range.
     clone() {
         return new Range(this.range.cloneRange());
@@ -3422,7 +3461,7 @@ loadAllLocales();
 
 class Dropdown {
     constructor(config) {
-        this.documentClickListener = (event) => {
+        this.clickListener = (event) => {
             const targetNode = new Nodes(event.target);
             const titleNode = this.node.find('.lake-dropdown-title');
             if (targetNode.closest('.lake-dropdown-title').get(0) === titleNode.get(0)) {
@@ -3430,18 +3469,22 @@ class Dropdown {
             }
             this.hideMenu();
         };
+        this.scrollListener = () => this.updatePosition();
+        this.resizeListener = () => this.updatePosition();
         this.config = config;
         this.root = config.root;
         this.locale = config.locale || i18nObject('en-US');
-        const placement = config.placement || 'bottom';
+        this.location = config.location || 'local';
+        this.direction = config.direction || 'auto';
         this.node = query(safeTemplate `
-      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}" placement="${placement}">
+      <div class="lake-dropdown lake-${config.menuType}-dropdown" name="${config.name}">
         <button type="button" name="${config.name}" class="lake-dropdown-title">
           <div class="lake-dropdown-${config.icon ? 'icon' : 'text'}"></div>
           <div class="lake-dropdown-down-icon"></div>
         </button>
       </div>
     `);
+        this.menuNode = query('<ul class="lake-popup lake-dropdown-menu lake-custom-properties" />');
         if (config.tabIndex !== undefined) {
             const titleNode = this.node.find('.lake-dropdown-title');
             titleNode.attr('tabindex', config.tabIndex.toString());
@@ -3520,14 +3563,97 @@ class Dropdown {
             }
         }
     }
+    appendMenu() {
+        const config = this.config;
+        const menuNode = this.menuNode;
+        const titleNode = this.node.find('.lake-dropdown-title');
+        const textNode = titleNode.find('.lake-dropdown-text');
+        menuNode.addClass(`lake-${config.menuType}-dropdown-menu`);
+        if (config.menuWidth) {
+            menuNode.css('width', config.menuWidth);
+        }
+        if (config.menuHeight) {
+            menuNode.addClass('lake-dropdown-menu-with-scroll');
+            menuNode.css('height', config.menuHeight);
+        }
+        this.apppendMenuItems(menuNode);
+        if (this.location === 'local') {
+            this.node.append(menuNode);
+        }
+        else {
+            query(document.body).append(menuNode);
+        }
+        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(this.node, [value]);
+            if (textNode.length > 0) {
+                textNode.text(listItem.text());
+            }
+            if (config.menuType === 'color' && value !== '') {
+                this.node.attr('color', value);
+                this.updateColorAccent(titleNode, value);
+            }
+            config.onSelect(value);
+            this.hideMenu();
+        });
+    }
+    updatePosition() {
+        const menuNode = this.menuNode;
+        const dropdownNativeNode = this.node.get(0);
+        const dropdownRect = dropdownNativeNode.getBoundingClientRect();
+        // A overflow width on the left side, greater than 0 indicates an overflow.
+        const leftOverflow = menuNode.width() - (dropdownRect.x + dropdownRect.width);
+        // A overflow width on the right side, greater than 0 indicates an overflow.
+        const rightOverflow = dropdownRect.x + menuNode.width() - window.innerWidth;
+        const rightToLeft = rightOverflow + 50 > 0 && (leftOverflow < 0 || leftOverflow < rightOverflow);
+        if (this.location === 'local') {
+            if (rightToLeft) {
+                menuNode.css('left', 'auto');
+                menuNode.css('right', '0');
+            }
+            else {
+                menuNode.css('left', '');
+                menuNode.css('right', '');
+            }
+            if (this.direction === 'top') {
+                menuNode.css('top', 'auto');
+                menuNode.css('bottom', `${dropdownRect.height}px`);
+            }
+            return;
+        }
+        // A overflow width on the bottom side, greater than 0 indicates an overflow.
+        const bottomOverflow = dropdownRect.y + dropdownRect.height + menuNode.height() - window.innerHeight;
+        const dropdownX = dropdownRect.x + window.scrollX;
+        const dropdownY = dropdownRect.y + window.scrollY;
+        if (rightToLeft) {
+            menuNode.css('left', `${dropdownX - menuNode.width() + dropdownRect.width}px`);
+        }
+        else {
+            menuNode.css('left', `${dropdownX}px`);
+        }
+        if (bottomOverflow > 0) {
+            menuNode.css('top', `${dropdownY - menuNode.height()}px`);
+        }
+        else {
+            menuNode.css('top', `${dropdownY + dropdownRect.height}px`);
+        }
+    }
     showMenu() {
         const config = this.config;
-        const dropdownNode = this.node;
-        const menuNode = dropdownNode.find('.lake-dropdown-menu');
-        if (dropdownNode.attr('disabled')) {
+        const menuNode = this.menuNode;
+        if (!menuNode.get(0).isConnected) {
+            this.appendMenu();
+        }
+        if (this.node.attr('disabled')) {
             return;
         }
-        const currentValues = Dropdown.getValue(dropdownNode);
+        const currentValues = Dropdown.getValue(this.node);
         menuNode.find('.lake-dropdown-menu-check').css('visibility', 'hidden');
         menuNode.find('li').each(node => {
             const listNode = query(node);
@@ -3537,40 +3663,62 @@ class Dropdown {
         });
         menuNode.css('visibility', 'hidden');
         menuNode.show(config.menuType === 'list' ? 'block' : 'flex');
-        const dropdownNativeNode = dropdownNode.get(0);
-        const dropdownRect = dropdownNativeNode.getBoundingClientRect();
-        // A overflow width on the left side, greater than 0 indicates an overflow.
-        const leftOverflow = menuNode.width() - (dropdownRect.x + dropdownRect.width);
-        // A overflow width on the right side, greater than 0 indicates an overflow.
-        const rightOverflow = dropdownRect.x + menuNode.width() - window.innerWidth;
-        if (rightOverflow + 50 > 0 && (leftOverflow < 0 || leftOverflow < rightOverflow)) {
-            menuNode.css('left', 'auto');
-            menuNode.css('right', '0');
-        }
-        else {
-            menuNode.css('left', '');
-            menuNode.css('right', '');
+        this.updatePosition();
+        const viewport = this.node.closestScroller();
+        if (viewport.length > 0) {
+            viewport.on('scroll', this.scrollListener);
         }
+        document.addEventListener('click', this.clickListener);
+        window.addEventListener('resize', this.resizeListener);
         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);
+        this.menuNode.hide();
+        const viewport = this.node.closestScroller();
+        if (viewport.length > 0) {
+            viewport.off('scroll', this.scrollListener);
+        }
+        document.removeEventListener('click', this.clickListener);
+        window.removeEventListener('resize', this.resizeListener);
     }
-    bindEvents() {
+    render() {
+        var _a, _b;
         const config = this.config;
-        const dropdownNode = this.node;
-        const titleNode = dropdownNode.find('.lake-dropdown-title');
+        const defaultValue = (_a = config.defaultValue) !== null && _a !== void 0 ? _a : '';
+        const titleNode = this.node.find('.lake-dropdown-title');
+        if (!config.downIcon) {
+            titleNode.addClass('lake-dropdown-title-no-down');
+        }
+        if (config.width) {
+            titleNode.css('width', config.width);
+        }
+        const tooltip = typeof config.tooltip === 'string' ? config.tooltip : config.tooltip(this.locale);
+        titleNode.attr('title', tooltip);
         const textNode = titleNode.find('.lake-dropdown-text');
         const iconNode = titleNode.find('.lake-dropdown-icon');
+        if (config.icon) {
+            iconNode.append(config.icon);
+        }
+        if (config.accentIcon) {
+            iconNode.append(config.accentIcon);
+        }
         const downIconNode = titleNode.find('.lake-dropdown-down-icon');
-        const menuNode = dropdownNode.find('.lake-dropdown-menu');
+        if (config.downIcon) {
+            downIconNode.append(config.downIcon);
+        }
+        Dropdown.setValue(this.node, [defaultValue]);
+        if (textNode.length > 0) {
+            const menuMap = Dropdown.getMenuMap(config.menuItems, this.locale);
+            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== void 0 ? _b : defaultValue);
+        }
+        if (config.menuType === 'color') {
+            this.updateColorAccent(titleNode, defaultValue);
+        }
+        this.node.append(titleNode);
+        this.root.append(this.node);
         if (config.menuType === 'color') {
             iconNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
+                if (this.node.attr('disabled')) {
                     return;
                 }
                 iconNode.addClass('lake-dropdown-icon-hovered');
@@ -3579,7 +3727,7 @@ class Dropdown {
                 iconNode.removeClass('lake-dropdown-icon-hovered');
             });
             downIconNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
+                if (this.node.attr('disabled')) {
                     return;
                 }
                 downIconNode.addClass('lake-dropdown-down-icon-hovered');
@@ -3590,7 +3738,7 @@ class Dropdown {
         }
         else {
             titleNode.on('mouseenter', () => {
-                if (dropdownNode.attr('disabled')) {
+                if (this.node.attr('disabled')) {
                     return;
                 }
                 titleNode.addClass('lake-dropdown-title-hovered');
@@ -3602,10 +3750,10 @@ class Dropdown {
         if (config.menuType === 'color') {
             iconNode.on('click', event => {
                 event.preventDefault();
-                if (dropdownNode.attr('disabled')) {
+                if (this.node.attr('disabled')) {
                     return;
                 }
-                const value = dropdownNode.attr('color') || config.defaultValue || '';
+                const value = this.node.attr('color') || config.defaultValue || '';
                 config.onSelect(value);
             });
         }
@@ -3614,74 +3762,6 @@ class Dropdown {
             event.preventDefault();
             this.showMenu();
         });
-        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) {
-                textNode.text(listItem.text());
-            }
-            if (config.menuType === 'color' && value !== '') {
-                dropdownNode.attr('color', value);
-                this.updateColorAccent(titleNode, value);
-            }
-            config.onSelect(value);
-            this.hideMenu();
-        });
-    }
-    render() {
-        var _a, _b;
-        const config = this.config;
-        const defaultValue = (_a = config.defaultValue) !== null && _a !== void 0 ? _a : '';
-        const dropdownNode = this.node;
-        const titleNode = dropdownNode.find('.lake-dropdown-title');
-        if (!config.downIcon) {
-            titleNode.addClass('lake-dropdown-title-no-down');
-        }
-        if (config.width) {
-            titleNode.css('width', config.width);
-        }
-        const tooltip = typeof config.tooltip === 'string' ? config.tooltip : config.tooltip(this.locale);
-        titleNode.attr('title', tooltip);
-        const textNode = titleNode.find('.lake-dropdown-text');
-        const iconNode = titleNode.find('.lake-dropdown-icon');
-        if (config.icon) {
-            iconNode.append(config.icon);
-        }
-        if (config.accentIcon) {
-            iconNode.append(config.accentIcon);
-        }
-        const downIconNode = titleNode.find('.lake-dropdown-down-icon');
-        if (config.downIcon) {
-            downIconNode.append(config.downIcon);
-        }
-        const menuNode = query('<ul class="lake-dropdown-menu" />');
-        menuNode.addClass(`lake-${config.menuType}-dropdown-menu`);
-        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);
-            textNode.text((_b = menuMap.get(defaultValue)) !== null && _b !== void 0 ? _b : defaultValue);
-        }
-        if (config.menuType === 'color') {
-            this.updateColorAccent(titleNode, defaultValue);
-        }
-        this.apppendMenuItems(menuNode);
-        dropdownNode.append(titleNode);
-        dropdownNode.append(menuNode);
-        this.root.append(dropdownNode);
-        this.bindEvents();
     }
     unmount() {
         this.hideMenu();
@@ -3694,12 +3774,13 @@ class BoxToolbar {
         this.buttonItemList = [];
         this.dropdownItemList = [];
         this.dropdownList = [];
-        this.root = query(config.root);
+        this.scrollListener = () => this.updatePosition();
+        this.resizeListener = () => this.updatePosition();
         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.container = query('<div class="lake-popup lake-box-toolbar lake-custom-properties" />');
     }
     appendDivider() {
         this.container.append('<div class="lake-toolbar-divider" />');
@@ -3731,7 +3812,7 @@ class BoxToolbar {
             menuType: item.menuType,
             menuItems: item.menuItems,
             tabIndex: -1,
-            placement: this.placement === 'top' ? 'bottom' : 'top',
+            direction: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
                 item.onSelect(this.box, value);
             },
@@ -3739,7 +3820,7 @@ class BoxToolbar {
         dropdown.render();
         this.dropdownList.push(dropdown);
     }
-    position() {
+    updatePosition() {
         const boxNode = this.box.node;
         const boxNativeNode = boxNode.get(0);
         const boxRect = boxNativeNode.getBoundingClientRect();
@@ -3760,7 +3841,7 @@ class BoxToolbar {
     }
     // Renders a toolbar for the specified box.
     render() {
-        this.root.append(this.container);
+        query(document.body).append(this.container);
         for (const item of this.items) {
             if (item === '|') {
                 this.appendDivider();
@@ -3774,13 +3855,23 @@ class BoxToolbar {
                 this.appendDropdown(item);
             }
         }
-        this.position();
+        this.updatePosition();
+        const viewport = this.box.node.closestScroller();
+        if (viewport.length > 0) {
+            viewport.on('scroll', this.scrollListener);
+        }
+        window.addEventListener('resize', this.resizeListener);
     }
     // Destroys the toolbar.
     unmount() {
         for (const dropdown of this.dropdownList) {
             dropdown.unmount();
         }
+        const viewport = this.box.node.closestScroller();
+        if (viewport.length > 0) {
+            viewport.off('scroll', this.scrollListener);
+        }
+        window.removeEventListener('resize', this.resizeListener);
         this.container.remove();
     }
 }
@@ -3900,31 +3991,19 @@ class Box {
         }
         catch ( /* empty */_a) { /* empty */ }
         let toolbar = null;
-        const scrollListener = () => {
-            if (toolbar) {
-                toolbar.position();
-            }
-        };
         this.event.on('focus', () => {
             toolbar = new BoxToolbar({
-                root: editor ? editor.popupContainer : query(document.body),
                 box: this,
                 items,
                 locale: editor ? editor.locale : undefined,
             });
             toolbar.render();
-            if (editor) {
-                editor.root.on('scroll', scrollListener);
-            }
         });
         this.event.on('blur', () => {
             if (toolbar) {
                 toolbar.unmount();
                 toolbar = null;
             }
-            if (editor) {
-                editor.root.off('scroll', scrollListener);
-            }
         });
     }
     // Renders the contents of the box.
@@ -4075,12 +4154,14 @@ function request(option) {
         }
         formData.append(key, value);
     });
-    const filename = option.filename || 'file';
-    if (option.file instanceof Blob) {
-        formData.append(filename, option.file, option.file.name);
-    }
-    else {
-        formData.append(filename, option.file);
+    if (option.file) {
+        const filename = option.filename || 'file';
+        if (option.file instanceof Blob) {
+            formData.append(filename, option.file, option.file.name);
+        }
+        else {
+            formData.append(filename, option.file);
+        }
     }
     xhr.onerror = (e) => {
         if (option.onError) {
@@ -5294,6 +5375,7 @@ function insertBox(range, boxName, boxValue) {
     fragment.appendChild(box.node.get(0));
     // inline box
     if (box.type === 'inline') {
+        splitMarks(range);
         insertFragment(range, fragment);
         box.render();
         range.selectBoxEnd(box.node);
@@ -5359,7 +5441,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.2.1";
+var version = "0.2.3";
 
 // Returns the attributes of the element as an key-value object.
 function getAttributes(node) {
@@ -5947,6 +6029,7 @@ const defaultConfig = {
         }
     },
     slash: false,
+    mention: false,
 };
 class Editor {
     constructor(config) {
@@ -5962,6 +6045,7 @@ class Editor {
         this.isComposing = false;
         this.event = new EventEmitter();
         this.box = Editor.box;
+        this.popup = null;
         this.copyListener = event => {
             const range = this.selection.getCurrentRange();
             if (!this.container.contains(range.commonAncestor)) {
@@ -5995,12 +6079,6 @@ class Editor {
             }
             this.event.emit('click', targetNode);
         };
-        this.resizeListener = () => {
-            this.event.emit('resize');
-        };
-        this.scrollListener = () => {
-            this.event.emit('scroll');
-        };
         this.updateSelectionRange = debounce(() => {
             this.selection.updateByRange();
         }, 1, {
@@ -6110,13 +6188,13 @@ class Editor {
         this.containerWrapper = query('<div class="lake-container-wrapper" />');
         this.container = query('<div class="lake-container" />');
         this.overlayContainer = query('<div class="lake-overlay" />');
-        this.popupContainer = query('<div class="lake-popup lake-custom-properties" />');
         this.readonly = this.config.readonly;
         this.root.addClass('lake-custom-properties');
         this.container.attr({
             contenteditable: this.readonly ? 'false' : 'true',
             spellcheck: this.config.spellcheck ? 'true' : 'false',
             tabindex: this.config.tabIndex.toString(),
+            'data-readonly': this.readonly ? 'true' : 'false',
         });
         if (this.config.placeholder !== '') {
             this.container.attr('placeholder', this.config.placeholder);
@@ -6419,7 +6497,6 @@ class Editor {
         this.root.append(this.containerWrapper);
         this.containerWrapper.append(this.container);
         this.containerWrapper.append(this.overlayContainer);
-        query(document.body).append(this.popupContainer);
         this.togglePlaceholderClass(htmlParser.getHTML());
         this.container.append(fragment);
         this.unmountPluginMap = Editor.plugin.loadAll(this);
@@ -6433,9 +6510,7 @@ 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);
@@ -6472,9 +6547,7 @@ class Editor {
         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);
@@ -7199,7 +7272,8 @@ class Toolbar {
             menuWidth: item.menuWidth,
             menuHeight: item.menuHeight,
             tabIndex: -1,
-            placement: this.placement === 'top' ? 'bottom' : 'top',
+            location: 'local',
+            direction: this.placement === 'top' ? 'bottom' : 'top',
             onSelect: value => {
                 editor.focus();
                 item.onSelect(editor, value);
@@ -7458,7 +7532,6 @@ var codeBlockBox = {
         const editor = box.getEditor();
         const rootNode = query('<div class="lake-code-block" />');
         const boxContainer = box.getContainer();
-        boxContainer.css('width', `${editor.container.innerWidth() - 2}px`);
         boxContainer.empty();
         boxContainer.append(rootNode);
         const codeBlockNativeNode = rootNode.get(0);
@@ -7534,6 +7607,7 @@ var codeBlockBox = {
             downIcon: icons.get('down'),
             defaultValue: langItem ? boxValue.lang : codeBlockConfig.defaultLang,
             tooltip: editor.locale.codeBlock.langType(),
+            location: 'global',
             menuType: 'list',
             menuHeight: '200px',
             menuItems: langItems.map((item) => ({
@@ -7551,10 +7625,6 @@ var codeBlockBox = {
             },
         });
         dropdown.render();
-        const resizeListener = () => {
-            boxContainer.css('width', `${editor.container.innerWidth() - 2}px`);
-        };
-        editor.event.on('resize', resizeListener);
         rootNode.on('click', () => {
             if (codeEditor.hasFocus) {
                 return;
@@ -7564,7 +7634,6 @@ var codeBlockBox = {
         box.event.on('beforeunmount', () => {
             dropdown.unmount();
             codeEditor.destroy();
-            editor.event.off('resize', resizeListener);
             debug('CodeMirror destroyed');
         });
     },
@@ -7847,8 +7916,12 @@ function renderError$1(rootNode, box) {
 function renderUploading(rootNode, box) {
     return __awaiter(this, void 0, void 0, function* () {
         const editor = box.getEditor();
+        const boxContainer = box.getContainer();
         const value = box.value;
         const imageInfo = yield getImageInfo(value.url);
+        if (!boxContainer.get(0).isConnected) {
+            return;
+        }
         if (!imageInfo.width || !imageInfo.height) {
             yield renderError$1(rootNode, box);
             return;
@@ -8371,6 +8444,32 @@ var equationBox = {
     },
 };
 
+var mentionBox = {
+    type: 'inline',
+    name: 'mention',
+    render: box => {
+        var _a;
+        const editor = box.getEditor();
+        const { getProfileUrl } = editor.config.mention;
+        const value = box.value;
+        const url = getProfileUrl ? getProfileUrl(value) : '#';
+        const boxContainer = box.getContainer();
+        const rootNode = query(safeTemplate `
+      <div class="lake-mention"><a href="${url}">@${(_a = value.nickname) !== null && _a !== void 0 ? _a : value.name}</a></div>
+    `);
+        boxContainer.empty();
+        boxContainer.append(rootNode);
+        rootNode.on('click', () => {
+            editor.selection.selectBox(box);
+        });
+        if (!editor.readonly) {
+            rootNode.find('a').on('click', (event) => {
+                event.preventDefault();
+            });
+        }
+    },
+};
+
 var copy = (editor) => {
     editor.event.on('copy', event => {
         const range = editor.selection.range;
@@ -9343,11 +9442,12 @@ var formatPainter = (editor) => {
 class LinkPopup {
     constructor(config) {
         this.linkNode = null;
-        this.config = config;
-        this.root = config.root;
-        this.locale = config.locale || i18nObject('en-US');
+        this.scrollListener = () => this.position();
+        this.resizeListener = () => this.position();
+        this.config = config || {};
+        this.locale = this.config.locale || i18nObject('en-US');
         this.container = query(safeTemplate `
-      <div class="lake-link-popup">
+      <div class="lake-popup lake-link-popup lake-custom-properties">
         <div class="lake-row">${this.locale.link.url()}</div>
         <div class="lake-row lake-url-row">
           <input type="text" name="url" />
@@ -9545,16 +9645,13 @@ class LinkPopup {
             this.container.css('top', `${linkY + linkRect.height}px`);
         }
     }
-    render() {
-        this.appendCopyButton();
-        this.appendOpenButton();
-        this.appendSaveButton();
-        this.appendUnlinkButton();
-        this.root.append(this.container);
-    }
     show(linkNode) {
-        if (this.root.find('.lake-link-popup').length === 0) {
-            this.render();
+        if (!this.container.get(0).isConnected) {
+            this.appendCopyButton();
+            this.appendOpenButton();
+            this.appendSaveButton();
+            this.appendUnlinkButton();
+            query(document.body).append(this.container);
         }
         if (this.linkNode && this.linkNode.get(0) === linkNode.get(0)) {
             return;
@@ -9571,10 +9668,32 @@ class LinkPopup {
         this.position();
         this.container.css('visibility', '');
         this.container.find('input[name="url"]').focus();
+        const viewport = linkNode.closestScroller();
+        if (viewport.length > 0) {
+            viewport.on('scroll', this.scrollListener);
+        }
+        window.addEventListener('resize', this.resizeListener);
+        if (this.config.onShow) {
+            this.config.onShow();
+        }
     }
     hide() {
+        if (this.linkNode) {
+            const viewport = this.linkNode.closestScroller();
+            if (viewport.length > 0) {
+                viewport.off('scroll', this.scrollListener);
+            }
+        }
         this.linkNode = null;
         this.container.hide();
+        window.removeEventListener('resize', this.resizeListener);
+        if (this.config.onHide) {
+            this.config.onHide();
+        }
+    }
+    unmount() {
+        this.hide();
+        this.container.remove();
     }
 }
 
@@ -9583,7 +9702,6 @@ var link = (editor) => {
         return;
     }
     const popup = new LinkPopup({
-        root: editor.popupContainer,
         locale: editor.locale,
         onSave: node => {
             const range = editor.selection.range;
@@ -9599,12 +9717,12 @@ var link = (editor) => {
             editor.selection.sync();
             editor.history.save();
         },
-    });
-    editor.event.on('scroll', () => {
-        popup.position();
-    });
-    editor.event.on('resize', () => {
-        popup.position();
+        onShow: () => {
+            editor.popup = popup;
+        },
+        onHide: () => {
+            editor.popup = null;
+        },
     });
     editor.event.on('click', (targetNode) => {
         if (popup.container.contains(targetNode)) {
@@ -9636,6 +9754,7 @@ var link = (editor) => {
             popup.show(linkNode);
         },
     });
+    return () => popup.unmount();
 };
 
 var hr = (editor) => {
@@ -9827,31 +9946,418 @@ var specialCharacter = (editor) => {
     });
 };
 
-const headingTypeMap = new Map([
-    ['#', 'h1'],
-    ['##', 'h2'],
-    ['###', 'h3'],
-    ['####', 'h4'],
-    ['#####', 'h5'],
-    ['######', 'h6'],
-]);
-const shortLangTypeMap = new Map([
-    ['js', 'javascript'],
-    ['ts', 'typescript'],
-    ['md', 'markdown'],
-    ['htm', 'html'],
-]);
-const markItemList = [
-    {
-        re: /\*\*(.+?)\*\*$/,
-        getParameters: () => [
-            'bold',
-        ],
-    },
-    {
-        re: /__(.+?)__$/,
-        getParameters: () => [
-            'bold',
+const emptyCallback$2 = () => { };
+class Menu {
+    constructor(config) {
+        this.horizontalDirection = 'right';
+        this.verticalDirection = 'bottom';
+        this.range = null;
+        this.noMouseEvent = false;
+        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-menu-item-selected');
+            if (selectedItemNode.length === 0) {
+                const firstItem = this.container.find('.lake-menu-item').eq(0);
+                scrollToNode(firstItem, {
+                    behavior: 'instant',
+                    block: 'start',
+                });
+                firstItem.addClass('lake-menu-item-selected');
+                return;
+            }
+            this.noMouseEvent = true;
+            if (isDownKey) {
+                event.preventDefault();
+                let nextItemNode = selectedItemNode.next();
+                if (nextItemNode.length === 0) {
+                    nextItemNode = this.container.find('.lake-menu-item').eq(0);
+                }
+                scrollToNode(nextItemNode, {
+                    behavior: 'instant',
+                    block: 'end',
+                });
+                this.container.find('.lake-menu-item').removeClass('lake-menu-item-selected');
+                nextItemNode.addClass('lake-menu-item-selected');
+            }
+            else if (isUpKey) {
+                event.preventDefault();
+                let prevItemNode = selectedItemNode.prev();
+                if (prevItemNode.length === 0) {
+                    const itemNode = this.container.find('.lake-menu-item');
+                    prevItemNode = itemNode.eq(itemNode.length - 1);
+                }
+                scrollToNode(prevItemNode, {
+                    behavior: 'instant',
+                    block: 'start',
+                });
+                this.container.find('.lake-menu-item').removeClass('lake-menu-item-selected');
+                prevItemNode.addClass('lake-menu-item-selected');
+            }
+            else if (isEnterKey) {
+                event.preventDefault();
+                selectedItemNode.emit('click');
+            }
+            window.setTimeout(() => {
+                this.noMouseEvent = false;
+            }, 50);
+        };
+        this.clickListener = event => {
+            const targetNode = new Nodes(event.target);
+            if (!targetNode.get(0).isConnected) {
+                return;
+            }
+            if (this.container.contains(targetNode)) {
+                return;
+            }
+            this.hide();
+        };
+        this.scrollListener = () => this.updatePosition();
+        this.resizeListener = () => this.updatePosition();
+        this.items = config.items;
+        this.onShow = config.onShow || emptyCallback$2;
+        this.onHide = config.onHide || emptyCallback$2;
+        this.container = query('<ul class="lake-popup lake-menu lake-custom-properties" />');
+    }
+    appendItemNode(itemNode) {
+        itemNode.on('mouseenter', () => {
+            if (this.noMouseEvent) {
+                return;
+            }
+            this.container.find('.lake-menu-item').removeClass('lake-menu-item-selected');
+            itemNode.addClass('lake-menu-item-selected');
+        });
+        itemNode.on('mouseleave', () => {
+            if (this.noMouseEvent) {
+                return;
+            }
+            itemNode.removeClass('lake-menu-item-selected');
+        });
+        this.container.append(itemNode);
+    }
+    appendItems(items) {
+        this.container.empty();
+        for (const item of items) {
+            const itemNode = this.getItemNode(item);
+            itemNode.addClass('lake-menu-item');
+            this.appendItemNode(itemNode);
+        }
+    }
+    selectFirstItemNodeIfNeeded() {
+        const selectedItemNode = this.container.find('.lake-menu-item-selected');
+        if (selectedItemNode.length === 0) {
+            this.container.find('.lake-menu-item').eq(0).addClass('lake-menu-item-selected');
+        }
+    }
+    updatePosition(keepDirection = false) {
+        if (!this.range || this.range.isCollapsed) {
+            return;
+        }
+        const rangeRect = this.range.get().getBoundingClientRect();
+        const rangeX = rangeRect.x + window.scrollX;
+        const rangeY = rangeRect.y + window.scrollY;
+        if (!keepDirection) {
+            if (rangeRect.x + this.container.width() > window.innerWidth) {
+                this.horizontalDirection = 'left';
+            }
+            else {
+                this.horizontalDirection = 'right';
+            }
+            if (rangeRect.y + rangeRect.height + this.container.height() > window.innerHeight) {
+                this.verticalDirection = 'top';
+            }
+            else {
+                this.verticalDirection = 'bottom';
+            }
+        }
+        if (this.horizontalDirection === 'left') {
+            this.container.css('left', `${rangeX - this.container.width() + rangeRect.width}px`);
+        }
+        else {
+            this.container.css('left', `${rangeX}px`);
+        }
+        if (this.verticalDirection === 'top') {
+            this.container.css('top', `${rangeY - this.container.height() - 5}px`);
+        }
+        else {
+            this.container.css('top', `${rangeY + rangeRect.height + 5}px`);
+        }
+    }
+    get visible() {
+        return this.container.get(0).isConnected && this.container.computedCSS('display') !== 'none';
+    }
+    update(keyword) {
+        const items = this.search(keyword);
+        if (items.length === 0) {
+            this.hide();
+            return;
+        }
+        this.appendItems(items);
+        this.selectFirstItemNodeIfNeeded();
+        this.updatePosition(true);
+        this.container.css('visibility', '');
+    }
+    show(range, keyword) {
+        if (range.isCollapsed) {
+            return;
+        }
+        if (this.items.length === 0) {
+            return;
+        }
+        if (!this.container.get(0).isConnected) {
+            query(document.body).append(this.container);
+        }
+        // append all items for fixing the container's width
+        this.appendItems(this.items);
+        this.selectFirstItemNodeIfNeeded();
+        this.range = range;
+        this.container.css('visibility', 'hidden');
+        this.container.show();
+        this.container.get(0).scrollTo(0, 0);
+        this.updatePosition();
+        // fix the container's width
+        this.container.css('width', '');
+        this.container.css('width', `${this.container.width()}px`);
+        const viewport = range.commonAncestor.closestScroller();
+        if (viewport.length > 0) {
+            viewport.on('scroll', this.scrollListener);
+        }
+        document.addEventListener('keydown', this.keydownListener, true);
+        document.addEventListener('click', this.clickListener);
+        window.addEventListener('resize', this.resizeListener);
+        if (keyword) {
+            const items = this.search(keyword);
+            if (items.length === 0) {
+                return;
+            }
+            this.appendItems(items);
+            this.selectFirstItemNodeIfNeeded();
+            this.updatePosition(true);
+        }
+        this.container.css('visibility', '');
+        this.onShow();
+    }
+    hide() {
+        if (this.range) {
+            const viewport = this.range.commonAncestor.closestScroller();
+            if (viewport.length > 0) {
+                viewport.off('scroll', this.scrollListener);
+            }
+        }
+        this.range = null;
+        this.container.hide();
+        document.removeEventListener('keydown', this.keydownListener, true);
+        document.removeEventListener('click', this.clickListener);
+        window.removeEventListener('resize', this.resizeListener);
+        this.onHide();
+    }
+    unmount() {
+        this.hide();
+        this.container.remove();
+    }
+}
+
+const emptyCallback$1 = () => { };
+class MentionMenu extends Menu {
+    constructor(config) {
+        super(config);
+        this.onSelect = config.onSelect || emptyCallback$1;
+        this.container.addClass('lake-mention-menu');
+    }
+    getItemNode(item) {
+        var _a;
+        const itemNode = query(safeTemplate `
+      <li>
+        <div class="lake-mention-avatar"></div>
+        <div class="lake-mention-nickname">${(_a = item.nickname) !== null && _a !== void 0 ? _a : item.name}</div>
+        <div class="lake-mention-name">(${item.name})</div>
+      </li>
+    `);
+        const avatarNode = itemNode.find('.lake-mention-avatar');
+        if (item.avatar) {
+            avatarNode.append(item.avatar);
+        }
+        else {
+            avatarNode.remove();
+        }
+        if (!item.nickname) {
+            itemNode.find('.lake-mention-name').remove();
+        }
+        itemNode.on('click', event => this.onSelect(event, item));
+        return itemNode;
+    }
+    search(keyword) {
+        var _a;
+        keyword = keyword.toLowerCase();
+        const items = [];
+        for (const item of this.items) {
+            const nickname = (_a = item.nickname) !== null && _a !== void 0 ? _a : item.name;
+            if (item.name.toLowerCase().indexOf(keyword) >= 0 ||
+                nickname.toLowerCase().indexOf(keyword) >= 0 ||
+                nickname.replace(/\s+/g, '').indexOf(keyword) >= 0) {
+                items.push(item);
+            }
+        }
+        return items;
+    }
+}
+
+function getKeyword$1(range) {
+    const targetRange = range.getCharacterRange('@');
+    if (targetRange === null) {
+        return null;
+    }
+    let text = targetRange.startNode.text().slice(targetRange.startOffset + 1, targetRange.endOffset);
+    text = text.replace(/[\u200B\u2060]/g, '');
+    return text;
+}
+var mention = (editor) => {
+    editor.setPluginConfig('mention', {
+        requestMethod: 'GET',
+        items: [],
+        getProfileUrl: (value) => `/${value.name}`,
+    });
+    if (editor.readonly) {
+        return;
+    }
+    const { requestAction, requestMethod, items } = editor.config.mention;
+    let menu = null;
+    const selectListener = (event, item) => {
+        if (menu) {
+            menu.hide();
+        }
+        editor.focus();
+        const targetRange = editor.selection.range.getCharacterRange('@');
+        if (targetRange) {
+            targetRange.get().deleteContents();
+        }
+        editor.selection.insertBox('mention', item);
+        editor.history.save();
+    };
+    const showListener = () => {
+        editor.popup = menu;
+    };
+    const hideListener = () => {
+        editor.popup = null;
+    };
+    const showMenu = () => {
+        const range = editor.selection.range;
+        if (!range.isCollapsed) {
+            return;
+        }
+        const targetRange = range.getCharacterRange('@');
+        if (targetRange === null) {
+            return;
+        }
+        const keyword = getKeyword$1(range);
+        if (keyword === null) {
+            return;
+        }
+        if (!menu) {
+            if (requestAction) {
+                request({
+                    onSuccess: body => {
+                        if (!body.data) {
+                            return;
+                        }
+                        menu = new MentionMenu({
+                            items: body.data,
+                            onSelect: selectListener,
+                            onShow: showListener,
+                            onHide: hideListener,
+                        });
+                        menu.show(targetRange, keyword);
+                    },
+                    action: requestAction,
+                    method: requestMethod,
+                });
+            }
+            else {
+                menu = new MentionMenu({
+                    items,
+                    onSelect: selectListener,
+                    onShow: showListener,
+                    onHide: hideListener,
+                });
+                menu.show(targetRange, keyword);
+            }
+            return;
+        }
+        menu.show(targetRange, keyword);
+    };
+    editor.container.on('keyup', event => {
+        if (editor.isComposing) {
+            return;
+        }
+        const keyboardEvent = event;
+        if (isKeyHotkey(['down', 'up', 'enter'], keyboardEvent)) {
+            return;
+        }
+        if (!menu || !menu.visible) {
+            if (keyboardEvent.key === '@') {
+                showMenu();
+                return;
+            }
+            if (isKeyHotkey(['backspace', 'delete'], keyboardEvent)) {
+                showMenu();
+            }
+            else {
+                return;
+            }
+        }
+        const range = editor.selection.range;
+        const keyword = getKeyword$1(range);
+        if (keyword === null) {
+            if (menu) {
+                menu.hide();
+            }
+            return;
+        }
+        if (menu) {
+            menu.update(keyword);
+        }
+    });
+    return () => {
+        if (menu) {
+            menu.unmount();
+        }
+    };
+};
+
+const headingTypeMap = new Map([
+    ['#', 'h1'],
+    ['##', 'h2'],
+    ['###', 'h3'],
+    ['####', 'h4'],
+    ['#####', 'h5'],
+    ['######', 'h6'],
+]);
+const shortLangTypeMap = new Map([
+    ['js', 'javascript'],
+    ['ts', 'typescript'],
+    ['md', 'markdown'],
+    ['htm', 'html'],
+]);
+const markItemList = [
+    {
+        re: /\*\*(.+?)\*\*$/,
+        getParameters: () => [
+            'bold',
+        ],
+    },
+    {
+        re: /__(.+?)__$/,
+        getParameters: () => [
+            'bold',
         ],
     },
     {
@@ -10947,87 +11453,17 @@ const slashItems = [
     },
 ];
 
+const emptyCallback = () => { };
 const slashItemMap = new Map();
 for (const item of slashItems) {
     slashItemMap.set(item.name, item);
 }
-class SlashPopup {
+class SlashMenu extends Menu {
     constructor(config) {
-        this.range = null;
-        this.noMouseEvent = false;
-        this.keyword = null;
-        this.horizontalDirection = 'right';
-        this.verticalDirection = 'bottom';
-        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" />');
+        super(config);
+        this.locale = config.locale || i18nObject('en-US');
+        this.onSelect = config.onSelect || emptyCallback;
+        this.container.addClass('lake-slash-menu');
     }
     getItem(name) {
         if (typeof name !== 'string') {
@@ -11039,20 +11475,12 @@ class SlashPopup {
         }
         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);
+    getItemNode(name) {
+        const item = this.getItem(name);
+        const itemTitle = typeof item.title === 'string' ? item.title : item.title(this.locale);
+        const itemDescription = typeof item.description === 'string' ? item.description : item.description(this.locale);
         const itemNode = query(safeTemplate `
-      <li class="lake-slash-item" name="${item.name}">
+      <li name="${item.name}">
         <div class="lake-slash-icon"></div>
         <div class="lake-slash-text">
           <div class="lake-slash-title">${itemTitle}</div>
@@ -11064,20 +11492,6 @@ class SlashPopup {
         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"]');
@@ -11089,49 +11503,21 @@ class SlashPopup {
                 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 => {
-                            fileNativeNode.value = '';
-                            editor.config.onMessage('error', error);
-                        },
-                        onSuccess: () => {
-                            fileNativeNode.value = '';
-                        },
-                    });
-                }
-            });
-            itemNode.on('click', () => {
-                fileNativeNode.click();
-            });
+            fileNode.on('change', event => this.onSelect(event, item, fileNode));
+            itemNode.on('click', () => fileNativeNode.click());
         }
         else {
-            itemNode.on('click', () => {
-                editor.focus();
-                this.emptyBlock();
-                item.onClick(editor, item.name);
-            });
+            itemNode.on('click', event => this.onSelect(event, item));
         }
-    }
-    get visible() {
-        return this.container.get(0).isConnected && this.container.computedCSS('display') !== 'none';
+        return itemNode;
     }
     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);
+            let itemTitle = typeof item.title === 'string' ? item.title : item.title(this.locale);
             itemTitle = itemTitle.toLowerCase();
             let itemTitleEnglish = typeof item.title === 'string' ? item.title : item.title(localeEnglish);
             itemTitleEnglish = itemTitleEnglish.toLowerCase();
@@ -11144,103 +11530,6 @@ class SlashPopup {
         }
         return items;
     }
-    position(keepDirection = false) {
-        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 (!keepDirection) {
-            if (rangeRect.x + this.container.width() > window.innerWidth) {
-                this.horizontalDirection = 'left';
-            }
-            else {
-                this.horizontalDirection = 'right';
-            }
-            if (rangeRect.y + rangeRect.height + this.container.height() > window.innerHeight) {
-                this.verticalDirection = 'top';
-            }
-            else {
-                this.verticalDirection = 'bottom';
-            }
-        }
-        if (this.horizontalDirection === 'left') {
-            this.container.css('left', `${rangeX - this.container.width() + rangeRect.width}px`);
-        }
-        else {
-            this.container.css('left', `${rangeX}px`);
-        }
-        if (this.verticalDirection === 'top') {
-            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(true);
-    }
-    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 = [
@@ -11265,25 +11554,12 @@ function getKeyword(block) {
     }
     return text.substring(1);
 }
-function showPopup(editor, popup) {
+function emptyBlock(editor) {
     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);
+    const block = range.commonAncestor.closestBlock();
+    block.empty();
+    appendBreak(block);
+    range.shrinkBefore(block);
 }
 var slash = (editor) => {
     editor.setPluginConfig('slash', {
@@ -11292,10 +11568,68 @@ var slash = (editor) => {
     if (editor.readonly) {
         return;
     }
-    const popup = new SlashPopup({
-        editor,
+    const menu = new SlashMenu({
+        locale: editor.locale,
         items: editor.config.slash.items,
+        onSelect: (event, item, fileNode) => {
+            if (menu) {
+                menu.hide();
+            }
+            editor.focus();
+            emptyBlock(editor);
+            if (item.type === 'upload') {
+                if (!fileNode) {
+                    return;
+                }
+                const target = event.target;
+                const fileNativeNode = fileNode.get(0);
+                const files = target.files || [];
+                for (const file of files) {
+                    uploadFile({
+                        editor,
+                        name: item.name,
+                        file,
+                        onError: error => {
+                            fileNativeNode.value = '';
+                            editor.config.onMessage('error', error);
+                        },
+                        onSuccess: () => {
+                            fileNativeNode.value = '';
+                        },
+                    });
+                }
+            }
+            else {
+                item.onClick(editor, item.name);
+            }
+        },
+        onShow: () => {
+            editor.popup = menu;
+        },
+        onHide: () => {
+            editor.popup = null;
+        },
     });
+    const showMenu = () => {
+        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);
+        menu.show(slashRange, keyword);
+    };
     editor.container.on('keyup', event => {
         if (editor.isComposing) {
             return;
@@ -11304,13 +11638,13 @@ var slash = (editor) => {
         if (isKeyHotkey(['down', 'up', 'enter'], keyboardEvent)) {
             return;
         }
-        if (!popup.visible) {
+        if (!menu.visible) {
             if (isKeyHotkey('/', keyboardEvent)) {
-                showPopup(editor, popup);
+                showMenu();
                 return;
             }
             if (isKeyHotkey(['backspace', 'delete'], keyboardEvent)) {
-                showPopup(editor, popup);
+                showMenu();
             }
             else {
                 return;
@@ -11323,12 +11657,14 @@ var slash = (editor) => {
         }
         const keyword = getKeyword(block);
         if (keyword === null) {
-            popup.hide();
+            menu.hide();
             return;
         }
-        popup.update(keyword);
+        menu.update(keyword);
     });
-    return () => popup.unmount();
+    return () => {
+        menu.unmount();
+    };
 };
 
 Editor.box.add(hrBox);
@@ -11338,6 +11674,7 @@ Editor.box.add(videoBox);
 Editor.box.add(fileBox);
 Editor.box.add(emojiBox);
 Editor.box.add(equationBox);
+Editor.box.add(mentionBox);
 Editor.plugin.add('copy', copy);
 Editor.plugin.add('cut', cut);
 Editor.plugin.add('paste', paste);
@@ -11372,6 +11709,7 @@ Editor.plugin.add('file', file);
 Editor.plugin.add('emoji', emoji);
 Editor.plugin.add('equation', equation);
 Editor.plugin.add('specialCharacter', specialCharacter);
+Editor.plugin.add('mention', mention);
 Editor.plugin.add('markdown', markdown);
 Editor.plugin.add('enterKey', enterKey);
 Editor.plugin.add('shiftEnterKey', shiftEnterKey);