@textbus/xnote 0.0.10 → 0.1.0

package/bundles/index.esm.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, getCurrentInstance, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, watch } from '@viewfly/core';
-import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, watch } from '@viewfly/core';
+import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, 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, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
 import { useProduce } from '@viewfly/hooks';
@@ -9,10 +10,9 @@ import highlightjs from 'highlight.js';
 import { v4 } from 'uuid';
 import Katex from 'katex';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
-import { any2Hsl, hsl2Rgb } from '@tanbo/color';
 import { MessageBus, CollaborateModule } from '@textbus/collaborate';
 
-var scopedId$n = "vf-d94b56";
+var scopedId$o = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -145,7 +145,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(scopedId$n, () => {
+    return withScopedCSS(scopedId$o, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -157,6 +157,346 @@ function Button(props) {
     });
 }
 
+var scopedId$n = "vf-d552b9";
+
+class Picker {
+    set hex(color) {
+        var _a;
+        const c = color ? normalizeHex(color) : null;
+        if (c) {
+            this.empty = false;
+            this._hex = c;
+            this._hsl = hex2Hsl(c);
+            this._rgb = hex2Rgb(c);
+            this._hsv = hex2Hsv(c);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        else {
+            this.empty = true;
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hex() {
+        return this.empty ? null : this._hex;
+    }
+    set hsl(color) {
+        var _a;
+        if (!color || typeof color.h !== 'number' || typeof color.s !== 'number' || typeof color.l !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsl = color;
+            this._hex = hsl2Hex(color);
+            this._hsv = hsl2Hsv(color);
+            this._rgb = hsl2Rgb(color);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hsl() {
+        return this.empty ? null : this._hsl;
+    }
+    set rgb(color) {
+        var _a;
+        if (!color || typeof color.r !== 'number' || typeof color.g !== 'number' || typeof color.b !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgb = color;
+            this._rgba = Object.assign(Object.assign({}, color), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+            this._hsl = rgb2Hsl(color);
+            this._hex = rgb2Hex(color);
+            this._hsv = rgb2Hsv(color);
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get rgb() {
+        return this.empty ? null : this._rgb;
+    }
+    set rgba(color) {
+        if (!color ||
+            typeof color.r !== 'number' ||
+            typeof color.g !== 'number' ||
+            typeof color.b !== 'number' ||
+            typeof color.a !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgba = color;
+            this._hsl = rgb2Hsl(color);
+            this._hex = rgb2Hex(color);
+            this._hsv = rgb2Hsv(color);
+        }
+        this.onChange();
+    }
+    get rgba() {
+        return this.empty ? null : this._rgba;
+    }
+    set hsv(color) {
+        var _a;
+        if (!color || typeof color.h !== 'number' || typeof color.s !== 'number' || typeof color.v !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsv = color;
+            this._hex = hsv2Hex(color);
+            this._hsl = hsv2Hsl(color);
+            this._rgb = hsv2Rgb(color);
+            this._rgba = Object.assign(Object.assign({}, this._rgb), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get hsv() {
+        return this.empty ? null : this._hsv;
+    }
+    constructor(onChange, value) {
+        this.onChange = onChange;
+        this._hex = '';
+        this._hsl = null;
+        this._rgb = null;
+        this._hsv = null;
+        this._rgba = null;
+        this.empty = false;
+        this.resetAlpha = true;
+        this.hex = value || '#f00';
+    }
+}
+const recentColors = createSignal([]);
+function ColorPicker(props) {
+    const instance = getCurrentInstance();
+    const picker = new Picker(() => {
+        instance.markAsDirtied();
+    }, props.value);
+    const mainColors = [
+        '#000', '#333', '#444', '#555', '#666', '#777', '#888',
+        '#999', '#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#fff',
+    ];
+    const colors = [
+        '#fec6c2', '#fee5c3', '#fefcc3', '#baf6c4', '#c3ebfe', '#c3cbfe', '#e1caff',
+        '#fc8e88', '#fccc88', '#fcf888', '#76ec8a', '#88d8fc', '#97a4fb', '#c098f4',
+        '#ff6666', '#ffb151', '#fada3a', '#18c937', '#3aaafa', '#6373e2', '#a669f7',
+        '#f63030', '#f88933', '#deb12a', '#038e23', '#1276cc', '#3f52ce', '#8838ed',
+        '#c60000', '#d86912', '#b88811', '#086508', '#144c93', '#1b2eaa', '#6117bf',
+    ];
+    function addRecentColor() {
+        const color = picker.hex;
+        if (!color) {
+            return;
+        }
+        const colors = recentColors().filter(item => {
+            return item !== color;
+        });
+        colors.unshift(color);
+        if (colors.length >= 7) {
+            colors.length = 7;
+        }
+        recentColors.set(colors);
+    }
+    const paletteRef = createRef();
+    function bindPaletteEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = paletteRef.current.getBoundingClientRect();
+            const offsetX = ev.clientX - position.left;
+            const offsetY = ev.clientY - position.top;
+            let s = offsetX / 130 * 100;
+            let v = 100 - offsetY / 130 * 100;
+            s = Math.max(0, s);
+            s = Math.min(100, s);
+            v = Math.max(0, v);
+            v = Math.min(100, v);
+            picker.resetAlpha = false;
+            picker.hsv = {
+                h: picker.hsv.h,
+                s,
+                v
+            };
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const hueBarRef = createRef();
+    function bindHueBarEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = hueBarRef.current.getBoundingClientRect();
+            let offsetY = ev.clientY - position.top;
+            offsetY = Math.max(0, offsetY);
+            offsetY = Math.min(100, offsetY);
+            const h = 360 / 100 * offsetY;
+            picker.resetAlpha = false;
+            picker.hsv = {
+                h,
+                s: picker.hsv.s,
+                v: picker.hsv.v
+            };
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const alphaBarRef = createRef();
+    function bindAlphaEvent(ev) {
+        const update = (ev) => {
+            var _a;
+            const position = alphaBarRef.current.getBoundingClientRect();
+            let offsetX = ev.clientX - position.left;
+            offsetX = Math.max(0, offsetX);
+            offsetX = Math.min(position.width, offsetX);
+            picker.rgba = Object.assign(Object.assign({}, picker.rgba), { a: offsetX / position.width });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        update(ev);
+        const unMouseMove = fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    function bindInputsEvent(ev) {
+        var _a;
+        const updateByHSL = (h, s, l) => {
+            var _a;
+            picker.hex = hsl2Hex({ h, s, l });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        const updateByRGB = (r, g, b) => {
+            var _a;
+            picker.hex = rgb2Hex({ r, g, b });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+        };
+        const el = ev.target;
+        const model = el.getAttribute('data-model');
+        if (el.type === 'number') {
+            const min = +el.min;
+            const max = +el.max;
+            el.value = Math.max(+el.value, min) + '';
+            el.value = Math.min(+el.value, max) + '';
+        }
+        const { h, s, l } = picker.hsl;
+        const { r, g, b } = picker.rgb;
+        switch (model) {
+            case 'H':
+                updateByHSL(+el.value, s, l);
+                break;
+            case 'S':
+                updateByHSL(h, +el.value, l);
+                break;
+            case 'L':
+                updateByHSL(h, s, +el.value);
+                break;
+            case 'R':
+                updateByRGB(+el.value, g, b);
+                break;
+            case 'G':
+                updateByRGB(r, +el.value, b);
+                break;
+            case 'B':
+                updateByRGB(r, g, +el.value);
+                break;
+            case 'HEX':
+                if (/^#(([0-9a-f]){3}){1,2}$/i.test(el.value)) {
+                    picker.hex = el.value;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, picker);
+                }
+                break;
+        }
+    }
+    const isShowPalette = createSignal(false);
+    function selected() {
+        props.onSelected(picker);
+        addRecentColor();
+        isShowPalette.set(false);
+    }
+    function bindColorOptionsEvent(ev) {
+        const target = ev.target;
+        if (!target.hasAttribute('data-color')) {
+            return;
+        }
+        const c = target.getAttribute('data-color');
+        if (/^rgba/.test(c)) {
+            picker.rgba = parseCss(c);
+        }
+        else {
+            picker.hex = c;
+        }
+        props.onSelected(picker);
+        addRecentColor();
+    }
+    return withScopedCSS(scopedId$n, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        return (jsxs("div", { onMousedown: ev => {
+                ev.stopPropagation();
+            }, class: {
+                'xnote-color-picker': true,
+                'xnote-color-picker-show-palette': isShowPalette()
+            }, children: [jsxs("div", { class: "xnote-color-picker-preset", onClick: bindColorOptionsEvent, children: [jsx("div", { class: "xnote-color-picker-swatches", style: "height: 50px", children: mainColors.map(color => {
+                                var _a, _b, _c;
+                                const hsl = (any2Hsl(color) || {});
+                                return (jsx("div", { "data-color": color, class: {
+                                        'xnote-color-picker-current': hsl.l === ((_a = picker.hsl) === null || _a === void 0 ? void 0 : _a.l) && hsl.s === ((_b = picker.hsl) === null || _b === void 0 ? void 0 : _b.s) && hsl.h === ((_c = picker.hsl) === null || _c === void 0 ? void 0 : _c.h),
+                                    }, style: {
+                                        background: color
+                                    } }));
+                            }) }), jsx("div", { class: "xnote-color-picker-swatches", style: "height: 118px;", children: colors.map(color => {
+                                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) => {
+                                const colors = recentColors();
+                                const color = colors[index] || '';
+                                return (jsx("div", { "data-color": color || 'unknown', style: {
+                                        background: color
+                                    } }));
+                            }) }), jsxs("div", { class: "xnote-color-picker-flex", children: [jsx("div", { class: "xnote-color-picker-swatches", children: jsx("div", { "data-color": "" }) }), jsxs("button", { type: "button", class: "xnote-color-picker-to-palette", onClick: () => {
+                                        isShowPalette.set(true);
+                                    }, children: ["\u8C03\u8272\u76D8", jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { transform: "rotate(180, 512, 512)", d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) })] })] })] }), jsxs("div", { class: "xnote-color-picker-menu", children: [jsx("div", { class: "xnote-color-picker-back-btn-wrap", children: jsxs("button", { type: "button", class: "xnote-color-picker-back-btn", onClick: () => {
+                                    isShowPalette.set(false);
+                                }, children: [jsx("svg", { style: "vertical-align: middle;fill: currentColor;overflow: hidden;", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) }), "\u8FD4\u56DE"] }) }), jsxs("div", { class: "xnote-color-picker-viewer", children: [jsxs("div", { class: "xnote-color-picker-viewer-left", children: [jsx("div", { class: [
+                                                'xnote-color-picker-palette',
+                                                {
+                                                    'xnote-color-picker-palette-empty': picker.empty
+                                                }
+                                            ], style: {
+                                                background: picker.empty ? '' : `linear-gradient(to right, #fff, hsl(${(_a = picker.hsv) === null || _a === void 0 ? void 0 : _a.h}, 100%, 50%))`
+                                            }, ref: paletteRef, onMousedown: bindPaletteEvent, children: jsx("div", { class: "xnote-color-picker-palette-point", style: {
+                                                    left: `calc(${(_b = picker.hsv) === null || _b === void 0 ? void 0 : _b.s}% - 6px)`,
+                                                    top: `calc(${100 - (((_c = picker.hsv) === null || _c === void 0 ? void 0 : _c.v) || 0)}% - 6px)`
+                                                } }) }), jsxs("div", { class: "xnote-color-picker-viewer-alpha", children: [jsx("div", { class: "xnote-color-picker-viewer-alpha-pointer", style: {
+                                                        left: picker.empty ? '100%' : (((_d = picker.rgba) === null || _d === void 0 ? void 0 : _d.a) || 0) * 100 + '%',
+                                                    } }), jsx("div", { class: "xnote-color-picker-viewer-alpha-bar", style: {
+                                                        background: picker.empty ? '' : `linear-gradient(to right, transparent, ${picker.hex})`
+                                                    }, onMousedown: bindAlphaEvent, ref: alphaBarRef })] })] }), jsxs("div", { class: "xnote-color-picker-viewer-right", children: [jsxs("div", { class: "xnote-color-picker-tools", children: [jsx("div", { class: "xnote-color-picker-value", children: jsx("div", { class: "xnote-color-picker-value-color", style: {
+                                                            background: picker.empty ? '' : `rgba(${(_e = picker.rgba) === null || _e === void 0 ? void 0 : _e.r}, ${(_f = picker.rgba) === null || _f === void 0 ? void 0 : _f.g}, ${(_g = picker.rgba) === null || _g === void 0 ? void 0 : _g.b}, ${(_h = picker.rgba) === null || _h === void 0 ? void 0 : _h.a})`
+                                                        } }) }), jsx("div", { class: "xnote-color-picker-hue-bar", ref: hueBarRef, onMousedown: bindHueBarEvent, children: jsx("div", { class: "xnote-color-picker-hue-pointer", style: {
+                                                            top: `calc(${(((_j = picker.hsv) === null || _j === void 0 ? void 0 : _j.h) || 0) / 360 * 100}% - 4px)`
+                                                        } }) })] }), jsx("div", { class: "xnote-color-picker-viewer-alpha-value", children: Number((_k = picker.rgba) === null || _k === void 0 ? void 0 : _k.a.toFixed(2)) })] })] }), jsxs("div", { class: "xnote-color-picker-inputs", onInput: bindInputsEvent, children: [jsxs("div", { class: "xnote-color-picker-hsl", children: [jsxs("div", { children: ["H ", jsx("input", { "data-model": "H", min: "0", max: "360", type: "number", value: (_l = picker.hsl) === null || _l === void 0 ? void 0 : _l.h })] }), jsxs("div", { children: ["S ", jsx("input", { "data-model": "S", min: "0", max: "100", type: "number", value: (_m = picker.hsl) === null || _m === void 0 ? void 0 : _m.s })] }), jsxs("div", { children: ["L ", jsx("input", { "data-model": "L", min: "0", max: "100", type: "number", value: (_o = picker.hsl) === null || _o === void 0 ? void 0 : _o.l })] })] }), jsxs("div", { class: "xnote-color-picker-rgb", children: [jsxs("div", { children: ["R ", jsx("input", { "data-model": "R", min: "0", max: "255", type: "number", value: (_p = picker.rgb) === null || _p === void 0 ? void 0 : _p.r })] }), jsxs("div", { children: ["G ", jsx("input", { "data-model": "G", min: "0", max: "255", type: "number", value: (_q = picker.rgb) === null || _q === void 0 ? void 0 : _q.g })] }), jsxs("div", { children: ["B ", jsx("input", { "data-model": "B", min: "0", max: "255", type: "number", value: (_r = picker.rgb) === null || _r === void 0 ? void 0 : _r.b })] })] }), jsx("div", { class: "xnote-color-picker-hex", children: jsxs("div", { children: ["HEX ", jsx("input", { "data-model": "HEX", type: "text", value: picker.hex })] }) })] }), jsx("div", { class: "xnote-color-picker-btn-wrap", children: jsx("button", { type: "button", class: "xnote-color-picker-btn", onClick: selected, children: "\u786E\u5B9A" }) })] })] }));
+    });
+}
+
 var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
@@ -1834,11 +2174,18 @@ function findNonIntersectingRectangles(rectangles) {
 function getMaxRectangle(start, rectangles) {
     let merged = start;
     const remaining = [...rectangles];
+    const unMerged = [];
     while (remaining.length > 0) {
         const current = remaining.shift();
         if (current.intersects(merged)) {
             merged = current.merge(merged);
         }
+        else {
+            unMerged.push(current);
+        }
+    }
+    if (unMerged.length && merged !== start) {
+        return getMaxRectangle(merged, unMerged);
     }
     return merged;
 }
@@ -2073,13 +2420,13 @@ class TableComponent extends Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: 0,
             endColumn: this.state.columnsConfig.length,
             startRow: startIndex,
             endRow: endIndex,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         if (slotRanges.length) {
             setTimeout(() => {
@@ -2108,13 +2455,13 @@ class TableComponent extends Component {
                 endIndex: i.length
             };
         });
-        this.selection.setSelectedRanges(slotRanges);
         this.tableSelection.set({
             startColumn: startIndex,
             endColumn: endIndex,
             startRow: 0,
             endRow: this.state.rows.length,
         });
+        this.selection.setSelectedRanges(slotRanges);
         this.focus.next(true);
         this.selection.restore();
         this.textbus.focus();
@@ -3146,7 +3493,7 @@ const backgroundColorFormatter = new Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3959,6 +4306,36 @@ function CellAlignTool() {
     };
 }
 
+const cellBackgroundAttr = new Attribute('cellBackground', {
+    render(node, formatValue) {
+        const rgba = parseCss(formatValue);
+        if (rgba) {
+            const hsl = rgb2Hsl(rgba);
+            if (hsl.l > 50) {
+                hsl.l -= 10;
+            }
+            else {
+                hsl.l += Math.max((50 - hsl.l) * 0.55, 10);
+            }
+            hsl.s *= 0.7;
+            const newRgba = hsl2Rgb(hsl);
+            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
+        }
+        node.styles.set('backgroundColor', formatValue);
+    }
+});
+const cellBackgroundAttrLoader = {
+    match(element) {
+        return element instanceof HTMLTableCellElement && !!element.style.backgroundColor;
+    },
+    read(element) {
+        return {
+            attribute: cellBackgroundAttr,
+            value: element.style.backgroundColor
+        };
+    }
+};
+
 function CellBackgroundTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
@@ -3966,16 +4343,24 @@ function CellBackgroundTool() {
         highlight: false,
         disabled: false,
     });
-    function split() {
-        // const commonAncestorComponent = selection.commonAncestorComponent
-        // if (commonAncestorComponent instanceof TableComponent) {
-        //   const scopes = selection.getSelectedScopes()
-        //   if (scopes.length) {
-        //     const start = commonAncestorComponent.getCellBySlot(scopes.at(0)!.slot)
-        //     const end = commonAncestorComponent.getCellBySlot(scopes.at(-1)!.slot)
-        //     // Re
-        //   }
-        // }
+    function setColor(picker) {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            if (slots) {
+                slots.map(i => {
+                    return i.cells.filter(t => t.visible).map(i => i.raw.slot);
+                }).flat().forEach(slot => {
+                    const rgba = picker.rgba;
+                    if (rgba) {
+                        slot.setAttribute(cellBackgroundAttr, `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`);
+                    }
+                    else {
+                        slot.removeAttribute(cellBackgroundAttr);
+                    }
+                });
+            }
+        }
     }
     const sub = refreshService.onRefresh.subscribe(() => {
         const commonAncestorComponent = selection.commonAncestorComponent;
@@ -3988,7 +4373,7 @@ function CellBackgroundTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsx("span", { class: "xnote-icon-palette" }) });
+        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" }) }) }));
     };
 }
 
@@ -4986,7 +5371,7 @@ const Toolbar = withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxs(Fragment$1, { children: [jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table"), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) })] }));
+            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxs(Fragment$1, { children: [jsx(ToolbarItem, { children: jsx(MergeCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(SplitCellsTool, {}) }), jsx(ToolbarItem, { children: jsx(CellBackgroundTool, {}) }), jsx(ToolbarItem, { children: jsx(CellAlignTool, {}) })] }, "table"), jsx(ToolbarItem, { children: jsx(BlockTool, {}) }), jsx(ToolbarItem, { children: jsx(AttrTool, {}) }), jsx(ToolbarItem, { children: jsx(BoldTool, {}) }), jsx(ToolbarItem, { children: jsx(ItalicTool, {}) }), jsx(ToolbarItem, { children: jsx(StrikeThroughTool, {}) }), jsx(ToolbarItem, { children: jsx(UnderlineTool, {}) }), jsx(ToolbarItem, { children: jsx(FontSizeTool, {}) }), jsx(ToolbarItem, { children: jsx(FontFamilyTool, {}) }), jsx(ToolbarItem, { children: jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsx(ToolbarItem, { children: jsx(CodeTool, {}) }), jsx(ToolbarItem, { children: jsx(ColorTool, {}) })] }));
     });
 });
 
@@ -6204,24 +6589,25 @@ let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate exte
             return false;
         }
         const rect = data.data || commonAncestorComponent.getMaxRectangle(findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
-        const renderer = this.domAdapter;
         if (!rect) {
             return false;
         }
-        const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlotsByRectangle(rect);
-        const rects = normalizedSlots.map(row => {
-            return row.cells.filter(i => i.visible).map(i => {
-                const td = renderer.getNativeNodeBySlot(i.raw.slot);
-                return td.getBoundingClientRect();
-            });
-        }).flat();
-        const left = Math.min(...rects.map(i => i.left));
-        const top = Math.min(...rects.map(i => i.top));
+        const dom = this.domAdapter.getNativeNodeByComponent(commonAncestorComponent);
+        const content = dom.querySelector('.xnote-table-content');
+        const trs = content.querySelectorAll('tr');
+        const cols = content.querySelectorAll('col');
+        const top = trs[rect.y1].getBoundingClientRect().top;
+        const left = cols[rect.x1].getBoundingClientRect().left;
+        let height = trs[rect.y2 - 1].getBoundingClientRect().bottom - top;
+        if (height === 0) {
+            height = trs[rect.y2 - 1].children.item(0).getBoundingClientRect().bottom - top;
+        }
+        const width = cols[rect.x2 - 1].getBoundingClientRect().right - left;
         return [{
                 left,
                 top,
-                width: Math.max(...rects.map(i => i.right)) - left,
-                height: Math.max(...rects.map(i => i.bottom)) - top
+                width,
+                height
             }];
     }
 };
@@ -6349,9 +6735,22 @@ class XNoteMessageBug extends MessageBus {
     get() {
         const selection = this.selection;
         const c = selection.commonAncestorComponent;
-        return Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths(), data: (!selection.isCollapsed && c instanceof TableComponent) ? c.getSelectedRect() : null });
+        const msg = Object.assign(Object.assign({}, this.userinfo), { selection: selection.getPaths() });
+        if (!selection.isCollapsed && c instanceof TableComponent) {
+            const selection = c.tableSelection();
+            if (selection) {
+                msg.data = {
+                    x1: selection.startColumn,
+                    x2: selection.endColumn,
+                    y1: selection.startRow,
+                    y2: selection.endRow,
+                };
+            }
+        }
+        return msg;
     }
     consume(message) {
+        message = message.filter(i => i.message);
         this.messageChangeEvent.next([...message]);
         this.collaborateCursor.draw(message.filter(item => {
             return item.message.id !== this.userinfo.id;
@@ -6418,6 +6817,7 @@ class Editor extends Textbus {
                 strikeThroughFormatLoader,
                 underlineFormatLoader
             ], attributeLoaders: [
+                cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
                 headingAttrLoader,
                 textAlignAttrLoader,
@@ -6505,6 +6905,7 @@ class Editor extends Textbus {
                 strikeThroughFormatter,
                 underlineFormatter
             ], attributes: [
+                cellBackgroundAttr,
                 cellAlignAttr,
                 headingAttr,
                 textAlignAttr,
@@ -6565,4 +6966,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CellAlignTool, CellBackgroundTool, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, XNoteMessageBug, atComponentLoader, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, cellAlignAttr, cellAlignAttrLoader, 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, 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, CodeTool, ColorPicker, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, MergeCellsTool, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Picker, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, SplitCellsTool, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, XNoteMessageBug, 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, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };