@textbus/xnote 0.0.11 → 0.1.1

package/bundles/index.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('@viewfly/core/jsx-runtime');
 var scopedCss = require('@viewfly/scoped-css');
 var core = require('@viewfly/core');
 var core$1 = require('@textbus/core');
+var color = require('@tanbo/color');
 var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
@@ -11,10 +12,9 @@ var highlightjs = require('highlight.js');
 var uuid = require('uuid');
 var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
-var color = require('@tanbo/color');
 var collaborate = require('@textbus/collaborate');
 
-var scopedId$n = "vf-d94b56";
+var scopedId$o = "vf-d94b56";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -147,7 +147,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$n, () => {
+    return scopedCss.withScopedCSS(scopedId$o, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -159,6 +159,346 @@ function Button(props) {
     });
 }
 
+var scopedId$n = "vf-d552b9";
+
+class Picker {
+    set hex(color$1) {
+        var _a;
+        const c = color$1 ? color.normalizeHex(color$1) : null;
+        if (c) {
+            this.empty = false;
+            this._hex = c;
+            this._hsl = color.hex2Hsl(c);
+            this._rgb = color.hex2Rgb(c);
+            this._hsv = color.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$1) {
+        var _a;
+        if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.l !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsl = color$1;
+            this._hex = color.hsl2Hex(color$1);
+            this._hsv = color.hsl2Hsv(color$1);
+            this._rgb = color.hsl2Rgb(color$1);
+            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$1) {
+        var _a;
+        if (!color$1 || typeof color$1.r !== 'number' || typeof color$1.g !== 'number' || typeof color$1.b !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgb = color$1;
+            this._rgba = Object.assign(Object.assign({}, color$1), { a: this.resetAlpha ? 1 : ((_a = this._rgba) === null || _a === void 0 ? void 0 : _a.a) || 1 });
+            this._hsl = color.rgb2Hsl(color$1);
+            this._hex = color.rgb2Hex(color$1);
+            this._hsv = color.rgb2Hsv(color$1);
+        }
+        this.resetAlpha = true;
+        this.onChange();
+    }
+    get rgb() {
+        return this.empty ? null : this._rgb;
+    }
+    set rgba(color$1) {
+        if (!color$1 ||
+            typeof color$1.r !== 'number' ||
+            typeof color$1.g !== 'number' ||
+            typeof color$1.b !== 'number' ||
+            typeof color$1.a !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._rgba = color$1;
+            this._hsl = color.rgb2Hsl(color$1);
+            this._hex = color.rgb2Hex(color$1);
+            this._hsv = color.rgb2Hsv(color$1);
+        }
+        this.onChange();
+    }
+    get rgba() {
+        return this.empty ? null : this._rgba;
+    }
+    set hsv(color$1) {
+        var _a;
+        if (!color$1 || typeof color$1.h !== 'number' || typeof color$1.s !== 'number' || typeof color$1.v !== 'number') {
+            this.empty = true;
+        }
+        else {
+            this.empty = false;
+            this._hsv = color$1;
+            this._hex = color.hsv2Hex(color$1);
+            this._hsl = color.hsv2Hsl(color$1);
+            this._rgb = color.hsv2Rgb(color$1);
+            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 = core.createSignal([]);
+function ColorPicker(props) {
+    const instance = core.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 = core.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 = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const hueBarRef = core.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 = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    const alphaBarRef = core.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 = core$1.fromEvent(document, 'mousemove').subscribe(ev => {
+            update(ev);
+        });
+        const unMouseUp = core$1.fromEvent(document, 'mouseup').subscribe(() => {
+            unMouseMove.unsubscribe();
+            unMouseUp.unsubscribe();
+        });
+    }
+    function bindInputsEvent(ev) {
+        var _a;
+        const updateByHSL = (h, s, l) => {
+            var _a;
+            picker.hex = color.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 = color.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 = core.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 = color.parseCss(c);
+        }
+        else {
+            picker.hex = c;
+        }
+        props.onSelected(picker);
+        addRecentColor();
+    }
+    return scopedCss.withScopedCSS(scopedId$n, () => {
+        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();
+            }, class: {
+                'xnote-color-picker': true,
+                'xnote-color-picker-show-palette': isShowPalette()
+            }, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-preset", onClick: bindColorOptionsEvent, children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 50px", children: mainColors.map(color$1 => {
+                                var _a, _b, _c;
+                                const hsl = (color.any2Hsl(color$1) || {});
+                                return (jsxRuntime.jsx("div", { "data-color": color$1, 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$1
+                                    } }));
+                            }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", style: "height: 118px;", children: colors.map(color => {
+                                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) => {
+                                const colors = recentColors();
+                                const color = colors[index] || '';
+                                return (jsxRuntime.jsx("div", { "data-color": color || 'unknown', style: {
+                                        background: color
+                                    } }));
+                            }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-flex", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-swatches", children: jsxRuntime.jsx("div", { "data-color": "" }) }), jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-to-palette", onClick: () => {
+                                        isShowPalette.set(true);
+                                    }, children: ["\u8C03\u8272\u76D8", jsxRuntime.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: jsxRuntime.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" }) })] })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-menu", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-back-btn-wrap", children: jsxRuntime.jsxs("button", { type: "button", class: "xnote-color-picker-back-btn", onClick: () => {
+                                    isShowPalette.set(false);
+                                }, children: [jsxRuntime.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: jsxRuntime.jsx("path", { d: "M497.92 165.12L422.4 89.6 0 512l422.4 422.4 75.52-75.52L151.04 512z" }) }), "\u8FD4\u56DE"] }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-left", children: [jsxRuntime.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: jsxRuntime.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)`
+                                                } }) }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-alpha", children: [jsxRuntime.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 + '%',
+                                                    } }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-bar", style: {
+                                                        background: picker.empty ? '' : `linear-gradient(to right, transparent, ${picker.hex})`
+                                                    }, onMousedown: bindAlphaEvent, ref: alphaBarRef })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-viewer-right", children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-tools", children: [jsxRuntime.jsx("div", { class: "xnote-color-picker-value", children: jsxRuntime.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})`
+                                                        } }) }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hue-bar", ref: hueBarRef, onMousedown: bindHueBarEvent, children: jsxRuntime.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)`
+                                                        } }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-viewer-alpha-value", children: Number((_k = picker.rgba) === null || _k === void 0 ? void 0 : _k.a.toFixed(2)) })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-inputs", onInput: bindInputsEvent, children: [jsxRuntime.jsxs("div", { class: "xnote-color-picker-hsl", children: [jsxRuntime.jsxs("div", { children: ["H ", jsxRuntime.jsx("input", { "data-model": "H", min: "0", max: "360", type: "number", value: (_l = picker.hsl) === null || _l === void 0 ? void 0 : _l.h })] }), jsxRuntime.jsxs("div", { children: ["S ", jsxRuntime.jsx("input", { "data-model": "S", min: "0", max: "100", type: "number", value: (_m = picker.hsl) === null || _m === void 0 ? void 0 : _m.s })] }), jsxRuntime.jsxs("div", { children: ["L ", jsxRuntime.jsx("input", { "data-model": "L", min: "0", max: "100", type: "number", value: (_o = picker.hsl) === null || _o === void 0 ? void 0 : _o.l })] })] }), jsxRuntime.jsxs("div", { class: "xnote-color-picker-rgb", children: [jsxRuntime.jsxs("div", { children: ["R ", jsxRuntime.jsx("input", { "data-model": "R", min: "0", max: "255", type: "number", value: (_p = picker.rgb) === null || _p === void 0 ? void 0 : _p.r })] }), jsxRuntime.jsxs("div", { children: ["G ", jsxRuntime.jsx("input", { "data-model": "G", min: "0", max: "255", type: "number", value: (_q = picker.rgb) === null || _q === void 0 ? void 0 : _q.g })] }), jsxRuntime.jsxs("div", { children: ["B ", jsxRuntime.jsx("input", { "data-model": "B", min: "0", max: "255", type: "number", value: (_r = picker.rgb) === null || _r === void 0 ? void 0 : _r.b })] })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-hex", children: jsxRuntime.jsxs("div", { children: ["HEX ", jsxRuntime.jsx("input", { "data-model": "HEX", type: "text", value: picker.hex })] }) })] }), jsxRuntime.jsx("div", { class: "xnote-color-picker-btn-wrap", children: jsxRuntime.jsx("button", { type: "button", class: "xnote-color-picker-btn", onClick: selected, children: "\u786E\u5B9A" }) })] })] }));
+    });
+}
+
 var scopedId$m = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
@@ -939,6 +1279,166 @@ const highlightBoxComponentLoader = {
     }
 };
 
+const fontSizeFormatter = new core$1.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 core$1.Formatter('bold', {
+    render(children) {
+        return core$1.createVNode('strong', null, children);
+    }
+});
+function toggleBold(textbus) {
+    const controller = textbus.get(core$1.Controller);
+    if (controller.readonly) {
+        return;
+    }
+    const query = textbus.get(core$1.Query);
+    const commander = textbus.get(core$1.Commander);
+    const state = query.queryFormat(boldFormatter);
+    if (state.state === core$1.QueryStateType.Normal) {
+        commander.applyFormat(boldFormatter, true);
+    }
+    else {
+        commander.unApplyFormat(boldFormatter);
+    }
+}
+function registerBoldShortcut(textbus) {
+    const keyboard = textbus.get(core$1.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 core$1.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 core$1.Slot([
+        core$1.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 core$1.Component {
+    static fromJSON(textbus, json) {
+        const registry = textbus.get(core$1.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 = core$1.ContentType.BlockComponent;
+
+function createStepItem(textbus) {
+    const slot = new core$1.Slot([
+        core$1.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 core$1.Component {
+    static fromJSON(textbus, json) {
+        const registry = textbus.get(core$1.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 = core$1.ContentType.BlockComponent;
+
 class ParagraphComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -969,7 +1469,9 @@ class ParagraphComponent extends core$1.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);
             }
@@ -3155,7 +3657,7 @@ const backgroundColorFormatter = new core$1.Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && element.tagName !== 'TH' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3165,50 +3667,6 @@ const backgroundColorFormatLoader = {
     }
 };
 
-const boldFormatter = new core$1.Formatter('bold', {
-    render(children) {
-        return core$1.createVNode('strong', null, children);
-    }
-});
-function toggleBold(textbus) {
-    const controller = textbus.get(core$1.Controller);
-    if (controller.readonly) {
-        return;
-    }
-    const query = textbus.get(core$1.Query);
-    const commander = textbus.get(core$1.Commander);
-    const state = query.queryFormat(boldFormatter);
-    if (state.state === core$1.QueryStateType.Normal) {
-        commander.applyFormat(boldFormatter, true);
-    }
-    else {
-        commander.unApplyFormat(boldFormatter);
-    }
-}
-function registerBoldShortcut(textbus) {
-    const keyboard = textbus.get(core$1.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 core$1.Formatter('code', {
     inheritable: false,
     render(children) {
@@ -3256,28 +3714,6 @@ const codeFormatLoader = {
     }
 };
 
-const colorFormatter = new core$1.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 core$1.Formatter('fontFamily', {
     render(children, formatValue) {
         return {
@@ -3300,28 +3736,6 @@ const fontFamilyFormatLoader = {
     }
 };
 
-const fontSizeFormatter = new core$1.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 core$1.Formatter('italic', {
     render(children) {
         return core$1.createVNode('em', null, children);
@@ -3968,6 +4382,36 @@ function CellAlignTool() {
     };
 }
 
+const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
+    render(node, formatValue) {
+        const rgba = color.parseCss(formatValue);
+        if (rgba) {
+            const hsl = color.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 = color.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 = core.inject(exports.RefreshService);
     const selection = core.inject(core$1.Selection);
@@ -3975,16 +4419,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;
@@ -3997,7 +4449,7 @@ function CellBackgroundTool() {
     });
     return () => {
         const vm = viewModel();
-        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) });
+        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" }) }) }));
     };
 }
 
@@ -4314,78 +4766,6 @@ const katexComponentLoader = {
     }
 };
 
-function createTimelineItem(textbus, theme) {
-    const slot = new core$1.Slot([
-        core$1.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 core$1.Component {
-    static fromJSON(textbus, json) {
-        const registry = textbus.get(core$1.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 = core$1.ContentType.BlockComponent;
-
-function createStepItem(textbus) {
-    const slot = new core$1.Slot([
-        core$1.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 core$1.Component {
-    static fromJSON(textbus, json) {
-        const registry = textbus.get(core$1.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 = core$1.ContentType.BlockComponent;
-
 function InsertTool(props) {
     const commander = core.inject(core$1.Commander);
     const selection = core.inject(core$1.Selection);
@@ -4995,7 +5375,7 @@ const Toolbar = core.withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), 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(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
+            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [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"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), 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(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
     });
 });
 
@@ -6046,7 +6426,9 @@ const TableComponentView = core.withAnnotation({
                             ], children: [jsxRuntime.jsx("colgroup", { children: state.columnsConfig.map(w => {
                                         return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
                                     }) }), jsxRuntime.jsx("tbody", { children: normalizedData.map((row) => {
-                                        return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
+                                        return (jsxRuntime.jsx("tr", { children: row.cells.filter(i => {
+                                                return i.visible;
+                                            }).map(cell => {
                                                 return adapter.slotRender(cell.raw.slot, children => {
                                                     return core$1.createVNode('td', {
                                                         key: cell.raw.id,
@@ -6113,6 +6495,9 @@ const tableComponentLoader = {
                         core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
+                    delta.attributes.forEach((value, key) => {
+                        slot.setAttribute(key, value);
+                    });
                     results.forEach(i => {
                         slot.insert(i);
                     });
@@ -6141,6 +6526,9 @@ const tableComponentLoader = {
                         core$1.ContentType.Text
                     ]), cell).toDelta();
                     const results = deltaToBlock(delta, textbus);
+                    delta.attributes.forEach((value, key) => {
+                        slot.setAttribute(key, value);
+                    });
                     results.forEach(i => {
                         slot.insert(i);
                     });
@@ -6441,6 +6829,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatLoader,
                 underlineFormatLoader
             ], attributeLoaders: [
+                cellBackgroundAttrLoader,
                 cellAlignAttrLoader,
                 headingAttrLoader,
                 textAlignAttrLoader,
@@ -6528,6 +6917,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatter,
                 underlineFormatter
             ], attributes: [
+                cellBackgroundAttr,
                 cellAlignAttr,
                 headingAttr,
                 textAlignAttr,
@@ -6599,6 +6989,7 @@ exports.Button = Button;
 exports.CellAlignTool = CellAlignTool;
 exports.CellBackgroundTool = CellBackgroundTool;
 exports.CodeTool = CodeTool;
+exports.ColorPicker = ColorPicker;
 exports.ColorTool = ColorTool;
 exports.ComponentToolbar = ComponentToolbar;
 exports.Divider = Divider;
@@ -6632,6 +7023,7 @@ exports.Organization = Organization;
 exports.OutputInjectionToken = OutputInjectionToken;
 exports.ParagraphComponent = ParagraphComponent;
 exports.ParagraphView = ParagraphView;
+exports.Picker = Picker;
 exports.Popup = Popup;
 exports.RootComponent = RootComponent;
 exports.RootView = RootView;
@@ -6658,6 +7050,8 @@ exports.boldFormatLoader = boldFormatLoader;
 exports.boldFormatter = boldFormatter;
 exports.cellAlignAttr = cellAlignAttr;
 exports.cellAlignAttrLoader = cellAlignAttrLoader;
+exports.cellBackgroundAttr = cellBackgroundAttr;
+exports.cellBackgroundAttrLoader = cellBackgroundAttrLoader;
 exports.codeFormatLoader = codeFormatLoader;
 exports.codeFormatter = codeFormatter;
 exports.colorFormatLoader = colorFormatLoader;