@wordpress/editor 14.10.0 → 14.12.0

package/src/components/collab-sidebar/index.js

@@ -0,0 +1,298 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch, resolveSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { comment as commentIcon } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../plugin-sidebar';
+import { collabSidebarName } from './constants';
+import { Comments } from './comments';
+import { AddComment } from './add-comment';
+import { store as editorStore } from '../../store';
+import AddCommentButton from './comment-button';
+import AddCommentToolbarButton from './comment-button-toolbar';
+
+const isBlockCommentExperimentEnabled =
+	window?.__experimentalEnableBlockComment;
+const modifyBlockCommentAttributes = ( settings ) => {
+	if ( ! settings.attributes.blockCommentId ) {
+		settings.attributes = {
+			...settings.attributes,
+			blockCommentId: {
+				type: 'number',
+			},
+		};
+	}
+
+	return settings;
+};
+
+// Apply the filter to all core blocks
+addFilter(
+	'blocks.registerBlockType',
+	'block-comment/modify-core-block-attributes',
+	modifyBlockCommentAttributes
+);
+
+function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) {
+	const { createNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
+	const { getEntityRecord } = resolveSelect( coreStore );
+
+	const { postId, threads } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const _postId = getCurrentPostId();
+		const data = !! _postId
+			? select( coreStore ).getEntityRecords( 'root', 'comment', {
+					post: _postId,
+					type: 'block_comment',
+					status: 'any',
+					per_page: 100,
+			  } )
+			: null;
+
+		return {
+			postId: _postId,
+			threads: data,
+		};
+	}, [] );
+
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Process comments to build the tree structure
+	const resultComments = useMemo( () => {
+		// Create a compare to store the references to all objects by id
+		const compare = {};
+		const result = [];
+
+		const filteredComments = ( threads ?? [] ).filter(
+			( comment ) => comment.status !== 'trash'
+		);
+
+		// Initialize each object with an empty `reply` array
+		filteredComments.forEach( ( item ) => {
+			compare[ item.id ] = { ...item, reply: [] };
+		} );
+
+		// Iterate over the data to build the tree structure
+		filteredComments.forEach( ( item ) => {
+			if ( item.parent === 0 ) {
+				// If parent is 0, it's a root item, push it to the result array
+				result.push( compare[ item.id ] );
+			} else if ( compare[ item.parent ] ) {
+				// Otherwise, find its parent and push it to the parent's `reply` array
+				compare[ item.parent ].reply.push( compare[ item.id ] );
+			}
+		} );
+
+		return result;
+	}, [ threads ] );
+
+	// Function to save the comment.
+	const addNewComment = async ( comment, parentCommentId ) => {
+		const args = {
+			post: postId,
+			content: comment,
+			comment_type: 'block_comment',
+			comment_approved: 0,
+		};
+
+		// Create a new object, conditionally including the parent property
+		const updatedArgs = {
+			...args,
+			...( parentCommentId ? { parent: parentCommentId } : {} ),
+		};
+
+		const savedRecord = await saveEntityRecord(
+			'root',
+			'comment',
+			updatedArgs
+		);
+
+		if ( savedRecord ) {
+			// If it's a main comment, update the block attributes with the comment id.
+			if ( ! parentCommentId ) {
+				updateBlockAttributes( getSelectedBlockClientId(), {
+					blockCommentId: savedRecord?.id,
+				} );
+			}
+
+			createNotice(
+				'snackbar',
+				parentCommentId
+					? // translators: Reply added successfully
+					  __( 'Reply added successfully.' )
+					: // translators: Comment added successfully
+					  __( 'Comment added successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onCommentResolve = async ( commentId ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			status: 'approved',
+		} );
+
+		if ( savedRecord ) {
+			// translators: Comment resolved successfully
+			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		} else {
+			onError();
+		}
+	};
+
+	const onEditComment = async ( commentId, comment ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			content: comment,
+		} );
+
+		if ( savedRecord ) {
+			createNotice(
+				'snackbar',
+				// translators: Comment edited successfully
+				__( 'Comment edited successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onError = () => {
+		createNotice(
+			'error',
+			// translators: Error message when comment submission fails
+			__(
+				'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
+			),
+			{
+				isDismissible: true,
+			}
+		);
+	};
+
+	const onCommentDelete = async ( commentId ) => {
+		const childComment = await getEntityRecord(
+			'root',
+			'comment',
+			commentId
+		);
+		await deleteEntityRecord( 'root', 'comment', commentId );
+
+		if ( childComment && ! childComment.parent ) {
+			updateBlockAttributes( getSelectedBlockClientId(), {
+				blockCommentId: undefined,
+			} );
+		}
+
+		createNotice(
+			'snackbar',
+			// translators: Comment deleted successfully
+			__( 'Comment deleted successfully.' ),
+			{
+				type: 'snackbar',
+				isDismissible: true,
+			}
+		);
+	};
+
+	return (
+		<div className="editor-collab-sidebar-panel">
+			<AddComment
+				onSubmit={ addNewComment }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+			/>
+			<Comments
+				threads={ resultComments }
+				onEditComment={ onEditComment }
+				onAddReply={ addNewComment }
+				onCommentDelete={ onCommentDelete }
+				onCommentResolve={ onCommentResolve }
+			/>
+		</div>
+	);
+}
+
+/**
+ * Renders the Collab sidebar.
+ */
+export default function CollabSidebar() {
+	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	const { postStatus } = useSelect( ( select ) => {
+		return {
+			postStatus:
+				select( editorStore ).getEditedPostAttribute( 'status' ),
+		};
+	}, [] );
+
+	const { blockCommentId } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } =
+			select( blockEditorStore );
+		const _clientId = getSelectedBlockClientId();
+
+		return {
+			blockCommentId: _clientId
+				? getBlockAttributes( _clientId )?.blockCommentId
+				: null,
+		};
+	}, [] );
+
+	const openCollabBoard = () => {
+		setShowCommentBoard( true );
+		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
+	};
+
+	// Check if the experimental flag is enabled.
+	if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) {
+		return null; // or maybe return some message indicating no threads are available.
+	}
+
+	const AddCommentComponent = blockCommentId
+		? AddCommentToolbarButton
+		: AddCommentButton;
+
+	return (
+		<>
+			<AddCommentComponent onClick={ openCollabBoard } />
+			<PluginSidebar
+				identifier={ collabSidebarName }
+				// translators: Comments sidebar title
+				title={ __( 'Comments' ) }
+				icon={ commentIcon }
+			>
+				<CollabSidebarContent
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+				/>
+			</PluginSidebar>
+		</>
+	);
+}

package/src/components/collab-sidebar/style.scss

@@ -0,0 +1,111 @@
+.editor-collab-sidebar-panel {
+	padding: $grid-unit-20;
+
+	&__thread {
+		position: relative;
+		padding: $grid-unit-20;
+		border-radius: $radius-large;
+		border: 1px solid $gray-300;
+		background-color: $gray-100;
+		margin-bottom: $grid-unit-20;
+	}
+
+	&__active-thread {
+		border: 1.5px solid #3858e9;
+		background-color: $white;
+		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
+	}
+
+	&__comment-field {
+		flex: 1;
+	}
+
+	&__child-thread {
+		margin-top: 15px;
+	}
+
+	&__user-name {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+		text-transform: capitalize;
+	}
+
+	&__user-time {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+	}
+
+	&__user-comment {
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 20px;
+		text-align: left;
+		color: $gray-900;
+
+		p {
+			margin-bottom: 0;
+		}
+	}
+
+	&__user-avatar {
+		border-radius: $radius-round;
+		flex-shrink: 0;
+	}
+
+	&__thread-overlay {
+		background-color: rgba(0, 0, 0, 0.7);
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		padding: 15px;
+		border-radius: $radius-large;
+		color: $white;
+
+		p {
+			margin-bottom: 15px;
+		}
+
+		button {
+			padding: 4px 10px;
+			color: $white;
+		}
+	}
+
+	&__comment-status {
+		margin-left: auto;
+
+		button {
+			&.has-icon:not(.has-text) {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	&__comment-dropdown-menu {
+		flex-shrink: 0;
+
+		button {
+			&.has-icon {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+
+}

package/src/components/collab-sidebar/utils.js

@@ -0,0 +1,9 @@
+/**
+ * Sanitizes a comment string by removing non-printable ASCII characters.
+ *
+ * @param {string} str - The comment string to sanitize.
+ * @return {string} - The sanitized comment string.
+ */
+export function sanitizeCommentString( str ) {
+	return str.trim();
+}