@textbus/xnote 0.3.9 → 1.0.1

package/bundles/index.esm.js

@@ -1,17 +1,18 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
 import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, watch, reactive, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, createContext } from '@viewfly/core';
-import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, createVNode, merge, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDetach, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Subject, fromEvent, Selection, Subscription, Controller, ContentType, Component, Attribute, Keyboard, Commander, useContext, onBreak, onContentInsert, createVNode, merge, Slot, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDetach, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { normalizeHex, hex2Hsl, hex2Rgb, hex2Hsv, hsl2Hex, hsl2Hsv, hsl2Rgb, rgb2Hsl, rgb2Hex, rgb2Hsv, hsv2Hex, hsv2Hsl, hsv2Rgb, any2Hsl, parseCss } from '@tanbo/color';
-import { VIEW_CONTAINER, isMac, DomAdapter, Input, BrowserModule, SelectionBridge, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
+import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, Parser, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
+import MarkdownIt from 'markdown-it';
 import highlightjs from 'highlight.js';
 import { v4 } from 'uuid';
 import Katex from 'katex';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { MessageBus, CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$q = "vf-7d288d";
+var scopedId$r = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -201,7 +202,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$q, () => {
+    return withScopedCSS(scopedId$r, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -213,7 +214,7 @@ function Button(props) {
     });
 }
 
-var scopedId$p = "vf-d552b9";
+var scopedId$q = "vf-d552b9";
 
 class Picker {
     set hex(color) {
@@ -542,7 +543,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return withScopedCSS(scopedId$p, () => {
+    return withScopedCSS(scopedId$q, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -593,10 +594,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$o = "vf-ac7e8d";
+var scopedId$p = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$o, () => {
+    return withScopedCSS(scopedId$p, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -606,15 +607,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$n = "vf-ede279";
+var scopedId$o = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$n, () => {
+    return withScopedCSS(scopedId$o, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$m = "vf-d91ad6";
+var scopedId$n = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -723,16 +724,16 @@ function DragResize(props) {
         });
     }
     const sizeText = createSignal(`${component.state.width}*${component.state.height}`);
-    return withScopedCSS(scopedId$m, () => {
+    return withScopedCSS(scopedId$n, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$l = "vf-0fd06a";
+var scopedId$m = "vf-0fd06a";
 
-var scopedId$k = "vf-8a05e9";
+var scopedId$l = "vf-8a05e9";
 
 const DropdownMenuContainer = new InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = withAnnotation({
@@ -837,7 +838,7 @@ const DropdownMenuPortal = withAnnotation({
     function stopPropagation(ev) {
         ev.stopPropagation();
     }
-    return createPortal(withScopedCSS(scopedId$k, () => {
+    return createPortal(withScopedCSS(scopedId$l, () => {
         return (jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", style: {
@@ -916,7 +917,7 @@ const Dropdown = withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: withScopedCSS(scopedId$l, () => {
+        $render: withScopedCSS(scopedId$m, () => {
             return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: ['dropdown-btn-inner', {
                                         'has-arrow': props.arrow
                                     }], children: props.children }), props.arrow && jsx("div", { ref: arrowRef, class: "dropdown-btn-arrow", children: jsx(Button, { disabled: props.disabled, arrow: true }) })] }), isShow() &&
@@ -935,7 +936,7 @@ const Dropdown = withAnnotation({
     };
 });
 
-var scopedId$j = "vf-c32a7b";
+var scopedId$k = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -969,20 +970,20 @@ function Keymap(props) {
             arr.push(jsx("span", { children: keymap.key }));
         }
     }
-    return withScopedCSS(scopedId$j, () => {
+    return withScopedCSS(scopedId$k, () => {
         return (jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$i = "vf-acaa5f";
+var scopedId$j = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return withScopedCSS(scopedId$i, () => {
+    return withScopedCSS(scopedId$j, () => {
         return (jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$h = "vf-c3b9dc";
+var scopedId$i = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = inject(DropdownContextService, null);
@@ -1002,7 +1003,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return withScopedCSS(scopedId$h, () => {
+    return withScopedCSS(scopedId$i, () => {
         return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { class: "menu-item-content", children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsx("div", { children: props.desc })] }), props.arrow ?
                     jsx("div", { class: "arrow", children: jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsx("div", { class: [
@@ -1012,11 +1013,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$g = "vf-a23c47";
+var scopedId$h = "vf-a23c47";
 
 function Popup(props) {
     const host = inject(VIEW_CONTAINER);
-    return createPortal(withScopedCSS(scopedId$g, () => {
+    return createPortal(withScopedCSS(scopedId$h, () => {
         return (jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -1024,65 +1025,47 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$f = "vf-b7a2c8";
+var scopedId$g = "vf-b7a2c8";
 
 function ToolbarItem(props) {
-    return withScopedCSS(scopedId$f, () => {
+    return withScopedCSS(scopedId$g, () => {
         return (jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$e = "vf-2a8a65";
+var scopedId$f = "vf-93d3ba";
 
-let RefreshService = class RefreshService {
+let 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 Subject()
         });
     }
-};
-RefreshService = __decorate([
-    Injectable()
-], RefreshService);
-
-const textAlignAttr = new 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(Keyboard);
-    const commander = textbus.get(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]);
-        }
-    });
-}
+EditorService = __decorate([
+    Injectable({
+        provideIn: 'root'
+    })
+], EditorService);
 
 function useReadonly() {
     const controller = inject(Controller);
@@ -1099,6 +1082,110 @@ function useOutput() {
     return createSignal(inject(OutputInjectionToken));
 }
 
+class ImageComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+Object.defineProperty(ImageComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
+Object.defineProperty(ImageComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'ImageComponent'
+});
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: 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 Component {
+    static fromJSON(_, json) {
+        return new VideoComponent(Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+Object.defineProperty(VideoComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
+Object.defineProperty(VideoComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'VideoComponent'
+});
+function VideoView(props) {
+    const { name, state } = props.component;
+    const videoRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: 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 Attribute('Heading', {
     render(node, formatValue) {
         node.classes.add('xnote-' + formatValue);
@@ -1182,6 +1269,89 @@ function useBlockContent(slot) {
     });
 }
 
+const textIndentAttr = new 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(Keyboard);
+    const selection = textbus.get(Selection);
+    const commander = textbus.get(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 = inject(DomAdapter);
     const instance = getCurrentInstance();
@@ -2278,270 +2448,83 @@ function SourceCodeView(props) {
                                         children = nodesToVNodes(item.slot, nodes, 0);
                                         if (!children.length) {
                                             const br = createVNode('br');
-                                            br.location = {
-                                                slot: item.slot,
-                                                startIndex: 0,
-                                                endIndex: 1
-                                            };
-                                            children.push(br);
-                                        }
-                                    }
-                                    return createVNode('div', {
-                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : ''),
-                                        key: item.slot.id
-                                    }, [
-                                        createVNode('span', { class: 'xnote-source-code-line-content' }, children)
-                                    ]);
-                                }, readonly());
-                            }) }), jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
-    };
-}
-function nodesToVNodes(slot, nodes, index) {
-    return nodes.map(i => {
-        const location = {
-            slot,
-            startIndex: index,
-            endIndex: index + i.textContent.length
-        };
-        if (i.nodeType === Node.ELEMENT_NODE) {
-            const childNodes = Array.from(i.childNodes);
-            const vEle = createVNode('span', {
-                class: i.className
-            }, nodesToVNodes(slot, childNodes, index));
-            index = location.endIndex;
-            vEle.location = Object.assign({}, location);
-            return vEle;
-        }
-        index = location.endIndex;
-        const textNode = new VTextNode(i.textContent);
-        textNode.location = location;
-        return textNode;
-    });
-}
-const sourceCodeComponentLoader = {
-    match(element, returnableContentTypes) {
-        return returnableContentTypes.includes(ContentType.BlockComponent) &&
-            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
-                element.tagName === 'PRE');
-    },
-    read(el) {
-        let slots = [];
-        if (el.tagName === 'DIV') {
-            const lines = el.querySelectorAll('.xnote-source-code-line');
-            slots = Array.from(lines).map(i => {
-                const code = i.innerText.replace(/[\s\n]+$/, '');
-                const item = createCodeSlot();
-                const slot = item.slot;
-                item.emphasize = i.classList.contains('xnote-source-code-line-emphasize');
-                slot.insert(code);
-                return item;
-            });
-        }
-        else {
-            el.querySelectorAll('br').forEach(br => {
-                br.parentNode.replaceChild(document.createTextNode('\n'), br);
-            });
-            slots = el.innerText.split('\n').map(code => {
-                const item = createCodeSlot();
-                item.slot.insert(code);
-                return item;
-            });
-        }
-        return new SourceCodeComponent({
-            lang: el.dataset.lang || '',
-            theme: el.dataset.theme || '',
-            lineNumber: el.dataset.lineNumber === 'true',
-            autoBreak: el.dataset.autoBreak === 'true',
-            slots
-        });
-    },
-};
-
-const textIndentAttr = new 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(Keyboard);
-    const selection = textbus.get(Selection);
-    const commander = textbus.get(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);
-            }
-        }
-    });
-}
-
-class ImageComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-Object.defineProperty(ImageComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: ContentType.InlineComponent
-});
-Object.defineProperty(ImageComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'ImageComponent'
-});
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: 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 Component {
-    static fromJSON(_, json) {
-        return new VideoComponent(Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-Object.defineProperty(VideoComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: ContentType.InlineComponent
-});
-Object.defineProperty(VideoComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'VideoComponent'
-});
-function VideoView(props) {
-    const { name, state } = props.component;
-    const videoRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
+                                            br.location = {
+                                                slot: item.slot,
+                                                startIndex: 0,
+                                                endIndex: 1
+                                            };
+                                            children.push(br);
+                                        }
+                                    }
+                                    return createVNode('div', {
+                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : ''),
+                                        key: item.slot.id
+                                    }, [
+                                        createVNode('span', { class: 'xnote-source-code-line-content' }, children)
+                                    ]);
+                                }, readonly());
+                            }) }), jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
     };
 }
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
+function nodesToVNodes(slot, nodes, index) {
+    return nodes.map(i => {
+        const location = {
+            slot,
+            startIndex: index,
+            endIndex: index + i.textContent.length
+        };
+        if (i.nodeType === Node.ELEMENT_NODE) {
+            const childNodes = Array.from(i.childNodes);
+            const vEle = createVNode('span', {
+                class: i.className
+            }, nodesToVNodes(slot, childNodes, index));
+            index = location.endIndex;
+            vEle.location = Object.assign({}, location);
+            return vEle;
+        }
+        index = location.endIndex;
+        const textNode = new VTextNode(i.textContent);
+        textNode.location = location;
+        return textNode;
+    });
+}
+const sourceCodeComponentLoader = {
+    match(element, returnableContentTypes) {
+        return returnableContentTypes.includes(ContentType.BlockComponent) &&
+            ((element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
+                element.tagName === 'PRE');
     },
-    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'
+    read(el) {
+        let slots = [];
+        if (el.tagName === 'DIV') {
+            const lines = el.querySelectorAll('.xnote-source-code-line');
+            slots = Array.from(lines).map(i => {
+                const code = i.innerText.replace(/[\s\n]+$/, '');
+                const item = createCodeSlot();
+                const slot = item.slot;
+                item.emphasize = i.classList.contains('xnote-source-code-line-emphasize');
+                slot.insert(code);
+                return item;
+            });
+        }
+        else {
+            el.querySelectorAll('br').forEach(br => {
+                br.parentNode.replaceChild(document.createTextNode('\n'), br);
+            });
+            slots = el.innerText.split('\n').map(code => {
+                const item = createCodeSlot();
+                item.slot.insert(code);
+                return item;
+            });
+        }
+        return new SourceCodeComponent({
+            lang: el.dataset.lang || '',
+            theme: el.dataset.theme || '',
+            lineNumber: el.dataset.lineNumber === 'true',
+            autoBreak: el.dataset.autoBreak === 'true',
+            slots
         });
-    }
+    },
 };
 
 let ToolService = class ToolService {
@@ -2572,11 +2555,17 @@ let ToolService = class ToolService {
                     is = true;
                 }
             }
-            this.state.set({
+            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);
+            }
         });
     }
     destroy() {
@@ -2594,6 +2583,299 @@ function useCommonState() {
     return toolService.state;
 }
 
+/**
+ * 大模型接口
+ */
+class LLMService {
+}
+
+function usePopupPosition() {
+    const selectionBridge = inject(SelectionBridge);
+    const container = inject(VIEW_CONTAINER);
+    const selection = inject(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;
+        }
+        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,
+        };
+    };
+}
+
+function AiTool(props) {
+    const llmService = inject(LLMService);
+    const selection = inject(Selection);
+    const commander = inject(Commander);
+    const editorService = inject(EditorService);
+    let isClickFromSelf = false;
+    const sub = fromEvent(document, 'click').subscribe(() => {
+        if (isClickFromSelf) {
+            isClickFromSelf = false;
+            return;
+        }
+        editorService.hideInlineToolbar = false;
+        viewModel.showModal = false;
+    });
+    onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    const viewModel = reactive({
+        showModal: false,
+        content: '',
+        type: 'translate'
+    });
+    const dropdownRef = createRef();
+    let subscription = new 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;
+        });
+    }
+    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;
+        });
+    }
+    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;
+        });
+    }
+    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;
+        });
+    }
+    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 = createRef();
+    const parser = inject(Parser);
+    function insert() {
+        var _a;
+        selection.collapse();
+        aiContentRef.current.childNodes.forEach(node => {
+            const slot = parser.parse(node instanceof HTMLElement ? node : node.textContent || '', new Slot([
+                ContentType.BlockComponent,
+                ContentType.InlineComponent,
+                ContentType.Text
+            ]));
+            commander.paste(slot, aiContentRef.current.innerText);
+        });
+        viewModel.showModal = false;
+        (_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 jsx(TagName, Object.assign({}, props, { children: children }));
+                    case 'br':
+                        return jsx("br", {});
+                    case 'a':
+                        props.href = element.getAttribute('href') || '';
+                        return jsx("a", Object.assign({}, props, { children: children }));
+                    case 'img':
+                        props.src = element.getAttribute('src') || '';
+                        props.alt = element.getAttribute('alt') || '';
+                        return jsx("img", Object.assign({}, props));
+                    case 'hr':
+                        return jsx("hr", {});
+                    default:
+                        return jsx("span", Object.assign({}, props, { children: children }));
+                }
+            }
+            return null;
+        }
+        return Array.from(tempDiv.childNodes).map(parseNode);
+    }
+    const commonState = useCommonState();
+    const popupPosition = usePopupPosition();
+    return withScopedCSS(scopedId$f, () => {
+        const rect = popupPosition(400, 210);
+        const b = commonState().inSourceCode || commonState().readonly && !selection.isCollapsed;
+        return (jsxs(Fragment, { children: [jsx(Dropdown, { ref: dropdownRef, disabled: b, width: '160px', menu: !viewModel.showModal ? jsxs("div", { onClick: () => isClickFromSelf = true, children: [jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-continuation" }), onClick: continueContent, children: "\u7EED\u5199" }), jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-magic-wand" }), onClick: polish, children: "\u6DA6\u8272" }), jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-simplify" }), onClick: simplify, children: "\u7B80\u5316\u5185\u5BB9" }), jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-enrich" }), onClick: enrich, children: "\u4E30\u5BCC\u5185\u5BB9" }), jsx(Divider, {}), jsx(Dropdown, { style: {
+                                    display: 'block'
+                                }, abreast: true, menu: jsxs("div", { onClick: () => isClickFromSelf = true, children: [jsx(MenuItem, { onClick: () => translate('中文'), children: "\u4E2D\u6587" }), jsx(MenuItem, { onClick: () => translate('英语'), children: "\u82F1\u8BED" }), jsx(MenuItem, { onClick: () => translate('西班牙语'), children: "\u897F\u73ED\u7259\u8BED" }), jsx(MenuItem, { onClick: () => translate('日语'), children: "\u65E5\u8BED" })] }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-translation" }), children: "\u7FFB\u8BD1" }) }), jsx(MenuItem, { icon: jsx("span", { class: "xnote-icon-summary" }), onClick: summarize, children: "\u603B\u7ED3" })] }) : null, children: jsx(Button, { arrow: true, disabled: b, children: jsx("span", { class: "xnote-icon-ai" }) }) }), viewModel.showModal &&
+                    jsx(Popup, { left: rect.left, top: rect.top, children: jsxs("div", { onClick: () => {
+                                isClickFromSelf = true;
+                            }, class: "input-group", children: [jsx("div", { class: "ai-content", ref: aiContentRef, children: renderMarkdown(viewModel.content) }), jsxs("div", { class: "btn-group", children: [jsx(Button, { type: "button", onClick: replace, children: "\u66FF\u6362" }), jsx(Button, { type: "button", onClick: insert, children: "\u63D2\u5165" })] })] }) })] }));
+    });
+}
+
+var scopedId$e = "vf-2a8a65";
+
+let RefreshService = class RefreshService {
+    constructor() {
+        Object.defineProperty(this, "onRefresh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+    }
+};
+RefreshService = __decorate([
+    Injectable()
+], RefreshService);
+
+const textAlignAttr = new 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(Keyboard);
+    const commander = textbus.get(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) {
     const commander = inject(Commander);
     const selection = inject(Selection);
@@ -5021,44 +5303,9 @@ function ItalicTool() {
 
 var scopedId$c = "vf-e74208";
 
-let 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 Subject()
-        });
-    }
-    changeLeftToolbarVisible(b) {
-        this.canShowLeftToolbar = b;
-        this.onLeftToolbarCanVisibleChange.next();
-    }
-};
-EditorService = __decorate([
-    Injectable({
-        provideIn: 'root'
-    })
-], EditorService);
-
 function LinkTool(props) {
-    const selectionBridge = inject(SelectionBridge);
-    const selection = inject(Selection);
     const commander = inject(Commander);
     const editorService = inject(EditorService);
-    const container = inject(VIEW_CONTAINER);
     const isShow = createSignal(false);
     const value = createSignal('');
     function setLink(ev) {
@@ -5082,19 +5329,16 @@ function LinkTool(props) {
         sub.unsubscribe();
     });
     const commonState = useCommonState();
+    const popupPosition = usePopupPosition();
     return withScopedCSS(scopedId$c, () => {
-        const containerRect = container.getBoundingClientRect();
-        const rect = isShow() ? selectionBridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        }) : {};
+        const rect = popupPosition(224, 38);
         return (jsxs("span", { children: [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: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
-                    jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
+                    jsx(Popup, { left: rect.left, top: rect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
                             }, class: "input-group", children: [jsx("input", { onChange: ev => {
                                         value.set(ev.target.value);
@@ -6147,6 +6391,7 @@ const InlineToolbar = withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
+    const llmService = inject(LLMService, null);
     return withScopedCSS(scopedId$8, () => {
         return (jsxs("div", { class: ['toolbar', props.theme], ref: toolbarRef, style: {
                 left: viewPosition.left + 'px',
@@ -6155,7 +6400,7 @@ const InlineToolbar = withAnnotation({
                 opacity: viewPosition.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: viewPosition.transitionDuration + 's'
-            }, children: [jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: [llmService && jsx(ToolbarItem, { children: jsx(AiTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -6212,8 +6457,9 @@ const StaticToolbar = withAnnotation({
     onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const llmService = inject(LLMService, null);
     return withScopedCSS(scopedId$7, () => {
-        return (jsxs("div", { class: ['toolbar', props.theme], children: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
+        return (jsxs("div", { class: ['toolbar', props.theme], children: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), llmService && jsx(ToolbarItem, { children: jsx(AiTool, {}) }), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -6260,7 +6506,7 @@ class StaticToolbarPlugin {
     }
 }
 
-var scopedId$6 = "vf-25fd9c";
+var scopedId$6 = "vf-927bfc";
 
 const SuspensionToolbar = withAnnotation({
     providers: [RefreshService, ToolService]
@@ -6295,14 +6541,15 @@ const SuspensionToolbar = withAnnotation({
     }), delay(100)).subscribe(() => {
         styles.opacity = 1;
     }));
+    const llmService = inject(LLMService, null);
     return withScopedCSS(scopedId$6, () => {
-        return (jsxs("div", { class: ['toolbar', props.theme, {
+        return (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: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: jsxs("div", { class: "toolbar-tools", children: [jsx(ToolbarItem, { children: jsx(UndoTool, {}) }), jsx(ToolbarItem, { children: jsx(RedoTool, {}) }), jsx(SplitLine, {}), llmService && jsx(ToolbarItem, { children: jsx(AiTool, {}) }), jsx(ToolbarItem, { children: jsx(InsertTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(LinkTool, {}) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(TextColorTool, {}) }), jsx(ToolbarItem, { children: jsx(TextBackgroundColorTool, {}) }), jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(SubscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(SuperscriptTool, {}) }), jsx(ToolbarItem, { children: jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === QueryStateType.Enabled && jsxs(Fragment$1, { children: [jsx(SplitLine, {}), jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table")] }) }));
     });
 });
 
@@ -6330,6 +6577,7 @@ class SuspensionToolbarPlugin {
     setup(injector) {
         const host = injector.get(VIEW_CONTAINER);
         const container = document.createElement('div');
+        container.style.cssText = 'display:flex;justify-content:center;';
         this.app = createApp(jsx(SuspensionToolbar, { theme: this.options.theme }), {
             context: injector
         });
@@ -8107,4 +8355,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CleanFormatsTool, CodeTool, ColorPicker, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuContainer, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InlineToolbar, InlineToolbarPlugin, InsertMenu, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RedoTool, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, SplitLine, StaticToolbar, StaticToolbarPlugin, StrikeThroughTool, SubscriptTool, SuperscriptTool, SuspensionToolbar, SuspensionToolbarPlugin, TableComponent, TableComponentView, TextBackgroundColorTool, TextColorTool, TodolistComponent, TodolistView, ToolbarItem, UnderlineTool, UndoTool, VideoComponent, VideoView, XNoteMessageBus, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, cellBackgroundAttr, cellBackgroundAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, subscriptFormatLoader, subscriptFormatter, superscriptFormatLoader, superscriptFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AiTool, AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CleanFormatsTool, CodeTool, ColorPicker, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuContainer, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InlineToolbar, InlineToolbarPlugin, InsertMenu, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LLMService, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RedoTool, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, SplitLine, StaticToolbar, StaticToolbarPlugin, StrikeThroughTool, SubscriptTool, SuperscriptTool, SuspensionToolbar, SuspensionToolbarPlugin, TableComponent, TableComponentView, TextBackgroundColorTool, TextColorTool, TodolistComponent, TodolistView, ToolbarItem, UnderlineTool, UndoTool, VideoComponent, VideoView, XNoteMessageBus, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, cellBackgroundAttr, cellBackgroundAttrLoader, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, subscriptFormatLoader, subscriptFormatter, superscriptFormatLoader, superscriptFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };