From 35c9f2325b49faa266b055e125c9e3d73d529ead Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 27 Nov 2024 16:43:24 +0530 Subject: [PATCH 1/4] Create new sidebar as extension of editor canvas for commenting --- .../components/collab-sidebar/constants.js | 1 + .../src/components/collab-sidebar/index.js | 128 +++++++++++------- .../src/components/collab-sidebar/style.scss | 13 ++ .../src/components/collab-sidebar/utils.js | 18 +++ 4 files changed, 112 insertions(+), 48 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/constants.js b/packages/editor/src/components/collab-sidebar/constants.js index 748c2afc26374d..b62e30c346e1f9 100644 --- a/packages/editor/src/components/collab-sidebar/constants.js +++ b/packages/editor/src/components/collab-sidebar/constants.js @@ -1 +1,2 @@ +export const collabHistorySidebarName = 'edit-post/collab-history-sidebar'; export const collabSidebarName = 'edit-post/collab-sidebar'; diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 17a23a227424a6..78d90e85e109e8 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -15,12 +15,13 @@ import { store as interfaceStore } from '@wordpress/interface'; * Internal dependencies */ import PluginSidebar from '../plugin-sidebar'; -import { collabSidebarName } from './constants'; +import { collabHistorySidebarName, 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'; +import { getEditorCanvasBackgroundColor } from './utils'; const isBlockCommentExperimentEnabled = window?.__experimentalEnableBlockComment; @@ -44,61 +45,28 @@ addFilter( modifyBlockCommentAttributes ); -function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { +function CollabSidebarContent( { + showCommentBoard, + setShowCommentBoard, + styles, + comments, +} ) { const { createNotice } = useDispatch( noticesStore ); const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore ); const { getEntityRecord } = resolveSelect( coreStore ); - const { postId, threads } = useSelect( ( select ) => { + const { postId } = 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 = { @@ -222,14 +190,14 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { }; return ( -
+
{ + 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, + }; + }, [] ); + + // 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 ] ); + // 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 ( <> + + + diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss index 2f937e3df9a25b..2c1426f1dd75df 100644 --- a/packages/editor/src/components/collab-sidebar/style.scss +++ b/packages/editor/src/components/collab-sidebar/style.scss @@ -1,5 +1,18 @@ +.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) { + box-shadow: none; + + .interface-complementary-area-header { + display: none; + } +} + +.editor-collab-sidebar { + height: 100%; +} + .editor-collab-sidebar-panel { padding: $grid-unit-20; + height: 100%; &__thread { position: relative; diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js index 7e73344c5dc0e1..7214ad22eec5b5 100644 --- a/packages/editor/src/components/collab-sidebar/utils.js +++ b/packages/editor/src/components/collab-sidebar/utils.js @@ -7,3 +7,21 @@ export function sanitizeCommentString( str ) { return str.trim(); } + +/** + * Gets the background color of the editor canvas. + * + * @return { string } Background color of the editor canvas. + */ +export function getEditorCanvasBackgroundColor() { + const iframe = document.querySelector( 'iframe[name="editor-canvas"]' ); + const iframeDocument = + iframe?.contentDocument || iframe?.contentWindow.document; + const iframeBody = iframeDocument?.querySelector( 'body' ); + if ( iframeBody ) { + const style = window.getComputedStyle( iframeBody ); + return style.backgroundColor; + } + + return ''; +} From f1d7e1c79743a38d7e6b29752489ab3e5a16eca7 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 27 Nov 2024 17:22:56 +0530 Subject: [PATCH 2/4] Cleanup and error fix --- packages/editor/src/components/collab-sidebar/index.js | 8 ++++---- packages/editor/src/components/collab-sidebar/utils.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 78d90e85e109e8..3b3d960e737269 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -238,10 +238,6 @@ export default function CollabSidebar() { enableComplementaryArea( 'core', 'edit-post/collab-sidebar' ); }; - const AddCommentComponent = blockCommentId - ? AddCommentToolbarButton - : AddCommentButton; - const { threads } = useSelect( ( select ) => { const { getCurrentPostId } = select( editorStore ); const _postId = getCurrentPostId(); @@ -294,6 +290,10 @@ export default function CollabSidebar() { return null; // or maybe return some message indicating no threads are available. } + const AddCommentComponent = blockCommentId + ? AddCommentToolbarButton + : AddCommentButton; + return ( <> diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js index 7214ad22eec5b5..7cc28d58c53478 100644 --- a/packages/editor/src/components/collab-sidebar/utils.js +++ b/packages/editor/src/components/collab-sidebar/utils.js @@ -17,10 +17,10 @@ export function getEditorCanvasBackgroundColor() { const iframe = document.querySelector( 'iframe[name="editor-canvas"]' ); const iframeDocument = iframe?.contentDocument || iframe?.contentWindow.document; - const iframeBody = iframeDocument?.querySelector( 'body' ); + const iframeBody = iframeDocument?.body; if ( iframeBody ) { const style = window.getComputedStyle( iframeBody ); - return style.backgroundColor; + return style?.backgroundColor; } return ''; From c60972c05820b8cca22a2dd919bb39827b1e5f4c Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 29 Nov 2024 15:36:55 +0530 Subject: [PATCH 3/4] Keep collab sidebar open when comments are available --- .../src/components/collab-sidebar/index.js | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 3b3d960e737269..91850b19e36e2c 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -2,7 +2,12 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect, useDispatch, resolveSelect } from '@wordpress/data'; +import { + useSelect, + useDispatch, + resolveSelect, + subscribe, +} from '@wordpress/data'; import { useState, useMemo } from '@wordpress/element'; import { comment as commentIcon } from '@wordpress/icons'; import { addFilter } from '@wordpress/hooks'; @@ -22,6 +27,7 @@ import { store as editorStore } from '../../store'; import AddCommentButton from './comment-button'; import AddCommentToolbarButton from './comment-button-toolbar'; import { getEditorCanvasBackgroundColor } from './utils'; +import { useGlobalStylesContext } from '../global-styles-provider'; const isBlockCommentExperimentEnabled = window?.__experimentalEnableBlockComment; @@ -213,6 +219,7 @@ function CollabSidebarContent( { export default function CollabSidebar() { const [ showCommentBoard, setShowCommentBoard ] = useState( false ); const { enableComplementaryArea } = useDispatch( interfaceStore ); + const { getActiveComplementaryArea } = useSelect( interfaceStore ); const { postStatus } = useSelect( ( select ) => { return { @@ -285,6 +292,21 @@ export default function CollabSidebar() { return result; }, [ threads ] ); + // Get the global styles to set the background color of the sidebar. + const { merged: GlobalStyles } = useGlobalStylesContext(); + const backgroundColor = GlobalStyles?.styles?.color?.background; + + if ( 0 < resultComments.length ) { + const unsubscribe = subscribe( () => { + const activeSidebar = getActiveComplementaryArea( 'core' ); + + if ( ! activeSidebar ) { + enableComplementaryArea( 'core', 'edit-post/collab-sidebar' ); + unsubscribe(); + } + } ); + } + // Check if the experimental flag is enabled. if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) { return null; // or maybe return some message indicating no threads are available. @@ -321,7 +343,8 @@ export default function CollabSidebar() { showCommentBoard={ showCommentBoard } setShowCommentBoard={ setShowCommentBoard } styles={ { - backgroundColor: getEditorCanvasBackgroundColor(), + backgroundColor: + backgroundColor ?? getEditorCanvasBackgroundColor(), } } /> From d096211cf25bc0df7ed9dd6b54de65cf3478e54f Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 29 Nov 2024 16:59:31 +0530 Subject: [PATCH 4/4] Remove fallback background color function --- .../src/components/collab-sidebar/index.js | 6 ++---- .../src/components/collab-sidebar/utils.js | 18 ------------------ 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 91850b19e36e2c..0fe46c549cff0f 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -26,7 +26,6 @@ import { AddComment } from './add-comment'; import { store as editorStore } from '../../store'; import AddCommentButton from './comment-button'; import AddCommentToolbarButton from './comment-button-toolbar'; -import { getEditorCanvasBackgroundColor } from './utils'; import { useGlobalStylesContext } from '../global-styles-provider'; const isBlockCommentExperimentEnabled = @@ -301,7 +300,7 @@ export default function CollabSidebar() { const activeSidebar = getActiveComplementaryArea( 'core' ); if ( ! activeSidebar ) { - enableComplementaryArea( 'core', 'edit-post/collab-sidebar' ); + enableComplementaryArea( 'core', collabSidebarName ); unsubscribe(); } } ); @@ -343,8 +342,7 @@ export default function CollabSidebar() { showCommentBoard={ showCommentBoard } setShowCommentBoard={ setShowCommentBoard } styles={ { - backgroundColor: - backgroundColor ?? getEditorCanvasBackgroundColor(), + backgroundColor, } } /> diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js index 7cc28d58c53478..7e73344c5dc0e1 100644 --- a/packages/editor/src/components/collab-sidebar/utils.js +++ b/packages/editor/src/components/collab-sidebar/utils.js @@ -7,21 +7,3 @@ export function sanitizeCommentString( str ) { return str.trim(); } - -/** - * Gets the background color of the editor canvas. - * - * @return { string } Background color of the editor canvas. - */ -export function getEditorCanvasBackgroundColor() { - const iframe = document.querySelector( 'iframe[name="editor-canvas"]' ); - const iframeDocument = - iframe?.contentDocument || iframe?.contentWindow.document; - const iframeBody = iframeDocument?.body; - if ( iframeBody ) { - const style = window.getComputedStyle( iframeBody ); - return style?.backgroundColor; - } - - return ''; -}