@textbus/xnote 0.2.4 → 0.2.6

package/bundles/index.js

@@ -14,7 +14,7 @@ var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$r = "vf-7d288d";
+var scopedId$q = "vf-7d288d";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -147,7 +147,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$r, () => {
+    return scopedCss.withScopedCSS(scopedId$q, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -159,7 +159,7 @@ function Button(props) {
     });
 }
 
-var scopedId$q = "vf-d552b9";
+var scopedId$p = "vf-d552b9";
 
 class Picker {
     set hex(color$1) {
@@ -271,7 +271,6 @@ class Picker {
         this.hex = value || '#f00';
     }
 }
-const recentColors = core.createSignal([]);
 function ColorPicker(props) {
     const instance = core.getCurrentInstance();
     const picker = new Picker(() => {
@@ -288,6 +287,7 @@ function ColorPicker(props) {
         '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
         '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
     ];
+    const recentColors = core.createSignal(props.recentColors || []);
     function addRecentColor() {
         const color = picker.hex;
         if (!color) {
@@ -448,7 +448,7 @@ function ColorPicker(props) {
         props.onSelected(picker);
         addRecentColor();
     }
-    return scopedCss.withScopedCSS(scopedId$q, () => {
+    return scopedCss.withScopedCSS(scopedId$p, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return (jsxRuntime.jsxs("div", { onMousedown: ev => {
                 ev.stopPropagation();
@@ -467,7 +467,7 @@ function ColorPicker(props) {
                                 return (jsxRuntime.jsx("div", { "data-color": color, style: {
                                         background: color
                                     } }));
-                            }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-recent-text", children: "\u6700\u8FD1\u989C\u8272" }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 25px;", children: Array.from({ length: 7 }).map((_, index) => {
+                            }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-recent-text", children: "\u5E38\u7528\u989C\u8272" }), jsxRuntime.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 (jsxRuntime.jsx("div", { "data-color": color || 'unknown', style: {
@@ -499,10 +499,10 @@ function ColorPicker(props) {
     });
 }
 
-var scopedId$p = "vf-ac7e8d";
+var scopedId$o = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$p, () => {
+    return scopedCss.withScopedCSS(scopedId$o, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -512,15 +512,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var scopedId$o = "vf-ede279";
+var scopedId$n = "vf-ede279";
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$o, () => {
+    return scopedCss.withScopedCSS(scopedId$n, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var scopedId$n = "vf-d91ad6";
+var scopedId$m = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -629,16 +629,16 @@ function DragResize(props) {
         });
     }
     const sizeText = core.createSignal(`${component.state.width}*${component.state.height}`);
-    return scopedCss.withScopedCSS(scopedId$n, () => {
+    return scopedCss.withScopedCSS(scopedId$m, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxRuntime.jsx("div", { class: "mask", ref: mask, children: sizeText() }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var scopedId$m = "vf-a99c5e";
+var scopedId$l = "vf-0fd06a";
 
-var scopedId$l = "vf-8a05e9";
+var scopedId$k = "vf-8a05e9";
 
 const DropdownMenuContainer = new core.InjectionToken('DropdownMenuContainer');
 const DropdownMenuPortal = core.withAnnotation({
@@ -743,7 +743,7 @@ const DropdownMenuPortal = core.withAnnotation({
     function stopPropagation(ev) {
         ev.stopPropagation();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$l, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$k, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
@@ -770,6 +770,7 @@ const Dropdown = core.withAnnotation({
     };
     const triggerRef = core.createRef();
     const dropdownRef = core.createRef();
+    const arrowRef = core.createRef();
     core.onMounted(() => {
         const sub = dropdownContextService.onOpenStateChange.subscribe(b => {
             var _a;
@@ -787,9 +788,10 @@ const Dropdown = core.withAnnotation({
             subscription.add(core$1.fromEvent(triggerRef.current, 'click').subscribe(toggle));
             return;
         }
+        const el = props.arrow ? arrowRef.current : dropdownRef.current;
         let leaveSub;
         const bindLeave = function () {
-            leaveSub = core$1.fromEvent(dropdownRef.current, 'mouseleave').subscribe(() => {
+            leaveSub = core$1.fromEvent(el, 'mouseleave').subscribe(() => {
                 if (props.disabled) {
                     return;
                 }
@@ -797,7 +799,7 @@ const Dropdown = core.withAnnotation({
             });
         };
         bindLeave();
-        subscription.add(core$1.fromEvent(dropdownRef.current, 'mouseenter').subscribe(() => {
+        subscription.add(core$1.fromEvent(el, 'mouseenter').subscribe(() => {
             if (props.disabled) {
                 return;
             }
@@ -820,8 +822,10 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.hide(false);
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$m, () => {
-            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
+        $render: scopedCss.withScopedCSS(scopedId$l, () => {
+            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: ['dropdown-btn-inner', {
+                                        'has-arrow': props.arrow
+                                    }], children: props.children }), props.arrow && jsxRuntime.jsx("div", { ref: arrowRef, class: "dropdown-btn-arrow", children: jsxRuntime.jsx(Button, { arrow: true }) })] }), isShow() &&
                         jsxRuntime.jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                                 props.menu.map(menu => {
                                     return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
@@ -837,7 +841,7 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var scopedId$k = "vf-c32a7b";
+var scopedId$j = "vf-c32a7b";
 
 function Keymap(props) {
     const arr = [];
@@ -871,20 +875,20 @@ function Keymap(props) {
             arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
         }
     }
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(scopedId$j, () => {
         return (jsxRuntime.jsx("span", { class: "keymap", children: arr }));
     });
 }
 
-var scopedId$j = "vf-acaa5f";
+var scopedId$i = "vf-acaa5f";
 
 function MenuHeading(props) {
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(scopedId$i, () => {
         return (jsxRuntime.jsx("div", { class: "menu-heading", children: props.children }));
     });
 }
 
-var scopedId$i = "vf-c3b9dc";
+var scopedId$h = "vf-c3b9dc";
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, null);
@@ -904,7 +908,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(scopedId$h, () => {
         return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { class: "menu-item-content", children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), jsxRuntime.jsx("div", { children: props.desc })] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
@@ -914,11 +918,11 @@ function MenuItem(props) {
     });
 }
 
-var scopedId$h = "vf-a23c47";
+var scopedId$g = "vf-a23c47";
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$h, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$g, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -926,15 +930,15 @@ function Popup(props) {
     }), host);
 }
 
-var scopedId$g = "vf-cd4d99";
+var scopedId$f = "vf-b7a2c8";
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(scopedId$g, () => {
+    return scopedCss.withScopedCSS(scopedId$f, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var scopedId$f = "vf-2a8a65";
+var scopedId$e = "vf-2a8a65";
 
 exports.RefreshService = class RefreshService {
     constructor() {
@@ -2235,17 +2239,111 @@ function registerTextIndentShortcut(textbus) {
     });
 }
 
+class ImageComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+ImageComponent.type = core$1.ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = core.createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const imageComponentLoader = {
+    match(element) {
+        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
+    },
+    read(element, textbus) {
+        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
+        return new ImageComponent(textbus, {
+            src: img.src,
+            width: img.style.width || 'auto',
+            height: img.style.height || 'auto'
+        });
+    }
+};
+
+class VideoComponent extends core$1.Component {
+    static fromJSON(textbus, json) {
+        return new VideoComponent(textbus, Object.assign({}, json));
+    }
+    getSlots() {
+        return [];
+    }
+}
+VideoComponent.type = core$1.ContentType.InlineComponent;
+VideoComponent.componentName = 'VideoComponent';
+function VideoView(props) {
+    const { name, state } = props.component;
+    const videoRef = core.createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsxRuntime.jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const videoComponentLoader = {
+    match(element) {
+        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
+    },
+    read(element, textbus) {
+        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
+        return new VideoComponent(textbus, {
+            src: video.src,
+            width: video.style.width || 'auto',
+            height: video.style.height || 'auto'
+        });
+    }
+};
+
 let ToolService = class ToolService {
     constructor(selection, controller) {
         this.selection = selection;
         this.controller = controller;
         const [state, updateState] = hooks.useProduce({
             inSourceCode: false,
-            readonly: controller.readonly
+            readonly: controller.readonly,
+            selectEmbed: false,
         });
         this.state = state;
         this.sub = core$1.merge(selection.onChange, controller.onReadonlyStateChange).subscribe(() => {
+            const { startSlot, endSlot, startOffset, endOffset } = selection;
+            let is = false;
+            if (startSlot && startSlot === endSlot && endOffset - startOffset === 1) {
+                const component = startSlot.getContentAtIndex(startOffset);
+                if (component instanceof VideoComponent || component instanceof ImageComponent) {
+                    is = true;
+                }
+            }
             updateState(draft => {
+                draft.selectEmbed = is;
                 draft.readonly = controller.readonly;
                 draft.inSourceCode = selection.commonAncestorComponent instanceof SourceCodeComponent;
             });
@@ -2343,7 +2441,7 @@ function AttrTool(props) {
         }
     }
     const commonState = useCommonState();
-    return scopedCss.withScopedCSS(scopedId$f, () => {
+    return scopedCss.withScopedCSS(scopedId$e, () => {
         const states = checkStates();
         const b = commonState().inSourceCode || commonState().readonly;
         return (jsxRuntime.jsx(Dropdown, { disabled: b, width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
@@ -3634,7 +3732,7 @@ function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
     const commonState = useCommonState();
-    return scopedCss.withScopedCSS(scopedId$f, () => {
+    return scopedCss.withScopedCSS(scopedId$e, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -4046,108 +4144,6 @@ function CodeTool() {
     };
 }
 
-var scopedId$e = "vf-accb31";
-
-function ColorTool(props) {
-    const query = core.inject(core$1.Query);
-    const refreshService = core.inject(exports.RefreshService);
-    const commander = core.inject(core$1.Commander);
-    const selection = core.inject(core$1.Selection);
-    const textColor = core.createSignal('');
-    const backgroundColor = core.createSignal('');
-    const [viewModel] = hooks.useProduce({
-        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 === core$1.QueryStateType.Enabled ? textState.value : '');
-        backgroundColor.set(backgroundState.state === core$1.QueryStateType.Enabled ? backgroundState.value : '');
-    }
-    const sub = refreshService.onRefresh.subscribe(() => {
-        updateCheckState();
-    });
-    updateCheckState();
-    core.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 scopedCss.withScopedCSS(scopedId$e, () => {
-        const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, style: props.style, width: '180px', abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
-                                    'no-background': true,
-                                    active: textColor() === ''
-                                }, onClick: () => {
-                                    var _a;
-                                    (_a = props.applyBefore) === null || _a === void 0 ? void 0 : _a.call(props);
-                                    commander.unApplyFormat(colorFormatter);
-                                } }), textColors.map(c => {
-                                return jsxRuntime.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" });
-                            })] }), jsxRuntime.jsx("div", { class: "color-type", children: "\u80CC\u666F\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "background-colors", children: [jsxRuntime.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 jsxRuntime.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 || jsxRuntime.jsx(Button, { highlight: vm.highlight, arrow: true, disabled: commonState().readonly || commonState().inSourceCode, children: jsxRuntime.jsx("span", { class: "background", children: jsxRuntime.jsx("span", { style: {
-                            backgroundColor: backgroundColor(),
-                            color: textColor()
-                        }, children: jsxRuntime.jsx("span", { class: "xnote-icon-color" }) }) }) }) }));
-    });
-}
-
 const isSupportFont = (function () {
     const fullbackFontName = 'Arial';
     const text = 'HeRe-is*SoMe%tEst +99.? !@ #~ &^teXtWw L$VEY$U0';
@@ -4314,90 +4310,6 @@ var scopedId$d = "vf-cf8e1c";
 class FileUploader {
 }
 
-class ImageComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-ImageComponent.type = core$1.ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = core.createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
-    };
-}
-const imageComponentLoader = {
-    match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
-    },
-    read(element, textbus) {
-        const img = element instanceof HTMLImageElement ? element : (element.querySelector('img') || document.createElement('img'));
-        return new ImageComponent(textbus, {
-            src: img.src,
-            width: img.style.width || 'auto',
-            height: img.style.height || 'auto'
-        });
-    }
-};
-
-class VideoComponent extends core$1.Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
-    }
-    getSlots() {
-        return [];
-    }
-}
-VideoComponent.type = core$1.ContentType.InlineComponent;
-VideoComponent.componentName = 'VideoComponent';
-function VideoView(props) {
-    const { name, state } = props.component;
-    const videoRef = core.createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
-    };
-}
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'VIDEO' || element.dataset.component === VideoComponent.componentName;
-    },
-    read(element, textbus) {
-        const video = element instanceof HTMLVideoElement ? element : (element.querySelector('video') || document.createElement('video'));
-        return new VideoComponent(textbus, {
-            src: video.src,
-            width: video.style.width || 'auto',
-            height: video.style.height || 'auto'
-        });
-    }
-};
-
 class KatexEditor extends core$1.Textbus {
     constructor() {
         const adapter = new adapterViewfly.ViewflyAdapter({
@@ -4941,6 +4853,100 @@ function SuperscriptTool() {
     };
 }
 
+function TextBackgroundColorTool(props) {
+    const commander = core.inject(core$1.Commander);
+    const color = core.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 (jsxRuntime.jsx(Dropdown, { width: '177px', disabled: disabled, arrow: !props.children, abreast: props.abreast, style: props.style, menu: jsxRuntime.jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: props.children || jsxRuntime.jsx(Button, { onClick: setCurrentColor, disabled: disabled, children: jsxRuntime.jsx("span", { style: {
+                        color: disabled ? '' : color()
+                    }, class: "xnote-icon-background-color" }) }) }));
+    };
+}
+
+function TextColorTool(props) {
+    const commander = core.inject(core$1.Commander);
+    const color = core.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 (jsxRuntime.jsx(Dropdown, { arrow: !props.children, width: '177px', style: props.style, disabled: disabled, abreast: props.abreast, menu: jsxRuntime.jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: props.children || jsxRuntime.jsx(Button, { onClick: setCurrentColor, disabled: disabled, children: jsxRuntime.jsx("span", { style: {
+                        color: disabled ? '' : color()
+                    }, class: "xnote-icon-color" }) }) }));
+    };
+}
+
 function UnderlineTool() {
     const query = core.inject(core$1.Query);
     const refreshService = core.inject(exports.RefreshService);
@@ -5099,8 +5105,9 @@ function CellAlignTool() {
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
-        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: [
+        return (jsxRuntime.jsx(Dropdown, { disabled: commonState().readonly || commonState().inSourceCode, onCheck: check, menu: [
                 {
                     label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'top', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
                     value: 'top'
@@ -5113,7 +5120,7 @@ function CellAlignTool() {
                     label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
                     value: 'bottom'
                 }
-            ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: highlight(), children: jsxRuntime.jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+            ], children: jsxRuntime.jsx(Button, { arrow: true, disabled: commonState().readonly || commonState().inSourceCode, highlight: highlight(), children: jsxRuntime.jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
     };
 }
 
@@ -5155,7 +5162,6 @@ function CellBackgroundTool() {
     const refreshService = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
     const [viewModel, update] = hooks.useProduce({
-        highlight: false,
         disabled: false,
     });
     function setColor(picker) {
@@ -5203,9 +5209,20 @@ function CellBackgroundTool() {
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
+    const defaultColors = [
+        '#ef7373',
+        '#ec9c6a',
+        '#dccc64',
+        '#96e3a3',
+        '#a1e2e3',
+        '#90a0e5',
+        '#c596e0',
+    ];
     return () => {
         const vm = viewModel();
-        return (jsxRuntime.jsx(Dropdown, { width: '177px', menu: jsxRuntime.jsx(ColorPicker, { onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
+        const d = vm.disabled || commonState().readonly || commonState().inSourceCode;
+        return (jsxRuntime.jsx(Dropdown, { width: '177px', disabled: d, menu: jsxRuntime.jsx(ColorPicker, { recentColors: defaultColors, onSelected: setColor }), trigger: 'hover', children: jsxRuntime.jsx(Button, { disabled: d, arrow: true, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) }) }));
     };
 }
 
@@ -5239,9 +5256,10 @@ function MergeCellsTool() {
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: merge, children: jsxRuntime.jsx("span", { class: "xnote-icon-merge-cells" }) });
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: merge, children: jsxRuntime.jsx("span", { class: "xnote-icon-merge-cells" }) });
     };
 }
 
@@ -5310,9 +5328,10 @@ function SplitCellsTool() {
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
+    const commonState = useCommonState();
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled || commonState().readonly || commonState().inSourceCode, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
     };
 }
 
@@ -5416,13 +5435,7 @@ const LeftToolbar = core.withAnnotation({
             return;
         }
         refreshService.onRefresh.next();
-    }).add(selection.onChange.pipe(core$1.throttleTime(30)).subscribe(() => {
-        if (!selection.isCollapsed) {
-            updatePosition(draft => {
-                draft.display = false;
-            });
-        }
-    }));
+    });
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
@@ -5522,7 +5535,7 @@ const LeftToolbar = core.withAnnotation({
         return (jsxRuntime.jsx("div", { class: "left-toolbar", ref: toolbarRef, children: jsxRuntime.jsx("div", { class: "left-toolbar-btn-wrap", ref: btnRef, style: {
                     left: position.left + 'px',
                     top: position.top + 'px',
-                    display: position.display && selection.isCollapsed && editorService.canShowLeftToolbar ? 'block' : 'none'
+                    display: position.display && editorService.canShowLeftToolbar ? 'block' : 'none'
                 }, children: jsxRuntime.jsx(Dropdown, { toLeft: true, onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
@@ -5530,7 +5543,7 @@ const LeftToolbar = core.withAnnotation({
                     }, menu: isEmptyBlock() ?
                         jsxRuntime.jsx(InsertMenu, { replace: !needInsert, slot: activeSlot() })
                         :
-                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(TextColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u6587\u672C\u989C\u8272" }) }), jsxRuntime.jsx(TextBackgroundColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-background-color" }), children: "\u6587\u672C\u80CC\u666F\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertMenu, { hideTitle: true, slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -5642,8 +5655,12 @@ const InlineToolbar = core.withAnnotation({
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
     const refreshService = core.inject(exports.RefreshService);
-    const subscription = core$1.merge(textbus.onChange, selection.onChange).pipe(core$1.debounceTime(20)).subscribe(() => {
+    const subscription = core$1.merge(textbus.onChange, selection.onChange).pipe(core$1.debounceTime(20), core$1.tap(() => {
         refreshService.onRefresh.next();
+    }), core$1.delay(200)).subscribe(() => {
+        if (viewPosition().isHide) {
+            editorService.changeLeftToolbarVisible(true);
+        }
     });
     core.onUnmounted(() => {
         subscription.unsubscribe();
@@ -5720,12 +5737,14 @@ const InlineToolbar = core.withAnnotation({
     const sub = textbus.onChange.pipe(core$1.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);
     });
     core.onUnmounted(() => {
         sub.unsubscribe();
@@ -5749,6 +5768,10 @@ const InlineToolbar = core.withAnnotation({
                     draft.opacity = 1;
                     draft.top = top;
                 });
+                editorService.changeLeftToolbarVisible(false);
+            }
+            else {
+                editorService.changeLeftToolbarVisible(true);
             }
         });
     }
@@ -5782,7 +5805,7 @@ const InlineToolbar = core.withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -5830,7 +5853,7 @@ const StaticToolbar = core.withAnnotation({
         subscription.unsubscribe();
     });
     return scopedCss.withScopedCSS(scopedId$7, () => {
-        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+        return (jsxRuntime.jsxs("div", { class: ['toolbar', props.theme], children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -5912,7 +5935,7 @@ const SuspensionToolbar = core.withAnnotation({
                 top: s.top + 'px',
                 opacity: s.opacity,
                 pointerEvents: s.opacity === 0 ? 'none' : 'initial',
-            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
+            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UndoTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(RedoTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(InsertTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextColorTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(TextBackgroundColorTool, {}) }), jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SubscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SuperscriptTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CleanFormatsTool, {}) }), query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(SplitLine, {}), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellBackgroundTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table")] }));
     });
 });
 
@@ -6371,6 +6394,15 @@ let TableService = class TableService {
 TableService = __decorate([
     core.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 = core.createRef();
@@ -6795,10 +6827,8 @@ function SelectionMask(props) {
     core.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) {
@@ -6998,12 +7028,11 @@ const TableComponentView = core.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 (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
                                         'xnote-table-content',
                                         {
-                                            'hide-selection': props.component.tableSelection() && slotCount > 1
+                                            'hide-selection': showMask
                                         }
                                     ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
                                                 return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
@@ -7556,7 +7585,6 @@ exports.CellBackgroundTool = CellBackgroundTool;
 exports.CleanFormatsTool = CleanFormatsTool;
 exports.CodeTool = CodeTool;
 exports.ColorPicker = ColorPicker;
-exports.ColorTool = ColorTool;
 exports.ComponentToolbar = ComponentToolbar;
 exports.Divider = Divider;
 exports.DragResize = DragResize;
@@ -7611,6 +7639,8 @@ exports.SuspensionToolbar = SuspensionToolbar;
 exports.SuspensionToolbarPlugin = SuspensionToolbarPlugin;
 exports.TableComponent = TableComponent;
 exports.TableComponentView = TableComponentView;
+exports.TextBackgroundColorTool = TextBackgroundColorTool;
+exports.TextColorTool = TextColorTool;
 exports.TodolistComponent = TodolistComponent;
 exports.TodolistView = TodolistView;
 exports.ToolbarItem = ToolbarItem;