@textbus/xnote 0.0.2 → 0.0.4

package/bundles/index.js

@@ -179,7 +179,7 @@ function Divider() {
     });
 }
 
-var scopedId$k = "vf-8abf2c";
+var scopedId$k = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -461,17 +461,18 @@ const Dropdown = core.withAnnotation({
             }
         },
         $render: scopedCss.withScopedCSS(scopedId$j, () => {
-            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsxRuntime.jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
-                            props.menu.map(menu => {
-                                return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
-                                        var _a;
-                                        if (menu.disabled) {
-                                            return;
-                                        }
-                                        (_a = props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, menu.value);
-                                    }, children: menu.label }));
-                            }) :
-                            props.menu })] }));
+            return (jsxRuntime.jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxRuntime.jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsxRuntime.jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsxRuntime.jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
+                        jsxRuntime.jsx(DropdownMenuPortal, { toLeft: props.toLeft, padding: props.padding, noTrigger: props.trigger === 'none', width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
+                                props.menu.map(menu => {
+                                    return (jsxRuntime.jsx("div", { class: "dropdown-menu-item", onClick: () => {
+                                            var _a;
+                                            if (menu.disabled) {
+                                                return;
+                                            }
+                                            (_a = props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, menu.value);
+                                        }, children: menu.label }));
+                                }) :
+                                props.menu })] }));
         })
     };
 });
@@ -901,14 +902,14 @@ function HighlightBoxView(props) {
     return () => {
         const { state, name } = props.component;
         if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+            return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: "xnote-highlight-box-content", renderEnv: readonly() || output() })] }));
         }
         return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
                                     return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
                                 }), jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
                                     const icon = String.fromCodePoint(i);
                                     return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+                                })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: "xnote-highlight-box-content", renderEnv: readonly() || output() })] }));
     };
 }
 const highlightBoxComponentLoader = {
@@ -2189,7 +2190,7 @@ function TodolistView(props) {
                 marginLeft: indent * 24 + 'px',
                 justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                 textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
+            }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: "div", class: "xnote-todolist-content", renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -2465,7 +2466,7 @@ function ListComponentView(props) {
                 }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
+                                jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: "xnote-list-content", renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
@@ -3502,16 +3503,13 @@ function LinkTool(props) {
     const editorService = core.inject(exports.EditorService);
     const container = core.inject(platformBrowser.VIEW_CONTAINER);
     const isShow = core.createSignal(false);
-    const inputRef = core.createRef();
+    const value = core.createSignal('');
     function setLink(ev) {
         ev.preventDefault();
-        const value = inputRef.current.value;
-        if (value) {
-            commander.applyFormat(linkFormatter, {
-                href: value,
-                target: '_blanK'
-            });
-        }
+        commander.applyFormat(linkFormatter, {
+            href: value(),
+            target: '_blanK'
+        });
         isShow.set(false);
     }
     let isClickFromSelf = false;
@@ -3540,7 +3538,9 @@ function LinkTool(props) {
                     }, children: jsxRuntime.jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
                     jsxRuntime.jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxRuntime.jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
-                            }, class: "input-group", children: [jsxRuntime.jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
+                            }, class: "input-group", children: [jsxRuntime.jsx("input", { onChange: ev => {
+                                        value.set(ev.target.value);
+                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsxRuntime.jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
     });
 }
 
@@ -3840,6 +3840,78 @@ 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);
@@ -3979,10 +4051,28 @@ function InsertTool(props) {
                     selection.selectComponent(comp);
                 }
                 break;
+            case 'step':
+                {
+                    const step = new StepComponent(textbus, {
+                        step: 0,
+                        items: [createStepItem(textbus)]
+                    });
+                    insertComponent(step);
+                    selection.selectFirstPosition(step, false, true);
+                }
+                break;
+            case 'timeline': {
+                const timeline = new TimelineComponent(textbus, {
+                    items: [createTimelineItem(textbus, '#296eff')]
+                });
+                insertComponent(timeline);
+                selection.selectFirstPosition(timeline, false, true);
+                break;
+            }
         }
     }
     return scopedCss.withScopedCSS(scopedId$9, () => {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" })] });
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.hideTitle ? null : jsxRuntime.jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: () => insert('table'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('image'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('video'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('katex'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('step'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsxRuntime.jsx(MenuItem, { onClick: () => insert('timeline'), icon: jsxRuntime.jsx("span", { class: "xnote-icon-timeline" }), children: "\u65F6\u95F4\u8F74" })] });
     });
 }
 
@@ -4704,7 +4794,7 @@ function AtComponentView(props) {
             return (jsxRuntime.jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), userInfo.name] }));
         }
         if (readonly() || output()) {
-            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
+            return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: "xnote-at-input", tag: "span" })] }));
         }
         const members = props.component.members();
         return (jsxRuntime.jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsxRuntime.jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4720,7 +4810,7 @@ function AtComponentView(props) {
                                 selection.selectComponentEnd(props.component);
                             }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
                                         jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
-                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
+                    }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: "span", class: "xnote-at-input" })] }) }));
     };
 }
 const atComponentLoader = {
@@ -5061,17 +5151,15 @@ function Scroll(props) {
                 draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
             });
         }
-        setTimeout(update);
+        update();
         const s = core$1.fromEvent(el, 'scroll').subscribe(update);
         return () => s.unsubscribe();
     });
     core.onUpdated(() => {
         const el = scrollRef.current;
-        setTimeout(() => {
-            updateShowShadow(draft => {
-                draft.leftEnd = el.scrollLeft === 0;
-                draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
-            });
+        updateShowShadow(draft => {
+            draft.leftEnd = el.scrollLeft === 0;
+            draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
         });
     });
     return scopedCss.withScopedCSS(scopedId$3, () => {
@@ -5621,6 +5709,112 @@ function finedPosition(component, slot) {
     return null;
 }
 
+function TimelineComponentView(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const textbus = core.inject(core$1.Textbus);
+    const isOutput = useOutput();
+    const isReadonly = useReadonly();
+    return () => {
+        const component = props.component;
+        return (jsxRuntime.jsx("div", { class: "xnote-timeline", ref: props.rootRef, "data-component": TimelineComponent.componentName, children: component.state.items.map(item => {
+                return (jsxRuntime.jsxs("div", { class: "xnote-timeline-item", children: [jsxRuntime.jsx("div", { class: "xnote-timeline-line", style: {
+                                borderColor: item.theme,
+                            } }), jsxRuntime.jsx("div", { class: "xnote-timeline-icon", style: {
+                                borderColor: item.theme,
+                                backgroundColor: item.theme,
+                            } }), !isOutput() && !isReadonly() && jsxRuntime.jsxs("div", { class: "xnote-timeline-tools", children: [jsxRuntime.jsx(Button, { class: "xnote-timeline-add xnote-icon-plus", onClick: () => {
+                                        const index = component.state.items.indexOf(item) + 1;
+                                        component.state.items.splice(index, 0, createTimelineItem(textbus, item.theme));
+                                    } }), jsxRuntime.jsx(Button, { class: "xnote-timeline-add xnote-icon-bin", onClick: () => {
+                                        const index = component.state.items.indexOf(item);
+                                        component.state.items.splice(index, 1);
+                                    } })] }), adapter.slotRender(item.slot, children => {
+                            return core$1.createVNode('div', {
+                                class: 'xnote-timeline-item-content',
+                            }, children);
+                        }, isOutput() || isReadonly())] }, item.slot.id));
+            }) }));
+    };
+}
+const timelineComponentLoader = {
+    match(element) {
+        return element.className === 'xnote-timeline';
+    },
+    read(element, context, slotParser) {
+        return new TimelineComponent(context, {
+            items: Array.from(element.children).map(child => {
+                const slot = new core$1.Slot([
+                    core$1.ContentType.BlockComponent
+                ]);
+                return {
+                    theme: '',
+                    slot: slotParser(slot, child.querySelector('div.xnote-timeline-content') || document.createElement('div'))
+                };
+            })
+        });
+    }
+};
+
+function StepComponentView(props) {
+    const adapter = core.inject(platformBrowser.DomAdapter);
+    const textbus = core.inject(core$1.Textbus);
+    const isOutput = useOutput();
+    const isReadonly = useReadonly();
+    return () => {
+        const component = props.component;
+        const currentStep = component.state.step;
+        return (jsxRuntime.jsx("div", { class: "xnote-step", "data-step": currentStep, ref: props.rootRef, "data-component": StepComponent.componentName, children: component.state.items.map((item, index) => {
+                let state = 'xnote-waiting';
+                if (index < currentStep) {
+                    state = 'xnote-complete';
+                }
+                else if (index === currentStep) {
+                    state = 'xnote-current';
+                }
+                return (jsxRuntime.jsxs("div", { class: 'xnote-step-item ' + state, children: [jsxRuntime.jsxs("div", { class: "xnote-step-item-header", children: [jsxRuntime.jsx("div", { class: "xnote-step-item-line" }), jsxRuntime.jsx("div", { class: "xnote-step-item-icon", onClick: () => {
+                                        if (index === currentStep) {
+                                            component.state.step = index + 1;
+                                        }
+                                        else if (index + 1 === currentStep) {
+                                            component.state.step = index - 1;
+                                        }
+                                        else {
+                                            component.state.step = index;
+                                        }
+                                    }, children: index + 1 })] }), !isOutput() && !isReadonly() && jsxRuntime.jsxs("div", { class: "xnote-step-tools", children: [jsxRuntime.jsx(Button, { class: "xnote-step-add xnote-icon-plus", onClick: () => {
+                                        const index = component.state.items.indexOf(item) + 1;
+                                        component.state.items.splice(index, 0, createStepItem(textbus));
+                                    } }), jsxRuntime.jsx(Button, { class: "xnote-step-add xnote-icon-bin", onClick: () => {
+                                        const index = component.state.items.indexOf(item);
+                                        component.state.items.splice(index, 1);
+                                    } })] }), adapter.slotRender(item.slot, children => {
+                            return core$1.createVNode('div', {
+                                class: 'xnote-step-item-content'
+                            }, children);
+                        }, isOutput() || isReadonly())] }, item.slot.id));
+            }) }));
+    };
+}
+const stepComponentLoader = {
+    match(element) {
+        return element.dataset.component === StepComponent.componentName;
+    },
+    read(element, context, slotParser) {
+        return new StepComponent(context, {
+            step: Number(element.dataset.step) || 0,
+            items: Array.from(element.children).map(child => {
+                const slot = new core$1.Slot([
+                    core$1.ContentType.BlockComponent
+                ]);
+                return {
+                    slot: slotParser(slot, child.querySelector('.xnote-step-item-content') ||
+                        document.createElement('div'))
+                };
+            })
+        });
+    }
+};
+
 class Editor extends core$1.Textbus {
     constructor(editorConfig = {}) {
         const adapter = new adapterViewfly.ViewflyAdapter({
@@ -5636,6 +5830,8 @@ class Editor extends core$1.Textbus {
             [VideoComponent.componentName]: VideoView,
             [AtComponent.componentName]: AtComponentView,
             [KatexComponent.componentName]: KatexComponentView,
+            [StepComponent.componentName]: StepComponentView,
+            [TimelineComponent.componentName]: TimelineComponentView,
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -5662,6 +5858,8 @@ class Editor extends core$1.Textbus {
                 todolistComponentLoader,
                 katexComponentLoader,
                 paragraphComponentLoader,
+                stepComponentLoader,
+                timelineComponentLoader
             ], formatLoaders: [
                 backgroundColorFormatLoader,
                 boldFormatLoader,
@@ -5698,7 +5896,9 @@ class Editor extends core$1.Textbus {
             [ImageComponent.componentName]: ImageView,
             [VideoComponent.componentName]: VideoView,
             [AtComponent.componentName]: AtComponentView,
-            [KatexComponent.componentName]: KatexComponentView
+            [KatexComponent.componentName]: KatexComponentView,
+            [StepComponent.componentName]: StepComponentView,
+            [TimelineComponent.componentName]: TimelineComponentView,
         }, (host, root, injector) => {
             const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -5729,7 +5929,9 @@ class Editor extends core$1.Textbus {
                 ListComponent,
                 VideoComponent,
                 AtComponent,
-                KatexComponent
+                KatexComponent,
+                StepComponent,
+                TimelineComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
@@ -5748,7 +5950,19 @@ class Editor extends core$1.Textbus {
             ], plugins: [
                 new LeftToolbarPlugin(),
                 new ToolbarPlugin(),
-            ], onAfterStartup(textbus) {
+            ], setup(textbus) {
+                if (editorConfig.collaborateConfig) {
+                    const activity = textbus.get(collaborate.UserActivity);
+                    const collabCursor = textbus.get(platformBrowser.CollaborateCursor);
+                    const sub = activity.onStateChange.subscribe(ev => {
+                        collabCursor.draw(ev);
+                    });
+                    return () => {
+                        sub.unsubscribe();
+                    };
+                }
+            },
+            onAfterStartup(textbus) {
                 registerBoldShortcut(textbus);
                 registerCodeShortcut(textbus);
                 registerItalicShortcut(textbus);

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

@@ -0,0 +1,6 @@
+import { ViewComponentProps } from '@textbus/adapter-viewfly';
+import { ComponentLoader } from '@textbus/platform-browser';
+import { StepComponent } from './step.component';
+import './step.component.scss';
+export declare function StepComponentView(props: ViewComponentProps<StepComponent>): () => any;
+export declare const stepComponentLoader: ComponentLoader;

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

@@ -0,0 +1,15 @@
+import { Component, ComponentStateLiteral, ContentType, Slot, Textbus } from '@textbus/core';
+export interface StepComponentItem {
+    slot: Slot;
+}
+export interface StepComponentState {
+    step: number;
+    items: StepComponentItem[];
+}
+export declare function createStepItem(textbus: Textbus): StepComponentItem;
+export declare class StepComponent extends Component<StepComponentState> {
+    static componentName: string;
+    static type: ContentType;
+    static fromJSON(textbus: Textbus, json: ComponentStateLiteral<StepComponentState>): StepComponent;
+    getSlots(): Slot[];
+}

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

@@ -0,0 +1,6 @@
+import { ViewComponentProps } from '@textbus/adapter-viewfly';
+import { ComponentLoader } from '@textbus/platform-browser';
+import { TimelineComponent } from './timeline.component';
+import './timeline.component.scss';
+export declare function TimelineComponentView(props: ViewComponentProps<TimelineComponent>): () => any;
+export declare const timelineComponentLoader: ComponentLoader;

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

@@ -0,0 +1,15 @@
+import { Component, ComponentStateLiteral, ContentType, Slot, Textbus } from '@textbus/core';
+export interface TimelineComponentItem {
+    theme: string;
+    slot: Slot;
+}
+export interface TimelineComponentState {
+    items: TimelineComponentItem[];
+}
+export declare function createTimelineItem(textbus: Textbus, theme: string): TimelineComponentItem;
+export declare class TimelineComponent extends Component<TimelineComponentState> {
+    static componentName: string;
+    static type: ContentType;
+    static fromJSON(textbus: Textbus, json: ComponentStateLiteral<TimelineComponentState>): TimelineComponent;
+    getSlots(): Slot[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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.0.0",
-    "@textbus/collaborate": "^4.0.0",
-    "@textbus/core": "^4.0.0",
-    "@textbus/platform-browser": "^4.0.0",
+    "@textbus/adapter-viewfly": "^4.0.2",
+    "@textbus/collaborate": "^4.0.2",
+    "@textbus/core": "^4.0.1",
+    "@textbus/platform-browser": "^4.0.2",
     "@viewfly/core": "^1.0.0-alpha.22",
     "@viewfly/hooks": "^1.0.0-alpha.22",
     "@viewfly/platform-browser": "^1.0.0-alpha.22",