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

package/bundles/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
 import { withScopedCSS } from '@viewfly/scoped-css';
-import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, onUpdated, getCurrentInstance, watch, ReflectiveInjector } from '@viewfly/core';
+import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, onUpdated, watch, ReflectiveInjector } from '@viewfly/core';
 import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, ContentType, Component, Registry, Slot, useContext, onBreak, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onContentInsert, onFocusIn, onFocusOut, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onCompositionStart } from '@textbus/core';
 import { VIEW_CONTAINER, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
 import { createPortal, DomRenderer, createApp, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
@@ -9,7 +9,7 @@ import highlightjs from 'highlight.js';
 import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
 import { CollaborateModule } from '@textbus/collaborate';
 
-var css$j = undefined;
+var scopedId$k = "vf-69b4db";
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -39,16 +39,6 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -140,7 +130,7 @@ function Button(props) {
             subscription.unsubscribe();
         });
     }
-    return withScopedCSS(css$j, () => {
+    return withScopedCSS(scopedId$k, () => {
         return (jsxs("button", Object.assign({ type: "button" }, props, { class: [
                 'btn',
                 {
@@ -152,10 +142,10 @@ function Button(props) {
     });
 }
 
-var css$i = undefined;
+var scopedId$j = "vf-ac7e8d";
 
 function ComponentToolbar(props) {
-    return withScopedCSS(css$i, () => {
+    return withScopedCSS(scopedId$j, () => {
         return (jsx("div", { class: "component-toolbar", style: props.style, children: jsx("div", { class: [
                     'toolbar',
                     {
@@ -165,15 +155,15 @@ function ComponentToolbar(props) {
     });
 }
 
-var css$h = undefined;
+var scopedId$i = "vf-ede279";
 
 function Divider() {
-    return withScopedCSS(css$h, () => {
+    return withScopedCSS(scopedId$i, () => {
         return jsx("div", { class: "divider" });
     });
 }
 
-var style = undefined;
+var scopedId$h = "vf-4c1803";
 
 function DragResize(props) {
     const isShow = createSignal(false);
@@ -281,16 +271,16 @@ function DragResize(props) {
             unUp.unsubscribe();
         });
     }
-    return withScopedCSS(style, () => {
+    return withScopedCSS(scopedId$h, () => {
         return (jsxs("div", { class: "drag-resize", onClick: selectComponent, children: [jsx("div", { class: "container", ref: ref, children: props.children }), jsxs("div", { class: ['resize-tool', {
                             active: isShow()
                         }], children: [jsxs("div", { class: "mask", ref: mask, children: [component.state.width, "*", component.state.height] }), jsxs("div", { class: "btn-group", ref: btnGroup, onMousedown: drag, children: [jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" }), jsx("button", { type: "button" })] })] })] }));
     });
 }
 
-var css$g = undefined;
+var scopedId$g = "vf-a99c5e";
 
-var css$f = undefined;
+var scopedId$f = "vf-41a617";
 
 const DropdownMenuPortal = withAnnotation({
     providers: [
@@ -373,7 +363,7 @@ const DropdownMenuPortal = withAnnotation({
         dropdownContextService.canHide = true;
         dropdownContextService.hide();
     }
-    return createPortal(withScopedCSS(css$f, () => {
+    return createPortal(withScopedCSS(scopedId$f, () => {
         return (jsx("div", { onMouseenter: onEnter, onMouseleave: onLeave, ref: menuRef, style: {
                 width: props.width
             }, class: "dropdown-menu", children: jsx("div", { class: "dropdown-menu-content", children: props.children }) }));
@@ -436,7 +426,7 @@ const Dropdown = withAnnotation({
                 dropdownContextService.open();
             }
         },
-        $render: withScopedCSS(css$g, () => {
+        $render: withScopedCSS(scopedId$g, () => {
             return (jsxs("div", { class: ['dropdown', props.class], style: props.style, ref: dropdownRef, children: [jsxs("div", { class: "dropdown-btn", ref: triggerRef, children: [jsx("div", { class: "dropdown-btn-inner", children: props.children }), jsx("div", { class: "dropdown-btn-arrow" })] }), isShow() && jsx(DropdownMenuPortal, { width: props.width, abreast: props.abreast, triggerRef: triggerRef, children: Array.isArray(props.menu) ?
                             props.menu.map(menu => {
                                 return (jsx("div", { class: "dropdown-menu-item", onClick: () => {
@@ -452,7 +442,7 @@ const Dropdown = withAnnotation({
     };
 });
 
-var css$e = undefined;
+var scopedId$e = "vf-64f71d";
 
 function MenuItem(props) {
     const dropdownContextService = inject(DropdownContextService, InjectFlags.Optional, null);
@@ -472,7 +462,7 @@ function MenuItem(props) {
         }
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
     }
-    return withScopedCSS(css$e, () => {
+    return withScopedCSS(scopedId$e, () => {
         return (jsxs("div", { class: ['menu-item', { disabled: props.disabled, active: props.arrow && isActive() }], onClick: click, children: [jsxs("div", { children: [props.icon && jsx("span", { class: "menu-icon", children: props.icon }), props.children] }), props.arrow ?
                     jsx("div", { class: "arrow", children: jsx("span", { class: "xnote-icon-arrow-right" }) }) :
                     jsx("div", { class: [
@@ -482,11 +472,11 @@ function MenuItem(props) {
     });
 }
 
-var css$d = undefined;
+var scopedId$d = "vf-a23c47";
 
 function Popup(props) {
     const host = inject(VIEW_CONTAINER);
-    return createPortal(withScopedCSS(css$d, () => {
+    return createPortal(withScopedCSS(scopedId$d, () => {
         return (jsx("div", { class: "popup", style: {
                 left: props.left + 'px',
                 top: props.top + 'px'
@@ -494,15 +484,15 @@ function Popup(props) {
     }), host);
 }
 
-var css$c = undefined;
+var scopedId$c = "vf-216815";
 
 function ToolbarItem(props) {
-    return withScopedCSS(css$c, () => {
+    return withScopedCSS(scopedId$c, () => {
         return (jsx("div", { class: "toolbar-item", children: props.children }));
     });
 }
 
-var css$b = undefined;
+var scopedId$b = "vf-2a8a65";
 
 let RefreshService = class RefreshService {
     constructor() {
@@ -558,6 +548,12 @@ function useReadonly() {
     return is;
 }
 
+const OutputInjectionToken = new InjectionToken('OutputInjectionToken');
+
+function useOutput() {
+    return createSignal(inject(OutputInjectionToken));
+}
+
 class ParagraphComponent extends Component {
     static fromJSON(textbus, json) {
         const slot = textbus.get(Registry).createSlot(json.slot);
@@ -593,11 +589,12 @@ ParagraphComponent.type = ContentType.BlockComponent;
 function ParagraphView(props) {
     const adapter = inject(DomAdapter);
     const readonly = useReadonly();
+    const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
         return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
                 return (createVNode('p', null, children));
-            }, readonly()) }));
+            }, readonly() || output()) }));
     };
 }
 const paragraphComponentLoader = {
@@ -605,11 +602,12 @@ const paragraphComponentLoader = {
         return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
     },
     read(element, textbus, slotParser) {
+        const content = /P|H[1-6]/.test(element.tagName) ? element : element.children[0];
         const delta = slotParser(new Slot([
             ContentType.Text,
             ContentType.InlineComponent,
             ContentType.BlockComponent
-        ]), /P|H[1-6]/.test(element.tagName) ? element : element.children[0]).toDelta();
+        ]), content).toDelta();
         const results = deltaToBlock(delta, textbus);
         if (results.length === 1) {
             return results[0];
@@ -650,12 +648,6 @@ function deltaToBlock(delta, textbus) {
     return results;
 }
 
-const OutputInjectionToken = new InjectionToken('OutputInjectionToken');
-
-function useOutput() {
-    return createSignal(inject(OutputInjectionToken));
-}
-
 const languageList = [{
         label: 'JavaScript',
         value: 'JavaScript',
@@ -1089,7 +1081,7 @@ function SourceCodeView(props) {
                 'xnote-source-code': true,
                 'xnote-source-code-line-number': state.lineNumber,
                 [state.theme || 'github']: true
-            }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [(!readonly() && !output()) && jsxs(ComponentToolbar, { visible: isFocus(), children: [jsx(ToolbarItem, { children: jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
+            }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak + '', "data-theme": state.theme || null, "data-line-number": state.lineNumber + '', children: [(!readonly() && !output()) && jsxs(ComponentToolbar, { visible: isFocus(), children: [jsx(ToolbarItem, { children: jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
                                     return {
                                         label: jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
                                         value: item.value
@@ -1147,7 +1139,7 @@ function SourceCodeView(props) {
 }
 const sourceCodeComponentLoader = {
     match(element) {
-        return element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName ||
+        return (element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
             element.tagName === 'PRE';
     },
     read(el, textbus) {
@@ -1176,8 +1168,8 @@ const sourceCodeComponentLoader = {
         return new SourceCodeComponent(textbus, {
             lang: el.dataset.lang || '',
             theme: el.dataset.theme || '',
-            lineNumber: !!el.dataset.lineNumber || true,
-            autoBreak: !!el.dataset.autoBreak || true,
+            lineNumber: el.dataset.lineNumber === 'true',
+            autoBreak: el.dataset.autoBreak === 'true',
             slots
         });
     },
@@ -1331,7 +1323,7 @@ function AttrTool(props) {
                 break;
         }
     }
-    return withScopedCSS(css$b, () => {
+    return withScopedCSS(scopedId$b, () => {
         const states = checkStates();
         return (jsx(Dropdown, { style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
@@ -1367,12 +1359,18 @@ const headingAttr = new Attribute('Heading', {
 });
 const headingAttrLoader = {
     match(element) {
-        return /H[1-6]/.test(element.tagName);
+        return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
     },
     read(element) {
+        if (/H[1-6]/.test(element.tagName)) {
+            return {
+                attribute: headingAttr,
+                value: element.tagName.toLowerCase()
+            };
+        }
         return {
             attribute: headingAttr,
-            value: element.tagName.toLowerCase()
+            value: element.className.substring(6)
         };
     }
 };
@@ -1635,7 +1633,7 @@ function registerStrikeThroughShortcut(textbus) {
 }
 const strikeThroughFormatLoader = {
     match(element) {
-        return /strike|del|s/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
+        return /^(strike|del|s)$/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
     },
     read() {
         return {
@@ -1753,7 +1751,7 @@ function TodolistView(props) {
                     return createVNode('div', {
                         class: 'xnote-todolist-content'
                     }, children);
-                }, readonly())] }));
+                }, readonly() || output())] }));
     };
 }
 const todolistComponentLoader = {
@@ -1810,11 +1808,12 @@ BlockquoteComponent.zenCoding = {
 function BlockquoteView(props) {
     const adapter = inject(DomAdapter);
     const readonly = useReadonly();
+    const output = useOutput();
     return () => {
         const slot = props.component.state.slot;
         return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
                 return createVNode('div', null, children);
-            }, readonly()) }));
+            }, readonly() || output()) }));
     };
 }
 const blockquoteComponentLoader = {
@@ -1921,6 +1920,25 @@ class ListComponent extends Component {
                 selection.setPosition(slot, 0);
             }
         });
+        useDynamicShortcut({
+            keymap: {
+                key: 'Tab'
+            },
+            action: () => {
+                updateAfterList(this);
+                return false;
+            }
+        });
+        useDynamicShortcut({
+            keymap: {
+                key: 'Tab',
+                shiftKey: true
+            },
+            action: () => {
+                Promise.resolve().then(() => updateAfterList(this));
+                return false;
+            }
+        });
     }
 }
 ListComponent.componentName = 'ListComponent';
@@ -2035,7 +2053,7 @@ function ListComponentView(props) {
                         return createVNode('div', {
                             class: 'xnote-list-content'
                         }, children);
-                    }, readonly())] }) }));
+                    }, readonly() || output())] }) }));
     };
 }
 const listComponentLoader = {
@@ -2175,7 +2193,7 @@ function HighlightBoxView(props) {
                         return createVNode('div', {
                             class: 'xnote-highlight-box-content'
                         }, children);
-                    }, readonly())] }));
+                    }, readonly() || output())] }));
         }
         return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
                                     return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
@@ -2186,7 +2204,7 @@ function HighlightBoxView(props) {
                     return createVNode('div', {
                         class: 'xnote-highlight-box-content'
                     }, children);
-                }, readonly())] }));
+                }, readonly() || output())] }));
     };
 }
 const highlightBoxComponentLoader = {
@@ -2234,17 +2252,16 @@ function useBlockTransform() {
                 commander.unApplyAttribute(headingAttr);
                 commander.transform({
                     targetType: ParagraphComponent.type,
-                    multipleSlot: false,
                     slotFactory() {
                         return new Slot([
                             ContentType.InlineComponent,
                             ContentType.Text
                         ]);
                     },
-                    stateFactory(slot) {
-                        return new ParagraphComponent(textbus, {
+                    stateFactory(slots) {
+                        return slots.map(slot => new ParagraphComponent(textbus, {
                             slot
-                        });
+                        }));
                     }
                 });
                 break;
@@ -2263,17 +2280,18 @@ function useBlockTransform() {
                 commander.unApplyAttribute(headingAttr);
                 commander.transform({
                     targetType: TodolistComponent.type,
-                    multipleSlot: false,
                     slotFactory() {
                         return new Slot([
                             ContentType.InlineComponent,
                             ContentType.Text
                         ]);
                     },
-                    stateFactory(slot) {
-                        return new TodolistComponent(textbus, {
-                            checked: false,
-                            slot
+                    stateFactory(slots) {
+                        return slots.map(slot => {
+                            return new TodolistComponent(textbus, {
+                                checked: false,
+                                slot
+                            });
                         });
                     }
                 });
@@ -2283,18 +2301,19 @@ function useBlockTransform() {
                 {
                     commander.transform({
                         targetType: ListComponent.type,
-                        multipleSlot: false,
                         slotFactory() {
                             return new Slot([
                                 ContentType.InlineComponent,
                                 ContentType.Text
                             ]);
                         },
-                        stateFactory(slot) {
-                            return new ListComponent(textbus, {
-                                type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
-                                reorder: true,
-                                slot
+                        stateFactory(slots) {
+                            return slots.map((slot, index) => {
+                                return new ListComponent(textbus, {
+                                    type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
+                                    reorder: index === 0,
+                                    slot
+                                });
                             });
                         }
                     });
@@ -2342,16 +2361,17 @@ function useBlockTransform() {
                     if (state.state === QueryStateType.Enabled) {
                         commander.transform({
                             targetType: ParagraphComponent.type,
-                            multipleSlot: false,
                             slotFactory() {
                                 return new Slot([
                                     ContentType.InlineComponent,
                                     ContentType.Text
                                 ]);
                             },
-                            stateFactory(slot) {
-                                return new ParagraphComponent(textbus, {
-                                    slot
+                            stateFactory(slots) {
+                                return slots.map(slot => {
+                                    return new ParagraphComponent(textbus, {
+                                        slot
+                                    });
                                 });
                             }
                         });
@@ -2359,24 +2379,23 @@ function useBlockTransform() {
                     else {
                         commander.transform({
                             targetType: SourceCodeComponent.type,
-                            multipleSlot: true,
                             slotFactory() {
                                 return new Slot([
                                     ContentType.Text
                                 ]);
                             },
                             stateFactory(slots) {
-                                return new SourceCodeComponent(textbus, {
-                                    lang: '',
-                                    lineNumber: true,
-                                    autoBreak: true,
-                                    slots: slots.map(slot => {
-                                        return {
-                                            slot,
-                                            emphasize: false
-                                        };
-                                    })
-                                });
+                                return [new SourceCodeComponent(textbus, {
+                                        lang: '',
+                                        lineNumber: true,
+                                        autoBreak: true,
+                                        slots: slots.map(slot => {
+                                            return {
+                                                slot,
+                                                emphasize: false
+                                            };
+                                        })
+                                    })];
                             }
                         });
                     }
@@ -2425,7 +2444,7 @@ function useBlockTransform() {
 function BlockTool() {
     const checkStates = useActiveBlock();
     const transform = useBlockTransform();
-    return withScopedCSS(css$b, () => {
+    return withScopedCSS(scopedId$b, () => {
         const states = checkStates();
         const types = [
             [states.paragraph, 'xnote-icon-pilcrow'],
@@ -2856,7 +2875,7 @@ function CodeTool() {
     };
 }
 
-var css$a = undefined;
+var scopedId$a = "vf-1fbbdf";
 
 function ColorTool(props) {
     const query = inject(Query);
@@ -2891,6 +2910,7 @@ function ColorTool(props) {
         '#ffdf14',
         '#5eec75',
         '#5dfaff',
+        '#1296db',
         '#617fff',
         '#c459ff',
     ];
@@ -2904,7 +2924,7 @@ function ColorTool(props) {
         '#90a0e5',
         '#c596e0',
     ];
-    return withScopedCSS(css$a, () => {
+    return withScopedCSS(scopedId$a, () => {
         const vm = viewModel();
         return (jsx(Dropdown, { style: props.style, abreast: props.abreast, trigger: 'hover', menu: jsxs("div", { children: [jsx("div", { class: "color-type", children: "\u6587\u5B57\u989C\u8272" }), jsxs("div", { class: "text-colors", children: [jsx("div", { class: {
                                     active: textColor() === ''
@@ -3112,7 +3132,7 @@ function ItalicTool() {
     };
 }
 
-var css$9 = undefined;
+var scopedId$9 = "vf-269a0b";
 
 function LinkTool(props) {
     const selectionBridge = inject(SelectionBridge);
@@ -3143,7 +3163,7 @@ function LinkTool(props) {
     onUnmounted(() => {
         sub.unsubscribe();
     });
-    return withScopedCSS(css$9, () => {
+    return withScopedCSS(scopedId$9, () => {
         const containerRect = container.getBoundingClientRect();
         const rect = isShow() ? selectionBridge.getRect({
             slot: selection.focusSlot,
@@ -3212,12 +3232,93 @@ function UnderlineTool() {
     };
 }
 
-var css$8 = undefined;
+var scopedId$8 = "vf-cf8e1c";
+
+class FileUploader {
+}
+
+class ImageComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new ImageComponent(textbus, Object.assign({}, json));
+    }
+}
+ImageComponent.type = ContentType.InlineComponent;
+ImageComponent.componentName = 'ImageComponent';
+function ImageView(props) {
+    const { name, state } = props.component;
+    const imageRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const imageComponentLoader = {
+    match(element) {
+        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
+    },
+    read(element, textbus) {
+        var _a;
+        return new ImageComponent(textbus, {
+            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
+        });
+    }
+};
+
+class VideoComponent extends Component {
+    static fromJSON(textbus, json) {
+        return new VideoComponent(textbus, Object.assign({}, json));
+    }
+    setup() {
+        //
+    }
+}
+VideoComponent.type = ContentType.InlineComponent;
+VideoComponent.componentName = 'VideoComponent';
+function VideoView(props) {
+    const { name, state } = props.component;
+    const videoRef = createRef();
+    const readonly = useReadonly();
+    const output = useOutput();
+    return () => {
+        if (readonly() || output()) {
+            return (jsx("div", { class: "xnote-video", "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }));
+        }
+        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
+                        width: state.width,
+                        height: state.height
+                    } }) }) }));
+    };
+}
+const videoComponentLoader = {
+    match(element) {
+        return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
+    },
+    read(element, textbus) {
+        var _a;
+        return new VideoComponent(textbus, {
+            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
+        });
+    }
+};
 
 function InsertTool(props) {
     const commander = inject(Commander);
     const selection = inject(Selection);
     const textbus = inject(Textbus);
+    const fileUploader = inject(FileUploader, InjectFlags.Optional, null);
     function insert(type) {
         var _a;
         const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
@@ -3310,8 +3411,24 @@ function InsertTool(props) {
                 }
                 break;
             case 'image':
+                if (fileUploader) {
+                    Promise.resolve(fileUploader.uploadFile('image')).then(url => {
+                        const img = new ImageComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
                 break;
             case 'video':
+                if (fileUploader) {
+                    Promise.resolve(fileUploader.uploadFile('video')).then(url => {
+                        const img = new VideoComponent(textbus, {
+                            src: url
+                        });
+                        commander.insert(img);
+                    });
+                }
                 break;
             case 'highlightBox':
                 {
@@ -3324,12 +3441,12 @@ function InsertTool(props) {
                 break;
         }
     }
-    return withScopedCSS(css$8, () => {
+    return withScopedCSS(scopedId$8, () => {
         return jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, onClick: () => insert('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h5'), children: jsx("span", { class: "xnote-icon-heading-h5" }) }), jsx(Button, { ordinary: true, onClick: () => insert('h6'), children: jsx("span", { class: "xnote-icon-heading-h6" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, onClick: () => insert('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, onClick: () => insert('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(MenuItem, { onClick: () => insert('table'), icon: jsx("span", { class: "xnote-icon-table" }), children: "\u8868\u683C" }), jsx(MenuItem, { onClick: () => insert('todolist'), icon: jsx("span", { class: "xnote-icon-checkbox-checked" }), children: "\u5F85\u529E\u5217\u8868" }), jsx(MenuItem, { onClick: () => insert('image'), icon: jsx("span", { class: "xnote-icon-image" }), children: "\u56FE\u7247" }), jsx(MenuItem, { onClick: () => insert('video'), icon: jsx("span", { class: "xnote-icon-video" }), children: "\u89C6\u9891" }), jsx(MenuItem, { onClick: () => insert('highlightBox'), icon: jsx("span", { class: "xnote-icon-warning" }), children: "\u9AD8\u4EAE\u5757" })] });
     });
 }
 
-var css$7 = undefined;
+var scopedId$7 = "vf-b05292";
 
 const LeftToolbar = withAnnotation({
     providers: [RefreshService]
@@ -3492,7 +3609,7 @@ const LeftToolbar = withAnnotation({
     function changeIgnoreMove(b) {
         isIgnoreMove = b;
     }
-    return withScopedCSS(css$7, () => {
+    return withScopedCSS(scopedId$7, () => {
         const position = positionSignal();
         const slot = activeSlot();
         let activeNode = jsx("span", { class: "xnote-icon-pilcrow" });
@@ -3566,7 +3683,7 @@ class LeftToolbarPlugin {
     }
 }
 
-var css$6 = undefined;
+var scopedId$6 = "vf-fee98b";
 
 let EditorService = class EditorService {
     constructor() {
@@ -3676,7 +3793,7 @@ const Toolbar = withAnnotation({
         mousedownSubscription.unsubscribe();
         mouseupSubscription.unsubscribe();
     });
-    return withScopedCSS(css$6, () => {
+    return withScopedCSS(scopedId$6, () => {
         const p = viewPosition();
         return (jsxs("div", { class: "toolbar", ref: toolbarRef, style: {
                 left: p.left + 'px',
@@ -3811,72 +3928,35 @@ class Matcher {
     }
 }
 
-class ImageComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new ImageComponent(textbus, Object.assign({}, json));
-    }
-}
-ImageComponent.type = ContentType.InlineComponent;
-ImageComponent.componentName = 'ImageComponent';
-function ImageView(props) {
-    const { name, state } = props.component;
-    const imageRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
-    };
-}
-const imageComponentLoader = {
-    match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
-    },
-    read(element, textbus) {
-        var _a;
-        return new ImageComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
-        });
-    }
-};
-
 class RootComponent extends Component {
     constructor() {
         super(...arguments);
         this.onCompositionStart = new Subject();
     }
     static fromJSON(textbus, json) {
-        const heading = textbus.get(Registry).createSlot(json.heading);
+        // const heading = textbus.get(Registry).createSlot(json.heading)
         const content = textbus.get(Registry).createSlot(json.content);
         return new RootComponent(textbus, {
-            heading,
+            // heading,
             content
         });
     }
     setup() {
-        const textbus = useContext();
-        const selection = textbus.get(Selection);
-        onBreak(ev => {
-            if (ev.target === this.state.heading) {
-                const afterContent = ev.target.cut(ev.data.index);
-                const p = new ParagraphComponent(textbus, {
-                    slot: afterContent
-                });
-                const body = this.state.content;
-                body.retain(0);
-                body.insert(p);
-                selection.setPosition(afterContent, 0);
-                ev.preventDefault();
-            }
-        });
+        // const textbus = useContext()
+        // const selection = textbus.get(Selection)
+        // onBreak(ev => {
+        //   if (ev.target === this.state.heading) {
+        //     const afterContent = ev.target.cut(ev.data.index)
+        //     const p = new ParagraphComponent(textbus, {
+        //       slot: afterContent
+        //     })
+        //     const body = this.state.content
+        //     body.retain(0)
+        //     body.insert(p)
+        //     selection.setPosition(afterContent, 0)
+        //     ev.preventDefault()
+        //   }
+        // })
         useBlockContent(this.state.content);
         onCompositionStart(ev => {
             this.onCompositionStart.next(ev);
@@ -3898,37 +3978,28 @@ RootComponent.componentName = 'RootComponent';
 RootComponent.type = ContentType.BlockComponent;
 function RootView(props) {
     const adapter = inject(DomAdapter);
-    const { heading, content } = props.component.state;
+    const { content } = props.component.state;
     const ref = createDynamicRef(node => {
-        const sub = props.component.onCompositionStart.subscribe(ev => {
-            if (ev.target === heading) {
-                node.children[0].dataset.placeholder = '';
-            }
-            else {
-                node.children[1].dataset.placeholder = '';
-            }
+        const sub = props.component.onCompositionStart.subscribe(() => {
+            node.children[0].dataset.placeholder = '';
         });
         return () => {
             sub.unsubscribe();
         };
     });
-    onUpdated(() => {
-        props.component.afterCheck();
-    });
+    // onUpdated(() => {
+    //   props.component.afterCheck()
+    // })
     const readonly = useReadonly();
+    const output = useOutput();
     return () => {
         const { rootRef } = props;
-        return (jsxs("div", { class: "xnote-root", ref: [rootRef, ref], children: [adapter.slotRender(heading, children => {
-                    return (createVNode('div', {
-                        class: 'xnote-title',
-                        'data-placeholder': heading.isEmpty ? '请输入标题' : ''
-                    }, children));
-                }, readonly()), adapter.slotRender(content, children => {
-                    return (createVNode('div', {
-                        class: 'xnote-content',
-                        'data-placeholder': content.isEmpty ? '请输入内容' : ''
-                    }, children));
-                }, readonly())] }));
+        return (jsx("div", { class: "xnote-root", ref: [rootRef, ref], children: adapter.slotRender(content, children => {
+                return (createVNode('div', {
+                    class: 'xnote-content',
+                    'data-placeholder': content.isEmpty ? '请输入内容' : ''
+                }, children));
+            }, readonly() || output()) }));
     };
 }
 const rootComponentLoader = {
@@ -3953,7 +4024,7 @@ const rootComponentLoader = {
     }
 };
 
-var css$5 = undefined;
+var scopedId$5 = "vf-681de2";
 
 let TableService = class TableService {
     constructor() {
@@ -4040,12 +4111,12 @@ function ResizeColumn(props) {
         });
         return () => sub.unsubscribe();
     });
-    return withScopedCSS(css$5, () => {
+    return withScopedCSS(scopedId$5, () => {
         return jsx("div", { ref: dragLineRef, class: ['drag-line'] });
     });
 }
 
-var css$4 = undefined;
+var scopedId$4 = "vf-d64cf9";
 
 function TopBar(props) {
     const editorService = inject(EditorService);
@@ -4113,7 +4184,7 @@ function TopBar(props) {
         s.unsubscribe();
     });
     const deleteIndex = createSignal(null);
-    return withScopedCSS(css$4, () => {
+    return withScopedCSS(scopedId$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsx("div", { class: ['top-bar', {
@@ -4166,7 +4237,7 @@ function TopBar(props) {
     });
 }
 
-var css$3 = undefined;
+var scopedId$3 = "vf-b1149b";
 
 function Scroll(props) {
     const scrollRef = createRef();
@@ -4198,7 +4269,7 @@ function Scroll(props) {
             draft.rightEnd = el.scrollLeft === el.scrollWidth - el.offsetWidth;
         });
     });
-    return withScopedCSS(css$3, () => {
+    return withScopedCSS(scopedId$3, () => {
         return jsx("div", { ref: [scrollRef, props.scrollRef], class: ['scroll-container', {
                     'left-end': showShadow().leftEnd,
                     'right-end': showShadow().rightEnd,
@@ -4210,7 +4281,7 @@ function Scroll(props) {
     });
 }
 
-var css$2 = undefined;
+var scopedId$2 = "vf-ef93c0";
 
 function LeftBar(props) {
     const editorService = inject(EditorService);
@@ -4284,7 +4355,7 @@ function LeftBar(props) {
             textbus.focus();
         });
     }
-    return withScopedCSS(css$2, () => {
+    return withScopedCSS(scopedId$2, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
         return (jsxs("div", { class: ['left-bar', { active: props.isFocus() }], children: [jsx("div", { class: "insert-bar", children: jsx("table", { ref: insertBarRef, children: jsx("tbody", { children: state.rows.map((_, index) => {
@@ -4332,7 +4403,7 @@ function LeftBar(props) {
     });
 }
 
-var css$1 = undefined;
+var scopedId$1 = "vf-d4c4a9";
 
 function sum(numbers) {
     return numbers.reduce((a, b) => a + b, 0);
@@ -4365,7 +4436,7 @@ function ResizeRow(props) {
         });
         return () => sub.unsubscribe();
     });
-    return withScopedCSS(css$1, () => {
+    return withScopedCSS(scopedId$1, () => {
         return jsx("div", { ref: dragLineRef, style: {
                 display: styles().visible ? 'block' : 'none',
                 top: styles().top + 'px',
@@ -4374,7 +4445,7 @@ function ResizeRow(props) {
     });
 }
 
-var css = undefined;
+var scopedId = "vf-4a5ad1";
 
 function SelectionMask(props) {
     const [styles, updateStyles] = useProduce({
@@ -4427,7 +4498,7 @@ function SelectionMask(props) {
     onUnmounted(() => {
         s.unsubscribe();
     });
-    return withScopedCSS(css, () => {
+    return withScopedCSS(scopedId, () => {
         const style = styles();
         return (jsx("div", { class: "mask", style: {
                 display: style.visible ? 'block' : 'none',
@@ -4545,7 +4616,7 @@ const TableComponentView = withAnnotation({
                                                 return createVNode('td', {
                                                     key: cell.slot.id
                                                 }, children);
-                                            }, readonly());
+                                            }, readonly() || output());
                                         }) }, rowMapping.get(row)));
                                 }) })] }) }) }));
         }
@@ -4562,7 +4633,7 @@ const TableComponentView = withAnnotation({
                                                         return createVNode('td', {
                                                             key: cell.slot.id
                                                         }, children);
-                                                    }, readonly());
+                                                    }, readonly() || output());
                                                 }) }, rowMapping.get(row)));
                                         }) })] }), jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
                                     isResizeColumn.set(isActive);
@@ -4725,48 +4796,8 @@ function autoComplete(table) {
     });
 }
 
-class VideoComponent extends Component {
-    static fromJSON(textbus, json) {
-        return new VideoComponent(textbus, Object.assign({}, json));
-    }
-    setup() {
-        //
-    }
-}
-VideoComponent.type = ContentType.InlineComponent;
-VideoComponent.componentName = 'VideoComponent';
-function VideoView(props) {
-    const { name, state } = props.component;
-    const videoRef = createRef();
-    const readonly = useReadonly();
-    const output = useOutput();
-    return () => {
-        if (readonly() || output()) {
-            return (jsx("div", { class: "xnote-video", "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }));
-        }
-        return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
-                        width: state.width,
-                        height: state.height
-                    } }) }) }));
-    };
-}
-const videoComponentLoader = {
-    match(element) {
-        return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
-    },
-    read(element, textbus) {
-        var _a;
-        return new VideoComponent(textbus, {
-            src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
-        });
-    }
-};
-
-function createXNote(host_1) {
-    return __awaiter(this, arguments, void 0, function* (host, config = {}) {
+class Editor extends Textbus {
+    constructor(editorConfig = {}) {
         const adapter = new ViewflyAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
             [RootComponent.componentName]: RootView,
@@ -4790,6 +4821,38 @@ function createXNote(host_1) {
                 app.destroy();
             };
         });
+        const browserModule = new BrowserModule(Object.assign({ renderTo: () => {
+                return this.host;
+            }, adapter, componentLoaders: [
+                sourceCodeComponentLoader,
+                tableComponentLoader,
+                imageComponentLoader,
+                videoComponentLoader,
+                highlightBoxComponentLoader,
+                blockquoteComponentLoader,
+                paragraphComponentLoader,
+                todolistComponentLoader,
+                listComponentLoader,
+            ], formatLoaders: [
+                backgroundColorFormatLoader,
+                boldFormatLoader,
+                codeFormatLoader,
+                colorFormatLoader,
+                fontFamilyFormatLoader,
+                fontSizeFormatLoader,
+                italicFormatLoader,
+                linkFormatLoader,
+                strikeThroughFormatLoader,
+                underlineFormatLoader
+            ], attributeLoaders: [
+                headingAttrLoader,
+                textAlignAttrLoader,
+                textIndentAttrLoader
+            ] }, editorConfig.viewOptions));
+        const modules = [browserModule];
+        if (editorConfig.collaborateConfig) {
+            modules.push(new CollaborateModule(editorConfig.collaborateConfig));
+        }
         const vDomAdapter = new ViewflyVDomAdapter({
             [ParagraphComponent.componentName]: ParagraphView,
             [RootComponent.componentName]: RootView,
@@ -4807,7 +4870,7 @@ function createXNote(host_1) {
                     useValue: true
                 }, {
                     provide: DomAdapter,
-                    useFactory() {
+                    useFactory: () => {
                         return vDomAdapter;
                     }
                 }]);
@@ -4819,50 +4882,7 @@ function createXNote(host_1) {
                 app.destroy();
             };
         });
-        const browserModule = new BrowserModule({
-            renderTo() {
-                return host;
-            },
-            adapter,
-            componentLoaders: [
-                highlightBoxComponentLoader,
-                blockquoteComponentLoader,
-                paragraphComponentLoader,
-                sourceCodeComponentLoader,
-                todolistComponentLoader,
-                tableComponentLoader,
-                listComponentLoader,
-                imageComponentLoader,
-                videoComponentLoader
-            ],
-            formatLoaders: [
-                backgroundColorFormatLoader,
-                boldFormatLoader,
-                codeFormatLoader,
-                colorFormatLoader,
-                fontFamilyFormatLoader,
-                fontSizeFormatLoader,
-                italicFormatLoader,
-                linkFormatLoader,
-                strikeThroughFormatLoader,
-                underlineFormatLoader
-            ],
-            attributeLoaders: [
-                headingAttrLoader,
-                textAlignAttrLoader,
-                textIndentAttrLoader
-            ]
-        });
-        const modules = [browserModule];
-        if (config.collaborateConfig) {
-            modules.push(new CollaborateModule(config.collaborateConfig));
-        }
-        const textbus = new Textbus({
-            additionalAdapters: [vDomAdapter],
-            zenCoding: true,
-            readonly: config.readonly,
-            imports: modules,
-            components: [
+        super(Object.assign({ zenCoding: true, additionalAdapters: [vDomAdapter], imports: modules, components: [
                 ImageComponent,
                 ParagraphComponent,
                 RootComponent,
@@ -4873,8 +4893,7 @@ function createXNote(host_1) {
                 HighlightBoxComponent,
                 ListComponent,
                 VideoComponent
-            ],
-            formatters: [
+            ], formatters: [
                 backgroundColorFormatter,
                 boldFormatter,
                 codeFormatter,
@@ -4885,18 +4904,14 @@ function createXNote(host_1) {
                 linkFormatter,
                 strikeThroughFormatter,
                 underlineFormatter
-            ],
-            attributes: [
+            ], attributes: [
                 headingAttr,
                 textAlignAttr,
                 textIndentAttr
-            ],
-            providers: [],
-            plugins: [
+            ], plugins: [
                 new LeftToolbarPlugin(),
                 new ToolbarPlugin(),
-            ],
-            onAfterStartup(textbus) {
+            ], onAfterStartup(textbus) {
                 registerBoldShortcut(textbus);
                 registerCodeShortcut(textbus);
                 registerItalicShortcut(textbus);
@@ -4905,32 +4920,34 @@ function createXNote(host_1) {
                 registerHeadingShortcut(textbus);
                 registerTextAlignShortcut(textbus);
                 registerTextIndentShortcut(textbus);
-            }
-        });
+            } }, editorConfig));
+        this.editorConfig = editorConfig;
+        this.translator = new OutputTranslator();
+        this.vDomAdapter = vDomAdapter;
+    }
+    mount(host) {
+        this.host = host;
         let rootComp;
+        const config = this.editorConfig;
         if (config.content) {
-            const parser = textbus.get(Parser);
+            const parser = this.get(Parser);
             const doc = parser.parseDoc(config.content, rootComponentLoader);
-            rootComp = doc instanceof Component ? doc : new RootComponent(textbus, {
-                heading: new Slot([ContentType.Text]),
+            rootComp = doc instanceof Component ? doc : new RootComponent(this, {
+                // heading: new Slot([ContentType.Text]),
                 content: doc
             });
         }
         else {
-            rootComp = new RootComponent(textbus, {
-                heading: new Slot([ContentType.Text]),
+            rootComp = new RootComponent(this, {
+                // heading: new Slot([ContentType.Text]),
                 content: new Slot([ContentType.Text, ContentType.InlineComponent, ContentType.BlockComponent])
             });
         }
-        yield textbus.render(rootComp);
-        const translator = new OutputTranslator();
-        return {
-            textbus,
-            getHTML() {
-                return translator.transform(vDomAdapter.host);
-            }
-        };
-    });
+        return this.render(rootComp);
+    }
+    getHTML() {
+        return this.translator.transform(this.vDomAdapter.host);
+    }
 }
 
-export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, createXNote, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };