@textbus/xnote 0.2.4 → 0.2.6

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 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, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, Context, watch } from '@viewfly/core';
-import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, 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 { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
@@ -12,7 +12,7 @@ import Katex from 'katex';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { MessageBus, CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$r = "vf-7d288d";
+var scopedId$q = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -145,7 +145,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$r, () => {
+    return withScopedCSS(scopedId$q, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -157,7 +157,7 @@ function Button(props) {
     });
 }
 
-var scopedId$q = "vf-d552b9";
+var scopedId$p = "vf-d552b9";
 
 class Picker {
     set hex(color) {
@@ -269,7 +269,6 @@ class Picker {
         this.hex = value || '#f00';
     }
 }
-const recentColors = createSignal([]);
 function ColorPicker(props) {
     const instance = getCurrentInstance();
     const picker = new Picker(() => {
@@ -286,6 +285,7 @@ function ColorPicker(props) {
         '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
         '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
     ];
+    const recentColors = createSignal(props.recentColors || []);
     function addRecentColor() {
         const color = picker.hex;
         if (!color) {
@@ -446,7 +446,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return withScopedCSS(scopedId$q, () => {
+    return withScopedCSS(scopedId$p, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -465,7 +465,7 @@ function ColorPicker(props) {
                                 return (jsx("div", { "data-color": color, style: {
                                         background: color
                                     } }));
-                            }) }), jsx("div", { class: "xnote-color-picker-recent-text", children: "\u6700\u8FD1\u989C\u8272" }), jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
+                            }) }), jsx("div", { class: "xnote-color-picker-recent-text", children: "\u5E38\u7528\u989C\u8272" }), jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
                                 const colors = recentColors();
                                 const color = colors[index] || '';
                                 return (jsx("div", { "data-color": color || 'unknown', style: {
@@ -497,10 +497,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$p = "vf-ac7e8d";
+var scopedId$o = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(scopedId$p, () => {
+    return withScopedCSS(scopedId$o, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -510,15 +510,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$o = "vf-ede279";
+var scopedId$n = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(scopedId$o, () => {
+    return withScopedCSS(scopedId$n, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$n = "vf-d91ad6";
+var scopedId$m = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -627,16 +627,16 @@ function DragResize(props) {
         });
     }
     const sizeText = createSignal(`${component.state.width}*${component.state.height}`);
-    return withScopedCSS(scopedId$n, () => {
+    return withScopedCSS(scopedId$m, () => {
         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$m = "vf-a99c5e";
+var scopedId$l = "vf-0fd06a";
 
-var scopedId$l = "vf-8a05e9";
+var scopedId$k = "vf-8a05e9";
 
 const DropdownMenuContainer = new InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = withAnnotation({
@@ -741,7 +741,7 @@ const DropdownMenuPortal = withAnnotation({
     function stopPropagation(ev) {
         ev.stopPropagation();
     }
-    return createPortal(withScopedCSS(scopedId$l, () => {
+    return createPortal(withScopedCSS(scopedId$k, () => {
         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: {
@@ -768,6 +768,7 @@ const Dropdown = withAnnotation({
     };
     const triggerRef = createRef();
     const dropdownRef = createRef();
+    const arrowRef = createRef();
     onMounted(() => {
         const sub = dropdownContextService.onOpenStateChange.subscribe(b => {
             var _a;
@@ -785,9 +786,10 @@ const Dropdown = withAnnotation({
             subscription.add(fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
         }
+        const el = props.arrow ? arrowRef.current : dropdownRef.current;
         let leaveSub;
         const bindLeave = function () {
-            leaveSub = fromEvent(dropdownRef.current, 'mouseleave').subscribe(() => {
+            leaveSub = fromEvent(el, 'mouseleave').subscribe(() => {
                 if (props.disabled) {
                     return;
                 }
@@ -795,7 +797,7 @@ const Dropdown = withAnnotation({
             });
         };
         bindLeave();
-        subscription.add(fromEvent(dropdownRef.current, 'mouseenter').subscribe(() => {
+        subscription.add(fromEvent(el, 'mouseenter').subscribe(() => {
             if (props.disabled) {
                 return;
             }
@@ -818,8 +820,10 @@ const Dropdown = withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $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", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
+        $render: withScopedCSS(scopedId$l, () => {
+            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, { arrow: true }) })] }), isShow() &&
                         jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                                 props.menu.map(menu => {
                                     return (jsx("div", { class: "dropdown-menu-item", onClick: () => {
@@ -835,7 +839,7 @@ const Dropdown = withAnnotation({
     };
 });
 
-var scopedId$k = "vf-c32a7b";
+var scopedId$j = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -869,20 +873,20 @@ function Keymap(props) {
             arr.push(jsx("span", { children: keymap.key }));
         }
     }
-    return withScopedCSS(scopedId$k, () => {
+    return withScopedCSS(scopedId$j, () => {
         return (jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$j = "vf-acaa5f";
+var scopedId$i = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return withScopedCSS(scopedId$j, () => {
+    return withScopedCSS(scopedId$i, () => {
         return (jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$i = "vf-c3b9dc";
+var scopedId$h = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = inject(DropdownContextService, null);
@@ -902,7 +906,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return withScopedCSS(scopedId$i, () => {
+    return withScopedCSS(scopedId$h, () => {
         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: [
@@ -912,11 +916,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$h = "vf-a23c47";
+var scopedId$g = "vf-a23c47";
 
 function Popup(props) {
     const host = inject(VIEW_CONTAINER);
-    return createPortal(withScopedCSS(scopedId$h, () => {
+    return createPortal(withScopedCSS(scopedId$g, () => {
         return (jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -924,15 +928,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$g = "vf-cd4d99";
+var scopedId$f = "vf-b7a2c8";
 
 function ToolbarItem(props) {
-    return withScopedCSS(scopedId$g, () => {
+    return withScopedCSS(scopedId$f, () => {
         return (jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$f = "vf-2a8a65";
+var scopedId$e = "vf-2a8a65";
 
 let RefreshService = class RefreshService {
     constructor() {
@@ -2233,17 +2237,111 @@ function registerTextIndentShortcut(textbus) {
     });
 }
 
+class ImageComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+ImageComponent.type = ContentType.InlineComponent;
+ImageComponent.componentName = '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, textbus) {
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
+        return new ImageComponent(textbus, {
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
+        });
+    }
+};
+
+class VideoComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new VideoComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+VideoComponent.type = ContentType.InlineComponent;
+VideoComponent.componentName = '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, textbus) {
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
+        return new VideoComponent(textbus, {
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
+    }
+};
+
 let ToolService = class ToolService {
     constructor(selection, controller) {
         this.selection = selection;
         this.controller = controller;
         const [state, updateState] = useProduce({
             inSourceCode: false,
-            readonly: controller.readonly
+            readonly: controller.readonly,
+            selectEmbed: false,
         });
         this.state = state;
         this.sub = 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;
+                }
+            }
             updateState(draft => {
+                draft.selectEmbed = is;
                 draft.readonly = controller.readonly;
                 draft.inSourceCode = selection.commonAncestorComponent instanceof SourceCodeComponent;
             });
@@ -2341,7 +2439,7 @@ function AttrTool(props) {
         }
     }
     const commonState = useCommonState();
-    return withScopedCSS(scopedId$f, () => {
+    return withScopedCSS(scopedId$e, () => {
         const states = checkStates();
         const b = commonState().inSourceCode || commonState().readonly;
         return (jsx(Dropdown, { disabled: b, width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
@@ -3632,7 +3730,7 @@ function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
     const commonState = useCommonState();
-    return withScopedCSS(scopedId$f, () => {
+    return withScopedCSS(scopedId$e, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -4044,108 +4142,6 @@ function CodeTool() {
     };
 }
 
-var scopedId$e = "vf-accb31";
-
-function ColorTool(props) {
-    const query = inject(Query);
-    const refreshService = inject(RefreshService);
-    const commander = inject(Commander);
-    const selection = inject(Selection);
-    const textColor = createSignal('');
-    const backgroundColor = createSignal('');
-    const [viewModel] = useProduce({
-        highlight: false,
-    });
-    function updateCheckState() {
-        if (!props.slot && !selection.isSelected) {
-            return;
-        }
-        const range = props.slot ? {
-            startSlot: props.slot,
-            endSlot: props.slot,
-            startOffset: 0,
-            endOffset: props.slot.length
-        } : {
-            startSlot: selection.startSlot,
-            startOffset: selection.startOffset,
-            endSlot: selection.endSlot,
-            endOffset: selection.endOffset
-        };
-        const textState = query.queryFormatByRange(colorFormatter, range);
-        const backgroundState = query.queryFormatByRange(backgroundColorFormatter, range);
-        textColor.set(textState.state === QueryStateType.Enabled ? textState.value : '');
-        backgroundColor.set(backgroundState.state === QueryStateType.Enabled ? backgroundState.value : '');
-    }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        updateCheckState();
-    });
-    updateCheckState();
-    onUnmounted(() => {
-        sub.unsubscribe();
-    });
-    const textColors = [
-        '#000',
-        '#aaa',
-        '#ff2e2e',
-        '#ff8d45',
-        '#ffdf14',
-        '#5eec75',
-        '#5dfaff',
-        '#1296db',
-        '#617fff',
-        '#c459ff',
-        '#fff',
-    ];
-    const backgroundColors = [
-        '#aaa',
-        '#ef7373',
-        '#ec9c6a',
-        '#dccc64',
-        '#96e3a3',
-        '#a1e2e3',
-        '#90a0e5',
-        '#c596e0',
-    ];
-    const commonState = useCommonState();
-    return withScopedCSS(scopedId$e, () => {
-        const vm = viewModel();
-        return (jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
-                                    'no-background': true,
-                                    active: textColor() === ''
-                                }, onClick: () => {
-                                    var _a;
-                                    (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-                                    commander.unApplyFormat(colorFormatter);
-                                } }), textColors.map(c => {
-                                return jsx("div", { class: {
-                                        active: textColor() === c
-                                    }, onClick: () => {
-                                        var _a;
-                                        (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-                                        commander.applyFormat(colorFormatter, c);
-                                    }, style: { color: c }, children: "A" });
-                            })] }), jsx("div", { class: "color-type", children: "\u80CC\u666F\u989C\u8272" }), jsxs("div", { class: "background-colors", children: [jsx("div", { class: {
-                                    active: backgroundColor() === '',
-                                    'no-background': true
-                                }, onClick: () => {
-                                    var _a;
-                                    (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-                                    commander.unApplyFormat(backgroundColorFormatter);
-                                } }), backgroundColors.map(c => {
-                                return jsx("div", { class: {
-                                        active: backgroundColor() === c
-                                    }, onClick: () => {
-                                        var _a;
-                                        (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-                                        commander.applyFormat(backgroundColorFormatter, c);
-                                    }, style: { backgroundColor: c }, children: "A" });
-                            })] })] }), children: props.children || jsx(Button, { highlight: vm.highlight, arrow: true, disabled: commonState().readonly || commonState().inSourceCode, children: jsx("span", { class: "background", children: jsx("span", { style: {
-                            backgroundColor: backgroundColor(),
-                            color: textColor()
-                        }, children: jsx("span", { class: "xnote-icon-color" }) }) }) }) }));
-    });
-}
-
 const isSupportFont = (function () {
     const fullbackFontName = 'Arial';
     const text = 'HeRe-is*SoMe%tEst +99.? !@ #~ &^teXtWw L$VEY$U0';
@@ -4312,90 +4308,6 @@ var scopedId$d = "vf-cf8e1c";
 class FileUploader {
 }
 
-class ImageComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-ImageComponent.type = ContentType.InlineComponent;
-ImageComponent.componentName = '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, textbus) {
-        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
-        return new ImageComponent(textbus, {
-            src: img.src,
-            width: img.style.width || 'auto',
-            height: img.style.height || 'auto'
-        });
-    }
-};
-
-class VideoComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-VideoComponent.type = ContentType.InlineComponent;
-VideoComponent.componentName = '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, textbus) {
-        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
-        return new VideoComponent(textbus, {
-            src: video.src,
-            width: video.style.width || 'auto',
-            height: video.style.height || 'auto'
-        });
-    }
-};
-
 class KatexEditor extends Textbus {
     constructor() {
         const adapter = new ViewflyAdapter({
@@ -4939,6 +4851,100 @@ function SuperscriptTool() {
     };
 }
 
+function TextBackgroundColorTool(props) {
+    const commander = inject(Commander);
+    const color = createSignal('');
+    function setColor(picker) {
+        var _a;
+        (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
+        const rgba = picker.rgba;
+        if (rgba) {
+            const c = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+            commander.applyFormat(backgroundColorFormatter, c);
+            color.set(c);
+        }
+        else {
+            commander.unApplyFormat(backgroundColorFormatter);
+            color.set('');
+        }
+    }
+    function setCurrentColor() {
+        if (props.slot) {
+            return;
+        }
+        const c = color();
+        if (c) {
+            commander.applyFormat(backgroundColorFormatter, c);
+        }
+        else {
+            commander.unApplyFormat(backgroundColorFormatter);
+        }
+    }
+    const commonState = useCommonState();
+    const defaultColors = [
+        '#ef7373',
+        '#ec9c6a',
+        '#dccc64',
+        '#96e3a3',
+        '#a1e2e3',
+        '#90a0e5',
+        '#c596e0',
+    ];
+    return () => {
+        const disabled = commonState().readonly || commonState().inSourceCode || commonState().selectEmbed;
+        return (jsx(Dropdown, { width: '177px', disabled: disabled, arrow: !props.children, abreast: props.abreast, style: props.style, menu: jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: props.children || jsx(Button, { onClick: setCurrentColor, disabled: disabled, children: jsx("span", { style: {
+                        color: disabled ? '' : color()
+                    }, class: "xnote-icon-background-color" }) }) }));
+    };
+}
+
+function TextColorTool(props) {
+    const commander = inject(Commander);
+    const color = createSignal('#ff0000');
+    function setColor(picker) {
+        var _a;
+        (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
+        const rgba = picker.rgba;
+        if (rgba) {
+            const c = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+            commander.applyFormat(colorFormatter, c);
+            color.set(c);
+        }
+        else {
+            commander.unApplyFormat(colorFormatter);
+            color.set('');
+        }
+    }
+    function setCurrentColor() {
+        if (props.slot) {
+            return;
+        }
+        const c = color();
+        if (c) {
+            commander.applyFormat(colorFormatter, c);
+        }
+        else {
+            commander.unApplyFormat(colorFormatter);
+        }
+    }
+    const commonState = useCommonState();
+    const defaultColors = [
+        '#ff8d45',
+        '#ffdf14',
+        '#5eec75',
+        '#5dfaff',
+        '#1296db',
+        '#617fff',
+        '#c459ff',
+    ];
+    return () => {
+        const disabled = commonState().readonly || commonState().inSourceCode || commonState().selectEmbed;
+        return (jsx(Dropdown, { arrow: !props.children, width: '177px', style: props.style, disabled: disabled, abreast: props.abreast, menu: jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: props.children || jsx(Button, { onClick: setCurrentColor, disabled: disabled, children: jsx("span", { style: {
+                        color: disabled ? '' : color()
+                    }, class: "xnote-icon-color" }) }) }));
+    };
+}
+
 function UnderlineTool() {
     const query = inject(Query);
     const refreshService = inject(RefreshService);
@@ -5097,8 +5103,9 @@ function CellAlignTool() {
     onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
-        return (jsx(Dropdown, { onCheck: check, menu: [
+        return (jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, onCheck: check, menu: [
                 {
                     label: jsx(MenuItem, { checked: currentValue() === 'top', icon: jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
                     value: 'top'
@@ -5111,7 +5118,7 @@ function CellAlignTool() {
                     label: jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
                     value: 'bottom'
                 }
-            ], children: jsx(Button, { arrow: true, highlight: highlight(), children: jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+            ], children: jsx(Button, { arrow: true, disabled: commonState().readonly || commonState().inSourceCode, highlight: highlight(), children: jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
     };
 }
 
@@ -5153,7 +5160,6 @@ function CellBackgroundTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
     const [viewModel, update] = useProduce({
-        highlight: false,
         disabled: false,
     });
     function setColor(picker) {
@@ -5201,9 +5207,20 @@ function CellBackgroundTool() {
     onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
+    const defaultColors = [
+        '#ef7373',
+        '#ec9c6a',
+        '#dccc64',
+        '#96e3a3',
+        '#a1e2e3',
+        '#90a0e5',
+        '#c596e0',
+    ];
     return () => {
         const vm = viewModel();
-        return (jsx(Dropdown, { width: '177px', menu: jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
+        const d = vm.disabled || commonState().readonly || commonState().inSourceCode;
+        return (jsx(Dropdown, { width: '177px', disabled: d, menu: jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: jsx(Button, { disabled: d, arrow: true, children: jsx("span", { class: "xnote-icon-palette" }) }) }));
     };
 }
 
@@ -5237,9 +5254,10 @@ function MergeCellsTool() {
     onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
+        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsx("span", { class: "xnote-icon-merge-cells" }) });
     };
 }
 
@@ -5308,9 +5326,10 @@ function SplitCellsTool() {
     onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
+        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsx("span", { class: "xnote-icon-split-cells" }) });
     };
 }
 
@@ -5414,13 +5433,7 @@ const LeftToolbar = withAnnotation({
             return;
         }
         refreshService.onRefresh.next();
-    }).add(selection.onChange.pipe(throttleTime(30)).subscribe(() => {
-        if (!selection.isCollapsed) {
-            updatePosition(draft => {
-                draft.display = false;
-            });
-        }
-    }));
+    });
     onUnmounted(() => {
         subscription.unsubscribe();
     });
@@ -5520,7 +5533,7 @@ const LeftToolbar = withAnnotation({
         return (jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
-                    display: position.display && selection.isCollapsed && editorService.canShowLeftToolbar ? 'block' : 'none'
+                    display: position.display && editorService.canShowLeftToolbar ? 'block' : 'none'
                 }, children: jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
@@ -5528,7 +5541,7 @@ const LeftToolbar = withAnnotation({
                     }, menu: isEmptyBlock() ?
                         jsx(InsertMenu, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(TextColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u6587\u672C\u989C\u8272" }) }), jsx(TextBackgroundColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-background-color" }), children: "\u6587\u672C\u80CC\u666F\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsx("span", { children: jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxs("span", { children: [activeNode, jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -5640,8 +5653,12 @@ const InlineToolbar = withAnnotation({
     const textbus = inject(Textbus);
     const editorService = inject(EditorService);
     const refreshService = inject(RefreshService);
-    const subscription = merge(textbus.onChange, selection.onChange).pipe(debounceTime(20)).subscribe(() => {
+    const subscription = merge(textbus.onChange, selection.onChange).pipe(debounceTime(20), tap(() => {
         refreshService.onRefresh.next();
+    }), delay(200)).subscribe(() => {
+        if (viewPosition().isHide) {
+            editorService.changeLeftToolbarVisible(true);
+        }
     });
     onUnmounted(() => {
         subscription.unsubscribe();
@@ -5718,12 +5735,14 @@ const InlineToolbar = withAnnotation({
     const sub = textbus.onChange.pipe(debounceTime(100)).subscribe(() => {
         if (!viewPosition().isHide) {
             const top = getTop();
-            if (top !== null) {
+            if (top !== null && !selection.isCollapsed) {
                 updateViewPosition(draft => {
                     draft.top = top;
                 });
+                return;
             }
         }
+        editorService.changeLeftToolbarVisible(true);
     });
     onUnmounted(() => {
         sub.unsubscribe();
@@ -5747,6 +5766,10 @@ const InlineToolbar = withAnnotation({
                     draft.opacity = 1;
                     draft.top = top;
                 });
+                editorService.changeLeftToolbarVisible(false);
+            }
+            else {
+                editorService.changeLeftToolbarVisible(true);
             }
         });
     }
@@ -5780,7 +5803,7 @@ const InlineToolbar = withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.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(ColorTool, {}) }), 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: [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")] }));
     });
 });
 
@@ -5828,7 +5851,7 @@ const StaticToolbar = withAnnotation({
         subscription.unsubscribe();
     });
     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(ColorTool, {}) }), 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, {}), 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")] }));
     });
 });
 
@@ -5910,7 +5933,7 @@ const SuspensionToolbar = withAnnotation({
                 top: s.top + 'px',
                 opacity: s.opacity,
                 pointerEvents: s.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(ColorTool, {}) }), 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: [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")] }));
     });
 });
 
@@ -6369,6 +6392,15 @@ let TableService = class TableService {
 TableService = __decorate([
     Injectable()
 ], TableService);
+function isShowMask(component) {
+    const selection = component.tableSelection();
+    const selectedSlots = component.getSelectedNormalizedSlots();
+    const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
+    return selection &&
+        (selection.endColumn - selection.startColumn > 1 ||
+            selection.endRow - selection.startRow > 1 ||
+            slotCount > 1);
+}
 
 function ResizeColumn(props) {
     const dragLineRef = createRef();
@@ -6793,10 +6825,8 @@ function SelectionMask(props) {
     watch(props.component.tableSelection, update);
     function update() {
         const selection = props.component.tableSelection();
-        const selectedSlots = props.component.getSelectedNormalizedSlots();
-        const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
         const state = props.component.state;
-        if (selection && slotCount > 1) {
+        if (isShowMask(props.component)) {
             let topCompensation = 0.5;
             let heightCompensation = -1;
             if (selection.startRow === 0) {
@@ -6996,12 +7026,11 @@ const TableComponentView = withAnnotation({
                                             }) }, rowMapping.get(row.row)));
                                     }) })] }) }) }) }));
         }
-        const selectedSlots = props.component.getSelectedNormalizedSlots();
-        const slotCount = selectedSlots ? selectedSlots.map(i => i.cells.filter(i => i.visible)).flat().length : 0;
+        const showMask = isShowMask(props.component);
         return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
                                         'xnote-table-content',
                                         {
-                                            'hide-selection': props.component.tableSelection() && slotCount > 1
+                                            'hide-selection': showMask
                                         }
                                     ], children: [jsx("colgroup", { children: layoutWidth().map(w => {
                                                 return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
@@ -7541,4 +7570,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CleanFormatsTool, CodeTool, ColorPicker, ColorTool, 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, 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 { 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 };