@tiptap/extension-collaboration-cursor - npm Package Compare versions

Comparing version 2.0.0-alpha.3 to 2.0.0-alpha.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-collaboration-cursor@2.0.0-alpha.3...@tiptap/extension-collaboration-cursor@2.0.0-alpha.4) (2020-12-02)
+
+
+### Bug Fixes
+
+* retrieve awareness states after reconnect ([12d9942](https://github.com/ueberdosis/tiptap-next/commit/12d994275c0a4afa2344805e16998690a1c45a4d))
+
+
+
+
+
 # [2.0.0-alpha.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-collaboration-cursor@2.0.0-alpha.2...@tiptap/extension-collaboration-cursor@2.0.0-alpha.3) (2020-11-19)
@@ -8,0 +19,0 @@

dist/packages/extension-collaboration-cursor/src/index.d.ts

 import { Extension, Command } from '@tiptap/core';
 export interface CollaborationCursorOptions {
-    name: string;
-    color: string;
     provider: any;
+    user: {
+        [key: string]: any;
+    };
     render(user: {
-        name: string;
-        color: string;
+        [key: string]: any;
     }): HTMLElement;
+    onUpdate: (users: {
+        clientId: string;
+        [key: string]: any;
+    }[]) => null;
 }
@@ -16,4 +20,3 @@ declare const CollaborationCursor: Extension<CollaborationCursorOptions, {
     user: (attributes: {
-        name: string;
-        color: string;
+        [key: string]: any;
     }) => Command;
@@ -20,0 +23,0 @@ }>;

dist/tiptap-extension-collaboration-cursor.cjs.js

@@ -6,7 +6,18 @@ 'use strict';
 
+const awarenessStatesToArray = (states) => {
+    return Array.from(states.entries()).map(([key, value]) => {
+        return {
+            clientId: key,
+            ...value.user,
+        };
+    });
+};
 const CollaborationCursor = core.Extension.create({
+    name: 'collaborationCursor',
     defaultOptions: {
         provider: null,
-        name: 'Someone',
-        color: '#cccccc',
+        user: {
+            name: null,
+            color: null,
+        },
         render: user => {
@@ -23,2 +34,3 @@ const cursor = document.createElement('span');
         },
+        onUpdate: () => null,
     },
@@ -31,3 +43,4 @@ addCommands() {
             user: (attributes) => () => {
-                this.options.provider.awareness.setLocalStateField('user', attributes);
+                this.options.user = attributes;
+                this.options.provider.awareness.setLocalStateField('user', this.options.user);
                 return true;
@@ -40,6 +53,18 @@ },
             yProsemirror.yCursorPlugin((() => {
-                this.options.provider.awareness.setLocalStateField('user', {
-                    name: this.options.name,
-                    color: this.options.color,
+                this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                this.options.provider.awareness.on('change', () => {
+                    this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                 });
+                this.options.provider.awareness.on('update', () => {
+                    this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
+                });
+                this.options.provider.on('status', (event) => {
+                    if (event.status === 'connected') {
+                        // FIX: Reset the awareness state
+                        // PR: https://github.com/yjs/y-protocols/issues/7
+                        this.options.provider.awareness.setLocalState({});
+                        this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                    }
+                });
+                this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                 return this.options.provider.awareness;
@@ -46,0 +71,0 @@ })(),

dist/tiptap-extension-collaboration-cursor.esm.js

 import { Extension } from '@tiptap/core';
 import { yCursorPlugin } from 'y-prosemirror';
 
+const awarenessStatesToArray = (states) => {
+    return Array.from(states.entries()).map(([key, value]) => {
+        return {
+            clientId: key,
+            ...value.user,
+        };
+    });
+};
 const CollaborationCursor = Extension.create({
+    name: 'collaborationCursor',
     defaultOptions: {
         provider: null,
-        name: 'Someone',
-        color: '#cccccc',
+        user: {
+            name: null,
+            color: null,
+        },
         render: user => {
@@ -20,2 +31,3 @@ const cursor = document.createElement('span');
         },
+        onUpdate: () => null,
     },
@@ -28,3 +40,4 @@ addCommands() {
             user: (attributes) => () => {
-                this.options.provider.awareness.setLocalStateField('user', attributes);
+                this.options.user = attributes;
+                this.options.provider.awareness.setLocalStateField('user', this.options.user);
                 return true;
@@ -37,6 +50,18 @@ },
             yCursorPlugin((() => {
-                this.options.provider.awareness.setLocalStateField('user', {
-                    name: this.options.name,
-                    color: this.options.color,
+                this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                this.options.provider.awareness.on('change', () => {
+                    this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                 });
+                this.options.provider.awareness.on('update', () => {
+                    this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
+                });
+                this.options.provider.on('status', (event) => {
+                    if (event.status === 'connected') {
+                        // FIX: Reset the awareness state
+                        // PR: https://github.com/yjs/y-protocols/issues/7
+                        this.options.provider.awareness.setLocalState({});
+                        this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                    }
+                });
+                this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                 return this.options.provider.awareness;
@@ -43,0 +68,0 @@ })(),

dist/tiptap-extension-collaboration-cursor.umd.js

@@ -7,7 +7,18 @@ (function (global, factory) {
 
+  const awarenessStatesToArray = (states) => {
+      return Array.from(states.entries()).map(([key, value]) => {
+          return {
+              clientId: key,
+              ...value.user,
+          };
+      });
+  };
   const CollaborationCursor = core.Extension.create({
+      name: 'collaborationCursor',
       defaultOptions: {
           provider: null,
-          name: 'Someone',
-          color: '#cccccc',
+          user: {
+              name: null,
+              color: null,
+          },
           render: user => {
@@ -24,2 +35,3 @@ const cursor = document.createElement('span');
           },
+          onUpdate: () => null,
       },
@@ -32,3 +44,4 @@ addCommands() {
               user: (attributes) => () => {
-                  this.options.provider.awareness.setLocalStateField('user', attributes);
+                  this.options.user = attributes;
+                  this.options.provider.awareness.setLocalStateField('user', this.options.user);
                   return true;
@@ -41,6 +54,18 @@ },
               yProsemirror.yCursorPlugin((() => {
-                  this.options.provider.awareness.setLocalStateField('user', {
-                      name: this.options.name,
-                      color: this.options.color,
+                  this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                  this.options.provider.awareness.on('change', () => {
+                      this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                   });
+                  this.options.provider.awareness.on('update', () => {
+                      this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
+                  });
+                  this.options.provider.on('status', (event) => {
+                      if (event.status === 'connected') {
+                          // FIX: Reset the awareness state
+                          // PR: https://github.com/yjs/y-protocols/issues/7
+                          this.options.provider.awareness.setLocalState({});
+                          this.options.provider.awareness.setLocalStateField('user', this.options.user);
+                      }
+                  });
+                  this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states));
                   return this.options.provider.awareness;
@@ -47,0 +72,0 @@ })(),

package.json

 {
   "name": "@tiptap/extension-collaboration-cursor",
-  "version": "2.0.0-alpha.3",
+  "description": "collaboration cursor extension for tiptap",
+  "version": "2.0.0-alpha.4",
   "homepage": "https://tiptap.dev",
@@ -29,3 +30,3 @@ "keywords": [
   },
-  "gitHead": "7966af0fec4e65f83d7e5a22ccb9fc420a9a6728"
+  "gitHead": "a884cb81de8783d0097741c1ddb97a82ea88ae0e"
 }

src/index.ts

@@ -5,13 +5,26 @@ import { Extension, Command } from '@tiptap/core'
 export interface CollaborationCursorOptions {
-  name: string,
-  color: string,
   provider: any,
-  render (user: { name: string, color: string }): HTMLElement,
+  user: { [key: string]: any },
+  render (user: { [key: string]: any }): HTMLElement,
+  onUpdate: (users: { clientId: string, [key: string]: any }[]) => null,
 }
 
+const awarenessStatesToArray = (states: Map<number, { [key: string]: any }>) => {
+  return Array.from(states.entries()).map(([key, value]) => {
+    return {
+      clientId: key,
+      ...value.user,
+    }
+  })
+}
+
 const CollaborationCursor = Extension.create({
+  name: 'collaborationCursor',
+
   defaultOptions: <CollaborationCursorOptions>{
     provider: null,
-    name: 'Someone',
-    color: '#cccccc',
+    user: {
+      name: null,
+      color: null,
+    },
     render: user => {
@@ -30,2 +43,3 @@ const cursor = document.createElement('span')
     },
+    onUpdate: () => null,
   },
@@ -38,8 +52,7 @@
        */
-      user: (attributes: {
-        name: string,
-        color: string,
-      }): Command => () => {
-        this.options.provider.awareness.setLocalStateField('user', attributes)
+      user: (attributes: { [key: string]: any }): Command => () => {
+        this.options.user = attributes
 
+        this.options.provider.awareness.setLocalStateField('user', this.options.user)
+
         return true
@@ -53,7 +66,23 @@ },
       yCursorPlugin((() => {
-        this.options.provider.awareness.setLocalStateField('user', {
-          name: this.options.name,
-          color: this.options.color,
+        this.options.provider.awareness.setLocalStateField('user', this.options.user)
+
+        this.options.provider.awareness.on('change', () => {
+          this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
         })
 
+        this.options.provider.awareness.on('update', () => {
+          this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
+        })
+
+        this.options.provider.on('status', (event: { status: string }) => {
+          if (event.status === 'connected') {
+            // FIX: Reset the awareness state
+            // PR: https://github.com/yjs/y-protocols/issues/7
+            this.options.provider.awareness.setLocalState({})
+            this.options.provider.awareness.setLocalStateField('user', this.options.user)
+          }
+        })
+
+        this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
+
         return this.options.provider.awareness
@@ -60,0 +89,0 @@ })(),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1283026

increased by1.24%

Lines of code

1149

increased by9.85%

No dependency changes