@textbus/xnote 0.0.1-alpha.2 → 0.0.1-alpha.4

package/bundles/index.js

@@ -11,36 +11,7 @@ var highlightjs = require('highlight.js');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var collaborate = require('@textbus/collaborate');
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$w = ".btn[vf-69b4db]{align-items:center;background:none;background:#fff;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-69b4db]{white-space:nowrap}.btn[vf-69b4db]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-69b4db]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-69b4db]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-69b4db]{transform:rotate(180deg)}.btn.highlight[vf-69b4db]{background-color:rgba(41,110,255,.063);color:#296eff}";
-var scopedId$k = "vf-69b4db";
-styleInject(css_248z$w);
+var css$j = undefined;
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -87,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) {
@@ -116,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) {
@@ -228,7 +142,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$k, () => {
+    return scopedCss.withScopedCSS(css$j, () => {
         return (jsxRuntime.jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -240,12 +154,10 @@ function Button(props) {
     });
 }
 
-var css_248z$v = ".component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}";
-var scopedId$j = "vf-ac7e8d";
-styleInject(css_248z$v);
+var css$i = undefined;
 
 function ComponentToolbar(props) {
-    return scopedCss.withScopedCSS(scopedId$j, () => {
+    return scopedCss.withScopedCSS(css$i, () => {
         return (jsxRuntime.jsx("div", { class: "component-toolbar", style: props.style, children: jsxRuntime.jsx("div", { class: [
                     'toolbar',
                     {
@@ -255,19 +167,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var css_248z$u = ".divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}";
-var scopedId$i = "vf-ede279";
-styleInject(css_248z$u);
+var css$h = undefined;
 
 function Divider() {
-    return scopedCss.withScopedCSS(scopedId$i, () => {
+    return scopedCss.withScopedCSS(css$h, () => {
         return jsxRuntime.jsx("div", { class: "divider" });
     });
 }
 
-var css_248z$t = ".drag-resize[vf-4c1803]{position:relative;width:100%}.drag-resize .resize-tool[vf-4c1803]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-4c1803]{display:flex}.drag-resize .mask[vf-4c1803]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;position:relative;text-shadow:1px 2px 3px rgba(0,0,0,.7);white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-4c1803]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-4c1803]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-4c1803]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-4c1803]:first-child,.drag-resize button[vf-4c1803]:nth-child(2),.drag-resize button[vf-4c1803]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-4c1803]:nth-child(3),.drag-resize button[vf-4c1803]:nth-child(4),.drag-resize button[vf-4c1803]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-4c1803]:nth-child(5),.drag-resize button[vf-4c1803]:nth-child(6),.drag-resize button[vf-4c1803]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-4c1803]:first-child,.drag-resize button[vf-4c1803]:nth-child(7),.drag-resize button[vf-4c1803]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-4c1803]:nth-child(2),.drag-resize button[vf-4c1803]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-4c1803]:nth-child(4),.drag-resize button[vf-4c1803]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-4c1803]:first-child{cursor:nw-resize}.drag-resize button[vf-4c1803]:nth-child(2){cursor:n-resize}.drag-resize button[vf-4c1803]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-4c1803]:nth-child(4){cursor:e-resize}.drag-resize button[vf-4c1803]:nth-child(5){cursor:se-resize}.drag-resize button[vf-4c1803]:nth-child(6){cursor:s-resize}.drag-resize button[vf-4c1803]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-4c1803]:nth-child(8){cursor:w-resize}";
-var scopedId$h = "vf-4c1803";
-styleInject(css_248z$t);
+var style = undefined;
 
 function DragResize(props) {
     const isShow = core.createSignal(false);
@@ -375,20 +283,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$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 css_248z$s = ".dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}";
-var scopedId$g = "vf-a99c5e";
-styleInject(css_248z$s);
+var css$g = undefined;
 
-var css_248z$r = ".dropdown-menu[vf-4f8cfb]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);height:0;left:-10px;opacity:0;overflow-y:auto;position:fixed;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu-content[vf-4f8cfb]{padding:6px}";
-var scopedId$f = "vf-4f8cfb";
-styleInject(css_248z$r);
+var css$f = undefined;
 
 const DropdownMenuPortal = core.withAnnotation({
     providers: [
@@ -471,7 +375,7 @@ const DropdownMenuPortal = core.withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$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 }) }));
@@ -532,7 +436,7 @@ const Dropdown = core.withAnnotation({
                 dropdownContextService.open();
             }
         },
-        $render: scopedCss.withScopedCSS(scopedId$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: () => {
@@ -548,9 +452,7 @@ const Dropdown = core.withAnnotation({
     };
 });
 
-var css_248z$q = ".menu-item[vf-64f71d]{border-radius:4px;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item.disabled[vf-64f71d]{cursor:not-allowed;opacity:.5}.menu-item[vf-64f71d]:hover{background:#eee}.menu-item.active[vf-64f71d]{background:rgba(0,0,0,.1)}.menu-icon[vf-64f71d]{display:inline-block;width:1.8em}.menu-check[vf-64f71d]{display:none}.menu-check.checked[vf-64f71d]{color:#296eff;display:block}";
-var scopedId$e = "vf-64f71d";
-styleInject(css_248z$q);
+var css$e = undefined;
 
 function MenuItem(props) {
     const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
@@ -570,7 +472,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return scopedCss.withScopedCSS(scopedId$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: [
@@ -580,13 +482,11 @@ function MenuItem(props) {
     });
 }
 
-var css_248z$p = ".popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}";
-var scopedId$d = "vf-a23c47";
-styleInject(css_248z$p);
+var css$d = undefined;
 
 function Popup(props) {
     const host = core.inject(platformBrowser.VIEW_CONTAINER);
-    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(scopedId$d, () => {
+    return platformBrowser$1.createPortal(scopedCss.withScopedCSS(css$d, () => {
         return (jsxRuntime.jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -594,28 +494,19 @@ function Popup(props) {
     }), host);
 }
 
-var css_248z$o = ".toolbar-item[vf-216815]{padding:3px}";
-var scopedId$c = "vf-216815";
-styleInject(css_248z$o);
+var css$c = undefined;
 
 function ToolbarItem(props) {
-    return scopedCss.withScopedCSS(scopedId$c, () => {
+    return scopedCss.withScopedCSS(css$c, () => {
         return (jsxRuntime.jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var css_248z$n = ".heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}";
-var scopedId$b = "vf-2a8a65";
-styleInject(css_248z$n);
+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([
@@ -658,12 +549,6 @@ function registerTextAlignShortcut(textbus) {
     });
 }
 
-var css_248z$m = ".xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{\n  /*!\n    Theme: GitHub\n    Description: Light theme as seen on github.com\n    Author: github.com\n    Maintainer: @Hirse\n    Updated: 2021-05-15\n\n    Outdated base version: https://github.com/primer/github-syntax-light\n    Current colors taken from GitHub's CSS\n  */}.xnote-source-code.github .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.github .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.github pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.github code.hljs{padding:3px 5px}.xnote-source-code.github .hljs{background:#fff;color:#24292e}.xnote-source-code.github .hljs-doctag,.xnote-source-code.github .hljs-keyword,.xnote-source-code.github .hljs-meta .hljs-keyword,.xnote-source-code.github .hljs-template-tag,.xnote-source-code.github .hljs-template-variable,.xnote-source-code.github .hljs-type,.xnote-source-code.github .hljs-variable.language_{color:#d73a49}.xnote-source-code.github .hljs-title,.xnote-source-code.github .hljs-title.class_,.xnote-source-code.github .hljs-title.class_.inherited__,.xnote-source-code.github .hljs-title.function_{color:#6f42c1}.xnote-source-code.github .hljs-attr,.xnote-source-code.github .hljs-attribute,.xnote-source-code.github .hljs-literal,.xnote-source-code.github .hljs-meta,.xnote-source-code.github .hljs-number,.xnote-source-code.github .hljs-operator,.xnote-source-code.github .hljs-selector-attr,.xnote-source-code.github .hljs-selector-class,.xnote-source-code.github .hljs-selector-id,.xnote-source-code.github .hljs-variable{color:#005cc5}.xnote-source-code.github .hljs-meta .hljs-string,.xnote-source-code.github .hljs-regexp,.xnote-source-code.github .hljs-string{color:#032f62}.xnote-source-code.github .hljs-built_in,.xnote-source-code.github .hljs-symbol{color:#e36209}.xnote-source-code.github .hljs-code,.xnote-source-code.github .hljs-comment,.xnote-source-code.github .hljs-formula{color:#6a737d}.xnote-source-code.github .hljs-name,.xnote-source-code.github .hljs-quote,.xnote-source-code.github .hljs-selector-pseudo,.xnote-source-code.github .hljs-selector-tag{color:#22863a}.xnote-source-code.github .hljs-subst{color:#24292e}.xnote-source-code.github .hljs-section{color:#005cc5;font-weight:700}.xnote-source-code.github .hljs-bullet{color:#735c0f}.xnote-source-code.github .hljs-emphasis{color:#24292e;font-style:italic}.xnote-source-code.github .hljs-strong{color:#24292e;font-weight:700}.xnote-source-code.github .hljs-addition{background-color:#f0fff4;color:#22863a}.xnote-source-code.github .hljs-deletion{background-color:#ffeef0;color:#b31d28}.xnote-source-code.idea .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.idea .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.idea pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.idea code.hljs{padding:3px 5px}.xnote-source-code.idea .hljs{background:#fff;color:#000}.xnote-source-code.idea .hljs-subst,.xnote-source-code.idea .hljs-title{color:#000;font-weight:400}.xnote-source-code.idea .hljs-comment,.xnote-source-code.idea .hljs-quote{color:grey;font-style:italic}.xnote-source-code.idea .hljs-meta{color:olive}.xnote-source-code.idea .hljs-tag{background:#efefef}.xnote-source-code.idea .hljs-keyword,.xnote-source-code.idea .hljs-literal,.xnote-source-code.idea .hljs-name,.xnote-source-code.idea .hljs-section,.xnote-source-code.idea .hljs-selector-class,.xnote-source-code.idea .hljs-selector-id,.xnote-source-code.idea .hljs-selector-tag,.xnote-source-code.idea .hljs-type{color:navy;font-weight:700}.xnote-source-code.idea .hljs-attribute,.xnote-source-code.idea .hljs-link,.xnote-source-code.idea .hljs-number,.xnote-source-code.idea .hljs-regexp{color:#00f;font-weight:700}.xnote-source-code.idea .hljs-link,.xnote-source-code.idea .hljs-number,.xnote-source-code.idea .hljs-regexp{font-weight:400}.xnote-source-code.idea .hljs-string{color:green;font-weight:700}.xnote-source-code.idea .hljs-bullet,.xnote-source-code.idea .hljs-formula,.xnote-source-code.idea .hljs-symbol{background:#d0eded;color:#000;font-style:italic}.xnote-source-code.idea .hljs-doctag{text-decoration:underline}.xnote-source-code.idea .hljs-template-variable,.xnote-source-code.idea .hljs-variable{color:#660e7a}.xnote-source-code.idea .hljs-addition{background:#baeeba}.xnote-source-code.idea .hljs-deletion{background:#ffc8bd}.xnote-source-code.idea .hljs-emphasis{font-style:italic}.xnote-source-code.idea .hljs-strong{font-weight:700}.xnote-source-code.intellij-light .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.intellij-light .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.intellij-light pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.intellij-light code.hljs{padding:3px 5px}.xnote-source-code.intellij-light .hljs{background:#fff;color:#000}.xnote-source-code.intellij-light .hljs-subst,.xnote-source-code.intellij-light .hljs-title{color:#000;font-weight:400}.xnote-source-code.intellij-light .hljs-title.function_{color:#7a7a43}.xnote-source-code.intellij-light .hljs-code,.xnote-source-code.intellij-light .hljs-comment,.xnote-source-code.intellij-light .hljs-quote{color:#8c8c8c;font-style:italic}.xnote-source-code.intellij-light .hljs-meta{color:#9e880d}.xnote-source-code.intellij-light .hljs-section{color:#871094}.xnote-source-code.intellij-light .hljs-built_in,.xnote-source-code.intellij-light .hljs-keyword,.xnote-source-code.intellij-light .hljs-literal,.xnote-source-code.intellij-light .hljs-meta .hljs-keyword,.xnote-source-code.intellij-light .hljs-name,.xnote-source-code.intellij-light .hljs-selector-attr,.xnote-source-code.intellij-light .hljs-selector-class,.xnote-source-code.intellij-light .hljs-selector-id,.xnote-source-code.intellij-light .hljs-selector-pseudo,.xnote-source-code.intellij-light .hljs-selector-tag,.xnote-source-code.intellij-light .hljs-symbol,.xnote-source-code.intellij-light .hljs-template-tag,.xnote-source-code.intellij-light .hljs-type,.xnote-source-code.intellij-light .hljs-variable.language_{color:#0033b3}.xnote-source-code.intellij-light .hljs-attr,.xnote-source-code.intellij-light .hljs-property{color:#871094}.xnote-source-code.intellij-light .hljs-attribute{color:#174ad4}.xnote-source-code.intellij-light .hljs-number{color:#1750eb}.xnote-source-code.intellij-light .hljs-regexp{color:#264eff}.xnote-source-code.intellij-light .hljs-link{color:#006dcc;text-decoration:underline}.xnote-source-code.intellij-light .hljs-meta .hljs-string,.xnote-source-code.intellij-light .hljs-string{color:#067d17}.xnote-source-code.intellij-light .hljs-char.escape_{color:#0037a6}.xnote-source-code.intellij-light .hljs-doctag{text-decoration:underline}.xnote-source-code.intellij-light .hljs-template-variable{color:#248f8f}.xnote-source-code.intellij-light .hljs-addition{background:#bee6be}.xnote-source-code.intellij-light .hljs-deletion{background:#d6d6d6}.xnote-source-code.intellij-light .hljs-emphasis{font-style:italic}.xnote-source-code.intellij-light .hljs-strong{font-weight:700}.xnote-source-code.intellij-light .hljs-bullet,.xnote-source-code.intellij-light .hljs-formula,.xnote-source-code.intellij-light .hljs-operator,.xnote-source-code.intellij-light .hljs-params,.xnote-source-code.intellij-light .hljs-punctuation,.xnote-source-code.intellij-light .hljs-tag,.xnote-source-code.intellij-light .hljs-title.class_,.xnote-source-code.intellij-light .hljs-title.class_.inherited__,.xnote-source-code.intellij-light .hljs-variable,.xnote-source-code.stackoverflow-light{\n  /*!\n    Theme: StackOverflow Light\n    Description: Light theme as used on stackoverflow.com\n    Author: stackoverflow.com\n    Maintainer: @Hirse\n    Website: https://github.com/StackExchange/Stacks\n    License: MIT\n    Updated: 2021-05-15\n\n    Updated for @stackoverflow/stacks v0.64.0\n    Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less\n    Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less\n  */}.xnote-source-code.stackoverflow-light pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.stackoverflow-light code.hljs{padding:3px 5px}.xnote-source-code.stackoverflow-light .hljs{background:#f6f6f6;color:#2f3337}.xnote-source-code.stackoverflow-light .hljs-subst{color:#2f3337}.xnote-source-code.stackoverflow-light .hljs-comment{color:#656e77}.xnote-source-code.stackoverflow-light .hljs-attr,.xnote-source-code.stackoverflow-light .hljs-doctag,.xnote-source-code.stackoverflow-light .hljs-keyword,.xnote-source-code.stackoverflow-light .hljs-meta .hljs-keyword,.xnote-source-code.stackoverflow-light .hljs-section,.xnote-source-code.stackoverflow-light .hljs-selector-tag{color:#015692}.xnote-source-code.stackoverflow-light .hljs-attribute{color:#803378}.xnote-source-code.stackoverflow-light .hljs-name,.xnote-source-code.stackoverflow-light .hljs-number,.xnote-source-code.stackoverflow-light .hljs-quote,.xnote-source-code.stackoverflow-light .hljs-selector-id,.xnote-source-code.stackoverflow-light .hljs-template-tag,.xnote-source-code.stackoverflow-light .hljs-type{color:#b75501}.xnote-source-code.stackoverflow-light .hljs-selector-class{color:#015692}.xnote-source-code.stackoverflow-light .hljs-link,.xnote-source-code.stackoverflow-light .hljs-regexp,.xnote-source-code.stackoverflow-light .hljs-selector-attr,.xnote-source-code.stackoverflow-light .hljs-string,.xnote-source-code.stackoverflow-light .hljs-symbol,.xnote-source-code.stackoverflow-light .hljs-template-variable,.xnote-source-code.stackoverflow-light .hljs-variable{color:#54790d}.xnote-source-code.stackoverflow-light .hljs-meta,.xnote-source-code.stackoverflow-light .hljs-selector-pseudo{color:#015692}.xnote-source-code.stackoverflow-light .hljs-built_in,.xnote-source-code.stackoverflow-light .hljs-literal,.xnote-source-code.stackoverflow-light .hljs-title{color:#b75501}.xnote-source-code.stackoverflow-light .hljs-bullet,.xnote-source-code.stackoverflow-light .hljs-code{color:#535a60}.xnote-source-code.stackoverflow-light .hljs-meta .hljs-string{color:#54790d}.xnote-source-code.stackoverflow-light .hljs-deletion{color:#c02d2e}.xnote-source-code.stackoverflow-light .hljs-addition{color:#2f6f44}.xnote-source-code.stackoverflow-light .hljs-emphasis{font-style:italic}.xnote-source-code.stackoverflow-light .hljs-strong{font-weight:700}.xnote-source-code.vs2015 pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.vs2015 code.hljs{padding:3px 5px}.xnote-source-code.vs2015 .hljs{background:#1e1e1e;color:#dcdcdc}.xnote-source-code.vs2015 .hljs-keyword,.xnote-source-code.vs2015 .hljs-literal,.xnote-source-code.vs2015 .hljs-name,.xnote-source-code.vs2015 .hljs-symbol{color:#569cd6}.xnote-source-code.vs2015 .hljs-link{color:#569cd6;text-decoration:underline}.xnote-source-code.vs2015 .hljs-built_in,.xnote-source-code.vs2015 .hljs-type{color:#4ec9b0}.xnote-source-code.vs2015 .hljs-class,.xnote-source-code.vs2015 .hljs-number{color:#b8d7a3}.xnote-source-code.vs2015 .hljs-meta .hljs-string,.xnote-source-code.vs2015 .hljs-string{color:#d69d85}.xnote-source-code.vs2015 .hljs-regexp,.xnote-source-code.vs2015 .hljs-template-tag{color:#9a5334}.xnote-source-code.vs2015 .hljs-formula,.xnote-source-code.vs2015 .hljs-function,.xnote-source-code.vs2015 .hljs-params,.xnote-source-code.vs2015 .hljs-subst,.xnote-source-code.vs2015 .hljs-title{color:#dcdcdc}.xnote-source-code.vs2015 .hljs-comment,.xnote-source-code.vs2015 .hljs-quote{color:#57a64a;font-style:italic}.xnote-source-code.vs2015 .hljs-doctag{color:#608b4e}.xnote-source-code.vs2015 .hljs-meta,.xnote-source-code.vs2015 .hljs-meta .hljs-keyword,.xnote-source-code.vs2015 .hljs-tag{color:#9b9b9b}.xnote-source-code.vs2015 .hljs-template-variable,.xnote-source-code.vs2015 .hljs-variable{color:#bd63c5}.xnote-source-code.vs2015 .hljs-attr,.xnote-source-code.vs2015 .hljs-attribute{color:#9cdcfe}.xnote-source-code.vs2015 .hljs-section{color:gold}.xnote-source-code.vs2015 .hljs-emphasis{font-style:italic}.xnote-source-code.vs2015 .hljs-strong{font-weight:700}.xnote-source-code.vs2015 .hljs-bullet,.xnote-source-code.vs2015 .hljs-selector-attr,.xnote-source-code.vs2015 .hljs-selector-class,.xnote-source-code.vs2015 .hljs-selector-id,.xnote-source-code.vs2015 .hljs-selector-pseudo,.xnote-source-code.vs2015 .hljs-selector-tag{color:#d7ba7d}.xnote-source-code.vs2015 .hljs-addition{background-color:#144212;display:inline-block;width:100%}.xnote-source-code.vs2015 .hljs-deletion{background-color:#600;display:inline-block;width:100%}.xnote-source-code.xcode .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.xcode .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.xcode pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.xcode code.hljs{padding:3px 5px}.xnote-source-code.xcode .hljs{background:#fff;color:#000}.xnote-source-code.xcode .xml .hljs-meta{color:silver}.xnote-source-code.xcode .hljs-comment,.xnote-source-code.xcode .hljs-quote{color:#007400}.xnote-source-code.xcode .hljs-attribute,.xnote-source-code.xcode .hljs-keyword,.xnote-source-code.xcode .hljs-literal,.xnote-source-code.xcode .hljs-name,.xnote-source-code.xcode .hljs-selector-tag,.xnote-source-code.xcode .hljs-tag{color:#aa0d91}.xnote-source-code.xcode .hljs-template-variable,.xnote-source-code.xcode .hljs-variable{color:#3f6e74}.xnote-source-code.xcode .hljs-code,.xnote-source-code.xcode .hljs-meta .hljs-string,.xnote-source-code.xcode .hljs-string{color:#c41a16}.xnote-source-code.xcode .hljs-link,.xnote-source-code.xcode .hljs-regexp{color:#0e0eff}.xnote-source-code.xcode .hljs-bullet,.xnote-source-code.xcode .hljs-number,.xnote-source-code.xcode .hljs-symbol,.xnote-source-code.xcode .hljs-title{color:#1c00cf}.xnote-source-code.xcode .hljs-meta,.xnote-source-code.xcode .hljs-section{color:#643820}.xnote-source-code.xcode .hljs-built_in,.xnote-source-code.xcode .hljs-class .hljs-title,.xnote-source-code.xcode .hljs-params,.xnote-source-code.xcode .hljs-title.class_,.xnote-source-code.xcode .hljs-type{color:#5c2699}.xnote-source-code.xcode .hljs-attr{color:#836c28}.xnote-source-code.xcode .hljs-subst{color:#000}.xnote-source-code.xcode .hljs-formula{background-color:#eee;font-style:italic}.xnote-source-code.xcode .hljs-addition{background-color:#baeeba}.xnote-source-code.xcode .hljs-deletion{background-color:#ffc8bd}.xnote-source-code.xcode .hljs-selector-class,.xnote-source-code.xcode .hljs-selector-id{color:#9b703f}.xnote-source-code.xcode .hljs-doctag,.xnote-source-code.xcode .hljs-strong{font-weight:700}.xnote-source-code.xcode .hljs-emphasis{font-style:italic}.xnote-source-code code{background:none;border:none;border-radius:0;padding:0;vertical-align:inherit}.xnote-source-code{position:relative}.xnote-source-code-container{border-radius:5px;display:flex;line-height:1.418em;overflow:hidden;position:relative}.xnote-source-code-container.xnote-source-code-auto-break{word-wrap:break-word;white-space:pre-wrap;word-break:break-all}code,kbd,pre,samp{font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace}.xnote-source-code-line-number-bg{background-color:inherit;display:none;position:relative;width:3em;z-index:2}.xnote-source-code.xnote-source-code-line-number .xnote-source-code-line-number-bg{display:block}.xnote-source-code.xnote-source-code-line-number .xnote-source-code-line{margin-left:-4em}.xnote-source-code-content{counter-reset:codeNum;flex:1;max-height:450px;overflow:auto;padding:15px 0;position:relative}.xnote-source-code-content-highlight .xnote-source-code-line{opacity:.36}.xnote-source-code-line{display:flex;margin-left:0}.xnote-source-code-line-content{padding:0 20px}.xnote-source-code-line-number .xnote-source-code-line-content{padding:0 20px 0 10px}.xnote-source-code-line-number .xnote-source-code-line:before{box-sizing:border-box;content:counter(codeNum);counter-increment:codeNum;left:0;min-width:4em;opacity:.5;overflow:hidden;padding-right:10px;position:sticky;text-align:right;transform:translateX(-4em);white-space:nowrap;z-index:2}.xnote-source-code-content-highlight .xnote-source-code-line-emphasize{opacity:1}.xnote-source-code-lang{font-size:13px;opacity:.5;padding:4px 10px;pointer-events:none;position:absolute;right:0;top:0}";
-styleInject(css_248z$m);
-
-var css_248z$l = ".xnote-paragraph p{margin:8px 0}";
-styleInject(css_248z$l);
-
 function useReadonly() {
     const controller = core.inject(core$1.Controller);
     const is = core.createSignal(controller.readonly);
@@ -703,18 +588,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();
@@ -876,42 +751,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);
@@ -1083,67 +943,52 @@ class SourceCodeComponent extends core$1.Component {
         });
     }
 }
-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: '',
+                lang: 'JavaScript',
                 theme: '',
                 lineNumber: true,
                 slots: [createCodeSlot()]
             };
         }
+        if (/^ts$/i.test(matchString)) {
+            return {
+                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);
@@ -1235,7 +1080,7 @@ function SourceCodeView(props) {
                 '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 => {
+            }, 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 => {
                                     return {
                                         label: jsxRuntime.jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
                                         value: item.value
@@ -1475,7 +1320,7 @@ function AttrTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(scopedId$b, () => {
+    return scopedCss.withScopedCSS(css$b, () => {
         const states = checkStates();
         return (jsxRuntime.jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
@@ -1614,24 +1459,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(() => {
@@ -1756,21 +1586,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
-});
-
-var css_248z$k = ".xnote-todolist{align-items:center;display:flex;margin:8px 0}.xnote-todolist-icon{color:#296eff;cursor:pointer;margin-right:6px}.xnote-todolist-content[style*=text-indent]{text-indent:0!important}.xnote-todolist-content[style*=text-align]{text-align:left!important}";
-styleInject(css_248z$k);
+TableComponent.componentName = 'TableComponent';
+TableComponent.type = core$1.ContentType.BlockComponent;
 
 const strikeThroughFormatter = new core$1.Formatter('strike', {
     columned: true,
@@ -1875,37 +1692,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;
@@ -1959,9 +1761,6 @@ const todolistComponentLoader = {
     }
 };
 
-var css_248z$j = ".xnote-blockquote{border-left:2px solid #296eff;margin:1em 0;padding:0 15px}.xnote-blockquote>:first-child{margin-top:0}.xnote-blockquote>:last-child{margin-bottom:0}";
-styleInject(css_248z$j);
-
 class BlockquoteComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -1982,36 +1781,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();
@@ -2046,9 +1830,6 @@ const blockquoteComponentLoader = {
     },
 };
 
-var css_248z$i = ".xnote-list{margin:8px 0;padding:0}.xnote-list>li{display:flex}.xnote-list-type{box-sizing:border-box;color:#296eff;text-align:left;text-indent:0;white-space:nowrap;width:24px}.xnote-order-btn{padding-left:5px}.xnote-list-content[style*=text-indent]{text-indent:0!important}.xnote-list-content[style*=text-align]{text-align:left!important}";
-styleInject(css_248z$i);
-
 class ListComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new ListComponent(textbus, {
@@ -2131,37 +1912,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) {
@@ -2251,7 +2017,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 => {
@@ -2353,9 +2119,6 @@ function useActiveBlock() {
     };
 }
 
-var css_248z$h = ".xnote-highlight-box{background:#fcf5ce;border:1px solid #f5c774;border-radius:4px;display:flex;margin:16px 0}.xnote-highlight-box-left{padding-top:.65em;text-align:center;width:40px}.xnote-highlight-box-content{flex:1}.xnote-highlight-box-icon button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.4em;height:30px;padding:0;width:30px}.xnote-highlight-box-icon button:hover{background:rgba(0,0,0,.1)}.xnote-highlight-box-icons{text-align:left}.xnote-highlight-box-icons button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:24px;height:30px;padding:0;width:30px}.xnote-highlight-box-icons button:hover{background:rgba(0,0,0,.1)}.xnote-highlight-box-content{padding:5px}";
-styleInject(css_248z$h);
-
 class HighlightBoxComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new HighlightBoxComponent(textbus, {
@@ -2377,24 +2140,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();
@@ -2666,7 +2414,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return scopedCss.withScopedCSS(scopedId$b, () => {
+    return scopedCss.withScopedCSS(css$b, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -3097,9 +2845,7 @@ function CodeTool() {
     };
 }
 
-var css_248z$g = ".color-type[vf-1fbbdf]{font-size:13px;padding:5px 0}.text-colors[vf-1fbbdf]{font-size:14px;overflow:hidden}.text-colors div[vf-1fbbdf]{border:1px solid #eee;border-radius:4px;box-sizing:border-box;cursor:pointer;float:left;height:22px;line-height:20px;margin:4px 3px;text-align:center;width:22px}.text-colors div.active[vf-1fbbdf]{box-shadow:0 0 0 2px #296eff}.text-colors div[vf-1fbbdf]:hover{box-shadow:0 0 0 2px rgba(41,110,255,.188)}.background-colors[vf-1fbbdf]{font-size:14px;overflow:hidden}.background-colors div[vf-1fbbdf]{border-radius:4px;color:#fff;cursor:pointer;float:left;height:22px;line-height:22px;margin:4px 3px;text-align:center;width:22px}.background-colors div.active[vf-1fbbdf]{box-shadow:0 0 0 2px #296eff}.background-colors div[vf-1fbbdf]:hover{box-shadow:0 0 0 2px rgba(41,110,255,.188)}.background-colors .no-background[vf-1fbbdf]{border:1px solid #eee;box-sizing:border-box;overflow:hidden;position:relative}.background-colors .no-background[vf-1fbbdf]:before{background:#aaa;content:\"\";height:1px;left:-28px;position:absolute;top:0;transform:rotate(-45deg);width:100px}.background[vf-1fbbdf]{display:inline-block;height:1em;margin-right:6px;position:relative;text-align:center;width:1em}.background>span[vf-1fbbdf]{border-radius:4px;height:20px;left:-2px;line-height:20px;position:absolute;top:-2px;width:20px}";
-var scopedId$a = "vf-1fbbdf";
-styleInject(css_248z$g);
+var css$a = undefined;
 
 function ColorTool(props) {
     const query = core.inject(core$1.Query);
@@ -3147,7 +2893,7 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return scopedCss.withScopedCSS(scopedId$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() === ''
@@ -3355,9 +3101,7 @@ function ItalicTool() {
     };
 }
 
-var css_248z$f = ".input-group[vf-269a0b]{display:flex;padding:5px 10px}.input-group input[vf-269a0b]{border:1px solid #ddd;border-radius:4px;margin-right:5px;padding:2px 6px}.input-group input[vf-269a0b]:focus{border-color:#296eff}.input-group button[vf-269a0b]{border:1px solid #ddd;border-radius:4px;font-size:14px}";
-var scopedId$9 = "vf-269a0b";
-styleInject(css_248z$f);
+var css$9 = undefined;
 
 function LinkTool(props) {
     const selectionBridge = core.inject(platformBrowser.SelectionBridge);
@@ -3388,7 +3132,7 @@ function LinkTool(props) {
     core.onUnmounted(() => {
         sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$9, () => {
+    return scopedCss.withScopedCSS(css$9, () => {
         const containerRect = container.getBoundingClientRect();
         const rect = isShow() ? selectionBridge.getRect({
             slot: selection.focusSlot,
@@ -3457,9 +3201,7 @@ function UnderlineTool() {
     };
 }
 
-var css_248z$e = ".btn-group[vf-cf8e1c]{font-size:15px;padding:5px 0;text-align:center}.btn-group button[vf-cf8e1c]{margin:2px 5px}";
-var scopedId$8 = "vf-cf8e1c";
-styleInject(css_248z$e);
+var css$8 = undefined;
 
 function InsertTool(props) {
     const commander = core.inject(core$1.Commander);
@@ -3563,14 +3305,12 @@ function InsertTool(props) {
                 break;
         }
     }
-    return scopedCss.withScopedCSS(scopedId$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 css_248z$d = ".left-toolbar[vf-b05292]{font-size:15px;left:-10px;position:absolute;top:0;z-index:10}.left-toolbar-btn-wrap[vf-b05292]{position:absolute;transition:all .2s}.left-toolbar-btn[vf-b05292]{background:#fff;border:1px solid #ddd;border-radius:5px;cursor:pointer;height:26px}.left-toolbar-btn span[vf-b05292]{align-items:center;display:inline-flex}.btn-group[vf-b05292]{font-size:15px;padding:5px 0;text-align:center}.btn-group button[vf-b05292]{margin:2px 5px}";
-var scopedId$7 = "vf-b05292";
-styleInject(css_248z$d);
+var css$7 = undefined;
 
 const LeftToolbar = core.withAnnotation({
     providers: [exports.RefreshService]
@@ -3729,7 +3469,7 @@ const LeftToolbar = core.withAnnotation({
         }
     }
     const isEmptyBlock = core.createSignal(true);
-    return scopedCss.withScopedCSS(scopedId$7, () => {
+    return scopedCss.withScopedCSS(css$7, () => {
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
@@ -3774,12 +3514,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 () {
@@ -3805,18 +3540,11 @@ class LeftToolbarPlugin {
     }
 }
 
-var css_248z$c = ".toolbar[vf-fee98b]{background:#fff;border:1px solid #dee0e3;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:13px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateX(-50%);transition-duration:.4s;transition-property:all;transition-timing-function:ease;z-index:3}";
-var scopedId$6 = "vf-fee98b";
-styleInject(css_248z$c);
+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([
@@ -3922,7 +3650,7 @@ const Toolbar = core.withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$6, () => {
+    return scopedCss.withScopedCSS(css$6, () => {
         const p = viewPosition();
         return (jsxRuntime.jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
                 left: p.left + 'px',
@@ -3937,12 +3665,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 () {
@@ -3967,30 +3690,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));
         }
@@ -4082,26 +3785,13 @@ class Matcher {
     }
 }
 
-var css_248z$b = ".xnote-image{display:inline-block}.xnote-image,.xnote-image img{max-width:100%}";
-styleInject(css_248z$b);
-
 class ImageComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         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();
@@ -4132,18 +3822,10 @@ const imageComponentLoader = {
     }
 };
 
-var css_248z$a = ".xnote-root{color:#1f2329}.xnote-root * ::selection{background:rgba(20,99,252,.34)}.xnote-title{font-size:30px;font-weight:600;margin:36px 0 22px}.xnote-title:before{content:attr(data-placeholder);opacity:.5;position:absolute}.xnote-content{font-size:16px;line-height:1.65}.xnote-content:before{content:attr(data-placeholder);opacity:.5;position:absolute}";
-styleInject(css_248z$a);
-
 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);
@@ -4186,18 +3868,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;
@@ -4255,45 +3927,15 @@ const rootComponentLoader = {
     }
 };
 
-var css_248z$9 = ".xnote-table{margin-bottom:16px;margin-top:16px;position:relative}.xnote-table-content{border-collapse:collapse;border-spacing:0}.xnote-table-content.hide-selection * ::selection{background:none}.xnote-table-content td{border:1px solid #ddd;padding:0 10px}.xnote-table-container,.xnote-table-wrapper{position:relative}.xnote-table-delete-btn{background:#eee;border:none;border-radius:4px;color:#5c6370;cursor:pointer;height:30px;line-height:30px;width:24px}.xnote-table-delete-btn:hover{color:#333}";
-styleInject(css_248z$9);
-
-var css_248z$8 = ".drag-line[vf-681de2]{border-color:transparent;border-style:solid;border-width:0 5px;bottom:0;box-sizing:content-box;cursor:col-resize;display:none;margin-left:-5px;position:absolute;top:0;width:2px}.drag-line[vf-681de2]:before{background:#296eff;content:\"\";inset:0;position:absolute}";
-var scopedId$5 = "vf-681de2";
-styleInject(css_248z$8);
+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([
@@ -4372,14 +4014,12 @@ function ResizeColumn(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$5, () => {
+    return scopedCss.withScopedCSS(css$5, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, class: ['drag-line'] });
     });
 }
 
-var css_248z$7 = ".top-bar[vf-5bce97]{display:none;left:0;position:absolute;right:0;top:0}.top-bar.active[vf-5bce97]{display:block}.top-delete-toolbar[vf-5bce97]{height:0;position:relative;top:-10px}.toolbar-wrapper[vf-5bce97]{height:60px;left:0;pointer-events:none;position:absolute;right:0;top:-60px}.insert-bar[vf-5bce97]{height:30px;margin-left:-10px;margin-right:-10px;overflow:hidden;padding-left:10px;padding-right:10px;padding-top:30px}.insert-bar table[vf-5bce97]{border-collapse:collapse;border-spacing:0;position:relative;table-layout:fixed;z-index:1}.insert-bar table td[vf-5bce97]{border:1px solid transparent;box-sizing:border-box;height:18px;position:relative}.insert-bar table .tool-container[vf-5bce97]{height:18px}.insert-bar table .tool-container>div[vf-5bce97],.insert-bar table .tool-container>span[vf-5bce97]{pointer-events:auto}.insert-bar table .insert-btn-wrap[vf-5bce97]{cursor:pointer;height:21px;position:absolute;right:-11px;top:-2px;width:21px;z-index:1}.insert-bar table .insert-btn-wrap .insert-btn[vf-5bce97]{background:#ccc;border:none;border-radius:50%;box-shadow:none;color:#fff;cursor:inherit;font-size:16px;height:100%;line-height:20px;padding:0;position:relative;text-align:center;transform:scale(.2);transition:transform .15s;width:100%}.insert-bar table .insert-btn-wrap .insert-btn[vf-5bce97]:after{background:inherit;content:\"\";height:10px;left:5.5px;position:absolute;top:12px;transform:rotate(45deg);width:10px;z-index:-1}.insert-bar table .insert-btn-wrap:hover .insert-btn[vf-5bce97]{background:#296eff;transform:scale(1)}.action-bar[vf-5bce97]{margin-top:-12px;overflow:hidden;pointer-events:auto;position:relative;z-index:0}.action-bar.active[vf-5bce97]{display:block}.action-bar table[vf-5bce97]{border-collapse:collapse;border-spacing:0;overflow:hidden;table-layout:fixed}.action-bar table td[vf-5bce97]{background:#eee;border:1px solid #ddd;box-sizing:border-box;cursor:pointer;height:12px;position:relative}.action-bar table td[vf-5bce97]:hover{background:#dedede}.action-bar table td.active[vf-5bce97]{background:#296eff;border-color:#2358c9}.action-bar table td.active[vf-5bce97]:before{border-color:inherit;border-style:solid;border-width:0 0 0 1px;bottom:0;content:\"\";left:-1px;position:absolute;top:-1px}";
-var scopedId$4 = "vf-5bce97";
-styleInject(css_248z$7);
+var css$4 = undefined;
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4447,7 +4087,7 @@ function TopBar(props) {
         s.unsubscribe();
     });
     const deleteIndex = core.createSignal(null);
-    return scopedCss.withScopedCSS(scopedId$4, () => {
+    return scopedCss.withScopedCSS(css$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxRuntime.jsx("div", { class: ['top-bar', {
@@ -4500,9 +4140,7 @@ function TopBar(props) {
     });
 }
 
-var css_248z$6 = ".scroll-container[vf-b1149b]{overflow-y:auto}.scroll-container[vf-b1149b]:before{background-image:linear-gradient(90deg,rgba(0,0,0,.1),transparent);border-left:1px solid #ddd;left:0}.scroll-container[vf-b1149b]:after,.scroll-container[vf-b1149b]:before{bottom:0;content:\"\";pointer-events:none;position:absolute;top:0;width:12px}.scroll-container[vf-b1149b]:after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.1));border-right:1px solid #ddd;right:0}.scroll-container.left-end[vf-b1149b]:before,.scroll-container.right-end[vf-b1149b]:after{display:none}";
-var scopedId$3 = "vf-b1149b";
-styleInject(css_248z$6);
+var css$3 = undefined;
 
 function Scroll(props) {
     const scrollRef = core.createRef();
@@ -4534,7 +4172,7 @@ function Scroll(props) {
             draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
         });
     });
-    return scopedCss.withScopedCSS(scopedId$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,
@@ -4546,9 +4184,7 @@ function Scroll(props) {
     });
 }
 
-var css_248z$5 = ".left-bar[vf-ef93c0]{display:none;left:0;margin-left:-30px;position:absolute;top:0;width:30px}.left-bar.active[vf-ef93c0]{display:flex}.toolbar-item[vf-ef93c0]{align-items:center;display:flex;inset:0;position:absolute}.insert-bar[vf-ef93c0]{width:18px}.insert-bar table[vf-ef93c0]{border-collapse:collapse;border-spacing:0;table-layout:fixed}.insert-bar table td[vf-ef93c0]{border:1px solid transparent;position:relative}.insert-bar table .insert-btn-wrap[vf-ef93c0]{bottom:-8px;cursor:pointer;height:21px;left:0;position:absolute;width:21px;z-index:1}.insert-bar table .insert-btn-wrap .insert-btn[vf-ef93c0]{background:#ccc;border:none;border-radius:50%;box-shadow:none;color:#fff;cursor:inherit;font-size:16px;height:100%;line-height:20px;padding:0;position:relative;text-align:center;transform:scale(.2);transition:transform .15s;width:100%}.insert-bar table .insert-btn-wrap .insert-btn[vf-ef93c0]:after{background:inherit;content:\"\";height:10px;left:11px;position:absolute;top:5.5px;transform:rotate(45deg);width:10px;z-index:-1}.insert-bar table .insert-btn-wrap:hover .insert-btn[vf-ef93c0]{background:#296eff;transform:scale(1)}.action-bar[vf-ef93c0]{width:12px}.action-bar table[vf-ef93c0]{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:13px}.action-bar table td[vf-ef93c0]{background:#eee;border:1px solid #ddd;box-sizing:border-box;cursor:pointer;height:12px;position:relative}.action-bar table td[vf-ef93c0]:hover{background:#dedede}.action-bar table td.active[vf-ef93c0]{background:#296eff;border-color:#2358c9}.action-bar table td.active[vf-ef93c0]:before{border-color:inherit;border-style:solid;border-width:1px 0 0;content:\"\";left:-1px;position:absolute;right:-1px;top:-1px}";
-var scopedId$2 = "vf-ef93c0";
-styleInject(css_248z$5);
+var css$2 = undefined;
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
@@ -4622,7 +4258,7 @@ function LeftBar(props) {
             textbus.focus();
         });
     }
-    return scopedCss.withScopedCSS(scopedId$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) => {
@@ -4670,9 +4306,7 @@ function LeftBar(props) {
     });
 }
 
-var css_248z$4 = ".drag-line[vf-d4c4a9]{background:#296eff;contain:layout size style;height:2px;left:0;max-width:100%;position:absolute;right:0;z-index:1}";
-var scopedId$1 = "vf-d4c4a9";
-styleInject(css_248z$4);
+var css$1 = undefined;
 
 function sum(numbers) {
     return numbers.reduce((a, b) => a + b, 0);
@@ -4705,7 +4339,7 @@ function ResizeRow(props) {
         });
         return () => sub.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId$1, () => {
+    return scopedCss.withScopedCSS(css$1, () => {
         return jsxRuntime.jsx("div", { ref: dragLineRef, style: {
                 display: styles().visible ? 'block' : 'none',
                 top: styles().top + 'px',
@@ -4714,9 +4348,7 @@ function ResizeRow(props) {
     });
 }
 
-var css_248z$3 = ".mask[vf-e16878]{background:rgba(41,110,255,.063);border:1px solid #296eff;display:none;pointer-events:none;position:absolute}.mask.active[vf-e16878]{display:block}";
-var scopedId = "vf-e16878";
-styleInject(css_248z$3);
+var css = undefined;
 
 function SelectionMask(props) {
     const [styles, updateStyles] = hooks.useProduce({
@@ -4769,7 +4401,7 @@ function SelectionMask(props) {
     core.onUnmounted(() => {
         s.unsubscribe();
     });
-    return scopedCss.withScopedCSS(scopedId, () => {
+    return scopedCss.withScopedCSS(css, () => {
         const style = styles();
         return (jsxRuntime.jsx("div", { class: "mask", style: {
                 display: style.visible ? 'block' : 'none',
@@ -5067,9 +4699,6 @@ function autoComplete(table) {
     });
 }
 
-var css_248z$2 = ".xnote-video{display:inline-block}.xnote-video,.xnote-video video{max-width:100%}";
-styleInject(css_248z$2);
-
 class VideoComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         return new VideoComponent(textbus, Object.assign({}, json));
@@ -5078,18 +4707,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();
@@ -5120,15 +4739,9 @@ const videoComponentLoader = {
     }
 };
 
-var css_248z$1 = "@font-face{font-display:block;font-family:textbus;font-style:normal;font-weight:400;src:url(fonts/textbus.ttf?fw0xu0) format(\"truetype\"),url(fonts/textbus.woff?fw0xu0) format(\"woff\"),url(fonts/textbus.svg?fw0xu0#textbus) format(\"svg\")}[class*=\" xnote-icon-\"],[class^=xnote-icon-]{speak:never;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:textbus!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.xnote-icon-heading-h1:before{content:\"\\e925\"}.xnote-icon-heading-h2:before{content:\"\\e926\"}.xnote-icon-heading-h3:before{content:\"\\e927\"}.xnote-icon-heading-h4:before{content:\"\\e928\"}.xnote-icon-heading-h5:before{content:\"\\e929\"}.xnote-icon-heading-h6:before{content:\"\\e92a\"}.xnote-icon-heading:before{content:\"\\e92b\"}.xnote-icon-more:before{content:\"\\e921\"}.xnote-icon-text-wrap:before{content:\"\\e924\"}.xnote-icon-checkmark:before{content:\"\\e922\"}.xnote-icon-arrow-left:before{content:\"\\e900\"}.xnote-icon-arrow-right:before{content:\"\\e901\"}.xnote-icon-arrow-top:before{content:\"\\e902\"}.xnote-icon-arrow-bottom:before{content:\"\\e903\"}.xnote-icon-source-code:before{content:\"\\e904\"}.xnote-icon-insert-paragraph-after:before{content:\"\\e905\"}.xnote-icon-insert-paragraph-before:before{content:\"\\e906\"}.xnote-icon-components:before{content:\"\\e907\"}.xnote-icon-table-border:before{content:\"\\e908\"}.xnote-icon-table-remove:before{content:\"\\e909\"}.xnote-icon-device:before{content:\"\\e90a\"}.xnote-icon-paint-bucket:before{content:\"\\e90b\"}.xnote-icon-background-color:before{content:\"\\e90c\"}.xnote-icon-color:before{content:\"\\e90d\"}.xnote-icon-brush:before{content:\"\\e90e\"}.xnote-icon-table-edit:before{content:\"\\e90f\"}.xnote-icon-table-split-columns:before{content:\"\\e910\"}.xnote-icon-table-delete-row-top:before{content:\"\\e911\"}.xnote-icon-table-delete-row-bottom:before{content:\"\\e912\"}.xnote-icon-table-delete-column-right:before{content:\"\\e913\"}.xnote-icon-table-delete-column-left:before{content:\"\\e914\"}.xnote-icon-table-add-row-top:before{content:\"\\e915\"}.xnote-icon-table-add-row-bottom:before{content:\"\\e916\"}.xnote-icon-table-add-column-right:before{content:\"\\e917\"}.xnote-icon-table-add-column-left:before{content:\"\\e918\"}.xnote-icon-image:before{content:\"\\e919\"}.xnote-icon-text-indent:before{content:\"\\e91a\"}.xnote-icon-music:before{content:\"\\e91b\"}.xnote-icon-video:before{content:\"\\e91c\"}.xnote-icon-unlink:before{content:\"\\e91d\"}.xnote-icon-select:before{content:\"\\e91e\"}.xnote-icon-tree:before{content:\"\\e91f\"}.xnote-icon-setting:before{content:\"\\e920\"}.xnote-icon-copy:before{content:\"\\e92c\"}.xnote-icon-paste:before{content:\"\\e92d\"}.xnote-icon-pushpin:before{content:\"\\e946\"}.xnote-icon-upload:before{content:\"\\e961\"}.xnote-icon-history-back:before{content:\"\\e967\"}.xnote-icon-history-forward:before{content:\"\\e968\"}.xnote-icon-quotes-right:before{content:\"\\e978\"}.xnote-icon-loading:before{content:\"\\e97f\"}.xnote-icon-search:before{content:\"\\e986\"}.xnote-icon-enlarge:before{content:\"\\e989\"}.xnote-icon-shrink:before{content:\"\\e98a\"}.xnote-icon-bin:before{content:\"\\e9ac\"}.xnote-icon-list-numbered:before{content:\"\\e9b9\"}.xnote-icon-list:before{content:\"\\e9bb\"}.xnote-icon-link:before{content:\"\\e9cb\"}.xnote-icon-emoji:before{content:\"\\e9e2\"}.xnote-icon-plus:before{content:\"\\ea0a\"}.xnote-icon-command:before{content:\"\\ea4e\"}.xnote-icon-shift:before{content:\"\\ea4f\"}.xnote-icon-ctrl:before{content:\"\\ea50\"}.xnote-icon-opt:before{content:\"\\ea51\"}.xnote-icon-cut:before{content:\"\\ea5a\"}.xnote-icon-line-height:before{content:\"\\ea5f\"}.xnote-icon-letter-spacing:before{content:\"\\ea60\"}.xnote-icon-font-size:before{content:\"\\ea61\"}.xnote-icon-bold:before{content:\"\\ea62\"}.xnote-icon-underline:before{content:\"\\ea63\"}.xnote-icon-italic:before{content:\"\\ea64\"}.xnote-icon-strikethrough:before{content:\"\\ea65\"}.xnote-icon-superscript:before{content:\"\\ea69\"}.xnote-icon-subscript:before{content:\"\\ea6a\"}.xnote-icon-clear-formatting:before{content:\"\\ea6f\"}.xnote-icon-table:before{content:\"\\ea71\"}.xnote-icon-ltr:before{content:\"\\ea74\"}.xnote-icon-rtl:before{content:\"\\ea75\"}.xnote-icon-code:before{content:\"\\ea80\"}.xnote-icon-terminal:before{content:\"\\ea81\"}.xnote-icon-bullhorn:before{content:\"\\e923\"}.xnote-icon-price-tag:before{content:\"\\e935\"}.xnote-icon-pushpin1:before{content:\"\\e947\"}.xnote-icon-warning:before{content:\"\\ea07\"}.xnote-icon-notification:before{content:\"\\ea08\"}.xnote-icon-question:before{content:\"\\ea09\"}.xnote-icon-info:before{content:\"\\ea0c\"}.xnote-icon-cancel-circle:before{content:\"\\ea0d\"}.xnote-icon-blocked:before{content:\"\\ea0e\"}.xnote-icon-checkbox-checked:before{content:\"\\ea52\"}.xnote-icon-checkbox-unchecked:before{content:\"\\ea53\"}.xnote-icon-pilcrow:before{content:\"\\ea73\"}.xnote-icon-paragraph-left:before{content:\"\\ea77\"}.xnote-icon-paragraph-center:before{content:\"\\ea78\"}.xnote-icon-paragraph-right:before{content:\"\\ea79\"}.xnote-icon-paragraph-justify:before{content:\"\\ea7a\"}.xnote-icon-indent-increase:before{content:\"\\ea7b\"}.xnote-icon-indent-decrease:before{content:\"\\ea7c\"}";
-styleInject(css_248z$1);
-
-var css_248z = ".xnote-h1{font-size:2.2em;font-weight:600}.xnote-h2{font-size:1.8em;font-weight:600}.xnote-h3{font-size:1.4em;font-weight:600}.xnote-h4{font-size:1em;font-weight:600}.xnote-h5{font-size:.9em;font-weight:600}.xnote-h6{font-size:.8em;font-weight:600}.xnote-code{border:1px solid rgba(0,0,0,.2);border-radius:4px;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;margin:0 3px;padding:2px 3px}";
-styleInject(css_248z);
-
-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,
@@ -5139,8 +4752,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
                 }]);
@@ -5151,6 +4764,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;
@@ -5190,6 +4832,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,
@@ -5254,8 +4897,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);
+            }
+        };
     });
 }