Real-time collaboration: Add collaborator modes

docs/reference-guides/data/data-core-editor.md

@@ -183,6 +183,18 @@ _Related_
 
 -   getClientIdsWithDescendants in core/block-editor store.
 
+### getCollaboratorMode
+
+Returns the current collaborator mode.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+
+_Returns_
+
+-   `'view' | 'edit'`: Collaborator mode.
+
 ### getCurrentPost
 
 Returns the post currently being edited in its last known saved state, not including unsaved edits. Returns an object containing relevant default post values if the post has not yet been saved.
@@ -1470,6 +1482,18 @@ _Related_
 
 -   selectBlock in core/block-editor store.
 
+### setCollaboratorMode
+
+Returns an action object used in signalling that the collaborator mode has been set.
+
+_Parameters_
+
+-   _collaboratorMode_ `'view' | 'edit'`: The collaborator mode.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setDeviceType
 
 Action that changes the width of the editing canvas.

packages/editor/src/components/post-text-editor/index.js

@@ -26,20 +26,32 @@ import { store as editorStore } from '../../store';
  */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
-	const { content, blocks, type, id } = useSelect( ( select ) => {
-		const { getEditedEntityRecord } = select( coreStore );
-		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
-		const _type = getCurrentPostType();
-		const _id = getCurrentPostId();
-		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
+	const { content, blocks, type, id, collaboratorMode } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord } = select( coreStore );
+			const {
+				getCurrentPostType,
+				getCurrentPostId,
+				getCollaboratorMode,
+			} = select( editorStore );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const editedRecord = getEditedEntityRecord(
+				'postType',
+				_type,
+				_id
+			);
 
-		return {
-			content: editedRecord?.content,
-			blocks: editedRecord?.blocks,
-			type: _type,
-			id: _id,
-		};
-	}, [] );
+			return {
+				content: editedRecord?.content,
+				blocks: editedRecord?.blocks,
+				type: _type,
+				id: _id,
+				collaboratorMode: getCollaboratorMode(),
+			};
+		},
+		[]
+	);
 	const { editEntityRecord } = useDispatch( coreStore );
 	// Replicates the logic found in getEditedPostContent().
 	const value = useMemo( () => {
@@ -63,6 +75,8 @@ export default function PostTextEditor() {
 				{ __( 'Type text or HTML' ) }
 			</VisuallyHidden>
 			<Textarea
+				readOnly={ collaboratorMode === 'view' }
+				contentEditable={ collaboratorMode === 'edit' }
 				autoComplete="off"
 				dir="auto"
 				value={ value }

packages/editor/src/components/post-title/index.js

@@ -27,14 +27,18 @@ import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
 import PostTypeSupportCheck from '../post-type-support-check';
+import { store as editorStore } from '../../store';
 
 const PostTitle = forwardRef( ( _, forwardedRef ) => {
-	const { placeholder } = useSelect( ( select ) => {
+	const { placeholder, collaboratorMode } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { titlePlaceholder } = getSettings();
 
+		const { getCollaboratorMode } = select( editorStore );
+
 		return {
 			placeholder: titlePlaceholder,
+			collaboratorMode: getCollaboratorMode(),
 		};
 	}, [] );
 
@@ -173,11 +177,12 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => {
 		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 		<h1
 			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
-			contentEditable
+			contentEditable={ collaboratorMode === 'edit' }
 			className={ className }
 			aria-label={ decodedPlaceholder }
 			role="textbox"
 			aria-multiline="true"
+			readOnly={ collaboratorMode === 'view' }
 			onFocus={ onSelect }
 			onBlur={ onUnselect }
 			onKeyDown={ onKeyDown }

packages/editor/src/components/post-title/post-title-raw.js

@@ -19,6 +19,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
 import usePostTitleFocus from './use-post-title-focus';
 import usePostTitle from './use-post-title';
+import { store as editorStore } from '../../store';
 
 /**
  * Renders a raw post title input field.
@@ -29,12 +30,15 @@ import usePostTitle from './use-post-title';
  * @return {React.ReactNode} The rendered component.
  */
 function PostTitleRaw( _, forwardedRef ) {
-	const { placeholder } = useSelect( ( select ) => {
+	const { placeholder, collaboratorMode } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { titlePlaceholder } = getSettings();
 
+		const { getCollaboratorMode } = select( editorStore );
+
 		return {
 			placeholder: titlePlaceholder,
+			collaboratorMode: getCollaboratorMode(),
 		};
 	}, [] );
 
@@ -67,6 +71,8 @@ function PostTitleRaw( _, forwardedRef ) {
 
 	return (
 		<TextareaControl
+			readOnly={ collaboratorMode === 'view' }
+			contentEditable={ collaboratorMode === 'edit' }
 			ref={ focusRef }
 			value={ title }
 			onChange={ onChange }

packages/editor/src/store/actions.js

@@ -666,6 +666,20 @@ export function setDeviceType( deviceType ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the collaborator mode has been set.
+ *
+ * @param {'view' | 'edit'} collaboratorMode The collaborator mode.
+ *
+ * @return {Object} Action object.
+ */
+export function setCollaboratorMode( collaboratorMode ) {
+	return {
+		type: 'SET_COLLABORATOR_MODE',
+		collaboratorMode,
+	};
+}
+
 /**
  * Returns an action object used to enable or disable a panel in the editor.
  *

packages/editor/src/store/reducer.js

@@ -293,6 +293,23 @@ export function deviceType( state = 'Desktop', action ) {
 	return state;
 }
 
+/**
+ * Reducer managing the current collaborator mode.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function collaboratorMode( state = 'edit', action ) {
+	switch ( action.type ) {
+		case 'SET_COLLABORATOR_MODE':
+			return action.collaboratorMode;
+	}
+
+	return state;
+}
+
 /**
  * Reducer storing the list of all programmatically removed panels.
  *
@@ -412,6 +429,7 @@ export default combineReducers( {
 	postAutosavingLock,
 	renderingMode,
 	deviceType,
+	collaboratorMode,
 	removedPanels,
 	blockInserterPanel,
 	inserterSidebarToggleRef,

packages/editor/src/store/selectors.js

@@ -1357,6 +1357,25 @@ export const getDeviceType = createRegistrySelector(
 	}
 );
 
+/**
+ * Returns the current collaborator mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {'view' | 'edit'} Collaborator mode.
+ */
+export function getCollaboratorMode( state ) {
+	if ( window.__experimentalEnableSync ) {
+		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+			return state.collaboratorMode;
+		}
+	}
+
+	// Default to edit mode if the collaboration experiment is not enabled, or
+	// if the Gutenberg plugin is not being used.
+	return 'edit';
+}
+
 /**
  * Returns true if the list view is opened.
  *