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

package/bundles/index.esm.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, onUpdated, watch, ReflectiveInjector } from '@viewfly/core';
-import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, ContentType, Component, Registry, Slot, useContext, onBreak, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onContentInsert, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, watch, ReflectiveInjector } from '@viewfly/core';
+import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, Slot, Component, Registry, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { VIEW_CONTAINER, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
 import { createPortal, DomRenderer, createApp, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
 import highlightjs from 'highlight.js';
+import { any2Hsl, hsl2Rgb } from '@tanbo/color';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$k = "vf-3d0183";
+var scopedId$l = "vf-3d0183";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -130,7 +131,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$k, () => {
+    return withScopedCSS(scopedId$l, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -142,10 +143,10 @@ function Button(props) {
     });
 }
 
-var scopedId$j = "vf-ac7e8d";
+var scopedId$k = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$j, () => {
+    return withScopedCSS(scopedId$k, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -155,15 +156,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$i = "vf-ede279";
+var scopedId$j = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$i, () => {
+    return withScopedCSS(scopedId$j, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$h = "vf-4c1803";
+var scopedId$i = "vf-4c1803";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -271,16 +272,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$h, () => {
+    return withScopedCSS(scopedId$i, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), 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 = withAnnotation({
     providers: [
@@ -291,7 +292,7 @@ const DropdownMenuPortal = withAnnotation({
     const menuRef = createRef();
     let timer = null;
     const delay = 10;
-    onMounted(() => {
+    function update() {
         const menuElement = menuRef.current;
         if (props.abreast) {
             const btnEle = props.triggerRef.current;
@@ -351,19 +352,28 @@ const DropdownMenuPortal = withAnnotation({
                 }, delay);
             }
         }
+    }
+    onUpdated(() => {
+        update();
     });
     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 createPortal(withScopedCSS(scopedId$f, () => {
+    return createPortal(withScopedCSS(scopedId$g, () => {
         return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -395,6 +405,9 @@ const Dropdown = withAnnotation({
     });
     const subscription = new Subscription();
     onMounted(() => {
+        if (props.trigger === 'none') {
+            return;
+        }
         if (props.trigger === 'click') {
             subscription.add(fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
@@ -420,14 +433,14 @@ const Dropdown = withAnnotation({
     return {
         isShow(b) {
             if (b) {
-                dropdownContextService.hide(false);
+                dropdownContextService.open();
             }
             else {
-                dropdownContextService.open();
+                dropdownContextService.hide(false);
             }
         },
-        $render: withScopedCSS(scopedId$g, () => {
-            return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
+        $render: withScopedCSS(scopedId$h, () => {
+            return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsx("div", { class: "dropdown-menu-item", onClick: () => {
                                         var _a;
@@ -442,6 +455,14 @@ const Dropdown = withAnnotation({
     };
 });
 
+var scopedId$f = "vf-acaa5f";
+
+function MenuHeading(props) {
+    return withScopedCSS(scopedId$f, () => {
+        return (jsx("div", { class: "menu-heading", children: props.children }));
+    });
+}
+
 var scopedId$e = "vf-678daa";
 
 function MenuItem(props) {
@@ -603,11 +624,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 = useContext();
+    const selection = textbus.get(Selection);
+    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();
+        }
+    });
+    onContentInsert(ev => {
+        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
+            (typeof ev.data.content === 'string' || ev.data.content.type !== 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 Component {
+    static fromJSON(textbus, json) {
+        const slot = textbus.get(Registry).createSlot(json.slot);
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    }
+    constructor(textbus, state = {
+        slot: new Slot([
+            ContentType.BlockComponent
+        ])
+    }) {
+        super(textbus, state);
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+BlockquoteComponent.type = ContentType.BlockComponent;
+BlockquoteComponent.componentName = 'BlockquoteComponent';
+BlockquoteComponent.zenCoding = {
+    key: ' ',
+    match(content, textbus) {
+        const selection = textbus.get(Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^>$/.test(content);
+        }
+        return false;
+    },
+    createState(_, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            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 = inject(DomAdapter);
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        const slot = props.component.state.slot;
+        return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
+                return createVNode('div', null, children);
+            }, readonly() || output()) }));
+    };
+}
+const blockquoteComponentLoader = {
+    match(element) {
+        return element.tagName === 'BLOCKQUOTE';
+    },
+    read(element, textbus, slotParser) {
+        const delta = slotParser(new Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]), element).toDelta();
+        const slot = new Slot([
+            ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    },
+};
+
+class HighlightBoxComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new HighlightBoxComponent(textbus, {
+            type: json.type,
+            slot: textbus.get(Registry).createSlot(json.slot)
+        });
+    }
+    constructor(textbus, state = {
+        type: '',
+        slot: new Slot([
+            ContentType.BlockComponent,
+        ])
+    }) {
+        super(textbus, state);
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = ContentType.BlockComponent;
+function HighlightBoxView(props) {
+    const adapter = inject(DomAdapter);
+    const readonly = useReadonly();
+    const output = useOutput();
+    const emoji = [];
+    for (let i = 0x1F600; i <= 0x1F64F; i++) {
+        emoji.push(i);
+    }
+    const dropdownRef = 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 (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
+                        return createVNode('div', {
+                            class: 'xnote-highlight-box-content'
+                        }, children);
+                    }, readonly() || output())] }));
+        }
+        return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
+                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                }), jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
+                                    const icon = String.fromCodePoint(i);
+                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
+                    return 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 Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
+        const slot = new Slot([
+            ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new HighlightBoxComponent(textbus, {
+            type: element.dataset.icon || '',
+            slot
+        });
+    }
+};
+
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -628,12 +830,20 @@ class ParagraphComponent extends Component {
         const commander = injector.get(Commander);
         const selection = injector.get(Selection);
         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();
         });
@@ -1422,30 +1632,6 @@ function AttrTool(props) {
     });
 }
 
-function useBlockContent(slot) {
-    const textbus = useContext();
-    const selection = textbus.get(Selection);
-    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();
-        }
-    });
-    onContentInsert(ev => {
-        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
-            (typeof ev.data.content === 'string' || ev.data.content.type !== 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 Component {
@@ -1788,14 +1974,20 @@ TodolistComponent.zenCoding = {
         return false;
     },
     key: ' ',
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            ContentType.InlineComponent,
+            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 Slot([
-                ContentType.InlineComponent,
-                ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -1852,76 +2044,6 @@ const todolistComponentLoader = {
     }
 };
 
-class BlockquoteComponent extends Component {
-    static fromJSON(textbus, json) {
-        const slot = textbus.get(Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    }
-    constructor(textbus, state = {
-        slot: new Slot([
-            ContentType.BlockComponent
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-BlockquoteComponent.type = ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match(content, textbus) {
-        const selection = textbus.get(Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            return /^>$/.test(content);
-        }
-        return false;
-    },
-    createState() {
-        return {
-            slot: new Slot([
-                ContentType.BlockComponent
-            ])
-        };
-    }
-};
-function BlockquoteView(props) {
-    const adapter = inject(DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        const slot = props.component.state.slot;
-        return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return createVNode('div', null, children);
-            }, readonly() || output()) }));
-    };
-}
-const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new Slot([
-            ContentType.BlockComponent,
-            ContentType.InlineComponent,
-            ContentType.Text
-        ]), element).toDelta();
-        const slot = new Slot([
-            ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    },
-};
-
 class ListComponent extends Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -2035,14 +2157,20 @@ ListComponent.zenCoding = {
         }
         return false;
     },
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            ContentType.InlineComponent,
+            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 Slot([
-                ContentType.InlineComponent,
-                ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -2254,86 +2382,6 @@ function useActiveBlock() {
     };
 }
 
-class HighlightBoxComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
-            type: json.type,
-            slot: textbus.get(Registry).createSlot(json.slot)
-        });
-    }
-    constructor(textbus, state = {
-        type: '',
-        slot: new Slot([
-            ContentType.BlockComponent,
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
-HighlightBoxComponent.componentName = 'HighlightBoxComponent';
-HighlightBoxComponent.type = ContentType.BlockComponent;
-function HighlightBoxView(props) {
-    const adapter = inject(DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    const emoji = [];
-    for (let i = 0x1F600; i <= 0x1F64F; i++) {
-        emoji.push(i);
-    }
-    const dropdownRef = 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 (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly() || output())] }));
-        }
-        return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
-                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                }), jsx(Divider, {}), emoji.map(i => {
-                                    const icon = String.fromCodePoint(i);
-                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return 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 Slot([
-            ContentType.BlockComponent,
-            ContentType.InlineComponent,
-            ContentType.Text
-        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
-        const slot = new Slot([
-            ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new HighlightBoxComponent(textbus, {
-            type: element.dataset.icon || '',
-            slot
-        });
-    }
-};
-
 function useBlockTransform() {
     const commander = inject(Commander);
     const textbus = inject(Textbus);
@@ -3106,6 +3154,9 @@ const isSupportFont = (function () {
 function FontFamilyTool() {
     const currentFontFamily = createSignal('');
     const fontFamilyOptions = [{
+            label: '默认',
+            value: ''
+        }, {
             label: '宋体',
             value: 'SimSun, STSong'
         }, {
@@ -3156,7 +3207,7 @@ function FontFamilyTool() {
         const result = query.queryFormat(fontFamilyFormatter);
         const isHighlight = result.state === QueryStateType.Enabled;
         highlight.set(isHighlight);
-        currentFontFamily.set(isHighlight ? result.value : '默认');
+        currentFontFamily.set(isHighlight ? result.value : '');
     });
     onUnmounted(() => {
         subscription.unsubscribe();
@@ -3164,7 +3215,7 @@ function FontFamilyTool() {
     return () => {
         var _a;
         return (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: jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
@@ -3556,7 +3607,7 @@ function InsertTool(props) {
         }
     }
     return withScopedCSS(scopedId$8, () => {
-        return jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
+        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
     });
 }
 
@@ -3595,12 +3646,14 @@ const LeftToolbar = withAnnotation({
         const sub = fromEvent(docContentContainer, 'mousemove').pipe(filter(() => {
             return !isIgnoreMove;
         }), 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) === ContentType.InlineComponent) {
+                        currentNode = currentNode.parentNode;
+                        continue;
                     }
                     return slot;
                 }
@@ -3615,7 +3668,9 @@ const LeftToolbar = 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();
@@ -3712,6 +3767,7 @@ const LeftToolbar = withAnnotation({
         isIgnoreMove = b;
     }
     return withScopedCSS(scopedId$7, () => {
+        var _a;
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsx("span", { class: "xnote-icon-pilcrow" });
@@ -3739,6 +3795,8 @@ const LeftToolbar = withAnnotation({
                 }
             }
         }
+        const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
+        const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
@@ -3748,9 +3806,9 @@ const LeftToolbar = withAnnotation({
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsx(InsertTool, { replace: true, slot: activeSlot() })
+                        jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsx("span", { children: jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxs("span", { children: [activeNode, jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -4030,6 +4088,198 @@ class Matcher {
     }
 }
 
+class Organization {
+}
+function registerAtShortcut(textbus) {
+    const keyboard = textbus.get(Keyboard);
+    const selection = textbus.get(Selection);
+    const commander = textbus.get(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 Component {
+    static fromJSON(textbus, { slot: slotState, userInfo }) {
+        const registry = textbus.get(Registry);
+        if (slotState) {
+            const slot = registry.createSlot(slotState);
+            return new AtComponent({
+                slot
+            });
+        }
+        return new AtComponent(textbus, {
+            userInfo,
+        });
+    }
+    constructor(textbus, state = {
+        slot: new Slot([ContentType.Text])
+    }) {
+        if (!state.userInfo && !state.slot) {
+            state.slot = new Slot([ContentType.Text]);
+        }
+        super(textbus, state);
+        this.focus = new Subject();
+        this.members = createSignal([]);
+        this.selectedIndex = createSignal(0);
+    }
+    setup() {
+        let isFocus = false;
+        onFocus(() => {
+            isFocus = true;
+            this.focus.next(true);
+            onChange.next();
+        });
+        onBlur(() => {
+            isFocus = false;
+            this.focus.next(false);
+        });
+        const organization = useContext(Organization);
+        const selection = useContext(Selection);
+        const commander = useContext(Commander);
+        const onChange = new Subject();
+        onContentInserted((ev) => {
+            const key = this.state.slot.toString();
+            if (key.length > 10) {
+                selection.selectComponent(this);
+                commander.insert(key);
+                ev.preventDefault();
+                return;
+            }
+            onChange.next();
+        });
+        onContentDeleted(() => {
+            onChange.next();
+        });
+        onBreak((ev) => {
+            const member = this.members()[this.selectedIndex()];
+            if (member) {
+                this.state.userInfo = Object.assign({}, member);
+            }
+            selection.selectComponentEnd(this);
+            ev.preventDefault();
+        });
+        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(switchMap(() => {
+            const key = this.state.slot.toString();
+            return fromPromise(organization.getMembers(key));
+        })).subscribe((members) => {
+            this.members.set(members);
+            this.selectedIndex.set(0);
+            if (isFocus) {
+                this.focus.next(true);
+            }
+        });
+        onDestroy(() => {
+            subs.unsubscribe();
+        });
+    }
+}
+AtComponent.componentName = 'AtComponent';
+AtComponent.type = ContentType.InlineComponent;
+
+function AtComponentView(props) {
+    const adapter = inject(DomAdapter);
+    const selection = inject(Selection);
+    const dropdownRef = createRef();
+    const subscription = props.component.focus.subscribe((b) => {
+        if (dropdownRef.current && props.component.members().length) {
+            dropdownRef.current.isShow(b);
+        }
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    const readonly = useReadonly();
+    const output = useOutput();
+    const membersRef = createRef();
+    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 (jsxs("span", { class: "xnote-at xnote-at-complete", ref: props.rootRef, "data-component": props.component.name, children: ["@", userInfo.name] }));
+        }
+        if (readonly() || output()) {
+            return (jsxs("span", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
+                        return createVNode('span', {
+                            class: 'xnote-at-input'
+                        }, children);
+                    })] }));
+        }
+        const members = props.component.members();
+        return (jsx("span", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
+                        let hsl = any2Hsl(member.color);
+                        if (hsl === 'unknown') {
+                            hsl = any2Hsl('#000');
+                        }
+                        const rgb = hsl2Rgb(hsl);
+                        const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+                        const color = yiq >= 128 ? '#000' : '#fff';
+                        return (jsxs("div", { onClick: () => {
+                                props.component.state.userInfo = member;
+                                selection.selectComponentEnd(props.component);
+                            }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsx("img", { src: member.avatar, alt: member.name }) :
+                                        jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color }, children: member.name }) }), jsxs("div", { class: "xnote-at-member-info", children: [jsx("div", { class: "xnote-at-member-name", children: member.name }), jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
+                    }) }), children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
+                        return 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 Component {
     constructor() {
         super(...arguments);
@@ -4047,6 +4297,17 @@ class RootComponent extends 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 = ContentType.BlockComponent;
@@ -4061,6 +4322,9 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
+    onUpdated(() => {
+        props.component.afterCheck();
+    });
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
@@ -4188,7 +4452,7 @@ function ResizeColumn(props) {
     });
 }
 
-var scopedId$4 = "vf-d64cf9";
+var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = inject(EditorService);
@@ -4353,7 +4617,7 @@ function Scroll(props) {
     });
 }
 
-var scopedId$2 = "vf-ef93c0";
+var scopedId$2 = "vf-aaece0";
 
 function LeftBar(props) {
     const editorService = inject(EditorService);
@@ -4814,7 +5078,8 @@ class Editor extends 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 ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4830,6 +5095,7 @@ class Editor extends Textbus {
         const browserModule = new BrowserModule(Object.assign({ renderTo: () => {
                 return this.host;
             }, adapter, componentLoaders: [
+                atComponentLoader,
                 sourceCodeComponentLoader,
                 tableComponentLoader,
                 imageComponentLoader,
@@ -4869,7 +5135,8 @@ class Editor extends 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 ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4898,7 +5165,8 @@ class Editor extends Textbus {
                 TableComponent,
                 HighlightBoxComponent,
                 ListComponent,
-                VideoComponent
+                VideoComponent,
+                AtComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
@@ -4926,6 +5194,7 @@ class Editor extends Textbus {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
+                registerAtShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new OutputTranslator();
@@ -4967,4 +5236,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };