@textbus/xnote 0.0.1-alpha.3 → 0.0.1-alpha.5

package/bundles/index.js

@@ -11,7 +11,7 @@ var highlightjs = require('highlight.js');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-var exportedId$k = "vf-69b4db";
+var css$j = undefined;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -58,18 +58,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 exports.DropdownService = class DropdownService {
     constructor() {
-        Object.defineProperty(this, "onSiblingOpen", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "siblingOpenEvent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
+        this.siblingOpenEvent = new core$1.Subject();
         this.onSiblingOpen = this.siblingOpenEvent.asObservable();
     }
     notify(id) {
@@ -87,60 +76,14 @@ var DropdownContextService_1;
 let i = 0;
 exports.DropdownContextService = DropdownContextService_1 = class DropdownContextService {
     constructor(dropdownService, injector) {
-        Object.defineProperty(this, "dropdownService", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: dropdownService
-        });
-        Object.defineProperty(this, "injector", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: injector
-        });
-        Object.defineProperty(this, "id", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: i
-        });
-        Object.defineProperty(this, "isOpen", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "onOpenStateChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "canHide", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "openStateChangeEvent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "timer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "parentDropdownContextService", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: this.injector.get(DropdownContextService_1, core.InjectFlags.SkipSelf, null)
-        });
+        this.dropdownService = dropdownService;
+        this.injector = injector;
+        this.id = i;
+        this.isOpen = false;
+        this.canHide = true;
+        this.openStateChangeEvent = new core$1.Subject();
+        this.timer = null;
+        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, core.InjectFlags.SkipSelf, null);
         this.onOpenStateChange = this.openStateChangeEvent.asObservable();
         dropdownService.onSiblingOpen.subscribe(id => {
             if (id === this.id) {
@@ -199,7 +142,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(exportedId$k, () => {
+    return scopedCss.withScopedCSS(css$j, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -211,10 +154,10 @@ function Button(props) {
     });
 }
 
-var exportedId$j = "vf-ac7e8d";
+var css$i = undefined;
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(exportedId$j, () => {
+    return scopedCss.withScopedCSS(css$i, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -224,15 +167,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var exportedId$i = "vf-ede279";
+var css$h = undefined;
 
 function Divider() {
-    return scopedCss.withScopedCSS(exportedId$i, () => {
+    return scopedCss.withScopedCSS(css$h, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var exportedId$h = "vf-4c1803";
+var style = undefined;
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -340,16 +283,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(exportedId$h, () => {
+    return scopedCss.withScopedCSS(style, () => {
         return (jsxRuntime.jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsxRuntime.jsx("div", { class: "container", ref: ref, children: props.children }), jsxRuntime.jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxRuntime.jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxRuntime.jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" }), jsxRuntime.jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var exportedId$g = "vf-a99c5e";
+var css$g = undefined;
 
-var exportedId$f = "vf-4f8cfb";
+var css$f = undefined;
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -432,7 +375,7 @@ const DropdownMenuPortal = core.withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(exportedId$f, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(css$f, () => {
         return (jsxRuntime.jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsxRuntime.jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -456,6 +399,8 @@ const Dropdown = core.withAnnotation({
     const dropdownRef = core.createRef();
     core.onMounted(() => {
         const sub = dropdownContextService.onOpenStateChange.subscribe(b => {
+            var _a;
+            (_a = props.onExpendStateChange) === null || _a === void 0 ? void 0 : _a.call(props, b);
             isShow.set(b);
         });
         return () => sub.unsubscribe();
@@ -493,7 +438,7 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.open();
             }
         },
-        $render: scopedCss.withScopedCSS(exportedId$g, () => {
+        $render: scopedCss.withScopedCSS(css$g, () => {
             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, { 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: () => {
@@ -509,7 +454,7 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var exportedId$e = "vf-64f71d";
+var css$e = undefined;
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
@@ -529,7 +474,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(exportedId$e, () => {
+    return scopedCss.withScopedCSS(css$e, () => {
         return (jsxRuntime.jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxRuntime.jsxs("div", { children: [props.icon && jsxRuntime.jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
                     jsxRuntime.jsx("div", { class: "arrow", children: jsxRuntime.jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsxRuntime.jsx("div", { class: [
@@ -539,11 +484,11 @@ function MenuItem(props) {
     });
 }
 
-var exportedId$d = "vf-a23c47";
+var css$d = undefined;
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(exportedId$d, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(css$d, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -551,24 +496,19 @@ function Popup(props) {
     }), host);
 }
 
-var exportedId$c = "vf-216815";
+var css$c = undefined;
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(exportedId$c, () => {
+    return scopedCss.withScopedCSS(css$c, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var exportedId$b = "vf-2a8a65";
+var css$b = undefined;
 
 exports.RefreshService = class RefreshService {
     constructor() {
-        Object.defineProperty(this, "onRefresh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
+        this.onRefresh = new core$1.Subject();
     }
 };
 exports.RefreshService = __decorate([
@@ -650,18 +590,8 @@ class ParagraphComponent extends core$1.Component {
         });
     }
 }
-Object.defineProperty(ParagraphComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'ParagraphComponent'
-});
-Object.defineProperty(ParagraphComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
+ParagraphComponent.componentName = 'ParagraphComponent';
+ParagraphComponent.type = core$1.ContentType.BlockComponent;
 function ParagraphView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
@@ -674,14 +604,14 @@ function ParagraphView(props) {
 }
 const paragraphComponentLoader = {
     match(element) {
-        return element.dataset.compoment === ParagraphComponent.name || element.tagName === 'P';
+        return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
     },
     read(element, textbus, slotParser) {
         const delta = slotParser(new core$1.Slot([
             core$1.ContentType.Text,
             core$1.ContentType.InlineComponent,
             core$1.ContentType.BlockComponent
-        ]), element.tagName === 'P' ? element : element.children[0]).toDelta();
+        ]), /P|H[1-6]/.test(element.tagName) ? element : element.children[0]).toDelta();
         const results = deltaToBlock(delta, textbus);
         if (results.length === 1) {
             return results[0];
@@ -823,42 +753,27 @@ function createCodeSlot() {
 class SourceCodeComponent extends core$1.Component {
     constructor() {
         super(...arguments);
-        Object.defineProperty(this, "focus", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.BehaviorSubject(false)
-        });
-        Object.defineProperty(this, "cancelEmphasize", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const selection = this.textbus.get(core$1.Selection);
-                const slots = this.state.slots;
-                const { startSlot, endSlot } = selection;
-                let startIndex = slots.findIndex(i => i.slot === startSlot);
-                const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
-                for (; startIndex < endIndex; startIndex++) {
-                    slots[startIndex].emphasize = false;
-                }
+        this.focus = new core$1.BehaviorSubject(false);
+        this.cancelEmphasize = () => {
+            const selection = this.textbus.get(core$1.Selection);
+            const slots = this.state.slots;
+            const { startSlot, endSlot } = selection;
+            let startIndex = slots.findIndex(i => i.slot === startSlot);
+            const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
+            for (; startIndex < endIndex; startIndex++) {
+                slots[startIndex].emphasize = false;
             }
-        });
-        Object.defineProperty(this, "emphasize", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                const selection = this.textbus.get(core$1.Selection);
-                const slots = this.state.slots;
-                const { startSlot, endSlot } = selection;
-                let startIndex = slots.findIndex(i => i.slot === startSlot);
-                const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
-                for (; startIndex < endIndex; startIndex++) {
-                    slots[startIndex].emphasize = true;
-                }
+        };
+        this.emphasize = () => {
+            const selection = this.textbus.get(core$1.Selection);
+            const slots = this.state.slots;
+            const { startSlot, endSlot } = selection;
+            let startIndex = slots.findIndex(i => i.slot === startSlot);
+            const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
+            for (; startIndex < endIndex; startIndex++) {
+                slots[startIndex].emphasize = true;
             }
-        });
+        };
     }
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
@@ -1029,68 +944,62 @@ class SourceCodeComponent extends core$1.Component {
             }
         });
     }
+    removeSlot(slot) {
+        const slots = this.state.slots;
+        const index = slots.findIndex(i => i.slot === slot);
+        if (index > -1) {
+            slots.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
 }
-Object.defineProperty(SourceCodeComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
-Object.defineProperty(SourceCodeComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'SourceCodeComponent'
-});
-Object.defineProperty(SourceCodeComponent, "zenCoding", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        key: 'Enter',
-        match(c) {
-            const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
-            const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
-            return reg.test(c);
-        },
-        createState(content) {
-            const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
-            for (const item of languageList) {
-                const reg = new RegExp(`^${matchString}$`, 'i');
-                if (reg.test(item.label || item.value)) {
-                    return {
-                        lang: item.value,
-                        theme: '',
-                        lineNumber: true,
-                        slots: [createCodeSlot()]
-                    };
-                }
-            }
-            if (/^js$/i.test(matchString)) {
-                return {
-                    lang: 'JavaScript',
-                    theme: '',
-                    lineNumber: true,
-                    slots: [createCodeSlot()]
-                };
-            }
-            if (/^ts$/i.test(matchString)) {
+SourceCodeComponent.type = core$1.ContentType.BlockComponent;
+SourceCodeComponent.componentName = 'SourceCodeComponent';
+SourceCodeComponent.zenCoding = {
+    key: 'Enter',
+    match(c) {
+        const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
+        const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
+        return reg.test(c);
+    },
+    createState(content) {
+        const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
+        for (const item of languageList) {
+            const reg = new RegExp(`^${matchString}$`, 'i');
+            if (reg.test(item.label || item.value)) {
                 return {
-                    lang: 'TypeScript',
+                    lang: item.value,
                     theme: '',
                     lineNumber: true,
                     slots: [createCodeSlot()]
                 };
             }
+        }
+        if (/^js$/i.test(matchString)) {
+            return {
+                lang: 'JavaScript',
+                theme: '',
+                lineNumber: true,
+                slots: [createCodeSlot()]
+            };
+        }
+        if (/^ts$/i.test(matchString)) {
             return {
-                lang: '',
+                lang: 'TypeScript',
                 theme: '',
                 lineNumber: true,
                 slots: [createCodeSlot()]
             };
         }
+        return {
+            lang: '',
+            theme: '',
+            lineNumber: true,
+            slots: [createCodeSlot()]
+        };
     }
-});
+};
 function SourceCodeView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const isFocus = core.createSignal(false);
@@ -1178,11 +1087,11 @@ function SourceCodeView(props) {
                 return textNode;
             });
         }
-        return (jsxRuntime.jsxs("pre", { ref: props.rootRef, class: {
+        return (jsxRuntime.jsxs("div", { ref: props.rootRef, class: {
                 'xnote-source-code': true,
                 'xnote-source-code-line-number': state.lineNumber,
                 [state.theme || 'github']: true
-            }, lang: state.lang, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [!readonly() || !output() && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
+            }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [(!readonly() && !output()) && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
                                     return {
                                         label: jsxRuntime.jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
                                         value: item.value
@@ -1229,10 +1138,10 @@ function SourceCodeView(props) {
                                             children.push(br);
                                         }
                                     }
-                                    return core$1.createVNode('div', {
+                                    return core$1.createVNode('pre', {
                                         class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
                                     }, [
-                                        core$1.createVNode('div', { class: 'xnote-source-code-line-content' }, children)
+                                        core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
                                     ]);
                                 }, readonly());
                             }) }), jsxRuntime.jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
@@ -1240,12 +1149,13 @@ function SourceCodeView(props) {
 }
 const sourceCodeComponentLoader = {
     match(element) {
-        return element.tagName === 'PRE';
+        return element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName ||
+            element.tagName === 'PRE';
     },
     read(el, textbus) {
-        const lines = el.querySelectorAll('.xnote-source-code-line');
         let slots = [];
-        if (lines.length) {
+        if (el.tagName === 'DIV') {
+            const lines = el.querySelectorAll('.xnote-source-code-line');
             slots = Array.from(lines).map(i => {
                 const code = i.innerText.replace(/[\s\n]+$/, '');
                 const item = createCodeSlot();
@@ -1266,9 +1176,10 @@ const sourceCodeComponentLoader = {
             });
         }
         return new SourceCodeComponent(textbus, {
-            lang: el.getAttribute('lang') || '',
-            theme: el.getAttribute('theme') || '',
-            lineNumber: !el.classList.contains('xnote-source-code-hide-line-number'),
+            lang: el.dataset.lang || '',
+            theme: el.dataset.theme || '',
+            lineNumber: !!el.dataset.lineNumber || true,
+            autoBreak: !!el.dataset.autoBreak || true,
             slots
         });
     },
@@ -1422,7 +1333,7 @@ function AttrTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(exportedId$b, () => {
+    return scopedCss.withScopedCSS(css$b, () => {
         const states = checkStates();
         return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
@@ -1561,24 +1472,9 @@ class TableComponent extends core$1.Component {
         })
     }) {
         super(textbus, state);
-        Object.defineProperty(this, "selection", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: this.textbus.get(core$1.Selection)
-        });
-        Object.defineProperty(this, "focus", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "tableSelection", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: core.createSignal(null)
-        });
+        this.selection = this.textbus.get(core$1.Selection);
+        this.focus = new core$1.Subject();
+        this.tableSelection = core.createSignal(null);
     }
     setup() {
         core$1.onFocusIn(() => {
@@ -1703,18 +1599,8 @@ class TableComponent extends core$1.Component {
         });
     }
 }
-Object.defineProperty(TableComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'TableComponent'
-});
-Object.defineProperty(TableComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
+TableComponent.componentName = 'TableComponent';
+TableComponent.type = core$1.ContentType.BlockComponent;
 
 const strikeThroughFormatter = new core$1.Formatter('strike', {
     columned: true,
@@ -1819,37 +1705,22 @@ class TodolistComponent extends core$1.Component {
         });
     }
 }
-Object.defineProperty(TodolistComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
-Object.defineProperty(TodolistComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'TodoListComponent'
-});
-Object.defineProperty(TodolistComponent, "zenCoding", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        match: /^\[(x|\s)?\]$/,
-        key: ' ',
-        createState(content) {
-            const isChecked = content.charAt(1) === 'x';
-            return {
-                checked: isChecked,
-                slot: new core$1.Slot([
-                    core$1.ContentType.InlineComponent,
-                    core$1.ContentType.Text
-                ])
-            };
-        }
+TodolistComponent.type = core$1.ContentType.BlockComponent;
+TodolistComponent.componentName = 'TodoListComponent';
+TodolistComponent.zenCoding = {
+    match: /^\[(x|\s)?\]$/,
+    key: ' ',
+    createState(content) {
+        const isChecked = content.charAt(1) === 'x';
+        return {
+            checked: isChecked,
+            slot: new core$1.Slot([
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.Text
+            ])
+        };
     }
-});
+};
 function TodolistView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const component = props.component;
@@ -1923,36 +1794,21 @@ class BlockquoteComponent extends core$1.Component {
         useBlockContent(this.state.slot);
     }
 }
-Object.defineProperty(BlockquoteComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
-Object.defineProperty(BlockquoteComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'BlockquoteComponent'
-});
-Object.defineProperty(BlockquoteComponent, "zenCoding", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        key: ' ',
-        match: /^>$/,
-        createState() {
-            return {
-                slot: new core$1.Slot([
-                    core$1.ContentType.Text,
-                    core$1.ContentType.InlineComponent,
-                    core$1.ContentType.BlockComponent
-                ])
-            };
-        }
+BlockquoteComponent.type = core$1.ContentType.BlockComponent;
+BlockquoteComponent.componentName = 'BlockquoteComponent';
+BlockquoteComponent.zenCoding = {
+    key: ' ',
+    match: /^>$/,
+    createState() {
+        return {
+            slot: new core$1.Slot([
+                core$1.ContentType.Text,
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.BlockComponent
+            ])
+        };
     }
-});
+};
 function BlockquoteView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
@@ -2069,37 +1925,22 @@ class ListComponent extends core$1.Component {
         });
     }
 }
-Object.defineProperty(ListComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'ListComponent'
-});
-Object.defineProperty(ListComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
-Object.defineProperty(ListComponent, "zenCoding", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        key: ' ',
-        match: /^([1-9]\.|[+*])$/,
-        createState(content) {
-            return {
-                type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
-                reorder: true,
-                slot: new core$1.Slot([
-                    core$1.ContentType.InlineComponent,
-                    core$1.ContentType.Text
-                ])
-            };
-        }
+ListComponent.componentName = 'ListComponent';
+ListComponent.type = core$1.ContentType.BlockComponent;
+ListComponent.zenCoding = {
+    key: ' ',
+    match: /^([1-9]\.|[+*])$/,
+    createState(content) {
+        return {
+            type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
+            reorder: true,
+            slot: new core$1.Slot([
+                core$1.ContentType.InlineComponent,
+                core$1.ContentType.Text
+            ])
+        };
     }
-});
+};
 const step = 26;
 const chars = Array.from({ length: step }).map((_, index) => String.fromCharCode(96 + index + 1));
 function numberToLetter(num) {
@@ -2189,7 +2030,7 @@ function ListComponentView(props) {
             }, children: jsxRuntime.jsxs("li", { style: {
                     justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
                     textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
-                }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: component.state.type === 'UnorderedList' || readonly() || output() ?
+                }, 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 }) }) }), adapter.slotRender(component.state.slot, children => {
@@ -2312,24 +2153,9 @@ class HighlightBoxComponent extends core$1.Component {
         useBlockContent(this.state.slot);
     }
 }
-Object.defineProperty(HighlightBoxComponent, "defaultTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗']
-});
-Object.defineProperty(HighlightBoxComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'HighlightBoxComponent'
-});
-Object.defineProperty(HighlightBoxComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
+HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
+HighlightBoxComponent.componentName = 'HighlightBoxComponent';
+HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
 function HighlightBoxView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const readonly = useReadonly();
@@ -2601,7 +2427,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return scopedCss.withScopedCSS(exportedId$b, () => {
+    return scopedCss.withScopedCSS(css$b, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -3032,7 +2858,7 @@ function CodeTool() {
     };
 }
 
-var exportedId$a = "vf-1fbbdf";
+var css$a = undefined;
 
 function ColorTool(props) {
     const query = core.inject(core$1.Query);
@@ -3080,7 +2906,7 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return scopedCss.withScopedCSS(exportedId$a, () => {
+    return scopedCss.withScopedCSS(css$a, () => {
         const vm = viewModel();
         return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxRuntime.jsxs("div", { class: "text-colors", children: [jsxRuntime.jsx("div", { class: {
                                     active: textColor() === ''
@@ -3288,7 +3114,7 @@ function ItalicTool() {
     };
 }
 
-var exportedId$9 = "vf-269a0b";
+var css$9 = undefined;
 
 function LinkTool(props) {
     const selectionBridge = core.inject(platformBrowser.SelectionBridge);
@@ -3319,7 +3145,7 @@ function LinkTool(props) {
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(exportedId$9, () => {
+    return scopedCss.withScopedCSS(css$9, () => {
         const containerRect = container.getBoundingClientRect();
         const rect = isShow() ? selectionBridge.getRect({
             slot: selection.focusSlot,
@@ -3388,7 +3214,7 @@ function UnderlineTool() {
     };
 }
 
-var exportedId$8 = "vf-cf8e1c";
+var css$8 = undefined;
 
 function InsertTool(props) {
     const commander = core.inject(core$1.Commander);
@@ -3400,6 +3226,14 @@ function InsertTool(props) {
         if (!component) {
             return;
         }
+        function insertComponent(comp) {
+            if (props.replace) {
+                commander.replaceComponent(component, comp);
+            }
+            else {
+                commander.insertAfter(comp, component);
+            }
+        }
         switch (type) {
             case 'h1':
             case 'h2':
@@ -3414,12 +3248,12 @@ function InsertTool(props) {
                         core$1.ContentType.Text
                     ]);
                     if (/h[1-6]/.test(type)) {
-                        slot.setAttribute(headingAttr, +type.substring(1));
+                        slot.setAttribute(headingAttr, type);
                     }
                     const p = new ParagraphComponent(textbus, {
                         slot
                     });
-                    commander.insertAfter(p, component);
+                    insertComponent(p);
                     selection.setPosition(slot, 0);
                 }
                 break;
@@ -3435,7 +3269,7 @@ function InsertTool(props) {
                         reorder: true,
                         type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
                     });
-                    commander.insertAfter(list, component);
+                    insertComponent(list);
                     selection.setPosition(slot, 0);
                 }
                 break;
@@ -3452,14 +3286,14 @@ function InsertTool(props) {
                                 emphasize: false
                             }]
                     });
-                    commander.insertAfter(comp, component);
+                    insertComponent(comp);
                     selection.setPosition(slot, 0);
                 }
                 break;
             case 'table':
                 {
                     const table = new TableComponent(textbus);
-                    commander.insertAfter(table, component);
+                    insertComponent(table);
                     selection.setPosition(table.state.rows[0].cells[0].slot, 0);
                 }
                 break;
@@ -3473,7 +3307,7 @@ function InsertTool(props) {
                         slot,
                         checked: false
                     });
-                    commander.insertAfter(comp, component);
+                    insertComponent(comp);
                     selection.setPosition(slot, 0);
                 }
                 break;
@@ -3486,18 +3320,18 @@ function InsertTool(props) {
                     const p = new ParagraphComponent(textbus);
                     const comp = new HighlightBoxComponent(textbus);
                     comp.state.slot.insert(p);
-                    commander.insertAfter(comp, component);
+                    insertComponent(comp);
                     selection.setPosition(p.state.slot, 0);
                 }
                 break;
         }
     }
-    return scopedCss.withScopedCSS(exportedId$8, () => {
+    return scopedCss.withScopedCSS(css$8, () => {
         return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
     });
 }
 
-var exportedId$7 = "vf-b05292";
+var css$7 = undefined;
 
 const LeftToolbar = core.withAnnotation({
     providers: [exports.RefreshService]
@@ -3525,11 +3359,12 @@ const LeftToolbar = core.withAnnotation({
         top: 0,
         display: false
     });
+    let isIgnoreMove = false;
     core.onMounted(() => {
         const rootComponent = rootComponentRef.component;
         const docContentContainer = adapter.getNativeNodeBySlot(rootComponent.state.content);
         const sub = core$1.fromEvent(docContentContainer, 'mousemove').pipe(core$1.filter(() => {
-            return selection.isCollapsed;
+            return !isIgnoreMove;
         }), core$1.map(ev => {
             let currentNode = ev.target;
             while (currentNode) {
@@ -3656,7 +3491,10 @@ const LeftToolbar = core.withAnnotation({
         }
     }
     const isEmptyBlock = core.createSignal(true);
-    return scopedCss.withScopedCSS(exportedId$7, () => {
+    function changeIgnoreMove(b) {
+        isIgnoreMove = b;
+    }
+    return scopedCss.withScopedCSS(css$7, () => {
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
@@ -3688,11 +3526,14 @@ const LeftToolbar = core.withAnnotation({
                     left: position.left + 'px',
                     top: position.top + 'px',
                     display: position.display && selection.isCollapsed ? 'block' : 'none'
-                }, children: jsxRuntime.jsx(Dropdown, { abreast: true, style: {
+                }, children: jsxRuntime.jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
                         position: 'absolute',
                         right: 0,
                         top: 0
-                    }, menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
+                    }, menu: isEmptyBlock() ?
+                        jsxRuntime.jsx(InsertTool, { replace: true, slot: activeSlot() })
+                        :
+                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
                             jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
                             :
                                 jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -3701,12 +3542,7 @@ const LeftToolbar = core.withAnnotation({
 
 class LeftToolbarPlugin {
     constructor() {
-        Object.defineProperty(this, "app", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
+        this.app = null;
     }
     setup(injector) {
         const App = function () {
@@ -3721,7 +3557,7 @@ class LeftToolbarPlugin {
             nativeRenderer: new platformBrowser$1.DomRenderer(),
             autoUpdate: true
         });
-        const viewDocument = injector.get(platformBrowser.VIEW_DOCUMENT);
+        const viewDocument = injector.get(platformBrowser.VIEW_CONTAINER);
         const host = document.createElement('div');
         viewDocument.appendChild(host);
         this.app.mount(host);
@@ -3732,16 +3568,11 @@ class LeftToolbarPlugin {
     }
 }
 
-var exportedId$6 = "vf-fee98b";
+var css$6 = undefined;
 
 exports.EditorService = class EditorService {
     constructor() {
-        Object.defineProperty(this, "hideInlineToolbar", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
+        this.hideInlineToolbar = false;
     }
 };
 exports.EditorService = __decorate([
@@ -3754,7 +3585,7 @@ const Toolbar = core.withAnnotation({
     providers: [exports.RefreshService]
 }, function Toolbar() {
     const selection = core.inject(core$1.Selection);
-    const viewDocument = core.inject(platformBrowser.VIEW_DOCUMENT);
+    const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
     const bridge = core.inject(platformBrowser.SelectionBridge);
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
@@ -3847,7 +3678,7 @@ const Toolbar = core.withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return scopedCss.withScopedCSS(exportedId$6, () => {
+    return scopedCss.withScopedCSS(css$6, () => {
         const p = viewPosition();
         return (jsxRuntime.jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
                 left: p.left + 'px',
@@ -3862,12 +3693,7 @@ const Toolbar = core.withAnnotation({
 
 class ToolbarPlugin {
     constructor() {
-        Object.defineProperty(this, "app", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
+        this.app = null;
     }
     setup(injector) {
         const App = function () {
@@ -3892,30 +3718,10 @@ class ToolbarPlugin {
 
 class Matcher {
     constructor(target, rule) {
-        Object.defineProperty(this, "target", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: target
-        });
-        Object.defineProperty(this, "rule", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: rule
-        });
-        Object.defineProperty(this, "validators", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "excludeValidators", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
+        this.target = target;
+        this.rule = rule;
+        this.validators = [];
+        this.excludeValidators = [];
         if (rule.tags) {
             this.validators.push(this.makeTagsMatcher(rule.tags));
         }
@@ -4012,18 +3818,8 @@ class ImageComponent extends core$1.Component {
         return new ImageComponent(textbus, Object.assign({}, json));
     }
 }
-Object.defineProperty(ImageComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.InlineComponent
-});
-Object.defineProperty(ImageComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'ImageComponent'
-});
+ImageComponent.type = core$1.ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
 function ImageView(props) {
     const { name, state } = props.component;
     const imageRef = core.createRef();
@@ -4057,12 +3853,7 @@ const imageComponentLoader = {
 class RootComponent extends core$1.Component {
     constructor() {
         super(...arguments);
-        Object.defineProperty(this, "onCompositionStart", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
+        this.onCompositionStart = new core$1.Subject();
     }
     static fromJSON(textbus, json) {
         const heading = textbus.get(core$1.Registry).createSlot(json.heading);
@@ -4105,18 +3896,8 @@ class RootComponent extends core$1.Component {
         content.insert(new ParagraphComponent(this.textbus));
     }
 }
-Object.defineProperty(RootComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'RootComponent'
-});
-Object.defineProperty(RootComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.BlockComponent
-});
+RootComponent.componentName = 'RootComponent';
+RootComponent.type = core$1.ContentType.BlockComponent;
 function RootView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const { heading, content } = props.component.state;
@@ -4174,40 +3955,15 @@ const rootComponentLoader = {
     }
 };
 
-var exportedId$5 = "vf-681de2";
+var css$5 = undefined;
 
 let TableService = class TableService {
     constructor() {
-        Object.defineProperty(this, "onInsertRowBefore", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "onInsertColumnBefore", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "onSelectColumns", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "onSelectRows", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
-        Object.defineProperty(this, "onScroll", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new core$1.Subject()
-        });
+        this.onInsertRowBefore = new core$1.Subject();
+        this.onInsertColumnBefore = new core$1.Subject();
+        this.onSelectColumns = new core$1.Subject();
+        this.onSelectRows = new core$1.Subject();
+        this.onScroll = new core$1.Subject();
     }
 };
 TableService = __decorate([
@@ -4286,12 +4042,12 @@ function ResizeColumn(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(exportedId$5, () => {
+    return scopedCss.withScopedCSS(css$5, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, class: ['drag-line'] });
     });
 }
 
-var exportedId$4 = "vf-5bce97";
+var css$4 = undefined;
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4359,7 +4115,7 @@ function TopBar(props) {
         s.unsubscribe();
     });
     const deleteIndex = core.createSignal(null);
-    return scopedCss.withScopedCSS(exportedId$4, () => {
+    return scopedCss.withScopedCSS(css$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxRuntime.jsx("div", { class: ['top-bar', {
@@ -4412,7 +4168,7 @@ function TopBar(props) {
     });
 }
 
-var exportedId$3 = "vf-b1149b";
+var css$3 = undefined;
 
 function Scroll(props) {
     const scrollRef = core.createRef();
@@ -4444,7 +4200,7 @@ function Scroll(props) {
             draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
         });
     });
-    return scopedCss.withScopedCSS(exportedId$3, () => {
+    return scopedCss.withScopedCSS(css$3, () => {
         return jsxRuntime.jsx("div", { ref: [scrollRef, props.scrollRef], class: ['scroll-container', {
                     'left-end': showShadow().leftEnd,
                     'right-end': showShadow().rightEnd,
@@ -4456,7 +4212,7 @@ function Scroll(props) {
     });
 }
 
-var exportedId$2 = "vf-ef93c0";
+var css$2 = undefined;
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4530,7 +4286,7 @@ function LeftBar(props) {
             textbus.focus();
         });
     }
-    return scopedCss.withScopedCSS(exportedId$2, () => {
+    return scopedCss.withScopedCSS(css$2, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxRuntime.jsxs("div", { class: ['left-bar', { active: props.isFocus() }], children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { ref: insertBarRef, children: jsxRuntime.jsx("tbody", { children: state.rows.map((_, index) => {
@@ -4578,7 +4334,7 @@ function LeftBar(props) {
     });
 }
 
-var exportedId$1 = "vf-d4c4a9";
+var css$1 = undefined;
 
 function sum(numbers) {
     return numbers.reduce((a, b) => a + b, 0);
@@ -4611,7 +4367,7 @@ function ResizeRow(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(exportedId$1, () => {
+    return scopedCss.withScopedCSS(css$1, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, style: {
                 display: styles().visible ? 'block' : 'none',
                 top: styles().top + 'px',
@@ -4620,7 +4376,7 @@ function ResizeRow(props) {
     });
 }
 
-var exportedId = "vf-e16878";
+var css = undefined;
 
 function SelectionMask(props) {
     const [styles, updateStyles] = hooks.useProduce({
@@ -4673,7 +4429,7 @@ function SelectionMask(props) {
     core.onUnmounted(() => {
         s.unsubscribe();
     });
-    return scopedCss.withScopedCSS(exportedId, () => {
+    return scopedCss.withScopedCSS(css, () => {
         const style = styles();
         return (jsxRuntime.jsx("div", { class: "mask", style: {
                 display: style.visible ? 'block' : 'none',
@@ -4979,18 +4735,8 @@ class VideoComponent extends core$1.Component {
         //
     }
 }
-Object.defineProperty(VideoComponent, "type", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: core$1.ContentType.InlineComponent
-});
-Object.defineProperty(VideoComponent, "componentName", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: 'VideoComponent'
-});
+VideoComponent.type = core$1.ContentType.InlineComponent;
+VideoComponent.componentName = 'VideoComponent';
 function VideoView(props) {
     const { name, state } = props.component;
     const videoRef = core.createRef();
@@ -5021,9 +4767,9 @@ const videoComponentLoader = {
     }
 };
 
-function createXNote(host, config = {}) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const adapter = new adapterViewfly.Adapter({
+function createXNote(host_1) {
+    return __awaiter(this, arguments, void 0, function* (host, config = {}) {
+        const adapter = new adapterViewfly.ViewflyAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
             [RootComponent.componentName]: RootView,
             [BlockquoteComponent.componentName]: BlockquoteView,
@@ -5034,8 +4780,8 @@ function createXNote(host, config = {}) {
             [ListComponent.componentName]: ListComponentView,
             [ImageComponent.componentName]: ImageView,
             [VideoComponent.componentName]: VideoView
-        }, (host, root) => {
-            const appInjector = new core.ReflectiveInjector(textbus, [{
+        }, (host, root, injector) => {
+            const appInjector = new core.ReflectiveInjector(injector, [{
                     provide: OutputInjectionToken,
                     useValue: false
                 }]);
@@ -5046,6 +4792,35 @@ function createXNote(host, config = {}) {
                 app.destroy();
             };
         });
+        const vDomAdapter = new adapterViewfly.ViewflyVDomAdapter({
+            [ParagraphComponent.componentName]: ParagraphView,
+            [RootComponent.componentName]: RootView,
+            [BlockquoteComponent.componentName]: BlockquoteView,
+            [TodolistComponent.componentName]: TodolistView,
+            [SourceCodeComponent.componentName]: SourceCodeView,
+            [TableComponent.componentName]: TableComponentView,
+            [HighlightBoxComponent.componentName]: HighlightBoxView,
+            [ListComponent.componentName]: ListComponentView,
+            [ImageComponent.componentName]: ImageView,
+            [VideoComponent.componentName]: VideoView
+        }, (host, root, injector) => {
+            const appInjector = new core.ReflectiveInjector(injector, [{
+                    provide: OutputInjectionToken,
+                    useValue: true
+                }, {
+                    provide: platformBrowser.DomAdapter,
+                    useFactory() {
+                        return vDomAdapter;
+                    }
+                }]);
+            const app = platformBrowser$1.createApp(root, {
+                context: appInjector,
+                nativeRenderer: new platformBrowser$1.HTMLRenderer()
+            }).mount(host);
+            return () => {
+                app.destroy();
+            };
+        });
         const browserModule = new platformBrowser.BrowserModule({
             renderTo() {
                 return host;
@@ -5085,6 +4860,7 @@ function createXNote(host, config = {}) {
             modules.push(new collaborate.CollaborateModule(config.collaborateConfig));
         }
         const textbus = new core$1.Textbus({
+            additionalAdapters: [vDomAdapter],
             zenCoding: true,
             readonly: config.readonly,
             imports: modules,
@@ -5149,8 +4925,13 @@ function createXNote(host, config = {}) {
             });
         }
         yield textbus.render(rootComp);
-        // console.log(rootComp)
-        return textbus;
+        const translator = new platformBrowser$1.OutputTranslator();
+        return {
+            textbus,
+            getHTML() {
+                return translator.transform(vDomAdapter.host);
+            }
+        };
     });
 }