@textbus/xnote 0.3.2 → 0.3.4

package/bundles/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, Context, watch } from '@viewfly/core';
-import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, getCurrentInstance, createRef, InjectionToken, withAnnotation, onUpdated, onMounted, onPropsChanged, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, Fragment as Fragment$1, Context, watch } from '@viewfly/core';
+import { Subject, fromEvent, Selection, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, createVNode, merge, Slot, Component, Registry, Query, QueryStateType, Formatter, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, onParentSlotUpdated, Textbus, History, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, delay, tap, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
 import { normalizeHex, hex2Hsl, hex2Rgb, hex2Hsv, hsl2Hex, hsl2Hsv, hsl2Rgb, rgb2Hsl, rgb2Hex, rgb2Hsv, hsv2Hex, hsv2Hsl, hsv2Rgb, any2Hsl, parseCss } from '@tanbo/color';
 import { VIEW_CONTAINER, isMac, DomAdapter, Input, BrowserModule, SelectionBridge, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, CollaborateCursor, Parser } from '@textbus/platform-browser';
 import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
@@ -61,7 +61,18 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 let DropdownService = class DropdownService {
     constructor() {
-        this.siblingOpenEvent = new Subject();
+        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 Subject()
+        });
         this.onSiblingOpen = this.siblingOpenEvent.asObservable();
     }
     notify(id) {
@@ -79,14 +90,60 @@ var DropdownContextService_1;
 let i = 0;
 let DropdownContextService = DropdownContextService_1 = class DropdownContextService {
     constructor(dropdownService, injector) {
-        this.dropdownService = dropdownService;
-        this.injector = injector;
-        this.id = i;
-        this.isOpen = false;
-        this.canHide = true;
-        this.openStateChangeEvent = new Subject();
-        this.timer = null;
-        this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, InjectFlags.SkipSelf);
+        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 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, null, InjectFlags.SkipSelf)
+        });
         this.onOpenStateChange = this.openStateChangeEvent.asObservable();
         dropdownService.onSiblingOpen.subscribe(id => {
             if (id === this.id) {
@@ -258,14 +315,54 @@ class Picker {
         return this.empty ? null : this._hsv;
     }
     constructor(onChange, value) {
-        this.onChange = onChange;
-        this._hex = '';
-        this._hsl = null;
-        this._rgb = null;
-        this._hsv = null;
-        this._rgba = null;
-        this.empty = false;
-        this.resetAlpha = true;
+        Object.defineProperty(this, "onChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: onChange
+        });
+        Object.defineProperty(this, "_hex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "_hsl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_rgb", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_hsv", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_rgba", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "empty", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "resetAlpha", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
         this.hex = value || '#f00';
     }
 }
@@ -940,7 +1037,12 @@ var scopedId$e = "vf-2a8a65";
 
 let RefreshService = class RefreshService {
     constructor() {
-        this.onRefresh = new Subject();
+        Object.defineProperty(this, "onRefresh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
     }
 };
 RefreshService = __decorate([
@@ -1085,9 +1187,18 @@ function SlotRender(props) {
     const adapter = inject(DomAdapter);
     const instance = getCurrentInstance();
     const slot = props.slot;
-    const sub = merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
-        if (props.slot.__changeMarker__.dirty) {
-            instance.markAsDirtied();
+    function listen(slot) {
+        return merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
+            if (props.slot.__changeMarker__.dirty) {
+                instance.markAsDirtied();
+            }
+        });
+    }
+    let sub = listen(slot);
+    onPropsChanged((currentProps, oldProps) => {
+        if (oldProps.slot !== currentProps.slot) {
+            sub.unsubscribe();
+            sub = listen(currentProps.slot);
         }
     });
     onUnmounted(() => {
@@ -1122,31 +1233,46 @@ class BlockquoteComponent extends Component {
         useBlockContent(this.state.slot);
     }
 }
-BlockquoteComponent.type = ContentType.BlockComponent;
-BlockquoteComponent.componentName = 'BlockquoteComponent';
-BlockquoteComponent.zenCoding = {
-    key: ' ',
-    match(content, textbus) {
-        const selection = textbus.get(Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            return /^>$/.test(content);
-        }
-        return false;
-    },
-    createState(_, textbus) {
-        const selection = textbus.get(Selection);
-        const commonAncestorSlot = selection.commonAncestorSlot;
-        const slot = new Slot([
-            ContentType.BlockComponent
-        ]);
-        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
-            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+Object.defineProperty(BlockquoteComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 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(content, textbus) {
+            const selection = textbus.get(Selection);
+            if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+                return /^>$/.test(content);
+            }
+            return false;
+        },
+        createState(_, textbus) {
+            const selection = textbus.get(Selection);
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const slot = new Slot([
+                ContentType.BlockComponent
+            ]);
+            if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+                slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+            }
+            return {
+                slot
+            };
         }
-        return {
-            slot
-        };
     }
-};
+});
 function toBlockquote(textbus) {
     const query = textbus.get(Query);
     const commander = textbus.get(Commander);
@@ -1248,9 +1374,24 @@ class HighlightBoxComponent extends Component {
         useBlockContent(this.state.slot);
     }
 }
-HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
-HighlightBoxComponent.componentName = 'HighlightBoxComponent';
-HighlightBoxComponent.type = ContentType.BlockComponent;
+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: ContentType.BlockComponent
+});
 function HighlightBoxView(props) {
     const readonly = useReadonly();
     const output = useOutput();
@@ -1431,8 +1572,18 @@ class TimelineComponent extends Component {
         return false;
     }
 }
-TimelineComponent.componentName = 'TimelineComponent';
-TimelineComponent.type = ContentType.BlockComponent;
+Object.defineProperty(TimelineComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'TimelineComponent'
+});
+Object.defineProperty(TimelineComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
 
 function createStepItem(textbus) {
     const slot = new Slot([
@@ -1476,8 +1627,18 @@ class StepComponent extends Component {
         return false;
     }
 }
-StepComponent.componentName = 'StepComponent';
-StepComponent.type = ContentType.BlockComponent;
+Object.defineProperty(StepComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'StepComponent'
+});
+Object.defineProperty(StepComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
 
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
@@ -1523,8 +1684,18 @@ class ParagraphComponent extends Component {
         });
     }
 }
-ParagraphComponent.componentName = 'ParagraphComponent';
-ParagraphComponent.type = ContentType.BlockComponent;
+Object.defineProperty(ParagraphComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'ParagraphComponent'
+});
+Object.defineProperty(ParagraphComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
 function ParagraphView(props) {
     const readonly = useReadonly();
     const output = useOutput();
@@ -1708,27 +1879,42 @@ function createCodeSlot() {
 class SourceCodeComponent extends Component {
     constructor() {
         super(...arguments);
-        this.focus = new BehaviorSubject(false);
-        this.cancelEmphasize = () => {
-            const selection = this.textbus.get(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, "focus", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new BehaviorSubject(false)
+        });
+        Object.defineProperty(this, "cancelEmphasize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const selection = this.textbus.get(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.emphasize = () => {
-            const selection = this.textbus.get(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;
+        });
+        Object.defineProperty(this, "emphasize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const selection = this.textbus.get(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(Registry);
@@ -1918,56 +2104,71 @@ class SourceCodeComponent extends Component {
         return false;
     }
 }
-SourceCodeComponent.type = ContentType.BlockComponent;
-SourceCodeComponent.componentName = 'SourceCodeComponent';
-SourceCodeComponent.zenCoding = {
-    key: ['Enter', ' '],
-    match(c, textbus) {
-        const selection = textbus.get(Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
-            const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
-            return reg.test(c);
-        }
-        return false;
-    },
-    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)) {
+Object.defineProperty(SourceCodeComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 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, textbus) {
+            const selection = textbus.get(Selection);
+            if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+                const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
+                const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
+                return reg.test(c);
+            }
+            return false;
+        },
+        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: item.value,
+                    lang: 'JavaScript',
+                    theme: '',
+                    lineNumber: true,
+                    slots: [createCodeSlot()]
+                };
+            }
+            if (/^ts$/i.test(matchString)) {
+                return {
+                    lang: 'TypeScript',
                     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: 'TypeScript',
+                lang: '',
                 theme: '',
                 lineNumber: true,
                 slots: [createCodeSlot()]
             };
         }
-        return {
-            lang: '',
-            theme: '',
-            lineNumber: true,
-            slots: [createCodeSlot()]
-        };
     }
-};
+});
 function SourceCodeView(props) {
     const adapter = inject(DomAdapter);
     const isFocus = createSignal(false);
@@ -2245,8 +2446,18 @@ class ImageComponent extends Component {
         return [];
     }
 }
-ImageComponent.type = ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
+Object.defineProperty(ImageComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
+Object.defineProperty(ImageComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'ImageComponent'
+});
 function ImageView(props) {
     const { name, state } = props.component;
     const imageRef = createRef();
@@ -2287,8 +2498,18 @@ class VideoComponent extends Component {
         return [];
     }
 }
-VideoComponent.type = ContentType.InlineComponent;
-VideoComponent.componentName = 'VideoComponent';
+Object.defineProperty(VideoComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
+Object.defineProperty(VideoComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'VideoComponent'
+});
 function VideoView(props) {
     const { name, state } = props.component;
     const videoRef = createRef();
@@ -2323,8 +2544,30 @@ const videoComponentLoader = {
 
 let ToolService = class ToolService {
     constructor(selection, controller) {
-        this.selection = selection;
-        this.controller = controller;
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selection
+        });
+        Object.defineProperty(this, "controller", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: controller
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "sub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         const [state, updateState] = useProduce({
             inSourceCode: false,
             readonly: controller.readonly,
@@ -2471,10 +2714,30 @@ function AttrTool(props) {
 
 class Rectangle {
     constructor(x1, y1, x2, y2) {
-        this.x1 = x1;
-        this.y1 = y1;
-        this.x2 = x2;
-        this.y2 = y2;
+        Object.defineProperty(this, "x1", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: x1
+        });
+        Object.defineProperty(this, "y1", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: y1
+        });
+        Object.defineProperty(this, "x2", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: x2
+        });
+        Object.defineProperty(this, "y2", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: y2
+        });
     }
     intersects(other) {
         return this.x1 < other.x2 && this.x2 > other.x1 && this.y1 < other.y2 && this.y2 > other.y1;
@@ -2595,12 +2858,42 @@ class TableComponent extends Component {
         })
     }) {
         super(textbus, state);
-        this.selection = this.textbus.get(Selection);
-        this.commander = this.textbus.get(Commander);
-        this.focus = new Subject();
-        this.tableSelection = createSignal(null);
-        this.ignoreSelectionChanges = false;
-        this.normalizedData = [];
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.textbus.get(Selection)
+        });
+        Object.defineProperty(this, "commander", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.textbus.get(Commander)
+        });
+        Object.defineProperty(this, "focus", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "tableSelection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createSignal(null)
+        });
+        Object.defineProperty(this, "ignoreSelectionChanges", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "normalizedData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
     }
     getSlots() {
         return this.normalizedData.map(item => {
@@ -3012,8 +3305,18 @@ class TableComponent extends Component {
         });
     }
 }
-TableComponent.componentName = 'TableComponent';
-TableComponent.type = ContentType.BlockComponent;
+Object.defineProperty(TableComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'TableComponent'
+});
+Object.defineProperty(TableComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
 
 const strikeThroughFormatter = new Formatter('strike', {
     columned: true,
@@ -3122,34 +3425,49 @@ class TodolistComponent extends Component {
         });
     }
 }
-TodolistComponent.type = ContentType.BlockComponent;
-TodolistComponent.componentName = 'TodoListComponent';
-TodolistComponent.zenCoding = {
-    match(content, textbus) {
-        const selection = textbus.get(Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            return /^\[(x|\s)?\]$/.test(content);
-        }
-        return false;
-    },
-    key: ' ',
-    createState(content, textbus) {
-        const selection = textbus.get(Selection);
-        const commonAncestorSlot = selection.commonAncestorSlot;
-        const slot = new Slot([
-            ContentType.InlineComponent,
-            ContentType.Text
-        ]);
-        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
-            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+Object.defineProperty(TodolistComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 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(content, textbus) {
+            const selection = textbus.get(Selection);
+            if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+                return /^\[(x|\s)?\]$/.test(content);
+            }
+            return false;
+        },
+        key: ' ',
+        createState(content, textbus) {
+            const selection = textbus.get(Selection);
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const slot = new Slot([
+                ContentType.InlineComponent,
+                ContentType.Text
+            ]);
+            if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+                slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+            }
+            const isChecked = content.charAt(1) === 'x';
+            return {
+                checked: isChecked,
+                slot
+            };
         }
-        const isChecked = content.charAt(1) === 'x';
-        return {
-            checked: isChecked,
-            slot
-        };
     }
-};
+});
 function TodolistView(props) {
     const component = props.component;
     const state = component.state;
@@ -3336,34 +3654,49 @@ class ListComponent extends Component {
         });
     }
 }
-ListComponent.componentName = 'ListComponent';
-ListComponent.type = ContentType.BlockComponent;
-ListComponent.zenCoding = {
-    key: ' ',
-    match(content, textbus) {
-        const selection = textbus.get(Selection);
-        if (selection.commonAncestorComponent instanceof ParagraphComponent) {
-            return /^([1-9]\.|[+*-])$/.test(content);
-        }
-        return false;
-    },
-    createState(content, textbus) {
-        const selection = textbus.get(Selection);
-        const commonAncestorSlot = selection.commonAncestorSlot;
-        const slot = new Slot([
-            ContentType.InlineComponent,
-            ContentType.Text
-        ]);
-        if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
-            slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+Object.defineProperty(ListComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'ListComponent'
+});
+Object.defineProperty(ListComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
+Object.defineProperty(ListComponent, "zenCoding", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        key: ' ',
+        match(content, textbus) {
+            const selection = textbus.get(Selection);
+            if (selection.commonAncestorComponent instanceof ParagraphComponent) {
+                return /^([1-9]\.|[+*-])$/.test(content);
+            }
+            return false;
+        },
+        createState(content, textbus) {
+            const selection = textbus.get(Selection);
+            const commonAncestorSlot = selection.commonAncestorSlot;
+            const slot = new Slot([
+                ContentType.InlineComponent,
+                ContentType.Text
+            ]);
+            if (commonAncestorSlot === null || commonAncestorSlot === void 0 ? void 0 : commonAncestorSlot.hasAttribute(textIndentAttr)) {
+                slot.setAttribute(textIndentAttr, commonAncestorSlot.getAttribute(textIndentAttr));
+            }
+            return {
+                type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
+                reorder: true,
+                slot
+            };
         }
-        return {
-            type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
-            reorder: true,
-            slot
-        };
     }
-};
+});
 const step = 26;
 const chars = Array.from({ length: step }).map((_, index) => String.fromCharCode(96 + index + 1));
 function numberToLetter(num) {
@@ -4342,7 +4675,18 @@ class KatexEditor extends Textbus {
             ],
             imports: [browserModule]
         });
-        this.onValueChange = new Subject();
+        Object.defineProperty(this, "host", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onValueChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
     }
     mount(host, code) {
         this.host = host;
@@ -4389,8 +4733,18 @@ class KatexComponent extends Component {
         return [];
     }
 }
-KatexComponent.componentName = 'KatexComponent';
-KatexComponent.type = ContentType.InlineComponent;
+Object.defineProperty(KatexComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'KatexComponent'
+});
+Object.defineProperty(KatexComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
 function domToVDom(el) {
     const attrs = {};
     el.getAttributeNames().forEach(key => {
@@ -4679,9 +5033,24 @@ var scopedId$c = "vf-e74208";
 
 let EditorService = class EditorService {
     constructor() {
-        this.hideInlineToolbar = false;
-        this.canShowLeftToolbar = true;
-        this.onLeftToolbarCanVisibleChange = new Subject();
+        Object.defineProperty(this, "hideInlineToolbar", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "canShowLeftToolbar", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "onLeftToolbarCanVisibleChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
     }
     changeLeftToolbarVisible(b) {
         this.canShowLeftToolbar = b;
@@ -5556,7 +5925,12 @@ const LeftToolbar = withAnnotation({
 
 class LeftToolbarPlugin {
     constructor() {
-        this.app = null;
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
     }
     setup(injector) {
         const App = function () {
@@ -5832,8 +6206,18 @@ const InlineToolbar = withAnnotation({
 
 class InlineToolbarPlugin {
     constructor(config = {}) {
-        this.config = config;
-        this.app = null;
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: config
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
     }
     setup(injector) {
         const App = () => {
@@ -5880,9 +6264,24 @@ const StaticToolbar = withAnnotation({
 
 class StaticToolbarPlugin {
     constructor(options) {
-        this.options = options;
-        this.app = null;
-        this.container = null;
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
     }
     setup(injector) {
         const container = document.createElement('div');
@@ -5962,9 +6361,24 @@ const SuspensionToolbar = withAnnotation({
 
 class SuspensionToolbarPlugin {
     constructor(options = {}) {
-        this.options = options;
-        this.app = null;
-        this.container = null;
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
     }
     setup(injector) {
         const host = injector.get(VIEW_CONTAINER);
@@ -5985,10 +6399,30 @@ class SuspensionToolbarPlugin {
 
 class Matcher {
     constructor(target, rule) {
-        this.target = target;
-        this.rule = rule;
-        this.validators = [];
-        this.excludeValidators = [];
+        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: []
+        });
         if (rule.tags) {
             this.validators.push(this.makeTagsMatcher(rule.tags));
         }
@@ -6129,11 +6563,36 @@ class AtComponent extends Component {
             state.slot = new Slot([ContentType.Text]);
         }
         super(textbus, state);
-        this.focus = new Subject();
-        this.members = createSignal([]);
-        this.selectedIndex = createSignal(0);
-        this.selection = this.textbus.get(Selection);
-        this.organization = this.textbus.get(Organization);
+        Object.defineProperty(this, "focus", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "members", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createSignal([])
+        });
+        Object.defineProperty(this, "selectedIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createSignal(0)
+        });
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.textbus.get(Selection)
+        });
+        Object.defineProperty(this, "organization", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.textbus.get(Organization)
+        });
     }
     getSlots() {
         if (this.state.userInfo) {
@@ -6231,8 +6690,18 @@ class AtComponent extends Component {
         this.selection.selectComponentEnd(this);
     }
 }
-AtComponent.componentName = 'AtComponent';
-AtComponent.type = ContentType.InlineComponent;
+Object.defineProperty(AtComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'AtComponent'
+});
+Object.defineProperty(AtComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.InlineComponent
+});
 
 function AtComponentView(props) {
     const dropdownRef = createRef();
@@ -6313,7 +6782,12 @@ const atComponentLoader = {
 class RootComponent extends Component {
     constructor() {
         super(...arguments);
-        this.onCompositionStart = new Subject();
+        Object.defineProperty(this, "onCompositionStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
     }
     static fromJSON(textbus, json) {
         const content = textbus.get(Registry).createSlot(json.content);
@@ -6351,8 +6825,18 @@ class RootComponent extends Component {
         selection.setPosition(newParagraph.state.slot, 0);
     }
 }
-RootComponent.componentName = 'RootComponent';
-RootComponent.type = ContentType.BlockComponent;
+Object.defineProperty(RootComponent, "componentName", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: 'RootComponent'
+});
+Object.defineProperty(RootComponent, "type", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ContentType.BlockComponent
+});
 function RootView(props) {
     const ref = createDynamicRef(node => {
         const sub = props.component.onCompositionStart.subscribe(() => {
@@ -6405,11 +6889,26 @@ var scopedId$5 = "vf-681de2";
 
 let TableService = class TableService {
     constructor() {
-        this.onInsertRowBefore = new Subject();
-        this.onInsertColumnBefore = new Subject();
+        Object.defineProperty(this, "onInsertRowBefore", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "onInsertColumnBefore", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
         // onSelectColumns = new Subject<{ start: number, end: number } | null>()
         // onSelectRows = new Subject<{ start: number, end: number } | null>()
-        this.onScroll = new Subject();
+        Object.defineProperty(this, "onScroll", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
     }
 };
 TableService = __decorate([
@@ -7028,7 +7527,9 @@ const TableComponentView = withAnnotation({
             rowMapping.set(row.row, Math.random());
         });
         if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsx("div", { class: "xnote-table-container", children: jsxs("table", { class: [
+            return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsx("div", { class: "xnote-table-container", style: {
+                            overflow: 'auto'
+                        }, children: jsxs("table", { class: [
                                 'xnote-table-content',
                                 {
                                     'hide-selection': props.component.tableSelection()
@@ -7082,6 +7583,9 @@ const tableComponentLoader = {
         let content = element;
         if (element.tagName === 'DIV') {
             content = element.querySelector('.xnote-table-content');
+            if (!content) {
+                return;
+            }
         }
         const { tHead, tBodies, tFoot } = content;
         const headers = [];
@@ -7189,8 +7693,18 @@ function findFocusCell(table, slot) {
 let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate extends CollaborateSelectionAwarenessDelegate {
     constructor(domAdapter, selection) {
         super();
-        this.domAdapter = domAdapter;
-        this.selection = selection;
+        Object.defineProperty(this, "domAdapter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: domAdapter
+        });
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selection
+        });
     }
     getRects(abstractSelection, _, data) {
         const { focusSlot, anchorSlot } = abstractSelection;
@@ -7349,10 +7863,36 @@ const stepComponentLoader = {
 class XNoteMessageBus extends MessageBus {
     constructor(selection, collaborateCursor, userinfo) {
         super();
-        this.selection = selection;
-        this.collaborateCursor = collaborateCursor;
-        this.userinfo = userinfo;
-        this.messageChangeEvent = new Subject();
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selection
+        });
+        Object.defineProperty(this, "collaborateCursor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: collaborateCursor
+        });
+        Object.defineProperty(this, "userinfo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: userinfo
+        });
+        Object.defineProperty(this, "onMessageChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "messageChangeEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
         this.onMessageChange = this.messageChangeEvent.asObservable();
     }
     get() {
@@ -7553,8 +8093,30 @@ class Editor extends Textbus {
                 registerListShortcut(textbus);
                 registerBlockquoteShortcut(textbus);
             } }, editorConfig));
-        this.editorConfig = editorConfig;
-        this.translator = new OutputTranslator();
+        Object.defineProperty(this, "editorConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: editorConfig
+        });
+        Object.defineProperty(this, "translator", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new OutputTranslator()
+        });
+        Object.defineProperty(this, "host", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vDomAdapter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.vDomAdapter = vDomAdapter;
     }
     mount(host) {
@@ -7575,7 +8137,9 @@ class Editor extends Textbus {
         this.guardReady();
         const newModel = this.createModel(content);
         const rootComponent = this.get(RootComponentRef).component;
-        Object.assign(rootComponent.state, newModel.state);
+        const slot = newModel.state.content;
+        newModel.state.content = null;
+        rootComponent.state.content = slot;
     }
     getHTML() {
         return this.translator.transform(this.vDomAdapter.host);