feat: set_annotation temporary disabled

packages/bridge/src/convert/set.ts

@@ -17,18 +17,21 @@ const AnnotationSetOp = ({ key, value }: Automerge.Diff) => (map, doc) => {
 
   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]
-    }
+  /**
+   * Looks like set_annotation option is broken, temporary disabled
+   */
+  // if (!doc.annotations[key]) {
+  op = {
+    type: 'add_annotation',
+    annotation: map[value]
   }
+  // } else {
+  //   op = {
+  //     type: 'set_annotation',
+  //     properties: toJS(doc.annotations[key]),
+  //     newProperties: map[value]
+  //   }
+  // }
 
   console.log('opSET!!', key, map[value], op)
 

packages/bridge/src/cursor/index.ts

@@ -3,10 +3,7 @@ import { toJS } from '../utils'
 import { Operation } from 'slate'
 import { List } from 'immutable'
 
-export const setCursor = (
-  doc,
-  { id, selection, selectionOps, annotationType }
-) => {
+export const setCursor = (doc, { id, selection, annotationType }) => {
   if (!doc.annotations) {
     doc.annotations = {}
   }
@@ -21,38 +18,31 @@ export const setCursor = (
 
   const annotation = toJS(doc.annotations[id])
 
-  if (selectionOps.size) {
-    selectionOps.forEach(op => {
-      const { newProperties } = op.toJSON()
+  // 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
+  //     if (newProperties.focus) annotation.focus = newProperties.focus
+  //     if (newProperties.anchor) annotation.anchor = newProperties.anchor
+  //     if (newProperties.data) annotation.data = newProperties.data
+  //   })
+  // }
 
-  console.log('cursor!!', cursorStart, cursorEnd)
-  console.log(
-    'selection!!',
-    annotation,
-    selection.start.offset,
-    selection.end.offset
-  )
+  // console.log('cursor!!', cursorStart, cursorEnd)
+  // console.log(
+  //   'selection!!',
+  //   selection.toJSON(),
+  //   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.focus = selection.end.toJSON() || {}
+  annotation.anchor = selection.start.toJSON() || {}
 
   annotation.data.isBackward = selection.isBackward
-
-  console.log('setted cursor', annotation, toJS(doc))
+  annotation.data.targetPath = selection.isBackward
+    ? annotation.anchor.path
+    : annotation.focus.path
 
   doc.annotations[id] = annotation
 
@@ -60,7 +50,7 @@ export const setCursor = (
 }
 
 export const removeCursor = (doc, { id }) => {
-  console.log('!!!removeCursor', doc, id)
+  // console.log('!!!removeCursor', doc, id)
   if (doc.annotations && doc.annotations[id]) {
     delete doc.annotations[id]
   }
@@ -68,20 +58,18 @@ export const removeCursor = (doc, { id }) => {
   return doc
 }
 
-export const cursorOpFilter = (doc, ops: List<Operation>) =>
+export const cursorOpFilter = (ops: List<Operation>, annotationType) =>
   ops.filter(op => {
-    const { annotations } = doc
-
     if (op.type === 'set_annotation') {
       return !(
-        (op.properties && annotations[op.properties.key]) ||
-        (op.newProperties && annotations[op.newProperties.key])
+        (op.properties && op.properties.type === annotationType) ||
+        (op.newProperties && op.newProperties.type === annotationType)
       )
     } else if (
       op.type === 'add_annotation' ||
       op.type === 'remove_annotation'
     ) {
-      return !annotations[op.annotation.key]
+      return op.annotation.type !== annotationType
     }
 
     return true

packages/client/src/Connection.ts

@@ -130,17 +130,22 @@ class Connection {
       value: { selection }
     } = this.editor
 
+    const annotationType = 'collaborative_selection'
+
     const cursorData = {
       id: this.socket.id,
       selection,
-      selectionOps: operations.filter(op => op.type === 'set_selection'),
-      annotationType: 'collaborative_selection'
+      // selectionOps: operations.filter(op => op.type === 'set_selection'),
+      annotationType
     }
 
     const withCursor = selection.isFocused ? setCursor : removeCursor
 
     const changed = Automerge.change(doc, message, (d: any) =>
-      withCursor(applySlateOps(d, cursorOpFilter(d, operations)), cursorData)
+      withCursor(
+        applySlateOps(d, cursorOpFilter(operations, annotationType)),
+        cursorData
+      )
     )
 
     console.log('doc with annotations!!', toJS(changed))

packages/client/src/Controller.tsx

@@ -26,6 +26,16 @@ class Controller extends Component<ControllerProps> {
       onConnect: this.onConnect,
       onDisconnect: this.onDisconnect
     })
+
+    //@ts-ignore
+    if (!window.counter) {
+      //@ts-ignore
+      window.counter = 1
+    }
+    //@ts-ignore
+    window[`Editor_${counter}`] = editor
+    //@ts-ignore
+    window.counter += 1
   }
 
   componentWillUnmount() {

packages/client/src/renderAnnotation.tsx

@@ -1,46 +1,66 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 
-const wrapStyles = { backgroundColor: '#e91e63', position: 'relative' }
+const wrapStyles = {
+  backgroundColor: 'rgba(233, 30, 99, 0.2)',
+  position: 'relative'
+}
 
 const cursorStyleBase = {
   position: 'absolute',
-  top: 0,
+  top: -2,
   pointerEvents: 'none',
   userSelect: 'none',
   transform: 'translateY(-100%)',
-  fontSize: '10px',
+  fontSize: 10,
   color: 'white',
   background: 'palevioletred',
   whiteSpace: 'nowrap'
 } as any
 
+const caretStyleBase = {
+  position: 'absolute',
+  top: 0,
+  pointerEvents: 'none',
+  userSelect: 'none',
+  height: '100%',
+  width: 2,
+  background: '#bf1b52'
+}
+
 const renderAnnotation = (props, editor, next) => {
   const { children, annotation, attributes, node } = props
 
   const isBackward = annotation.data.get('isBackward')
-  const cursorPath = isBackward ? annotation.anchor.path : annotation.focus.path
+  const targetPath = annotation.data.get('targetPath')
 
-  console.log('renderAnnotation', props, isBackward, cursorPath)
+  console.log(
+    'renderAnnotation',
+    annotation.toJS(),
+    props,
+    isBackward,
+    targetPath
+  )
 
-  const cursorStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' }
+  const badgeStyles = { ...cursorStyleBase, left: isBackward ? '0%' : '100%' }
+  const caretStyles = { ...caretStyleBase, left: isBackward ? '0%' : '100%' }
 
   const { document } = editor.value
 
-  const targetNode = document.getNode(cursorPath)
-
-  const isTarget = targetNode && targetNode.key === node.key
+  const targetNode = document.getNode(targetPath)
 
-  console.log('isTarget', isTarget, targetNode, node)
-  const showCursor = isTarget
+  const isShowCursor = targetNode && targetNode.key === node.key
 
   switch (annotation.type) {
     case 'collaborative_selection':
       return (
         <span {...attributes} style={wrapStyles}>
-          {showCursor ? (
-            <span contentEditable={false} style={cursorStyles}>
-              {annotation.key}
-            </span>
+          {isShowCursor ? (
+            <Fragment>
+              <span contentEditable={false} style={badgeStyles}>
+                {annotation.key}
+              </span>
+              <span contentEditable={false} style={caretStyles} />
+            </Fragment>
           ) : null}
           {children}
         </span>