@textbus/xnote 0.0.3 → 0.0.5

package/bundles/index.esm.js

@@ -177,7 +177,7 @@ function Divider() {
     });
 }
 
-var scopedId$k = "vf-8abf2c";
+var scopedId$k = "vf-d91ad6";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -459,17 +459,18 @@ const Dropdown = withAnnotation({
             }
         },
         $render: withScopedCSS(scopedId$j, () => {
-            return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && 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 (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 (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() &&
+                        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 (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 })] }));
         })
     };
 });
@@ -899,14 +900,14 @@ function HighlightBoxView(props) {
     return () => {
         const { state, name } = props.component;
         if (readonly() || output()) {
-            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+            return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsx(SlotRender, { slot: state.slot, class: "xnote-highlight-box-content", renderEnv: readonly() || output() })] }));
         }
         return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
                                     return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
                                 }), jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
                                     const icon = String.fromCodePoint(i);
                                     return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
-                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
+                                })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsx(SlotRender, { slot: state.slot, class: "xnote-highlight-box-content", renderEnv: readonly() || output() })] }));
     };
 }
 const highlightBoxComponentLoader = {
@@ -2187,7 +2188,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: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
+            }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsx(SlotRender, { slot: slot, tag: "div", class: "xnote-todolist-content", renderEnv: readonly() || output() })] }));
     };
 }
 const todolistComponentLoader = {
@@ -2463,7 +2464,7 @@ function ListComponentView(props) {
                 }, children: [jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
                             jsx("span", { class: "xnote-order-btn", children: icon })
                             :
-                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
+                                jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsx(SlotRender, { slot: component.state.slot, class: "xnote-list-content", renderEnv: readonly() || output() })] }) }));
     };
 }
 const listComponentLoader = {
@@ -3500,16 +3501,13 @@ function LinkTool(props) {
     const editorService = inject(EditorService);
     const container = inject(VIEW_CONTAINER);
     const isShow = createSignal(false);
-    const inputRef = createRef();
+    const value = 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;
@@ -3538,7 +3536,9 @@ function LinkTool(props) {
                     }, children: jsx("span", { class: "xnote-icon-link" }) }), isShow() &&
                     jsx(Popup, { left: rect.left - containerRect.left, top: rect.top + rect.height - containerRect.top, children: jsxs("form", { onSubmit: setLink, onClick: () => {
                                 isClickFromSelf = true;
-                            }, class: "input-group", children: [jsx("input", { ref: inputRef, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
+                            }, class: "input-group", children: [jsx("input", { onChange: ev => {
+                                        value.set(ev.target.value);
+                                    }, placeholder: "\u8BF7\u8F93\u5165\u94FE\u63A5\u5730\u5740", type: "text" }), jsx(Button, { type: "submit", children: "\u786E\u5B9A" })] }) })] }));
     });
 }
 
@@ -3838,6 +3838,78 @@ 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);
@@ -3977,10 +4049,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 withScopedCSS(scopedId$9, () => {
-        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsx(MenuItem, { onClick: () => insert('katex'), icon: jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" })] });
+        return jsxs(Fragment, { children: [props.hideTitle ? null : jsx(MenuHeading, { children: props.replace ? '替换为' : '在下面添加' }), jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-hightlight-box" }), children: "\u9AD8\u4EAE\u5757" }), jsx(MenuItem, { onClick: () => insert('katex'), icon: jsx("span", { class: "xnote-icon-function" }), children: "\u6570\u5B66\u516C\u5F0F" }), jsx(MenuItem, { onClick: () => insert('step'), icon: jsx("span", { class: "xnote-icon-step" }), children: "\u6B65\u9AA4\u6761" }), jsx(MenuItem, { onClick: () => insert('timeline'), icon: jsx("span", { class: "xnote-icon-timeline" }), children: "\u65F6\u95F4\u8F74" })] });
     });
 }
 
@@ -4702,7 +4792,7 @@ function AtComponentView(props) {
             return (jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), userInfo.name] }));
         }
         if (readonly() || output()) {
-            return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
+            return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, class: "xnote-at-input", tag: "span" })] }));
         }
         const members = props.component.members();
         return (jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4718,7 +4808,7 @@ function AtComponentView(props) {
                                 selection.selectComponentEnd(props.component);
                             }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsx("img", { src: member.avatar, alt: member.name }) :
                                         jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color }, children: member.name }) }), jsxs("div", { class: "xnote-at-member-info", children: [jsx("div", { class: "xnote-at-member-name", children: member.name }), jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
-                    }) }), children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
+                    }) }), children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, tag: "span", class: "xnote-at-input" })] }) }));
     };
 }
 const atComponentLoader = {
@@ -5059,17 +5149,15 @@ function Scroll(props) {
                 draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
             });
         }
-        setTimeout(update);
+        update();
         const s = fromEvent(el, 'scroll').subscribe(update);
         return () => s.unsubscribe();
     });
     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 withScopedCSS(scopedId$3, () => {
@@ -5619,6 +5707,112 @@ function finedPosition(component, slot) {
     return null;
 }
 
+function TimelineComponentView(props) {
+    const adapter = inject(DomAdapter);
+    const textbus = inject(Textbus);
+    const isOutput = useOutput();
+    const isReadonly = useReadonly();
+    return () => {
+        const component = props.component;
+        return (jsx("div", { class: "xnote-timeline", ref: props.rootRef, "data-component": TimelineComponent.componentName, children: component.state.items.map(item => {
+                return (jsxs("div", { class: "xnote-timeline-item", children: [jsx("div", { class: "xnote-timeline-line", style: {
+                                borderColor: item.theme,
+                            } }), jsx("div", { class: "xnote-timeline-icon", style: {
+                                borderColor: item.theme,
+                                backgroundColor: item.theme,
+                            } }), !isOutput() && !isReadonly() && jsxs("div", { class: "xnote-timeline-tools", children: [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));
+                                    } }), 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 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 Slot([
+                    ContentType.BlockComponent
+                ]);
+                return {
+                    theme: '',
+                    slot: slotParser(slot, child.querySelector('div.xnote-timeline-content') || document.createElement('div'))
+                };
+            })
+        });
+    }
+};
+
+function StepComponentView(props) {
+    const adapter = inject(DomAdapter);
+    const textbus = inject(Textbus);
+    const isOutput = useOutput();
+    const isReadonly = useReadonly();
+    return () => {
+        const component = props.component;
+        const currentStep = component.state.step;
+        return (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 (jsxs("div", { class: 'xnote-step-item ' + state, children: [jsxs("div", { class: "xnote-step-item-header", children: [jsx("div", { class: "xnote-step-item-line" }), 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() && jsxs("div", { class: "xnote-step-tools", children: [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));
+                                    } }), 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 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 Slot([
+                    ContentType.BlockComponent
+                ]);
+                return {
+                    slot: slotParser(slot, child.querySelector('.xnote-step-item-content') ||
+                        document.createElement('div'))
+                };
+            })
+        });
+    }
+};
+
 class Editor extends Textbus {
     constructor(editorConfig = {}) {
         const adapter = new ViewflyAdapter({
@@ -5634,6 +5828,8 @@ class Editor extends Textbus {
             [VideoComponent.componentName]: VideoView,
             [AtComponent.componentName]: AtComponentView,
             [KatexComponent.componentName]: KatexComponentView,
+            [StepComponent.componentName]: StepComponentView,
+            [TimelineComponent.componentName]: TimelineComponentView,
         }, (host, root, injector) => {
             const appInjector = new ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -5660,6 +5856,8 @@ class Editor extends Textbus {
                 todolistComponentLoader,
                 katexComponentLoader,
                 paragraphComponentLoader,
+                stepComponentLoader,
+                timelineComponentLoader
             ], formatLoaders: [
                 backgroundColorFormatLoader,
                 boldFormatLoader,
@@ -5696,7 +5894,9 @@ class Editor extends 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 ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
@@ -5727,7 +5927,9 @@ class Editor extends Textbus {
                 ListComponent,
                 VideoComponent,
                 AtComponent,
-                KatexComponent
+                KatexComponent,
+                StepComponent,
+                TimelineComponent
             ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,