@textbus/xnote 0.0.1-alpha.5 → 0.0.1-alpha.50

package/bundles/index.js

@@ -8,10 +8,12 @@ var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
 var highlightjs = require('highlight.js');
+var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
+var color = require('@tanbo/color');
 var collaborate = require('@textbus/collaborate');
 
-var css$j = undefined;
+var scopedId$n = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -30,6 +32,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -41,16 +55,6 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -83,7 +87,7 @@ exports.DropdownContextService = DropdownContextService_1 = class DropdownContex
         this.canHide = true;
         this.openStateChangeEvent = new core$1.Subject();
         this.timer = null;
-        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, core.InjectFlags.SkipSelf, null);
+        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, core.InjectFlags.SkipSelf);
         this.onOpenStateChange = this.openStateChangeEvent.asObservable();
         dropdownService.onSiblingOpen.subscribe(id => {
             if (id === this.id) {
@@ -132,7 +136,7 @@ exports.DropdownContextService = DropdownContextService_1 = __decorate([
 ], exports.DropdownContextService);
 
 function Button(props) {
-    const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService, null);
     const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -142,7 +146,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(css$j, () => {
+    return scopedCss.withScopedCSS(scopedId$n, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -154,10 +158,10 @@ function Button(props) {
     });
 }
 
-var css$i = undefined;
+var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(css$i, () => {
+    return scopedCss.withScopedCSS(scopedId$m, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -167,15 +171,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var css$h = undefined;
+var scopedId$l = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(css$h, () => {
+    return scopedCss.withScopedCSS(scopedId$l, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var style = undefined;
+var scopedId$k = "vf-8abf2c";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -196,7 +200,7 @@ function DragResize(props) {
         isShow.set(true);
         const width = ref.current.offsetWidth;
         const height = ref.current.offsetHeight;
-        mask.current.innerText = `${Math.round(width)}px * ${Math.round(height)}px`;
+        sizeText.set(`${Math.round(width)}px * ${Math.round(height)}px`);
     });
     function selectComponent() {
         selection.selectComponent(component, true);
@@ -273,7 +277,7 @@ function DragResize(props) {
             }
             ele.style.width = endWidth + 'px';
             ele.style.height = endHeight + 'px';
-            mask.current.innerText = `${Math.round(endWidth)}px * ${Math.round(endHeight)}px`;
+            sizeText.set(`${Math.round(endWidth)}px * ${Math.round(endHeight)}px`);
         });
         const unUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
             component.state.width = endWidth + 'px';
@@ -283,16 +287,17 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(style, () => {
+    const sizeText = core.createSignal(`${component.state.width}*${component.state.height}`);
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
-                        }], children: [jsxRuntime.jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
+                        }], children: [jsxRuntime.jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var css$g = undefined;
+var scopedId$j = "vf-a99c5e";
 
-var css$f = undefined;
+var scopedId$i = "vf-8a05e9";
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -300,11 +305,14 @@ const DropdownMenuPortal = core.withAnnotation({
     ]
 }, function DropdownMenuPortal(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
     const menuRef = core.createRef();
     let timer = null;
     const delay = 10;
-    core.onMounted(() => {
+    function update() {
         const menuElement = menuRef.current;
+        menuElement.style.height = 'auto';
+        const containerRect = container.getBoundingClientRect();
         if (props.abreast) {
             const btnEle = props.triggerRef.current;
             const screenHeight = document.documentElement.clientHeight;
@@ -319,19 +327,19 @@ const DropdownMenuPortal = core.withAnnotation({
             else if (offsetTop + maxHeight > screenHeight - 10) {
                 offsetTop = screenHeight - 10 - maxHeight;
             }
-            menuElement.style.top = offsetTop + 'px';
+            menuElement.style.top = offsetTop - containerRect.top + 'px';
             const triggerRect = props.triggerRef.current.getBoundingClientRect();
             const leftDistance = triggerRect.left;
             const isToLeft = leftDistance >= menuElement.offsetWidth + 20;
-            if (isToLeft) {
-                menuElement.style.left = leftDistance - menuElement.offsetWidth - 20 + 'px';
+            if (isToLeft && props.toLeft) {
+                menuElement.style.left = leftDistance - menuElement.offsetWidth - 20 - containerRect.left + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateX(10px)';
                     menuElement.style.opacity = '1';
                 }, delay);
             }
             else {
-                menuElement.style.left = triggerRect.right + 20 + 'px';
+                menuElement.style.left = triggerRect.right + 20 - containerRect.left + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateX(-10px)';
                     menuElement.style.opacity = '1';
@@ -343,12 +351,12 @@ const DropdownMenuPortal = core.withAnnotation({
             const documentClientHeight = document.documentElement.clientHeight;
             const bottomDistance = documentClientHeight - triggerRect.bottom;
             const isToTop = bottomDistance < 200 && triggerRect.top > bottomDistance;
-            menuElement.style.left = triggerRect.left + 'px';
+            menuElement.style.left = triggerRect.left - containerRect.left + 'px';
             if (isToTop) {
                 const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
-                const height = Math.min(triggerRect.top - 20, maxHeight);
+                const height = Math.min(triggerRect.top - 20, maxHeight, 400);
                 menuElement.style.height = height + 'px';
-                menuElement.style.top = triggerRect.top - 20 - height + 'px';
+                menuElement.style.top = triggerRect.top - 20 - height - containerRect.top + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateY(10px)';
                     menuElement.style.opacity = '1';
@@ -356,30 +364,41 @@ const DropdownMenuPortal = core.withAnnotation({
             }
             else {
                 menuElement.style.height = Math.min(bottomDistance - 20, menuElement.scrollHeight) + 'px';
-                menuElement.style.top = triggerRect.bottom + 20 + 'px';
+                menuElement.style.top = triggerRect.bottom + 20 - containerRect.top + 'px';
                 timer = setTimeout(() => {
                     menuElement.style.transform = 'translateY(-10px)';
                     menuElement.style.opacity = '1';
                 }, delay);
             }
         }
+    }
+    core.onUpdated(() => {
+        update();
     });
     core.onUnmounted(() => {
         clearTimeout(timer);
     });
     function onEnter() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = false;
         dropdownContextService.open();
     }
     function onLeave() {
+        if (props.noTrigger) {
+            return;
+        }
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(css$f, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$i, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
-            }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
-    }), document.body);
+            }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
+                    padding: props.padding
+                }, children: props.children }) }));
+    }), container);
 });
 
 const Dropdown = core.withAnnotation({
@@ -407,6 +426,9 @@ const Dropdown = core.withAnnotation({
     });
     const subscription = new core$1.Subscription();
     core.onMounted(() => {
+        if (props.trigger === 'none') {
+            return;
+        }
         if (props.trigger === 'click') {
             subscription.add(core$1.fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
@@ -432,14 +454,14 @@ const Dropdown = core.withAnnotation({
     return {
         isShow(b) {
             if (b) {
-                dropdownContextService.hide(false);
+                dropdownContextService.open();
             }
             else {
-                dropdownContextService.open();
+                dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(css$g, () => {
-            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
+        $render: scopedCss.withScopedCSS(scopedId$j, () => {
+            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
                                         var _a;
@@ -454,10 +476,54 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var css$e = undefined;
+var scopedId$h = "vf-c32a7b";
+
+function Keymap(props) {
+    const arr = [];
+    const keymap = props.keymap;
+    if (keymap.ctrlKey) {
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-command" }) : jsxRuntime.jsx("span", { children: "Ctrl" }));
+    }
+    if (keymap.shiftKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-shift" }) : jsxRuntime.jsx("span", { children: "Shift" }));
+    }
+    if (keymap.altKey) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-opt" }) : jsxRuntime.jsx("span", { children: "Alt" }));
+    }
+    if (keymap.key) {
+        if (arr.length) {
+            arr.push('+');
+        }
+        if (Array.isArray(keymap.key)) {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key.join('/') }));
+        }
+        else {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
+        }
+    }
+    return scopedCss.withScopedCSS(scopedId$h, () => {
+        return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
+    });
+}
+
+var scopedId$g = "vf-acaa5f";
+
+function MenuHeading(props) {
+    return scopedCss.withScopedCSS(scopedId$g, () => {
+        return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
+    });
+}
+
+var scopedId$f = "vf-c3b9dc";
 
 function MenuItem(props) {
-    const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService, null);
     const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
     if (dropdownContextService) {
         const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -474,8 +540,8 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(css$e, () => {
-        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
+    return scopedCss.withScopedCSS(scopedId$f, () => {
+        return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { class: "menu-item-content", children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsxRuntime.jsx("div", { children: props.desc })] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
                             'menu-check',
@@ -484,11 +550,11 @@ function MenuItem(props) {
     });
 }
 
-var css$d = undefined;
+var scopedId$e = "vf-a23c47";
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(css$d, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$e, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -496,15 +562,15 @@ function Popup(props) {
     }), host);
 }
 
-var css$c = undefined;
+var scopedId$d = "vf-216815";
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(css$c, () => {
+    return scopedCss.withScopedCSS(scopedId$d, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var css$b = undefined;
+var scopedId$c = "vf-2a8a65";
 
 exports.RefreshService = class RefreshService {
     constructor() {
@@ -560,108 +626,432 @@ function useReadonly() {
     return is;
 }
 
-class ParagraphComponent extends core$1.Component {
+const OutputInjectionToken = new core.InjectionToken('OutputInjectionToken');
+
+function useOutput() {
+    return core.createSignal(core.inject(OutputInjectionToken));
+}
+
+const headingAttr = new core$1.Attribute('Heading', {
+    render(node, formatValue) {
+        node.classes.add('xnote-' + formatValue);
+    }
+});
+const headingAttrLoader = {
+    match(element) {
+        return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
+    },
+    read(element) {
+        if (/H[1-6]/.test(element.tagName)) {
+            return {
+                attribute: headingAttr,
+                value: element.tagName.toLowerCase()
+            };
+        }
+        return {
+            attribute: headingAttr,
+            value: element.className.substring(6)
+        };
+    }
+};
+function registerHeadingShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    const commander = textbus.get(core$1.Commander);
+    const selection = textbus.get(core$1.Selection);
+    keyboard.addShortcut({
+        keymap: {
+            key: '0123456'.split(''),
+            ctrlKey: true
+        },
+        action(key) {
+            if (key === '0') {
+                commander.unApplyAttribute(headingAttr);
+                return;
+            }
+            commander.applyAttribute(headingAttr, 'h' + key);
+        }
+    });
+    keyboard.addZenCodingInterceptor({
+        match(content) {
+            return /^#{1,6}$/.test(content);
+        },
+        try(key) {
+            return key === ' ';
+        },
+        action(content) {
+            if (selection.commonAncestorComponent instanceof SourceCodeComponent) {
+                return false;
+            }
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            commonAncestorSlot.cut();
+            commander.applyAttribute(headingAttr, 'h' + content.length);
+            selection.setPosition(commonAncestorSlot, 0);
+            return true;
+        }
+    });
+}
+
+function useBlockContent(slot) {
+    const textbus = core$1.useContext();
+    const selection = textbus.get(core$1.Selection);
+    core$1.onBreak(ev => {
+        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
+            const p = new ParagraphComponent(textbus);
+            ev.target.insert(p);
+            selection.setPosition(p.state.slot, 0);
+            ev.preventDefault();
+        }
+    });
+    core$1.onContentInsert(ev => {
+        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
+            (typeof ev.data.content === 'string' || ev.data.content.type !== core$1.ContentType.BlockComponent)) {
+            const p = new ParagraphComponent(textbus);
+            const childSlot = p.state.slot;
+            childSlot.insert(ev.data.content);
+            ev.target.insert(p);
+            selection.setPosition(childSlot, childSlot.index);
+            ev.preventDefault();
+        }
+    });
+}
+
+function SlotRender(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const instance = core.getCurrentInstance();
+    const slot = props.slot;
+    const sub = core$1.merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+        if (props.slot.__changeMarker__.dirty) {
+            instance.markAsDirtied();
+        }
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
+        return adapter.slotRender(slot, children => {
+            return core$1.createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
+        }, renderEnv);
+    };
+}
+
+class BlockquoteComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new ParagraphComponent(textbus, {
+        return new BlockquoteComponent(textbus, {
             slot
         });
     }
     constructor(textbus, state = {
         slot: new core$1.Slot([
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
+            core$1.ContentType.BlockComponent
         ])
     }) {
         super(textbus, state);
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
-        const injector = core$1.useContext();
-        const commander = injector.get(core$1.Commander);
-        const selection = injector.get(core$1.Selection);
-        core$1.onBreak(ev => {
-            const afterSlot = ev.target.cut(ev.data.index);
-            const nextParagraph = new ParagraphComponent(injector, {
-                slot: afterSlot
-            });
-            commander.insertAfter(nextParagraph, this);
-            selection.setPosition(afterSlot, 0);
-            ev.preventDefault();
+        useBlockContent(this.state.slot);
+    }
+}
+BlockquoteComponent.type = core$1.ContentType.BlockComponent;
+BlockquoteComponent.componentName = 'BlockquoteComponent';
+BlockquoteComponent.zenCoding = {
+    key: ' ',
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^>$/.test(content);
+        }
+        return false;
+    },
+    createState(_, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
+        return {
+            slot
+        };
+    }
+};
+function toBlockquote(textbus) {
+    const query = textbus.get(core$1.Query);
+    const commander = textbus.get(core$1.Commander);
+    const selection = textbus.get(core$1.Selection);
+    const state = query.queryComponent(BlockquoteComponent);
+    if (state.state === core$1.QueryStateType.Enabled) {
+        const current = state.value;
+        const parent = current.parent;
+        const index = parent.indexOf(current);
+        parent.retain(index);
+        commander.removeComponent(current);
+        current.slots.at(0).sliceContent().forEach(i => {
+            parent.insert(i);
         });
     }
+    else {
+        const block = new BlockquoteComponent(textbus);
+        const slot = block.state.slot;
+        if (selection.startSlot === selection.endSlot) {
+            const parentComponent = selection.startSlot.parent;
+            const parentSlot = parentComponent.parent;
+            const position = parentSlot.indexOf(parentComponent);
+            slot.insert(parentComponent);
+            parentSlot.retain(position);
+            parentSlot.insert(block);
+        }
+        else {
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const scope = selection.getCommonAncestorSlotScope();
+            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
+                slot.insert(i);
+            });
+            commonAncestorSlot.retain(scope.startOffset);
+            commonAncestorSlot.insert(block);
+        }
+    }
 }
-ParagraphComponent.componentName = 'ParagraphComponent';
-ParagraphComponent.type = core$1.ContentType.BlockComponent;
-function ParagraphView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
+function registerBlockquoteShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            ctrlKey: true,
+            key: '\''
+        },
+        action() {
+            toBlockquote(textbus);
+        }
+    });
+}
+function BlockquoteView(props) {
     const readonly = useReadonly();
+    const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
-                return (core$1.createVNode('p', null, children));
-            }, readonly()) }));
+        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
     };
 }
-const paragraphComponentLoader = {
-    match(element) {
-        return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
+const blockquoteComponentLoader = {
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && element.tagName === 'BLOCKQUOTE';
     },
     read(element, textbus, slotParser) {
         const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.Text,
+            core$1.ContentType.BlockComponent,
             core$1.ContentType.InlineComponent,
-            core$1.ContentType.BlockComponent
-        ]), /P|H[1-6]/.test(element.tagName) ? element : element.children[0]).toDelta();
-        const results = deltaToBlock(delta, textbus);
-        if (results.length === 1) {
-            return results[0];
-        }
-        const containerSlot = new core$1.Slot([
-            core$1.ContentType.BlockComponent
+            core$1.ContentType.Text
+        ]), element).toDelta();
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent,
         ]);
-        results.forEach(item => {
-            containerSlot.insert(item);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
         });
-        return containerSlot;
-    }
+        return new BlockquoteComponent(textbus, {
+            slot
+        });
+    },
 };
-function deltaToBlock(delta, textbus) {
-    const results = [];
-    let slot = null;
-    for (const item of delta) {
-        if (typeof item.insert === 'string' || item.insert.type === core$1.ContentType.InlineComponent) {
-            if (!slot) {
-                slot = new core$1.Slot([
-                    core$1.ContentType.InlineComponent,
-                    core$1.ContentType.Text
-                ]);
-                delta.attributes.forEach((value, key) => {
-                    slot.setAttribute(key, value);
-                });
-                results.push(new ParagraphComponent(textbus, {
-                    slot
-                }));
-            }
-            slot.insert(item.insert, item.formats);
-        }
-        else {
-            results.push(item.insert);
-            slot = null;
-        }
-    }
-    return results;
-}
-
-const OutputInjectionToken = new core.InjectionToken('OutputInjectionToken');
 
-function useOutput() {
-    return core.createSignal(core.inject(OutputInjectionToken));
-}
-
-const languageList = [{
-        label: 'JavaScript',
-        value: 'JavaScript',
-    }, {
+class HighlightBoxComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new HighlightBoxComponent(textbus, {
+            type: json.type,
+            slot: textbus.get(core$1.Registry).createSlot(json.slot)
+        });
+    }
+    constructor(textbus, state = {
+        type: '',
+        slot: new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+        ])
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    setup() {
+        useBlockContent(this.state.slot);
+    }
+}
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
+function HighlightBoxView(props) {
+    const readonly = useReadonly();
+    const output = useOutput();
+    const emoji = [];
+    for (let i = 0x1F600; i <= 0x1F64F; i++) {
+        emoji.push(i);
+    }
+    const dropdownRef = core.createRef();
+    function setType(type) {
+        var _a;
+        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        props.component.state.type = type;
+    }
+    return () => {
+        const { state, name } = props.component;
+        if (readonly() || output()) {
+            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+        }
+        return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
+                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                }), jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
+                                    const icon = String.fromCodePoint(i);
+                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
+                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+    };
+}
+const highlightBoxComponentLoader = {
+    match(element) {
+        return element.tagName === 'DIV' && element.dataset.component === HighlightBoxComponent.componentName;
+    },
+    read(element, textbus, slotParser) {
+        const delta = slotParser(new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
+        const slot = new core$1.Slot([
+            core$1.ContentType.BlockComponent,
+        ]);
+        deltaToBlock(delta, textbus).forEach(i => {
+            slot.insert(i);
+        });
+        return new HighlightBoxComponent(textbus, {
+            type: element.dataset.icon || '',
+            slot
+        });
+    }
+};
+
+class ParagraphComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        const slot = textbus.get(core$1.Registry).createSlot(json.slot);
+        return new ParagraphComponent(textbus, {
+            slot
+        });
+    }
+    constructor(textbus, state = {
+        slot: new core$1.Slot([
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ])
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [this.state.slot];
+    }
+    setup() {
+        const injector = core$1.useContext();
+        const commander = injector.get(core$1.Commander);
+        const selection = injector.get(core$1.Selection);
+        core$1.onBreak(ev => {
+            const isEmpty = this.state.slot.isEmpty;
+            const afterSlot = ev.target.cut(ev.data.index);
+            afterSlot.removeAttribute(headingAttr);
+            const nextParagraph = new ParagraphComponent(injector, {
+                slot: afterSlot
+            });
+            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();
+        });
+    }
+}
+ParagraphComponent.componentName = 'ParagraphComponent';
+ParagraphComponent.type = core$1.ContentType.BlockComponent;
+function ParagraphView(props) {
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        const slot = props.component.state.slot;
+        return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsxRuntime.jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
+    };
+}
+const paragraphComponentLoader = {
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && (element.dataset.component === ParagraphComponent.componentName || /^P|H[1-6]$/.test(element.tagName));
+    },
+    read(element, textbus, slotParser) {
+        let content;
+        if (/^P|H[1-6]$/.test(element.tagName)) {
+            content = element;
+        }
+        else {
+            content = element.children[0];
+            if (!content) {
+                const p = document.createElement('p');
+                p.append(element.innerText);
+                content = p;
+            }
+        }
+        const delta = slotParser(new core$1.Slot([
+            core$1.ContentType.Text,
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.BlockComponent
+        ]), content).toDelta();
+        const results = deltaToBlock(delta, textbus);
+        if (results.length === 1) {
+            return results[0];
+        }
+        const containerSlot = new core$1.Slot([
+            core$1.ContentType.BlockComponent
+        ]);
+        results.forEach(item => {
+            containerSlot.insert(item);
+        });
+        return containerSlot;
+    }
+};
+function deltaToBlock(delta, textbus) {
+    const results = [];
+    let slot = null;
+    for (const item of delta) {
+        if (typeof item.insert === 'string' || item.insert.type === core$1.ContentType.InlineComponent) {
+            if (!slot) {
+                slot = new core$1.Slot([
+                    core$1.ContentType.InlineComponent,
+                    core$1.ContentType.Text
+                ]);
+                delta.attributes.forEach((value, key) => {
+                    slot.setAttribute(key, value);
+                });
+                results.push(new ParagraphComponent(textbus, {
+                    slot
+                }));
+            }
+            slot.insert(item.insert, item.formats);
+        }
+        else {
+            results.push(item.insert);
+            slot = null;
+        }
+    }
+    return results;
+}
+
+const languageList = [{
+        label: 'JavaScript',
+        value: 'JavaScript',
+    }, {
         label: 'HTML',
         value: 'HTML',
     }, {
@@ -688,6 +1078,15 @@ const languageList = [{
     }, {
         label: 'Go',
         value: 'Go'
+    }, {
+        label: 'Kotlin',
+        value: 'kotlin'
+    }, {
+        label: 'Python',
+        value: 'python'
+    }, {
+        label: 'PHP',
+        value: 'php'
     }, {
         label: 'JSON',
         value: 'JSON',
@@ -712,6 +1111,9 @@ const languageList = [{
     }, {
         label: 'Shell',
         value: 'shell',
+    }, {
+        label: 'Katex',
+        value: 'latex',
     }, {
         label: 'Yaml',
         value: 'yaml',
@@ -730,11 +1132,16 @@ const languageList = [{
     }, {
         label: 'Dart',
         value: 'dart',
+    }, {
+        label: 'Rust',
+        value: 'rust',
     }, {
         label: '',
         value: '',
     }];
 const sourceCodeThemes = [
+    'xnote-dark',
+    'xnote-dark-blue',
     'github',
     'atom-one-dark',
     'foundation',
@@ -790,12 +1197,17 @@ class SourceCodeComponent extends core$1.Component {
             theme: json.theme
         });
     }
+    getSlots() {
+        return this.state.slots.map(i => i.slot);
+    }
     setup() {
         const textbus = core$1.useContext();
         const selection = core$1.useContext(core$1.Selection);
         core$1.onBreak(ev => {
             const slots = this.state.slots;
-            if (ev.target.isEmpty && ev.target === slots[slots.length - 1].slot) {
+            const parentComponent = selection.commonAncestorComponent;
+            const parentSlot = parentComponent.parent;
+            if (parentSlot && ev.target.isEmpty && ev.target === slots[slots.length - 1].slot) {
                 const prevSlot = slots[slots.length - 2];
                 if (prevSlot === null || prevSlot === void 0 ? void 0 : prevSlot.slot.isEmpty) {
                     const slot = new core$1.Slot([
@@ -805,8 +1217,6 @@ class SourceCodeComponent extends core$1.Component {
                     const paragraph = new ParagraphComponent(textbus, {
                         slot
                     });
-                    const parentComponent = selection.commonAncestorComponent;
-                    const parentSlot = parentComponent.parent;
                     const index = parentSlot.indexOf(parentComponent);
                     parentSlot.retain(index + 1);
                     slots.pop();
@@ -834,6 +1244,12 @@ class SourceCodeComponent extends core$1.Component {
             });
             ev.preventDefault();
         });
+        core$1.onSlotApplyFormat(ev => {
+            ev.preventDefault();
+        });
+        core$1.onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
         core$1.onPaste(ev => {
             const codeList = [];
             const sourceCode = ev.data.text;
@@ -911,7 +1327,7 @@ class SourceCodeComponent extends core$1.Component {
             },
             action() {
                 if (selection.isCollapsed) {
-                    commander.insert(' ');
+                    commander.insert('  ');
                     return;
                 }
                 const blocks = selection.getBlocks();
@@ -957,11 +1373,15 @@ class SourceCodeComponent extends core$1.Component {
 SourceCodeComponent.type = core$1.ContentType.BlockComponent;
 SourceCodeComponent.componentName = 'SourceCodeComponent';
 SourceCodeComponent.zenCoding = {
-    key: 'Enter',
-    match(c) {
-        const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
-        const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
-        return reg.test(c);
+    key: ['Enter', ' '],
+    match(c, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
+            const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
+            return reg.test(c);
+        }
+        return false;
     },
     createState(content) {
         const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
@@ -1028,7 +1448,7 @@ function SourceCodeView(props) {
     }
     const input = core.inject(platformBrowser.Input);
     function updateCaret() {
-        input.caret.refresh(false);
+        input.caret.refresh();
     }
     const readonly = useReadonly();
     const output = useOutput();
@@ -1065,33 +1485,11 @@ function SourceCodeView(props) {
                 }
             }
         }
-        function nodesToVNodes(slot, nodes, index) {
-            return nodes.map(i => {
-                const location = {
-                    slot,
-                    startIndex: index,
-                    endIndex: index + i.textContent.length
-                };
-                if (i.nodeType === Node.ELEMENT_NODE) {
-                    const childNodes = Array.from(i.childNodes);
-                    const vEle = core$1.createVNode('span', {
-                        class: i.className
-                    }, nodesToVNodes(slot, childNodes, index));
-                    index = location.endIndex;
-                    vEle.location = Object.assign({}, location);
-                    return vEle;
-                }
-                index = location.endIndex;
-                const textNode = new core$1.VTextNode(i.textContent);
-                textNode.location = location;
-                return textNode;
-            });
-        }
         return (jsxRuntime.jsxs("div", { ref: props.rootRef, class: {
                 'xnote-source-code': true,
                 'xnote-source-code-line-number': state.lineNumber,
                 [state.theme || 'github']: true
-            }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [(!readonly() && !output()) && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
+            }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak + '', "data-theme": state.theme || null, "data-line-number": state.lineNumber + '', children: [(!readonly() && !output()) && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
                                     return {
                                         label: jsxRuntime.jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
                                         value: item.value
@@ -1117,7 +1515,7 @@ function SourceCodeView(props) {
                         }
                     ], children: [jsxRuntime.jsx("div", { class: "xnote-source-code-line-number-bg", style: {
                                 width: Math.max(String(slots.length).length, 2.5) + 'em'
-                            } }), jsxRuntime.jsx("div", { onScroll: updateCaret, class: {
+                            } }), jsxRuntime.jsx("pre", { onScroll: updateCaret, class: {
                                 'xnote-source-code-content': true,
                                 'xnote-source-code-content-highlight': blockHighlight
                             }, style: {
@@ -1138,7 +1536,7 @@ function SourceCodeView(props) {
                                             children.push(br);
                                         }
                                     }
-                                    return core$1.createVNode('pre', {
+                                    return core$1.createVNode('div', {
                                         class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
                                     }, [
                                         core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
@@ -1147,10 +1545,33 @@ function SourceCodeView(props) {
                             }) }), jsxRuntime.jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
     };
 }
+function nodesToVNodes(slot, nodes, index) {
+    return nodes.map(i => {
+        const location = {
+            slot,
+            startIndex: index,
+            endIndex: index + i.textContent.length
+        };
+        if (i.nodeType === Node.ELEMENT_NODE) {
+            const childNodes = Array.from(i.childNodes);
+            const vEle = core$1.createVNode('span', {
+                class: i.className
+            }, nodesToVNodes(slot, childNodes, index));
+            index = location.endIndex;
+            vEle.location = Object.assign({}, location);
+            return vEle;
+        }
+        index = location.endIndex;
+        const textNode = new core$1.VTextNode(i.textContent);
+        textNode.location = location;
+        return textNode;
+    });
+}
 const sourceCodeComponentLoader = {
-    match(element) {
-        return element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName ||
-            element.tagName === 'PRE';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
     read(el, textbus) {
         let slots = [];
@@ -1178,8 +1599,8 @@ const sourceCodeComponentLoader = {
         return new SourceCodeComponent(textbus, {
             lang: el.dataset.lang || '',
             theme: el.dataset.theme || '',
-            lineNumber: !!el.dataset.lineNumber || true,
-            autoBreak: !!el.dataset.autoBreak || true,
+            lineNumber: el.dataset.lineNumber === 'true',
+            autoBreak: el.dataset.autoBreak === 'true',
             slots
         });
     },
@@ -1278,15 +1699,26 @@ function AttrTool(props) {
         textIndent: 0
     });
     function updateCheckStates() {
-        var _a, _b;
-        (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
+        if (!props.slot && !selection.isSelected) {
+            return;
+        }
         setCheckStates(draft => {
-            const textAlignState = query.queryAttribute(textAlignAttr);
-            const textIndentState = query.queryAttribute(textIndentAttr);
+            const range = props.slot ? {
+                startSlot: props.slot,
+                endSlot: props.slot,
+                startOffset: 0,
+                endOffset: props.slot.length
+            } : {
+                startSlot: selection.startSlot,
+                startOffset: selection.startOffset,
+                endSlot: selection.endSlot,
+                endOffset: selection.endOffset
+            };
+            const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
+            const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
             draft.textAlign = textAlignState.state === core$1.QueryStateType.Enabled ? textAlignState.value : 'left';
             draft.textIndent = textIndentState.state === core$1.QueryStateType.Enabled ? textIndentState.value : 0;
         });
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
@@ -1333,150 +1765,84 @@ function AttrTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(css$b, () => {
+    return scopedCss.withScopedCSS(scopedId$c, () => {
         const states = checkStates();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
+        return (jsxRuntime.jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
                     value: ''
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'Tab' } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-increase" }), children: "\u589E\u52A0\u7F29\u8FDB" }),
                     value: 'i+'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'Tab', shiftKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u51CF\u5C11\u7F29\u8FDB" }),
                     value: 'i-'
                 }
             ], children: props.children || jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: `xnote-icon-paragraph-${states.textAlign || 'left'} icon` }) }) }));
     });
 }
 
-const headingAttr = new core$1.Attribute('Heading', {
-    render(node, formatValue) {
-        node.classes.add('xnote-' + formatValue);
+const defaultRowHeight = 30;
+const defaultColumnWidth = 100;
+class TableComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        const registry = textbus.get(core$1.Registry);
+        return new TableComponent(textbus, {
+            layoutWidth: json.layoutWidth || [],
+            rows: json.rows.map(row => {
+                return {
+                    height: row.height,
+                    cells: row.cells.map(cell => {
+                        return {
+                            colspan: cell.colspan,
+                            rowspan: cell.rowspan,
+                            slot: registry.createSlot(cell.slot)
+                        };
+                    })
+                };
+            })
+        });
     }
-});
-const headingAttrLoader = {
-    match(element) {
-        return /H[1-6]/.test(element.tagName);
-    },
-    read(element) {
-        return {
-            attribute: headingAttr,
-            value: element.tagName.toLowerCase()
-        };
+    constructor(textbus, state = {
+        layoutWidth: Array.from({ length: 5 }).fill(100),
+        rows: Array.from({ length: 3 }).map(() => {
+            return {
+                height: defaultRowHeight,
+                cells: Array.from({ length: 5 }).map(() => {
+                    const p = new ParagraphComponent(textbus);
+                    const slot = new core$1.Slot([core$1.ContentType.BlockComponent]);
+                    slot.insert(p);
+                    return {
+                        rowspan: 1,
+                        colspan: 1,
+                        slot
+                    };
+                })
+            };
+        })
+    }) {
+        super(textbus, state);
+        this.selection = this.textbus.get(core$1.Selection);
+        this.focus = new core$1.Subject();
+        this.tableSelection = core.createSignal(null);
     }
-};
-function registerHeadingShortcut(textbus) {
-    const keyboard = textbus.get(core$1.Keyboard);
-    const commander = textbus.get(core$1.Commander);
-    const selection = textbus.get(core$1.Selection);
-    keyboard.addShortcut({
-        keymap: {
-            key: '123456'.split(''),
-            ctrlKey: true
-        },
-        action(key) {
-            commander.applyAttribute(headingAttr, 'h' + key);
-        }
-    });
-    keyboard.addZenCodingInterceptor({
-        match(content) {
-            return /^#{1,6}$/.test(content);
-        },
-        try(key) {
-            return key === ' ';
-        },
-        action(content) {
-            const commonAncestorSlot = selection.commonAncestorSlot;
-            commonAncestorSlot.cut();
-            commander.applyAttribute(headingAttr, 'h' + content.length);
-            return true;
-        }
-    });
-}
-
-function useBlockContent(slot) {
-    const textbus = core$1.useContext();
-    const selection = textbus.get(core$1.Selection);
-    core$1.onBreak(ev => {
-        if (typeof slot === 'function' ? slot(ev.target) : ev.target === slot) {
-            const p = new ParagraphComponent(textbus);
-            ev.target.insert(p);
-            selection.setPosition(p.state.slot, 0);
-            ev.preventDefault();
-        }
-    });
-    core$1.onContentInsert(ev => {
-        if ((typeof slot === 'function' ? slot(ev.target) : ev.target === slot) &&
-            (typeof ev.data.content === 'string' || ev.data.content.type !== core$1.ContentType.BlockComponent)) {
-            const p = new ParagraphComponent(textbus);
-            const childSlot = p.state.slot;
-            childSlot.insert(ev.data.content);
-            ev.target.insert(p);
-            selection.setPosition(childSlot, childSlot.index);
-            ev.preventDefault();
-        }
-    });
-}
-
-const defaultRowHeight = 30;
-const defaultColumnWidth = 100;
-class TableComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        const registry = textbus.get(core$1.Registry);
-        return new TableComponent(textbus, {
-            layoutWidth: json.layoutWidth || [],
-            rows: json.rows.map(row => {
-                return {
-                    height: row.height,
-                    cells: row.cells.map(cell => {
-                        return {
-                            colspan: cell.colspan,
-                            rowspan: cell.rowspan,
-                            slot: registry.createSlot(cell.slot)
-                        };
-                    })
-                };
-            })
-        });
-    }
-    constructor(textbus, state = {
-        layoutWidth: Array.from({ length: 3 }).fill(100),
-        rows: Array.from({ length: 3 }).map(() => {
-            return {
-                height: defaultRowHeight,
-                cells: Array.from({ length: 3 }).map(() => {
-                    return {
-                        rowspan: 1,
-                        colspan: 1,
-                        slot: new core$1.Slot([
-                            core$1.ContentType.Text,
-                            core$1.ContentType.InlineComponent,
-                            core$1.ContentType.BlockComponent
-                        ])
-                    };
-                })
-            };
-        })
-    }) {
-        super(textbus, state);
-        this.selection = this.textbus.get(core$1.Selection);
-        this.focus = new core$1.Subject();
-        this.tableSelection = core.createSignal(null);
+    getSlots() {
+        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
     }
     setup() {
+        const selection = core$1.useContext(core$1.Selection);
         core$1.onFocusIn(() => {
             this.focus.next(true);
         });
@@ -1486,12 +1852,42 @@ class TableComponent extends core$1.Component {
         useBlockContent((slot) => {
             return slot.parent === this;
         });
-        core$1.onGetRanges(ev => {
-            const selectPosition = this.tableSelection();
+        const sub = selection.onChange.subscribe(() => {
+            if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
+                this.tableSelection.set(null);
+            }
+        });
+        core$1.onDestroy(() => {
+            sub.unsubscribe();
+        });
+        const findPosition = (slot) => {
+            let cell = slot;
+            while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
+                cell = cell.parentSlot;
+            }
+            if (cell) {
+                const rows = this.state.rows;
+                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                    const row = rows[rowIndex].cells;
+                    for (let colIndex = 0; colIndex < row.length; colIndex++) {
+                        const item = row[colIndex].slot;
+                        if (item === cell) {
+                            return {
+                                rowIndex,
+                                colIndex
+                            };
+                        }
+                    }
+                }
+            }
+            return null;
+        };
+        const select = (ev, selectPosition) => {
+            this.tableSelection.set(selectPosition);
             if (selectPosition) {
                 const cells = [];
-                this.state.rows.slice(selectPosition.startRow, selectPosition.endRow + 1).forEach(row => {
-                    cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn + 1).map(i => i.slot));
+                this.state.rows.slice(selectPosition.startRow, selectPosition.endRow).forEach(row => {
+                    cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn).map(i => i.slot));
                 });
                 ev.useRanges(cells.map(i => {
                     return {
@@ -1502,33 +1898,64 @@ class TableComponent extends core$1.Component {
                 }));
                 ev.preventDefault();
             }
-        });
-    }
-    afterContentCheck() {
-        const selection = this.selection;
-        const rows = this.state.rows;
-        rows.forEach(row => {
-            row.cells.forEach(cell => {
-                const slot = cell.slot;
-                if (slot.isEmpty) {
-                    const childSlot = new core$1.Slot([
-                        core$1.ContentType.Text,
-                        core$1.ContentType.InlineComponent
-                    ]);
-                    const p = new ParagraphComponent(this.textbus, {
-                        slot: childSlot
-                    });
-                    slot.insert(p);
-                    if (slot === selection.anchorSlot) {
-                        selection.setAnchor(childSlot, 0);
-                    }
-                    if (slot === selection.focusSlot) {
-                        selection.setFocus(childSlot, 0);
+        };
+        core$1.onGetRanges(ev => {
+            var _a;
+            const startPosition = findPosition(selection.startSlot);
+            const endPosition = findPosition(selection.endSlot);
+            if (startPosition && endPosition) {
+                if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
+                    if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
+                        select(ev, {
+                            startColumn: startPosition.colIndex,
+                            startRow: startPosition.rowIndex,
+                            endColumn: endPosition.colIndex + 1,
+                            endRow: endPosition.rowIndex + 1
+                        });
+                        return;
                     }
+                    select(ev, null);
+                    return;
                 }
-            });
+                const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
+                const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
+                select(ev, {
+                    startColumn,
+                    startRow,
+                    endColumn: endColumn + 1,
+                    endRow: endRow + 1
+                });
+            }
+            else {
+                select(ev, null);
+            }
         });
     }
+    // afterContentCheck() {
+    //   const selection = this.selection
+    //   const rows = this.state.rows
+    //   rows.forEach(row => {
+    //     row.cells.forEach(cell => {
+    //       const slot = cell.slot
+    //       if (slot.isEmpty) {
+    //         const childSlot = new Slot([
+    //           ContentType.Text,
+    //           ContentType.InlineComponent
+    //         ])
+    //         const p = new ParagraphComponent(this.textbus, {
+    //           slot: childSlot
+    //         })
+    //         slot.insert(p)
+    //         if (slot === selection.anchorSlot) {
+    //           selection.setAnchor(childSlot, 0)
+    //         }
+    //         if (slot === selection.focusSlot) {
+    //           selection.setFocus(childSlot, 0)
+    //         }
+    //       }
+    //     })
+    //   })
+    // }
     deleteColumn(index) {
         this.state.layoutWidth.splice(index, 1);
         this.state.rows.forEach(row => {
@@ -1545,8 +1972,6 @@ class TableComponent extends core$1.Component {
         this.state.rows.forEach(row => {
             const slot = new core$1.Slot([
                 core$1.ContentType.BlockComponent,
-                core$1.ContentType.InlineComponent,
-                core$1.ContentType.Text
             ]);
             slot.insert(new ParagraphComponent(this.textbus, {
                 slot: new core$1.Slot([
@@ -1574,8 +1999,6 @@ class TableComponent extends core$1.Component {
             cells: this.state.layoutWidth.map(() => {
                 const slot = new core$1.Slot([
                     core$1.ContentType.BlockComponent,
-                    core$1.ContentType.InlineComponent,
-                    core$1.ContentType.Text
                 ]);
                 slot.insert(new ParagraphComponent(this.textbus, {
                     slot: new core$1.Slot([
@@ -1637,7 +2060,7 @@ function registerStrikeThroughShortcut(textbus) {
 }
 const strikeThroughFormatLoader = {
     match(element) {
-        return /strike|del|s/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
+        return /^(strike|del|s)$/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
     },
     read() {
         return {
@@ -1655,12 +2078,16 @@ class TodolistComponent extends core$1.Component {
             checked: json.checked
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
         const selection = core$1.useContext(core$1.Selection);
         core$1.onBreak(ev => {
             const slot = ev.target.cut(ev.data.index);
+            slot.removeAttribute(headingAttr);
             if (ev.target.isEmpty && slot.isEmpty) {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1708,21 +2135,32 @@ class TodolistComponent extends core$1.Component {
 TodolistComponent.type = core$1.ContentType.BlockComponent;
 TodolistComponent.componentName = 'TodoListComponent';
 TodolistComponent.zenCoding = {
-    match: /^\[(x|\s)?\]$/,
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^\[(x|\s)?\]$/.test(content);
+        }
+        return false;
+    },
     key: ' ',
-    createState(content) {
+    createState(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         const isChecked = content.charAt(1) === 'x';
         return {
             checked: isChecked,
-            slot: new core$1.Slot([
-                core$1.ContentType.InlineComponent,
-                core$1.ContentType.Text
-            ])
+            slot
         };
     }
 };
 function TodolistView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     const state = component.state;
     function toggle() {
@@ -1751,11 +2189,7 @@ function TodolistView(props) {
                 marginLeft: indent * 24 + 'px',
                 justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                 textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-todolist-content'
-                    }, children);
-                }, readonly())] }));
+            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -1774,75 +2208,40 @@ const todolistComponentLoader = {
     }
 };
 
-class BlockquoteComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        const slot = textbus.get(core$1.Registry).createSlot(json.slot);
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    }
-    constructor(textbus, state = {
-        slot: new core$1.Slot([
-            core$1.ContentType.Text,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.BlockComponent
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-BlockquoteComponent.type = core$1.ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match: /^>$/,
-    createState() {
-        return {
-            slot: new core$1.Slot([
-                core$1.ContentType.Text,
+function toList(textbus, type) {
+    const commander = textbus.get(core$1.Commander);
+    commander.transform({
+        targetType: ListComponent.type,
+        slotFactory() {
+            return new core$1.Slot([
                 core$1.ContentType.InlineComponent,
-                core$1.ContentType.BlockComponent
-            ])
-        };
-    }
-};
-function BlockquoteView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
-    const readonly = useReadonly();
-    return () => {
-        const slot = props.component.state.slot;
-        return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
-                return core$1.createVNode('div', null, children);
-            }, readonly()) }));
-    };
+                core$1.ContentType.Text
+            ]);
+        },
+        stateFactory(slots) {
+            return slots.map((slot, index) => {
+                return new ListComponent(textbus, {
+                    type,
+                    reorder: index === 0,
+                    slot
+                });
+            });
+        }
+    });
+}
+function registerListShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            key: ['o', 'u'],
+            ctrlKey: true,
+            shiftKey: true
+        },
+        action(key) {
+            toList(textbus, key === 'o' ? 'OrderedList' : 'UnorderedList');
+        }
+    });
 }
-const blockquoteComponentLoader = {
-    match(element) {
-        return element.tagName === 'BLOCKQUOTE';
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.Text,
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent
-        ]), element).toDelta();
-        const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new BlockquoteComponent(textbus, {
-            slot
-        });
-    },
-};
-
 class ListComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -1851,6 +2250,9 @@ class ListComponent extends core$1.Component {
             slot: textbus.get(core$1.Registry).createSlot(json.slot)
         });
     }
+    getSlots() {
+        return [this.state.slot];
+    }
     setup() {
         const textbus = core$1.useContext();
         const commander = core$1.useContext(core$1.Commander);
@@ -1864,8 +2266,7 @@ class ListComponent extends core$1.Component {
             const afterContent = parentSlot.sliceContent(index + 1);
             for (const item of afterContent) {
                 if (item instanceof ListComponent &&
-                    item.state.type === 'OrderedList' &&
-                    item.state.slot.getAttribute(textIndentAttr) === this.state.slot.getAttribute(textIndentAttr)) {
+                    item.state.type === 'OrderedList') {
                     if (item.state.reorder) {
                         break;
                     }
@@ -1878,6 +2279,7 @@ class ListComponent extends core$1.Component {
         });
         core$1.onBreak(ev => {
             const slot = ev.target.cut(ev.data.index);
+            slot.removeAttribute(headingAttr);
             if (ev.target.isEmpty && slot.isEmpty) {
                 const beforeIndex = this.parent.indexOf(this);
                 const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1923,21 +2325,52 @@ class ListComponent extends core$1.Component {
                 selection.setPosition(slot, 0);
             }
         });
+        core$1.useDynamicShortcut({
+            keymap: {
+                key: 'Tab'
+            },
+            action: () => {
+                Promise.resolve().then(() => updateAfterList(this));
+                return false;
+            }
+        });
+        core$1.useDynamicShortcut({
+            keymap: {
+                key: 'Tab',
+                shiftKey: true
+            },
+            action: () => {
+                Promise.resolve().then(() => updateAfterList(this));
+                return false;
+            }
+        });
     }
 }
 ListComponent.componentName = 'ListComponent';
 ListComponent.type = core$1.ContentType.BlockComponent;
 ListComponent.zenCoding = {
     key: ' ',
-    match: /^([1-9]\.|[+*])$/,
-    createState(content) {
+    match(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+            return /^([1-9]\.|[+*-])$/.test(content);
+        }
+        return false;
+    },
+    createState(content, textbus) {
+        const selection = textbus.get(core$1.Selection);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const slot = new core$1.Slot([
+            core$1.ContentType.InlineComponent,
+            core$1.ContentType.Text
+        ]);
+        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+        }
         return {
             type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
             reorder: true,
-            slot: new core$1.Slot([
-                core$1.ContentType.InlineComponent,
-                core$1.ContentType.Text
-            ])
+            slot
         };
     }
 };
@@ -1959,7 +2392,6 @@ function numberToLetter(num) {
     }).join('');
 }
 function ListComponentView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
     function reorder(is) {
         component.state.reorder = is;
@@ -1986,7 +2418,8 @@ function ListComponentView(props) {
     return () => {
         const ListType = component.state.type === 'UnorderedList' ? 'ul' : 'ol';
         const ulIcons = ['•', '◦', '▪'];
-        let icon = '';
+        let icon;
+        let listStep = 0;
         const indent = component.state.slot.getAttribute(textIndentAttr) || 0;
         if (ListType === 'ul') {
             icon = ulIcons[indent % 3];
@@ -1994,7 +2427,6 @@ function ListComponentView(props) {
         else {
             const parentSlot = component.parent;
             const index = parentSlot.indexOf(component);
-            let listStep = 0;
             if (!component.state.reorder) {
                 const beforeContent = parentSlot.sliceContent(0, index);
                 while (beforeContent.length) {
@@ -2025,7 +2457,7 @@ function ListComponentView(props) {
                 icon = numberToLetter(listStep) + '.';
             }
         }
-        return (jsxRuntime.jsx(ListType, { ref: props.rootRef, "data-component": component.name, class: "xnote-list", style: {
+        return (jsxRuntime.jsx(ListType, { ref: props.rootRef, "data-component": component.name, "data-reorder": (listStep === 0) + '', class: "xnote-list", style: {
                 marginLeft: indent * 24 + 'px'
             }, children: jsxRuntime.jsxs("li", { style: {
                     justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
@@ -2033,16 +2465,12 @@ function ListComponentView(props) {
                 }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-list-content'
-                        }, children);
-                    }, readonly())] }) }));
+                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
-    match(element) {
-        return element.tagName === 'UL' || element.tagName === 'OL';
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(core$1.ContentType.BlockComponent) && (element.tagName === 'UL' || element.tagName === 'OL');
     },
     read(element, textbus, slotParser) {
         const type = element.tagName === 'OL' ? 'OrderedList' : 'UnorderedList';
@@ -2053,7 +2481,7 @@ const listComponentLoader = {
             ]), element.querySelector('.xnote-list-content') || document.createElement('div'));
             return new ListComponent(textbus, {
                 slot,
-                reorder: true,
+                reorder: element.dataset.reorder !== 'false',
                 type
             });
         }
@@ -2096,125 +2524,58 @@ function useActiveBlock() {
         sourceCode: false,
         highlightBox: false
     });
-    function updateCheckStates() {
+    function updateCheckStates(range) {
         setCheckStates(draft => {
-            const heading = query.queryAttribute(headingAttr);
-            draft.paragraph = query.queryComponent(ParagraphComponent).state === core$1.QueryStateType.Enabled;
+            const heading = query.queryAttributeByRange(headingAttr, range);
+            draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === core$1.QueryStateType.Enabled;
             draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
             if (heading.state === core$1.QueryStateType.Enabled) {
                 draft[heading.value] = true;
                 draft.paragraph = false;
             }
-            const queryList = query.queryComponent(ListComponent);
+            const queryList = query.queryComponentByRange(ListComponent, range);
             draft.unorderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
             draft.orderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
-            draft.table = query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled;
-            draft.todolist = query.queryComponent(TodolistComponent).state === core$1.QueryStateType.Enabled;
-            draft.blockquote = query.queryComponent(BlockquoteComponent).state === core$1.QueryStateType.Enabled;
-            draft.sourceCode = query.queryComponent(SourceCodeComponent).state === core$1.QueryStateType.Enabled;
+            draft.table = query.queryComponentByRange(TableComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === core$1.QueryStateType.Enabled;
+            draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === core$1.QueryStateType.Enabled;
         });
     }
-    updateCheckStates();
     const subscription = refreshService.onRefresh.subscribe(() => {
-        updateCheckStates();
+        if (!selection.isSelected) {
+            return;
+        }
+        updateCheckStates({
+            startOffset: selection.startOffset,
+            startSlot: selection.startSlot,
+            endSlot: selection.endSlot,
+            endOffset: selection.endOffset
+        });
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
     return function (slot = null) {
         if (slot) {
-            const snapshot = selection.createSnapshot();
-            selection.setBaseAndExtent(slot, 0, slot, slot.length);
-            updateCheckStates();
-            snapshot.restore();
+            updateCheckStates({
+                startOffset: 0,
+                endOffset: slot.length,
+                startSlot: slot,
+                endSlot: slot
+            });
         }
-        return checkStates();
-    };
-}
-
-class HighlightBoxComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new HighlightBoxComponent(textbus, {
-            type: json.type,
-            slot: textbus.get(core$1.Registry).createSlot(json.slot)
-        });
-    }
-    constructor(textbus, state = {
-        type: '',
-        slot: new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ])
-    }) {
-        super(textbus, state);
-    }
-    setup() {
-        useBlockContent(this.state.slot);
-    }
-}
-HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
-HighlightBoxComponent.componentName = 'HighlightBoxComponent';
-HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
-function HighlightBoxView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
-    const readonly = useReadonly();
-    const output = useOutput();
-    const emoji = [];
-    for (let i = 0x1F600; i <= 0x1F64F; i++) {
-        emoji.push(i);
-    }
-    const dropdownRef = core.createRef();
-    function setType(type) {
-        var _a;
-        (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
-        props.component.state.type = type;
-    }
-    return () => {
-        const { state, name } = props.component;
-        if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
-                        return core$1.createVNode('div', {
-                            class: 'xnote-highlight-box-content'
-                        }, children);
-                    }, readonly())] }));
+        else if (selection.isSelected) {
+            updateCheckStates({
+                startOffset: selection.startOffset,
+                startSlot: selection.startSlot,
+                endSlot: selection.endSlot,
+                endOffset: selection.endOffset
+            });
         }
-        return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
-                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                }), jsxRuntime.jsx(Divider, {}), emoji.map(i => {
-                                    const icon = String.fromCodePoint(i);
-                                    return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
-                    return core$1.createVNode('div', {
-                        class: 'xnote-highlight-box-content'
-                    }, children);
-                }, readonly())] }));
+        return checkStates();
     };
 }
-const highlightBoxComponentLoader = {
-    match(element) {
-        return element.tagName === 'DIV' && element.dataset.component === HighlightBoxComponent.componentName;
-    },
-    read(element, textbus, slotParser) {
-        const delta = slotParser(new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
-        const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
-        ]);
-        deltaToBlock(delta, textbus).forEach(i => {
-            slot.insert(i);
-        });
-        return new HighlightBoxComponent(textbus, {
-            type: element.dataset.icon || '',
-            slot
-        });
-    }
-};
 
 function useBlockTransform() {
     const commander = core.inject(core$1.Commander);
@@ -2236,124 +2597,74 @@ function useBlockTransform() {
                 commander.unApplyAttribute(headingAttr);
                 commander.transform({
                     targetType: ParagraphComponent.type,
-                    multipleSlot: false,
                     slotFactory() {
                         return new core$1.Slot([
                             core$1.ContentType.InlineComponent,
                             core$1.ContentType.Text
                         ]);
                     },
-                    stateFactory(slot) {
-                        return new ParagraphComponent(textbus, {
+                    stateFactory(slots) {
+                        return slots.map(slot => new ParagraphComponent(textbus, {
                             slot
-                        });
+                        }));
                     }
                 });
                 break;
             case 'table':
                 {
                     const table = new TableComponent(textbus);
-                    if (((_a = selection.commonAncestorSlot) === null || _a === void 0 ? void 0 : _a.isEmpty) && ((_b = selection.commonAncestorComponent) === null || _b === void 0 ? void 0 : _b.name) === ParagraphComponent.componentName) {
-                        commander.replaceComponent(selection.commonAncestorComponent, table);
-                    }
-                    else {
-                        commander.insert(table);
-                    }
-                }
-                break;
-            case 'todolist':
-                commander.unApplyAttribute(headingAttr);
-                commander.transform({
-                    targetType: TodolistComponent.type,
-                    multipleSlot: false,
-                    slotFactory() {
-                        return new core$1.Slot([
-                            core$1.ContentType.InlineComponent,
-                            core$1.ContentType.Text
-                        ]);
-                    },
-                    stateFactory(slot) {
-                        return new TodolistComponent(textbus, {
-                            checked: false,
-                            slot
-                        });
-                    }
-                });
-                break;
-            case 'ol':
-            case 'ul':
-                {
-                    commander.transform({
-                        targetType: ListComponent.type,
-                        multipleSlot: false,
-                        slotFactory() {
-                            return new core$1.Slot([
-                                core$1.ContentType.InlineComponent,
-                                core$1.ContentType.Text
-                            ]);
-                        },
-                        stateFactory(slot) {
-                            return new ListComponent(textbus, {
-                                type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
-                                reorder: true,
-                                slot
-                            });
-                        }
-                    });
-                }
-                break;
-            case 'blockquote':
-                {
-                    const state = query.queryComponent(BlockquoteComponent);
-                    if (state.state === core$1.QueryStateType.Enabled) {
-                        const current = state.value;
-                        const parent = current.parent;
-                        const index = parent.indexOf(current);
-                        parent.retain(index);
-                        commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
-                            parent.insert(i);
-                        });
-                    }
-                    else {
-                        const block = new BlockquoteComponent(textbus);
-                        const slot = block.state.slot;
-                        if (selection.startSlot === selection.endSlot) {
-                            const parentComponent = selection.startSlot.parent;
-                            const parentSlot = parentComponent.parent;
-                            const position = parentSlot.indexOf(parentComponent);
-                            slot.insert(parentComponent);
-                            parentSlot.retain(position);
-                            parentSlot.insert(block);
-                        }
-                        else {
-                            const commonAncestorSlot = selection.commonAncestorSlot;
-                            const scope = selection.getCommonAncestorSlotScope();
-                            commonAncestorSlot.cut(scope.startOffset, scope.endOffset).sliceContent().forEach(i => {
-                                slot.insert(i);
-                            });
-                            commonAncestorSlot.retain(scope.startOffset);
-                            commonAncestorSlot.insert(block);
-                        }
+                    if (((_a = selection.commonAncestorSlot) === null || _a === void 0 ? void 0 : _a.isEmpty) && ((_b = selection.commonAncestorComponent) === null || _b === void 0 ? void 0 : _b.name) === ParagraphComponent.componentName) {
+                        commander.replaceComponent(selection.commonAncestorComponent, table);
+                    }
+                    else {
+                        commander.insert(table);
                     }
                 }
                 break;
+            case 'todolist':
+                commander.unApplyAttribute(headingAttr);
+                commander.transform({
+                    targetType: TodolistComponent.type,
+                    slotFactory() {
+                        return new core$1.Slot([
+                            core$1.ContentType.InlineComponent,
+                            core$1.ContentType.Text
+                        ]);
+                    },
+                    stateFactory(slots) {
+                        return slots.map(slot => {
+                            return new TodolistComponent(textbus, {
+                                checked: false,
+                                slot
+                            });
+                        });
+                    }
+                });
+                break;
+            case 'ol':
+            case 'ul':
+                toList(textbus, value === 'ol' ? 'OrderedList' : 'UnorderedList');
+                break;
+            case 'blockquote':
+                toBlockquote(textbus);
+                break;
             case 'sourceCode':
                 {
                     const state = query.queryComponent(SourceCodeComponent);
                     if (state.state === core$1.QueryStateType.Enabled) {
                         commander.transform({
                             targetType: ParagraphComponent.type,
-                            multipleSlot: false,
                             slotFactory() {
                                 return new core$1.Slot([
                                     core$1.ContentType.InlineComponent,
                                     core$1.ContentType.Text
                                 ]);
                             },
-                            stateFactory(slot) {
-                                return new ParagraphComponent(textbus, {
-                                    slot
+                            stateFactory(slots) {
+                                return slots.map(slot => {
+                                    return new ParagraphComponent(textbus, {
+                                        slot
+                                    });
                                 });
                             }
                         });
@@ -2361,24 +2672,25 @@ function useBlockTransform() {
                     else {
                         commander.transform({
                             targetType: SourceCodeComponent.type,
-                            multipleSlot: true,
                             slotFactory() {
                                 return new core$1.Slot([
                                     core$1.ContentType.Text
                                 ]);
                             },
                             stateFactory(slots) {
-                                return new SourceCodeComponent(textbus, {
-                                    lang: '',
-                                    lineNumber: true,
-                                    autoBreak: true,
-                                    slots: slots.map(slot => {
-                                        return {
-                                            slot,
-                                            emphasize: false
-                                        };
-                                    })
-                                });
+                                return [new SourceCodeComponent(textbus, {
+                                        lang: '',
+                                        lineNumber: true,
+                                        autoBreak: true,
+                                        slots: slots.map(slot => {
+                                            slot.cleanFormats();
+                                            slot.cleanAttributes();
+                                            return {
+                                                slot,
+                                                emphasize: false
+                                            };
+                                        })
+                                    })];
                             }
                         });
                     }
@@ -2393,7 +2705,7 @@ function useBlockTransform() {
                         const index = parent.indexOf(current);
                         parent.retain(index);
                         commander.removeComponent(current);
-                        current.__slots__.get(0).sliceContent().forEach(i => {
+                        current.slots.at(0).sliceContent().forEach(i => {
                             parent.insert(i);
                         });
                     }
@@ -2427,7 +2739,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return scopedCss.withScopedCSS(css$b, () => {
+    return scopedCss.withScopedCSS(scopedId$c, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -2442,7 +2754,7 @@ function BlockTool() {
             [states.todolist, 'xnote-icon-checkbox-checked'],
             [states.blockquote, 'xnote-icon-quotes-right'],
             [states.sourceCode, 'xnote-icon-source-code'],
-            [states.highlightBox, 'xnote-icon-paint-bucket'],
+            [states.highlightBox, 'xnote-icon-highlight-box'],
         ];
         let currentType = 'xnote-icon-pilcrow';
         for (const t of types) {
@@ -2451,27 +2763,48 @@ function BlockTool() {
                 break;
             }
         }
-        return (jsxRuntime.jsx(Dropdown, { onCheck: transform, trigger: 'hover', menu: [
+        return (jsxRuntime.jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), checked: states.paragraph, children: "\u6B63\u6587" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '0'
+                            } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '1'
+                            } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '2'
+                            } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '3'
+                            } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '4'
+                            } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '5'
+                            } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
+                                ctrlKey: true,
+                                key: '6'
+                            } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
@@ -2480,19 +2813,19 @@ function BlockTool() {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
                     value: 'sourceCode'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paint-bucket" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), checked: states.highlightBox, children: "\u9AD8\u4EAE\u5757" }),
                     value: 'highlightBox'
                 }
             ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: false, children: jsxRuntime.jsx("span", { class: currentType }) }) }));
@@ -2858,12 +3191,13 @@ function CodeTool() {
     };
 }
 
-var css$a = undefined;
+var scopedId$b = "vf-accb31";
 
 function ColorTool(props) {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
     const commander = core.inject(core$1.Commander);
+    const selection = core.inject(core$1.Selection);
     const textColor = core.createSignal('');
     const backgroundColor = core.createSignal('');
     const [viewModel] = hooks.useProduce({
@@ -2871,13 +3205,24 @@ function ColorTool(props) {
         disabled: false,
     });
     function updateCheckState() {
-        var _a, _b;
-        (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-        const textState = query.queryFormat(colorFormatter);
-        const backgroundState = query.queryFormat(backgroundColorFormatter);
+        if (!props.slot && !selection.isSelected) {
+            return;
+        }
+        const range = props.slot ? {
+            startSlot: props.slot,
+            endSlot: props.slot,
+            startOffset: 0,
+            endOffset: props.slot.length
+        } : {
+            startSlot: selection.startSlot,
+            startOffset: selection.startOffset,
+            endSlot: selection.endSlot,
+            endOffset: selection.endOffset
+        };
+        const textState = query.queryFormatByRange(colorFormatter, range);
+        const backgroundState = query.queryFormatByRange(backgroundColorFormatter, range);
         textColor.set(textState.state === core$1.QueryStateType.Enabled ? textState.value : '');
         backgroundColor.set(backgroundState.state === core$1.QueryStateType.Enabled ? backgroundState.value : '');
-        (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         updateCheckState();
@@ -2887,14 +3232,17 @@ function ColorTool(props) {
         sub.unsubscribe();
     });
     const textColors = [
+        '#000',
         '#aaa',
         '#ff2e2e',
         '#ff8d45',
         '#ffdf14',
         '#5eec75',
         '#5dfaff',
+        '#1296db',
         '#617fff',
         '#c459ff',
+        '#fff',
     ];
     const backgroundColors = [
         '#aaa',
@@ -2906,15 +3254,16 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return scopedCss.withScopedCSS(css$a, () => {
+    return scopedCss.withScopedCSS(scopedId$b, () => {
         const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+        return (jsxRuntime.jsx(Dropdown, { style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
+                                    'no-background': true,
                                     active: textColor() === ''
                                 }, onClick: () => {
                                     var _a;
                                     (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
                                     commander.unApplyFormat(colorFormatter);
-                                }, children: "A" }), textColors.map(c => {
+                                } }), textColors.map(c => {
                                 return jsxRuntime.jsx("div", { class: {
                                         active: textColor() === c
                                     }, onClick: () => {
@@ -2974,6 +3323,9 @@ const isSupportFont = (function () {
 function FontFamilyTool() {
     const currentFontFamily = core.createSignal('');
     const fontFamilyOptions = [{
+            label: '默认',
+            value: ''
+        }, {
             label: '宋体',
             value: 'SimSun, STSong'
         }, {
@@ -3015,7 +3367,12 @@ function FontFamilyTool() {
         }];
     const commander = core.inject(core$1.Commander);
     function check(v) {
-        commander.applyFormat(fontFamilyFormatter, v);
+        if (v) {
+            commander.applyFormat(fontFamilyFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontFamilyFormatter);
+        }
     }
     const refreshService = core.inject(exports.RefreshService);
     const query = core.inject(core$1.Query);
@@ -3024,7 +3381,7 @@ function FontFamilyTool() {
         const result = query.queryFormat(fontFamilyFormatter);
         const isHighlight = result.state === core$1.QueryStateType.Enabled;
         highlight.set(isHighlight);
-        currentFontFamily.set(isHighlight ? result.value : '默认');
+        currentFontFamily.set(isHighlight ? result.value : '');
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
@@ -3032,7 +3389,7 @@ function FontFamilyTool() {
     return () => {
         var _a;
         return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: fontFamilyOptions.map(i => {
-                const disabled = !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v);
+                const disabled = i.value ? !i.value.split(',').map(i => isSupportFont(i.trim())).some(v => v) : false;
                 return {
                     label: jsxRuntime.jsx(MenuItem, { disabled: disabled, checked: currentFontFamily() === i.value, children: i.label }),
                     disabled,
@@ -3064,7 +3421,12 @@ function FontSizeTool() {
     ];
     const commander = core.inject(core$1.Commander);
     function check(v) {
-        commander.applyFormat(fontSizeFormatter, v);
+        if (v) {
+            commander.applyFormat(fontSizeFormatter, v);
+        }
+        else {
+            commander.unApplyFormat(fontSizeFormatter);
+        }
     }
     const refreshService = core.inject(exports.RefreshService);
     const query = core.inject(core$1.Query);
@@ -3104,122 +3466,386 @@ function ItalicTool() {
         update(draft => {
             draft.highlight = state.state === core$1.QueryStateType.Enabled;
         });
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
-    };
-}
-
-var css$9 = undefined;
-
-function LinkTool(props) {
-    const selectionBridge = core.inject(platformBrowser.SelectionBridge);
-    const selection = core.inject(core$1.Selection);
-    const commander = core.inject(core$1.Commander);
-    const container = core.inject(platformBrowser.VIEW_CONTAINER);
-    const isShow = core.createSignal(false);
-    const inputRef = core.createRef();
-    function setLink(ev) {
-        ev.preventDefault();
-        const value = inputRef.current.value;
-        if (value) {
-            commander.applyFormat(linkFormatter, {
-                href: value,
-                target: '_blanK'
-            });
-        }
-        isShow.set(false);
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-italic" }) });
+    };
+}
+
+var scopedId$a = "vf-e74208";
+
+exports.EditorService = class EditorService {
+    constructor() {
+        this.hideInlineToolbar = false;
+        this.canShowLeftToolbar = true;
+        this.onLeftToolbarCanVisibleChange = new core$1.Subject();
+    }
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
+    }
+};
+exports.EditorService = __decorate([
+    core.Injectable({
+        provideIn: 'root'
+    })
+], exports.EditorService);
+
+function LinkTool(props) {
+    const selectionBridge = core.inject(platformBrowser.SelectionBridge);
+    const selection = core.inject(core$1.Selection);
+    const commander = core.inject(core$1.Commander);
+    const editorService = core.inject(exports.EditorService);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const isShow = core.createSignal(false);
+    const inputRef = core.createRef();
+    function setLink(ev) {
+        ev.preventDefault();
+        const value = inputRef.current.value;
+        if (value) {
+            commander.applyFormat(linkFormatter, {
+                href: value,
+                target: '_blanK'
+            });
+        }
+        isShow.set(false);
+    }
+    let isClickFromSelf = false;
+    const sub = core$1.fromEvent(document, 'click').subscribe(() => {
+        if (isClickFromSelf) {
+            isClickFromSelf = false;
+            return;
+        }
+        editorService.hideInlineToolbar = false;
+        isShow.set(false);
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return scopedCss.withScopedCSS(scopedId$a, () => {
+        const containerRect = container.getBoundingClientRect();
+        const rect = isShow() ? selectionBridge.getRect({
+            slot: selection.focusSlot,
+            offset: selection.focusOffset
+        }) : {};
+        return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { onClick: () => {
+                        var _a;
+                        isShow.set(true);
+                        isClickFromSelf = true;
+                        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
+                    jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
+                                isClickFromSelf = true;
+                            }, class: "input-group", children: [jsxRuntime.jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
+    });
+}
+
+function StrikeThroughTool() {
+    const query = core.inject(core$1.Query);
+    const refreshService = core.inject(exports.RefreshService);
+    const textbus = core.inject(core$1.Textbus);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function toggle() {
+        toggleStrikeThrough(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(strikeThroughFormatter);
+        update(draft => {
+            draft.highlight = state.state === core$1.QueryStateType.Enabled;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
+    };
+}
+
+function UnderlineTool() {
+    const query = core.inject(core$1.Query);
+    const refreshService = core.inject(exports.RefreshService);
+    const textbus = core.inject(core$1.Textbus);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function toggle() {
+        toggleUnderline(textbus);
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const state = query.queryFormat(underlineFormatter);
+        update(draft => {
+            draft.highlight = state.state === core$1.QueryStateType.Enabled;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
+    };
+}
+
+var scopedId$9 = "vf-cf8e1c";
+
+class FileUploader {
+}
+
+class ImageComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+ImageComponent.type = core$1.ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = core.createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const imageComponentLoader = {
+    match(element) {
+        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
+    },
+    read(element, textbus) {
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
+        return new ImageComponent(textbus, {
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
+        });
+    }
+};
+
+class VideoComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new VideoComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+VideoComponent.type = core$1.ContentType.InlineComponent;
+VideoComponent.componentName = 'VideoComponent';
+function VideoView(props) {
+    const { name, state } = props.component;
+    const videoRef = core.createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsxRuntime.jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const videoComponentLoader = {
+    match(element) {
+        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
+    },
+    read(element, textbus) {
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
+        return new VideoComponent(textbus, {
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
+    }
+};
+
+class KatexEditor extends core$1.Textbus {
+    constructor() {
+        const adapter = new adapterViewfly.ViewflyAdapter({
+            [SourceCodeComponent.componentName]: SourceCodeView
+        }, (host, root, injector) => {
+            const appInjector = new core.ReflectiveInjector(injector, [{
+                    provide: OutputInjectionToken,
+                    useValue: true
+                }]);
+            const app = platformBrowser$1.createApp(root, {
+                context: appInjector
+            }).mount(host);
+            return () => {
+                app.destroy();
+            };
+        });
+        const browserModule = new platformBrowser.BrowserModule({
+            adapter,
+            renderTo: () => {
+                return this.host;
+            }
+        });
+        super({
+            components: [
+                SourceCodeComponent
+            ],
+            imports: [browserModule]
+        });
+        this.onValueChange = new core$1.Subject();
+    }
+    mount(host, code) {
+        this.host = host;
+        const model = new SourceCodeComponent(this, {
+            lineNumber: true,
+            autoBreak: true,
+            lang: 'latex',
+            theme: 'github',
+            slots: code.split('\n').map(i => {
+                const slot = new core$1.Slot([core$1.ContentType.Text]);
+                slot.insert(i);
+                return {
+                    slot,
+                    emphasize: false
+                };
+            })
+        });
+        this.onChange.subscribe(() => {
+            const str = model.state.slots.map(i => {
+                if (i.slot.isEmpty) {
+                    return '';
+                }
+                return i.slot.toString();
+            }).join('\n');
+            this.onValueChange.next(str);
+        });
+        return this.render(model);
     }
-    let isClickFromSelf = false;
-    const sub = core$1.fromEvent(document, 'click').subscribe(() => {
-        if (isClickFromSelf) {
-            isClickFromSelf = false;
-            return;
-        }
-        isShow.set(false);
-    });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    return scopedCss.withScopedCSS(css$9, () => {
-        const containerRect = container.getBoundingClientRect();
-        const rect = isShow() ? selectionBridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        }) : {};
-        return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { onClick: () => {
-                        isShow.set(true);
-                        isClickFromSelf = true;
-                        setTimeout(() => { var _a; return (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props); }, 10);
-                    }, arrow: true, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
-                    jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
-                                isClickFromSelf = true;
-                            }, class: "input-group", children: [jsxRuntime.jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
-    });
 }
 
-function StrikeThroughTool() {
-    const query = core.inject(core$1.Query);
-    const refreshService = core.inject(exports.RefreshService);
-    const textbus = core.inject(core$1.Textbus);
-    const [viewModel, update] = hooks.useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleStrikeThrough(textbus);
+class KatexComponent extends core$1.Component {
+    static fromJSON(textbus, state) {
+        return new KatexComponent(textbus, state);
     }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(strikeThroughFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
-        });
+    constructor(textbus, state = {
+        text: '% \\f is defined as #1f(#2) using the macro\n' +
+            '\\f\\relax{x} = \\int_{-\\infty}^\\infty\n' +
+            '\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}\n' +
+            '\\,d\\xi'
+    }) {
+        super(textbus, state);
+    }
+    getSlots() {
+        return [];
+    }
+}
+KatexComponent.componentName = 'KatexComponent';
+KatexComponent.type = core$1.ContentType.InlineComponent;
+function domToVDom(el) {
+    const attrs = {};
+    el.getAttributeNames().forEach(key => {
+        attrs[key] = el.getAttribute(key);
     });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
+    attrs.children = Array.from(el.childNodes).map(child => {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            return domToVDom(child);
+        }
+        return child.textContent || '';
     });
-    return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-strikethrough" }) });
-    };
+    return core.jsx(el.tagName.toLowerCase(), attrs);
 }
-
-function UnderlineTool() {
-    const query = core.inject(core$1.Query);
-    const refreshService = core.inject(exports.RefreshService);
-    const textbus = core.inject(core$1.Textbus);
-    const [viewModel, update] = hooks.useProduce({
-        highlight: false,
-        disabled: false,
-    });
-    function toggle() {
-        toggleUnderline(textbus);
+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 sub = refreshService.onRefresh.subscribe(() => {
-        const state = query.queryFormat(underlineFormatter);
-        update(draft => {
-            draft.highlight = state.state === core$1.QueryStateType.Enabled;
+    const selection = core.inject(core$1.Textbus);
+    const editorRef = core.createDynamicRef(node => {
+        const editor = new KatexEditor();
+        editor.mount(node, props.component.state.text).then(() => {
+            editor.focus();
         });
+        selection.blur();
+        const subscription = editor.onValueChange.subscribe((value) => {
+            props.component.state.text = value;
+        }).add(core$1.fromEvent(node, 'mousedown').subscribe(ev => ev.stopPropagation()), core$1.fromEvent(document, 'mousedown').subscribe(() => {
+            var _a;
+            (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(false);
+        }));
+        return () => {
+            subscription.unsubscribe();
+            editor.destroy();
+        };
     });
-    core.onUnmounted(() => {
-        sub.unsubscribe();
-    });
+    const dropdownRef = core.createRef();
+    const output = useOutput();
+    const readonly = useReadonly();
     return () => {
-        const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: toggle, children: jsxRuntime.jsx("span", { class: "xnote-icon-underline" }) });
+        const text = props.component.state.text;
+        return (jsxRuntime.jsx("span", { onClick: () => {
+                var _a;
+                (_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.isShow(true);
+            }, ref: props.rootRef, "data-component": KatexComponent.componentName, "data-katex": encodeURIComponent(text), class: "xnote-katex", children: (output() || readonly()) ?
+                domToVDom(toDOM(text))
+                :
+                    jsxRuntime.jsx(Dropdown, { padding: '0', ref: dropdownRef, trigger: 'none', width: '600px', menu: jsxRuntime.jsx("div", { class: "xnote-katex-input", ref: editorRef }), children: domToVDom(toDOM(text)) }) }));
     };
 }
-
-var css$8 = undefined;
+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)
+        });
+    }
+};
 
 function InsertTool(props) {
     const commander = core.inject(core$1.Commander);
     const selection = core.inject(core$1.Selection);
     const textbus = core.inject(core$1.Textbus);
+    const fileUploader = core.inject(FileUploader, null);
+    const dropdownContextService = core.inject(exports.DropdownContextService);
     function insert(type) {
         var _a;
         const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
@@ -3233,6 +3859,8 @@ function InsertTool(props) {
             else {
                 commander.insertAfter(comp, component);
             }
+            dropdownContextService.canHide = true;
+            dropdownContextService.hide(false);
         }
         switch (type) {
             case 'h1':
@@ -3294,7 +3922,9 @@ function InsertTool(props) {
                 {
                     const table = new TableComponent(textbus);
                     insertComponent(table);
-                    selection.setPosition(table.state.rows[0].cells[0].slot, 0);
+                    textbus.nextTick(() => {
+                        selection.selectFirstPosition(table, true, true);
+                    });
                 }
                 break;
             case 'todolist':
@@ -3312,8 +3942,24 @@ function InsertTool(props) {
                 }
                 break;
             case 'image':
+                if (fileUploader) {
+                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
+                        const img = new ImageComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
                 break;
             case 'video':
+                if (fileUploader) {
+                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
+                        const img = new VideoComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
                 break;
             case 'highlightBox':
                 {
@@ -3324,14 +3970,23 @@ function InsertTool(props) {
                     selection.setPosition(p.state.slot, 0);
                 }
                 break;
+            case 'katex':
+                {
+                    const p = new ParagraphComponent(textbus);
+                    const comp = new KatexComponent(textbus);
+                    p.state.slot.insert(comp);
+                    insertComponent(p);
+                    selection.selectComponent(comp);
+                }
+                break;
         }
     }
-    return scopedCss.withScopedCSS(css$8, () => {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
+    return scopedCss.withScopedCSS(scopedId$9, () => {
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" })] });
     });
 }
 
-var css$7 = undefined;
+var scopedId$8 = "vf-b05292";
 
 const LeftToolbar = core.withAnnotation({
     providers: [exports.RefreshService]
@@ -3341,6 +3996,7 @@ const LeftToolbar = core.withAnnotation({
     const selection = core.inject(core$1.Selection);
     const rootComponentRef = core.inject(core$1.RootComponentRef);
     const refreshService = core.inject(exports.RefreshService);
+    const editorService = core.inject(exports.EditorService);
     const checkStates = useActiveBlock();
     const toBlock = useBlockTransform();
     const activeSlot = core.createSignal(null);
@@ -3359,6 +4015,14 @@ const LeftToolbar = core.withAnnotation({
         top: 0,
         display: false
     });
+    const sub = editorService.onLeftToolbarCanVisibleChange.subscribe(() => {
+        updatePosition(d => {
+            d.display = editorService.canShowLeftToolbar;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
     let isIgnoreMove = false;
     core.onMounted(() => {
         const rootComponent = rootComponentRef.component;
@@ -3366,12 +4030,14 @@ const LeftToolbar = core.withAnnotation({
         const sub = core$1.fromEvent(docContentContainer, 'mousemove').pipe(core$1.filter(() => {
             return !isIgnoreMove;
         }), core$1.map(ev => {
+            var _a;
             let currentNode = ev.target;
             while (currentNode) {
                 const slot = adapter.getSlotByNativeNode(currentNode);
                 if (slot) {
-                    if ((slot === null || slot === void 0 ? void 0 : slot.parent) instanceof SourceCodeComponent || (slot === null || slot === void 0 ? void 0 : slot.parent) instanceof TableComponent) {
-                        return null;
+                    if (((_a = slot === null || slot === void 0 ? void 0 : slot.parent) === null || _a === void 0 ? void 0 : _a.type) === core$1.ContentType.InlineComponent) {
+                        currentNode = currentNode.parentNode;
+                        continue;
                     }
                     return slot;
                 }
@@ -3386,7 +4052,9 @@ const LeftToolbar = core.withAnnotation({
             activeSlot.set(slot);
             if (slot) {
                 checkStates(slot);
-                isEmptyBlock.set(slot.parent instanceof ParagraphComponent && slot.isEmpty);
+                isEmptyBlock.set((slot.parent instanceof ParagraphComponent && slot.isEmpty) ||
+                    slot.parent instanceof SourceCodeComponent ||
+                    slot.parent instanceof TableComponent);
                 const nativeNode = adapter.getNativeNodeByComponent(slot.parent);
                 updatePosition(draft => {
                     const containerRect = docContentContainer.getBoundingClientRect();
@@ -3439,18 +4107,6 @@ const LeftToolbar = core.withAnnotation({
             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) {
@@ -3482,7 +4138,7 @@ const LeftToolbar = core.withAnnotation({
         if (!slot) {
             return;
         }
-        if (slot.parent.__slots__.length <= 1) {
+        if (slot.parent.slots.length <= 1) {
             commander.removeComponent(slot.parent);
         }
         else {
@@ -3494,20 +4150,21 @@ const LeftToolbar = core.withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return scopedCss.withScopedCSS(css$7, () => {
+    return scopedCss.withScopedCSS(scopedId$8, () => {
+        var _a;
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
-        const states = checkStates();
+        const states = checkStates(slot);
         if (slot) {
             const types = [
                 [states.paragraph, jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" })],
                 [states.sourceCode, jsxRuntime.jsx("span", { class: "xnote-icon-source-code" })],
                 [states.blockquote, jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" })],
                 [states.todolist, jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" })],
-                [states.table, jsxRuntime.jsx("span", { class: "xnote-icon-table" })],
                 [states.unorderedList, jsxRuntime.jsx("span", { class: "xnote-icon-list" })],
                 [states.orderedList, jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" })],
+                [states.table, jsxRuntime.jsx("span", { class: "xnote-icon-table" })],
                 [states.h1, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" })],
                 [states.h2, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" })],
                 [states.h3, jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" })],
@@ -3522,18 +4179,20 @@ const LeftToolbar = core.withAnnotation({
                 }
             }
         }
+        const activeParentComponent = (_a = activeSlot()) === null || _a === void 0 ? void 0 : _a.parent;
+        const needInsert = activeParentComponent instanceof TableComponent || activeParentComponent instanceof SourceCodeComponent;
         return (jsxRuntime.jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsxRuntime.jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
-                    display: position.display && selection.isCollapsed ? 'block' : 'none'
-                }, children: jsxRuntime.jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
+                    display: position.display && selection.isCollapsed && editorService.canShowLeftToolbar ? 'block' : 'none'
+                }, children: jsxRuntime.jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
                         top: 0
                     }, menu: isEmptyBlock() ?
-                        jsxRuntime.jsx(InsertTool, { replace: true, slot: activeSlot() })
+                        jsxRuntime.jsx(InsertTool, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -3568,24 +4227,74 @@ class LeftToolbarPlugin {
     }
 }
 
-var css$6 = undefined;
+var scopedId$7 = "vf-3073ba";
 
-exports.EditorService = class EditorService {
-    constructor() {
-        this.hideInlineToolbar = false;
+function LinkJump() {
+    const selection = core.inject(core$1.Selection);
+    const query = core.inject(core$1.Query);
+    const bridge = core.inject(platformBrowser.SelectionBridge);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const href = core.createSignal('');
+    const ref = core.createRef();
+    const isShow = core.createSignal(false);
+    function onSelectionChange() {
+        if (selection.isCollapsed) {
+            const queryState = query.queryFormat(linkFormatter);
+            if (queryState.state === core$1.QueryStateType.Enabled) {
+                const rect = bridge.getRect({
+                    slot: selection.startSlot,
+                    offset: selection.startOffset
+                });
+                if (rect) {
+                    const offsetRect = container.getBoundingClientRect();
+                    Object.assign(ref.current.style, {
+                        left: rect.left - offsetRect.left + 'px',
+                        top: rect.top - offsetRect.top + 'px'
+                    });
+                    isShow.set(true);
+                    let url = queryState.value.href;
+                    if (url.indexOf('://') < 0) {
+                        url = 'http://' + url;
+                    }
+                    href.set(url);
+                    return;
+                }
+            }
+        }
+        isShow.set(false);
     }
-};
-exports.EditorService = __decorate([
-    core.Injectable({
-        provideIn: 'root'
-    })
-], exports.EditorService);
+    selection.onChange.pipe(core$1.delay()).subscribe(() => {
+        onSelectionChange();
+    });
+    function cleanLink() {
+        isShow.set(false);
+        const commonAncestorSlot = selection.commonAncestorSlot;
+        const index = selection.focusOffset;
+        const ranges = commonAncestorSlot.getFormatRangesByFormatter(linkFormatter, 0, commonAncestorSlot.length);
+        ranges.forEach(range => {
+            if (range.startIndex < index && range.endIndex >= index) {
+                commonAncestorSlot.applyFormat(linkFormatter, {
+                    startIndex: range.startIndex,
+                    endIndex: range.endIndex,
+                    value: null
+                });
+            }
+        });
+    }
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$7, () => {
+        return (jsxRuntime.jsxs("div", { ref: ref, class: "link-jump-plugin", style: { display: isShow() ? '' : 'none' }, children: [jsxRuntime.jsx("span", { onClick: cleanLink, children: "\u6E05\u9664" }), jsxRuntime.jsx("a", { target: "_blank", href: href(), children: "\u8DF3\u8F6C" })] }));
+    }), container);
+}
+
+var scopedId$6 = "vf-fee98b";
 
 const Toolbar = core.withAnnotation({
     providers: [exports.RefreshService]
 }, function Toolbar() {
     const selection = core.inject(core$1.Selection);
     const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
+    const rootComponentRef = core.inject(core$1.RootComponentRef);
+    const adapter = core.inject(platformBrowser.DomAdapter);
     const bridge = core.inject(platformBrowser.SelectionBridge);
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
@@ -3607,7 +4316,7 @@ const Toolbar = core.withAnnotation({
     const toolbarRef = core.createRef();
     function getTop() {
         const docRect = viewDocument.getBoundingClientRect();
-        const toolbarRect = toolbarRef.current.getBoundingClientRect();
+        const toolbarHeight = 36;
         // const documentHeight = document.documentElement.clientHeight
         const selectionFocusRect = bridge.getRect({
             slot: selection.focusSlot,
@@ -3616,14 +4325,12 @@ const Toolbar = core.withAnnotation({
         if (!selectionFocusRect) {
             return null;
         }
-        // console.log(selectionFocusRect.top, toolbarRect.height)
         const centerLeft = selectionFocusRect.left;
-        const toBottom = selectionFocusRect.top < toolbarRect.height + 10;
+        const toBottom = selectionFocusRect.top < toolbarHeight + 10;
         const top = toBottom ?
             selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
-            selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
+            selectionFocusRect.top - docRect.top - toolbarHeight - 10;
         updateViewPosition(draft => {
-            draft.isHide = false;
             draft.transitionDuration = .15;
             draft.left = centerLeft - docRect.left;
             draft.top = top + 10;
@@ -3644,13 +4351,15 @@ const Toolbar = core.withAnnotation({
         sub.unsubscribe();
     });
     function bindMouseup() {
-        mouseupSubscription = core$1.fromEvent(viewDocument, 'mouseup').pipe(core$1.filter(ev => {
+        const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
+        mouseupSubscription = core$1.fromEvent(docElement, 'mouseup').pipe(core$1.filter(ev => {
             return !ev.composedPath().includes(toolbarRef.current);
         }), core$1.delay(100), core$1.filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
         }), core$1.map(getTop), core$1.delay(200)).subscribe((top) => {
             if (top !== null) {
                 updateViewPosition(draft => {
+                    draft.isHide = false;
                     draft.opacity = 1;
                     draft.top = top;
                 });
@@ -3669,16 +4378,16 @@ const Toolbar = core.withAnnotation({
         });
         bindMouseup();
     });
+    const instance = core.getCurrentInstance();
     function hideToolbar() {
-        updateViewPosition(draft => {
-            draft.isHide = true;
-        });
+        editorService.hideInlineToolbar = true;
+        instance.markAsDirtied();
     }
     core.onUnmounted(() => {
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return scopedCss.withScopedCSS(css$6, () => {
+    return scopedCss.withScopedCSS(scopedId$6, () => {
         const p = viewPosition();
         return (jsxRuntime.jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
                 left: p.left + 'px',
@@ -3807,45 +4516,224 @@ class Matcher {
                         return v === styleValue;
                     }).includes(true);
                 }
-                return false;
-            }).includes(false);
-        };
+                return false;
+            }).includes(false);
+        };
+    }
+}
+
+class Organization {
+}
+function registerAtShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    const selection = textbus.get(core$1.Selection);
+    const commander = textbus.get(core$1.Commander);
+    keyboard.addShortcut({
+        keymap: {
+            key: '@',
+            shiftKey: true
+        },
+        action() {
+            const { commonAncestorComponent } = selection;
+            if (commonAncestorComponent instanceof SourceCodeComponent) {
+                return false;
+            }
+            const at = new AtComponent(textbus);
+            commander.insert(at);
+            selection.setPosition(at.state.slot, 0);
+        }
+    });
+}
+class AtComponent extends core$1.Component {
+    static fromJSON(textbus, { slot: slotState, userInfo }) {
+        const registry = textbus.get(core$1.Registry);
+        if (slotState) {
+            const slot = registry.createSlot(slotState);
+            return new AtComponent(textbus, {
+                slot
+            });
+        }
+        return new AtComponent(textbus, {
+            userInfo,
+        });
+    }
+    constructor(textbus, state = {
+        slot: new core$1.Slot([core$1.ContentType.Text])
+    }) {
+        if (!state.userInfo && !state.slot) {
+            state.slot = new core$1.Slot([core$1.ContentType.Text]);
+        }
+        super(textbus, state);
+        this.focus = new core$1.Subject();
+        this.members = core.createSignal([]);
+        this.selectedIndex = core.createSignal(0);
+    }
+    getSlots() {
+        if (this.state.slot) {
+            return [this.state.slot];
+        }
+        return [];
+    }
+    setup() {
+        let isFocus = false;
+        core$1.onFocus(() => {
+            isFocus = true;
+            this.focus.next(true);
+            onChange.next();
+        });
+        core$1.onBlur(() => {
+            isFocus = false;
+            this.focus.next(false);
+            setTimeout(() => {
+                if (this.parent && !this.state.userInfo) {
+                    const slot = this.state.slot;
+                    let text = '@';
+                    if (slot) {
+                        text += slot.isEmpty ? '' : slot.toString();
+                    }
+                    const snapshot = selection.createSnapshot();
+                    selection.selectComponent(this);
+                    commander.insert(text);
+                    snapshot.restore(true);
+                }
+            });
+        });
+        const organization = core$1.useContext(Organization);
+        const selection = core$1.useContext(core$1.Selection);
+        const commander = core$1.useContext(core$1.Commander);
+        const onChange = new core$1.Subject();
+        core$1.onContentInserted((ev) => {
+            const key = this.state.slot.toString();
+            if (key.length > 10) {
+                selection.selectComponent(this);
+                commander.insert(key);
+                ev.preventDefault();
+                return;
+            }
+            onChange.next();
+        });
+        core$1.onContentDeleted(() => {
+            onChange.next();
+        });
+        core$1.onBreak((ev) => {
+            const member = this.members()[this.selectedIndex()];
+            if (member) {
+                this.state.userInfo = Object.assign({}, member);
+            }
+            selection.selectComponentEnd(this);
+            ev.preventDefault();
+        });
+        core$1.useDynamicShortcut({
+            keymap: {
+                key: ['ArrowDown', 'ArrowUp']
+            },
+            action: (key) => {
+                let index = this.selectedIndex();
+                if (key === 'ArrowUp') {
+                    if (index > 0) {
+                        index--;
+                        this.selectedIndex.set(index);
+                    }
+                    return;
+                }
+                if (index < this.members().length - 1) {
+                    index++;
+                    this.selectedIndex.set(index);
+                }
+            }
+        });
+        const subs = onChange.pipe(core$1.switchMap(() => {
+            const key = this.state.slot.toString();
+            return core$1.fromPromise(organization.getMembers(key));
+        })).subscribe((members) => {
+            this.members.set(members);
+            this.selectedIndex.set(0);
+            if (isFocus) {
+                this.focus.next(true);
+            }
+        });
+        core$1.onDestroy(() => {
+            subs.unsubscribe();
+        });
     }
 }
+AtComponent.componentName = 'AtComponent';
+AtComponent.type = core$1.ContentType.InlineComponent;
 
-class ImageComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
-    }
-}
-ImageComponent.type = core$1.ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = core.createRef();
+function AtComponentView(props) {
+    const selection = core.inject(core$1.Selection);
+    const dropdownRef = core.createRef();
+    const subscription = props.component.focus.subscribe((b) => {
+        if (dropdownRef.current && props.component.members().length) {
+            dropdownRef.current.isShow(b);
+        }
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
     const readonly = useReadonly();
     const output = useOutput();
+    const membersRef = core.createRef();
+    core.onUpdated(() => {
+        if (output() || readonly()) {
+            return;
+        }
+        const container = membersRef.current;
+        if (container) {
+            const focusItem = container.children[props.component.selectedIndex()];
+            if (focusItem) {
+                const itemRect = focusItem.getBoundingClientRect();
+                const dropdownMenu = container.parentNode.parentNode;
+                const containerRect = dropdownMenu.getBoundingClientRect();
+                if (itemRect.top - 5 < containerRect.top) {
+                    dropdownMenu.scrollTop += itemRect.top - 5 - containerRect.top;
+                }
+                else if (itemRect.bottom + 5 > containerRect.bottom) {
+                    dropdownMenu.scrollTop += itemRect.bottom + 5 - containerRect.bottom;
+                }
+            }
+        }
+    });
     return () => {
+        const { slot, userInfo } = props.component.state;
+        const selectedIndex = props.component.selectedIndex();
+        if (userInfo) {
+            return (jsxRuntime.jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), userInfo.name] }));
+        }
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
+            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
         }
-        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
+        const members = props.component.members();
+        return (jsxRuntime.jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsxRuntime.jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
+                        let hsl = color.any2Hsl(member.color);
+                        if (hsl === 'unknown') {
+                            hsl = color.any2Hsl('#000');
+                        }
+                        const rgb = color.hsl2Rgb(hsl);
+                        const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+                        const color$1 = yiq >= 128 ? '#000' : '#fff';
+                        return (jsxRuntime.jsxs("div", { onClick: () => {
+                                props.component.state.userInfo = member;
+                                selection.selectComponentEnd(props.component);
+                            }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
+                                        jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
+                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
     };
 }
-const imageComponentLoader = {
+const atComponentLoader = {
     match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
+        return element.dataset.component === AtComponent.componentName;
     },
-    read(element, textbus) {
-        var _a;
-        return new ImageComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
+    read(element, textbus, slotParser) {
+        const data = element.dataset.info;
+        if (data) {
+            return new AtComponent(textbus, {
+                userInfo: JSON.parse(decodeURIComponent(data))
+            });
+        }
+        const slot = slotParser(new core$1.Slot([core$1.ContentType.Text]), element.querySelector('.xnote-at-input') || document.createElement('div'));
+        return new AtComponent(textbus, {
+            slot
         });
     }
 };
@@ -3856,33 +4744,25 @@ class RootComponent extends core$1.Component {
         this.onCompositionStart = new core$1.Subject();
     }
     static fromJSON(textbus, json) {
-        const heading = textbus.get(core$1.Registry).createSlot(json.heading);
         const content = textbus.get(core$1.Registry).createSlot(json.content);
         return new RootComponent(textbus, {
-            heading,
             content
         });
     }
+    getSlots() {
+        return [this.state.content];
+    }
     setup() {
-        const textbus = core$1.useContext();
-        const selection = textbus.get(core$1.Selection);
-        core$1.onBreak(ev => {
-            if (ev.target === this.state.heading) {
-                const afterContent = ev.target.cut(ev.data.index);
-                const p = new ParagraphComponent(textbus, {
-                    slot: afterContent
-                });
-                const body = this.state.content;
-                body.retain(0);
-                body.insert(p);
-                selection.setPosition(afterContent, 0);
-                ev.preventDefault();
-            }
-        });
-        useBlockContent(this.state.content);
+        useBlockContent((slot) => slot === this.state.content);
         core$1.onCompositionStart(ev => {
             this.onCompositionStart.next(ev);
         });
+        core$1.onSlotSetAttribute(ev => {
+            ev.preventDefault();
+        });
+        core$1.onSlotApplyFormat(ev => {
+            ev.preventDefault();
+        });
     }
     afterCheck() {
         const content = this.state.content;
@@ -3899,16 +4779,10 @@ class RootComponent extends core$1.Component {
 RootComponent.componentName = 'RootComponent';
 RootComponent.type = core$1.ContentType.BlockComponent;
 function RootView(props) {
-    const adapter = core.inject(platformBrowser.DomAdapter);
-    const { heading, content } = props.component.state;
+    const { content } = props.component.state;
     const ref = core.createDynamicRef(node => {
-        const sub = props.component.onCompositionStart.subscribe(ev => {
-            if (ev.target === heading) {
-                node.children[0].dataset.placeholder = '';
-            }
-            else {
-                node.children[1].dataset.placeholder = '';
-            }
+        const sub = props.component.onCompositionStart.subscribe(() => {
+            node.children[0].dataset.placeholder = '';
         });
         return () => {
             sub.unsubscribe();
@@ -3918,19 +4792,10 @@ function RootView(props) {
         props.component.afterCheck();
     });
     const readonly = useReadonly();
+    const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsxRuntime.jsxs("div", { class: "xnote-root", ref: [rootRef, ref], children: [adapter.slotRender(heading, children => {
-                    return (core$1.createVNode('div', {
-                        class: 'xnote-title',
-                        'data-placeholder': heading.isEmpty ? '请输入标题' : ''
-                    }, children));
-                }, readonly()), adapter.slotRender(content, children => {
-                    return (core$1.createVNode('div', {
-                        class: 'xnote-content',
-                        'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                    }, children));
-                }, readonly())] }));
+        return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
     };
 }
 const rootComponentLoader = {
@@ -3944,9 +4809,7 @@ const rootComponentLoader = {
             core$1.ContentType.Text
         ]), element).toDelta();
         const slot = new core$1.Slot([
-            core$1.ContentType.BlockComponent,
-            core$1.ContentType.InlineComponent,
-            core$1.ContentType.Text
+            core$1.ContentType.BlockComponent
         ]);
         deltaToBlock(delta, textbus).forEach(i => {
             slot.insert(i);
@@ -3955,7 +4818,7 @@ const rootComponentLoader = {
     }
 };
 
-var css$5 = undefined;
+var scopedId$5 = "vf-681de2";
 
 let TableService = class TableService {
     constructor() {
@@ -3973,6 +4836,7 @@ TableService = __decorate([
 function ResizeColumn(props) {
     const dragLineRef = core.createRef();
     let activeCol = null;
+    const editorService = core.inject(exports.EditorService);
     core.onMounted(() => {
         const { tableRef } = props;
         let isDrag = false;
@@ -4005,6 +4869,7 @@ function ResizeColumn(props) {
             }
         })).add(core$1.fromEvent(dragLineRef.current, 'mousedown').subscribe(downEvent => {
             isDrag = true;
+            editorService.changeLeftToolbarVisible(false);
             props.onActiveStateChange(true);
             const x = downEvent.clientX;
             const layoutWidth = props.component.state.layoutWidth;
@@ -4012,16 +4877,20 @@ function ResizeColumn(props) {
             const initLeft = layoutWidth.slice(0, activeCol).reduce((a, b) => a + b, 0);
             const minWidth = 30;
             const minLeft = initLeft - initWidth + minWidth;
+            const layoutWidthArr = layoutWidth.slice();
             const moveEvent = core$1.fromEvent(document, 'mousemove').subscribe(moveEvent => {
                 const distanceX = moveEvent.clientX - x;
                 dragLineRef.current.style.left = Math.max(initLeft + distanceX, minLeft) + 'px';
-                props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                layoutWidthArr[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                props.layoutWidth.set(layoutWidthArr.slice());
             }).add(core$1.fromEvent(document, 'mouseup').subscribe(upEvent => {
                 isDrag = false;
+                editorService.changeLeftToolbarVisible(true);
                 props.onActiveStateChange(false);
                 moveEvent.unsubscribe();
                 const distanceX = upEvent.clientX - x;
                 props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                props.layoutWidth.set(props.component.state.layoutWidth);
             }));
         }));
         return () => {
@@ -4042,12 +4911,12 @@ function ResizeColumn(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(css$5, () => {
+    return scopedCss.withScopedCSS(scopedId$5, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, class: ['drag-line'] });
     });
 }
 
-var css$4 = undefined;
+var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4115,14 +4984,14 @@ function TopBar(props) {
         s.unsubscribe();
     });
     const deleteIndex = core.createSignal(null);
-    return scopedCss.withScopedCSS(css$4, () => {
+    return scopedCss.withScopedCSS(scopedId$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxRuntime.jsx("div", { class: ['top-bar', {
                     active: props.isFocus()
                 }], children: jsxRuntime.jsxs("div", { class: "toolbar-wrapper", children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return (jsxRuntime.jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxRuntime.jsxs("div", { class: "tool-container", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
                                                             tableService.onInsertColumnBefore.next(0);
                                                         }, onMouseleave: () => {
@@ -4148,7 +5017,7 @@ function TopBar(props) {
                                                                 }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
                                     }) }) }) }) }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
+                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
                                         return jsxRuntime.jsx("td", { onClick: ev => {
                                                 mouseDownFromToolbar = true;
                                                 if (!ev.shiftKey) {
@@ -4168,7 +5037,7 @@ function TopBar(props) {
     });
 }
 
-var css$3 = undefined;
+var scopedId$3 = "vf-7bef30";
 
 function Scroll(props) {
     const scrollRef = core.createRef();
@@ -4182,37 +5051,41 @@ function Scroll(props) {
         const el = scrollRef.current;
         function update() {
             if (props.isFocus()) {
-                input.caret.refresh(false);
+                input.caret.refresh();
             }
             updateShowShadow(draft => {
                 draft.leftEnd = el.scrollLeft === 0;
                 draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
             });
         }
-        update();
+        setTimeout(update);
         const s = core$1.fromEvent(el, 'scroll').subscribe(update);
         return () => s.unsubscribe();
     });
     core.onUpdated(() => {
         const el = scrollRef.current;
-        updateShowShadow(draft => {
-            draft.leftEnd = el.scrollLeft === 0;
-            draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
+        setTimeout(() => {
+            updateShowShadow(draft => {
+                draft.leftEnd = el.scrollLeft === 0;
+                draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
+            });
         });
     });
-    return scopedCss.withScopedCSS(css$3, () => {
-        return jsxRuntime.jsx("div", { ref: [scrollRef, props.scrollRef], class: ['scroll-container', {
+    return scopedCss.withScopedCSS(scopedId$3, () => {
+        return jsxRuntime.jsx("div", { ref: [scrollRef], class: ['scroll-container', {
                     'left-end': showShadow().leftEnd,
                     'right-end': showShadow().rightEnd,
                     'active': props.isFocus(),
                     // 'hide-selection': isSelectColumn()
                 }], onScroll: ev => {
-                tableService.onScroll.next(ev.target.scrollLeft);
+                setTimeout(() => {
+                    tableService.onScroll.next(ev.target.scrollLeft);
+                }, 30);
             }, children: props.children });
     });
 }
 
-var css$2 = undefined;
+var scopedId$2 = "vf-aaece0";
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4286,7 +5159,7 @@ function LeftBar(props) {
             textbus.focus();
         });
     }
-    return scopedCss.withScopedCSS(css$2, () => {
+    return scopedCss.withScopedCSS(scopedId$2, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxRuntime.jsxs("div", { class: ['left-bar', { active: props.isFocus() }], children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { ref: insertBarRef, children: jsxRuntime.jsx("tbody", { children: state.rows.map((_, index) => {
@@ -4334,7 +5207,7 @@ function LeftBar(props) {
     });
 }
 
-var css$1 = undefined;
+var scopedId$1 = "vf-d4c4a9";
 
 function sum(numbers) {
     return numbers.reduce((a, b) => a + b, 0);
@@ -4367,7 +5240,7 @@ function ResizeRow(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(css$1, () => {
+    return scopedCss.withScopedCSS(scopedId$1, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, style: {
                 display: styles().visible ? 'block' : 'none',
                 top: styles().top + 'px',
@@ -4376,7 +5249,7 @@ function ResizeRow(props) {
     });
 }
 
-var css = undefined;
+var scopedId = "vf-4a5ad1";
 
 function SelectionMask(props) {
     const [styles, updateStyles] = hooks.useProduce({
@@ -4412,9 +5285,9 @@ function SelectionMask(props) {
             updateStyles(draft => {
                 draft.visible = true;
                 draft.left = sum(state.layoutWidth.slice(0, selection.startColumn));
-                draft.top = sum(trs.slice(0, selection.startRow).map(i => i.offsetHeight)) + topCompensation;
+                draft.top = trs[selection.startRow].offsetTop + topCompensation;
                 draft.width = sum(state.layoutWidth.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
-                draft.height = sum(trs.slice(selection.startRow, selection.endRow).map(i => i.offsetHeight)) + heightCompensation + 'px';
+                draft.height = trs[selection.endRow - 1].offsetTop + trs[selection.endRow - 1].offsetHeight + heightCompensation - draft.top + 'px';
             });
         }
         else {
@@ -4429,7 +5302,7 @@ function SelectionMask(props) {
     core.onUnmounted(() => {
         s.unsubscribe();
     });
-    return scopedCss.withScopedCSS(css, () => {
+    return scopedCss.withScopedCSS(scopedId, () => {
         const style = styles();
         return (jsxRuntime.jsx("div", { class: "mask", style: {
                 display: style.visible ? 'block' : 'none',
@@ -4443,81 +5316,25 @@ function SelectionMask(props) {
     });
 }
 
+// import { SlotRender } from '../SlotRender'
 const TableComponentView = core.withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
+    const editorService = core.inject(exports.EditorService);
     const isFocus = core.createSignal(false);
+    const layoutWidth = core.createSignal(props.component.state.layoutWidth);
     const subscription = props.component.focus.subscribe(b => {
         isFocus.set(b);
+        if (!b) {
+            editorService.hideInlineToolbar = false;
+        }
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
     const tableRef = core.createRef();
-    const scrollRef = core.createRef();
     const isResizeColumn = core.createSignal(false);
-    const selection = core.inject(core$1.Selection);
-    const findPosition = (slot) => {
-        let cell = slot;
-        while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== props.component) {
-            cell = cell.parentSlot;
-        }
-        if (cell) {
-            const rows = props.component.state.rows;
-            for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-                const row = rows[rowIndex].cells;
-                for (let colIndex = 0; colIndex < row.length; colIndex++) {
-                    const item = row[colIndex].slot;
-                    if (item === cell) {
-                        return {
-                            rowIndex,
-                            colIndex
-                        };
-                    }
-                }
-            }
-        }
-        return null;
-    };
-    core.onMounted(() => {
-        const sub = selection.onChange.subscribe(() => {
-            var _a;
-            if (selection.commonAncestorComponent !== props.component || selection.isCollapsed) {
-                props.component.tableSelection.set(null);
-                return;
-            }
-            const startPosition = findPosition(selection.startSlot);
-            const endPosition = findPosition(selection.endSlot);
-            if (startPosition && endPosition) {
-                if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
-                    if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
-                        props.component.tableSelection.set({
-                            startColumn: startPosition.colIndex,
-                            startRow: startPosition.rowIndex,
-                            endColumn: endPosition.colIndex + 1,
-                            endRow: endPosition.rowIndex + 1
-                        });
-                        return;
-                    }
-                    props.component.tableSelection.set(null);
-                    return;
-                }
-                const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
-                const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
-                props.component.tableSelection.set({
-                    startColumn,
-                    startRow,
-                    endColumn: endColumn + 1,
-                    endRow: endRow + 1
-                });
-            }
-            else {
-                props.component.tableSelection.set(null);
-            }
-        });
-        return () => sub.unsubscribe();
-    });
     const rowMapping = new WeakMap();
     const readonly = useReadonly();
     const output = useOutput();
@@ -4530,45 +5347,42 @@ const TableComponentView = core.withAnnotation({
             }
             rowMapping.set(row, Math.random());
         });
-        Promise.resolve().then(() => {
-            props.component.afterContentCheck();
-        });
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
-                            'xnote-table-content',
-                            {
-                                'hide-selection': props.component.tableSelection()
-                            }
-                        ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                    return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-                                    return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                            return adapter.slotRender(cell.slot, children => {
-                                                return core$1.createVNode('td', {
-                                                    key: cell.slot.id
-                                                }, children);
-                                            }, readonly());
-                                        }) }, rowMapping.get(row)));
-                                }) })] }) }) }));
-        }
-        return (jsxRuntime.jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, component: props.component, scrollRef: scrollRef }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
-                                    'xnote-table-content',
-                                    {
-                                        'hide-selection': props.component.tableSelection()
-                                    }
-                                ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
-                                            return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                        }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-                                            return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                                    return adapter.slotRender(cell.slot, children => {
-                                                        return core$1.createVNode('td', {
-                                                            key: cell.slot.id
-                                                        }, children);
-                                                    }, readonly());
-                                                }) }, rowMapping.get(row)));
-                                        }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
-                                    isResizeColumn.set(isActive);
-                                } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }));
+            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
+                                'xnote-table-content',
+                                {
+                                    'hide-selection': props.component.tableSelection()
+                                }
+                            ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
+                                        return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                    }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+                                        return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
+                                                return adapter.slotRender(cell.slot, children => {
+                                                    return core$1.createVNode('td', {
+                                                        key: cell.slot.id
+                                                    }, children);
+                                                }, readonly() || output());
+                                            }) }, rowMapping.get(row)));
+                                    }) })] }) }) }) }));
+        }
+        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
+                                        'xnote-table-content',
+                                        {
+                                            'hide-selection': props.component.tableSelection()
+                                        }
+                                    ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
+                                                return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
+                                            }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+                                                return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
+                                                        return adapter.slotRender(cell.slot, children => {
+                                                            return core$1.createVNode('td', {
+                                                                key: cell.slot.id
+                                                            }, children);
+                                                        }, readonly() || output());
+                                                    }) }, rowMapping.get(row)));
+                                            }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
+                                        isResizeColumn.set(isActive);
+                                    } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }) }));
     };
 });
 const tableComponentLoader = {
@@ -4576,10 +5390,11 @@ const tableComponentLoader = {
         return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
     },
     read(element, textbus, slotParser) {
+        let content = element;
         if (element.tagName === 'DIV') {
-            element = element.querySelector('.xnote-table-content');
+            content = element.querySelector('.xnote-table-content');
         }
-        const { tHead, tBodies, tFoot } = element;
+        const { tHead, tBodies, tFoot } = content;
         const headers = [];
         const bodies = [];
         if (tHead) {
@@ -4589,8 +5404,6 @@ const tableComponentLoader = {
                 Array.from(row.cells).forEach(cell => {
                     const slot = new core$1.Slot([
                         core$1.ContentType.BlockComponent,
-                        core$1.ContentType.InlineComponent,
-                        core$1.ContentType.Text
                     ]);
                     arr.push({
                         slot,
@@ -4618,8 +5431,6 @@ const tableComponentLoader = {
                 Array.from(row.cells).forEach(cell => {
                     const slot = new core$1.Slot([
                         core$1.ContentType.BlockComponent,
-                        core$1.ContentType.InlineComponent,
-                        core$1.ContentType.Text
                     ]);
                     arr.push({
                         slot,
@@ -4706,8 +5517,6 @@ function autoComplete(table) {
                     rowspan: 1,
                     colspan: 1,
                     slot: new core$1.Slot([
-                        core$1.ContentType.Text,
-                        core$1.ContentType.InlineComponent,
                         core$1.ContentType.BlockComponent
                     ])
                 };
@@ -4727,48 +5536,90 @@ function autoComplete(table) {
     });
 }
 
-class VideoComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
-    }
-    setup() {
-        //
+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;
 }
-VideoComponent.type = core$1.ContentType.InlineComponent;
-VideoComponent.componentName = 'VideoComponent';
-function VideoView(props) {
-    const { name, state } = props.component;
-    const videoRef = core.createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-video", "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
+let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate extends platformBrowser.CollaborateSelectionAwarenessDelegate {
+    constructor(domAdapter, selection) {
+        super();
+        this.domAdapter = domAdapter;
+        this.selection = selection;
+    }
+    getRects(abstractSelection) {
+        const { focusSlot, anchorSlot } = abstractSelection;
+        const focusPaths = this.selection.getPathsBySlot(focusSlot);
+        const anchorPaths = this.selection.getPathsBySlot(anchorSlot);
+        const focusIsStart = core$1.Selection.compareSelectionPaths(focusPaths, anchorPaths);
+        let startSlot;
+        let endSlot;
+        if (focusIsStart) {
+            startSlot = focusSlot;
+            endSlot = anchorSlot;
         }
-        return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
+        else {
+            startSlot = anchorSlot;
+            endSlot = focusSlot;
+        }
+        const commonAncestorComponent = core$1.Selection.getCommonAncestorComponent(startSlot, endSlot);
+        if (!(commonAncestorComponent instanceof TableComponent)) {
+            return false;
+        }
+        const range = getSelectedRanges(commonAncestorComponent, findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
+        const rows = commonAncestorComponent.state.rows;
+        const startFocusSlot = rows[range.startRow].cells[range.startColumn].slot;
+        const endFocusSlot = rows[range.endRow].cells[range.endColumn].slot;
+        const renderer = this.domAdapter;
+        const startRect = renderer.getNativeNodeBySlot(startFocusSlot).getBoundingClientRect();
+        const endRect = renderer.getNativeNodeBySlot(endFocusSlot).getBoundingClientRect();
+        return [{
+                left: startRect.left,
+                top: startRect.top,
+                width: endRect.left + endRect.width - startRect.left,
+                height: endRect.top + endRect.height - startRect.top
+            }];
+    }
+};
+TableSelectionAwarenessDelegate = __decorate([
+    core.Injectable(),
+    __metadata("design:paramtypes", [platformBrowser.DomAdapter,
+        core$1.Selection])
+], TableSelectionAwarenessDelegate);
+function getSelectedRanges(component, startSlot, endSlot) {
+    const p1 = finedPosition(component, startSlot);
+    const p2 = finedPosition(component, endSlot);
+    return {
+        startRow: Math.min(p1.rowIndex, p2.rowIndex),
+        endRow: Math.max(p1.rowIndex, p2.rowIndex),
+        startColumn: Math.min(p1.columnIndex, p2.columnIndex),
+        endColumn: Math.max(p1.columnIndex, p2.columnIndex)
     };
 }
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
-    },
-    read(element, textbus) {
-        var _a;
-        return new VideoComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
-        });
+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;
+}
 
-function createXNote(host_1) {
-    return __awaiter(this, arguments, void 0, function* (host, config = {}) {
+class Editor extends core$1.Textbus {
+    constructor(editorConfig = {}) {
         const adapter = new adapterViewfly.ViewflyAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
             [RootComponent.componentName]: RootView,
@@ -4779,19 +5630,59 @@ function createXNote(host_1) {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView,
+            [KatexComponent.componentName]: KatexComponentView,
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
                     useValue: false
                 }]);
-            const app = platformBrowser$1.createApp(root, {
+            const app = platformBrowser$1.createApp(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [root, jsxRuntime.jsx(LinkJump, {})] }), {
                 context: appInjector
             }).mount(host);
             return () => {
                 app.destroy();
             };
         });
+        const browserModule = new platformBrowser.BrowserModule(Object.assign({ renderTo: () => {
+                return this.host;
+            }, useContentEditable: platformBrowser.isMobileBrowser(), adapter, componentLoaders: [
+                atComponentLoader,
+                sourceCodeComponentLoader,
+                listComponentLoader,
+                tableComponentLoader,
+                imageComponentLoader,
+                highlightBoxComponentLoader,
+                blockquoteComponentLoader,
+                videoComponentLoader,
+                todolistComponentLoader,
+                katexComponentLoader,
+                paragraphComponentLoader,
+            ], formatLoaders: [
+                backgroundColorFormatLoader,
+                boldFormatLoader,
+                codeFormatLoader,
+                colorFormatLoader,
+                fontFamilyFormatLoader,
+                fontSizeFormatLoader,
+                italicFormatLoader,
+                linkFormatLoader,
+                strikeThroughFormatLoader,
+                underlineFormatLoader
+            ], attributeLoaders: [
+                headingAttrLoader,
+                textAlignAttrLoader,
+                textIndentAttrLoader
+            ] }, editorConfig.viewOptions));
+        const modules = [browserModule];
+        if (editorConfig.collaborateConfig) {
+            modules.push(new collaborate.CollaborateModule(editorConfig.collaborateConfig));
+            browserModule.providers.push({
+                provide: platformBrowser.CollaborateSelectionAwarenessDelegate,
+                useClass: TableSelectionAwarenessDelegate
+            });
+        }
         const vDomAdapter = new adapterViewfly.ViewflyVDomAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
             [RootComponent.componentName]: RootView,
@@ -4802,14 +5693,16 @@ function createXNote(host_1) {
             [HighlightBoxComponent.componentName]: HighlightBoxView,
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
-            [VideoComponent.componentName]: VideoView
+            [VideoComponent.componentName]: VideoView,
+            [AtComponent.componentName]: AtComponentView,
+            [KatexComponent.componentName]: KatexComponentView
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
                     useValue: true
                 }, {
                     provide: platformBrowser.DomAdapter,
-                    useFactory() {
+                    useFactory: () => {
                         return vDomAdapter;
                     }
                 }]);
@@ -4821,50 +5714,7 @@ function createXNote(host_1) {
                 app.destroy();
             };
         });
-        const browserModule = new platformBrowser.BrowserModule({
-            renderTo() {
-                return host;
-            },
-            adapter,
-            componentLoaders: [
-                highlightBoxComponentLoader,
-                blockquoteComponentLoader,
-                paragraphComponentLoader,
-                sourceCodeComponentLoader,
-                todolistComponentLoader,
-                tableComponentLoader,
-                listComponentLoader,
-                imageComponentLoader,
-                videoComponentLoader
-            ],
-            formatLoaders: [
-                backgroundColorFormatLoader,
-                boldFormatLoader,
-                codeFormatLoader,
-                colorFormatLoader,
-                fontFamilyFormatLoader,
-                fontSizeFormatLoader,
-                italicFormatLoader,
-                linkFormatLoader,
-                strikeThroughFormatLoader,
-                underlineFormatLoader
-            ],
-            attributeLoaders: [
-                headingAttrLoader,
-                textAlignAttrLoader,
-                textIndentAttrLoader
-            ]
-        });
-        const modules = [browserModule];
-        if (config.collaborateConfig) {
-            modules.push(new collaborate.CollaborateModule(config.collaborateConfig));
-        }
-        const textbus = new core$1.Textbus({
-            additionalAdapters: [vDomAdapter],
-            zenCoding: true,
-            readonly: config.readonly,
-            imports: modules,
-            components: [
+        super(Object.assign({ zenCoding: true, additionalAdapters: [vDomAdapter], imports: modules, components: [
                 ImageComponent,
                 ParagraphComponent,
                 RootComponent,
@@ -4874,9 +5724,10 @@ function createXNote(host_1) {
                 TableComponent,
                 HighlightBoxComponent,
                 ListComponent,
-                VideoComponent
-            ],
-            formatters: [
+                VideoComponent,
+                AtComponent,
+                KatexComponent
+            ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
                 codeFormatter,
@@ -4887,18 +5738,14 @@ function createXNote(host_1) {
                 linkFormatter,
                 strikeThroughFormatter,
                 underlineFormatter
-            ],
-            attributes: [
+            ], attributes: [
                 headingAttr,
                 textAlignAttr,
                 textIndentAttr
-            ],
-            providers: [],
-            plugins: [
+            ], plugins: [
                 new LeftToolbarPlugin(),
                 new ToolbarPlugin(),
-            ],
-            onAfterStartup(textbus) {
+            ], onAfterStartup(textbus) {
                 registerBoldShortcut(textbus);
                 registerCodeShortcut(textbus);
                 registerItalicShortcut(textbus);
@@ -4907,34 +5754,52 @@ function createXNote(host_1) {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
-            }
-        });
+                registerAtShortcut(textbus);
+                registerListShortcut(textbus);
+                registerBlockquoteShortcut(textbus);
+            } }, editorConfig));
+        this.editorConfig = editorConfig;
+        this.translator = new platformBrowser$1.OutputTranslator();
+        this.vDomAdapter = vDomAdapter;
+    }
+    mount(host) {
+        this.host = host;
         let rootComp;
+        const config = this.editorConfig;
         if (config.content) {
-            const parser = textbus.get(platformBrowser.Parser);
+            const parser = this.get(platformBrowser.Parser);
             const doc = parser.parseDoc(config.content, rootComponentLoader);
-            rootComp = doc instanceof core$1.Component ? doc : new RootComponent(textbus, {
-                heading: new core$1.Slot([core$1.ContentType.Text]),
-                content: doc
-            });
+            if (doc instanceof core$1.Component) {
+                rootComp = doc;
+            }
+            else {
+                const content = new core$1.Slot([
+                    core$1.ContentType.BlockComponent
+                ]);
+                if (doc instanceof core$1.Slot) {
+                    deltaToBlock(doc.toDelta(), this).forEach(i => {
+                        content.insert(i);
+                    });
+                }
+                rootComp = new RootComponent(this, {
+                    content
+                });
+            }
         }
         else {
-            rootComp = new RootComponent(textbus, {
-                heading: new core$1.Slot([core$1.ContentType.Text]),
-                content: new core$1.Slot([core$1.ContentType.Text, core$1.ContentType.InlineComponent, core$1.ContentType.BlockComponent])
+            rootComp = new RootComponent(this, {
+                content: new core$1.Slot([core$1.ContentType.BlockComponent])
             });
         }
-        yield textbus.render(rootComp);
-        const translator = new platformBrowser$1.OutputTranslator();
-        return {
-            textbus,
-            getHTML() {
-                return translator.transform(vDomAdapter.host);
-            }
-        };
-    });
+        return this.render(rootComp);
+    }
+    getHTML() {
+        return this.translator.transform(this.vDomAdapter.host);
+    }
 }
 
+exports.AtComponent = AtComponent;
+exports.AtComponentView = AtComponentView;
 exports.AttrTool = AttrTool;
 exports.BlockTool = BlockTool;
 exports.BlockquoteComponent = BlockquoteComponent;
@@ -4948,6 +5813,8 @@ exports.Divider = Divider;
 exports.DragResize = DragResize;
 exports.Dropdown = Dropdown;
 exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.Editor = Editor;
+exports.FileUploader = FileUploader;
 exports.FontFamilyTool = FontFamilyTool;
 exports.FontSizeTool = FontSizeTool;
 exports.HighlightBoxComponent = HighlightBoxComponent;
@@ -4956,13 +5823,19 @@ exports.ImageComponent = ImageComponent;
 exports.ImageView = ImageView;
 exports.InsertTool = InsertTool;
 exports.ItalicTool = ItalicTool;
+exports.KatexComponent = KatexComponent;
+exports.KatexComponentView = KatexComponentView;
+exports.Keymap = Keymap;
 exports.LeftToolbar = LeftToolbar;
 exports.LeftToolbarPlugin = LeftToolbarPlugin;
+exports.LinkJump = LinkJump;
 exports.LinkTool = LinkTool;
 exports.ListComponent = ListComponent;
 exports.ListComponentView = ListComponentView;
 exports.Matcher = Matcher;
+exports.MenuHeading = MenuHeading;
 exports.MenuItem = MenuItem;
+exports.Organization = Organization;
 exports.OutputInjectionToken = OutputInjectionToken;
 exports.ParagraphComponent = ParagraphComponent;
 exports.ParagraphView = ParagraphView;
@@ -4982,6 +5855,7 @@ exports.ToolbarPlugin = ToolbarPlugin;
 exports.UnderlineTool = UnderlineTool;
 exports.VideoComponent = VideoComponent;
 exports.VideoView = VideoView;
+exports.atComponentLoader = atComponentLoader;
 exports.autoComplete = autoComplete;
 exports.backgroundColorFormatLoader = backgroundColorFormatLoader;
 exports.backgroundColorFormatter = backgroundColorFormatter;
@@ -4992,7 +5866,6 @@ exports.codeFormatLoader = codeFormatLoader;
 exports.codeFormatter = codeFormatter;
 exports.colorFormatLoader = colorFormatLoader;
 exports.colorFormatter = colorFormatter;
-exports.createXNote = createXNote;
 exports.deltaToBlock = deltaToBlock;
 exports.fontFamilyFormatLoader = fontFamilyFormatLoader;
 exports.fontFamilyFormatter = fontFamilyFormatter;
@@ -5005,15 +5878,19 @@ exports.imageComponentLoader = imageComponentLoader;
 exports.isSupportFont = isSupportFont;
 exports.italicFormatLoader = italicFormatLoader;
 exports.italicFormatter = italicFormatter;
+exports.katexComponentLoader = katexComponentLoader;
 exports.languageList = languageList;
 exports.linkFormatLoader = linkFormatLoader;
 exports.linkFormatter = linkFormatter;
 exports.listComponentLoader = listComponentLoader;
 exports.paragraphComponentLoader = paragraphComponentLoader;
+exports.registerAtShortcut = registerAtShortcut;
+exports.registerBlockquoteShortcut = registerBlockquoteShortcut;
 exports.registerBoldShortcut = registerBoldShortcut;
 exports.registerCodeShortcut = registerCodeShortcut;
 exports.registerHeadingShortcut = registerHeadingShortcut;
 exports.registerItalicShortcut = registerItalicShortcut;
+exports.registerListShortcut = registerListShortcut;
 exports.registerStrikeThroughShortcut = registerStrikeThroughShortcut;
 exports.registerTextAlignShortcut = registerTextAlignShortcut;
 exports.registerTextIndentShortcut = registerTextIndentShortcut;
@@ -5028,6 +5905,8 @@ exports.textAlignAttr = textAlignAttr;
 exports.textAlignAttrLoader = textAlignAttrLoader;
 exports.textIndentAttr = textIndentAttr;
 exports.textIndentAttrLoader = textIndentAttrLoader;
+exports.toBlockquote = toBlockquote;
+exports.toList = toList;
 exports.todolistComponentLoader = todolistComponentLoader;
 exports.toggleBold = toggleBold;
 exports.toggleCode = toggleCode;