@textbus/xnote 0.3.3 → 0.3.5

package/bundles/index.esm.js

@@ -2286,7 +2286,8 @@ function SourceCodeView(props) {
                                         }
                                     }
                                     return createVNode('div', {
-                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
+                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : ''),
+                                        key: item.slot.id
                                     }, [
                                         createVNode('span', { class: 'xnote-source-code-line-content' }, children)
                                     ]);
@@ -7527,7 +7528,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()
@@ -8135,7 +8138,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);

package/bundles/index.js

@@ -2288,7 +2288,8 @@ function SourceCodeView(props) {
                                         }
                                     }
                                     return core$1.createVNode('div', {
-                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
+                                        class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : ''),
+                                        key: item.slot.id
                                     }, [
                                         core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
                                     ]);
@@ -7529,7 +7530,9 @@ const TableComponentView = core.withAnnotation({
             rowMapping.set(row.row, Math.random());
         });
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
+            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", style: {
+                            overflow: 'auto'
+                        }, children: jsxRuntime.jsxs("table", { class: [
                                 'xnote-table-content',
                                 {
                                     'hide-selection': props.component.tableSelection()
@@ -8137,7 +8140,9 @@ class Editor extends core$1.Textbus {
         this.guardReady();
         const newModel = this.createModel(content);
         const rootComponent = this.get(core$1.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);

package/index.tsx

@@ -6,7 +6,7 @@ import { FileUploader } from './src/interfaces'
 import { UserInfo } from './src/xnote-message-bus'
 import { StaticToolbarPlugin, SuspensionToolbarPlugin } from '@textbus/xnote'
 import { VIEW_CONTAINER } from '@textbus/platform-browser'
-import { createRef, onMounted } from '@viewfly/core'
+import { createRef, createSignal, onMounted } from '@viewfly/core'
 import { createApp } from '@viewfly/platform-browser'
 import { RootComponentRef } from '@textbus/core'
 
@@ -83,47 +83,52 @@ class Http extends Organization {
   }
 }
 
-const editor = new Editor({
-  readonly: false,
-  // content: document.getElementById('article')!.innerHTML,
-  collaborateConfig: {
-    userinfo: user,
-    createConnector(yDoc): SyncConnector {
-      return new YWebsocketConnector('ws://localhost:1234', 'xnote', yDoc)
-      // return new YWebsocketConnector('wss://textbus.io/api', 'xnote', yDoc)
-    }
-  },
-  // plugins: [
-  //   new SuspensionToolbarPlugin()
-  // ],
-  providers: [
-    {
-      provide: Organization,
-      useValue: new Http()
-    },
-    {
-      provide: FileUploader,
-      useValue: {
-        uploadFile(type: string) {
-          console.log(type)
-        }
-      }
-    }
-  ]
-})
 
-function App() {
+function EditorContainer() {
   const editorRef = createRef<HTMLElement>()
   const htmlRef = createRef<HTMLTextAreaElement>()
 
+  const editor = new Editor({
+    readonly: false,
+    // content: document.getElementById('article')!.innerHTML,
+    collaborateConfig: {
+      userinfo: user,
+      createConnector(yDoc): SyncConnector {
+        return new YWebsocketConnector('ws://localhost:1234', 'xnote', yDoc)
+        // return new YWebsocketConnector('wss://textbus.io/api', 'xnote', yDoc)
+      }
+    },
+    // plugins: [
+    //   new SuspensionToolbarPlugin()
+    // ],
+    providers: [
+      {
+        provide: Organization,
+        useValue: new Http()
+      },
+      {
+        provide: FileUploader,
+        useValue: {
+          uploadFile(type: string) {
+            console.log(type)
+          }
+        }
+      }
+    ]
+  })
   onMounted(() => {
     editor.mount(editorRef.current!).then(() => {
-      const root = editor.get(RootComponentRef).component
-      root.changeMarker.onChange.subscribe(op => {
-        console.log(op)
-      })
+      // const root = editor.get(RootComponentRef).component
+      // root.changeMarker.onChange.subscribe(op => {
+      //   console.log(op)
+      // })
     })
+
+    return () => {
+      editor.destroy()
+    }
   })
+  const contentRef = createRef<HTMLDivElement>()
   return () => {
     return (
       <div>
@@ -134,14 +139,37 @@ function App() {
           <button type="button" onClick={() => {
             const html = editor.getHTML()
             htmlRef.current!.value = html
-          }}>获取 HTML</button>
+            contentRef.current!.innerHTML = html
+          }}>获取 HTML
+          </button>
           <textarea name="" id="" ref={htmlRef} cols="30" rows="10"></textarea>
           <button type="button" onClick={() => {
             const html = htmlRef.current!.value
             editor.setContent(html)
-          }}>设置 HTML</button>
+          }}>设置 HTML
+          </button>
         </div>
         <div ref={editorRef}></div>
+        <div ref={contentRef}></div>
+      </div>
+    )
+  }
+}
+
+function App() {
+  const is = createSignal(true)
+  return () => {
+    return (
+      <div>
+        <div>
+          <button onClick={() => {
+            is.set(!is())
+          }}>switch
+          </button>
+        </div>
+        {
+          is() ? <EditorContainer/> : null
+        }
       </div>
     )
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/xnote",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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.3.5",
-    "@textbus/collaborate": "^4.3.5",
-    "@textbus/core": "^4.3.5",
-    "@textbus/platform-browser": "^4.3.5",
-    "@viewfly/core": "^1.1.10",
-    "@viewfly/hooks": "^1.1.10",
-    "@viewfly/platform-browser": "^1.1.10",
-    "@viewfly/scoped-css": "^1.1.10",
+    "@textbus/adapter-viewfly": "^4.5.0",
+    "@textbus/collaborate": "^4.5.1",
+    "@textbus/core": "^4.5.0",
+    "@textbus/platform-browser": "^4.5.0",
+    "@viewfly/core": "^1.2.3",
+    "@viewfly/hooks": "^1.2.3",
+    "@viewfly/platform-browser": "^1.2.3",
+    "@viewfly/scoped-css": "^1.2.3",
     "highlight.js": "^11.9.0",
     "katex": "^0.16.10",
     "uuid": "^10.0.0"