feat: try to use inner annotations model to cursors

packages/client/src/Connection.ts

@@ -3,12 +3,14 @@ import Immutable from 'immutable'
 import io from 'socket.io-client'
 
 import { Value, Operation } from 'slate'
-import { ConnectionModel } from './model'
+import { ConnectionModel, ExtendedEditor } from './model'
 
 import {
+  setCursor,
+  removeCursor,
+  cursorOpFilter,
   applySlateOps,
   toSlateOp,
-  hexGen,
   toJS
 } from '@slate-collaborative/bridge'
 
@@ -18,7 +20,7 @@ class Connection {
   docSet: Automerge.DocSet<any>
   connection: Automerge.Connection<any>
   socket: SocketIOClient.Socket
-  editor: any
+  editor: ExtendedEditor
   connectOpts: any
   selection: any
   onConnect?: () => void
@@ -56,6 +58,9 @@ class Connection {
     const currentDoc = this.docSet.getDoc(this.docId)
     const docNew = this.connection.receiveMsg(data)
 
+    console.log('current doc before updates', toJS(currentDoc))
+    console.log('new doc with remote updates!!', toJS(docNew))
+
     if (!docNew) {
       return
     }
@@ -88,25 +93,31 @@ class Connection {
   setCursors = cursors => {
     if (!cursors) return
 
-    const {
-      value: { annotations }
-    } = this.editor
+    // const {
+    //   value: { annotations }
+    // } = this.editor
 
-    const keyMap = {}
+    // const keyMap = {}
 
-    console.log('cursors', cursors)
+    // console.log('cursors', cursors)
 
-    this.editor.withoutSaving(() => {
-      annotations.forEach(anno => {
-        this.editor.removeAnnotation(anno)
-      })
+    // this.editor.withoutSaving(() => {
+    //   annotations.forEach(anno => {
+    //     this.editor.removeAnnotation(anno)
+    //   })
 
-      Object.keys(cursors).forEach(key => {
-        if (key !== this.socket.id && !keyMap[key]) {
-          this.editor.addAnnotation(toJS(cursors[key]))
-        }
-      })
-    })
+    //   Object.keys(cursors).forEach(key => {
+    //     if (key !== this.socket.id && !keyMap[key]) {
+    //       this.editor.addAnnotation(toJS(cursors[key]))
+    //     }
+    //   })
+    // })
+
+    console.log(
+      '!!!!VAL',
+      this.connectOpts.query.name,
+      this.editor.value.toJSON({ preserveAnnotations: true })
+    )
   }
 
   receiveSlateOps = (operations: Immutable.List<Operation>) => {
@@ -115,52 +126,25 @@ class Connection {
 
     if (!doc) return
 
-    operations = operations.filter(op => op.type !== 'set_selection')
+    const {
+      value: { selection }
+    } = this.editor
 
-    const { value } = this.editor
-
-    const { selection } = value
-
-    const meta = {
+    const cursorData = {
       id: this.socket.id,
       selection,
+      selectionOps: operations.filter(op => op.type === 'set_selection'),
       annotationType: 'collaborative_selection'
     }
 
-    const cursor = doc.cursors[meta.id]
-    const cursorStart = cursor && cursor.anchor && cursor.anchor.offset
-    const cursorEnd = cursor && cursor.focus && cursor.focus.offset
-
-    console.log('cursor!!', cursorStart, cursorEnd)
-    console.log('selection!!', selection.start.offset, selection.end.offset)
-
-    if (
-      selection.start.offset !== cursorStart ||
-      selection.end.offset !== cursorEnd
-    ) {
-      console.log(
-        '!!!!!! append selection op!!!',
-        selection.start.toJS(),
-        selection.end.toJS()
-      )
-      const opData = {
-        type: 'set_selection',
-        properties: cursor || {},
-        newProperties: {
-          anchor: selection.start,
-          focus: selection.end
-        }
-      }
-
-      const op = Operation.fromJSON(opData)
-
-      operations = operations.push(op)
-    }
+    const withCursor = selection.isFocused ? setCursor : removeCursor
 
     const changed = Automerge.change(doc, message, (d: any) =>
-      applySlateOps(d, operations, meta)
+      withCursor(applySlateOps(d, cursorOpFilter(d, operations)), cursorData)
     )
 
+    console.log('doc with annotations!!', toJS(changed))
+
     this.docSet.setDoc(this.docId, changed)
   }
 

packages/client/src/model.ts

@@ -1,16 +1,22 @@
-import { Editor } from 'slate'
+import { Editor, Controller, Value } from 'slate'
 import { PluginOptions } from './index'
 import Connection from './Connection'
 
-export interface ConnectionModel extends PluginOptions {
-  editor: Editor
-  onConnect: () => void
-  onDisconnect: () => void
+interface FixedController extends Controller {
+  setValue: (value: Value) => void
 }
 
 export interface ExtendedEditor extends Editor {
-  remote: boolean
-  connection: Connection
+  remote?: boolean
+  connection?: Connection
+  controller: FixedController
+  setFocus: () => void
+}
+
+export interface ConnectionModel extends PluginOptions {
+  editor: ExtendedEditor
+  onConnect: () => void
+  onDisconnect: () => void
 }
 
 export interface ControllerProps extends PluginOptions {

packages/client/src/renderAnnotation.tsx

@@ -18,7 +18,9 @@ const renderAnnotation = (props, editor, next) => {
   const { children, annotation, attributes, node } = props
 
   const isBackward = annotation.data.get('isBackward')
-  const cursorPath = annotation.data.get('cursorPath')
+  const cursorPath = isBackward ? annotation.anchor.path : annotation.focus.path
+
+  console.log('renderAnnotation', props, isBackward, cursorPath)
 
   const cursorStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' }
 
@@ -28,6 +30,7 @@ const renderAnnotation = (props, editor, next) => {
 
   const isTarget = targetNode && targetNode.key === node.key
 
+  console.log('isTarget', isTarget, targetNode, node)
   const showCursor = isTarget
 
   switch (annotation.type) {