feat: set_annotation temporary disabled

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 targetNode = document.getNode(targetPath)
 
-  const isTarget = targetNode && targetNode.key === node.key
-
-  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>