feat: garbage cursors on client

packages/backend/src/Connection.ts

@@ -16,7 +16,7 @@ class Connection {
   private options: ConnectionOptions
 
   constructor(options: ConnectionOptions = defaultOptions) {
-    this.io = io(options.port, options.connectOpts)
+    this.io = io(options.entry, options.connectOpts)
     this.docSet = new Automerge.DocSet()
     this.connections = {}
     this.options = merge(defaultOptions, options)

packages/backend/src/model.ts

@@ -1,7 +1,8 @@
 import { ValueJSON } from 'slate'
+import { Server } from 'http'
 
 export interface ConnectionOptions {
-  port: number
+  entry: number | Server
   connectOpts?: SocketIO.ServerOptions
   defaultValue?: ValueJSON
   saveTreshold?: number

packages/backend/src/utils/index.ts

@@ -6,7 +6,7 @@ export const getClients = (io, nsp) =>
   })
 
 export const defaultOptions = {
-  port: 9000,
+  entry: 9000,
   saveTreshold: 2000,
   cursorAnnotationType: 'collaborative_selection'
 }

packages/client/src/Connection.ts

@@ -63,6 +63,7 @@ class Connection {
       return
     }
 
+    try {
       const currentDoc = this.docSet.getDoc(this.docId)
       const docNew = this.connection.receiveMsg(data)
 
@@ -70,7 +71,6 @@ class Connection {
         return
       }
 
-    try {
       const operations = Automerge.diff(currentDoc, docNew)
 
       if (operations.length !== 0) {
@@ -87,12 +87,42 @@ class Connection {
         await Promise.resolve()
 
         this.editor.remote = false
+
+        this.garbageCursors()
       }
     } catch (e) {
       console.error(e)
     }
   }
 
+  garbageCursors = async () => {
+    const doc = this.docSet.getDoc(this.docId)
+    const { value } = this.editor
+
+    if (value.annotations.size === Object.keys(doc.annotations).length) {
+      return
+    }
+
+    const garbage = []
+
+    value.annotations.forEach(annotation => {
+      if (
+        annotation.type === this.cursorAnnotationType &&
+        !doc.annotations[annotation.key]
+      ) {
+        garbage.push(annotation)
+      }
+    })
+
+    if (garbage.length) {
+      this.editor.withoutSaving(() => {
+        garbage.forEach(annotation => {
+          this.editor.removeAnnotation(annotation)
+        })
+      })
+    }
+  }
+
   receiveSlateOps = (operations: Immutable.List<Operation>) => {
     const doc = this.docSet.getDoc(this.docId)
     const message = `change from ${this.socket.id}`

packages/example/server.js

@@ -1,8 +1,9 @@
 const Connection = require('@slate-collaborative/backend')
 const defaultValue = require('./src/defaultValue')
+const server = require('http').createServer()
 
 const config = {
-  port: 9000,
+  entry: server, // or specify port to start io server
   defaultValue,
   saveTreshold: 2000,
   onAuthRequest: async (query, socket) => {
@@ -19,3 +20,5 @@ const config = {
 }
 
 const connection = new Connection(config)
+
+server.listen(9000)