@textbus/collaborate 2.0.0-alpha.39 → 2.0.0-alpha.40

package/bundles/collab/collaborate-cursor.d.ts

@@ -10,7 +10,16 @@ export interface SelectionRect {
     y: number;
     width: number;
     height: number;
+}
+export interface SelectionInfo {
     color: string;
+    username: string;
+    rects: SelectionRect[];
+}
+export interface RemoteSelectionCursor {
+    cursor: HTMLElement;
+    anchor: HTMLElement;
+    userTip: HTMLElement;
 }
 export declare class CollaborateCursor {
     private container;
@@ -19,7 +28,10 @@ export declare class CollaborateCursor {
     private selection;
     private canvas;
     private context;
-    private onRectChange;
+    private tooltips;
+    private onRectsChange;
     constructor(container: HTMLElement, document: Document, nativeSelection: SelectionBridge, selection: Selection);
     draw(paths: RemoteSelection[]): void;
+    private drawUserCursor;
+    private getUserCursor;
 }

package/bundles/collab/collaborate-cursor.js

@@ -62,25 +62,47 @@ let CollaborateCursor = class CollaborateCursor {
             writable: true,
             value: this.canvas.getContext('2d')
         });
-        Object.defineProperty(this, "onRectChange", {
+        Object.defineProperty(this, "tooltips", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createElement('div', {
+                styles: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    fontSize: '12px'
+                }
+            })
+        });
+        Object.defineProperty(this, "onRectsChange", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new Subject()
         });
         container.appendChild(this.canvas);
-        this.onRectChange.subscribe(rect => {
-            this.context.fillStyle = rect.color;
-            this.context.beginPath();
-            this.context.rect(Math.ceil(rect.x), Math.ceil(rect.y), Math.ceil(rect.width), Math.ceil(rect.height));
-            this.context.fill();
-            this.context.closePath();
+        container.appendChild(this.tooltips);
+        this.onRectsChange.subscribe(info => {
+            const color = info.color;
+            const rects = info.rects;
+            for (const rect of rects) {
+                this.context.fillStyle = color;
+                this.context.beginPath();
+                this.context.rect(rect.x, rect.y, rect.width, rect.height);
+                this.context.fill();
+                this.context.closePath();
+            }
         });
     }
     draw(paths) {
         this.canvas.width = this.container.offsetWidth;
         this.canvas.height = this.container.offsetHeight;
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        const users = [];
         paths.filter(i => {
             return i.paths.start.length && i.paths.end.length;
         }).forEach(item => {
@@ -100,34 +122,123 @@ let CollaborateCursor = class CollaborateCursor {
                     nativeRange.setStart(position.start.node, position.start.offset);
                     nativeRange.setEnd(position.end.node, position.end.offset);
                     const rects = nativeRange.getClientRects();
-                    let prev = {};
+                    const selectionRects = [];
                     for (let i = rects.length - 1; i >= 0; i--) {
                         const rect = rects[i];
-                        if (prev.y === rect.y) {
-                            continue;
-                        }
-                        prev = rect;
-                        this.onRectChange.next({
+                        selectionRects.push({
                             x: rect.x,
                             y: rect.y,
                             width: rect.width,
                             height: rect.height,
-                            color: item.color
                         });
                     }
                     if (rects.length === 0) {
                         const rect = nativeRange.getBoundingClientRect();
-                        this.onRectChange.next({
-                            x: rect.x,
-                            y: rect.y,
-                            width: 1,
-                            height: rect.height,
-                            color: item.color
-                        });
+                        if (rect.x !== 0 || rect.y !== 0 || rect.width !== 0 || rect.height !== 0) {
+                            selectionRects.push({
+                                x: rect.x,
+                                y: rect.y,
+                                width: 1,
+                                height: rect.height,
+                            });
+                        }
                     }
+                    const info = Object.assign(Object.assign({}, item), { rects: selectionRects });
+                    this.onRectsChange.next(info);
+                    users.push(info);
                 }
             }
         });
+        this.drawUserCursor(users);
+    }
+    drawUserCursor(users) {
+        for (let i = 0; i < users.length; i++) {
+            const user = users[i];
+            const last = user.rects[user.rects.length - 1];
+            const { cursor, userTip, anchor } = this.getUserCursor(i);
+            if (!last) {
+                cursor.style.display = 'none';
+            }
+            else {
+                Object.assign(cursor.style, {
+                    left: last.x + last.width + 'px',
+                    top: last.y + 'px',
+                    width: '2px',
+                    height: last.height + 'px',
+                    background: user.color,
+                    display: 'block'
+                });
+                anchor.style.background = user.color;
+                userTip.innerText = user.username;
+                userTip.style.background = user.color;
+            }
+        }
+        for (let i = users.length; i < this.tooltips.children.length; i++) {
+            this.tooltips.removeChild(this.tooltips.children[i]);
+        }
+    }
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
+            return {
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
+            };
+        }
+        const userTip = createElement('span', {
+            styles: {
+                position: 'absolute',
+                display: 'none',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginBottom: '2px',
+                bottom: '100%',
+                whiteSpace: 'nowrap',
+                color: '#fff',
+                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+                borderRadius: '3px',
+                padding: '3px 5px',
+                pointerEvents: 'none',
+            }
+        });
+        const anchor = createElement('span', {
+            styles: {
+                position: 'absolute',
+                top: '-2px',
+                left: '-2px',
+                width: '6px',
+                height: '6px',
+                pointerEvents: 'auto',
+                pointer: 'cursor',
+            },
+            children: [userTip],
+            on: {
+                mouseenter() {
+                    anchor.style.transform = 'scale(1.2)';
+                    userTip.style.display = 'block';
+                },
+                mouseleave() {
+                    userTip.style.display = 'none';
+                    anchor.style.transform = '';
+                }
+            }
+        });
+        child = createElement('span', {
+            styles: {
+                position: 'absolute',
+            },
+            children: [
+                anchor
+            ]
+        });
+        this.tooltips.append(child);
+        return {
+            cursor: child,
+            anchor,
+            userTip
+        };
     }
 };
 CollaborateCursor = __decorate([

package/bundles/collab/collaborate-cursor.js.map

@@ -1 +1 @@
-{"version":3,"file":"collaborate-cursor.js","sourceRoot":"","sources":["../../src/collab/collaborate-cursor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Inject, Injectable } from '@tanbo/di'\nimport { createElement, EDITABLE_DOCUMENT, EDITOR_CONTAINER, SelectionBridge } from '@textbus/browser'\nimport { Selection, SelectionPaths } from '@textbus/core'\nimport { Subject } from '@tanbo/stream'\n\nexport interface RemoteSelection {\n  color: string\n  username: string\n  paths: SelectionPaths\n}\n\nexport interface SelectionRect {\n  x: number\n  y: number\n  width: number\n  height: number\n  color: string\n}\n\n@Injectable()\nexport class CollaborateCursor {\n  private canvas = createElement('canvas', {\n    styles: {\n      position: 'absolute',\n      opacity: 0.5,\n      left: 0,\n      top: 0,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }) as HTMLCanvasElement\n  private context = this.canvas.getContext('2d')!\n\n  private onRectChange = new Subject<SelectionRect>()\n\n  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,\n              @Inject(EDITABLE_DOCUMENT) private document: Document,\n              private nativeSelection: SelectionBridge,\n              private selection: Selection) {\n    container.appendChild(this.canvas)\n    this.onRectChange.subscribe(rect => {\n      this.context.fillStyle = rect.color\n      this.context.beginPath()\n      this.context.rect(Math.ceil(rect.x), Math.ceil(rect.y), Math.ceil(rect.width), Math.ceil(rect.height))\n      this.context.fill()\n      this.context.closePath()\n    })\n  }\n\n  draw(paths: RemoteSelection[]) {\n    this.canvas.width = this.container.offsetWidth\n    this.canvas.height = this.container.offsetHeight\n    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)\n\n    paths.filter(i => {\n      return i.paths.start.length && i.paths.end.length\n    }).forEach(item => {\n      const startOffset = item.paths.start.pop()!\n      const startSlot = this.selection.findSlotByPaths(item.paths.start)\n      const endOffset = item.paths.end.pop()!\n      const endSlot = this.selection.findSlotByPaths(item.paths.end)\n\n      if (startSlot && endSlot) {\n        const position = this.nativeSelection.getPositionByRange({\n          startOffset,\n          endOffset,\n          startSlot,\n          endSlot\n        })\n        if (position.start && position.end) {\n          const nativeRange = this.document.createRange()\n          nativeRange.setStart(position.start.node, position.start.offset)\n          nativeRange.setEnd(position.end.node, position.end.offset)\n\n          const rects = nativeRange.getClientRects()\n          let prev: any = {}\n          for (let i = rects.length - 1; i >= 0; i--) {\n            const rect = rects[i]\n            if (prev.y === rect.y) {\n              continue\n            }\n            prev = rect\n            this.onRectChange.next({\n              x: rect.x,\n              y: rect.y,\n              width: rect.width,\n              height: rect.height,\n              color: item.color\n            })\n          }\n\n          if (rects.length === 0) {\n            const rect = nativeRange.getBoundingClientRect()\n            this.onRectChange.next({\n              x: rect.x,\n              y: rect.y,\n              width: 1,\n              height: rect.height,\n              color: item.color\n            })\n          }\n        }\n      }\n    })\n  }\n}\n"]}
+{"version":3,"file":"collaborate-cursor.js","sourceRoot":"","sources":["../../src/collab/collaborate-cursor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Inject, Injectable } from '@tanbo/di'\nimport { createElement, EDITABLE_DOCUMENT, EDITOR_CONTAINER, SelectionBridge } from '@textbus/browser'\nimport { Selection, SelectionPaths } from '@textbus/core'\nimport { Subject } from '@tanbo/stream'\n\nexport interface RemoteSelection {\n  color: string\n  username: string\n  paths: SelectionPaths\n}\n\nexport interface SelectionRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport interface SelectionInfo {\n  color: string\n  username: string\n  rects: SelectionRect[]\n}\n\nexport interface RemoteSelectionCursor {\n  cursor: HTMLElement\n  anchor: HTMLElement\n  userTip: HTMLElement\n}\n\n@Injectable()\nexport class CollaborateCursor {\n  private canvas = createElement('canvas', {\n    styles: {\n      position: 'absolute',\n      opacity: 0.5,\n      left: 0,\n      top: 0,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }) as HTMLCanvasElement\n  private context = this.canvas.getContext('2d')!\n  private tooltips = createElement('div', {\n    styles: {\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none',\n      fontSize: '12px'\n    }\n  })\n\n  private onRectsChange = new Subject<SelectionInfo>()\n\n  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,\n              @Inject(EDITABLE_DOCUMENT) private document: Document,\n              private nativeSelection: SelectionBridge,\n              private selection: Selection) {\n    container.appendChild(this.canvas)\n    container.appendChild(this.tooltips)\n    this.onRectsChange.subscribe(info => {\n      const color = info.color\n      const rects = info.rects\n      for (const rect of rects) {\n        this.context.fillStyle = color\n        this.context.beginPath()\n        this.context.rect(rect.x, rect.y, rect.width, rect.height)\n        this.context.fill()\n        this.context.closePath()\n      }\n    })\n  }\n\n  draw(paths: RemoteSelection[]) {\n    this.canvas.width = this.container.offsetWidth\n    this.canvas.height = this.container.offsetHeight\n    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)\n\n    const users: SelectionInfo[] = []\n\n    paths.filter(i => {\n      return i.paths.start.length && i.paths.end.length\n    }).forEach(item => {\n      const startOffset = item.paths.start.pop()!\n      const startSlot = this.selection.findSlotByPaths(item.paths.start)\n      const endOffset = item.paths.end.pop()!\n      const endSlot = this.selection.findSlotByPaths(item.paths.end)\n\n      if (startSlot && endSlot) {\n        const position = this.nativeSelection.getPositionByRange({\n          startOffset,\n          endOffset,\n          startSlot,\n          endSlot\n        })\n        if (position.start && position.end) {\n          const nativeRange = this.document.createRange()\n          nativeRange.setStart(position.start.node, position.start.offset)\n          nativeRange.setEnd(position.end.node, position.end.offset)\n\n          const rects = nativeRange.getClientRects()\n          const selectionRects: SelectionRect[] = []\n          for (let i = rects.length - 1; i >= 0; i--) {\n            const rect = rects[i]\n            selectionRects.push({\n              x: rect.x,\n              y: rect.y,\n              width: rect.width,\n              height: rect.height,\n            })\n          }\n\n          if (rects.length === 0) {\n            const rect = nativeRange.getBoundingClientRect()\n            if (rect.x !== 0 || rect.y !== 0 || rect.width !== 0 || rect.height !== 0) {\n              selectionRects.push({\n                x: rect.x,\n                y: rect.y,\n                width: 1,\n                height: rect.height,\n              })\n            }\n          }\n          const info: SelectionInfo = {\n            ...item,\n            rects: selectionRects\n          }\n          this.onRectsChange.next(info)\n\n          users.push(info)\n        }\n      }\n    })\n    this.drawUserCursor(users)\n  }\n\n  private drawUserCursor(users: SelectionInfo[]) {\n    for (let i = 0; i < users.length; i++) {\n      const user = users[i]\n      const last = user.rects[user.rects.length - 1]\n\n      const {cursor, userTip, anchor} = this.getUserCursor(i)\n      if (!last) {\n        cursor.style.display = 'none'\n      } else {\n        Object.assign(cursor.style, {\n          left: last.x + last.width + 'px',\n          top: last.y + 'px',\n          width: '2px',\n          height: last.height + 'px',\n          background: user.color,\n          display: 'block'\n        })\n        anchor.style.background = user.color\n        userTip.innerText = user.username\n        userTip.style.background = user.color\n      }\n    }\n\n    for (let i = users.length; i < this.tooltips.children.length; i++) {\n      this.tooltips.removeChild(this.tooltips.children[i])\n    }\n  }\n\n  private getUserCursor(index: number): RemoteSelectionCursor {\n    let child: HTMLElement = this.tooltips.children[index] as HTMLElement\n    if (child) {\n      const anchor = child.children[0] as HTMLElement\n      return {\n        cursor: child,\n        anchor,\n        userTip: anchor.children[0] as HTMLElement\n      }\n    }\n    const userTip = createElement('span', {\n      styles: {\n        position: 'absolute',\n        display: 'none',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        marginBottom: '2px',\n        bottom: '100%',\n        whiteSpace: 'nowrap',\n        color: '#fff',\n        boxShadow: '0 1px 2px rgba(0,0,0,.1)',\n        borderRadius: '3px',\n        padding: '3px 5px',\n        pointerEvents: 'none',\n      }\n    })\n\n    const anchor = createElement('span', {\n      styles: {\n        position: 'absolute',\n        top: '-2px',\n        left: '-2px',\n        width: '6px',\n        height: '6px',\n        pointerEvents: 'auto',\n        pointer: 'cursor',\n      },\n      children: [userTip],\n      on: {\n        mouseenter() {\n          anchor.style.transform = 'scale(1.2)'\n          userTip.style.display = 'block'\n        },\n        mouseleave() {\n          userTip.style.display = 'none'\n          anchor.style.transform = ''\n        }\n      }\n    })\n    child = createElement('span', {\n      styles: {\n        position: 'absolute',\n      },\n      children: [\n        anchor\n      ]\n    })\n    this.tooltips.append(child)\n    return {\n      cursor: child,\n      anchor,\n      userTip\n    }\n  }\n}\n"]}

package/bundles/collab/local-to-remote.js

@@ -1,4 +1,6 @@
+import { makeError } from '@textbus/core';
 import { Array as YArray, Map as YMap, Text as YText } from 'yjs';
+const collaborateErrorFn = makeError('Collaborate');
 export class LocalToRemote {
     transform(operation, root) {
         const path = [...operation.path];
@@ -49,9 +51,9 @@ export class LocalToRemote {
             return;
         }
         const content = slotYMap.get('content');
-        this.mergeActionsToSharedSlot(content, actions);
+        this.mergeActionsToSharedSlot(content, actions, slotYMap);
     }
-    mergeActionsToSharedSlot(content, actions) {
+    mergeActionsToSharedSlot(content, actions, slotYMap) {
         let index;
         let length;
         actions.forEach(action => {
@@ -91,7 +93,7 @@ export class LocalToRemote {
                 }
             }
             else if (action.type === 'apply') {
-                content.setAttribute('state', action.value);
+                slotYMap === null || slotYMap === void 0 ? void 0 : slotYMap.set('state', action.value);
             }
         });
     }
@@ -122,6 +124,7 @@ export class LocalToRemote {
         const sharedSlot = new YMap();
         sharedSlot.set('content', content);
         sharedSlot.set('schema', slotLiteral.schema);
+        sharedSlot.set('state', slotLiteral.state);
         return sharedSlot;
     }
     makeSharedComponentByComponentLiteral(componentLiteral) {
@@ -146,7 +149,7 @@ export class LocalToRemote {
                 i += action.insert instanceof YMap ? 1 : action.insert.length;
             }
             else {
-                throw new Error('xxx');
+                throw collaborateErrorFn('Unexpected delta action.');
             }
         }
         return null;

package/bundles/collab/local-to-remote.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-to-remote.js","sourceRoot":"","sources":["../../src/collab/local-to-remote.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action, Operation, SlotLiteral, ComponentLiteral } from '@textbus/core'\nimport { Array as YArray, Map as YMap, Text as YText } from 'yjs'\n\nexport class LocalToRemote {\n  transform(operation: Operation, root: YText) {\n    const path = [...operation.path]\n    path.shift()\n    if (path.length) {\n      const componentIndex = path.shift()!\n      const sharedComponent = this.getSharedComponentByIndex(root, componentIndex)\n      if (sharedComponent) {\n        this.applyComponentOperationToSharedComponent(path, operation.apply, sharedComponent)\n      }\n      return\n    }\n    this.mergeActionsToSharedSlot(root, operation.apply)\n  }\n\n  private applyComponentOperationToSharedComponent(path: number[], actions: Action[], componentYMap: YMap<any>) {\n    const sharedSlots = componentYMap.get('slots') as YArray<any>\n    if (path.length) {\n      const slotIndex = path.shift()!\n      const sharedSlot = sharedSlots.get(slotIndex)\n      this.applySlotOperationToSharedSlot(path, actions, sharedSlot)\n      return\n    }\n    let index: number\n    actions.forEach(action => {\n      switch (action.type) {\n        case 'retain':\n          index = action.offset\n          break\n        case 'insertSlot':\n          sharedSlots.insert(index, [this.makeSharedSlotBySlotLiteral(action.slot)])\n          index++\n          break\n        case 'apply':\n          componentYMap.set('state', action.value)\n          break\n        case 'delete':\n          sharedSlots.delete(index, action.count)\n          break\n      }\n    })\n  }\n\n  private applySlotOperationToSharedSlot(path: number[], actions: Action[], slotYMap: YMap<any>) {\n    if (path.length) {\n      const componentIndex = path.shift()!\n      const sharedContent = slotYMap.get('content') as YText\n      const sharedComponent = this.getSharedComponentByIndex(sharedContent, componentIndex)!\n      this.applyComponentOperationToSharedComponent(path, actions, sharedComponent)\n      return\n    }\n    const content = slotYMap.get('content') as YText\n\n    this.mergeActionsToSharedSlot(content, actions)\n  }\n\n  private mergeActionsToSharedSlot(content: YText, actions: Action[]) {\n    let index: number\n    let length: number\n\n    actions.forEach(action => {\n      if (action.type === 'retain') {\n        if (action.formats) {\n          content.format(index, action.offset, action.formats)\n        } else {\n          index = action.offset\n        }\n      } else if (action.type === 'insert') {\n        const delta = content.toDelta()\n        const isEmpty = delta.length === 1 && delta[0].insert === '\\n'\n\n        if (typeof action.content === 'string') {\n          length = action.content.length\n          content.insert(index, action.content)\n        } else {\n          length = 1\n          content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(action.content))\n        }\n        if (action.formats) {\n          content.format(index, length, action.formats)\n        }\n        if (isEmpty && index === 0) {\n          content.delete(content.length - 1, 1)\n        }\n        index += length\n      } else if (action.type === 'delete') {\n        const delta = content.toDelta()\n        content.delete(index, action.count)\n        if (content.length === 0) {\n          content.insert(0, '\\n', delta[0]?.attributes)\n        }\n      } else if (action.type === 'apply') {\n        content.setAttribute('state', action.value)\n      }\n    })\n  }\n\n  private makeSharedSlotBySlotLiteral(slotLiteral: SlotLiteral): YMap<any> {\n    const content = new YText()\n    let index = 0\n    slotLiteral.content.forEach(i => {\n      let size: number\n      if (typeof i === 'string') {\n        size = i.length\n        content.insert(index, i)\n      } else {\n        size = 1\n        content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(i))\n      }\n      index += size\n    })\n    const formats = slotLiteral.formats\n    Object.keys(formats).forEach(key => {\n      const formatRanges = formats[key]\n      formatRanges.forEach(formatRange => {\n        content.format(formatRange.startIndex, formatRange.endIndex - formatRange.startIndex, {\n          [key]: formatRange.value\n        })\n      })\n    })\n\n    const sharedSlot = new YMap()\n    sharedSlot.set('content', content)\n    sharedSlot.set('schema', slotLiteral.schema)\n    return sharedSlot\n  }\n\n  private makeSharedComponentByComponentLiteral(componentLiteral: ComponentLiteral): YMap<any> {\n    const slots = new YArray()\n    componentLiteral.slots.forEach(item => {\n      slots.push([this.makeSharedSlotBySlotLiteral(item)])\n    })\n    const sharedComponent = new YMap()\n    sharedComponent.set('name', componentLiteral.name)\n    sharedComponent.set('slots', slots)\n    sharedComponent.set('state', componentLiteral.state)\n    return sharedComponent\n  }\n\n  private getSharedComponentByIndex(host: YText, index: number): YMap<any> | null {\n    const delta = host.toDelta()\n    let i = 0\n    for (const action of delta) {\n      if (action.insert) {\n        if (i === index) {\n          return action.insert instanceof YMap ? action.insert : null\n        }\n        i += action.insert instanceof YMap ? 1 : action.insert.length\n      } else {\n        throw new Error('xxx')\n      }\n    }\n    return null\n  }\n}\n"]}
+{"version":3,"file":"local-to-remote.js","sourceRoot":"","sources":["../../src/collab/local-to-remote.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action, Operation, SlotLiteral, ComponentLiteral, makeError } from '@textbus/core'\nimport { Array as YArray, Map as YMap, Text as YText } from 'yjs'\n\nconst collaborateErrorFn = makeError('Collaborate')\n\nexport class LocalToRemote {\n  transform(operation: Operation, root: YText) {\n    const path = [...operation.path]\n    path.shift()\n    if (path.length) {\n      const componentIndex = path.shift()!\n      const sharedComponent = this.getSharedComponentByIndex(root, componentIndex)\n      if (sharedComponent) {\n        this.applyComponentOperationToSharedComponent(path, operation.apply, sharedComponent)\n      }\n      return\n    }\n    this.mergeActionsToSharedSlot(root, operation.apply)\n  }\n\n  private applyComponentOperationToSharedComponent(path: number[], actions: Action[], componentYMap: YMap<any>) {\n    const sharedSlots = componentYMap.get('slots') as YArray<any>\n    if (path.length) {\n      const slotIndex = path.shift()!\n      const sharedSlot = sharedSlots.get(slotIndex)\n      this.applySlotOperationToSharedSlot(path, actions, sharedSlot)\n      return\n    }\n    let index: number\n    actions.forEach(action => {\n      switch (action.type) {\n        case 'retain':\n          index = action.offset\n          break\n        case 'insertSlot':\n          sharedSlots.insert(index, [this.makeSharedSlotBySlotLiteral(action.slot)])\n          index++\n          break\n        case 'apply':\n          componentYMap.set('state', action.value)\n          break\n        case 'delete':\n          sharedSlots.delete(index, action.count)\n          break\n      }\n    })\n  }\n\n  private applySlotOperationToSharedSlot(path: number[], actions: Action[], slotYMap: YMap<any>) {\n    if (path.length) {\n      const componentIndex = path.shift()!\n      const sharedContent = slotYMap.get('content') as YText\n      const sharedComponent = this.getSharedComponentByIndex(sharedContent, componentIndex)!\n      this.applyComponentOperationToSharedComponent(path, actions, sharedComponent)\n      return\n    }\n    const content = slotYMap.get('content') as YText\n\n    this.mergeActionsToSharedSlot(content, actions, slotYMap)\n  }\n\n  private mergeActionsToSharedSlot(content: YText, actions: Action[], slotYMap?: YMap<any>) {\n    let index: number\n    let length: number\n\n    actions.forEach(action => {\n      if (action.type === 'retain') {\n        if (action.formats) {\n          content.format(index, action.offset, action.formats)\n        } else {\n          index = action.offset\n        }\n      } else if (action.type === 'insert') {\n        const delta = content.toDelta()\n        const isEmpty = delta.length === 1 && delta[0].insert === '\\n'\n\n        if (typeof action.content === 'string') {\n          length = action.content.length\n          content.insert(index, action.content)\n        } else {\n          length = 1\n          content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(action.content))\n        }\n        if (action.formats) {\n          content.format(index, length, action.formats)\n        }\n        if (isEmpty && index === 0) {\n          content.delete(content.length - 1, 1)\n        }\n        index += length\n      } else if (action.type === 'delete') {\n        const delta = content.toDelta()\n        content.delete(index, action.count)\n        if (content.length === 0) {\n          content.insert(0, '\\n', delta[0]?.attributes)\n        }\n      } else if (action.type === 'apply') {\n        slotYMap?.set('state', action.value)\n      }\n    })\n  }\n\n  private makeSharedSlotBySlotLiteral(slotLiteral: SlotLiteral): YMap<any> {\n    const content = new YText()\n    let index = 0\n    slotLiteral.content.forEach(i => {\n      let size: number\n      if (typeof i === 'string') {\n        size = i.length\n        content.insert(index, i)\n      } else {\n        size = 1\n        content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(i))\n      }\n      index += size\n    })\n    const formats = slotLiteral.formats\n    Object.keys(formats).forEach(key => {\n      const formatRanges = formats[key]\n      formatRanges.forEach(formatRange => {\n        content.format(formatRange.startIndex, formatRange.endIndex - formatRange.startIndex, {\n          [key]: formatRange.value\n        })\n      })\n    })\n\n    const sharedSlot = new YMap()\n    sharedSlot.set('content', content)\n    sharedSlot.set('schema', slotLiteral.schema)\n    sharedSlot.set('state', slotLiteral.state)\n    return sharedSlot\n  }\n\n  private makeSharedComponentByComponentLiteral(componentLiteral: ComponentLiteral): YMap<any> {\n    const slots = new YArray()\n    componentLiteral.slots.forEach(item => {\n      slots.push([this.makeSharedSlotBySlotLiteral(item)])\n    })\n    const sharedComponent = new YMap()\n    sharedComponent.set('name', componentLiteral.name)\n    sharedComponent.set('slots', slots)\n    sharedComponent.set('state', componentLiteral.state)\n    return sharedComponent\n  }\n\n  private getSharedComponentByIndex(host: YText, index: number): YMap<any> | null {\n    const delta = host.toDelta()\n    let i = 0\n    for (const action of delta) {\n      if (action.insert) {\n        if (i === index) {\n          return action.insert instanceof YMap ? action.insert : null\n        }\n        i += action.insert instanceof YMap ? 1 : action.insert.length\n      } else {\n        throw collaborateErrorFn('Unexpected delta action.')\n      }\n    }\n    return null\n  }\n}\n"]}

package/bundles/collab/remote-to-local.js

@@ -1,4 +1,6 @@
 import { YArrayEvent, YMapEvent, YTextEvent } from 'yjs';
+import { makeError } from '@textbus/core';
+const collaborateErrorFn = makeError('Collaborate');
 export class RemoteToLocal {
     constructor(translator, registry) {
         Object.defineProperty(this, "translator", {
@@ -54,7 +56,7 @@ export class RemoteToLocal {
                 }
                 else if (action.insert) {
                     action.insert.forEach(item => {
-                        slots.insert(this.translator.createSlot(item.toJSON()));
+                        slots.insert(this.createSlotBySharedSlot(item));
                     });
                 }
                 else if (action.delete) {
@@ -113,8 +115,15 @@ export class RemoteToLocal {
                 }
             });
         }
-        else {
-            throw new Error('xxx');
+        else if (ev instanceof YMapEvent) {
+            ev.keysChanged.forEach(key => {
+                if (key === 'state') {
+                    const state = ev.target.get('state');
+                    slot.updateState(draft => {
+                        Object.assign(draft, state);
+                    });
+                }
+            });
         }
     }
     createComponentBySharedComponent(yMap) {
@@ -149,7 +158,7 @@ export class RemoteToLocal {
                 }
             }
             else {
-                throw new Error('xxx');
+                throw collaborateErrorFn('Unexpected delta action.');
             }
         }
         return slot;

package/bundles/collab/remote-to-local.js.map

@@ -1 +1 @@
-{"version":3,"file":"remote-to-local.js","sourceRoot":"","sources":["../../src/collab/remote-to-local.ts"],"names":[],"mappings":"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","sourcesContent":["import { Map as YMap, YArrayEvent, YEvent, YMapEvent, Text as YText, YTextEvent, Array as YArray } from 'yjs'\nimport { ComponentInstance, ComponentLiteral, Registry, Slot, Translator } from '@textbus/core'\n\ntype YPath = [number, string][]\n\nexport class RemoteToLocal {\n  constructor(private translator: Translator,\n              private registry: Registry) {\n  }\n\n  transform(events: YEvent[], slot: Slot) {\n    events.forEach(ev => {\n      const path: YPath = []\n\n      for (let i = 0; i < ev.path.length; i += 2) {\n        path.push(ev.path.slice(i, i + 2) as [number, string])\n      }\n\n      if (path.length) {\n        const componentIndex = path.shift()![0] as number\n        const component = slot.getContentAtIndex(componentIndex) as ComponentInstance\n        this.applySharedComponentToComponent(ev, path, component)\n        return\n      }\n\n      this.applySharedSlotToSlot(ev, path, slot)\n    })\n  }\n\n  private applySharedComponentToComponent(ev: YEvent, path: YPath, component: ComponentInstance) {\n    if (path.length) {\n      const childPath = path.shift()!\n      const slot = component.slots.get(childPath[0])!\n      this.applySharedSlotToSlot(ev, path, slot)\n      return\n    }\n    if (ev instanceof YMapEvent) {\n      ev.keysChanged.forEach(key => {\n        if (key === 'state') {\n          const state = (ev.target as YMap<any>).get('state')\n          component.updateState(draft => {\n            Object.assign(draft, state)\n          })\n        }\n      })\n    } else if (ev instanceof YArrayEvent) {\n      const slots = component.slots\n      ev.delta.forEach(action => {\n        if (Reflect.has(action, 'retain')) {\n          slots.retain(action.retain!)\n        } else if (action.insert) {\n          (action.insert as Array<any>).forEach(item => {\n            slots.insert(this.translator.createSlot(item.toJSON())!)\n          })\n        } else if (action.delete) {\n          slots.retain(slots.index)\n          slots.delete(action.delete)\n        }\n      })\n    }\n  }\n\n  private applySharedSlotToSlot(ev: YEvent, path: YPath, slot: Slot) {\n    if (path.length) {\n      path.shift()\n      const delta = (ev.target.parent as YText).toDelta()\n      let componentIndex = 0\n      for (let i = 0; i < delta.length; i++) {\n        const action = delta[i]\n        if (action.insert === ev.target) {\n          break\n        }\n        componentIndex += typeof action.insert === 'string' ? action.insert.length : 1\n      }\n      const component = slot.getContentAtIndex(componentIndex) as ComponentInstance\n      this.applySharedComponentToComponent(ev, path, component)\n      return\n    }\n\n    if (ev instanceof YTextEvent) {\n      slot.retain(0)\n      ev.delta.forEach(action => {\n        if (Reflect.has(action, 'retain')) {\n          if (action.attributes) {\n            slot.retain(action.retain!, Object.keys(action.attributes).map(key => {\n              return [this.registry.getFormatter(key)!, action.attributes![key]]\n            }))\n          }\n          slot.retain(action.retain!)\n        } else if (action.insert) {\n          if (typeof action.insert === 'string') {\n            slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {\n              return [this.registry.getFormatter(key)!, action.attributes![key]]\n            }) : [])\n          } else {\n            const component = this.createComponentBySharedComponent(action.insert as YMap<any>)\n            slot.insert(component)\n          }\n        } else if (action.delete) {\n          slot.retain(slot.index)\n          slot.delete(action.delete)\n        } else if (action.attributes) {\n          slot.updateState(draft => {\n            Object.assign(draft, action.attributes)\n          })\n        }\n      })\n    } else {\n      throw new Error('xxx')\n    }\n  }\n\n  private createComponentBySharedComponent(yMap: YMap<any>): ComponentInstance {\n    const slots = yMap.get('slots') as YArray<YMap<any>>\n    const componentLiteral: ComponentLiteral = {\n      state: yMap.get('state'),\n      name: yMap.get('name'),\n      slots: slots.map(sharedSlot => {\n        return this.createSlotBySharedSlot(sharedSlot).toJSON()\n      })\n    }\n    return this.translator.createComponent(componentLiteral)!\n  }\n\n  private createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {\n    const content = sharedSlot.get('content') as YText\n    const delta = content.toDelta()\n\n    const slot = this.translator.createSlot({\n      schema: sharedSlot.get('schema'),\n      state: sharedSlot.get('state'),\n      formats: {},\n      content: []\n    })\n\n    for (const action of delta) {\n      if (action.insert) {\n        if (typeof action.insert === 'string') {\n          slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {\n            return [this.registry.getFormatter(key)!, action.attributes![key]]\n          }) : [])\n        } else {\n          slot.insert(this.createComponentBySharedComponent(action.insert))\n        }\n      } else {\n        throw new Error('xxx')\n      }\n    }\n    return slot\n  }\n}\n"]}
+{"version":3,"file":"remote-to-local.js","sourceRoot":"","sources":["../../src/collab/remote-to-local.ts"],"names":[],"mappings":"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","sourcesContent":["import { Map as YMap, YArrayEvent, YEvent, YMapEvent, Text as YText, YTextEvent, Array as YArray } from 'yjs'\nimport { ComponentInstance, ComponentLiteral, makeError, Registry, Slot, Translator } from '@textbus/core'\n\ntype YPath = [number, string][]\nconst collaborateErrorFn = makeError('Collaborate')\n\nexport class RemoteToLocal {\n  constructor(private translator: Translator,\n              private registry: Registry) {\n  }\n\n  transform(events: YEvent[], slot: Slot) {\n    events.forEach(ev => {\n      const path: YPath = []\n\n      for (let i = 0; i < ev.path.length; i += 2) {\n        path.push(ev.path.slice(i, i + 2) as [number, string])\n      }\n\n      if (path.length) {\n        const componentIndex = path.shift()![0] as number\n        const component = slot.getContentAtIndex(componentIndex) as ComponentInstance\n        this.applySharedComponentToComponent(ev, path, component)\n        return\n      }\n\n      this.applySharedSlotToSlot(ev, path, slot)\n    })\n  }\n\n  private applySharedComponentToComponent(ev: YEvent, path: YPath, component: ComponentInstance) {\n    if (path.length) {\n      const childPath = path.shift()!\n      const slot = component.slots.get(childPath[0])!\n      this.applySharedSlotToSlot(ev, path, slot)\n      return\n    }\n    if (ev instanceof YMapEvent) {\n      ev.keysChanged.forEach(key => {\n        if (key === 'state') {\n          const state = (ev.target as YMap<any>).get('state')\n          component.updateState(draft => {\n            Object.assign(draft, state)\n          })\n        }\n      })\n    } else if (ev instanceof YArrayEvent) {\n      const slots = component.slots\n      ev.delta.forEach(action => {\n        if (Reflect.has(action, 'retain')) {\n          slots.retain(action.retain!)\n        } else if (action.insert) {\n          (action.insert as Array<YMap<any>>).forEach(item => {\n            slots.insert(this.createSlotBySharedSlot(item))\n          })\n        } else if (action.delete) {\n          slots.retain(slots.index)\n          slots.delete(action.delete)\n        }\n      })\n    }\n  }\n\n  private applySharedSlotToSlot(ev: YEvent, path: YPath, slot: Slot) {\n    if (path.length) {\n      path.shift()\n      const delta = (ev.target.parent as YText).toDelta()\n      let componentIndex = 0\n      for (let i = 0; i < delta.length; i++) {\n        const action = delta[i]\n        if (action.insert === ev.target) {\n          break\n        }\n        componentIndex += typeof action.insert === 'string' ? action.insert.length : 1\n      }\n      const component = slot.getContentAtIndex(componentIndex) as ComponentInstance\n      this.applySharedComponentToComponent(ev, path, component)\n      return\n    }\n\n    if (ev instanceof YTextEvent) {\n      slot.retain(0)\n      ev.delta.forEach(action => {\n        if (Reflect.has(action, 'retain')) {\n          if (action.attributes) {\n            slot.retain(action.retain!, Object.keys(action.attributes).map(key => {\n              return [this.registry.getFormatter(key)!, action.attributes![key]]\n            }))\n          }\n          slot.retain(action.retain!)\n        } else if (action.insert) {\n          if (typeof action.insert === 'string') {\n            slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {\n              return [this.registry.getFormatter(key)!, action.attributes![key]]\n            }) : [])\n          } else {\n            const component = this.createComponentBySharedComponent(action.insert as YMap<any>)\n            slot.insert(component)\n          }\n        } else if (action.delete) {\n          slot.retain(slot.index)\n          slot.delete(action.delete)\n        } else if (action.attributes) {\n          slot.updateState(draft => {\n            Object.assign(draft, action.attributes)\n          })\n        }\n      })\n    } else if (ev instanceof YMapEvent) {\n      ev.keysChanged.forEach(key => {\n        if (key === 'state') {\n          const state = (ev.target as YMap<any>).get('state')\n          slot.updateState(draft => {\n            Object.assign(draft, state)\n          })\n        }\n      })\n    }\n  }\n\n  private createComponentBySharedComponent(yMap: YMap<any>): ComponentInstance {\n    const slots = yMap.get('slots') as YArray<YMap<any>>\n    const componentLiteral: ComponentLiteral = {\n      state: yMap.get('state'),\n      name: yMap.get('name'),\n      slots: slots.map(sharedSlot => {\n        return this.createSlotBySharedSlot(sharedSlot).toJSON()\n      })\n    }\n    return this.translator.createComponent(componentLiteral)!\n  }\n\n  private createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {\n    const content = sharedSlot.get('content') as YText\n    const delta = content.toDelta()\n\n    const slot = this.translator.createSlot({\n      schema: sharedSlot.get('schema'),\n      state: sharedSlot.get('state'),\n      formats: {},\n      content: []\n    })\n\n    for (const action of delta) {\n      if (action.insert) {\n        if (typeof action.insert === 'string') {\n          slot.insert(action.insert, action.attributes ? Object.keys(action.attributes).map(key => {\n            return [this.registry.getFormatter(key)!, action.attributes![key]]\n          }) : [])\n        } else {\n          slot.insert(this.createComponentBySharedComponent(action.insert))\n        }\n      } else {\n        throw collaborateErrorFn('Unexpected delta action.')\n      }\n    }\n    return slot\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-alpha.39",
+  "version": "2.0.0-alpha.40",
   "description": "TextBus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/public-api.js",
   "module": "./bundles/public-api.js",
@@ -27,8 +27,8 @@
   "dependencies": {
     "@tanbo/di": "^1.0.5",
     "@tanbo/stream": "^0.0.12",
-    "@textbus/browser": "^2.0.0-alpha.39",
-    "@textbus/core": "^2.0.0-alpha.39",
+    "@textbus/browser": "^2.0.0-alpha.40",
+    "@textbus/core": "^2.0.0-alpha.40",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.27"
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "a3de1ffbf0b8527eff875cd415b5d8d16df91ecb"
+  "gitHead": "8b4da87f5f142fea6243a956e03d39bb42eccc4b"
 }

package/src/collab/collaborate-cursor.ts

@@ -14,7 +14,18 @@ export interface SelectionRect {
   y: number
   width: number
   height: number
+}
+
+export interface SelectionInfo {
   color: string
+  username: string
+  rects: SelectionRect[]
+}
+
+export interface RemoteSelectionCursor {
+  cursor: HTMLElement
+  anchor: HTMLElement
+  userTip: HTMLElement
 }
 
 @Injectable()
@@ -31,20 +42,36 @@ export class CollaborateCursor {
     }
   }) as HTMLCanvasElement
   private context = this.canvas.getContext('2d')!
+  private tooltips = createElement('div', {
+    styles: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      fontSize: '12px'
+    }
+  })
 
-  private onRectChange = new Subject<SelectionRect>()
+  private onRectsChange = new Subject<SelectionInfo>()
 
   constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
               @Inject(EDITABLE_DOCUMENT) private document: Document,
               private nativeSelection: SelectionBridge,
               private selection: Selection) {
     container.appendChild(this.canvas)
-    this.onRectChange.subscribe(rect => {
-      this.context.fillStyle = rect.color
-      this.context.beginPath()
-      this.context.rect(Math.ceil(rect.x), Math.ceil(rect.y), Math.ceil(rect.width), Math.ceil(rect.height))
-      this.context.fill()
-      this.context.closePath()
+    container.appendChild(this.tooltips)
+    this.onRectsChange.subscribe(info => {
+      const color = info.color
+      const rects = info.rects
+      for (const rect of rects) {
+        this.context.fillStyle = color
+        this.context.beginPath()
+        this.context.rect(rect.x, rect.y, rect.width, rect.height)
+        this.context.fill()
+        this.context.closePath()
+      }
     })
   }
 
@@ -53,6 +80,8 @@ export class CollaborateCursor {
     this.canvas.height = this.container.offsetHeight
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
 
+    const users: SelectionInfo[] = []
+
     paths.filter(i => {
       return i.paths.start.length && i.paths.end.length
     }).forEach(item => {
@@ -74,34 +103,131 @@ export class CollaborateCursor {
           nativeRange.setEnd(position.end.node, position.end.offset)
 
           const rects = nativeRange.getClientRects()
-          let prev: any = {}
+          const selectionRects: SelectionRect[] = []
           for (let i = rects.length - 1; i >= 0; i--) {
             const rect = rects[i]
-            if (prev.y === rect.y) {
-              continue
-            }
-            prev = rect
-            this.onRectChange.next({
+            selectionRects.push({
               x: rect.x,
               y: rect.y,
               width: rect.width,
               height: rect.height,
-              color: item.color
             })
           }
 
           if (rects.length === 0) {
             const rect = nativeRange.getBoundingClientRect()
-            this.onRectChange.next({
-              x: rect.x,
-              y: rect.y,
-              width: 1,
-              height: rect.height,
-              color: item.color
-            })
+            if (rect.x !== 0 || rect.y !== 0 || rect.width !== 0 || rect.height !== 0) {
+              selectionRects.push({
+                x: rect.x,
+                y: rect.y,
+                width: 1,
+                height: rect.height,
+              })
+            }
+          }
+          const info: SelectionInfo = {
+            ...item,
+            rects: selectionRects
           }
+          this.onRectsChange.next(info)
+
+          users.push(info)
         }
       }
     })
+    this.drawUserCursor(users)
+  }
+
+  private drawUserCursor(users: SelectionInfo[]) {
+    for (let i = 0; i < users.length; i++) {
+      const user = users[i]
+      const last = user.rects[user.rects.length - 1]
+
+      const {cursor, userTip, anchor} = this.getUserCursor(i)
+      if (!last) {
+        cursor.style.display = 'none'
+      } else {
+        Object.assign(cursor.style, {
+          left: last.x + last.width + 'px',
+          top: last.y + 'px',
+          width: '2px',
+          height: last.height + 'px',
+          background: user.color,
+          display: 'block'
+        })
+        anchor.style.background = user.color
+        userTip.innerText = user.username
+        userTip.style.background = user.color
+      }
+    }
+
+    for (let i = users.length; i < this.tooltips.children.length; i++) {
+      this.tooltips.removeChild(this.tooltips.children[i])
+    }
+  }
+
+  private getUserCursor(index: number): RemoteSelectionCursor {
+    let child: HTMLElement = this.tooltips.children[index] as HTMLElement
+    if (child) {
+      const anchor = child.children[0] as HTMLElement
+      return {
+        cursor: child,
+        anchor,
+        userTip: anchor.children[0] as HTMLElement
+      }
+    }
+    const userTip = createElement('span', {
+      styles: {
+        position: 'absolute',
+        display: 'none',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        marginBottom: '2px',
+        bottom: '100%',
+        whiteSpace: 'nowrap',
+        color: '#fff',
+        boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+        borderRadius: '3px',
+        padding: '3px 5px',
+        pointerEvents: 'none',
+      }
+    })
+
+    const anchor = createElement('span', {
+      styles: {
+        position: 'absolute',
+        top: '-2px',
+        left: '-2px',
+        width: '6px',
+        height: '6px',
+        pointerEvents: 'auto',
+        pointer: 'cursor',
+      },
+      children: [userTip],
+      on: {
+        mouseenter() {
+          anchor.style.transform = 'scale(1.2)'
+          userTip.style.display = 'block'
+        },
+        mouseleave() {
+          userTip.style.display = 'none'
+          anchor.style.transform = ''
+        }
+      }
+    })
+    child = createElement('span', {
+      styles: {
+        position: 'absolute',
+      },
+      children: [
+        anchor
+      ]
+    })
+    this.tooltips.append(child)
+    return {
+      cursor: child,
+      anchor,
+      userTip
+    }
   }
 }

package/src/collab/local-to-remote.ts

@@ -1,6 +1,8 @@
-import { Action, Operation, SlotLiteral, ComponentLiteral } from '@textbus/core'
+import { Action, Operation, SlotLiteral, ComponentLiteral, makeError } from '@textbus/core'
 import { Array as YArray, Map as YMap, Text as YText } from 'yjs'
 
+const collaborateErrorFn = makeError('Collaborate')
+
 export class LocalToRemote {
   transform(operation: Operation, root: YText) {
     const path = [...operation.path]
@@ -54,10 +56,10 @@ export class LocalToRemote {
     }
     const content = slotYMap.get('content') as YText
 
-    this.mergeActionsToSharedSlot(content, actions)
+    this.mergeActionsToSharedSlot(content, actions, slotYMap)
   }
 
-  private mergeActionsToSharedSlot(content: YText, actions: Action[]) {
+  private mergeActionsToSharedSlot(content: YText, actions: Action[], slotYMap?: YMap<any>) {
     let index: number
     let length: number
 
@@ -93,7 +95,7 @@ export class LocalToRemote {
           content.insert(0, '\n', delta[0]?.attributes)
         }
       } else if (action.type === 'apply') {
-        content.setAttribute('state', action.value)
+        slotYMap?.set('state', action.value)
       }
     })
   }
@@ -125,6 +127,7 @@ export class LocalToRemote {
     const sharedSlot = new YMap()
     sharedSlot.set('content', content)
     sharedSlot.set('schema', slotLiteral.schema)
+    sharedSlot.set('state', slotLiteral.state)
     return sharedSlot
   }
 
@@ -150,7 +153,7 @@ export class LocalToRemote {
         }
         i += action.insert instanceof YMap ? 1 : action.insert.length
       } else {
-        throw new Error('xxx')
+        throw collaborateErrorFn('Unexpected delta action.')
       }
     }
     return null

package/src/collab/remote-to-local.ts

@@ -1,7 +1,8 @@
 import { Map as YMap, YArrayEvent, YEvent, YMapEvent, Text as YText, YTextEvent, Array as YArray } from 'yjs'
-import { ComponentInstance, ComponentLiteral, Registry, Slot, Translator } from '@textbus/core'
+import { ComponentInstance, ComponentLiteral, makeError, Registry, Slot, Translator } from '@textbus/core'
 
 type YPath = [number, string][]
+const collaborateErrorFn = makeError('Collaborate')
 
 export class RemoteToLocal {
   constructor(private translator: Translator,
@@ -49,8 +50,8 @@ export class RemoteToLocal {
         if (Reflect.has(action, 'retain')) {
           slots.retain(action.retain!)
         } else if (action.insert) {
-          (action.insert as Array<any>).forEach(item => {
-            slots.insert(this.translator.createSlot(item.toJSON())!)
+          (action.insert as Array<YMap<any>>).forEach(item => {
+            slots.insert(this.createSlotBySharedSlot(item))
           })
         } else if (action.delete) {
           slots.retain(slots.index)
@@ -105,8 +106,15 @@ export class RemoteToLocal {
           })
         }
       })
-    } else {
-      throw new Error('xxx')
+    } else if (ev instanceof YMapEvent) {
+      ev.keysChanged.forEach(key => {
+        if (key === 'state') {
+          const state = (ev.target as YMap<any>).get('state')
+          slot.updateState(draft => {
+            Object.assign(draft, state)
+          })
+        }
+      })
     }
   }
 
@@ -143,7 +151,7 @@ export class RemoteToLocal {
           slot.insert(this.createComponentBySharedComponent(action.insert))
         }
       } else {
-        throw new Error('xxx')
+        throw collaborateErrorFn('Unexpected delta action.')
       }
     }
     return slot