@textbus/xnote 0.0.1-alpha.8 → 0.0.1

package/bundles/index.js

@@ -8,10 +8,12 @@ var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
 var highlightjs = require('highlight.js');
+var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
+var color = require('@tanbo/color');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$k = "vf-69b4db";
+var scopedId$n = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -30,6 +32,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -73,7 +87,7 @@ exports.DropdownContextService = DropdownContextService_1 = class DropdownContex
         this.canHide = true;
         this.openStateChangeEvent = new core$1.Subject();
         this.timer = null;
-        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, core.InjectFlags.SkipSelf, null);
+        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, core.InjectFlags.SkipSelf);
         this.onOpenStateChange = this.openStateChangeEvent.asObservable();
         dropdownService.onSiblingOpen.subscribe(id => {
             if (id === this.id) {
@@ -122,7 +136,7 @@ exports.DropdownContextService = DropdownContextService_1 = __decorate([
 ], exports.DropdownContextService);
 
 function Button(props) {
-    const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService, null);
     const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -132,7 +146,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(scopedId$n, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -144,10 +158,10 @@ function Button(props) {
     });
 }
 
-var scopedId$j = "vf-ac7e8d";
+var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(scopedId$m, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -157,15 +171,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$i = "vf-ede279";
+var scopedId$l = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(scopedId$l, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$h = "vf-4c1803";
+var scopedId$k = "vf-8abf2c";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -186,7 +200,7 @@ function DragResize(props) {
         isShow.set(true);
         const width = ref.current.offsetWidth;
         const height = ref.current.offsetHeight;
-        mask.current.innerText = `${Math.round(width)}px * ${Math.round(height)}px`;
+        sizeText.set(`${Math.round(width)}px * ${Math.round(height)}px`);
     });
     function selectComponent() {
         selection.selectComponent(component, true);
@@ -263,7 +277,7 @@ function DragResize(props) {
             }
             ele.style.width = endWidth + 'px';
             ele.style.height = endHeight + 'px';
-            mask.current.innerText = `${Math.round(endWidth)}px * ${Math.round(endHeight)}px`;
+            sizeText.set(`${Math.round(endWidth)}px * ${Math.round(endHeight)}px`);
         });
         const unUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
             component.state.width = endWidth + 'px';
@@ -273,16 +287,17 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$h, () => {
+    const sizeText = core.createSignal(`${component.state.width}*${component.state.height}`);
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         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" })] })] })] }));
+                        }], children: [jsxRuntime.jsx("div", { class: "mask", ref: mask, children: sizeText() }), 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$j = "vf-a99c5e";
 
-var scopedId$f = "vf-41a617";
+var scopedId$i = "vf-8a05e9";
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -290,11 +305,14 @@ const DropdownMenuPortal = core.withAnnotation({
     ]
 }, function DropdownMenuPortal(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
     const menuRef = core.createRef();
     let timer = null;
     const delay = 10;
-    core.onMounted(() => {
+    function update() {
         const menuElement = menuRef.current;
+        menuElement.style.height = 'auto';
+        const containerRect = container.getBoundingClientRect();
         if (props.abreast) {
             const btnEle = props.triggerRef.current;
             const screenHeight = document.documentElement.clientHeight;
@@ -309,19 +327,19 @@ const DropdownMenuPortal = core.withAnnotation({
             else if (offsetTop + maxHeight > screenHeight - 10) {
                 offsetTop = screenHeight - 10 - maxHeight;
             }
-            menuElement.style.top = offsetTop + 'px';
+            menuElement.style.top = offsetTop - containerRect.top + 'px';
             const triggerRect = props.triggerRef.current.getBoundingClientRect();
             const leftDistance = triggerRect.left;
             const isToLeft = leftDistance >= menuElement.offsetWidth + 20;
-            if (isToLeft) {
-                menuElement.style.left = leftDistance - menuElement.offsetWidth - 20 + 'px';
+            if (isToLeft && props.toLeft) {
+                menuElement.style.left = leftDistance - menuElement.offsetWidth - 20 - containerRect.left + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateX(10px)';
                     menuElement.style.opacity = '1';
                 }, delay);
             }
             else {
-                menuElement.style.left = triggerRect.right + 20 + 'px';
+                menuElement.style.left = triggerRect.right + 20 - containerRect.left + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateX(-10px)';
                     menuElement.style.opacity = '1';
@@ -333,12 +351,12 @@ const DropdownMenuPortal = core.withAnnotation({
             const documentClientHeight = document.documentElement.clientHeight;
             const bottomDistance = documentClientHeight - triggerRect.bottom;
             const isToTop = bottomDistance < 200 && triggerRect.top > bottomDistance;
-            menuElement.style.left = triggerRect.left + 'px';
+            menuElement.style.left = triggerRect.left - containerRect.left + 'px';
             if (isToTop) {
                 const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
-                const height = Math.min(triggerRect.top - 20, maxHeight);
+                const height = Math.min(triggerRect.top - 20, maxHeight, 400);
                 menuElement.style.height = height + 'px';
-                menuElement.style.top = triggerRect.top - 20 - height + 'px';
+                menuElement.style.top = triggerRect.top - 20 - height - containerRect.top + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateY(10px)';
                     menuElement.style.opacity = '1';
@@ -346,30 +364,41 @@ const DropdownMenuPortal = core.withAnnotation({
             }
             else {
                 menuElement.style.height = Math.min(bottomDistance - 20, menuElement.scrollHeight) + 'px';
-                menuElement.style.top = triggerRect.bottom + 20 + 'px';
+                menuElement.style.top = triggerRect.bottom + 20 - containerRect.top + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateY(-10px)';
                     menuElement.style.opacity = '1';
                 }, 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$i, () => {
         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 }) }));
-    }), document.body);
+            }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
+                    padding: props.padding
+                }, children: props.children }) }));
+    }), container);
 });
 
 const Dropdown = core.withAnnotation({
@@ -397,6 +426,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 +454,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$j, () => {
+            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, { toLeft: props.toLeft, padding: props.padding, 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,10 +476,54 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var scopedId$e = "vf-64f71d";
+var scopedId$h = "vf-c32a7b";
+
+function Keymap(props) {
+    const arr = [];
+    const keymap = props.keymap;
+    if (keymap.ctrlKey) {
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-command" }) : jsxRuntime.jsx("span", { children: "Ctrl" }));
+    }
+    if (keymap.shiftKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-shift" }) : jsxRuntime.jsx("span", { children: "Shift" }));
+    }
+    if (keymap.altKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-opt" }) : jsxRuntime.jsx("span", { children: "Alt" }));
+    }
+    if (keymap.key) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        if (Array.isArray(keymap.key)) {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key.join('/') }));
+        }
+        else {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
+        }
+    }
+    return scopedCss.withScopedCSS(scopedId$h, () => {
+        return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
+    });
+}
+
+var scopedId$g = "vf-acaa5f";
+
+function MenuHeading(props) {
+    return scopedCss.withScopedCSS(scopedId$g, () => {
+        return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
+    });
+}
+
+var scopedId$f = "vf-c3b9dc";
 
 function MenuItem(props) {
-    const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService, null);
     const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -464,8 +540,8 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(scopedId$e, () => {
-        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
+    return scopedCss.withScopedCSS(scopedId$f, () => {
+        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { class: "menu-item-content", children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsxRuntime.jsx("div", { children: props.desc })] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
                             'menu-check',
@@ -474,11 +550,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$d = "vf-a23c47";
+var scopedId$e = "vf-a23c47";
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$d, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$e, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -486,15 +562,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$c = "vf-216815";
+var scopedId$d = "vf-216815";
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(scopedId$c, () => {
+    return scopedCss.withScopedCSS(scopedId$d, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$b = "vf-2a8a65";
+var scopedId$c = "vf-2a8a65";
 
 exports.RefreshService = class RefreshService {
     constructor() {
@@ -556,6 +632,308 @@ function useOutput() {
     return core.createSignal(core.inject(OutputInjectionToken));
 }
 
+const headingAttr = new core$1.Attribute('Heading', {
+    render(node, formatValue) {
+        node.classes.add('xnote-' + formatValue);
+    }
+});
+const headingAttrLoader = {
+    match(element) {
+        return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
+    },
+    read(element) {
+        if (/H[1-6]/.test(element.tagName)) {
+            return {
+                attribute: headingAttr,
+                value: element.tagName.toLowerCase()
+            };
+        }
+        return {
+            attribute: headingAttr,
+            value: element.className.substring(6)
+        };
+    }
+};
+function registerHeadingShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    const commander = textbus.get(core$1.Commander);
+    const selection = textbus.get(core$1.Selection);
+    keyboard.addShortcut({
+        keymap: {
+            key: '0123456'.split(''),
+            ctrlKey: true
+        },
+        action(key) {
+            if (key === '0') {
+                commander.unApplyAttribute(headingAttr);
+                return;
+            }
+            commander.applyAttribute(headingAttr, 'h' + key);
+        }
+    });
+    keyboard.addZenCodingInterceptor({
+        match(content) {
+            return /^#{1,6}$/.test(content);
+        },
+        try(key) {
+            return key === ' ';
+        },
+        action(content) {
+            if (selection.commonAncestorComponent instanceof SourceCodeComponent) {
+                return false;
+            }
+            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();
+        }
+    });
+}
+
+function SlotRender(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const instance = core.getCurrentInstance();
+    const slot = props.slot;
+    const sub = core$1.merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+        if (props.slot.__changeMarker__.dirty) {
+            instance.markAsDirtied();
+        }
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
+        return adapter.slotRender(slot, children => {
+            return core$1.createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
+        }, renderEnv);
+    };
+}
+
+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);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    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 toBlockquote(textbus) {
+    const query = textbus.get(core$1.Query);
+    const commander = textbus.get(core$1.Commander);
+    const selection = textbus.get(core$1.Selection);
+    const state = query.queryComponent(BlockquoteComponent);
+    if (state.state === core$1.QueryStateType.Enabled) {
+        const current = state.value;
+        const parent = current.parent;
+        const index = parent.indexOf(current);
+        parent.retain(index);
+        commander.removeComponent(current);
+        current.slots.at(0).sliceContent().forEach(i => {
+            parent.insert(i);
+        });
+    }
+    else {
+        const block = new BlockquoteComponent(textbus);
+        const slot = block.state.slot;
+        if (selection.startSlot === selection.endSlot) {
+            const parentComponent = selection.startSlot.parent;
+            const parentSlot = parentComponent.parent;
+            const position = parentSlot.indexOf(parentComponent);
+            slot.insert(parentComponent);
+            parentSlot.retain(position);
+            parentSlot.insert(block);
+        }
+        else {
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const scope = selection.getCommonAncestorSlotScope();
+            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
+                slot.insert(i);
+            });
+            commonAncestorSlot.retain(scope.startOffset);
+            commonAncestorSlot.insert(block);
+        }
+    }
+}
+function registerBlockquoteShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            ctrlKey: true,
+            key: '\''
+        },
+        action() {
+            toBlockquote(textbus);
+        }
+    });
+}
+function BlockquoteView(props) {
+    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: jsxRuntime.jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
+    };
+}
+const blockquoteComponentLoader = {
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && 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);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
+function HighlightBoxView(props) {
+    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 || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: 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 || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: 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);
@@ -571,16 +949,28 @@ class ParagraphComponent extends core$1.Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const injector = core$1.useContext();
         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();
         });
@@ -589,22 +979,30 @@ class ParagraphComponent extends core$1.Component {
 ParagraphComponent.componentName = 'ParagraphComponent';
 ParagraphComponent.type = core$1.ContentType.BlockComponent;
 function ParagraphView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
-                return (core$1.createVNode('p', null, children));
-            }, readonly() || output()) }));
+        return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsxRuntime.jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
 const paragraphComponentLoader = {
-    match(element) {
-        return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && (element.dataset.component === ParagraphComponent.componentName || /^P|H[1-6]$/.test(element.tagName));
     },
     read(element, textbus, slotParser) {
-        const content = /P|H[1-6]/.test(element.tagName) ? element : element.children[0];
+        let content;
+        if (/^P|H[1-6]$/.test(element.tagName)) {
+            content = element;
+        }
+        else {
+            content = element.children[0];
+            if (!content) {
+                const p = document.createElement('p');
+                p.append(element.innerText);
+                content = p;
+            }
+        }
         const delta = slotParser(new core$1.Slot([
             core$1.ContentType.Text,
             core$1.ContentType.InlineComponent,
@@ -680,6 +1078,15 @@ const languageList = [{
     }, {
         label: 'Go',
         value: 'Go'
+    }, {
+        label: 'Kotlin',
+        value: 'kotlin'
+    }, {
+        label: 'Python',
+        value: 'python'
+    }, {
+        label: 'PHP',
+        value: 'php'
     }, {
         label: 'JSON',
         value: 'JSON',
@@ -704,6 +1111,9 @@ const languageList = [{
     }, {
         label: 'Shell',
         value: 'shell',
+    }, {
+        label: 'Katex',
+        value: 'latex',
     }, {
         label: 'Yaml',
         value: 'yaml',
@@ -722,11 +1132,16 @@ const languageList = [{
     }, {
         label: 'Dart',
         value: 'dart',
+    }, {
+        label: 'Rust',
+        value: 'rust',
     }, {
         label: '',
         value: '',
     }];
 const sourceCodeThemes = [
+    'xnote-dark',
+    'xnote-dark-blue',
     'github',
     'atom-one-dark',
     'foundation',
@@ -782,12 +1197,17 @@ class SourceCodeComponent extends core$1.Component {
             theme: json.theme
         });
     }
+    getSlots() {
+        return this.state.slots.map(i => i.slot);
+    }
     setup() {
         const textbus = core$1.useContext();
         const selection = core$1.useContext(core$1.Selection);
         core$1.onBreak(ev => {
             const slots = this.state.slots;
-            if (ev.target.isEmpty && ev.target === slots[slots.length - 1].slot) {
+            const parentComponent = selection.commonAncestorComponent;
+            const parentSlot = parentComponent.parent;
+            if (parentSlot && ev.target.isEmpty && ev.target === slots[slots.length - 1].slot) {
                 const prevSlot = slots[slots.length - 2];
                 if (prevSlot === null || prevSlot === void 0 ? void 0 : prevSlot.slot.isEmpty) {
                     const slot = new core$1.Slot([
@@ -797,8 +1217,6 @@ class SourceCodeComponent extends core$1.Component {
                     const paragraph = new ParagraphComponent(textbus, {
                         slot
                     });
-                    const parentComponent = selection.commonAncestorComponent;
-                    const parentSlot = parentComponent.parent;
                     const index = parentSlot.indexOf(parentComponent);
                     parentSlot.retain(index + 1);
                     slots.pop();
@@ -826,6 +1244,12 @@ class SourceCodeComponent extends core$1.Component {
             });
             ev.preventDefault();
         });
+        core$1.onSlotApplyFormat(ev => {
+            ev.preventDefault();
+        });
+        core$1.onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
         core$1.onPaste(ev => {
             const codeList = [];
             const sourceCode = ev.data.text;
@@ -949,11 +1373,15 @@ class SourceCodeComponent extends core$1.Component {
 SourceCodeComponent.type = core$1.ContentType.BlockComponent;
 SourceCodeComponent.componentName = 'SourceCodeComponent';
 SourceCodeComponent.zenCoding = {
-    key: 'Enter',
-    match(c) {
-        const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
-        const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
-        return reg.test(c);
+    key: ['Enter', ' '],
+    match(c, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
+            const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
+            return reg.test(c);
+        }
+        return false;
     },
     createState(content) {
         const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
@@ -1020,7 +1448,7 @@ function SourceCodeView(props) {
     }
     const input = core.inject(platformBrowser.Input);
     function updateCaret() {
-        input.caret.refresh(false);
+        input.caret.refresh();
     }
     const readonly = useReadonly();
     const output = useOutput();
@@ -1057,28 +1485,6 @@ function SourceCodeView(props) {
                 }
             }
         }
-        function nodesToVNodes(slot, nodes, index) {
-            return nodes.map(i => {
-                const location = {
-                    slot,
-                    startIndex: index,
-                    endIndex: index + i.textContent.length
-                };
-                if (i.nodeType === Node.ELEMENT_NODE) {
-                    const childNodes = Array.from(i.childNodes);
-                    const vEle = core$1.createVNode('span', {
-                        class: i.className
-                    }, nodesToVNodes(slot, childNodes, index));
-                    index = location.endIndex;
-                    vEle.location = Object.assign({}, location);
-                    return vEle;
-                }
-                index = location.endIndex;
-                const textNode = new core$1.VTextNode(i.textContent);
-                textNode.location = location;
-                return textNode;
-            });
-        }
         return (jsxRuntime.jsxs("div", { ref: props.rootRef, class: {
                 'xnote-source-code': true,
                 'xnote-source-code-line-number': state.lineNumber,
@@ -1109,7 +1515,7 @@ function SourceCodeView(props) {
                         }
                     ], children: [jsxRuntime.jsx("div", { class: "xnote-source-code-line-number-bg", style: {
                                 width: Math.max(String(slots.length).length, 2.5) + 'em'
-                            } }), jsxRuntime.jsx("div", { onScroll: updateCaret, class: {
+                            } }), jsxRuntime.jsx("pre", { onScroll: updateCaret, class: {
                                 'xnote-source-code-content': true,
                                 'xnote-source-code-content-highlight': blockHighlight
                             }, style: {
@@ -1130,7 +1536,7 @@ function SourceCodeView(props) {
                                             children.push(br);
                                         }
                                     }
-                                    return core$1.createVNode('pre', {
+                                    return core$1.createVNode('div', {
                                         class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
                                     }, [
                                         core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
@@ -1139,10 +1545,33 @@ function SourceCodeView(props) {
                             }) }), jsxRuntime.jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
     };
 }
+function nodesToVNodes(slot, nodes, index) {
+    return nodes.map(i => {
+        const location = {
+            slot,
+            startIndex: index,
+            endIndex: index + i.textContent.length
+        };
+        if (i.nodeType === Node.ELEMENT_NODE) {
+            const childNodes = Array.from(i.childNodes);
+            const vEle = core$1.createVNode('span', {
+                class: i.className
+            }, nodesToVNodes(slot, childNodes, index));
+            index = location.endIndex;
+            vEle.location = Object.assign({}, location);
+            return vEle;
+        }
+        index = location.endIndex;
+        const textNode = new core$1.VTextNode(i.textContent);
+        textNode.location = location;
+        return textNode;
+    });
+}
 const sourceCodeComponentLoader = {
-    match(element) {
-        return (element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
-            element.tagName === 'PRE';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
     read(el, textbus) {
         let slots = [];
@@ -1270,15 +1699,26 @@ function AttrTool(props) {
         textIndent: 0
     });
     function updateCheckStates() {
-        var _a, _b;
-        (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
+        if (!props.slot && !selection.isSelected) {
+            return;
+        }
         setCheckStates(draft => {
-            const textAlignState = query.queryAttribute(textAlignAttr);
-            const textIndentState = query.queryAttribute(textIndentAttr);
+            const range = props.slot ? {
+                startSlot: props.slot,
+                endSlot: props.slot,
+                startOffset: 0,
+                endOffset: props.slot.length
+            } : {
+                startSlot: selection.startSlot,
+                startOffset: selection.startOffset,
+                endSlot: selection.endSlot,
+                endOffset: selection.endOffset
+            };
+            const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
+            const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
             draft.textAlign = textAlignState.state === core$1.QueryStateType.Enabled ? textAlignState.value : 'left';
             draft.textIndent = textIndentState.state === core$1.QueryStateType.Enabled ? textIndentState.value : 0;
         });
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
@@ -1325,110 +1765,35 @@ function AttrTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(scopedId$b, () => {
+    return scopedCss.withScopedCSS(scopedId$c, () => {
         const states = checkStates();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
+        return (jsxRuntime.jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
                     value: ''
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'Tab' } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
                     value: 'i+'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
             ], children: props.children || jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
     });
 }
 
-const headingAttr = new core$1.Attribute('Heading', {
-    render(node, formatValue) {
-        node.classes.add('xnote-' + formatValue);
-    }
-});
-const headingAttrLoader = {
-    match(element) {
-        return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
-    },
-    read(element) {
-        if (/H[1-6]/.test(element.tagName)) {
-            return {
-                attribute: headingAttr,
-                value: element.tagName.toLowerCase()
-            };
-        }
-        return {
-            attribute: headingAttr,
-            value: element.className.substring(6)
-        };
-    }
-};
-function registerHeadingShortcut(textbus) {
-    const keyboard = textbus.get(core$1.Keyboard);
-    const commander = textbus.get(core$1.Commander);
-    const selection = textbus.get(core$1.Selection);
-    keyboard.addShortcut({
-        keymap: {
-            key: '123456'.split(''),
-            ctrlKey: true
-        },
-        action(key) {
-            commander.applyAttribute(headingAttr, 'h' + key);
-        }
-    });
-    keyboard.addZenCodingInterceptor({
-        match(content) {
-            return /^#{1,6}$/.test(content);
-        },
-        try(key) {
-            return key === ' ';
-        },
-        action(content) {
-            const commonAncestorSlot = selection.commonAncestorSlot;
-            commonAncestorSlot.cut();
-            commander.applyAttribute(headingAttr, 'h' + content.length);
-            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();
-        }
-    });
-}
-
 const defaultRowHeight = 30;
 const defaultColumnWidth = 100;
 class TableComponent extends core$1.Component {
@@ -1451,17 +1816,18 @@ class TableComponent extends core$1.Component {
         });
     }
     constructor(textbus, state = {
-        layoutWidth: Array.from({ length: 3 }).fill(100),
+        layoutWidth: Array.from({ length: 5 }).fill(100),
         rows: Array.from({ length: 3 }).map(() => {
             return {
                 height: defaultRowHeight,
-                cells: Array.from({ length: 3 }).map(() => {
+                cells: Array.from({ length: 5 }).map(() => {
+                    const p = new ParagraphComponent(textbus);
+                    const slot = new core$1.Slot([core$1.ContentType.BlockComponent]);
+                    slot.insert(p);
                     return {
                         rowspan: 1,
                         colspan: 1,
-                        slot: new core$1.Slot([
-                            core$1.ContentType.BlockComponent
-                        ])
+                        slot
                     };
                 })
             };
@@ -1472,7 +1838,11 @@ class TableComponent extends core$1.Component {
         this.focus = new core$1.Subject();
         this.tableSelection = core.createSignal(null);
     }
+    getSlots() {
+        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
+    }
     setup() {
+        const selection = core$1.useContext(core$1.Selection);
         core$1.onFocusIn(() => {
             this.focus.next(true);
         });
@@ -1482,12 +1852,42 @@ class TableComponent extends core$1.Component {
         useBlockContent((slot) => {
             return slot.parent === this;
         });
-        core$1.onGetRanges(ev => {
-            const selectPosition = this.tableSelection();
+        const sub = selection.onChange.subscribe(() => {
+            if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
+                this.tableSelection.set(null);
+            }
+        });
+        core$1.onDestroy(() => {
+            sub.unsubscribe();
+        });
+        const findPosition = (slot) => {
+            let cell = slot;
+            while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
+                cell = cell.parentSlot;
+            }
+            if (cell) {
+                const rows = this.state.rows;
+                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                    const row = rows[rowIndex].cells;
+                    for (let colIndex = 0; colIndex < row.length; colIndex++) {
+                        const item = row[colIndex].slot;
+                        if (item === cell) {
+                            return {
+                                rowIndex,
+                                colIndex
+                            };
+                        }
+                    }
+                }
+            }
+            return null;
+        };
+        const select = (ev, selectPosition) => {
+            this.tableSelection.set(selectPosition);
             if (selectPosition) {
                 const cells = [];
-                this.state.rows.slice(selectPosition.startRow, selectPosition.endRow + 1).forEach(row => {
-                    cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn + 1).map(i => i.slot));
+                this.state.rows.slice(selectPosition.startRow, selectPosition.endRow).forEach(row => {
+                    cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn).map(i => i.slot));
                 });
                 ev.useRanges(cells.map(i => {
                     return {
@@ -1498,33 +1898,64 @@ class TableComponent extends core$1.Component {
                 }));
                 ev.preventDefault();
             }
-        });
-    }
-    afterContentCheck() {
-        const selection = this.selection;
-        const rows = this.state.rows;
-        rows.forEach(row => {
-            row.cells.forEach(cell => {
-                const slot = cell.slot;
-                if (slot.isEmpty) {
-                    const childSlot = new core$1.Slot([
-                        core$1.ContentType.Text,
-                        core$1.ContentType.InlineComponent
-                    ]);
-                    const p = new ParagraphComponent(this.textbus, {
-                        slot: childSlot
-                    });
-                    slot.insert(p);
-                    if (slot === selection.anchorSlot) {
-                        selection.setAnchor(childSlot, 0);
-                    }
-                    if (slot === selection.focusSlot) {
-                        selection.setFocus(childSlot, 0);
+        };
+        core$1.onGetRanges(ev => {
+            var _a;
+            const startPosition = findPosition(selection.startSlot);
+            const endPosition = findPosition(selection.endSlot);
+            if (startPosition && endPosition) {
+                if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
+                    if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
+                        select(ev, {
+                            startColumn: startPosition.colIndex,
+                            startRow: startPosition.rowIndex,
+                            endColumn: endPosition.colIndex + 1,
+                            endRow: endPosition.rowIndex + 1
+                        });
+                        return;
                     }
+                    select(ev, null);
+                    return;
                 }
-            });
+                const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
+                const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
+                select(ev, {
+                    startColumn,
+                    startRow,
+                    endColumn: endColumn + 1,
+                    endRow: endRow + 1
+                });
+            }
+            else {
+                select(ev, null);
+            }
         });
     }
+    // afterContentCheck() {
+    //   const selection = this.selection
+    //   const rows = this.state.rows
+    //   rows.forEach(row => {
+    //     row.cells.forEach(cell => {
+    //       const slot = cell.slot
+    //       if (slot.isEmpty) {
+    //         const childSlot = new Slot([
+    //           ContentType.Text,
+    //           ContentType.InlineComponent
+    //         ])
+    //         const p = new ParagraphComponent(this.textbus, {
+    //           slot: childSlot
+    //         })
+    //         slot.insert(p)
+    //         if (slot === selection.anchorSlot) {
+    //           selection.setAnchor(childSlot, 0)
+    //         }
+    //         if (slot === selection.focusSlot) {
+    //           selection.setFocus(childSlot, 0)
+    //         }
+    //       }
+    //     })
+    //   })
+    // }
     deleteColumn(index) {
         this.state.layoutWidth.splice(index, 1);
         this.state.rows.forEach(row => {
@@ -1647,12 +2078,16 @@ class TodolistComponent extends core$1.Component {
             checked: json.checked
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
         const selection = core$1.useContext(core$1.Selection);
         core$1.onBreak(ev => {
             const slot = ev.target.cut(ev.data.index);
+            slot.removeAttribute(headingAttr);
             if (ev.target.isEmpty && slot.isEmpty) {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1700,21 +2135,32 @@ class TodolistComponent extends core$1.Component {
 TodolistComponent.type = core$1.ContentType.BlockComponent;
 TodolistComponent.componentName = 'TodoListComponent';
 TodolistComponent.zenCoding = {
-    match: /^\[(x|\s)?\]$/,
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^\[(x|\s)?\]$/.test(content);
+        }
+        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
         };
     }
 };
 function TodolistView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -1743,11 +2189,7 @@ function TodolistView(props) {
                 marginLeft: indent * 24 + 'px',
                 justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                 textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-todolist-content'
-                    }, children);
-                }, readonly() || output())] }));
+            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -1766,68 +2208,40 @@ 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);
-    }
+function toList(textbus, type) {
+    const commander = textbus.get(core$1.Commander);
+    commander.transform({
+        targetType: ListComponent.type,
+        slotFactory() {
+            return new core$1.Slot([
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.Text
+            ]);
+        },
+        stateFactory(slots) {
+            return slots.map((slot, index) => {
+                return new ListComponent(textbus, {
+                    type,
+                    reorder: index === 0,
+                    slot
+                });
+            });
+        }
+    });
 }
-BlockquoteComponent.type = core$1.ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match: /^>$/,
-    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()) }));
-    };
+function registerListShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            key: ['o', 'u'],
+            ctrlKey: true,
+            shiftKey: true
+        },
+        action(key) {
+            toList(textbus, key === 'o' ? 'OrderedList' : 'UnorderedList');
+        }
+    });
 }
-const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-        ]), 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, {
@@ -1836,6 +2250,9 @@ class ListComponent extends core$1.Component {
             slot: textbus.get(core$1.Registry).createSlot(json.slot)
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
@@ -1849,8 +2266,7 @@ class ListComponent extends core$1.Component {
             const afterContent = parentSlot.sliceContent(index + 1);
             for (const item of afterContent) {
                 if (item instanceof ListComponent &&
-                    item.state.type === 'OrderedList' &&
-                    item.state.slot.getAttribute(textIndentAttr) === this.state.slot.getAttribute(textIndentAttr)) {
+                    item.state.type === 'OrderedList') {
                     if (item.state.reorder) {
                         break;
                     }
@@ -1863,6 +2279,7 @@ class ListComponent extends core$1.Component {
         });
         core$1.onBreak(ev => {
             const slot = ev.target.cut(ev.data.index);
+            slot.removeAttribute(headingAttr);
             if (ev.target.isEmpty && slot.isEmpty) {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1913,7 +2330,7 @@ class ListComponent extends core$1.Component {
                 key: 'Tab'
             },
             action: () => {
-                updateAfterList(this);
+                Promise.resolve().then(() => updateAfterList(this));
                 return false;
             }
         });
@@ -1933,15 +2350,27 @@ ListComponent.componentName = 'ListComponent';
 ListComponent.type = core$1.ContentType.BlockComponent;
 ListComponent.zenCoding = {
     key: ' ',
-    match: /^([1-9]\.|[+*])$/,
-    createState(content) {
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^([1-9]\.|[+*-])$/.test(content);
+        }
+        return false;
+    },
+    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
         };
     }
 };
@@ -1963,7 +2392,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -1990,7 +2418,8 @@ function ListComponentView(props) {
     return () => {
         const ListType = component.state.type === 'UnorderedList' ? 'ul' : 'ol';
         const ulIcons = ['•', '◦', '▪'];
-        let icon = '';
+        let icon;
+        let listStep = 0;
         const indent = component.state.slot.getAttribute(textIndentAttr) || 0;
         if (ListType === 'ul') {
             icon = ulIcons[indent % 3];
@@ -1998,7 +2427,6 @@ function ListComponentView(props) {
         else {
             const parentSlot = component.parent;
             const index = parentSlot.indexOf(component);
-            let listStep = 0;
             if (!component.state.reorder) {
                 const beforeContent = parentSlot.sliceContent(0, index);
                 while (beforeContent.length) {
@@ -2029,7 +2457,7 @@ function ListComponentView(props) {
                 icon = numberToLetter(listStep) + '.';
             }
         }
-        return (jsxRuntime.jsx(ListType, { ref: props.rootRef, "data-component": component.name, class: "xnote-list", style: {
+        return (jsxRuntime.jsx(ListType, { ref: props.rootRef, "data-component": component.name, "data-reorder": (listStep === 0) + '', class: "xnote-list", style: {
                 marginLeft: indent * 24 + 'px'
             }, children: jsxRuntime.jsxs("li", { style: {
                     justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
@@ -2037,16 +2465,12 @@ function ListComponentView(props) {
                 }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-list-content'
-                        }, children);
-                    }, readonly() || output())] }) }));
+                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
-    match(element) {
-        return element.tagName === 'UL' || element.tagName === 'OL';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && (element.tagName === 'UL' || element.tagName === 'OL');
     },
     read(element, textbus, slotParser) {
         const type = element.tagName === 'OL' ? 'OrderedList' : 'UnorderedList';
@@ -2057,7 +2481,7 @@ const listComponentLoader = {
             ]), element.querySelector('.xnote-list-content') || document.createElement('div'));
             return new ListComponent(textbus, {
                 slot,
-                reorder: true,
+                reorder: element.dataset.reorder !== 'false',
                 type
             });
         }
@@ -2100,119 +2524,58 @@ function useActiveBlock() {
         sourceCode: false,
         highlightBox: false
     });
-    function updateCheckStates() {
+    function updateCheckStates(range) {
         setCheckStates(draft => {
-            const heading = query.queryAttribute(headingAttr);
-            draft.paragraph = query.queryComponent(ParagraphComponent).state === core$1.QueryStateType.Enabled;
+            const heading = query.queryAttributeByRange(headingAttr, range);
+            draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === core$1.QueryStateType.Enabled;
             draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
             if (heading.state === core$1.QueryStateType.Enabled) {
                 draft[heading.value] = true;
                 draft.paragraph = false;
             }
-            const queryList = query.queryComponent(ListComponent);
+            const queryList = query.queryComponentByRange(ListComponent, range);
             draft.unorderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
             draft.orderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
-            draft.table = query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled;
-            draft.todolist = query.queryComponent(TodolistComponent).state === core$1.QueryStateType.Enabled;
-            draft.blockquote = query.queryComponent(BlockquoteComponent).state === core$1.QueryStateType.Enabled;
-            draft.sourceCode = query.queryComponent(SourceCodeComponent).state === core$1.QueryStateType.Enabled;
+            draft.table = query.queryComponentByRange(TableComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === core$1.QueryStateType.Enabled;
         });
     }
-    updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
-        updateCheckStates();
+        if (!selection.isSelected) {
+            return;
+        }
+        updateCheckStates({
+            startOffset: selection.startOffset,
+            startSlot: selection.startSlot,
+            endSlot: selection.endSlot,
+            endOffset: selection.endOffset
+        });
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
     return function (slot = null) {
         if (slot) {
-            const snapshot = selection.createSnapshot();
-            selection.setBaseAndExtent(slot, 0, slot, slot.length);
-            updateCheckStates();
-            snapshot.restore();
+            updateCheckStates({
+                startOffset: 0,
+                endOffset: slot.length,
+                startSlot: slot,
+                endSlot: slot
+            });
         }
-        return checkStates();
-    };
-}
-
-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())] }));
+        else if (selection.isSelected) {
+            updateCheckStates({
+                startOffset: selection.startOffset,
+                startSlot: selection.startSlot,
+                endSlot: selection.endSlot,
+                endOffset: selection.endOffset
+            });
         }
-        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())] }));
+        return checkStates();
     };
 }
-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,
-        ]), 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);
@@ -2280,62 +2643,10 @@ function useBlockTransform() {
                 break;
             case 'ol':
             case 'ul':
-                {
-                    commander.transform({
-                        targetType: ListComponent.type,
-                        slotFactory() {
-                            return new core$1.Slot([
-                                core$1.ContentType.InlineComponent,
-                                core$1.ContentType.Text
-                            ]);
-                        },
-                        stateFactory(slots) {
-                            return slots.map((slot, index) => {
-                                return new ListComponent(textbus, {
-                                    type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
-                                    reorder: index === 0,
-                                    slot
-                                });
-                            });
-                        }
-                    });
-                }
+                toList(textbus, value === 'ol' ? 'OrderedList' : 'UnorderedList');
                 break;
             case 'blockquote':
-                {
-                    const state = query.queryComponent(BlockquoteComponent);
-                    if (state.state === core$1.QueryStateType.Enabled) {
-                        const current = state.value;
-                        const parent = current.parent;
-                        const index = parent.indexOf(current);
-                        parent.retain(index);
-                        commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
-                            parent.insert(i);
-                        });
-                    }
-                    else {
-                        const block = new BlockquoteComponent(textbus);
-                        const slot = block.state.slot;
-                        if (selection.startSlot === selection.endSlot) {
-                            const parentComponent = selection.startSlot.parent;
-                            const parentSlot = parentComponent.parent;
-                            const position = parentSlot.indexOf(parentComponent);
-                            slot.insert(parentComponent);
-                            parentSlot.retain(position);
-                            parentSlot.insert(block);
-                        }
-                        else {
-                            const commonAncestorSlot = selection.commonAncestorSlot;
-                            const scope = selection.getCommonAncestorSlotScope();
-                            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
-                                slot.insert(i);
-                            });
-                            commonAncestorSlot.retain(scope.startOffset);
-                            commonAncestorSlot.insert(block);
-                        }
-                    }
-                }
+                toBlockquote(textbus);
                 break;
             case 'sourceCode':
                 {
@@ -2372,6 +2683,8 @@ function useBlockTransform() {
                                         lineNumber: true,
                                         autoBreak: true,
                                         slots: slots.map(slot => {
+                                            slot.cleanFormats();
+                                            slot.cleanAttributes();
                                             return {
                                                 slot,
                                                 emphasize: false
@@ -2392,7 +2705,7 @@ function useBlockTransform() {
                         const index = parent.indexOf(current);
                         parent.retain(index);
                         commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
+                        current.slots.at(0).sliceContent().forEach(i => {
                             parent.insert(i);
                         });
                     }
@@ -2426,7 +2739,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return scopedCss.withScopedCSS(scopedId$b, () => {
+    return scopedCss.withScopedCSS(scopedId$c, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -2441,7 +2754,7 @@ function BlockTool() {
             [states.todolist, 'xnote-icon-checkbox-checked'],
             [states.blockquote, 'xnote-icon-quotes-right'],
             [states.sourceCode, 'xnote-icon-source-code'],
-            [states.highlightBox, 'xnote-icon-paint-bucket'],
+            [states.highlightBox, 'xnote-icon-highlight-box'],
         ];
         let currentType = 'xnote-icon-pilcrow';
         for (const t of types) {
@@ -2450,27 +2763,48 @@ function BlockTool() {
                 break;
             }
         }
-        return (jsxRuntime.jsx(Dropdown, { onCheck: transform, trigger: 'hover', menu: [
+        return (jsxRuntime.jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), checked: states.paragraph, children: "\u6B63\u6587" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '0'
+                            } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '1'
+                            } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '2'
+                            } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '3'
+                            } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '4'
+                            } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '5'
+                            } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '6'
+                            } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
@@ -2479,19 +2813,19 @@ function BlockTool() {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
                     value: 'sourceCode'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paint-bucket" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
                     value: 'highlightBox'
                 }
             ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: currentType }) }) }));
@@ -2857,12 +3191,13 @@ function CodeTool() {
     };
 }
 
-var scopedId$a = "vf-1fbbdf";
+var scopedId$b = "vf-accb31";
 
 function ColorTool(props) {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const commander = core.inject(core$1.Commander);
+    const selection = core.inject(core$1.Selection);
     const textColor = core.createSignal('');
     const backgroundColor = core.createSignal('');
     const [viewModel] = hooks.useProduce({
@@ -2870,13 +3205,24 @@ function ColorTool(props) {
         disabled: false,
     });
     function updateCheckState() {
-        var _a, _b;
-        (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-        const textState = query.queryFormat(colorFormatter);
-        const backgroundState = query.queryFormat(backgroundColorFormatter);
+        if (!props.slot && !selection.isSelected) {
+            return;
+        }
+        const range = props.slot ? {
+            startSlot: props.slot,
+            endSlot: props.slot,
+            startOffset: 0,
+            endOffset: props.slot.length
+        } : {
+            startSlot: selection.startSlot,
+            startOffset: selection.startOffset,
+            endSlot: selection.endSlot,
+            endOffset: selection.endOffset
+        };
+        const textState = query.queryFormatByRange(colorFormatter, range);
+        const backgroundState = query.queryFormatByRange(backgroundColorFormatter, range);
         textColor.set(textState.state === core$1.QueryStateType.Enabled ? textState.value : '');
         backgroundColor.set(backgroundState.state === core$1.QueryStateType.Enabled ? backgroundState.value : '');
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         updateCheckState();
@@ -2886,6 +3232,7 @@ function ColorTool(props) {
         sub.unsubscribe();
     });
     const textColors = [
+        '#000',
         '#aaa',
         '#ff2e2e',
         '#ff8d45',
@@ -2895,6 +3242,7 @@ function ColorTool(props) {
         '#1296db',
         '#617fff',
         '#c459ff',
+        '#fff',
     ];
     const backgroundColors = [
         '#aaa',
@@ -2906,15 +3254,16 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return scopedCss.withScopedCSS(scopedId$a, () => {
+    return scopedCss.withScopedCSS(scopedId$b, () => {
         const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+        return (jsxRuntime.jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+                                    'no-background': true,
                                     active: textColor() === ''
                                 }, onClick: () => {
                                     var _a;
                                     (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
                                     commander.unApplyFormat(colorFormatter);
-                                }, children: "A" }), textColors.map(c => {
+                                } }), textColors.map(c => {
                                 return jsxRuntime.jsx("div", { class: {
                                         active: textColor() === c
                                     }, onClick: () => {
@@ -2974,6 +3323,9 @@ const isSupportFont = (function () {
 function FontFamilyTool() {
     const currentFontFamily = core.createSignal('');
     const fontFamilyOptions = [{
+            label: '默认',
+            value: ''
+        }, {
             label: '宋体',
             value: 'SimSun, STSong'
         }, {
@@ -3015,7 +3367,12 @@ function FontFamilyTool() {
         }];
     const commander = core.inject(core$1.Commander);
     function check(v) {
-        commander.applyFormat(fontFamilyFormatter, v);
+        if (v) {
+            commander.applyFormat(fontFamilyFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontFamilyFormatter);
+        }
     }
     const refreshService = core.inject(exports.RefreshService);
     const query = core.inject(core$1.Query);
@@ -3024,7 +3381,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();
@@ -3032,7 +3389,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,
@@ -3064,7 +3421,12 @@ function FontSizeTool() {
     ];
     const commander = core.inject(core$1.Commander);
     function check(v) {
-        commander.applyFormat(fontSizeFormatter, v);
+        if (v) {
+            commander.applyFormat(fontSizeFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontSizeFormatter);
+        }
     }
     const refreshService = core.inject(exports.RefreshService);
     const query = core.inject(core$1.Query);
@@ -3114,12 +3476,30 @@ function ItalicTool() {
     };
 }
 
-var scopedId$9 = "vf-269a0b";
+var scopedId$a = "vf-e74208";
+
+exports.EditorService = class EditorService {
+    constructor() {
+        this.hideInlineToolbar = false;
+        this.canShowLeftToolbar = true;
+        this.onLeftToolbarCanVisibleChange = new core$1.Subject();
+    }
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
+    }
+};
+exports.EditorService = __decorate([
+    core.Injectable({
+        provideIn: 'root'
+    })
+], exports.EditorService);
 
 function LinkTool(props) {
     const selectionBridge = core.inject(platformBrowser.SelectionBridge);
     const selection = core.inject(core$1.Selection);
     const commander = core.inject(core$1.Commander);
+    const editorService = core.inject(exports.EditorService);
     const container = core.inject(platformBrowser.VIEW_CONTAINER);
     const isShow = core.createSignal(false);
     const inputRef = core.createRef();
@@ -3140,22 +3520,24 @@ function LinkTool(props) {
             isClickFromSelf = false;
             return;
         }
+        editorService.hideInlineToolbar = false;
         isShow.set(false);
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$9, () => {
+    return scopedCss.withScopedCSS(scopedId$a, () => {
         const containerRect = container.getBoundingClientRect();
         const rect = isShow() ? selectionBridge.getRect({
             slot: selection.focusSlot,
             offset: selection.focusOffset
         }) : {};
         return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { onClick: () => {
+                        var _a;
                         isShow.set(true);
                         isClickFromSelf = true;
-                        setTimeout(() => { var _a; return (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props); }, 10);
-                    }, arrow: true, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
+                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
                     jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
                             }, class: "input-group", children: [jsxRuntime.jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
@@ -3214,7 +3596,7 @@ function UnderlineTool() {
     };
 }
 
-var scopedId$8 = "vf-cf8e1c";
+var scopedId$9 = "vf-cf8e1c";
 
 class FileUploader {
 }
@@ -3223,6 +3605,9 @@ class ImageComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ImageComponent(textbus, Object.assign({}, json));
     }
+    getSlots() {
+        return [];
+    }
 }
 ImageComponent.type = core$1.ContentType.InlineComponent;
 ImageComponent.componentName = 'ImageComponent';
@@ -3249,9 +3634,11 @@ const imageComponentLoader = {
         return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
     },
     read(element, textbus) {
-        var _a;
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
         return new ImageComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
         });
     }
 };
@@ -3260,8 +3647,8 @@ class VideoComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new VideoComponent(textbus, Object.assign({}, json));
     }
-    setup() {
-        //
+    getSlots() {
+        return [];
     }
 }
 VideoComponent.type = core$1.ContentType.InlineComponent;
@@ -3273,7 +3660,7 @@ function VideoView(props) {
     const output = useOutput();
     return () => {
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-video", "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+            return (jsxRuntime.jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
                         width: state.width,
                         height: state.height
                     } }) }));
@@ -3286,12 +3673,169 @@ function VideoView(props) {
 }
 const videoComponentLoader = {
     match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
+        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
     },
     read(element, textbus) {
-        var _a;
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
         return new VideoComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
+    }
+};
+
+class KatexEditor extends core$1.Textbus {
+    constructor() {
+        const adapter = new adapterViewfly.ViewflyAdapter({
+            [SourceCodeComponent.componentName]: SourceCodeView
+        }, (host, root, injector) => {
+            const appInjector = new core.ReflectiveInjector(injector, [{
+                    provide: OutputInjectionToken,
+                    useValue: true
+                }]);
+            const app = platformBrowser$1.createApp(root, {
+                context: appInjector
+            }).mount(host);
+            return () => {
+                app.destroy();
+            };
+        });
+        const browserModule = new platformBrowser.BrowserModule({
+            adapter,
+            renderTo: () => {
+                return this.host;
+            }
+        });
+        super({
+            components: [
+                SourceCodeComponent
+            ],
+            imports: [browserModule]
+        });
+        this.onValueChange = new core$1.Subject();
+    }
+    mount(host, code) {
+        this.host = host;
+        const model = new SourceCodeComponent(this, {
+            lineNumber: true,
+            autoBreak: true,
+            lang: 'latex',
+            theme: 'github',
+            slots: code.split('\n').map(i => {
+                const slot = new core$1.Slot([core$1.ContentType.Text]);
+                slot.insert(i);
+                return {
+                    slot,
+                    emphasize: false
+                };
+            })
+        });
+        this.onChange.subscribe(() => {
+            const str = model.state.slots.map(i => {
+                if (i.slot.isEmpty) {
+                    return '';
+                }
+                return i.slot.toString();
+            }).join('\n');
+            this.onValueChange.next(str);
+        });
+        return this.render(model);
+    }
+}
+
+class KatexComponent extends core$1.Component {
+    static fromJSON(textbus, state) {
+        return new KatexComponent(textbus, state);
+    }
+    constructor(textbus, state = {
+        text: '% \\f is defined as #1f(#2) using the macro\n' +
+            '\\f\\relax{x} = \\int_{-\\infty}^\\infty\n' +
+            '\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n' +
+            '\\,d\\xi'
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [];
+    }
+}
+KatexComponent.componentName = 'KatexComponent';
+KatexComponent.type = core$1.ContentType.InlineComponent;
+function domToVDom(el) {
+    const attrs = {};
+    el.getAttributeNames().forEach(key => {
+        attrs[key] = el.getAttribute(key);
+    });
+    attrs.children = Array.from(el.childNodes).map(child => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            return domToVDom(child);
+        }
+        return child.textContent || '';
+    });
+    return core.jsx(el.tagName.toLowerCase(), attrs);
+}
+function KatexComponentView(props) {
+    function toDOM(value) {
+        let htmlString;
+        try {
+            htmlString = Katex.renderToString(value, {
+                displayMode: true,
+                leqno: false,
+                fleqn: false,
+                throwOnError: true,
+                errorColor: '#cc0000',
+                strict: 'warn',
+                output: 'html',
+                trust: false,
+                macros: { '\\f': '#1f(#2)' }
+            });
+        }
+        catch (e) {
+            htmlString = '<span style="color: red">公式错误</span>';
+        }
+        return new DOMParser().parseFromString(htmlString, 'text/html').body.children[0];
+    }
+    const selection = core.inject(core$1.Textbus);
+    const editorRef = core.createDynamicRef(node => {
+        const editor = new KatexEditor();
+        editor.mount(node, props.component.state.text).then(() => {
+            editor.focus();
+        });
+        selection.blur();
+        const subscription = editor.onValueChange.subscribe((value) => {
+            props.component.state.text = value;
+        }).add(core$1.fromEvent(node, 'mousedown').subscribe(ev => ev.stopPropagation()), core$1.fromEvent(document, 'mousedown').subscribe(() => {
+            var _a;
+            (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        }));
+        return () => {
+            subscription.unsubscribe();
+            editor.destroy();
+        };
+    });
+    const dropdownRef = core.createRef();
+    const output = useOutput();
+    const readonly = useReadonly();
+    return () => {
+        const text = props.component.state.text;
+        return (jsxRuntime.jsx("span", { onClick: () => {
+                var _a;
+                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(true);
+            }, ref: props.rootRef, "data-component": KatexComponent.componentName, "data-katex": encodeURIComponent(text), class: "xnote-katex", children: (output() || readonly()) ?
+                domToVDom(toDOM(text))
+                :
+                    jsxRuntime.jsx(Dropdown, { padding: '0', ref: dropdownRef, trigger: 'none', width: '600px', menu: jsxRuntime.jsx("div", { class: "xnote-katex-input", ref: editorRef }), children: domToVDom(toDOM(text)) }) }));
+    };
+}
+const katexComponentLoader = {
+    match(element) {
+        return element.dataset.component === KatexComponent.componentName;
+    },
+    read(element, textbus) {
+        const value = element.dataset.katex || '';
+        return new KatexComponent(textbus, {
+            text: decodeURIComponent(value)
         });
     }
 };
@@ -3300,7 +3844,8 @@ function InsertTool(props) {
     const commander = core.inject(core$1.Commander);
     const selection = core.inject(core$1.Selection);
     const textbus = core.inject(core$1.Textbus);
-    const fileUploader = core.inject(FileUploader, core.InjectFlags.Optional, null);
+    const fileUploader = core.inject(FileUploader, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService);
     function insert(type) {
         var _a;
         const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
@@ -3314,6 +3859,8 @@ function InsertTool(props) {
             else {
                 commander.insertAfter(comp, component);
             }
+            dropdownContextService.canHide = true;
+            dropdownContextService.hide(false);
         }
         switch (type) {
             case 'h1':
@@ -3375,7 +3922,9 @@ function InsertTool(props) {
                 {
                     const table = new TableComponent(textbus);
                     insertComponent(table);
-                    selection.setPosition(table.state.rows[0].cells[0].slot, 0);
+                    textbus.nextTick(() => {
+                        selection.selectFirstPosition(table, true, true);
+                    });
                 }
                 break;
             case 'todolist':
@@ -3394,7 +3943,7 @@ function InsertTool(props) {
                 break;
             case 'image':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('image')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
                         const img = new ImageComponent(textbus, {
                             src: url
                         });
@@ -3404,7 +3953,7 @@ function InsertTool(props) {
                 break;
             case 'video':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('video')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
                         const img = new VideoComponent(textbus, {
                             src: url
                         });
@@ -3421,14 +3970,23 @@ function InsertTool(props) {
                     selection.setPosition(p.state.slot, 0);
                 }
                 break;
+            case 'katex':
+                {
+                    const p = new ParagraphComponent(textbus);
+                    const comp = new KatexComponent(textbus);
+                    p.state.slot.insert(comp);
+                    insertComponent(p);
+                    selection.selectComponent(comp);
+                }
+                break;
         }
     }
-    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 scopedCss.withScopedCSS(scopedId$9, () => {
+        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-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" })] });
     });
 }
 
-var scopedId$7 = "vf-b05292";
+var scopedId$8 = "vf-b05292";
 
 const LeftToolbar = core.withAnnotation({
     providers: [exports.RefreshService]
@@ -3438,6 +3996,7 @@ const LeftToolbar = core.withAnnotation({
     const selection = core.inject(core$1.Selection);
     const rootComponentRef = core.inject(core$1.RootComponentRef);
     const refreshService = core.inject(exports.RefreshService);
+    const editorService = core.inject(exports.EditorService);
     const checkStates = useActiveBlock();
     const toBlock = useBlockTransform();
     const activeSlot = core.createSignal(null);
@@ -3456,6 +4015,14 @@ const LeftToolbar = core.withAnnotation({
         top: 0,
         display: false
     });
+    const sub = editorService.onLeftToolbarCanVisibleChange.subscribe(() => {
+        updatePosition(d => {
+            d.display = editorService.canShowLeftToolbar;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
     let isIgnoreMove = false;
     core.onMounted(() => {
         const rootComponent = rootComponentRef.component;
@@ -3463,12 +4030,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;
                 }
@@ -3483,7 +4052,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();
@@ -3535,19 +4106,7 @@ const LeftToolbar = core.withAnnotation({
             bindLeave();
             isShow.set(true);
         }));
-    });
-    let snapshot = null;
-    function queryBefore() {
-        const slot = activeSlot();
-        if (slot) {
-            snapshot = selection.createSnapshot();
-            selection.selectSlot(slot);
-        }
-    }
-    function queryAfter() {
-        snapshot === null || snapshot === void 0 ? void 0 : snapshot.restore();
-        snapshot = null;
-    }
+    });
     function applyBefore() {
         const slot = activeSlot();
         if (slot) {
@@ -3579,7 +4138,7 @@ const LeftToolbar = core.withAnnotation({
         if (!slot) {
             return;
         }
-        if (slot.parent.__slots__.length <= 1) {
+        if (slot.parent.slots.length <= 1) {
             commander.removeComponent(slot.parent);
         }
         else {
@@ -3591,20 +4150,21 @@ const LeftToolbar = core.withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return scopedCss.withScopedCSS(scopedId$7, () => {
+    return scopedCss.withScopedCSS(scopedId$8, () => {
+        var _a;
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
-        const states = checkStates();
+        const states = checkStates(slot);
         if (slot) {
             const types = [
                 [states.paragraph, jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" })],
                 [states.sourceCode, jsxRuntime.jsx("span", { class: "xnote-icon-source-code" })],
                 [states.blockquote, jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" })],
                 [states.todolist, jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" })],
-                [states.table, jsxRuntime.jsx("span", { class: "xnote-icon-table" })],
                 [states.unorderedList, jsxRuntime.jsx("span", { class: "xnote-icon-list" })],
                 [states.orderedList, jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" })],
+                [states.table, jsxRuntime.jsx("span", { class: "xnote-icon-table" })],
                 [states.h1, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" })],
                 [states.h2, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" })],
                 [states.h3, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" })],
@@ -3619,18 +4179,20 @@ 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',
-                    display: position.display && selection.isCollapsed ? 'block' : 'none'
-                }, children: jsxRuntime.jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
+                    display: position.display && selection.isCollapsed && editorService.canShowLeftToolbar ? 'block' : 'none'
+                }, children: jsxRuntime.jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         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, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, 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, queryBefore: queryBefore, queryAfter: queryAfter, 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" })] }) }) }) }) }));
@@ -3665,24 +4227,74 @@ class LeftToolbarPlugin {
     }
 }
 
-var scopedId$6 = "vf-fee98b";
+var scopedId$7 = "vf-3073ba";
 
-exports.EditorService = class EditorService {
-    constructor() {
-        this.hideInlineToolbar = false;
+function LinkJump() {
+    const selection = core.inject(core$1.Selection);
+    const query = core.inject(core$1.Query);
+    const bridge = core.inject(platformBrowser.SelectionBridge);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const href = core.createSignal('');
+    const ref = core.createRef();
+    const isShow = core.createSignal(false);
+    function onSelectionChange() {
+        if (selection.isCollapsed) {
+            const queryState = query.queryFormat(linkFormatter);
+            if (queryState.state === core$1.QueryStateType.Enabled) {
+                const rect = bridge.getRect({
+                    slot: selection.startSlot,
+                    offset: selection.startOffset
+                });
+                if (rect) {
+                    const offsetRect = container.getBoundingClientRect();
+                    Object.assign(ref.current.style, {
+                        left: rect.left - offsetRect.left + 'px',
+                        top: rect.top - offsetRect.top + 'px'
+                    });
+                    isShow.set(true);
+                    let url = queryState.value.href;
+                    if (url.indexOf('://') < 0) {
+                        url = 'http://' + url;
+                    }
+                    href.set(url);
+                    return;
+                }
+            }
+        }
+        isShow.set(false);
     }
-};
-exports.EditorService = __decorate([
-    core.Injectable({
-        provideIn: 'root'
-    })
-], exports.EditorService);
+    selection.onChange.pipe(core$1.delay()).subscribe(() => {
+        onSelectionChange();
+    });
+    function cleanLink() {
+        isShow.set(false);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const index = selection.focusOffset;
+        const ranges = commonAncestorSlot.getFormatRangesByFormatter(linkFormatter, 0, commonAncestorSlot.length);
+        ranges.forEach(range => {
+            if (range.startIndex < index && range.endIndex >= index) {
+                commonAncestorSlot.applyFormat(linkFormatter, {
+                    startIndex: range.startIndex,
+                    endIndex: range.endIndex,
+                    value: null
+                });
+            }
+        });
+    }
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$7, () => {
+        return (jsxRuntime.jsxs("div", { ref: ref, class: "link-jump-plugin", style: { display: isShow() ? '' : 'none' }, children: [jsxRuntime.jsx("span", { onClick: cleanLink, children: "\u6E05\u9664" }), jsxRuntime.jsx("a", { target: "_blank", href: href(), children: "\u8DF3\u8F6C" })] }));
+    }), container);
+}
+
+var scopedId$6 = "vf-fee98b";
 
 const Toolbar = core.withAnnotation({
     providers: [exports.RefreshService]
 }, function Toolbar() {
     const selection = core.inject(core$1.Selection);
     const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
+    const rootComponentRef = core.inject(core$1.RootComponentRef);
+    const adapter = core.inject(platformBrowser.DomAdapter);
     const bridge = core.inject(platformBrowser.SelectionBridge);
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
@@ -3704,7 +4316,7 @@ const Toolbar = core.withAnnotation({
     const toolbarRef = core.createRef();
     function getTop() {
         const docRect = viewDocument.getBoundingClientRect();
-        const toolbarRect = toolbarRef.current.getBoundingClientRect();
+        const toolbarHeight = 36;
         // const documentHeight = document.documentElement.clientHeight
         const selectionFocusRect = bridge.getRect({
             slot: selection.focusSlot,
@@ -3713,14 +4325,12 @@ const Toolbar = core.withAnnotation({
         if (!selectionFocusRect) {
             return null;
         }
-        // console.log(selectionFocusRect.top, toolbarRect.height)
         const centerLeft = selectionFocusRect.left;
-        const toBottom = selectionFocusRect.top < toolbarRect.height + 10;
+        const toBottom = selectionFocusRect.top < toolbarHeight + 10;
         const top = toBottom ?
             selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
-            selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
+            selectionFocusRect.top - docRect.top - toolbarHeight - 10;
         updateViewPosition(draft => {
-            draft.isHide = false;
             draft.transitionDuration = .15;
             draft.left = centerLeft - docRect.left;
             draft.top = top + 10;
@@ -3741,13 +4351,15 @@ const Toolbar = core.withAnnotation({
         sub.unsubscribe();
     });
     function bindMouseup() {
-        mouseupSubscription = core$1.fromEvent(viewDocument, 'mouseup').pipe(core$1.filter(ev => {
+        const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
+        mouseupSubscription = core$1.fromEvent(docElement, 'mouseup').pipe(core$1.filter(ev => {
             return !ev.composedPath().includes(toolbarRef.current);
         }), core$1.delay(100), core$1.filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
         }), core$1.map(getTop), core$1.delay(200)).subscribe((top) => {
             if (top !== null) {
                 updateViewPosition(draft => {
+                    draft.isHide = false;
                     draft.opacity = 1;
                     draft.top = top;
                 });
@@ -3766,10 +4378,10 @@ const Toolbar = core.withAnnotation({
         });
         bindMouseup();
     });
+    const instance = core.getCurrentInstance();
     function hideToolbar() {
-        updateViewPosition(draft => {
-            draft.isHide = true;
-        });
+        editorService.hideInlineToolbar = true;
+        instance.markAsDirtied();
     }
     core.onUnmounted(() => {
         mousedownSubscription.unsubscribe();
@@ -3910,6 +4522,222 @@ 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(textbus, {
+                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);
+    }
+    getSlots() {
+        if (this.state.slot) {
+            return [this.state.slot];
+        }
+        return [];
+    }
+    setup() {
+        let isFocus = false;
+        core$1.onFocus(() => {
+            isFocus = true;
+            this.focus.next(true);
+            onChange.next();
+        });
+        core$1.onBlur(() => {
+            isFocus = false;
+            this.focus.next(false);
+            setTimeout(() => {
+                if (this.parent && !this.state.userInfo) {
+                    const slot = this.state.slot;
+                    let text = '@';
+                    if (slot) {
+                        text += slot.isEmpty ? '' : slot.toString();
+                    }
+                    const snapshot = selection.createSnapshot();
+                    selection.selectComponent(this);
+                    commander.insert(text);
+                    snapshot.restore(true);
+                }
+            });
+        });
+        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 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) {
+                const itemRect = focusItem.getBoundingClientRect();
+                const dropdownMenu = container.parentNode.parentNode;
+                const containerRect = dropdownMenu.getBoundingClientRect();
+                if (itemRect.top - 5 < containerRect.top) {
+                    dropdownMenu.scrollTop += itemRect.top - 5 - containerRect.top;
+                }
+                else if (itemRect.bottom + 5 > containerRect.bottom) {
+                    dropdownMenu.scrollTop += itemRect.bottom + 5 - containerRect.bottom;
+                }
+            }
+        }
+    });
+    return () => {
+        const { slot, userInfo } = props.component.state;
+        const selectedIndex = props.component.selectedIndex();
+        if (userInfo) {
+            return (jsxRuntime.jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), userInfo.name] }));
+        }
+        if (readonly() || output()) {
+            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
+        }
+        const members = props.component.members();
+        return (jsxRuntime.jsx("div", { 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 && jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
+    };
+}
+const atComponentLoader = {
+    match(element) {
+        return element.dataset.component === AtComponent.componentName;
+    },
+    read(element, textbus, slotParser) {
+        const data = element.dataset.info;
+        if (data) {
+            return new AtComponent(textbus, {
+                userInfo: JSON.parse(decodeURIComponent(data))
+            });
+        }
+        const slot = slotParser(new core$1.Slot([core$1.ContentType.Text]), element.querySelector('.xnote-at-input') || document.createElement('div'));
+        return new AtComponent(textbus, {
+            slot
+        });
+    }
+};
+
 class RootComponent extends core$1.Component {
     constructor() {
         super(...arguments);
@@ -3921,17 +4749,36 @@ class RootComponent extends core$1.Component {
             content
         });
     }
+    getSlots() {
+        return [this.state.content];
+    }
     setup() {
-        useBlockContent(this.state.content);
+        useBlockContent((slot) => slot === this.state.content);
         core$1.onCompositionStart(ev => {
             this.onCompositionStart.next(ev);
         });
+        core$1.onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
+        core$1.onSlotApplyFormat(ev => {
+            ev.preventDefault();
+        });
+    }
+    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;
 function RootView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const { content } = props.component.state;
     const ref = core.createDynamicRef(node => {
         const sub = props.component.onCompositionStart.subscribe(() => {
@@ -3941,16 +4788,14 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
+    core.onUpdated(() => {
+        props.component.afterCheck();
+    });
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsxRuntime.jsx("div", { class: "xnote-root", ref: [rootRef, ref], children: adapter.slotRender(content, children => {
-                return (core$1.createVNode('div', {
-                    class: 'xnote-content',
-                    'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                }, children));
-            }, readonly() || output()) }));
+        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -3964,9 +4809,7 @@ const rootComponentLoader = {
             core$1.ContentType.Text
         ]), element).toDelta();
         const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
+            core$1.ContentType.BlockComponent
         ]);
         deltaToBlock(delta, textbus).forEach(i => {
             slot.insert(i);
@@ -3993,6 +4836,7 @@ TableService = __decorate([
 function ResizeColumn(props) {
     const dragLineRef = core.createRef();
     let activeCol = null;
+    const editorService = core.inject(exports.EditorService);
     core.onMounted(() => {
         const { tableRef } = props;
         let isDrag = false;
@@ -4025,6 +4869,7 @@ function ResizeColumn(props) {
             }
         })).add(core$1.fromEvent(dragLineRef.current, 'mousedown').subscribe(downEvent => {
             isDrag = true;
+            editorService.changeLeftToolbarVisible(false);
             props.onActiveStateChange(true);
             const x = downEvent.clientX;
             const layoutWidth = props.component.state.layoutWidth;
@@ -4032,16 +4877,20 @@ function ResizeColumn(props) {
             const initLeft = layoutWidth.slice(0, activeCol).reduce((a, b) => a + b, 0);
             const minWidth = 30;
             const minLeft = initLeft - initWidth + minWidth;
+            const layoutWidthArr = layoutWidth.slice();
             const moveEvent = core$1.fromEvent(document, 'mousemove').subscribe(moveEvent => {
                 const distanceX = moveEvent.clientX - x;
                 dragLineRef.current.style.left = Math.max(initLeft + distanceX, minLeft) + 'px';
-                props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                layoutWidthArr[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                props.layoutWidth.set(layoutWidthArr.slice());
             }).add(core$1.fromEvent(document, 'mouseup').subscribe(upEvent => {
                 isDrag = false;
+                editorService.changeLeftToolbarVisible(true);
                 props.onActiveStateChange(false);
                 moveEvent.unsubscribe();
                 const distanceX = upEvent.clientX - x;
                 props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                props.layoutWidth.set(props.component.state.layoutWidth);
             }));
         }));
         return () => {
@@ -4067,7 +4916,7 @@ function ResizeColumn(props) {
     });
 }
 
-var scopedId$4 = "vf-d64cf9";
+var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4142,7 +4991,7 @@ function TopBar(props) {
                     active: props.isFocus()
                 }], children: jsxRuntime.jsxs("div", { class: "toolbar-wrapper", children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return (jsxRuntime.jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxRuntime.jsxs("div", { class: "tool-container", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
                                                             tableService.onInsertColumnBefore.next(0);
                                                         }, onMouseleave: () => {
@@ -4168,7 +5017,7 @@ function TopBar(props) {
                                                                 }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
                                     }) }) }) }) }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return jsxRuntime.jsx("td", { onClick: ev => {
                                                 mouseDownFromToolbar = true;
                                                 if (!ev.shiftKey) {
@@ -4188,7 +5037,7 @@ function TopBar(props) {
     });
 }
 
-var scopedId$3 = "vf-b1149b";
+var scopedId$3 = "vf-7bef30";
 
 function Scroll(props) {
     const scrollRef = core.createRef();
@@ -4202,37 +5051,41 @@ function Scroll(props) {
         const el = scrollRef.current;
         function update() {
             if (props.isFocus()) {
-                input.caret.refresh(false);
+                input.caret.refresh();
             }
             updateShowShadow(draft => {
                 draft.leftEnd = el.scrollLeft === 0;
                 draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
             });
         }
-        update();
+        setTimeout(update);
         const s = core$1.fromEvent(el, 'scroll').subscribe(update);
         return () => s.unsubscribe();
     });
     core.onUpdated(() => {
         const el = scrollRef.current;
-        updateShowShadow(draft => {
-            draft.leftEnd = el.scrollLeft === 0;
-            draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
+        setTimeout(() => {
+            updateShowShadow(draft => {
+                draft.leftEnd = el.scrollLeft === 0;
+                draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
+            });
         });
     });
     return scopedCss.withScopedCSS(scopedId$3, () => {
-        return jsxRuntime.jsx("div", { ref: [scrollRef, props.scrollRef], class: ['scroll-container', {
+        return jsxRuntime.jsx("div", { ref: [scrollRef], class: ['scroll-container', {
                     'left-end': showShadow().leftEnd,
                     'right-end': showShadow().rightEnd,
                     'active': props.isFocus(),
                     // 'hide-selection': isSelectColumn()
                 }], onScroll: ev => {
-                tableService.onScroll.next(ev.target.scrollLeft);
+                setTimeout(() => {
+                    tableService.onScroll.next(ev.target.scrollLeft);
+                }, 30);
             }, children: props.children });
     });
 }
 
-var scopedId$2 = "vf-ef93c0";
+var scopedId$2 = "vf-aaece0";
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4432,9 +5285,9 @@ function SelectionMask(props) {
             updateStyles(draft => {
                 draft.visible = true;
                 draft.left = sum(state.layoutWidth.slice(0, selection.startColumn));
-                draft.top = sum(trs.slice(0, selection.startRow).map(i => i.offsetHeight)) + topCompensation;
+                draft.top = trs[selection.startRow].offsetTop + topCompensation;
                 draft.width = sum(state.layoutWidth.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
-                draft.height = sum(trs.slice(selection.startRow, selection.endRow).map(i => i.offsetHeight)) + heightCompensation + 'px';
+                draft.height = trs[selection.endRow - 1].offsetTop + trs[selection.endRow - 1].offsetHeight + heightCompensation - draft.top + 'px';
             });
         }
         else {
@@ -4463,81 +5316,25 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = core.withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
+    const editorService = core.inject(exports.EditorService);
     const isFocus = core.createSignal(false);
+    const layoutWidth = core.createSignal(props.component.state.layoutWidth);
     const subscription = props.component.focus.subscribe(b => {
         isFocus.set(b);
+        if (!b) {
+            editorService.hideInlineToolbar = false;
+        }
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
     const tableRef = core.createRef();
-    const scrollRef = core.createRef();
     const isResizeColumn = core.createSignal(false);
-    const selection = core.inject(core$1.Selection);
-    const findPosition = (slot) => {
-        let cell = slot;
-        while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== props.component) {
-            cell = cell.parentSlot;
-        }
-        if (cell) {
-            const rows = props.component.state.rows;
-            for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-                const row = rows[rowIndex].cells;
-                for (let colIndex = 0; colIndex < row.length; colIndex++) {
-                    const item = row[colIndex].slot;
-                    if (item === cell) {
-                        return {
-                            rowIndex,
-                            colIndex
-                        };
-                    }
-                }
-            }
-        }
-        return null;
-    };
-    core.onMounted(() => {
-        const sub = selection.onChange.subscribe(() => {
-            var _a;
-            if (selection.commonAncestorComponent !== props.component || selection.isCollapsed) {
-                props.component.tableSelection.set(null);
-                return;
-            }
-            const startPosition = findPosition(selection.startSlot);
-            const endPosition = findPosition(selection.endSlot);
-            if (startPosition && endPosition) {
-                if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
-                    if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
-                        props.component.tableSelection.set({
-                            startColumn: startPosition.colIndex,
-                            startRow: startPosition.rowIndex,
-                            endColumn: endPosition.colIndex + 1,
-                            endRow: endPosition.rowIndex + 1
-                        });
-                        return;
-                    }
-                    props.component.tableSelection.set(null);
-                    return;
-                }
-                const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
-                const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
-                props.component.tableSelection.set({
-                    startColumn,
-                    startRow,
-                    endColumn: endColumn + 1,
-                    endRow: endRow + 1
-                });
-            }
-            else {
-                props.component.tableSelection.set(null);
-            }
-        });
-        return () => sub.unsubscribe();
-    });
     const rowMapping = new WeakMap();
     const readonly = useReadonly();
     const output = useOutput();
@@ -4550,45 +5347,42 @@ const TableComponentView = core.withAnnotation({
             }
             rowMapping.set(row, Math.random());
         });
-        Promise.resolve().then(() => {
-            props.component.afterContentCheck();
-        });
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
-                            'xnote-table-content',
-                            {
-                                'hide-selection': props.component.tableSelection()
-                            }
-                        ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                    return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-                                    return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                            return adapter.slotRender(cell.slot, children => {
-                                                return core$1.createVNode('td', {
-                                                    key: cell.slot.id
-                                                }, children);
-                                            }, readonly() || output());
-                                        }) }, rowMapping.get(row)));
-                                }) })] }) }) }));
-        }
-        return (jsxRuntime.jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, component: props.component, scrollRef: scrollRef }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
-                                    'xnote-table-content',
-                                    {
-                                        'hide-selection': props.component.tableSelection()
-                                    }
-                                ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                            return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                        }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-                                            return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                                    return adapter.slotRender(cell.slot, children => {
-                                                        return core$1.createVNode('td', {
-                                                            key: cell.slot.id
-                                                        }, children);
-                                                    }, readonly() || output());
-                                                }) }, rowMapping.get(row)));
-                                        }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
-                                    isResizeColumn.set(isActive);
-                                } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }));
+            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
+                                'xnote-table-content',
+                                {
+                                    'hide-selection': props.component.tableSelection()
+                                }
+                            ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
+                                        return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                    }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+                                        return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
+                                                return adapter.slotRender(cell.slot, children => {
+                                                    return core$1.createVNode('td', {
+                                                        key: cell.slot.id
+                                                    }, children);
+                                                }, readonly() || output());
+                                            }) }, rowMapping.get(row)));
+                                    }) })] }) }) }) }));
+        }
+        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
+                                        'xnote-table-content',
+                                        {
+                                            'hide-selection': props.component.tableSelection()
+                                        }
+                                    ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
+                                                return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                            }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+                                                return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
+                                                        return adapter.slotRender(cell.slot, children => {
+                                                            return core$1.createVNode('td', {
+                                                                key: cell.slot.id
+                                                            }, children);
+                                                        }, readonly() || output());
+                                                    }) }, rowMapping.get(row)));
+                                            }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
+                                        isResizeColumn.set(isActive);
+                                    } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }) }));
     };
 });
 const tableComponentLoader = {
@@ -4596,10 +5390,11 @@ const tableComponentLoader = {
         return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
     },
     read(element, textbus, slotParser) {
+        let content = element;
         if (element.tagName === 'DIV') {
-            element = element.querySelector('.xnote-table-content');
+            content = element.querySelector('.xnote-table-content');
         }
-        const { tHead, tBodies, tFoot } = element;
+        const { tHead, tBodies, tFoot } = content;
         const headers = [];
         const bodies = [];
         if (tHead) {
@@ -4617,6 +5412,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new core$1.Slot([
                         core$1.ContentType.BlockComponent,
+                        core$1.ContentType.InlineComponent,
+                        core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4642,6 +5439,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new core$1.Slot([
                         core$1.ContentType.BlockComponent,
+                        core$1.ContentType.InlineComponent,
+                        core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4737,6 +5536,88 @@ function autoComplete(table) {
     });
 }
 
+function findFocusCell(table, slot) {
+    var _a;
+    while (slot) {
+        if (table.slots.includes(slot)) {
+            return slot;
+        }
+        slot = (_a = slot.parent) === null || _a === void 0 ? void 0 : _a.parent;
+    }
+    return null;
+}
+let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate extends platformBrowser.CollaborateSelectionAwarenessDelegate {
+    constructor(domAdapter, selection) {
+        super();
+        this.domAdapter = domAdapter;
+        this.selection = selection;
+    }
+    getRects(abstractSelection) {
+        const { focusSlot, anchorSlot } = abstractSelection;
+        const focusPaths = this.selection.getPathsBySlot(focusSlot);
+        const anchorPaths = this.selection.getPathsBySlot(anchorSlot);
+        const focusIsStart = core$1.Selection.compareSelectionPaths(focusPaths, anchorPaths);
+        let startSlot;
+        let endSlot;
+        if (focusIsStart) {
+            startSlot = focusSlot;
+            endSlot = anchorSlot;
+        }
+        else {
+            startSlot = anchorSlot;
+            endSlot = focusSlot;
+        }
+        const commonAncestorComponent = core$1.Selection.getCommonAncestorComponent(startSlot, endSlot);
+        if (!(commonAncestorComponent instanceof TableComponent)) {
+            return false;
+        }
+        const range = getSelectedRanges(commonAncestorComponent, findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
+        const rows = commonAncestorComponent.state.rows;
+        const startFocusSlot = rows[range.startRow].cells[range.startColumn].slot;
+        const endFocusSlot = rows[range.endRow].cells[range.endColumn].slot;
+        const renderer = this.domAdapter;
+        const startRect = renderer.getNativeNodeBySlot(startFocusSlot).getBoundingClientRect();
+        const endRect = renderer.getNativeNodeBySlot(endFocusSlot).getBoundingClientRect();
+        return [{
+                left: startRect.left,
+                top: startRect.top,
+                width: endRect.left + endRect.width - startRect.left,
+                height: endRect.top + endRect.height - startRect.top
+            }];
+    }
+};
+TableSelectionAwarenessDelegate = __decorate([
+    core.Injectable(),
+    __metadata("design:paramtypes", [platformBrowser.DomAdapter,
+        core$1.Selection])
+], TableSelectionAwarenessDelegate);
+function getSelectedRanges(component, startSlot, endSlot) {
+    const p1 = finedPosition(component, startSlot);
+    const p2 = finedPosition(component, endSlot);
+    return {
+        startRow: Math.min(p1.rowIndex, p2.rowIndex),
+        endRow: Math.max(p1.rowIndex, p2.rowIndex),
+        startColumn: Math.min(p1.columnIndex, p2.columnIndex),
+        endColumn: Math.max(p1.columnIndex, p2.columnIndex)
+    };
+}
+function finedPosition(component, slot) {
+    const rows = component.state.rows;
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        for (let j = 0; j < row.cells.length; j++) {
+            const cell = row.cells[j].slot;
+            if (cell === slot) {
+                return {
+                    rowIndex: i,
+                    columnIndex: j
+                };
+            }
+        }
+    }
+    return null;
+}
+
 class Editor extends core$1.Textbus {
     constructor(editorConfig = {}) {
         const adapter = new adapterViewfly.ViewflyAdapter({
@@ -4749,13 +5630,15 @@ class Editor extends core$1.Textbus {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView,
+            [KatexComponent.componentName]: KatexComponentView,
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
                     useValue: false
                 }]);
-            const app = platformBrowser$1.createApp(root, {
+            const app = platformBrowser$1.createApp(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [root, jsxRuntime.jsx(LinkJump, {})] }), {
                 context: appInjector
             }).mount(host);
             return () => {
@@ -4764,16 +5647,18 @@ class Editor extends core$1.Textbus {
         });
         const browserModule = new platformBrowser.BrowserModule(Object.assign({ renderTo: () => {
                 return this.host;
-            }, adapter, componentLoaders: [
+            }, useContentEditable: platformBrowser.isMobileBrowser(), adapter, componentLoaders: [
+                atComponentLoader,
                 sourceCodeComponentLoader,
+                listComponentLoader,
                 tableComponentLoader,
                 imageComponentLoader,
-                videoComponentLoader,
                 highlightBoxComponentLoader,
                 blockquoteComponentLoader,
-                paragraphComponentLoader,
+                videoComponentLoader,
                 todolistComponentLoader,
-                listComponentLoader,
+                katexComponentLoader,
+                paragraphComponentLoader,
             ], formatLoaders: [
                 backgroundColorFormatLoader,
                 boldFormatLoader,
@@ -4793,6 +5678,10 @@ class Editor extends core$1.Textbus {
         const modules = [browserModule];
         if (editorConfig.collaborateConfig) {
             modules.push(new collaborate.CollaborateModule(editorConfig.collaborateConfig));
+            browserModule.providers.push({
+                provide: platformBrowser.CollaborateSelectionAwarenessDelegate,
+                useClass: TableSelectionAwarenessDelegate
+            });
         }
         const vDomAdapter = new adapterViewfly.ViewflyVDomAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
@@ -4804,7 +5693,9 @@ class Editor extends core$1.Textbus {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView,
+            [KatexComponent.componentName]: KatexComponentView
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4833,7 +5724,9 @@ class Editor extends core$1.Textbus {
                 TableComponent,
                 HighlightBoxComponent,
                 ListComponent,
-                VideoComponent
+                VideoComponent,
+                AtComponent,
+                KatexComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
@@ -4861,6 +5754,9 @@ class Editor extends core$1.Textbus {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
+                registerAtShortcut(textbus);
+                registerListShortcut(textbus);
+                registerBlockquoteShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new platformBrowser$1.OutputTranslator();
@@ -4873,9 +5769,22 @@ class Editor extends core$1.Textbus {
         if (config.content) {
             const parser = this.get(platformBrowser.Parser);
             const doc = parser.parseDoc(config.content, rootComponentLoader);
-            rootComp = doc instanceof core$1.Component ? doc : new RootComponent(this, {
-                content: doc
-            });
+            if (doc instanceof core$1.Component) {
+                rootComp = doc;
+            }
+            else {
+                const content = new core$1.Slot([
+                    core$1.ContentType.BlockComponent
+                ]);
+                if (doc instanceof core$1.Slot) {
+                    deltaToBlock(doc.toDelta(), this).forEach(i => {
+                        content.insert(i);
+                    });
+                }
+                rootComp = new RootComponent(this, {
+                    content
+                });
+            }
         }
         else {
             rootComp = new RootComponent(this, {
@@ -4889,6 +5798,8 @@ class Editor extends core$1.Textbus {
     }
 }
 
+exports.AtComponent = AtComponent;
+exports.AtComponentView = AtComponentView;
 exports.AttrTool = AttrTool;
 exports.BlockTool = BlockTool;
 exports.BlockquoteComponent = BlockquoteComponent;
@@ -4903,6 +5814,7 @@ exports.DragResize = DragResize;
 exports.Dropdown = Dropdown;
 exports.DropdownMenuPortal = DropdownMenuPortal;
 exports.Editor = Editor;
+exports.FileUploader = FileUploader;
 exports.FontFamilyTool = FontFamilyTool;
 exports.FontSizeTool = FontSizeTool;
 exports.HighlightBoxComponent = HighlightBoxComponent;
@@ -4911,13 +5823,19 @@ exports.ImageComponent = ImageComponent;
 exports.ImageView = ImageView;
 exports.InsertTool = InsertTool;
 exports.ItalicTool = ItalicTool;
+exports.KatexComponent = KatexComponent;
+exports.KatexComponentView = KatexComponentView;
+exports.Keymap = Keymap;
 exports.LeftToolbar = LeftToolbar;
 exports.LeftToolbarPlugin = LeftToolbarPlugin;
+exports.LinkJump = LinkJump;
 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;
@@ -4937,6 +5855,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;
@@ -4959,15 +5878,19 @@ exports.imageComponentLoader = imageComponentLoader;
 exports.isSupportFont = isSupportFont;
 exports.italicFormatLoader = italicFormatLoader;
 exports.italicFormatter = italicFormatter;
+exports.katexComponentLoader = katexComponentLoader;
 exports.languageList = languageList;
 exports.linkFormatLoader = linkFormatLoader;
 exports.linkFormatter = linkFormatter;
 exports.listComponentLoader = listComponentLoader;
 exports.paragraphComponentLoader = paragraphComponentLoader;
+exports.registerAtShortcut = registerAtShortcut;
+exports.registerBlockquoteShortcut = registerBlockquoteShortcut;
 exports.registerBoldShortcut = registerBoldShortcut;
 exports.registerCodeShortcut = registerCodeShortcut;
 exports.registerHeadingShortcut = registerHeadingShortcut;
 exports.registerItalicShortcut = registerItalicShortcut;
+exports.registerListShortcut = registerListShortcut;
 exports.registerStrikeThroughShortcut = registerStrikeThroughShortcut;
 exports.registerTextAlignShortcut = registerTextAlignShortcut;
 exports.registerTextIndentShortcut = registerTextIndentShortcut;
@@ -4982,6 +5905,8 @@ exports.textAlignAttr = textAlignAttr;
 exports.textAlignAttrLoader = textAlignAttrLoader;
 exports.textIndentAttr = textIndentAttr;
 exports.textIndentAttrLoader = textIndentAttrLoader;
+exports.toBlockquote = toBlockquote;
+exports.toList = toList;
 exports.todolistComponentLoader = todolistComponentLoader;
 exports.toggleBold = toggleBold;
 exports.toggleCode = toggleCode;