Only send caret color on channel connect

Automattic · Jul 30, 2021 · 464c6da · 464c6da
1 parent 6f94be8
commit 464c6da
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/src/components/block-editor-contents/use-yjs.js b/src/components/block-editor-contents/use-yjs.js
@@ -40,11 +40,11 @@ const defaultColors = [ '#4676C0', '#6F6EBE', '#9063B6', '#C3498D', '#9E6D14', '
  * @property {object} selectionEnd
  */
 async function initYDoc( { blocks, onRemoteDataChange, settings, getSelection, setPeerSelection, setAvailablePeers } ) {
-	const { channelId, transport, caretColor } = settings;
+	const { channelId, transport } = settings;
 
 	/** @type string */
 	const identity = uuidv4();
-	const color = caretColor || sample( defaultColors );
+	const caretColor = settings.caretColor || sample( defaultColors );
 
 	debug( `initYDoc (identity: ${ identity })` );
 
@@ -66,7 +66,6 @@ async function initYDoc( { blocks, onRemoteDataChange, settings, getSelection, s
 					start: selectionStart,
 					end: selectionEnd,
 				},
-				color,
 			} );
 		},
 	} );
@@ -81,7 +80,7 @@ async function initYDoc( { blocks, onRemoteDataChange, settings, getSelection, s
 				break;
 			}
 			case 'selection': {
-				setPeerSelection( data.identity, data.selection, data.color );
+				setPeerSelection( data.identity, data.selection );
 				break;
 			}
 		}
@@ -96,6 +95,7 @@ async function initYDoc( { blocks, onRemoteDataChange, settings, getSelection, s
 		.connect( {
 			identity,
 			username: settings.username,
+			caretColor,
 			onReceiveMessage,
 			setAvailablePeers: ( peers ) => {
 				debug( 'setAvailablePeers', peers );

diff --git a/src/index.js b/src/index.js
@@ -98,8 +98,8 @@ import './style.scss';
  * @typedef CollaborationSettings
  * @property {boolean} [enabled]
  * @property {string} [channelId] Optional channel id to pass to transport.connect().
- * @property {string} username The name displayed to peers. Required if collab is enabled.
- * @property {string} [caretColor] If unspecified, a random color will be selected.
+ * @property {string} username Name displayed to peers. Required if collab is enabled.
+ * @property {string} [caretColor] Color of the caret indicator displayed to peers. If unspecified, a random color will be selected.
  * @property {CollaborationTransport} transport Required if collab is enabled.
  */
 
@@ -113,10 +113,16 @@ import './style.scss';
  * @typedef CollaborationTransportConnectOpts
  * @property {string} identity
  * @property {string} username
+ * @property {string} caretColor Color of the caret indicator displayed to peers.
  * @property {(message: object) => void} onReceiveMessage Callback to run when a message is received.
- * @property {(peers: string[]) => void} setAvailablePeers Callback to run when peers change.
+ * @property {(peers: AvailablePeer[]) => void} setAvailablePeers Callback to run when peers change.
  * @property {string} [channelId]
  *
+ * @typedef AvailablePeer
+ * @property {string} id
+ * @property {string} name
+ * @property {string} color
+ *
  * @typedef CollaborationTransportDocMessage
  * @property {string} identity
  * @property {'doc'} type
@@ -126,7 +132,6 @@ import './style.scss';
  * @property {string} identity
  * @property {'selection'} type
  * @property {EditorSelection} selection
- * @property {string} color Color of the peer indicator caret.
  *
  * @typedef EditorSelection
  * @property {object} start

diff --git a/src/store/peers/actions.js b/src/store/peers/actions.js
@@ -1,5 +1,5 @@
 /**
- * @param {string[]} peers Peer ids.
+ * @param {import('../../').AvailablePeer[]} peers
  */
 export function setAvailablePeers( peers ) {
 	return {
@@ -9,16 +9,14 @@ export function setAvailablePeers( peers ) {
 }
 
 /**
- * @param {string} peer Peer id.
+ * @param {string} peerId
  * @param {import('../..').EditorSelection} selection
- * @param {string} color Hex values prefixed by #.
  */
-export function setPeerSelection( peer, selection, color ) {
+export function setPeerSelection( peerId, selection ) {
 	return {
 		type: 'SET_PEER_SELECTION',
-		peer,
+		peerId,
 		selection,
-		color,
 	};
 }
 

diff --git a/src/store/peers/reducer.js b/src/store/peers/reducer.js
@@ -1,22 +1,21 @@
 const reducer = ( state = {}, action ) => {
 	switch ( action.type ) {
 		case 'SET_PEER_SELECTION': {
-			if ( ! state[ action.peer ] ) {
+			if ( ! state[ action.peerId ] ) {
 				return state;
 			}
 			return {
 				...state,
-				[ action.peer ]: {
-					...state[ action.peer ],
+				[ action.peerId ]: {
+					...state[ action.peerId ],
 					...action.selection,
-					color: action.color,
 				},
 			};
 		}
 
 		case 'SET_AVAILABLE_PEERS': {
-			return action.peers.reduce( ( acc, { id, name } ) => {
-				acc[ id ] = state[ id ] || { name };
+			return action.peers.reduce( ( acc, { id, name, color } ) => {
+				acc[ id ] = state[ id ] || { name, color };
 				return acc;
 			}, {} );
 		}

diff --git a/stories/collab/mock-transport.js b/stories/collab/mock-transport.js
@@ -6,7 +6,7 @@ const mockTransport = {
 	sendMessage: ( data ) => {
 		window.localStorage.setItem( 'isoEditorYjsMessage', JSON.stringify( data ) );
 	},
-	connect: ( { identity, username, onReceiveMessage, setAvailablePeers, channelId } ) => {
+	connect: ( { identity, username, caretColor, onReceiveMessage, setAvailablePeers, channelId } ) => {
 		listeners.push(
 			{
 				event: 'storage',
@@ -39,7 +39,7 @@ const mockTransport = {
 
 		window.localStorage.setItem(
 			'isoEditorYjsPeers',
-			JSON.stringify( [ ...peers, { id: identity, name: username } ] )
+			JSON.stringify( [ ...peers, { id: identity, name: username, color: caretColor } ] )
 		);
 
 		disconnectHandlers.push( () => {