@textbus/xnote 0.3.8 → 1.0.0

package/bundles/index.js

@@ -7,13 +7,14 @@ var core$1 = require('@textbus/core');
 var color = require('@tanbo/color');
 var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
+var MarkdownIt = require('markdown-it');
 var highlightjs = require('highlight.js');
 var uuid = require('uuid');
 var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$q = "vf-7d288d";
+var scopedId$r = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -203,7 +204,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$q, () => {
+    return scopedCss.withScopedCSS(scopedId$r, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -215,7 +216,7 @@ function Button(props) {
     });
 }
 
-var scopedId$p = "vf-d552b9";
+var scopedId$q = "vf-d552b9";
 
 class Picker {
     set hex(color$1) {
@@ -544,7 +545,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return scopedCss.withScopedCSS(scopedId$p, () => {
+    return scopedCss.withScopedCSS(scopedId$q, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxRuntime.jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -595,10 +596,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$o = "vf-ac7e8d";
+var scopedId$p = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$o, () => {
+    return scopedCss.withScopedCSS(scopedId$p, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -608,15 +609,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$n = "vf-ede279";
+var scopedId$o = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$n, () => {
+    return scopedCss.withScopedCSS(scopedId$o, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$m = "vf-d91ad6";
+var scopedId$n = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -725,16 +726,16 @@ function DragResize(props) {
         });
     }
     const sizeText = core.createSignal(`${component.state.width}*${component.state.height}`);
-    return scopedCss.withScopedCSS(scopedId$m, () => {
+    return scopedCss.withScopedCSS(scopedId$n, () => {
         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.jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$l = "vf-0fd06a";
+var scopedId$m = "vf-0fd06a";
 
-var scopedId$k = "vf-8a05e9";
+var scopedId$l = "vf-8a05e9";
 
 const DropdownMenuContainer = new core.InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = core.withAnnotation({
@@ -839,7 +840,7 @@ const DropdownMenuPortal = core.withAnnotation({
     function stopPropagation(ev) {
         ev.stopPropagation();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$k, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$l, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
@@ -918,7 +919,7 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$l, () => {
+        $render: scopedCss.withScopedCSS(scopedId$m, () => {
             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', {
                                         'has-arrow': props.arrow
                                     }], children: props.children }), props.arrow && jsxRuntime.jsx("div", { ref: arrowRef, class: "dropdown-btn-arrow", children: jsxRuntime.jsx(Button, { disabled: props.disabled, arrow: true }) })] }), isShow() &&
@@ -937,7 +938,7 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var scopedId$j = "vf-c32a7b";
+var scopedId$k = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -971,20 +972,20 @@ function Keymap(props) {
             arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
         }
     }
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(scopedId$k, () => {
         return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$i = "vf-acaa5f";
+var scopedId$j = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(scopedId$j, () => {
         return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$h = "vf-c3b9dc";
+var scopedId$i = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, null);
@@ -1004,7 +1005,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(scopedId$h, () => {
+    return scopedCss.withScopedCSS(scopedId$i, () => {
         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: [
@@ -1014,11 +1015,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$g = "vf-a23c47";
+var scopedId$h = "vf-a23c47";
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$g, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$h, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -1026,65 +1027,47 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$f = "vf-b7a2c8";
+var scopedId$g = "vf-b7a2c8";
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(scopedId$f, () => {
+    return scopedCss.withScopedCSS(scopedId$g, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$e = "vf-2a8a65";
+var scopedId$f = "vf-93d3ba";
 
-exports.RefreshService = class RefreshService {
+exports.EditorService = class EditorService {
     constructor() {
-        Object.defineProperty(this, "onRefresh", {
+        Object.defineProperty(this, "hideInlineToolbar", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "canShowLeftToolbar", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "onLeftToolbarCanVisibleChange", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new core$1.Subject()
         });
     }
-};
-exports.RefreshService = __decorate([
-    core.Injectable()
-], exports.RefreshService);
-
-const textAlignAttr = new core$1.Attribute('textAlign', {
-    render(node, formatValue) {
-        node.styles.set('text-align', formatValue);
-    }
-});
-const textAlignAttrLoader = {
-    match(element) {
-        return !!element.style.textAlign;
-    },
-    read(element) {
-        return {
-            attribute: textAlignAttr,
-            value: element.style.textAlign
-        };
+    changeLeftToolbarVisible(b) {
+        this.canShowLeftToolbar = b;
+        this.onLeftToolbarCanVisibleChange.next();
     }
 };
-function registerTextAlignShortcut(textbus) {
-    const keyboard = textbus.get(core$1.Keyboard);
-    const commander = textbus.get(core$1.Commander);
-    keyboard.addShortcut({
-        keymap: {
-            key: 'lrej'.split(''),
-            modKey: true
-        },
-        action(key) {
-            const valueMap = {
-                l: 'left',
-                r: 'right',
-                e: 'center',
-                j: 'justify'
-            };
-            commander.applyAttribute(textAlignAttr, valueMap[key]);
-        }
-    });
-}
+exports.EditorService = __decorate([
+    core.Injectable({
+        provideIn: 'root'
+    })
+], exports.EditorService);
 
 function useReadonly() {
     const controller = core.inject(core$1.Controller);
@@ -1101,6 +1084,110 @@ function useOutput() {
     return core.createSignal(core.inject(OutputInjectionToken));
 }
 
+class ImageComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+Object.defineProperty(ImageComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: core$1.ContentType.InlineComponent
+});
+Object.defineProperty(ImageComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: '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) {
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
+        return new ImageComponent({
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
+        });
+    }
+};
+
+class VideoComponent extends core$1.Component {
+    static fromJSON(_, json) {
+        return new VideoComponent(Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+Object.defineProperty(VideoComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: core$1.ContentType.InlineComponent
+});
+Object.defineProperty(VideoComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: '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) {
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
+        return new VideoComponent({
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
+    }
+};
+
 const headingAttr = new core$1.Attribute('Heading', {
     render(node, formatValue) {
         node.classes.add('xnote-' + formatValue);
@@ -1184,6 +1271,89 @@ function useBlockContent(slot) {
     });
 }
 
+const textIndentAttr = new core$1.Attribute('textIndent', {
+    render(node, formatValue) {
+        return node.styles.set('text-indent', formatValue * 24 + 'px');
+    }
+});
+const textIndentAttrLoader = {
+    match(element) {
+        return !!element.style.textIndent;
+    },
+    read(element) {
+        return {
+            attribute: textIndentAttr,
+            value: (parseInt(element.style.textIndent) || 0) / 24
+        };
+    }
+};
+function registerTextIndentShortcut(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: 'Tab',
+        },
+        action() {
+            const blocks = selection.getBlocks();
+            blocks.forEach(block => {
+                if (block.slot.parent instanceof SourceCodeComponent) {
+                    return;
+                }
+                const currentIndent = block.slot.getAttribute(textIndentAttr);
+                if (typeof currentIndent === 'number') {
+                    block.slot.setAttribute(textIndentAttr, currentIndent + 1);
+                }
+                else {
+                    block.slot.setAttribute(textIndentAttr, 1);
+                }
+            });
+        }
+    });
+    keyboard.addShortcut({
+        keymap: {
+            key: 'Tab',
+            shiftKey: true,
+        },
+        action() {
+            const blocks = selection.getBlocks();
+            blocks.forEach(block => {
+                const currentIndent = block.slot.getAttribute(textIndentAttr);
+                if (typeof currentIndent === 'number' && currentIndent > 1) {
+                    block.slot.setAttribute(textIndentAttr, currentIndent - 1);
+                }
+                else {
+                    block.slot.removeAttribute(textIndentAttr);
+                }
+            });
+        }
+    });
+    keyboard.addShortcut({
+        keymap: {
+            key: 'Backspace'
+        },
+        action() {
+            if (!selection.isCollapsed) {
+                return false;
+            }
+            const slot = selection.commonAncestorSlot;
+            const currentIndent = slot.getAttribute(textIndentAttr);
+            if (typeof currentIndent === 'number' && selection.startOffset === 0) {
+                if (currentIndent > 1) {
+                    slot.setAttribute(textIndentAttr, currentIndent - 1);
+                }
+                else {
+                    slot.removeAttribute(textIndentAttr);
+                }
+            }
+            else {
+                commander.delete(true);
+            }
+        }
+    });
+}
+
 function SlotRender(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const instance = core.getCurrentInstance();
@@ -2359,241 +2529,352 @@ const sourceCodeComponentLoader = {
     },
 };
 
-const textIndentAttr = new core$1.Attribute('textIndent', {
-    render(node, formatValue) {
-        return node.styles.set('text-indent', formatValue * 24 + 'px');
-    }
-});
-const textIndentAttrLoader = {
-    match(element) {
-        return !!element.style.textIndent;
-    },
-    read(element) {
-        return {
-            attribute: textIndentAttr,
-            value: (parseInt(element.style.textIndent) || 0) / 24
-        };
-    }
-};
-function registerTextIndentShortcut(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: 'Tab',
-        },
-        action() {
-            const blocks = selection.getBlocks();
-            blocks.forEach(block => {
-                if (block.slot.parent instanceof SourceCodeComponent) {
-                    return;
-                }
-                const currentIndent = block.slot.getAttribute(textIndentAttr);
-                if (typeof currentIndent === 'number') {
-                    block.slot.setAttribute(textIndentAttr, currentIndent + 1);
-                }
-                else {
-                    block.slot.setAttribute(textIndentAttr, 1);
-                }
-            });
-        }
-    });
-    keyboard.addShortcut({
-        keymap: {
-            key: 'Tab',
-            shiftKey: true,
-        },
-        action() {
-            const blocks = selection.getBlocks();
-            blocks.forEach(block => {
-                const currentIndent = block.slot.getAttribute(textIndentAttr);
-                if (typeof currentIndent === 'number' && currentIndent > 1) {
-                    block.slot.setAttribute(textIndentAttr, currentIndent - 1);
-                }
-                else {
-                    block.slot.removeAttribute(textIndentAttr);
-                }
-            });
-        }
-    });
-    keyboard.addShortcut({
-        keymap: {
-            key: 'Backspace'
-        },
-        action() {
-            if (!selection.isCollapsed) {
-                return false;
-            }
-            const slot = selection.commonAncestorSlot;
-            const currentIndent = slot.getAttribute(textIndentAttr);
-            if (typeof currentIndent === 'number' && selection.startOffset === 0) {
-                if (currentIndent > 1) {
-                    slot.setAttribute(textIndentAttr, currentIndent - 1);
-                }
-                else {
-                    slot.removeAttribute(textIndentAttr);
+let ToolService = class ToolService {
+    constructor(selection, controller) {
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "sub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.state = core.createSignal({
+            inSourceCode: false,
+            readonly: controller.readonly,
+            selectEmbed: false,
+        });
+        this.sub = core$1.merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
+            const { startSlot, endSlot, startOffset, endOffset } = selection;
+            let is = false;
+            if (startSlot && startSlot === endSlot && endOffset - startOffset === 1) {
+                const component = startSlot.getContentAtIndex(startOffset);
+                if (component instanceof VideoComponent || component instanceof ImageComponent) {
+                    is = true;
                 }
             }
-            else {
-                commander.delete(true);
+            const rawState = this.state();
+            const newState = {
+                selectEmbed: is,
+                readonly: controller.readonly,
+                inSourceCode: selection.commonAncestorComponent instanceof SourceCodeComponent
+            };
+            if (newState.selectEmbed !== rawState.selectEmbed ||
+                newState.readonly !== rawState.readonly ||
+                newState.inSourceCode !== rawState.inSourceCode) {
+                this.state.set(newState);
             }
-        }
-    });
-}
-
-class ImageComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-Object.defineProperty(ImageComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.InlineComponent
-});
-Object.defineProperty(ImageComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: '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) {
-        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
-        return new ImageComponent({
-            src: img.src,
-            width: img.style.width || 'auto',
-            height: img.style.height || 'auto'
         });
     }
+    destroy() {
+        this.sub.unsubscribe();
+    }
 };
+ToolService = __decorate([
+    core.Injectable(),
+    __metadata("design:paramtypes", [core$1.Selection,
+        core$1.Controller])
+], ToolService);
 
-class VideoComponent extends core$1.Component {
-    static fromJSON(_, json) {
-        return new VideoComponent(Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
+function useCommonState() {
+    const toolService = core.inject(ToolService);
+    return toolService.state;
 }
-Object.defineProperty(VideoComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.InlineComponent
-});
-Object.defineProperty(VideoComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: '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
-                    } }) }));
+
+/**
+ * 大模型接口
+ */
+class LLMService {
+}
+
+function usePopupPosition() {
+    const selectionBridge = core.inject(platformBrowser.SelectionBridge);
+    const container = core.inject(platformBrowser.VIEW_CONTAINER);
+    const selection = core.inject(core$1.Selection);
+    return function (width, height) {
+        const containerRect = container.getBoundingClientRect();
+        const rect = selectionBridge.getRect({
+            slot: selection.focusSlot,
+            offset: selection.focusOffset
+        }) || { left: 0, top: 0, width: 0, height: 0 };
+        let left = rect.left - width / 2;
+        const right = left + width;
+        if (right > containerRect.right) {
+            left = containerRect.right - width;
         }
-        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
-                    } }) }) }));
+        if (left < containerRect.left) {
+            left = containerRect.left;
+        }
+        let top = rect.top - height - 10;
+        if (top < 10) {
+            top = rect.top + rect.height + 10;
+        }
+        return {
+            left: left - containerRect.left,
+            top: top - containerRect.top,
+        };
     };
 }
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
-    },
-    read(element) {
-        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
-        return new VideoComponent({
-            src: video.src,
-            width: video.style.width || 'auto',
-            height: video.style.height || 'auto'
+
+function AiTool(props) {
+    const llmService = core.inject(LLMService);
+    const selection = core.inject(core$1.Selection);
+    const commander = core.inject(core$1.Commander);
+    const editorService = core.inject(exports.EditorService);
+    let isClickFromSelf = false;
+    const sub = core$1.fromEvent(document, 'click').subscribe(() => {
+        if (isClickFromSelf) {
+            isClickFromSelf = false;
+            return;
+        }
+        editorService.hideInlineToolbar = false;
+        viewModel.showModal = false;
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const viewModel = core.reactive({
+        showModal: false,
+        content: '',
+        type: 'translate'
+    });
+    const dropdownRef = core.createRef();
+    let subscription = new core$1.Subscription();
+    function continueContent() {
+        var _a;
+        viewModel.type = 'continue';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.continue({
+            text: document.getSelection().toString()
+        }).subscribe((text) => {
+            viewModel.content += text;
         });
     }
-};
-
-let ToolService = class ToolService {
-    constructor(selection, controller) {
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+    function polish() {
+        var _a;
+        viewModel.type = 'polish';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.polish({
+            text: document.getSelection().toString()
+        }).subscribe((text) => {
+            viewModel.content += text;
         });
-        Object.defineProperty(this, "sub", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+    }
+    function simplify() {
+        var _a;
+        viewModel.type = 'simplify';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.simplify({
+            text: document.getSelection().toString()
+        }).subscribe((text) => {
+            viewModel.content += text;
         });
-        this.state = core.createSignal({
-            inSourceCode: false,
-            readonly: controller.readonly,
-            selectEmbed: false,
+    }
+    function enrich() {
+        var _a;
+        viewModel.type = 'enrich';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.enrich({
+            text: document.getSelection().toString()
+        }).subscribe((text) => {
+            viewModel.content += text;
         });
-        this.sub = core$1.merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
-            const { startSlot, endSlot, startOffset, endOffset } = selection;
-            let is = false;
-            if (startSlot && startSlot === endSlot && endOffset - startOffset === 1) {
-                const component = startSlot.getContentAtIndex(startOffset);
-                if (component instanceof VideoComponent || component instanceof ImageComponent) {
-                    is = true;
+    }
+    function translate(lang) {
+        var _a;
+        viewModel.type = 'translate';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.translate({
+            text: document.getSelection().toString(),
+            targetLanguage: lang
+        }).subscribe((text) => {
+            viewModel.content += text;
+        });
+    }
+    function summarize() {
+        var _a;
+        viewModel.type = 'summarize';
+        viewModel.content = '';
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+        viewModel.showModal = true;
+        dropdownRef.current.isShow(false);
+        subscription.unsubscribe();
+        subscription = llmService.summarize({
+            text: document.getSelection().toString(),
+        }).subscribe((text) => {
+            viewModel.content += text;
+        });
+    }
+    const aiContentRef = core.createRef();
+    const parser = core.inject(platformBrowser.Parser);
+    function insert() {
+        var _a;
+        selection.collapse();
+        aiContentRef.current.childNodes.forEach(node => {
+            const slot = parser.parse(node instanceof HTMLElement ? node : node.textContent || '', new core$1.Slot([
+                core$1.ContentType.BlockComponent,
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.Text
+            ]));
+            commander.paste(slot, aiContentRef.current.innerText);
+        });
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+    function replace() {
+        var _a;
+        if (!selection.isCollapsed) {
+            commander.delete();
+        }
+        insert();
+        (_a = props.hideToolbar) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+    const md = new MarkdownIt({
+        html: true,
+        breaks: true,
+        linkify: true
+    });
+    function renderMarkdown(markdown) {
+        const html = md.render(markdown);
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = html;
+        function parseNode(node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.textContent;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const element = node;
+                const TagName = element.tagName.toLowerCase();
+                const children = Array.from(element.childNodes).map(parseNode);
+                const props = {};
+                if (element.className) {
+                    props.class = element.className;
+                }
+                switch (TagName) {
+                    case 'h1':
+                    case 'h2':
+                    case 'h3':
+                    case 'h4':
+                    case 'h5':
+                    case 'h6':
+                    case 'p':
+                    case 'strong':
+                    case 'em':
+                    case 'code':
+                    case 'pre':
+                    case 'blockquote':
+                    case 'ul':
+                    case 'ol':
+                    case 'li':
+                    case 'span':
+                    case 'div':
+                        return jsxRuntime.jsx(TagName, Object.assign({}, props, { children: children }));
+                    case 'br':
+                        return jsxRuntime.jsx("br", {});
+                    case 'a':
+                        props.href = element.getAttribute('href') || '';
+                        return jsxRuntime.jsx("a", Object.assign({}, props, { children: children }));
+                    case 'img':
+                        props.src = element.getAttribute('src') || '';
+                        props.alt = element.getAttribute('alt') || '';
+                        return jsxRuntime.jsx("img", Object.assign({}, props));
+                    case 'hr':
+                        return jsxRuntime.jsx("hr", {});
+                    default:
+                        return jsxRuntime.jsx("span", Object.assign({}, props, { children: children }));
                 }
             }
-            this.state.set({
-                selectEmbed: is,
-                readonly: controller.readonly,
-                inSourceCode: selection.commonAncestorComponent instanceof SourceCodeComponent
-            });
-        });
+            return null;
+        }
+        return Array.from(tempDiv.childNodes).map(parseNode);
     }
-    destroy() {
-        this.sub.unsubscribe();
+    const commonState = useCommonState();
+    const popupPosition = usePopupPosition();
+    return scopedCss.withScopedCSS(scopedId$f, () => {
+        const rect = popupPosition(400, 210);
+        const b = commonState().inSourceCode || commonState().readonly && !selection.isCollapsed;
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Dropdown, { ref: dropdownRef, disabled: b, width: '160px', menu: !viewModel.showModal ? jsxRuntime.jsxs("div", { onClick: () => isClickFromSelf = true, children: [jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-continuation" }), onClick: continueContent, children: "\u7EED\u5199" }), jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-magic-wand" }), onClick: polish, children: "\u6DA6\u8272" }), jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-simplify" }), onClick: simplify, children: "\u7B80\u5316\u5185\u5BB9" }), jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-enrich" }), onClick: enrich, children: "\u4E30\u5BCC\u5185\u5BB9" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: {
+                                    display: 'block'
+                                }, abreast: true, menu: jsxRuntime.jsxs("div", { onClick: () => isClickFromSelf = true, children: [jsxRuntime.jsx(MenuItem, { onClick: () => translate('中文'), children: "\u4E2D\u6587" }), jsxRuntime.jsx(MenuItem, { onClick: () => translate('英语'), children: "\u82F1\u8BED" }), jsxRuntime.jsx(MenuItem, { onClick: () => translate('西班牙语'), children: "\u897F\u73ED\u7259\u8BED" }), jsxRuntime.jsx(MenuItem, { onClick: () => translate('日语'), children: "\u65E5\u8BED" })] }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-translation" }), children: "\u7FFB\u8BD1" }) }), jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-summary" }), onClick: summarize, children: "\u603B\u7ED3" })] }) : null, children: jsxRuntime.jsx(Button, { arrow: true, disabled: b, children: jsxRuntime.jsx("span", { class: "xnote-icon-ai" }) }) }), viewModel.showModal &&
+                    jsxRuntime.jsx(Popup, { left: rect.left, top: rect.top, children: jsxRuntime.jsxs("div", { onClick: () => {
+                                isClickFromSelf = true;
+                            }, class: "input-group", children: [jsxRuntime.jsx("div", { class: "ai-content", ref: aiContentRef, children: renderMarkdown(viewModel.content) }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { type: "button", onClick: replace, children: "\u66FF\u6362" }), jsxRuntime.jsx(Button, { type: "button", onClick: insert, children: "\u63D2\u5165" })] })] }) })] }));
+    });
+}
+
+var scopedId$e = "vf-2a8a65";
+
+exports.RefreshService = class RefreshService {
+    constructor() {
+        Object.defineProperty(this, "onRefresh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new core$1.Subject()
+        });
     }
 };
-ToolService = __decorate([
-    core.Injectable(),
-    __metadata("design:paramtypes", [core$1.Selection,
-        core$1.Controller])
-], ToolService);
+exports.RefreshService = __decorate([
+    core.Injectable()
+], exports.RefreshService);
 
-function useCommonState() {
-    const toolService = core.inject(ToolService);
-    return toolService.state;
+const textAlignAttr = new core$1.Attribute('textAlign', {
+    render(node, formatValue) {
+        node.styles.set('text-align', formatValue);
+    }
+});
+const textAlignAttrLoader = {
+    match(element) {
+        return !!element.style.textAlign;
+    },
+    read(element) {
+        return {
+            attribute: textAlignAttr,
+            value: element.style.textAlign
+        };
+    }
+};
+function registerTextAlignShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    const commander = textbus.get(core$1.Commander);
+    keyboard.addShortcut({
+        keymap: {
+            key: 'lrej'.split(''),
+            modKey: true
+        },
+        action(key) {
+            const valueMap = {
+                l: 'left',
+                r: 'right',
+                e: 'center',
+                j: 'justify'
+            };
+            commander.applyAttribute(textAlignAttr, valueMap[key]);
+        }
+    });
 }
 
 function AttrTool(props) {
@@ -3505,6 +3786,51 @@ const todolistComponentLoader = {
     }
 };
 
+const underlineFormatter = new core$1.Formatter('underline', {
+    columned: true,
+    render(children) {
+        return core$1.createVNode('u', null, children);
+    }
+});
+function toggleUnderline(textbus) {
+    const controller = textbus.get(core$1.Controller);
+    if (controller.readonly) {
+        return;
+    }
+    const query = textbus.get(core$1.Query);
+    const commander = textbus.get(core$1.Commander);
+    const state = query.queryFormat(underlineFormatter);
+    if (state.state === core$1.QueryStateType.Normal) {
+        commander.applyFormat(underlineFormatter, true);
+    }
+    else {
+        commander.unApplyFormat(underlineFormatter);
+    }
+}
+function registerUnderlineShortcut(textbus) {
+    const keyboard = textbus.get(core$1.Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            modKey: true,
+            key: 'u'
+        },
+        action: () => {
+            toggleUnderline(textbus);
+        }
+    });
+}
+const underlineFormatLoader = {
+    match(element) {
+        return element.tagName === 'U';
+    },
+    read() {
+        return {
+            formatter: underlineFormatter,
+            value: true
+        };
+    }
+};
+
 function toList(textbus, type) {
     const commander = textbus.get(core$1.Commander);
     commander.transform({
@@ -3704,6 +4030,7 @@ function numberToLetter(num) {
 }
 function ListComponentView(props) {
     const component = props.component;
+    const adapter = core.inject(platformBrowser.DomAdapter);
     function reorder(is) {
         component.state.reorder = is;
         const parentSlot = component.parent;
@@ -3768,15 +4095,24 @@ function ListComponentView(props) {
                 icon = numberToLetter(listStep) + '.';
             }
         }
+        const formatters = component.state.slot.extractFormatsByIndex(0).filter(i => {
+            const formatter = i[0];
+            return formatter !== colorFormatter &&
+                formatter !== underlineFormatter &&
+                formatter !== strikeThroughFormatter;
+        });
+        const iconVEl = core$1.Slot.formatsToTree(formatters, [new core$1.VTextNode(icon)], readonly() || output());
+        const iconEl = iconVEl ? adapter.vElementToViewElement(iconVEl) : icon;
+        const heading = component.state.slot.getAttribute(headingAttr);
         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: {
+            }, children: jsxRuntime.jsx("li", { style: {
                     justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
-                    textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-                }, 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 }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: "xnote-list-content", renderEnv: readonly() || output() })] }) }));
+                    textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0,
+                }, children: jsxRuntime.jsxs("div", { class: ['xnote-list-inner'], children: [jsxRuntime.jsx("div", { class: ['xnote-list-type', heading ? `xnote-${heading}` : ''], children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
+                                jsxRuntime.jsx("span", { class: "xnote-order-btn", children: iconEl })
+                                :
+                                    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', fontSize: 'inherit', height: 'auto', appearance: 'none', padding: '0' }, children: iconEl }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: "xnote-list-content", renderEnv: readonly() || output() })] }) }) }));
     };
 }
 const listComponentLoader = {
@@ -3900,6 +4236,11 @@ function useBlockTransform() {
             case 'h4':
             case 'h5':
             case 'h6':
+                selection.getBlocks().forEach((block) => {
+                    block.slot.cleanFormats(f => {
+                        return f !== fontSizeFormatter;
+                    });
+                });
                 commander.applyAttribute(headingAttr, value);
                 break;
             case 'paragraph':
@@ -4351,51 +4692,6 @@ const superscriptFormatLoader = {
     }
 };
 
-const underlineFormatter = new core$1.Formatter('underline', {
-    columned: true,
-    render(children) {
-        return core$1.createVNode('u', null, children);
-    }
-});
-function toggleUnderline(textbus) {
-    const controller = textbus.get(core$1.Controller);
-    if (controller.readonly) {
-        return;
-    }
-    const query = textbus.get(core$1.Query);
-    const commander = textbus.get(core$1.Commander);
-    const state = query.queryFormat(underlineFormatter);
-    if (state.state === core$1.QueryStateType.Normal) {
-        commander.applyFormat(underlineFormatter, true);
-    }
-    else {
-        commander.unApplyFormat(underlineFormatter);
-    }
-}
-function registerUnderlineShortcut(textbus) {
-    const keyboard = textbus.get(core$1.Keyboard);
-    keyboard.addShortcut({
-        keymap: {
-            modKey: true,
-            key: 'u'
-        },
-        action: () => {
-            toggleUnderline(textbus);
-        }
-    });
-}
-const underlineFormatLoader = {
-    match(element) {
-        return element.tagName === 'U';
-    },
-    read() {
-        return {
-            formatter: underlineFormatter,
-            value: true
-        };
-    }
-};
-
 function BoldTool() {
     const query = core.inject(core$1.Query);
     const textbus = core.inject(core$1.Textbus);
@@ -5008,44 +5304,9 @@ function ItalicTool() {
 
 var scopedId$c = "vf-e74208";
 
-exports.EditorService = class EditorService {
-    constructor() {
-        Object.defineProperty(this, "hideInlineToolbar", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "canShowLeftToolbar", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "onLeftToolbarCanVisibleChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 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 value = core.createSignal('');
     function setLink(ev) {
@@ -5069,19 +5330,16 @@ function LinkTool(props) {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
+    const popupPosition = usePopupPosition();
     return scopedCss.withScopedCSS(scopedId$c, () => {
-        const containerRect = container.getBoundingClientRect();
-        const rect = isShow() ? selectionBridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        }) : {};
+        const rect = popupPosition(224, 38);
         return (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(Button, { disabled: commonState().inSourceCode || commonState().readonly, 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: () => {
+                    jsxRuntime.jsx(Popup, { left: rect.left, top: rect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
                             }, class: "input-group", children: [jsxRuntime.jsx("input", { onChange: ev => {
                                         value.set(ev.target.value);
@@ -6134,6 +6392,7 @@ const InlineToolbar = core.withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
+    const llmService = core.inject(LLMService, null);
     return scopedCss.withScopedCSS(scopedId$8, () => {
         return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], ref: toolbarRef, style: {
                 left: viewPosition.left + 'px',
@@ -6142,7 +6401,7 @@ const InlineToolbar = core.withAnnotation({
                 opacity: viewPosition.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: viewPosition.transitionDuration + 's'
-            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: [llmService && jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AiTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -6199,8 +6458,9 @@ const StaticToolbar = core.withAnnotation({
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const llmService = core.inject(LLMService, null);
     return scopedCss.withScopedCSS(scopedId$7, () => {
-        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), llmService && jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AiTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -6247,7 +6507,7 @@ class StaticToolbarPlugin {
     }
 }
 
-var scopedId$6 = "vf-25fd9c";
+var scopedId$6 = "vf-927bfc";
 
 const SuspensionToolbar = core.withAnnotation({
     providers: [exports.RefreshService, ToolService]
@@ -6282,14 +6542,15 @@ const SuspensionToolbar = core.withAnnotation({
     }), core$1.delay(100)).subscribe(() => {
         styles.opacity = 1;
     }));
+    const llmService = core.inject(LLMService, null);
     return scopedCss.withScopedCSS(scopedId$6, () => {
-        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme, {
+        return (jsxRuntime.jsx("div", { class: ['toolbar', props.theme, {
                     suspension: styles.top === 0 ? '' : 'suspension'
                 }], style: {
                 top: styles.top + 'px',
                 opacity: styles.opacity,
                 pointerEvents: styles.opacity === 0 ? 'none' : 'initial',
-            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: jsxRuntime.jsxs("div", { class: "toolbar-tools", children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), llmService && jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AiTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }) }));
     });
 });
 
@@ -6317,6 +6578,7 @@ class SuspensionToolbarPlugin {
     setup(injector) {
         const host = injector.get(platformBrowser.VIEW_CONTAINER);
         const container = document.createElement('div');
+        container.style.cssText = 'display:flex;justify-content:center;';
         this.app = platformBrowser$1.createApp(jsxRuntime.jsx(SuspensionToolbar, { theme: this.options.theme }), {
             context: injector
         });
@@ -8094,6 +8356,7 @@ class Editor extends core$1.Textbus {
     }
 }
 
+exports.AiTool = AiTool;
 exports.AtComponent = AtComponent;
 exports.AtComponentView = AtComponentView;
 exports.AttrTool = AttrTool;
@@ -8129,6 +8392,7 @@ exports.ItalicTool = ItalicTool;
 exports.KatexComponent = KatexComponent;
 exports.KatexComponentView = KatexComponentView;
 exports.Keymap = Keymap;
+exports.LLMService = LLMService;
 exports.LeftToolbar = LeftToolbar;
 exports.LeftToolbarPlugin = LeftToolbarPlugin;
 exports.LinkJump = LinkJump;