feat: success show cursor position

packages/client/src/Connection.ts

@@ -87,29 +87,23 @@ class Connection {
 
   setCursors = cursors => {
     if (!cursors) return
-    // console.log('setCursors', cursors)
+
     const {
       value: { annotations }
     } = this.editor
 
     const keyMap = {}
 
+    console.log('cursors', cursors)
+
     this.editor.withoutSaving(() => {
       annotations.forEach(anno => {
-        // if (cursors[anno.key]) {
-        //   console.log('set cursor', anno, )
-        //   this.editor.setAnnotation(anno, cursors[anno.key])
-        //   keyMap[anno.key] = true
-        // } else {
-        //   this.editor.removeAnnotation(anno)
-        // }
-
         this.editor.removeAnnotation(anno)
       })
 
       Object.keys(cursors).forEach(key => {
         if (key !== this.socket.id && !keyMap[key]) {
-          this.editor.addAnnotation(cursors[key])
+          this.editor.addAnnotation(toJS(cursors[key]))
         }
       })
     })
@@ -121,11 +115,42 @@ class Connection {
 
     if (!doc) return
 
+    const selectionOps = operations.filter(op => op.type === 'set_selection')
+
+    console.log('hasSelectionOps', selectionOps.size)
+
+    const { value } = this.editor
+
+    const { selection } = value
+
+    const meta = {
+      id: this.socket.id,
+      selection,
+      annotationType: 'collaborative_selection'
+    }
+
+    const cursor = doc.cursors[meta.id]
+    const cursorOffset = cursor && cursor.anchor && cursor.anchor.offset
+
+    if (!selectionOps.size && selection.start.offset !== cursorOffset) {
+      const opData = {
+        type: 'set_selection',
+        properties: {},
+        newProperties: {
+          anchor: selection.start,
+          focus: selection.end
+        }
+      }
+
+      const op = Operation.fromJSON(opData)
+
+      operations = operations.push(op)
+    }
+
+    console.log('operations', operations.toJSON())
+
     const changed = Automerge.change(doc, message, (d: any) =>
-      applySlateOps(d, operations, {
-        id: this.socket.id,
-        selection: this.editor.value.selection
-      })
+      applySlateOps(d, operations, meta)
     )
 
     this.docSet.setDoc(this.docId, changed)

packages/client/src/renderAnnotation.tsx

@@ -15,23 +15,30 @@ const cursorStyleBase = {
 } as any
 
 const renderAnnotation = (props, editor, next) => {
-  const { children, annotation, attributes } = props
+  const { children, annotation, attributes, node } = props
 
-  const isLeft = annotation.focus.offset >= annotation.anchor.offset
+  const isBackward = annotation.data.get('isBackward')
+  const cursorPath = annotation.data.get('cursorPath')
 
-  console.log('isLeft', isLeft)
+  const cursorStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' }
 
-  const cursorStyles = { ...cursorStyleBase, left: isLeft ? '0%' : '100%' }
+  const { document } = editor.value
 
-  console.log('renderAnnotation', annotation.toJSON())
+  const targetNode = document.getNode(cursorPath)
+
+  const isTarget = targetNode && targetNode.key === node.key
+
+  const showCursor = isTarget
 
   switch (annotation.type) {
     case 'collaborative_selection':
       return (
         <span {...attributes} style={wrapStyles}>
-          <span contentEditable={false} style={cursorStyles}>
-            {annotation.key}
-          </span>
+          {showCursor ? (
+            <span contentEditable={false} style={cursorStyles}>
+              {annotation.key}
+            </span>
+          ) : null}
           {children}
         </span>
       )