@textbus/xnote 0.0.1-alpha.9 → 0.0.1

package/bundles/index.esm.js

@@ -1,15 +1,17 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, onUpdated, watch, ReflectiveInjector } from '@viewfly/core';
-import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, ContentType, Component, Registry, Slot, useContext, onBreak, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onContentInsert, onFocusIn, onFocusOut, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onCompositionStart } from '@textbus/core';
-import { VIEW_CONTAINER, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
-import { createPortal, DomRenderer, createApp, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, getCurrentInstance, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, watch } from '@viewfly/core';
+import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, Parser } from '@textbus/platform-browser';
+import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
 import highlightjs from 'highlight.js';
+import Katex from 'katex';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
+import { any2Hsl, hsl2Rgb } from '@tanbo/color';
 import { CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$k = "vf-3d0183";
+var scopedId$n = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -28,6 +30,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);
@@ -71,7 +85,7 @@ let DropdownContextService = DropdownContextService_1 = class DropdownContextSer
         this.canHide = true;
         this.openStateChangeEvent = new Subject();
         this.timer = null;
-        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, InjectFlags.SkipSelf, null);
+        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, InjectFlags.SkipSelf);
         this.onOpenStateChange = this.openStateChangeEvent.asObservable();
         dropdownService.onSiblingOpen.subscribe(id => {
             if (id === this.id) {
@@ -120,7 +134,7 @@ DropdownContextService = DropdownContextService_1 = __decorate([
 ], DropdownContextService);
 
 function Button(props) {
-    const dropdownContextService = inject(DropdownContextService, InjectFlags.Optional, null);
+    const dropdownContextService = inject(DropdownContextService, null);
     const isActive = createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -130,7 +144,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$k, () => {
+    return withScopedCSS(scopedId$n, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -142,10 +156,10 @@ function Button(props) {
     });
 }
 
-var scopedId$j = "vf-ac7e8d";
+var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$j, () => {
+    return withScopedCSS(scopedId$m, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -155,15 +169,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$i = "vf-ede279";
+var scopedId$l = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$i, () => {
+    return withScopedCSS(scopedId$l, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$h = "vf-4c1803";
+var scopedId$k = "vf-8abf2c";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -184,7 +198,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);
@@ -261,7 +275,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 = fromEvent(document, 'mouseup').subscribe(() => {
             component.state.width = endWidth + 'px';
@@ -271,16 +285,17 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$h, () => {
+    const sizeText = createSignal(`${component.state.width}*${component.state.height}`);
+    return withScopedCSS(scopedId$k, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
-                        }], children: [jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" })] })] })] }));
+                        }], children: [jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$g = "vf-a99c5e";
+var scopedId$j = "vf-a99c5e";
 
-var scopedId$f = "vf-41a617";
+var scopedId$i = "vf-8a05e9";
 
 const DropdownMenuPortal = withAnnotation({
     providers: [
@@ -288,11 +303,14 @@ const DropdownMenuPortal = withAnnotation({
     ]
 }, function DropdownMenuPortal(props) {
     const dropdownContextService = inject(DropdownContextService);
+    const container = inject(VIEW_CONTAINER);
     const menuRef = createRef();
     let timer = null;
     const delay = 10;
-    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;
@@ -307,19 +325,19 @@ const DropdownMenuPortal = 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';
@@ -331,12 +349,12 @@ const DropdownMenuPortal = 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, 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';
@@ -344,30 +362,41 @@ const DropdownMenuPortal = 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);
             }
         }
+    }
+    onUpdated(() => {
+        update();
     });
     onUnmounted(() => {
         clearTimeout(timer);
     });
     function onEnter() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = false;
         dropdownContextService.open();
     }
     function onLeave() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return createPortal(withScopedCSS(scopedId$f, () => {
+    return createPortal(withScopedCSS(scopedId$i, () => {
         return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
-            }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
-    }), document.body);
+            }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", style: {
+                    padding: props.padding
+                }, children: props.children }) }));
+    }), container);
 });
 
 const Dropdown = withAnnotation({
@@ -395,6 +424,9 @@ const Dropdown = withAnnotation({
     });
     const subscription = new Subscription();
     onMounted(() => {
+        if (props.trigger === 'none') {
+            return;
+        }
         if (props.trigger === 'click') {
             subscription.add(fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
@@ -420,14 +452,14 @@ const Dropdown = withAnnotation({
     return {
         isShow(b) {
             if (b) {
-                dropdownContextService.hide(false);
+                dropdownContextService.open();
             }
             else {
-                dropdownContextService.open();
+                dropdownContextService.hide(false);
             }
         },
-        $render: withScopedCSS(scopedId$g, () => {
-            return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
+        $render: withScopedCSS(scopedId$j, () => {
+            return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { 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 (jsx("div", { class: "dropdown-menu-item", onClick: () => {
                                         var _a;
@@ -442,10 +474,54 @@ const Dropdown = withAnnotation({
     };
 });
 
-var scopedId$e = "vf-678daa";
+var scopedId$h = "vf-c32a7b";
+
+function Keymap(props) {
+    const arr = [];
+    const keymap = props.keymap;
+    if (keymap.ctrlKey) {
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-command" }) : jsx("span", { children: "Ctrl" }));
+    }
+    if (keymap.shiftKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-shift" }) : jsx("span", { children: "Shift" }));
+    }
+    if (keymap.altKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(isMac() ? jsx("span", { class: "xnote-icon-opt" }) : jsx("span", { children: "Alt" }));
+    }
+    if (keymap.key) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        if (Array.isArray(keymap.key)) {
+            arr.push(jsx("span", { children: keymap.key.join('/') }));
+        }
+        else {
+            arr.push(jsx("span", { children: keymap.key }));
+        }
+    }
+    return withScopedCSS(scopedId$h, () => {
+        return (jsx("span", { class: "keymap", children: arr }));
+    });
+}
+
+var scopedId$g = "vf-acaa5f";
+
+function MenuHeading(props) {
+    return withScopedCSS(scopedId$g, () => {
+        return (jsx("div", { class: "menu-heading", children: props.children }));
+    });
+}
+
+var scopedId$f = "vf-c3b9dc";
 
 function MenuItem(props) {
-    const dropdownContextService = inject(DropdownContextService, InjectFlags.Optional, null);
+    const dropdownContextService = inject(DropdownContextService, null);
     const isActive = createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -462,8 +538,8 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return withScopedCSS(scopedId$e, () => {
-        return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
+    return withScopedCSS(scopedId$f, () => {
+        return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { class: "menu-item-content", children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsx("div", { children: props.desc })] }), props.arrow ?
                     jsx("div", { class: "arrow", children: jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsx("div", { class: [
                             'menu-check',
@@ -472,11 +548,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$d = "vf-a23c47";
+var scopedId$e = "vf-a23c47";
 
 function Popup(props) {
     const host = inject(VIEW_CONTAINER);
-    return createPortal(withScopedCSS(scopedId$d, () => {
+    return createPortal(withScopedCSS(scopedId$e, () => {
         return (jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -484,15 +560,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$c = "vf-216815";
+var scopedId$d = "vf-216815";
 
 function ToolbarItem(props) {
-    return withScopedCSS(scopedId$c, () => {
+    return withScopedCSS(scopedId$d, () => {
         return (jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$b = "vf-2a8a65";
+var scopedId$c = "vf-2a8a65";
 
 let RefreshService = class RefreshService {
     constructor() {
@@ -554,6 +630,308 @@ function useOutput() {
     return createSignal(inject(OutputInjectionToken));
 }
 
+const headingAttr = new 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(Keyboard);
+    const commander = textbus.get(Commander);
+    const selection = textbus.get(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 = useContext();
+    const selection = textbus.get(Selection);
+    onBreak(ev => {
+        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
+            const p = new ParagraphComponent(textbus);
+            ev.target.insert(p);
+            selection.setPosition(p.state.slot, 0);
+            ev.preventDefault();
+        }
+    });
+    onContentInsert(ev => {
+        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
+            (typeof ev.data.content === 'string' || ev.data.content.type !== ContentType.BlockComponent)) {
+            const p = new ParagraphComponent(textbus);
+            const childSlot = p.state.slot;
+            childSlot.insert(ev.data.content);
+            ev.target.insert(p);
+            selection.setPosition(childSlot, childSlot.index);
+            ev.preventDefault();
+        }
+    });
+}
+
+function SlotRender(props) {
+    const adapter = inject(DomAdapter);
+    const instance = getCurrentInstance();
+    const slot = props.slot;
+    const sub = merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+        if (props.slot.__changeMarker__.dirty) {
+            instance.markAsDirtied();
+        }
+    });
+    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 createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
+        }, renderEnv);
+    };
+}
+
+class BlockquoteComponent extends Component {
+    static fromJSON(textbus, json) {
+        const slot = textbus.get(Registry).createSlot(json.slot);
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    }
+    constructor(textbus, state = {
+        slot: new Slot([
+            ContentType.BlockComponent
+        ])
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+BlockquoteComponent.type = ContentType.BlockComponent;
+BlockquoteComponent.componentName = 'BlockquoteComponent';
+BlockquoteComponent.zenCoding = {
+    key: ' ',
+    match(content, textbus) {
+        const selection = textbus.get(Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^>$/.test(content);
+        }
+        return false;
+    },
+    createState(_, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            ContentType.BlockComponent
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
+        return {
+            slot
+        };
+    }
+};
+function toBlockquote(textbus) {
+    const query = textbus.get(Query);
+    const commander = textbus.get(Commander);
+    const selection = textbus.get(Selection);
+    const state = query.queryComponent(BlockquoteComponent);
+    if (state.state === 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(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 (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
+    };
+}
+const blockquoteComponentLoader = {
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
+    },
+    read(element, textbus, slotParser) {
+        const delta = slotParser(new Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]), element).toDelta();
+        const slot = new Slot([
+            ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    },
+};
+
+class HighlightBoxComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new HighlightBoxComponent(textbus, {
+            type: json.type,
+            slot: textbus.get(Registry).createSlot(json.slot)
+        });
+    }
+    constructor(textbus, state = {
+        type: '',
+        slot: new Slot([
+            ContentType.BlockComponent,
+        ])
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = 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 = createRef();
+    function setType(type) {
+        var _a;
+        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        props.component.state.type = type;
+    }
+    return () => {
+        const { state, name } = props.component;
+        if (readonly() || output()) {
+            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+        }
+        return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
+                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                }), jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
+                                    const icon = String.fromCodePoint(i);
+                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), 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 Slot([
+            ContentType.BlockComponent,
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
+        const slot = new Slot([
+            ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new HighlightBoxComponent(textbus, {
+            type: element.dataset.icon || '',
+            slot
+        });
+    }
+};
+
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -569,16 +947,28 @@ class ParagraphComponent extends Component {
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const injector = useContext();
         const commander = injector.get(Commander);
         const selection = injector.get(Selection);
         onBreak(ev => {
+            const isEmpty = this.state.slot.isEmpty;
             const afterSlot = ev.target.cut(ev.data.index);
+            afterSlot.removeAttribute(headingAttr);
             const nextParagraph = new ParagraphComponent(injector, {
                 slot: afterSlot
             });
-            commander.insertAfter(nextParagraph, this);
+            if (isEmpty && (this.parentComponent instanceof BlockquoteComponent ||
+                this.parentComponent instanceof HighlightBoxComponent)) {
+                commander.insertAfter(nextParagraph, this.parentComponent);
+                commander.removeComponent(this);
+            }
+            else {
+                commander.insertAfter(nextParagraph, this);
+            }
             selection.setPosition(afterSlot, 0);
             ev.preventDefault();
         });
@@ -587,22 +977,30 @@ class ParagraphComponent extends Component {
 ParagraphComponent.componentName = 'ParagraphComponent';
 ParagraphComponent.type = ContentType.BlockComponent;
 function ParagraphView(props) {
-    const adapter = inject(DomAdapter);
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
-                return (createVNode('p', null, children));
-            }, readonly() || output()) }));
+        return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: 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(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 Slot([
             ContentType.Text,
             ContentType.InlineComponent,
@@ -678,6 +1076,15 @@ const languageList = [{
     }, {
         label: 'Go',
         value: 'Go'
+    }, {
+        label: 'Kotlin',
+        value: 'kotlin'
+    }, {
+        label: 'Python',
+        value: 'python'
+    }, {
+        label: 'PHP',
+        value: 'php'
     }, {
         label: 'JSON',
         value: 'JSON',
@@ -702,6 +1109,9 @@ const languageList = [{
     }, {
         label: 'Shell',
         value: 'shell',
+    }, {
+        label: 'Katex',
+        value: 'latex',
     }, {
         label: 'Yaml',
         value: 'yaml',
@@ -720,11 +1130,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',
@@ -780,12 +1195,17 @@ class SourceCodeComponent extends Component {
             theme: json.theme
         });
     }
+    getSlots() {
+        return this.state.slots.map(i => i.slot);
+    }
     setup() {
         const textbus = useContext();
         const selection = useContext(Selection);
         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 Slot([
@@ -795,8 +1215,6 @@ class SourceCodeComponent extends 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();
@@ -824,6 +1242,12 @@ class SourceCodeComponent extends Component {
             });
             ev.preventDefault();
         });
+        onSlotApplyFormat(ev => {
+            ev.preventDefault();
+        });
+        onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
         onPaste(ev => {
             const codeList = [];
             const sourceCode = ev.data.text;
@@ -947,11 +1371,15 @@ class SourceCodeComponent extends Component {
 SourceCodeComponent.type = 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(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(/\+/, '\\+');
@@ -1018,7 +1446,7 @@ function SourceCodeView(props) {
     }
     const input = inject(Input);
     function updateCaret() {
-        input.caret.refresh(false);
+        input.caret.refresh();
     }
     const readonly = useReadonly();
     const output = useOutput();
@@ -1055,28 +1483,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 = 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 VTextNode(i.textContent);
-                textNode.location = location;
-                return textNode;
-            });
-        }
         return (jsxs("div", { ref: props.rootRef, class: {
                 'xnote-source-code': true,
                 'xnote-source-code-line-number': state.lineNumber,
@@ -1107,7 +1513,7 @@ function SourceCodeView(props) {
                         }
                     ], children: [jsx("div", { class: "xnote-source-code-line-number-bg", style: {
                                 width: Math.max(String(slots.length).length, 2.5) + 'em'
-                            } }), jsx("div", { onScroll: updateCaret, class: {
+                            } }), jsx("pre", { onScroll: updateCaret, class: {
                                 'xnote-source-code-content': true,
                                 'xnote-source-code-content-highlight': blockHighlight
                             }, style: {
@@ -1128,7 +1534,7 @@ function SourceCodeView(props) {
                                             children.push(br);
                                         }
                                     }
-                                    return createVNode('pre', {
+                                    return createVNode('div', {
                                         class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
                                     }, [
                                         createVNode('span', { class: 'xnote-source-code-line-content' }, children)
@@ -1137,10 +1543,33 @@ function SourceCodeView(props) {
                             }) }), 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 = 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 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(ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
     read(el, textbus) {
         let slots = [];
@@ -1268,15 +1697,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 === QueryStateType.Enabled ? textAlignState.value : 'left';
             draft.textIndent = textIndentState.state === QueryStateType.Enabled ? textIndentState.value : 0;
         });
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
@@ -1323,110 +1763,35 @@ function AttrTool(props) {
                 break;
         }
     }
-    return withScopedCSS(scopedId$b, () => {
+    return withScopedCSS(scopedId$c, () => {
         const states = checkStates();
-        return (jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
+        return (jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsx(Divider, {}),
                     value: ''
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'Tab' } }), icon: jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
                     value: 'i+'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
             ], children: props.children || jsx(Button, { arrow: true, highlight: false, children: jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
     });
 }
 
-const headingAttr = new 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(Keyboard);
-    const commander = textbus.get(Commander);
-    const selection = textbus.get(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 = useContext();
-    const selection = textbus.get(Selection);
-    onBreak(ev => {
-        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
-            const p = new ParagraphComponent(textbus);
-            ev.target.insert(p);
-            selection.setPosition(p.state.slot, 0);
-            ev.preventDefault();
-        }
-    });
-    onContentInsert(ev => {
-        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
-            (typeof ev.data.content === 'string' || ev.data.content.type !== ContentType.BlockComponent)) {
-            const p = new ParagraphComponent(textbus);
-            const childSlot = p.state.slot;
-            childSlot.insert(ev.data.content);
-            ev.target.insert(p);
-            selection.setPosition(childSlot, childSlot.index);
-            ev.preventDefault();
-        }
-    });
-}
-
 const defaultRowHeight = 30;
 const defaultColumnWidth = 100;
 class TableComponent extends Component {
@@ -1449,17 +1814,18 @@ class TableComponent extends 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 Slot([ContentType.BlockComponent]);
+                    slot.insert(p);
                     return {
                         rowspan: 1,
                         colspan: 1,
-                        slot: new Slot([
-                            ContentType.BlockComponent
-                        ])
+                        slot
                     };
                 })
             };
@@ -1470,7 +1836,11 @@ class TableComponent extends Component {
         this.focus = new Subject();
         this.tableSelection = createSignal(null);
     }
+    getSlots() {
+        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
+    }
     setup() {
+        const selection = useContext(Selection);
         onFocusIn(() => {
             this.focus.next(true);
         });
@@ -1480,12 +1850,42 @@ class TableComponent extends Component {
         useBlockContent((slot) => {
             return slot.parent === this;
         });
-        onGetRanges(ev => {
-            const selectPosition = this.tableSelection();
+        const sub = selection.onChange.subscribe(() => {
+            if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
+                this.tableSelection.set(null);
+            }
+        });
+        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 {
@@ -1496,33 +1896,64 @@ class TableComponent extends 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 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);
+        };
+        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 => {
@@ -1645,12 +2076,16 @@ class TodolistComponent extends Component {
             checked: json.checked
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = useContext();
         const commander = useContext(Commander);
         const selection = useContext(Selection);
         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);
@@ -1698,21 +2133,32 @@ class TodolistComponent extends Component {
 TodolistComponent.type = ContentType.BlockComponent;
 TodolistComponent.componentName = 'TodoListComponent';
 TodolistComponent.zenCoding = {
-    match: /^\[(x|\s)?\]$/,
+    match(content, textbus) {
+        const selection = textbus.get(Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^\[(x|\s)?\]$/.test(content);
+        }
+        return false;
+    },
     key: ' ',
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         const isChecked = content.charAt(1) === 'x';
         return {
             checked: isChecked,
-            slot: new Slot([
-                ContentType.InlineComponent,
-                ContentType.Text
-            ])
+            slot
         };
     }
 };
 function TodolistView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -1741,11 +2187,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: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
-                    return createVNode('div', {
-                        class: 'xnote-todolist-content'
-                    }, children);
-                }, readonly() || output())] }));
+            }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -1764,68 +2206,40 @@ const todolistComponentLoader = {
     }
 };
 
-class BlockquoteComponent extends Component {
-    static fromJSON(textbus, json) {
-        const slot = textbus.get(Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    }
-    constructor(textbus, state = {
-        slot: new Slot([
-            ContentType.BlockComponent
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
+function toList(textbus, type) {
+    const commander = textbus.get(Commander);
+    commander.transform({
+        targetType: ListComponent.type,
+        slotFactory() {
+            return new Slot([
+                ContentType.InlineComponent,
+                ContentType.Text
+            ]);
+        },
+        stateFactory(slots) {
+            return slots.map((slot, index) => {
+                return new ListComponent(textbus, {
+                    type,
+                    reorder: index === 0,
+                    slot
+                });
+            });
+        }
+    });
 }
-BlockquoteComponent.type = ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match: /^>$/,
-    createState() {
-        return {
-            slot: new Slot([
-                ContentType.BlockComponent
-            ])
-        };
-    }
-};
-function BlockquoteView(props) {
-    const adapter = inject(DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        const slot = props.component.state.slot;
-        return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return createVNode('div', null, children);
-            }, readonly() || output()) }));
-    };
+function registerListShortcut(textbus) {
+    const keyboard = textbus.get(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 Slot([
-            ContentType.BlockComponent,
-        ]), element).toDelta();
-        const slot = new Slot([
-            ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    },
-};
-
 class ListComponent extends Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -1834,6 +2248,9 @@ class ListComponent extends Component {
             slot: textbus.get(Registry).createSlot(json.slot)
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = useContext();
         const commander = useContext(Commander);
@@ -1847,8 +2264,7 @@ class ListComponent extends 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;
                     }
@@ -1861,6 +2277,7 @@ class ListComponent extends Component {
         });
         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);
@@ -1911,7 +2328,7 @@ class ListComponent extends Component {
                 key: 'Tab'
             },
             action: () => {
-                updateAfterList(this);
+                Promise.resolve().then(() => updateAfterList(this));
                 return false;
             }
         });
@@ -1931,15 +2348,27 @@ ListComponent.componentName = 'ListComponent';
 ListComponent.type = ContentType.BlockComponent;
 ListComponent.zenCoding = {
     key: ' ',
-    match: /^([1-9]\.|[+*])$/,
-    createState(content) {
+    match(content, textbus) {
+        const selection = textbus.get(Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^([1-9]\.|[+*-])$/.test(content);
+        }
+        return false;
+    },
+    createState(content, textbus) {
+        const selection = textbus.get(Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new Slot([
+            ContentType.InlineComponent,
+            ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         return {
             type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
             reorder: true,
-            slot: new Slot([
-                ContentType.InlineComponent,
-                ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -1961,7 +2390,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = inject(DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -1988,7 +2416,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];
@@ -1996,7 +2425,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) {
@@ -2027,7 +2455,7 @@ function ListComponentView(props) {
                 icon = numberToLetter(listStep) + '.';
             }
         }
-        return (jsx(ListType, { ref: props.rootRef, "data-component": component.name, class: "xnote-list", style: {
+        return (jsx(ListType, { ref: props.rootRef, "data-component": component.name, "data-reorder": (listStep === 0) + '', class: "xnote-list", style: {
                 marginLeft: indent * 24 + 'px'
             }, children: jsxs("li", { style: {
                     justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
@@ -2035,16 +2463,12 @@ function ListComponentView(props) {
                 }, children: [jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
-                        return createVNode('div', {
-                            class: 'xnote-list-content'
-                        }, children);
-                    }, readonly() || output())] }) }));
+                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), 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(ContentType.BlockComponent) && (element.tagName === 'UL' || element.tagName === 'OL');
     },
     read(element, textbus, slotParser) {
         const type = element.tagName === 'OL' ? 'OrderedList' : 'UnorderedList';
@@ -2055,7 +2479,7 @@ const listComponentLoader = {
             ]), element.querySelector('.xnote-list-content') || document.createElement('div'));
             return new ListComponent(textbus, {
                 slot,
-                reorder: true,
+                reorder: element.dataset.reorder !== 'false',
                 type
             });
         }
@@ -2098,119 +2522,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 === QueryStateType.Enabled;
+            const heading = query.queryAttributeByRange(headingAttr, range);
+            draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === QueryStateType.Enabled;
             draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
             if (heading.state === QueryStateType.Enabled) {
                 draft[heading.value] = true;
                 draft.paragraph = false;
             }
-            const queryList = query.queryComponent(ListComponent);
+            const queryList = query.queryComponentByRange(ListComponent, range);
             draft.unorderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
             draft.orderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
-            draft.table = query.queryComponent(TableComponent).state === QueryStateType.Enabled;
-            draft.todolist = query.queryComponent(TodolistComponent).state === QueryStateType.Enabled;
-            draft.blockquote = query.queryComponent(BlockquoteComponent).state === QueryStateType.Enabled;
-            draft.sourceCode = query.queryComponent(SourceCodeComponent).state === QueryStateType.Enabled;
+            draft.table = query.queryComponentByRange(TableComponent, range).state === QueryStateType.Enabled;
+            draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === QueryStateType.Enabled;
+            draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === QueryStateType.Enabled;
+            draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === 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
+        });
     });
     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 Component {
-    static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
-            type: json.type,
-            slot: textbus.get(Registry).createSlot(json.slot)
-        });
-    }
-    constructor(textbus, state = {
-        type: '',
-        slot: new Slot([
-            ContentType.BlockComponent,
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
-HighlightBoxComponent.componentName = 'HighlightBoxComponent';
-HighlightBoxComponent.type = ContentType.BlockComponent;
-function HighlightBoxView(props) {
-    const adapter = inject(DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    const emoji = [];
-    for (let i = 0x1F600; i <= 0x1F64F; i++) {
-        emoji.push(i);
-    }
-    const dropdownRef = createRef();
-    function setType(type) {
-        var _a;
-        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
-        props.component.state.type = type;
-    }
-    return () => {
-        const { state, name } = props.component;
-        if (readonly() || output()) {
-            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly() || output())] }));
+        else if (selection.isSelected) {
+            updateCheckStates({
+                startOffset: selection.startOffset,
+                startSlot: selection.startSlot,
+                endSlot: selection.endSlot,
+                endOffset: selection.endOffset
+            });
         }
-        return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
-                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                }), jsx(Divider, {}), emoji.map(i => {
-                                    const icon = String.fromCodePoint(i);
-                                    return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return createVNode('div', {
-                        class: 'xnote-highlight-box-content'
-                    }, children);
-                }, readonly() || output())] }));
+        return checkStates();
     };
 }
-const highlightBoxComponentLoader = {
-    match(element) {
-        return element.tagName === 'DIV' && element.dataset.component === HighlightBoxComponent.componentName;
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new Slot([
-            ContentType.BlockComponent,
-        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
-        const slot = new Slot([
-            ContentType.BlockComponent,
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new HighlightBoxComponent(textbus, {
-            type: element.dataset.icon || '',
-            slot
-        });
-    }
-};
 
 function useBlockTransform() {
     const commander = inject(Commander);
@@ -2278,62 +2641,10 @@ function useBlockTransform() {
                 break;
             case 'ol':
             case 'ul':
-                {
-                    commander.transform({
-                        targetType: ListComponent.type,
-                        slotFactory() {
-                            return new Slot([
-                                ContentType.InlineComponent,
-                                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 === 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':
                 {
@@ -2370,6 +2681,8 @@ function useBlockTransform() {
                                         lineNumber: true,
                                         autoBreak: true,
                                         slots: slots.map(slot => {
+                                            slot.cleanFormats();
+                                            slot.cleanAttributes();
                                             return {
                                                 slot,
                                                 emphasize: false
@@ -2390,7 +2703,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);
                         });
                     }
@@ -2424,7 +2737,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return withScopedCSS(scopedId$b, () => {
+    return withScopedCSS(scopedId$c, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -2439,7 +2752,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) {
@@ -2448,27 +2761,48 @@ function BlockTool() {
                 break;
             }
         }
-        return (jsx(Dropdown, { onCheck: transform, trigger: 'hover', menu: [
+        return (jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-pilcrow" }), checked: states.paragraph, children: "\u6B63\u6587" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '0'
+                            } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h1" }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '1'
+                            } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h2" }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '2'
+                            } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h3" }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '3'
+                            } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h4" }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '4'
+                            } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h5" }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '5'
+                            } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h6" }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '6'
+                            } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
                 }, {
                     label: jsx(Divider, {}),
@@ -2477,19 +2811,19 @@ function BlockTool() {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsx(MenuItem, { desc: jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
                     value: 'sourceCode'
                 }, {
-                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-paint-bucket" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
+                    label: jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-hightlight-box" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
                     value: 'highlightBox'
                 }
             ], children: jsx(Button, { arrow: true, highlight: false, children: jsx("span", { class: currentType }) }) }));
@@ -2855,12 +3189,13 @@ function CodeTool() {
     };
 }
 
-var scopedId$a = "vf-1fbbdf";
+var scopedId$b = "vf-accb31";
 
 function ColorTool(props) {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
     const commander = inject(Commander);
+    const selection = inject(Selection);
     const textColor = createSignal('');
     const backgroundColor = createSignal('');
     const [viewModel] = useProduce({
@@ -2868,13 +3203,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 === QueryStateType.Enabled ? textState.value : '');
         backgroundColor.set(backgroundState.state === QueryStateType.Enabled ? backgroundState.value : '');
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         updateCheckState();
@@ -2884,6 +3230,7 @@ function ColorTool(props) {
         sub.unsubscribe();
     });
     const textColors = [
+        '#000',
         '#aaa',
         '#ff2e2e',
         '#ff8d45',
@@ -2893,6 +3240,7 @@ function ColorTool(props) {
         '#1296db',
         '#617fff',
         '#c459ff',
+        '#fff',
     ];
     const backgroundColors = [
         '#aaa',
@@ -2904,15 +3252,16 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return withScopedCSS(scopedId$a, () => {
+    return withScopedCSS(scopedId$b, () => {
         const vm = viewModel();
-        return (jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
+        return (jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [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 jsx("div", { class: {
                                         active: textColor() === c
                                     }, onClick: () => {
@@ -2972,6 +3321,9 @@ const isSupportFont = (function () {
 function FontFamilyTool() {
     const currentFontFamily = createSignal('');
     const fontFamilyOptions = [{
+            label: '默认',
+            value: ''
+        }, {
             label: '宋体',
             value: 'SimSun, STSong'
         }, {
@@ -3013,7 +3365,12 @@ function FontFamilyTool() {
         }];
     const commander = inject(Commander);
     function check(v) {
-        commander.applyFormat(fontFamilyFormatter, v);
+        if (v) {
+            commander.applyFormat(fontFamilyFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontFamilyFormatter);
+        }
     }
     const refreshService = inject(RefreshService);
     const query = inject(Query);
@@ -3022,7 +3379,7 @@ function FontFamilyTool() {
         const result = query.queryFormat(fontFamilyFormatter);
         const isHighlight = result.state === QueryStateType.Enabled;
         highlight.set(isHighlight);
-        currentFontFamily.set(isHighlight ? result.value : '默认');
+        currentFontFamily.set(isHighlight ? result.value : '');
     });
     onUnmounted(() => {
         subscription.unsubscribe();
@@ -3030,7 +3387,7 @@ function FontFamilyTool() {
     return () => {
         var _a;
         return (jsx(Dropdown, { onCheck: check, menu: fontFamilyOptions.map(i => {
-                const disabled = !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v);
+                const disabled = i.value ? !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v) : false;
                 return {
                     label: jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
@@ -3062,7 +3419,12 @@ function FontSizeTool() {
     ];
     const commander = inject(Commander);
     function check(v) {
-        commander.applyFormat(fontSizeFormatter, v);
+        if (v) {
+            commander.applyFormat(fontSizeFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontSizeFormatter);
+        }
     }
     const refreshService = inject(RefreshService);
     const query = inject(Query);
@@ -3112,12 +3474,30 @@ function ItalicTool() {
     };
 }
 
-var scopedId$9 = "vf-269a0b";
+var scopedId$a = "vf-e74208";
+
+let EditorService = class EditorService {
+    constructor() {
+        this.hideInlineToolbar = false;
+        this.canShowLeftToolbar = true;
+        this.onLeftToolbarCanVisibleChange = new Subject();
+    }
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
+    }
+};
+EditorService = __decorate([
+    Injectable({
+        provideIn: 'root'
+    })
+], EditorService);
 
 function LinkTool(props) {
     const selectionBridge = inject(SelectionBridge);
     const selection = inject(Selection);
     const commander = inject(Commander);
+    const editorService = inject(EditorService);
     const container = inject(VIEW_CONTAINER);
     const isShow = createSignal(false);
     const inputRef = createRef();
@@ -3138,22 +3518,24 @@ function LinkTool(props) {
             isClickFromSelf = false;
             return;
         }
+        editorService.hideInlineToolbar = false;
         isShow.set(false);
     });
     onUnmounted(() => {
         sub.unsubscribe();
     });
-    return withScopedCSS(scopedId$9, () => {
+    return withScopedCSS(scopedId$a, () => {
         const containerRect = container.getBoundingClientRect();
         const rect = isShow() ? selectionBridge.getRect({
             slot: selection.focusSlot,
             offset: selection.focusOffset
         }) : {};
         return (jsxs("span", { children: [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: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
+                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, children: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
                     jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
                             }, class: "input-group", children: [jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
@@ -3212,7 +3594,7 @@ function UnderlineTool() {
     };
 }
 
-var scopedId$8 = "vf-cf8e1c";
+var scopedId$9 = "vf-cf8e1c";
 
 class FileUploader {
 }
@@ -3221,6 +3603,9 @@ class ImageComponent extends Component {
     static fromJSON(textbus, json) {
         return new ImageComponent(textbus, Object.assign({}, json));
     }
+    getSlots() {
+        return [];
+    }
 }
 ImageComponent.type = ContentType.InlineComponent;
 ImageComponent.componentName = 'ImageComponent';
@@ -3247,9 +3632,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'
         });
     }
 };
@@ -3258,8 +3645,8 @@ class VideoComponent extends Component {
     static fromJSON(textbus, json) {
         return new VideoComponent(textbus, Object.assign({}, json));
     }
-    setup() {
-        //
+    getSlots() {
+        return [];
     }
 }
 VideoComponent.type = ContentType.InlineComponent;
@@ -3271,7 +3658,7 @@ function VideoView(props) {
     const output = useOutput();
     return () => {
         if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-video", "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
+            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
                         width: state.width,
                         height: state.height
                     } }) }));
@@ -3284,12 +3671,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 Textbus {
+    constructor() {
+        const adapter = new ViewflyAdapter({
+            [SourceCodeComponent.componentName]: SourceCodeView
+        }, (host, root, injector) => {
+            const appInjector = new ReflectiveInjector(injector, [{
+                    provide: OutputInjectionToken,
+                    useValue: true
+                }]);
+            const app = createApp(root, {
+                context: appInjector
+            }).mount(host);
+            return () => {
+                app.destroy();
+            };
+        });
+        const browserModule = new BrowserModule({
+            adapter,
+            renderTo: () => {
+                return this.host;
+            }
+        });
+        super({
+            components: [
+                SourceCodeComponent
+            ],
+            imports: [browserModule]
+        });
+        this.onValueChange = new 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 Slot([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 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 = 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 jsx$1(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 = inject(Textbus);
+    const editorRef = 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(fromEvent(node, 'mousedown').subscribe(ev => ev.stopPropagation()), 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 = createRef();
+    const output = useOutput();
+    const readonly = useReadonly();
+    return () => {
+        const text = props.component.state.text;
+        return (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))
+                :
+                    jsx(Dropdown, { padding: '0', ref: dropdownRef, trigger: 'none', width: '600px', menu: 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)
         });
     }
 };
@@ -3298,7 +3842,8 @@ function InsertTool(props) {
     const commander = inject(Commander);
     const selection = inject(Selection);
     const textbus = inject(Textbus);
-    const fileUploader = inject(FileUploader, InjectFlags.Optional, null);
+    const fileUploader = inject(FileUploader, null);
+    const dropdownContextService = inject(DropdownContextService);
     function insert(type) {
         var _a;
         const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
@@ -3312,6 +3857,8 @@ function InsertTool(props) {
             else {
                 commander.insertAfter(comp, component);
             }
+            dropdownContextService.canHide = true;
+            dropdownContextService.hide(false);
         }
         switch (type) {
             case 'h1':
@@ -3373,7 +3920,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':
@@ -3392,7 +3941,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
                         });
@@ -3402,7 +3951,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
                         });
@@ -3419,14 +3968,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 withScopedCSS(scopedId$8, () => {
-        return jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
+    return withScopedCSS(scopedId$9, () => {
+        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsx(MenuItem, { onClick: () => insert('katex'), icon: jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" })] });
     });
 }
 
-var scopedId$7 = "vf-b05292";
+var scopedId$8 = "vf-b05292";
 
 const LeftToolbar = withAnnotation({
     providers: [RefreshService]
@@ -3436,6 +3994,7 @@ const LeftToolbar = withAnnotation({
     const selection = inject(Selection);
     const rootComponentRef = inject(RootComponentRef);
     const refreshService = inject(RefreshService);
+    const editorService = inject(EditorService);
     const checkStates = useActiveBlock();
     const toBlock = useBlockTransform();
     const activeSlot = createSignal(null);
@@ -3454,6 +4013,14 @@ const LeftToolbar = withAnnotation({
         top: 0,
         display: false
     });
+    const sub = editorService.onLeftToolbarCanVisibleChange.subscribe(() => {
+        updatePosition(d => {
+            d.display = editorService.canShowLeftToolbar;
+        });
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
     let isIgnoreMove = false;
     onMounted(() => {
         const rootComponent = rootComponentRef.component;
@@ -3461,12 +4028,14 @@ const LeftToolbar = withAnnotation({
         const sub = fromEvent(docContentContainer, 'mousemove').pipe(filter(() => {
             return !isIgnoreMove;
         }), map(ev => {
+            var _a;
             let currentNode = ev.target;
             while (currentNode) {
                 const slot = adapter.getSlotByNativeNode(currentNode);
                 if (slot) {
-                    if ((slot === null || slot === void 0 ? void 0 : slot.parent) instanceof SourceCodeComponent || (slot === null || slot === void 0 ? void 0 : slot.parent) instanceof TableComponent) {
-                        return null;
+                    if (((_a = slot === null || slot === void 0 ? void 0 : slot.parent) === null || _a === void 0 ? void 0 : _a.type) === ContentType.InlineComponent) {
+                        currentNode = currentNode.parentNode;
+                        continue;
                     }
                     return slot;
                 }
@@ -3481,7 +4050,9 @@ const LeftToolbar = withAnnotation({
             activeSlot.set(slot);
             if (slot) {
                 checkStates(slot);
-                isEmptyBlock.set(slot.parent instanceof ParagraphComponent && slot.isEmpty);
+                isEmptyBlock.set((slot.parent instanceof ParagraphComponent && slot.isEmpty) ||
+                    slot.parent instanceof SourceCodeComponent ||
+                    slot.parent instanceof TableComponent);
                 const nativeNode = adapter.getNativeNodeByComponent(slot.parent);
                 updatePosition(draft => {
                     const containerRect = docContentContainer.getBoundingClientRect();
@@ -3533,19 +4104,7 @@ const LeftToolbar = 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) {
@@ -3577,7 +4136,7 @@ const LeftToolbar = withAnnotation({
         if (!slot) {
             return;
         }
-        if (slot.parent.__slots__.length <= 1) {
+        if (slot.parent.slots.length <= 1) {
             commander.removeComponent(slot.parent);
         }
         else {
@@ -3589,20 +4148,21 @@ const LeftToolbar = withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return withScopedCSS(scopedId$7, () => {
+    return withScopedCSS(scopedId$8, () => {
+        var _a;
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsx("span", { class: "xnote-icon-pilcrow" });
-        const states = checkStates();
+        const states = checkStates(slot);
         if (slot) {
             const types = [
                 [states.paragraph, jsx("span", { class: "xnote-icon-pilcrow" })],
                 [states.sourceCode, jsx("span", { class: "xnote-icon-source-code" })],
                 [states.blockquote, jsx("span", { class: "xnote-icon-quotes-right" })],
                 [states.todolist, jsx("span", { class: "xnote-icon-checkbox-checked" })],
-                [states.table, jsx("span", { class: "xnote-icon-table" })],
                 [states.unorderedList, jsx("span", { class: "xnote-icon-list" })],
                 [states.orderedList, jsx("span", { class: "xnote-icon-list-numbered" })],
+                [states.table, jsx("span", { class: "xnote-icon-table" })],
                 [states.h1, jsx("span", { class: "xnote-icon-heading-h1" })],
                 [states.h2, jsx("span", { class: "xnote-icon-heading-h2" })],
                 [states.h3, jsx("span", { class: "xnote-icon-heading-h3" })],
@@ -3617,18 +4177,20 @@ const LeftToolbar = withAnnotation({
                 }
             }
         }
+        const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
+        const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
-                    display: position.display && selection.isCollapsed ? 'block' : 'none'
-                }, children: jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
+                    display: position.display && selection.isCollapsed && editorService.canShowLeftToolbar ? 'block' : 'none'
+                }, children: jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsx(InsertTool, { replace: true, slot: activeSlot() })
+                        jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsx("span", { children: jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxs("span", { children: [activeNode, jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -3663,24 +4225,74 @@ class LeftToolbarPlugin {
     }
 }
 
-var scopedId$6 = "vf-fee98b";
+var scopedId$7 = "vf-3073ba";
 
-let EditorService = class EditorService {
-    constructor() {
-        this.hideInlineToolbar = false;
+function LinkJump() {
+    const selection = inject(Selection);
+    const query = inject(Query);
+    const bridge = inject(SelectionBridge);
+    const container = inject(VIEW_CONTAINER);
+    const href = createSignal('');
+    const ref = createRef();
+    const isShow = createSignal(false);
+    function onSelectionChange() {
+        if (selection.isCollapsed) {
+            const queryState = query.queryFormat(linkFormatter);
+            if (queryState.state === 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);
     }
-};
-EditorService = __decorate([
-    Injectable({
-        provideIn: 'root'
-    })
-], EditorService);
+    selection.onChange.pipe(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 createPortal(withScopedCSS(scopedId$7, () => {
+        return (jsxs("div", { ref: ref, class: "link-jump-plugin", style: { display: isShow() ? '' : 'none' }, children: [jsx("span", { onClick: cleanLink, children: "\u6E05\u9664" }), jsx("a", { target: "_blank", href: href(), children: "\u8DF3\u8F6C" })] }));
+    }), container);
+}
+
+var scopedId$6 = "vf-fee98b";
 
 const Toolbar = withAnnotation({
     providers: [RefreshService]
 }, function Toolbar() {
     const selection = inject(Selection);
     const viewDocument = inject(VIEW_CONTAINER);
+    const rootComponentRef = inject(RootComponentRef);
+    const adapter = inject(DomAdapter);
     const bridge = inject(SelectionBridge);
     const textbus = inject(Textbus);
     const editorService = inject(EditorService);
@@ -3702,7 +4314,7 @@ const Toolbar = withAnnotation({
     const toolbarRef = 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,
@@ -3711,14 +4323,12 @@ const Toolbar = 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;
@@ -3739,13 +4349,15 @@ const Toolbar = withAnnotation({
         sub.unsubscribe();
     });
     function bindMouseup() {
-        mouseupSubscription = fromEvent(viewDocument, 'mouseup').pipe(filter(ev => {
+        const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
+        mouseupSubscription = fromEvent(docElement, 'mouseup').pipe(filter(ev => {
             return !ev.composedPath().includes(toolbarRef.current);
         }), delay(100), filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
         }), map(getTop), delay(200)).subscribe((top) => {
             if (top !== null) {
                 updateViewPosition(draft => {
+                    draft.isHide = false;
                     draft.opacity = 1;
                     draft.top = top;
                 });
@@ -3764,10 +4376,10 @@ const Toolbar = withAnnotation({
         });
         bindMouseup();
     });
+    const instance = getCurrentInstance();
     function hideToolbar() {
-        updateViewPosition(draft => {
-            draft.isHide = true;
-        });
+        editorService.hideInlineToolbar = true;
+        instance.markAsDirtied();
     }
     onUnmounted(() => {
         mousedownSubscription.unsubscribe();
@@ -3908,6 +4520,222 @@ class Matcher {
     }
 }
 
+class Organization {
+}
+function registerAtShortcut(textbus) {
+    const keyboard = textbus.get(Keyboard);
+    const selection = textbus.get(Selection);
+    const commander = textbus.get(Commander);
+    keyboard.addShortcut({
+        keymap: {
+            key: '@',
+            shiftKey: true
+        },
+        action() {
+            const { commonAncestorComponent } = selection;
+            if (commonAncestorComponent instanceof SourceCodeComponent) {
+                return false;
+            }
+            const at = new AtComponent(textbus);
+            commander.insert(at);
+            selection.setPosition(at.state.slot, 0);
+        }
+    });
+}
+class AtComponent extends Component {
+    static fromJSON(textbus, { slot: slotState, userInfo }) {
+        const registry = textbus.get(Registry);
+        if (slotState) {
+            const slot = registry.createSlot(slotState);
+            return new AtComponent(textbus, {
+                slot
+            });
+        }
+        return new AtComponent(textbus, {
+            userInfo,
+        });
+    }
+    constructor(textbus, state = {
+        slot: new Slot([ContentType.Text])
+    }) {
+        if (!state.userInfo && !state.slot) {
+            state.slot = new Slot([ContentType.Text]);
+        }
+        super(textbus, state);
+        this.focus = new Subject();
+        this.members = createSignal([]);
+        this.selectedIndex = createSignal(0);
+    }
+    getSlots() {
+        if (this.state.slot) {
+            return [this.state.slot];
+        }
+        return [];
+    }
+    setup() {
+        let isFocus = false;
+        onFocus(() => {
+            isFocus = true;
+            this.focus.next(true);
+            onChange.next();
+        });
+        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 = useContext(Organization);
+        const selection = useContext(Selection);
+        const commander = useContext(Commander);
+        const onChange = new Subject();
+        onContentInserted((ev) => {
+            const key = this.state.slot.toString();
+            if (key.length > 10) {
+                selection.selectComponent(this);
+                commander.insert(key);
+                ev.preventDefault();
+                return;
+            }
+            onChange.next();
+        });
+        onContentDeleted(() => {
+            onChange.next();
+        });
+        onBreak((ev) => {
+            const member = this.members()[this.selectedIndex()];
+            if (member) {
+                this.state.userInfo = Object.assign({}, member);
+            }
+            selection.selectComponentEnd(this);
+            ev.preventDefault();
+        });
+        useDynamicShortcut({
+            keymap: {
+                key: ['ArrowDown', 'ArrowUp']
+            },
+            action: (key) => {
+                let index = this.selectedIndex();
+                if (key === 'ArrowUp') {
+                    if (index > 0) {
+                        index--;
+                        this.selectedIndex.set(index);
+                    }
+                    return;
+                }
+                if (index < this.members().length - 1) {
+                    index++;
+                    this.selectedIndex.set(index);
+                }
+            }
+        });
+        const subs = onChange.pipe(switchMap(() => {
+            const key = this.state.slot.toString();
+            return fromPromise(organization.getMembers(key));
+        })).subscribe((members) => {
+            this.members.set(members);
+            this.selectedIndex.set(0);
+            if (isFocus) {
+                this.focus.next(true);
+            }
+        });
+        onDestroy(() => {
+            subs.unsubscribe();
+        });
+    }
+}
+AtComponent.componentName = 'AtComponent';
+AtComponent.type = ContentType.InlineComponent;
+
+function AtComponentView(props) {
+    const selection = inject(Selection);
+    const dropdownRef = createRef();
+    const subscription = props.component.focus.subscribe((b) => {
+        if (dropdownRef.current && props.component.members().length) {
+            dropdownRef.current.isShow(b);
+        }
+    });
+    onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    const readonly = useReadonly();
+    const output = useOutput();
+    const membersRef = createRef();
+    onUpdated(() => {
+        if (output() || readonly()) {
+            return;
+        }
+        const container = membersRef.current;
+        if (container) {
+            const focusItem = container.children[props.component.selectedIndex()];
+            if (focusItem) {
+                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 (jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), userInfo.name] }));
+        }
+        if (readonly() || output()) {
+            return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
+        }
+        const members = props.component.members();
+        return (jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
+                        let hsl = any2Hsl(member.color);
+                        if (hsl === 'unknown') {
+                            hsl = any2Hsl('#000');
+                        }
+                        const rgb = hsl2Rgb(hsl);
+                        const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+                        const color = yiq >= 128 ? '#000' : '#fff';
+                        return (jsxs("div", { onClick: () => {
+                                props.component.state.userInfo = member;
+                                selection.selectComponentEnd(props.component);
+                            }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsx("img", { src: member.avatar, alt: member.name }) :
+                                        jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color }, children: member.name }) }), jsxs("div", { class: "xnote-at-member-info", children: [jsx("div", { class: "xnote-at-member-name", children: member.name }), jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
+                    }) }), children: [jsx("span", { children: "@" }), slot && 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 Slot([ContentType.Text]), element.querySelector('.xnote-at-input') || document.createElement('div'));
+        return new AtComponent(textbus, {
+            slot
+        });
+    }
+};
+
 class RootComponent extends Component {
     constructor() {
         super(...arguments);
@@ -3919,17 +4747,36 @@ class RootComponent extends Component {
             content
         });
     }
+    getSlots() {
+        return [this.state.content];
+    }
     setup() {
-        useBlockContent(this.state.content);
+        useBlockContent((slot) => slot === this.state.content);
         onCompositionStart(ev => {
             this.onCompositionStart.next(ev);
         });
+        onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
+        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 = ContentType.BlockComponent;
 function RootView(props) {
-    const adapter = inject(DomAdapter);
     const { content } = props.component.state;
     const ref = createDynamicRef(node => {
         const sub = props.component.onCompositionStart.subscribe(() => {
@@ -3939,16 +4786,14 @@ function RootView(props) {
             sub.unsubscribe();
         };
     });
+    onUpdated(() => {
+        props.component.afterCheck();
+    });
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsx("div", { class: "xnote-root", ref: [rootRef, ref], children: adapter.slotRender(content, children => {
-                return (createVNode('div', {
-                    class: 'xnote-content',
-                    'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                }, children));
-            }, readonly() || output()) }));
+        return (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -3962,9 +4807,7 @@ const rootComponentLoader = {
             ContentType.Text
         ]), element).toDelta();
         const slot = new Slot([
-            ContentType.BlockComponent,
-            ContentType.InlineComponent,
-            ContentType.Text
+            ContentType.BlockComponent
         ]);
         deltaToBlock(delta, textbus).forEach(i => {
             slot.insert(i);
@@ -3991,6 +4834,7 @@ TableService = __decorate([
 function ResizeColumn(props) {
     const dragLineRef = createRef();
     let activeCol = null;
+    const editorService = inject(EditorService);
     onMounted(() => {
         const { tableRef } = props;
         let isDrag = false;
@@ -4023,6 +4867,7 @@ function ResizeColumn(props) {
             }
         })).add(fromEvent(dragLineRef.current, 'mousedown').subscribe(downEvent => {
             isDrag = true;
+            editorService.changeLeftToolbarVisible(false);
             props.onActiveStateChange(true);
             const x = downEvent.clientX;
             const layoutWidth = props.component.state.layoutWidth;
@@ -4030,16 +4875,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 = 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(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 () => {
@@ -4065,7 +4914,7 @@ function ResizeColumn(props) {
     });
 }
 
-var scopedId$4 = "vf-d64cf9";
+var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = inject(EditorService);
@@ -4140,7 +4989,7 @@ function TopBar(props) {
                     active: props.isFocus()
                 }], children: jsxs("div", { class: "toolbar-wrapper", children: [jsx("div", { class: "insert-bar", children: jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsx("tbody", { children: jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsx("tbody", { children: jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return (jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxs("div", { class: "tool-container", children: [index === 0 && (jsx("span", { onMouseenter: () => {
                                                             tableService.onInsertColumnBefore.next(0);
                                                         }, onMouseleave: () => {
@@ -4166,7 +5015,7 @@ function TopBar(props) {
                                                                 }, children: jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
                                     }) }) }) }) }), jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsx("tbody", { children: jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsx("tbody", { children: jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return jsx("td", { onClick: ev => {
                                                 mouseDownFromToolbar = true;
                                                 if (!ev.shiftKey) {
@@ -4186,7 +5035,7 @@ function TopBar(props) {
     });
 }
 
-var scopedId$3 = "vf-b1149b";
+var scopedId$3 = "vf-7bef30";
 
 function Scroll(props) {
     const scrollRef = createRef();
@@ -4200,37 +5049,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 = fromEvent(el, 'scroll').subscribe(update);
         return () => s.unsubscribe();
     });
     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 withScopedCSS(scopedId$3, () => {
-        return jsx("div", { ref: [scrollRef, props.scrollRef], class: ['scroll-container', {
+        return 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 = inject(EditorService);
@@ -4430,9 +5283,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 {
@@ -4461,81 +5314,25 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
     const adapter = inject(DomAdapter);
+    const editorService = inject(EditorService);
     const isFocus = createSignal(false);
+    const layoutWidth = createSignal(props.component.state.layoutWidth);
     const subscription = props.component.focus.subscribe(b => {
         isFocus.set(b);
+        if (!b) {
+            editorService.hideInlineToolbar = false;
+        }
     });
     onUnmounted(() => {
         subscription.unsubscribe();
     });
     const tableRef = createRef();
-    const scrollRef = createRef();
     const isResizeColumn = createSignal(false);
-    const selection = inject(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;
-    };
-    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();
@@ -4548,45 +5345,42 @@ const TableComponentView = withAnnotation({
             }
             rowMapping.set(row, Math.random());
         });
-        Promise.resolve().then(() => {
-            props.component.afterContentCheck();
-        });
         if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: jsx("div", { class: "xnote-table-container", children: jsxs("table", { class: [
-                            'xnote-table-content',
-                            {
-                                'hide-selection': props.component.tableSelection()
-                            }
-                        ], children: [jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                    return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                }) }), jsx("tbody", { children: rows.map((row) => {
-                                    return (jsx("tr", { children: row.cells.map(cell => {
-                                            return adapter.slotRender(cell.slot, children => {
-                                                return createVNode('td', {
-                                                    key: cell.slot.id
-                                                }, children);
-                                            }, readonly() || output());
-                                        }) }, rowMapping.get(row)));
-                                }) })] }) }) }));
-        }
-        return (jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, component: props.component, scrollRef: scrollRef }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
-                                    'xnote-table-content',
-                                    {
-                                        'hide-selection': props.component.tableSelection()
-                                    }
-                                ], children: [jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                            return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                        }) }), jsx("tbody", { children: rows.map((row) => {
-                                            return (jsx("tr", { children: row.cells.map(cell => {
-                                                    return adapter.slotRender(cell.slot, children => {
-                                                        return createVNode('td', {
-                                                            key: cell.slot.id
-                                                        }, children);
-                                                    }, readonly() || output());
-                                                }) }, rowMapping.get(row)));
-                                        }) })] }), jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
-                                    isResizeColumn.set(isActive);
-                                } }), jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }));
+            return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsx("div", { class: "xnote-table-container", children: jsxs("table", { class: [
+                                'xnote-table-content',
+                                {
+                                    'hide-selection': props.component.tableSelection()
+                                }
+                            ], children: [jsx("colgroup", { children: layoutWidth().map(w => {
+                                        return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                    }) }), jsx("tbody", { children: rows.map((row) => {
+                                        return (jsx("tr", { children: row.cells.map(cell => {
+                                                return adapter.slotRender(cell.slot, children => {
+                                                    return createVNode('td', {
+                                                        key: cell.slot.id
+                                                    }, children);
+                                                }, readonly() || output());
+                                            }) }, rowMapping.get(row)));
+                                    }) })] }) }) }) }));
+        }
+        return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
+                                        'xnote-table-content',
+                                        {
+                                            'hide-selection': props.component.tableSelection()
+                                        }
+                                    ], children: [jsx("colgroup", { children: layoutWidth().map(w => {
+                                                return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                            }) }), jsx("tbody", { children: rows.map((row) => {
+                                                return (jsx("tr", { children: row.cells.map(cell => {
+                                                        return adapter.slotRender(cell.slot, children => {
+                                                            return createVNode('td', {
+                                                                key: cell.slot.id
+                                                            }, children);
+                                                        }, readonly() || output());
+                                                    }) }, rowMapping.get(row)));
+                                            }) })] }), jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
+                                        isResizeColumn.set(isActive);
+                                    } }), jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }) }));
     };
 });
 const tableComponentLoader = {
@@ -4594,10 +5388,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) {
@@ -4615,6 +5410,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new Slot([
                         ContentType.BlockComponent,
+                        ContentType.InlineComponent,
+                        ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4640,6 +5437,8 @@ const tableComponentLoader = {
                     });
                     const delta = slotParser(new Slot([
                         ContentType.BlockComponent,
+                        ContentType.InlineComponent,
+                        ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
                     results.forEach(i => {
@@ -4735,6 +5534,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 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 = Selection.compareSelectionPaths(focusPaths, anchorPaths);
+        let startSlot;
+        let endSlot;
+        if (focusIsStart) {
+            startSlot = focusSlot;
+            endSlot = anchorSlot;
+        }
+        else {
+            startSlot = anchorSlot;
+            endSlot = focusSlot;
+        }
+        const commonAncestorComponent = 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([
+    Injectable(),
+    __metadata("design:paramtypes", [DomAdapter,
+        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 Textbus {
     constructor(editorConfig = {}) {
         const adapter = new ViewflyAdapter({
@@ -4747,13 +5628,15 @@ class Editor extends 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 ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
                     useValue: false
                 }]);
-            const app = createApp(root, {
+            const app = createApp(jsxs(Fragment, { children: [root, jsx(LinkJump, {})] }), {
                 context: appInjector
             }).mount(host);
             return () => {
@@ -4762,16 +5645,18 @@ class Editor extends Textbus {
         });
         const browserModule = new BrowserModule(Object.assign({ renderTo: () => {
                 return this.host;
-            }, adapter, componentLoaders: [
+            }, useContentEditable: isMobileBrowser(), adapter, componentLoaders: [
+                atComponentLoader,
                 sourceCodeComponentLoader,
+                listComponentLoader,
                 tableComponentLoader,
                 imageComponentLoader,
-                videoComponentLoader,
                 highlightBoxComponentLoader,
                 blockquoteComponentLoader,
-                paragraphComponentLoader,
+                videoComponentLoader,
                 todolistComponentLoader,
-                listComponentLoader,
+                katexComponentLoader,
+                paragraphComponentLoader,
             ], formatLoaders: [
                 backgroundColorFormatLoader,
                 boldFormatLoader,
@@ -4791,6 +5676,10 @@ class Editor extends Textbus {
         const modules = [browserModule];
         if (editorConfig.collaborateConfig) {
             modules.push(new CollaborateModule(editorConfig.collaborateConfig));
+            browserModule.providers.push({
+                provide: CollaborateSelectionAwarenessDelegate,
+                useClass: TableSelectionAwarenessDelegate
+            });
         }
         const vDomAdapter = new ViewflyVDomAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
@@ -4802,7 +5691,9 @@ class Editor extends 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 ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -4831,7 +5722,9 @@ class Editor extends Textbus {
                 TableComponent,
                 HighlightBoxComponent,
                 ListComponent,
-                VideoComponent
+                VideoComponent,
+                AtComponent,
+                KatexComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
@@ -4859,6 +5752,9 @@ class Editor extends Textbus {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
+                registerAtShortcut(textbus);
+                registerListShortcut(textbus);
+                registerBlockquoteShortcut(textbus);
             } }, editorConfig));
         this.editorConfig = editorConfig;
         this.translator = new OutputTranslator();
@@ -4871,9 +5767,22 @@ class Editor extends Textbus {
         if (config.content) {
             const parser = this.get(Parser);
             const doc = parser.parseDoc(config.content, rootComponentLoader);
-            rootComp = doc instanceof Component ? doc : new RootComponent(this, {
-                content: doc
-            });
+            if (doc instanceof Component) {
+                rootComp = doc;
+            }
+            else {
+                const content = new Slot([
+                    ContentType.BlockComponent
+                ]);
+                if (doc instanceof Slot) {
+                    deltaToBlock(doc.toDelta(), this).forEach(i => {
+                        content.insert(i);
+                    });
+                }
+                rootComp = new RootComponent(this, {
+                    content
+                });
+            }
         }
         else {
             rootComp = new RootComponent(this, {
@@ -4887,4 +5796,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };