@textbus/xnote 0.1.0 → 0.1.2

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
 import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, 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 { 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';
@@ -731,8 +731,11 @@ const DropdownMenuPortal = withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
+    function stopPropagation(ev) {
+        ev.stopPropagation();
+    }
     return createPortal(withScopedCSS(scopedId$i, () => {
-        return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
+        return (jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", style: {
                     padding: props.padding
@@ -1277,6 +1280,185 @@ 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);
+    }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+}
+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);
+    }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            if (index === this.state.step) {
+                this.state.step--;
+            }
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+}
+StepComponent.componentName = 'StepComponent';
+StepComponent.type = ContentType.BlockComponent;
+
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -1307,7 +1489,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);
             }
@@ -3493,7 +3677,7 @@ const backgroundColorFormatter = new Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return element.tagName !== 'TD' && !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && element.tagName !== 'TH' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3503,50 +3687,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) {
@@ -3594,28 +3734,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 {
@@ -3638,28 +3756,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);
@@ -4319,14 +4415,14 @@ const cellBackgroundAttr = new Attribute('cellBackground', {
             }
             hsl.s *= 0.7;
             const newRgba = hsl2Rgb(hsl);
-            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
+            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 instanceof HTMLTableCellElement && !!element.style.backgroundColor;
+        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -4690,78 +4786,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);
@@ -6422,7 +6446,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,
@@ -6489,6 +6515,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);
                     });
@@ -6517,6 +6546,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);
                     });

package/bundles/index.js

@@ -733,8 +733,11 @@ const DropdownMenuPortal = core.withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
+    function stopPropagation(ev) {
+        ev.stopPropagation();
+    }
     return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$i, () => {
-        return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
+        return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMousedown: stopPropagation, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", style: {
                     padding: props.padding
@@ -1279,6 +1282,185 @@ 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);
+    }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+}
+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);
+    }
+    removeSlot(slot) {
+        const index = this.state.items.findIndex(i => i.slot === slot);
+        if (index >= 0) {
+            if (index === this.state.step) {
+                this.state.step--;
+            }
+            this.state.items.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
+}
+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);
@@ -1309,7 +1491,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);
             }
@@ -3495,7 +3679,7 @@ const backgroundColorFormatter = new core$1.Formatter('backgroundColor', {
 });
 const backgroundColorFormatLoader = {
     match(element) {
-        return element.tagName !== 'TD' && !!element.style.backgroundColor;
+        return element.tagName !== 'TD' && element.tagName !== 'TH' && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -3505,50 +3689,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) {
@@ -3596,28 +3736,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 {
@@ -3640,28 +3758,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);
@@ -4321,14 +4417,14 @@ const cellBackgroundAttr = new core$1.Attribute('cellBackground', {
             }
             hsl.s *= 0.7;
             const newRgba = color.hsl2Rgb(hsl);
-            node.styles.set('borderColor', `rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${rgba.a})`);
+            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 instanceof HTMLTableCellElement && !!element.style.backgroundColor;
+        return (element.tagName === 'TD' || element.tagName === 'TH') && !!element.style.backgroundColor;
     },
     read(element) {
         return {
@@ -4692,78 +4788,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);
@@ -6424,7 +6448,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,
@@ -6491,6 +6517,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);
                     });
@@ -6519,6 +6548,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);
                     });

package/bundles/textbus/components/step/step.component.d.ts

@@ -12,4 +12,5 @@ export declare class StepComponent extends Component<StepComponentState> {
     static type: ContentType;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<StepComponentState>): StepComponent;
     getSlots(): Slot[];
+    removeSlot(slot: Slot): boolean;
 }

package/bundles/textbus/components/timeline/timeline.component.d.ts

@@ -12,4 +12,5 @@ export declare class TimelineComponent extends Component<TimelineComponentState>
     static type: ContentType;
     static fromJSON(textbus: Textbus, json: ComponentStateLiteral<TimelineComponentState>): TimelineComponent;
     getSlots(): Slot[];
+    removeSlot(slot: Slot): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@tanbo/color": "^0.1.1",
-    "@textbus/adapter-viewfly": "^4.2.0",
-    "@textbus/collaborate": "^4.2.0",
-    "@textbus/core": "^4.2.0",
-    "@textbus/platform-browser": "^4.2.0",
+    "@textbus/adapter-viewfly": "^4.2.2",
+    "@textbus/collaborate": "^4.2.1",
+    "@textbus/core": "^4.2.1",
+    "@textbus/platform-browser": "^4.2.2",
     "@viewfly/core": "^1.0.5",
     "@viewfly/hooks": "^1.0.5",
     "@viewfly/platform-browser": "^1.0.6",