@textbus/xnote 0.0.1-alpha.12 → 0.0.1-alpha.14

package/bundles/index.js

@@ -8,10 +8,11 @@ var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
 var highlightjs = require('highlight.js');
+var color = require('@tanbo/color');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$k = "vf-3d0183";
+var scopedId$l = "vf-3d0183";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -132,7 +133,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(scopedId$l, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -144,10 +145,10 @@ function Button(props) {
     });
 }
 
-var scopedId$j = "vf-ac7e8d";
+var scopedId$k = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -157,15 +158,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$i = "vf-ede279";
+var scopedId$j = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(scopedId$j, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$h = "vf-4c1803";
+var scopedId$i = "vf-4c1803";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -273,16 +274,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$h, () => {
+    return scopedCss.withScopedCSS(scopedId$i, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxRuntime.jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$g = "vf-a99c5e";
+var scopedId$h = "vf-a99c5e";
 
-var scopedId$f = "vf-ab6f55";
+var scopedId$g = "vf-ab6f55";
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -293,7 +294,7 @@ const DropdownMenuPortal = core.withAnnotation({
     const menuRef = core.createRef();
     let timer = null;
     const delay = 10;
-    core.onMounted(() => {
+    function update() {
         const menuElement = menuRef.current;
         if (props.abreast) {
             const btnEle = props.triggerRef.current;
@@ -353,19 +354,28 @@ const DropdownMenuPortal = core.withAnnotation({
                 }, delay);
             }
         }
+    }
+    core.onUpdated(() => {
+        update();
     });
     core.onUnmounted(() => {
         clearTimeout(timer);
     });
     function onEnter() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = false;
         dropdownContextService.open();
     }
     function onLeave() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$f, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$g, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -397,6 +407,9 @@ const Dropdown = core.withAnnotation({
     });
     const subscription = new core$1.Subscription();
     core.onMounted(() => {
+        if (props.trigger === 'none') {
+            return;
+        }
         if (props.trigger === 'click') {
             subscription.add(core$1.fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
@@ -422,14 +435,14 @@ const Dropdown = core.withAnnotation({
     return {
         isShow(b) {
             if (b) {
-                dropdownContextService.hide(false);
+                dropdownContextService.open();
             }
             else {
-                dropdownContextService.open();
+                dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$g, () => {
-            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
+        $render: scopedCss.withScopedCSS(scopedId$h, () => {
+            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
                                         var _a;
@@ -444,6 +457,14 @@ const Dropdown = core.withAnnotation({
     };
 });
 
+var scopedId$f = "vf-acaa5f";
+
+function MenuHeading(props) {
+    return scopedCss.withScopedCSS(scopedId$f, () => {
+        return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
+    });
+}
+
 var scopedId$e = "vf-678daa";
 
 function MenuItem(props) {
@@ -605,11 +626,192 @@ function registerHeadingShortcut(textbus) {
             const commonAncestorSlot = selection.commonAncestorSlot;
             commonAncestorSlot.cut();
             commander.applyAttribute(headingAttr, 'h' + content.length);
+            selection.setPosition(commonAncestorSlot, 0);
             return true;
         }
     });
 }
 
+function useBlockContent(slot) {
+    const textbus = core$1.useContext();
+    const selection = textbus.get(core$1.Selection);
+    core$1.onBreak(ev => {
+        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
+            const p = new ParagraphComponent(textbus);
+            ev.target.insert(p);
+            selection.setPosition(p.state.slot, 0);
+            ev.preventDefault();
+        }
+    });
+    core$1.onContentInsert(ev => {
+        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
+            (typeof ev.data.content === 'string' || ev.data.content.type !== core$1.ContentType.BlockComponent)) {
+            const p = new ParagraphComponent(textbus);
+            const childSlot = p.state.slot;
+            childSlot.insert(ev.data.content);
+            ev.target.insert(p);
+            selection.setPosition(childSlot, childSlot.index);
+            ev.preventDefault();
+        }
+    });
+}
+
+class BlockquoteComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        const slot = textbus.get(core$1.Registry).createSlot(json.slot);
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    }
+    constructor(textbus, state = {
+        slot: new core$1.Slot([
+            core$1.ContentType.BlockComponent
+        ])
+    }) {
+        super(textbus, state);
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+BlockquoteComponent.type = core$1.ContentType.BlockComponent;
+BlockquoteComponent.componentName = 'BlockquoteComponent';
+BlockquoteComponent.zenCoding = {
+    key: ' ',
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^>$/.test(content);
+        }
+        return false;
+    },
+    createState(_, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
+        return {
+            slot
+        };
+    }
+};
+function BlockquoteView(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        const slot = props.component.state.slot;
+        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
+                return core$1.createVNode('div', null, children);
+            }, readonly() || output()) }));
+    };
+}
+const blockquoteComponentLoader = {
+    match(element) {
+        return element.tagName === 'BLOCKQUOTE';
+    },
+    read(element, textbus, slotParser) {
+        const delta = slotParser(new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]), element).toDelta();
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    },
+};
+
+class HighlightBoxComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new HighlightBoxComponent(textbus, {
+            type: json.type,
+            slot: textbus.get(core$1.Registry).createSlot(json.slot)
+        });
+    }
+    constructor(textbus, state = {
+        type: '',
+        slot: new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+        ])
+    }) {
+        super(textbus, state);
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
+function HighlightBoxView(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const readonly = useReadonly();
+    const output = useOutput();
+    const emoji = [];
+    for (let i = 0x1F600; i <= 0x1F64F; i++) {
+        emoji.push(i);
+    }
+    const dropdownRef = core.createRef();
+    function setType(type) {
+        var _a;
+        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        props.component.state.type = type;
+    }
+    return () => {
+        const { state, name } = props.component;
+        if (readonly() || output()) {
+            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
+                        return core$1.createVNode('div', {
+                            class: 'xnote-highlight-box-content'
+                        }, children);
+                    }, readonly() || output())] }));
+        }
+        return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
+                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                }), jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
+                                    const icon = String.fromCodePoint(i);
+                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
+                    return core$1.createVNode('div', {
+                        class: 'xnote-highlight-box-content'
+                    }, children);
+                }, readonly() || output())] }));
+    };
+}
+const highlightBoxComponentLoader = {
+    match(element) {
+        return element.tagName === 'DIV' && element.dataset.component === HighlightBoxComponent.componentName;
+    },
+    read(element, textbus, slotParser) {
+        const delta = slotParser(new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new HighlightBoxComponent(textbus, {
+            type: element.dataset.icon || '',
+            slot
+        });
+    }
+};
+
 class ParagraphComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -630,12 +832,20 @@ class ParagraphComponent extends core$1.Component {
         const commander = injector.get(core$1.Commander);
         const selection = injector.get(core$1.Selection);
         core$1.onBreak(ev => {
+            const isEmpty = this.state.slot.isEmpty;
             const afterSlot = ev.target.cut(ev.data.index);
             afterSlot.removeAttribute(headingAttr);
             const nextParagraph = new ParagraphComponent(injector, {
                 slot: afterSlot
             });
-            commander.insertAfter(nextParagraph, this);
+            if (isEmpty && (this.parentComponent instanceof BlockquoteComponent ||
+                this.parentComponent instanceof HighlightBoxComponent)) {
+                commander.insertAfter(nextParagraph, this.parentComponent);
+                commander.removeComponent(this);
+            }
+            else {
+                commander.insertAfter(nextParagraph, this);
+            }
             selection.setPosition(afterSlot, 0);
             ev.preventDefault();
         });
@@ -1424,30 +1634,6 @@ function AttrTool(props) {
     });
 }
 
-function useBlockContent(slot) {
-    const textbus = core$1.useContext();
-    const selection = textbus.get(core$1.Selection);
-    core$1.onBreak(ev => {
-        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
-            const p = new ParagraphComponent(textbus);
-            ev.target.insert(p);
-            selection.setPosition(p.state.slot, 0);
-            ev.preventDefault();
-        }
-    });
-    core$1.onContentInsert(ev => {
-        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
-            (typeof ev.data.content === 'string' || ev.data.content.type !== core$1.ContentType.BlockComponent)) {
-            const p = new ParagraphComponent(textbus);
-            const childSlot = p.state.slot;
-            childSlot.insert(ev.data.content);
-            ev.target.insert(p);
-            selection.setPosition(childSlot, childSlot.index);
-            ev.preventDefault();
-        }
-    });
-}
-
 const defaultRowHeight = 30;
 const defaultColumnWidth = 100;
 class TableComponent extends core$1.Component {
@@ -1790,14 +1976,20 @@ TodolistComponent.zenCoding = {
         return false;
     },
     key: ' ',
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         const isChecked = content.charAt(1) === 'x';
         return {
             checked: isChecked,
-            slot: new core$1.Slot([
-                core$1.ContentType.InlineComponent,
-                core$1.ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -1854,76 +2046,6 @@ const todolistComponentLoader = {
     }
 };
 
-class BlockquoteComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    }
-    constructor(textbus, state = {
-        slot: new core$1.Slot([
-            core$1.ContentType.BlockComponent
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-BlockquoteComponent.type = core$1.ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match(content, textbus) {
-        const selection = textbus.get(core$1.Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            return /^>$/.test(content);
-        }
-        return false;
-    },
-    createState() {
-        return {
-            slot: new core$1.Slot([
-                core$1.ContentType.BlockComponent
-            ])
-        };
-    }
-};
-function BlockquoteView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return core$1.createVNode('div', null, children);
-            }, readonly() || output()) }));
-    };
-}
-const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ]), element).toDelta();
-        const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    },
-};
-
 class ListComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -2037,14 +2159,20 @@ ListComponent.zenCoding = {
         }
         return false;
     },
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         return {
             type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
             reorder: true,
-            slot: new core$1.Slot([
-                core$1.ContentType.InlineComponent,
-                core$1.ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -2256,86 +2384,6 @@ function useActiveBlock() {
     };
 }
 
-class HighlightBoxComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
-            type: json.type,
-            slot: textbus.get(core$1.Registry).createSlot(json.slot)
-        });
-    }
-    constructor(textbus, state = {
-        type: '',
-        slot: new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
-HighlightBoxComponent.componentName = 'HighlightBoxComponent';
-HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
-function HighlightBoxView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    const emoji = [];
-    for (let i = 0x1F600; i <= 0x1F64F; i++) {
-        emoji.push(i);
-    }
-    const dropdownRef = core.createRef();
-    function setType(type) {
-        var _a;
-        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
-        props.component.state.type = type;
-    }
-    return () => {
-        const { state, name } = props.component;
-        if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly() || output())] }));
-        }
-        return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
-                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                }), jsxRuntime.jsx(Divider, {}), emoji.map(i => {
-                                    const icon = String.fromCodePoint(i);
-                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-highlight-box-content'
-                    }, children);
-                }, readonly() || output())] }));
-    };
-}
-const highlightBoxComponentLoader = {
-    match(element) {
-        return element.tagName === 'DIV' && element.dataset.component === HighlightBoxComponent.componentName;
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
-        const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new HighlightBoxComponent(textbus, {
-            type: element.dataset.icon || '',
-            slot
-        });
-    }
-};
-
 function useBlockTransform() {
     const commander = core.inject(core$1.Commander);
     const textbus = core.inject(core$1.Textbus);
@@ -3108,6 +3156,9 @@ const isSupportFont = (function () {
 function FontFamilyTool() {
     const currentFontFamily = core.createSignal('');
     const fontFamilyOptions = [{
+            label: '默认',
+            value: ''
+        }, {
             label: '宋体',
             value: 'SimSun, STSong'
         }, {
@@ -3158,7 +3209,7 @@ function FontFamilyTool() {
         const result = query.queryFormat(fontFamilyFormatter);
         const isHighlight = result.state === core$1.QueryStateType.Enabled;
         highlight.set(isHighlight);
-        currentFontFamily.set(isHighlight ? result.value : '默认');
+        currentFontFamily.set(isHighlight ? result.value : '');
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
@@ -3166,7 +3217,7 @@ function FontFamilyTool() {
     return () => {
         var _a;
         return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: fontFamilyOptions.map(i => {
-                const disabled = !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v);
+                const disabled = i.value ? !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v) : false;
                 return {
                     label: jsxRuntime.jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
@@ -3558,7 +3609,7 @@ function InsertTool(props) {
         }
     }
     return scopedCss.withScopedCSS(scopedId$8, () => {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
     });
 }
 
@@ -3597,12 +3648,14 @@ const LeftToolbar = core.withAnnotation({
         const sub = core$1.fromEvent(docContentContainer, 'mousemove').pipe(core$1.filter(() => {
             return !isIgnoreMove;
         }), core$1.map(ev => {
+            var _a;
             let currentNode = ev.target;
             while (currentNode) {
                 const slot = adapter.getSlotByNativeNode(currentNode);
                 if (slot) {
-                    if ((slot === null || slot === void 0 ? void 0 : slot.parent) instanceof SourceCodeComponent || (slot === null || slot === void 0 ? void 0 : slot.parent) instanceof TableComponent) {
-                        return null;
+                    if (((_a = slot === null || slot === void 0 ? void 0 : slot.parent) === null || _a === void 0 ? void 0 : _a.type) === core$1.ContentType.InlineComponent) {
+                        currentNode = currentNode.parentNode;
+                        continue;
                     }
                     return slot;
                 }
@@ -3617,7 +3670,9 @@ const LeftToolbar = core.withAnnotation({
             activeSlot.set(slot);
             if (slot) {
                 checkStates(slot);
-                isEmptyBlock.set(slot.parent instanceof ParagraphComponent && slot.isEmpty);
+                isEmptyBlock.set((slot.parent instanceof ParagraphComponent && slot.isEmpty) ||
+                    slot.parent instanceof SourceCodeComponent ||
+                    slot.parent instanceof TableComponent);
                 const nativeNode = adapter.getNativeNodeByComponent(slot.parent);
                 updatePosition(draft => {
                     const containerRect = docContentContainer.getBoundingClientRect();
@@ -3714,6 +3769,7 @@ const LeftToolbar = core.withAnnotation({
         isIgnoreMove = b;
     }
     return scopedCss.withScopedCSS(scopedId$7, () => {
+        var _a;
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
@@ -3741,6 +3797,8 @@ const LeftToolbar = core.withAnnotation({
                 }
             }
         }
+        const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
+        const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsxRuntime.jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsxRuntime.jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
@@ -3750,9 +3808,9 @@ const LeftToolbar = core.withAnnotation({
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsxRuntime.jsx(InsertTool, { replace: true, slot: activeSlot() })
+                        jsxRuntime.jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -4032,6 +4090,198 @@ class Matcher {
     }
 }
 
+class Organization {
+}
+function registerAtShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    const selection = textbus.get(core$1.Selection);
+    const commander = textbus.get(core$1.Commander);
+    keyboard.addShortcut({
+        keymap: {
+            key: '@',
+            shiftKey: true
+        },
+        action() {
+            const { commonAncestorComponent } = selection;
+            if (commonAncestorComponent instanceof SourceCodeComponent) {
+                return false;
+            }
+            const at = new AtComponent(textbus);
+            commander.insert(at);
+            selection.setPosition(at.state.slot, 0);
+        }
+    });
+}
+class AtComponent extends core$1.Component {
+    static fromJSON(textbus, { slot: slotState, userInfo }) {
+        const registry = textbus.get(core$1.Registry);
+        if (slotState) {
+            const slot = registry.createSlot(slotState);
+            return new AtComponent({
+                slot
+            });
+        }
+        return new AtComponent(textbus, {
+            userInfo,
+        });
+    }
+    constructor(textbus, state = {
+        slot: new core$1.Slot([core$1.ContentType.Text])
+    }) {
+        if (!state.userInfo && !state.slot) {
+            state.slot = new core$1.Slot([core$1.ContentType.Text]);
+        }
+        super(textbus, state);
+        this.focus = new core$1.Subject();
+        this.members = core.createSignal([]);
+        this.selectedIndex = core.createSignal(0);
+    }
+    setup() {
+        let isFocus = false;
+        core$1.onFocus(() => {
+            isFocus = true;
+            this.focus.next(true);
+            onChange.next();
+        });
+        core$1.onBlur(() => {
+            isFocus = false;
+            this.focus.next(false);
+        });
+        const organization = core$1.useContext(Organization);
+        const selection = core$1.useContext(core$1.Selection);
+        const commander = core$1.useContext(core$1.Commander);
+        const onChange = new core$1.Subject();
+        core$1.onContentInserted((ev) => {
+            const key = this.state.slot.toString();
+            if (key.length > 10) {
+                selection.selectComponent(this);
+                commander.insert(key);
+                ev.preventDefault();
+                return;
+            }
+            onChange.next();
+        });
+        core$1.onContentDeleted(() => {
+            onChange.next();
+        });
+        core$1.onBreak((ev) => {
+            const member = this.members()[this.selectedIndex()];
+            if (member) {
+                this.state.userInfo = Object.assign({}, member);
+            }
+            selection.selectComponentEnd(this);
+            ev.preventDefault();
+        });
+        core$1.useDynamicShortcut({
+            keymap: {
+                key: ['ArrowDown', 'ArrowUp']
+            },
+            action: (key) => {
+                let index = this.selectedIndex();
+                if (key === 'ArrowUp') {
+                    if (index > 0) {
+                        index--;
+                        this.selectedIndex.set(index);
+                    }
+                    return;
+                }
+                if (index < this.members().length - 1) {
+                    index++;
+                    this.selectedIndex.set(index);
+                }
+            }
+        });
+        const subs = onChange.pipe(core$1.switchMap(() => {
+            const key = this.state.slot.toString();
+            return core$1.fromPromise(organization.getMembers(key));
+        })).subscribe((members) => {
+            this.members.set(members);
+            this.selectedIndex.set(0);
+            if (isFocus) {
+                this.focus.next(true);
+            }
+        });
+        core$1.onDestroy(() => {
+            subs.unsubscribe();
+        });
+    }
+}
+AtComponent.componentName = 'AtComponent';
+AtComponent.type = core$1.ContentType.InlineComponent;
+
+function AtComponentView(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const selection = core.inject(core$1.Selection);
+    const dropdownRef = core.createRef();
+    const subscription = props.component.focus.subscribe((b) => {
+        if (dropdownRef.current && props.component.members().length) {
+            dropdownRef.current.isShow(b);
+        }
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    const readonly = useReadonly();
+    const output = useOutput();
+    const membersRef = core.createRef();
+    core.onUpdated(() => {
+        if (output() || readonly()) {
+            return;
+        }
+        const container = membersRef.current;
+        if (container) {
+            const focusItem = container.children[props.component.selectedIndex()];
+            if (focusItem) {
+                focusItem.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+            }
+        }
+    });
+    return () => {
+        const { slot, userInfo } = props.component.state;
+        const selectedIndex = props.component.selectedIndex();
+        if (userInfo) {
+            return (jsxRuntime.jsxs("span", { class: "xnote-at xnote-at-complete", ref: props.rootRef, "data-component": props.component.name, children: ["@", userInfo.name] }));
+        }
+        if (readonly() || output()) {
+            return (jsxRuntime.jsxs("span", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
+                        return core$1.createVNode('span', {
+                            class: 'xnote-at-input'
+                        }, children);
+                    })] }));
+        }
+        const members = props.component.members();
+        return (jsxRuntime.jsx("span", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsxRuntime.jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
+                        let hsl = color.any2Hsl(member.color);
+                        if (hsl === 'unknown') {
+                            hsl = color.any2Hsl('#000');
+                        }
+                        const rgb = color.hsl2Rgb(hsl);
+                        const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+                        const color$1 = yiq >= 128 ? '#000' : '#fff';
+                        return (jsxRuntime.jsxs("div", { onClick: () => {
+                                props.component.state.userInfo = member;
+                                selection.selectComponentEnd(props.component);
+                            }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
+                                        jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
+                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
+                        return core$1.createVNode('span', {
+                            class: 'xnote-at-input'
+                        }, children);
+                    })] }) }));
+    };
+}
+const atComponentLoader = {
+    match(element) {
+        return element.dataset.component === AtComponent.componentName;
+    },
+    read(element, textbus) {
+        return new AtComponent(textbus);
+    }
+};
+
 class RootComponent extends core$1.Component {
     constructor() {
         super(...arguments);
@@ -4049,6 +4299,17 @@ class RootComponent extends core$1.Component {
             this.onCompositionStart.next(ev);
         });
     }
+    afterCheck() {
+        const content = this.state.content;
+        const lastContent = content.getContentAtIndex(content.length - 1);
+        if (lastContent instanceof ParagraphComponent ||
+            lastContent instanceof ListComponent ||
+            lastContent instanceof TodolistComponent) {
+            return;
+        }
+        content.retain(content.length);
+        content.insert(new ParagraphComponent(this.textbus));
+    }
 }
 RootComponent.componentName = 'RootComponent';
 RootComponent.type = core$1.ContentType.BlockComponent;
@@ -4063,6 +4324,9 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
+    core.onUpdated(() => {
+        props.component.afterCheck();
+    });
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
@@ -4190,7 +4454,7 @@ function ResizeColumn(props) {
     });
 }
 
-var scopedId$4 = "vf-d64cf9";
+var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4355,7 +4619,7 @@ function Scroll(props) {
     });
 }
 
-var scopedId$2 = "vf-ef93c0";
+var scopedId$2 = "vf-aaece0";
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4816,7 +5080,8 @@ class Editor extends core$1.Textbus {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView,
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4832,6 +5097,7 @@ class Editor extends core$1.Textbus {
         const browserModule = new platformBrowser.BrowserModule(Object.assign({ renderTo: () => {
                 return this.host;
             }, adapter, componentLoaders: [
+                atComponentLoader,
                 sourceCodeComponentLoader,
                 tableComponentLoader,
                 imageComponentLoader,
@@ -4871,7 +5137,8 @@ class Editor extends core$1.Textbus {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4900,7 +5167,8 @@ class Editor extends core$1.Textbus {
                 TableComponent,
                 HighlightBoxComponent,
                 ListComponent,
-                VideoComponent
+                VideoComponent,
+                AtComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
@@ -4928,6 +5196,7 @@ class Editor extends core$1.Textbus {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
+                registerAtShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new platformBrowser$1.OutputTranslator();
@@ -4969,6 +5238,8 @@ class Editor extends core$1.Textbus {
     }
 }
 
+exports.AtComponent = AtComponent;
+exports.AtComponentView = AtComponentView;
 exports.AttrTool = AttrTool;
 exports.BlockTool = BlockTool;
 exports.BlockquoteComponent = BlockquoteComponent;
@@ -4997,7 +5268,9 @@ exports.LinkTool = LinkTool;
 exports.ListComponent = ListComponent;
 exports.ListComponentView = ListComponentView;
 exports.Matcher = Matcher;
+exports.MenuHeading = MenuHeading;
 exports.MenuItem = MenuItem;
+exports.Organization = Organization;
 exports.OutputInjectionToken = OutputInjectionToken;
 exports.ParagraphComponent = ParagraphComponent;
 exports.ParagraphView = ParagraphView;
@@ -5017,6 +5290,7 @@ exports.ToolbarPlugin = ToolbarPlugin;
 exports.UnderlineTool = UnderlineTool;
 exports.VideoComponent = VideoComponent;
 exports.VideoView = VideoView;
+exports.atComponentLoader = atComponentLoader;
 exports.autoComplete = autoComplete;
 exports.backgroundColorFormatLoader = backgroundColorFormatLoader;
 exports.backgroundColorFormatter = backgroundColorFormatter;
@@ -5044,6 +5318,7 @@ exports.linkFormatLoader = linkFormatLoader;
 exports.linkFormatter = linkFormatter;
 exports.listComponentLoader = listComponentLoader;
 exports.paragraphComponentLoader = paragraphComponentLoader;
+exports.registerAtShortcut = registerAtShortcut;
 exports.registerBoldShortcut = registerBoldShortcut;
 exports.registerCodeShortcut = registerCodeShortcut;
 exports.registerHeadingShortcut = registerHeadingShortcut;