@textbus/xnote 0.0.1-alpha.32 → 0.0.1-alpha.34

package/bundles/components/menu-item/menu-item.d.ts

@@ -1,11 +1,11 @@
-import { Props, ViewNode } from '@viewfly/core';
+import { Props, JSXNode } from '@viewfly/core';
 export interface MenuItemProps extends Props {
     disabled?: boolean;
     checked?: boolean;
-    icon?: ViewNode;
+    icon?: JSXNode;
     value?: any;
     arrow?: boolean;
-    desc?: ViewNode;
+    desc?: JSXNode;
     onClick?(value: any): void;
 }
 export declare function MenuItem(props: MenuItemProps): () => any;

package/bundles/index.esm.js

@@ -2635,6 +2635,8 @@ function useBlockTransform() {
                                         lineNumber: true,
                                         autoBreak: true,
                                         slots: slots.map(slot => {
+                                            slot.cleanFormats();
+                                            slot.cleanAttributes();
                                             return {
                                                 slot,
                                                 emphasize: false
@@ -3463,7 +3465,6 @@ function LinkTool(props) {
             });
         }
         isShow.set(false);
-        editorService.hideInlineToolbar = false;
     }
     let isClickFromSelf = false;
     const sub = fromEvent(document, 'click').subscribe(() => {
@@ -3608,7 +3609,7 @@ function VideoView(props) {
     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: {
+            return (jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
                         width: state.width,
                         height: state.height
                     } }) }));
@@ -3888,7 +3889,7 @@ function InsertTool(props) {
                 break;
             case 'image':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('image')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
                         const img = new ImageComponent(textbus, {
                             src: url
                         });
@@ -3898,7 +3899,7 @@ function InsertTool(props) {
                 break;
             case 'video':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('video')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
                         const img = new VideoComponent(textbus, {
                             src: url
                         });
@@ -4212,6 +4213,7 @@ function LinkJump() {
         onSelectionChange();
     });
     function cleanLink() {
+        isShow.set(false);
         const commonAncestorSlot = selection.commonAncestorSlot;
         const index = selection.focusOffset;
         const ranges = commonAncestorSlot.getFormatRangesByFormatter(linkFormatter, 0, commonAncestorSlot.length);
@@ -4237,6 +4239,8 @@ const Toolbar = withAnnotation({
 }, function Toolbar() {
     const selection = inject(Selection);
     const viewDocument = inject(VIEW_CONTAINER);
+    const rootComponentRef = inject(RootComponentRef);
+    const adapter = inject(DomAdapter);
     const bridge = inject(SelectionBridge);
     const textbus = inject(Textbus);
     const editorService = inject(EditorService);
@@ -4258,7 +4262,7 @@ const Toolbar = withAnnotation({
     const toolbarRef = createRef();
     function getTop() {
         const docRect = viewDocument.getBoundingClientRect();
-        const toolbarRect = toolbarRef.current.getBoundingClientRect();
+        const toolbarHeight = 36;
         // const documentHeight = document.documentElement.clientHeight
         const selectionFocusRect = bridge.getRect({
             slot: selection.focusSlot,
@@ -4267,12 +4271,11 @@ const Toolbar = withAnnotation({
         if (!selectionFocusRect) {
             return null;
         }
-        // console.log(selectionFocusRect.top, toolbarRect.height)
         const centerLeft = selectionFocusRect.left;
-        const toBottom = selectionFocusRect.top < toolbarRect.height + 10;
+        const toBottom = selectionFocusRect.top < toolbarHeight + 10;
         const top = toBottom ?
             selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
-            selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
+            selectionFocusRect.top - docRect.top - toolbarHeight - 10;
         updateViewPosition(draft => {
             draft.transitionDuration = .15;
             draft.left = centerLeft - docRect.left;
@@ -4294,7 +4297,8 @@ const Toolbar = withAnnotation({
         sub.unsubscribe();
     });
     function bindMouseup() {
-        mouseupSubscription = fromEvent(viewDocument, 'mouseup').pipe(filter(ev => {
+        const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
+        mouseupSubscription = fromEvent(docElement, 'mouseup').pipe(filter(ev => {
             return !ev.composedPath().includes(toolbarRef.current);
         }), delay(100), filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
@@ -5735,4 +5739,4 @@ class Editor extends Textbus {
     }
 }
 
-export { AtComponent, AtComponentView, 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, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
+export { AtComponent, AtComponentView, AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FileUploader, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, KatexComponent, KatexComponentView, Keymap, LeftToolbar, LeftToolbarPlugin, LinkJump, LinkTool, ListComponent, ListComponentView, Matcher, MenuHeading, MenuItem, Organization, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, atComponentLoader, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, katexComponentLoader, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerAtShortcut, registerBlockquoteShortcut, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerListShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, toBlockquote, toList, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };

package/bundles/index.js

@@ -2637,6 +2637,8 @@ function useBlockTransform() {
                                         lineNumber: true,
                                         autoBreak: true,
                                         slots: slots.map(slot => {
+                                            slot.cleanFormats();
+                                            slot.cleanAttributes();
                                             return {
                                                 slot,
                                                 emphasize: false
@@ -3465,7 +3467,6 @@ function LinkTool(props) {
             });
         }
         isShow.set(false);
-        editorService.hideInlineToolbar = false;
     }
     let isClickFromSelf = false;
     const sub = core$1.fromEvent(document, 'click').subscribe(() => {
@@ -3610,7 +3611,7 @@ function VideoView(props) {
     const output = useOutput();
     return () => {
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-video", "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
+            return (jsxRuntime.jsx("div", { class: "xnote-video", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
                         width: state.width,
                         height: state.height
                     } }) }));
@@ -3890,7 +3891,7 @@ function InsertTool(props) {
                 break;
             case 'image':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('image')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('image')).then(url => {
                         const img = new ImageComponent(textbus, {
                             src: url
                         });
@@ -3900,7 +3901,7 @@ function InsertTool(props) {
                 break;
             case 'video':
                 if (fileUploader) {
-                    Promise.resolve(fileUploader.uploadFile('video')).then(url => {
+                    Promise.resolve().then(() => fileUploader.uploadFile('video')).then(url => {
                         const img = new VideoComponent(textbus, {
                             src: url
                         });
@@ -4214,6 +4215,7 @@ function LinkJump() {
         onSelectionChange();
     });
     function cleanLink() {
+        isShow.set(false);
         const commonAncestorSlot = selection.commonAncestorSlot;
         const index = selection.focusOffset;
         const ranges = commonAncestorSlot.getFormatRangesByFormatter(linkFormatter, 0, commonAncestorSlot.length);
@@ -4239,6 +4241,8 @@ const Toolbar = core.withAnnotation({
 }, function Toolbar() {
     const selection = core.inject(core$1.Selection);
     const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
+    const rootComponentRef = core.inject(core$1.RootComponentRef);
+    const adapter = core.inject(platformBrowser.DomAdapter);
     const bridge = core.inject(platformBrowser.SelectionBridge);
     const textbus = core.inject(core$1.Textbus);
     const editorService = core.inject(exports.EditorService);
@@ -4260,7 +4264,7 @@ const Toolbar = core.withAnnotation({
     const toolbarRef = core.createRef();
     function getTop() {
         const docRect = viewDocument.getBoundingClientRect();
-        const toolbarRect = toolbarRef.current.getBoundingClientRect();
+        const toolbarHeight = 36;
         // const documentHeight = document.documentElement.clientHeight
         const selectionFocusRect = bridge.getRect({
             slot: selection.focusSlot,
@@ -4269,12 +4273,11 @@ const Toolbar = core.withAnnotation({
         if (!selectionFocusRect) {
             return null;
         }
-        // console.log(selectionFocusRect.top, toolbarRect.height)
         const centerLeft = selectionFocusRect.left;
-        const toBottom = selectionFocusRect.top < toolbarRect.height + 10;
+        const toBottom = selectionFocusRect.top < toolbarHeight + 10;
         const top = toBottom ?
             selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
-            selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
+            selectionFocusRect.top - docRect.top - toolbarHeight - 10;
         updateViewPosition(draft => {
             draft.transitionDuration = .15;
             draft.left = centerLeft - docRect.left;
@@ -4296,7 +4299,8 @@ const Toolbar = core.withAnnotation({
         sub.unsubscribe();
     });
     function bindMouseup() {
-        mouseupSubscription = core$1.fromEvent(viewDocument, 'mouseup').pipe(core$1.filter(ev => {
+        const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
+        mouseupSubscription = core$1.fromEvent(docElement, 'mouseup').pipe(core$1.filter(ev => {
             return !ev.composedPath().includes(toolbarRef.current);
         }), core$1.delay(100), core$1.filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
@@ -5753,6 +5757,7 @@ exports.DragResize = DragResize;
 exports.Dropdown = Dropdown;
 exports.DropdownMenuPortal = DropdownMenuPortal;
 exports.Editor = Editor;
+exports.FileUploader = FileUploader;
 exports.FontFamilyTool = FontFamilyTool;
 exports.FontSizeTool = FontSizeTool;
 exports.HighlightBoxComponent = HighlightBoxComponent;

package/bundles/plugins/link-jump/link-jump.d.ts

@@ -1,4 +1,4 @@
 export declare function LinkJump(): {
     $portalHost: HTMLElement;
-    $render: () => import("@viewfly/core").JSXNode<string | JSXInternal.ComponentSetup<any>>;
+    $render: () => import("@viewfly/core").ViewFlyNode<string | import("@viewfly/core").ComponentSetup<any>>;
 };

package/bundles/public-api.d.ts

@@ -2,4 +2,5 @@ export * from './components/_api';
 export * from './plugins/_api';
 export * from './services/_api';
 export * from './textbus/_api';
+export * from './interfaces';
 export * from './editor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.0.1-alpha.32",
+  "version": "0.0.1-alpha.34",
   "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -27,14 +27,14 @@
   },
   "dependencies": {
     "@tanbo/color": "^0.1.1",
-    "@textbus/adapter-viewfly": "^4.0.0-alpha.61",
-    "@textbus/collaborate": "^4.0.0-alpha.61",
-    "@textbus/core": "^4.0.0-alpha.61",
-    "@textbus/platform-browser": "^4.0.0-alpha.61",
-    "@viewfly/core": "^1.0.0-alpha.11",
-    "@viewfly/hooks": "^1.0.0-alpha.11",
-    "@viewfly/platform-browser": "^1.0.0-alpha.11",
-    "@viewfly/scoped-css": "^1.0.0-alpha.11",
+    "@textbus/adapter-viewfly": "^4.0.0-alpha.64",
+    "@textbus/collaborate": "^4.0.0-alpha.64",
+    "@textbus/core": "^4.0.0-alpha.64",
+    "@textbus/platform-browser": "^4.0.0-alpha.64",
+    "@viewfly/core": "^1.0.0-alpha.16",
+    "@viewfly/hooks": "^1.0.0-alpha.16",
+    "@viewfly/platform-browser": "^1.0.0-alpha.16",
+    "@viewfly/scoped-css": "^1.0.0-alpha.16",
     "highlight.js": "^11.9.0",
     "katex": "^0.16.10"
   },