feat: try to use inner annotations model to cursors

packages/bridge/src/apply/index.ts

@@ -3,7 +3,6 @@ import { Operation, Operations, SyncDoc } from '../model'
 import node from './node'
 import mark from './mark'
 import text from './text'
-import selection from './selection'
 import annotation from './annotation'
 
 const setSelection = doc => doc
@@ -14,20 +13,17 @@ const opType: any = {
   ...annotation,
   ...node,
   ...mark,
-  ...selection
+  set_selection: setSelection
   // set_value: setValue
 }
 
-export const applyOperation = meta => (
+export const applyOperation = (doc: SyncDoc, op: Operation): SyncDoc => {
-  doc: SyncDoc,
-  op: Operation
-): SyncDoc => {
   try {
     const applyOp = opType[op.type]
 
     if (!applyOp) throw new TypeError('Unsupported operation type!')
 
-    return applyOp(doc, op, meta)
+    return applyOp(doc, op)
   } catch (e) {
     console.error(e)
 
@@ -35,5 +31,5 @@ export const applyOperation = meta => (
   }
 }
 
-export const applySlateOps = (doc: SyncDoc, operations: Operations, meta) =>
+export const applySlateOps = (doc: SyncDoc, operations: Operations) =>
-  operations.reduce(applyOperation(meta), doc)
+  operations.reduce(applyOperation, doc)

packages/bridge/src/apply/selection.ts

@@ -1,37 +0,0 @@
-import { toJS } from '../utils'
-
-const setSelection = (doc, op, { id, selection, annotationType }) => {
-  if (!doc.cursors) {
-    doc.cursors = {}
-  }
-
-  const operation = op.toJS()
-
-  if (!doc.cursors[id]) {
-    doc.cursors[id] = {
-      key: id,
-      type: annotationType,
-      data: {}
-    }
-  }
-
-  const cursor = doc.cursors[id]
-  const { focus, anchor } = operation.newProperties
-
-  if (focus) cursor.focus = focus
-  if (anchor) cursor.anchor = anchor
-
-  const cursorPath = cursor.data.isBackward
-    ? anchor && anchor.path
-    : focus && focus.path
-
-  if (cursorPath) cursor.data.cursorPath = toJS(cursorPath)
-
-  cursor.data.isBackward = selection.isBackward
-
-  return doc
-}
-
-export default {
-  set_selection: setSelection
-}

packages/bridge/src/convert/index.ts

@@ -30,7 +30,11 @@ const toSlateOp = (ops: Automerge.Diff[], currentTree) => {
     []
   ])
 
-  return defer.flatMap(op => op(tempTree, currentTree))
+  const res = defer.flatMap(op => op(tempTree, currentTree))
+
+  console.log('toSlate@@@', ops, res)
+
+  return res
 }
 
 export { toSlateOp }

packages/bridge/src/convert/insert.ts

@@ -52,7 +52,7 @@ const opInsert = (op: Automerge.Diff, [map, ops]) => {
 
     if (link && map[obj]) {
       map[obj].splice(index, 0, map[value] || value)
-    } else if (type === 'text' && !path) {
+    } else if ((type === 'text' || type === 'list') && !path) {
       map[obj] = map[obj]
         ? map[obj]
             .slice(0, index)

packages/bridge/src/convert/remove.ts

@@ -40,10 +40,18 @@ const removeNodesOp = ({ index, obj, path }: Automerge.Diff) => (map, doc) => {
   }
 }
 
+const removeAnnotationOp = ({ key }: Automerge.Diff) => (map, doc) => {
+  return {
+    type: 'remove_annotation',
+    annotation: toJS(doc.annotations[key])
+  }
+}
+
 const removeByType = {
   text: removeTextOp,
   nodes: removeNodesOp,
-  marks: removeMarkOp
+  marks: removeMarkOp,
+  annotations: removeAnnotationOp
 }
 
 const opRemove = (op: Automerge.Diff, [map, ops]) => {

packages/bridge/src/convert/set.ts

@@ -10,6 +10,31 @@ const setDataOp = ({ path, value }: Automerge.Diff) => map => ({
   }
 })
 
+const AnnotationSetOp = ({ key, value }: Automerge.Diff) => (map, doc) => {
+  if (!doc.annotations) {
+    doc.annotations = {}
+  }
+
+  let op
+
+  if (!doc.annotations[key]) {
+    op = {
+      type: 'add_annotation',
+      annotation: map[value]
+    }
+  } else {
+    op = {
+      type: 'set_annotation',
+      properties: doc.annotations[key],
+      newProperties: map[value]
+    }
+  }
+
+  console.log('opSET!!', key, map[value], op)
+
+  return op
+}
+
 const setByType = {
   data: setDataOp
 }
@@ -25,6 +50,13 @@ const opSet = (op: Automerge.Diff, [map, ops]) => {
       map[obj][key] = link ? map[value] : value
     }
 
+    /**
+     * Annotation
+     */
+    if (path && path.length === 1 && path[0] === 'annotations') {
+      ops.push(AnnotationSetOp(op))
+    }
+
     return [map, ops]
   } catch (e) {
     console.error(e, op, toJS(map))

packages/bridge/src/cursor/index.ts

@@ -0,0 +1,88 @@
+import { toJS } from '../utils'
+
+import { Operation } from 'slate'
+import { List } from 'immutable'
+
+export const setCursor = (
+  doc,
+  { id, selection, selectionOps, annotationType }
+) => {
+  if (!doc.annotations) {
+    doc.annotations = {}
+  }
+
+  if (!doc.annotations[id]) {
+    doc.annotations[id] = {
+      key: id,
+      type: annotationType,
+      data: {}
+    }
+  }
+
+  const annotation = toJS(doc.annotations[id])
+
+  if (selectionOps.size) {
+    selectionOps.forEach(op => {
+      const { newProperties } = op.toJSON()
+
+      if (newProperties.focus) annotation.focus = newProperties.focus
+      if (newProperties.anchor) annotation.anchor = newProperties.anchor
+      if (newProperties.data) annotation.data = newProperties.data
+    })
+  }
+
+  const cursorStart = annotation.anchor && annotation.anchor.offset
+  const cursorEnd = annotation.focus && annotation.focus.offset
+
+  console.log('cursor!!', cursorStart, cursorEnd)
+  console.log(
+    'selection!!',
+    annotation,
+    selection.start.offset,
+    selection.end.offset
+  )
+
+  if (selection.start.offset !== cursorStart) {
+    annotation.focus = selection.end.toJS() || {}
+  }
+
+  if (selection.end.offset !== cursorEnd) {
+    annotation.anchor = selection.start.toJS() || {}
+  }
+
+  annotation.data.isBackward = selection.isBackward
+
+  console.log('setted cursor', annotation, toJS(doc))
+
+  doc.annotations[id] = annotation
+
+  return doc
+}
+
+export const removeCursor = (doc, { id }) => {
+  console.log('!!!removeCursor', doc, id)
+  if (doc.annotations && doc.annotations[id]) {
+    delete doc.annotations[id]
+  }
+
+  return doc
+}
+
+export const cursorOpFilter = (doc, ops: List<Operation>) =>
+  ops.filter(op => {
+    const { annotations } = doc
+
+    if (op.type === 'set_annotation') {
+      return !(
+        (op.properties && annotations[op.properties.key]) ||
+        (op.newProperties && annotations[op.newProperties.key])
+      )
+    } else if (
+      op.type === 'add_annotation' ||
+      op.type === 'remove_annotation'
+    ) {
+      return !annotations[op.annotation.key]
+    }
+
+    return true
+  })

packages/bridge/src/index.ts

@@ -1,3 +1,4 @@
 export * from './apply'
 export * from './convert'
 export * from './utils'
+export * from './cursor'

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 {
+    // const {
-      value: { annotations }
+    //   value: { annotations }
-    } = this.editor
+    // } = this.editor
 
-    const keyMap = {}
+    // const keyMap = {}
 
-    console.log('cursors', cursors)
+    // console.log('cursors', cursors)
 
-    this.editor.withoutSaving(() => {
+    // this.editor.withoutSaving(() => {
-      annotations.forEach(anno => {
+    //   annotations.forEach(anno => {
-        this.editor.removeAnnotation(anno)
+    //     this.editor.removeAnnotation(anno)
-      })
+    //   })
 
-      Object.keys(cursors).forEach(key => {
+    //   Object.keys(cursors).forEach(key => {
-        if (key !== this.socket.id && !keyMap[key]) {
+    //     if (key !== this.socket.id && !keyMap[key]) {
-          this.editor.addAnnotation(toJS(cursors[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 }
-    const { value } = this.editor
+    } = 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 withCursor = selection.isFocused ? setCursor : removeCursor
-    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 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 {
+interface FixedController extends Controller {
-  editor: Editor
+  setValue: (value: Value) => void
-  onConnect: () => void
-  onDisconnect: () => void
 }
 
 export interface ExtendedEditor extends Editor {
-  remote: boolean
+  remote?: boolean
-  connection: Connection
+  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) {