@textbus/xnote 0.0.11 → 0.1.1

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, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, 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) {
@@ -937,6 +1277,166 @@ const highlightBoxComponentLoader = {
     }
 };
 
+const fontSizeFormatter = new Formatter('fontSize', {
+    render(children, formatValue) {
+        return {
+            fallbackTagName: 'span',
+            attach(host) {
+                host.styles.set('fontSize', formatValue);
+            }
+        };
+    }
+});
+const fontSizeFormatLoader = {
+    match(element) {
+        return !!element.style.fontSize;
+    },
+    read(element) {
+        return {
+            formatter: fontSizeFormatter,
+            value: element.style.fontSize
+        };
+    }
+};
+
+const boldFormatter = new Formatter('bold', {
+    render(children) {
+        return createVNode('strong', null, children);
+    }
+});
+function toggleBold(textbus) {
+    const controller = textbus.get(Controller);
+    if (controller.readonly) {
+        return;
+    }
+    const query = textbus.get(Query);
+    const commander = textbus.get(Commander);
+    const state = query.queryFormat(boldFormatter);
+    if (state.state === QueryStateType.Normal) {
+        commander.applyFormat(boldFormatter, true);
+    }
+    else {
+        commander.unApplyFormat(boldFormatter);
+    }
+}
+function registerBoldShortcut(textbus) {
+    const keyboard = textbus.get(Keyboard);
+    keyboard.addShortcut({
+        keymap: {
+            modKey: true,
+            key: 'b'
+        },
+        action: () => {
+            toggleBold(textbus);
+        }
+    });
+}
+const boldFormatLoader = {
+    match(element) {
+        return element.tagName === 'STRONG' || element.tagName === 'B' || /bold|[5-9]00/.test(element.style.fontWeight);
+    },
+    read() {
+        return {
+            formatter: boldFormatter,
+            value: true
+        };
+    }
+};
+
+const colorFormatter = new Formatter('color', {
+    render(children, formatValue) {
+        return {
+            fallbackTagName: 'span',
+            attach(host) {
+                host.styles.set('color', formatValue);
+            }
+        };
+    }
+});
+const colorFormatLoader = {
+    match(element) {
+        return !!element.style.color;
+    },
+    read(element) {
+        return {
+            formatter: colorFormatter,
+            value: element.style.color
+        };
+    }
+};
+
+function createTimelineItem(textbus, theme) {
+    const slot = new Slot([
+        ContentType.BlockComponent,
+    ]);
+    const title = new ParagraphComponent(textbus);
+    title.state.slot.insert('时间主题', [
+        [fontSizeFormatter, '18px'],
+        [boldFormatter, true]
+    ]);
+    title.state.slot.insert(' 2020-02-02', [
+        [fontSizeFormatter, '15px'],
+        [colorFormatter, '#777']
+    ]);
+    const desc = new ParagraphComponent(textbus);
+    desc.state.slot.insert('描述信息...');
+    slot.insert(title);
+    slot.insert(desc);
+    return { theme, slot };
+}
+class TimelineComponent extends Component {
+    static fromJSON(textbus, json) {
+        const registry = textbus.get(Registry);
+        return new TimelineComponent(textbus, {
+            items: json.items.map(i => {
+                return {
+                    theme: i.theme,
+                    slot: registry.createSlot(i.slot)
+                };
+            })
+        });
+    }
+    getSlots() {
+        return this.state.items.map(i => i.slot);
+    }
+}
+TimelineComponent.componentName = 'TimelineComponent';
+TimelineComponent.type = ContentType.BlockComponent;
+
+function createStepItem(textbus) {
+    const slot = new Slot([
+        ContentType.BlockComponent
+    ]);
+    const title = new ParagraphComponent(textbus);
+    title.state.slot.insert('标题', [
+        [fontSizeFormatter, '18px'],
+        [boldFormatter, true]
+    ]);
+    const content = new ParagraphComponent(textbus);
+    content.state.slot.insert('描述信息...');
+    slot.insert(title);
+    slot.insert(content);
+    return { slot };
+}
+class StepComponent extends Component {
+    static fromJSON(textbus, json) {
+        const registry = textbus.get(Registry);
+        return new StepComponent(textbus, {
+            step: json.step,
+            items: json.items.map(i => {
+                return {
+                    slot: registry.createSlot(i.slot)
+                };
+            })
+        });
+    }
+    getSlots() {
+        return this.state.items.map(i => i.slot);
+    }
+}
+StepComponent.componentName = 'StepComponent';
+StepComponent.type = ContentType.BlockComponent;
+
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -967,7 +1467,9 @@ class ParagraphComponent extends Component {
                 slot: afterSlot
             });
             if (isEmpty && (this.parentComponent instanceof BlockquoteComponent ||
-                this.parentComponent instanceof HighlightBoxComponent)) {
+                this.parentComponent instanceof HighlightBoxComponent ||
+                this.parentComponent instanceof TimelineComponent ||
+                this.parentComponent instanceof StepComponent)) {
                 commander.insertAfter(nextParagraph, this.parentComponent);
                 commander.removeComponent(this);
             }
@@ -3153,7 +3655,7 @@ const backgroundColorFormatter = new Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && element.tagName !== 'TH' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3163,50 +3665,6 @@ const backgroundColorFormatLoader = {
     }
 };
 
-const boldFormatter = new Formatter('bold', {
-    render(children) {
-        return createVNode('strong', null, children);
-    }
-});
-function toggleBold(textbus) {
-    const controller = textbus.get(Controller);
-    if (controller.readonly) {
-        return;
-    }
-    const query = textbus.get(Query);
-    const commander = textbus.get(Commander);
-    const state = query.queryFormat(boldFormatter);
-    if (state.state === QueryStateType.Normal) {
-        commander.applyFormat(boldFormatter, true);
-    }
-    else {
-        commander.unApplyFormat(boldFormatter);
-    }
-}
-function registerBoldShortcut(textbus) {
-    const keyboard = textbus.get(Keyboard);
-    keyboard.addShortcut({
-        keymap: {
-            modKey: true,
-            key: 'b'
-        },
-        action: () => {
-            toggleBold(textbus);
-        }
-    });
-}
-const boldFormatLoader = {
-    match(element) {
-        return element.tagName === 'STRONG' || element.tagName === 'B' || /bold|[5-9]00/.test(element.style.fontWeight);
-    },
-    read() {
-        return {
-            formatter: boldFormatter,
-            value: true
-        };
-    }
-};
-
 const codeFormatter = new Formatter('code', {
     inheritable: false,
     render(children) {
@@ -3254,28 +3712,6 @@ const codeFormatLoader = {
     }
 };
 
-const colorFormatter = new Formatter('color', {
-    render(children, formatValue) {
-        return {
-            fallbackTagName: 'span',
-            attach(host) {
-                host.styles.set('color', formatValue);
-            }
-        };
-    }
-});
-const colorFormatLoader = {
-    match(element) {
-        return !!element.style.color;
-    },
-    read(element) {
-        return {
-            formatter: colorFormatter,
-            value: element.style.color
-        };
-    }
-};
-
 const fontFamilyFormatter = new Formatter('fontFamily', {
     render(children, formatValue) {
         return {
@@ -3298,28 +3734,6 @@ const fontFamilyFormatLoader = {
     }
 };
 
-const fontSizeFormatter = new Formatter('fontSize', {
-    render(children, formatValue) {
-        return {
-            fallbackTagName: 'span',
-            attach(host) {
-                host.styles.set('fontSize', formatValue);
-            }
-        };
-    }
-});
-const fontSizeFormatLoader = {
-    match(element) {
-        return !!element.style.fontSize;
-    },
-    read(element) {
-        return {
-            formatter: fontSizeFormatter,
-            value: element.style.fontSize
-        };
-    }
-};
-
 const italicFormatter = new Formatter('italic', {
     render(children) {
         return createVNode('em', null, children);
@@ -3966,6 +4380,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 || 1})`);
+        }
+        node.styles.set('backgroundColor', formatValue);
+    }
+});
+const cellBackgroundAttrLoader = {
+    match(element) {
+        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
+    },
+    read(element) {
+        return {
+            attribute: cellBackgroundAttr,
+            value: element.style.backgroundColor
+        };
+    }
+};
+
 function CellBackgroundTool() {
     const refreshService = inject(RefreshService);
     const selection = inject(Selection);
@@ -3973,16 +4417,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;
@@ -3995,7 +4447,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" }) }) }));
     };
 }
 
@@ -4312,78 +4764,6 @@ const katexComponentLoader = {
     }
 };
 
-function createTimelineItem(textbus, theme) {
-    const slot = new Slot([
-        ContentType.BlockComponent,
-    ]);
-    const title = new ParagraphComponent(textbus);
-    title.state.slot.insert('时间主题', [
-        [fontSizeFormatter, '18px'],
-        [boldFormatter, true]
-    ]);
-    title.state.slot.insert(' 2020-02-02', [
-        [fontSizeFormatter, '15px'],
-        [colorFormatter, '#777']
-    ]);
-    const desc = new ParagraphComponent(textbus);
-    desc.state.slot.insert('描述信息...');
-    slot.insert(title);
-    slot.insert(desc);
-    return { theme, slot };
-}
-class TimelineComponent extends Component {
-    static fromJSON(textbus, json) {
-        const registry = textbus.get(Registry);
-        return new TimelineComponent(textbus, {
-            items: json.items.map(i => {
-                return {
-                    theme: i.theme,
-                    slot: registry.createSlot(i.slot)
-                };
-            })
-        });
-    }
-    getSlots() {
-        return this.state.items.map(i => i.slot);
-    }
-}
-TimelineComponent.componentName = 'TimelineComponent';
-TimelineComponent.type = ContentType.BlockComponent;
-
-function createStepItem(textbus) {
-    const slot = new Slot([
-        ContentType.BlockComponent
-    ]);
-    const title = new ParagraphComponent(textbus);
-    title.state.slot.insert('标题', [
-        [fontSizeFormatter, '18px'],
-        [boldFormatter, true]
-    ]);
-    const content = new ParagraphComponent(textbus);
-    content.state.slot.insert('描述信息...');
-    slot.insert(title);
-    slot.insert(content);
-    return { slot };
-}
-class StepComponent extends Component {
-    static fromJSON(textbus, json) {
-        const registry = textbus.get(Registry);
-        return new StepComponent(textbus, {
-            step: json.step,
-            items: json.items.map(i => {
-                return {
-                    slot: registry.createSlot(i.slot)
-                };
-            })
-        });
-    }
-    getSlots() {
-        return this.state.items.map(i => i.slot);
-    }
-}
-StepComponent.componentName = 'StepComponent';
-StepComponent.type = ContentType.BlockComponent;
-
 function InsertTool(props) {
     const commander = inject(Commander);
     const selection = inject(Selection);
@@ -4993,7 +5373,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, {}) })] }));
     });
 });
 
@@ -6044,7 +6424,9 @@ const TableComponentView = withAnnotation({
                             ], children: [jsx("colgroup", { children: state.columnsConfig.map(w => {
                                         return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
                                     }) }), jsx("tbody", { children: normalizedData.map((row) => {
-                                        return (jsx("tr", { children: row.cells.map(cell => {
+                                        return (jsx("tr", { children: row.cells.filter(i => {
+                                                return i.visible;
+                                            }).map(cell => {
                                                 return adapter.slotRender(cell.raw.slot, children => {
                                                     return createVNode('td', {
                                                         key: cell.raw.id,
@@ -6111,6 +6493,9 @@ const tableComponentLoader = {
                         ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
+                    delta.attributes.forEach((value, key) => {
+                        slot.setAttribute(key, value);
+                    });
                     results.forEach(i => {
                         slot.insert(i);
                     });
@@ -6139,6 +6524,9 @@ const tableComponentLoader = {
                         ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
+                    delta.attributes.forEach((value, key) => {
+                        slot.setAttribute(key, value);
+                    });
                     results.forEach(i => {
                         slot.insert(i);
                     });
@@ -6439,6 +6827,7 @@ class Editor extends Textbus {
                 strikeThroughFormatLoader,
                 underlineFormatLoader
             ], attributeLoaders: [
+                cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
                 headingAttrLoader,
                 textAlignAttrLoader,
@@ -6526,6 +6915,7 @@ class Editor extends Textbus {
                 strikeThroughFormatter,
                 underlineFormatter
             ], attributes: [
+                cellBackgroundAttr,
                 cellAlignAttr,
                 headingAttr,
                 textAlignAttr,
@@ -6586,4 +6976,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 };