@wordpress/editor 14.13.1-next.a9f418477.0 → 14.14.0

package/build-module/components/collab-sidebar/comments.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 /**
  * External dependencies
  */
@@ -9,7 +10,7 @@ import clsx from 'clsx';
 import { useState, RawHTML } from '@wordpress/element';
 import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalConfirmDialog as ConfirmDialog, Button, DropdownMenu, Tooltip } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -22,115 +23,42 @@ import CommentForm from './comment-form';
 /**
  * Renders the Comments component.
  *
- * @param {Object}   props                  - The component props.
- * @param {Array}    props.threads          - The array of comment threads.
- * @param {Function} props.onEditComment    - The function to handle comment editing.
- * @param {Function} props.onAddReply       - The function to add a reply to a comment.
- * @param {Function} props.onCommentDelete  - The function to delete a comment.
- * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
+ * @param {Object}   props                     - The component props.
+ * @param {Array}    props.threads             - The array of comment threads.
+ * @param {Function} props.onEditComment       - The function to handle comment editing.
+ * @param {Function} props.onAddReply          - The function to add a reply to a comment.
+ * @param {Function} props.onCommentDelete     - The function to delete a comment.
+ * @param {Function} props.onCommentResolve    - The function to mark a comment as resolved.
+ * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
+ * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
  * @return {React.ReactNode} The rendered Comments component.
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function Comments({
   threads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  onCommentResolve
+  onCommentResolve,
+  showCommentBoard,
+  setShowCommentBoard
 }) {
-  const [actionState, setActionState] = useState(false);
-  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
-  const handleConfirmDelete = () => {
-    onCommentDelete(actionState.id);
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const handleConfirmResolve = () => {
-    onCommentResolve(actionState.id);
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const handleCancelDelete = () => {
-    setActionState(false);
-    setIsConfirmDialogOpen(false);
-  };
-  const blockCommentId = useSelect(select => {
-    var _select$getBlock$attr;
-    const clientID = select(blockEditorStore).getSelectedBlockClientId();
-    return (_select$getBlock$attr = select(blockEditorStore).getBlock(clientID)?.attributes?.blockCommentId) !== null && _select$getBlock$attr !== void 0 ? _select$getBlock$attr : false;
+  const {
+    blockCommentId
+  } = useSelect(select => {
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId
+    } = select(blockEditorStore);
+    const _clientId = getSelectedBlockClientId();
+    return {
+      blockCommentId: _clientId ? getBlockAttributes(_clientId)?.blockCommentId : null
+    };
   }, []);
-  const CommentBoard = ({
-    thread,
-    parentThread
-  }) => {
-    var _parentThread$status;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(CommentHeader, {
-        thread: thread,
-        onResolve: () => {
-          var _parentThread$id;
-          setActionState({
-            action: 'resolve',
-            id: (_parentThread$id = parentThread?.id) !== null && _parentThread$id !== void 0 ? _parentThread$id : thread.id
-          });
-          setIsConfirmDialogOpen(true);
-        },
-        onEdit: () => setActionState({
-          action: 'edit',
-          id: thread.id
-        }),
-        onDelete: () => {
-          setActionState({
-            action: 'delete',
-            id: thread.id
-          });
-          setIsConfirmDialogOpen(true);
-        },
-        onReply: !parentThread ? () => setActionState({
-          action: 'reply',
-          id: thread.id
-        }) : undefined,
-        status: (_parentThread$status = parentThread?.status) !== null && _parentThread$status !== void 0 ? _parentThread$status : thread.status
-      }), /*#__PURE__*/_jsx(HStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        className: "editor-collab-sidebar-panel__user-comment",
-        children: /*#__PURE__*/_jsxs(VStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: ['edit' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(CommentForm, {
-            onSubmit: value => {
-              onEditComment(thread.id, value);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false),
-            thread: thread,
-            submitButtonText: _x('Update', 'verb')
-          }), (!actionState || 'edit' !== actionState?.action) && /*#__PURE__*/_jsx(RawHTML, {
-            children: thread?.content?.raw
-          })]
-        })
-      }), 'resolve' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(ConfirmDialog, {
-        isOpen: isConfirmDialogOpen,
-        onConfirm: handleConfirmResolve,
-        onCancel: handleCancelDelete,
-        confirmButtonText: "Yes",
-        cancelButtonText: "No",
-        children:
-        // translators: message displayed when confirming an action
-        __('Are you sure you want to mark this comment as resolved?')
-      }), 'delete' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(ConfirmDialog, {
-        isOpen: isConfirmDialogOpen,
-        onConfirm: handleConfirmDelete,
-        onCancel: handleCancelDelete,
-        confirmButtonText: "Yes",
-        cancelButtonText: "No",
-        children:
-        // translators: message displayed when confirming an action
-        __('Are you sure you want to delete this comment?')
-      })]
-    });
+  const [focusThread, setFocusThread] = useState(showCommentBoard && blockCommentId ? blockCommentId : null);
+  const clearThreadFocus = () => {
+    setFocusThread(null);
+    setShowCommentBoard(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [
@@ -143,114 +71,200 @@ export function Comments({
       children:
       // translators: message displayed when there are no comments available
       __('No comments available')
-    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/_jsxs(VStack, {
+    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/_jsx(VStack, {
       className: clsx('editor-collab-sidebar-panel__thread', {
-        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id
+        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id,
+        'editor-collab-sidebar-panel__focus-thread': focusThread && focusThread === thread.id
       }),
       id: thread.id,
       spacing: "3",
-      children: [/*#__PURE__*/_jsx(CommentBoard, {
-        thread: thread
-      }), 0 < thread?.reply?.length && thread.reply.map(reply => /*#__PURE__*/_jsx(VStack, {
+      onClick: () => setFocusThread(thread.id),
+      children: /*#__PURE__*/_jsx(Thread, {
+        thread: thread,
+        onAddReply: onAddReply,
+        onCommentDelete: onCommentDelete,
+        onCommentResolve: onCommentResolve,
+        onEditComment: onEditComment,
+        isFocused: focusThread === thread.id,
+        clearThreadFocus: clearThreadFocus
+      })
+    }, thread.id))]
+  });
+}
+function Thread({
+  thread,
+  onEditComment,
+  onAddReply,
+  onCommentDelete,
+  onCommentResolve,
+  isFocused,
+  clearThreadFocus
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CommentBoard, {
+      thread: thread,
+      onResolve: onCommentResolve,
+      onEdit: onEditComment,
+      onDelete: onCommentDelete,
+      status: thread.status
+    }), 0 < thread?.reply?.length && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [!isFocused && /*#__PURE__*/_jsx(VStack, {
+        className: "editor-collab-sidebar-panel__show-more-reply",
+        children: sprintf(
+        // translators: 1: number of replies.
+        _x('%s more replies..', 'Show replies button'), thread?.reply?.length)
+      }), isFocused && thread.reply.map(reply => /*#__PURE__*/_jsxs(VStack, {
         className: "editor-collab-sidebar-panel__child-thread",
         id: reply.id,
         spacing: "2",
-        children: /*#__PURE__*/_jsx(CommentBoard, {
+        children: ['approved' !== thread.status && /*#__PURE__*/_jsx(CommentBoard, {
           thread: reply,
-          parentThread: thread
-        })
-      }, reply.id)), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsxs(VStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        spacing: "2",
-        children: [/*#__PURE__*/_jsx(HStack, {
-          alignment: "left",
-          spacing: "3",
-          justify: "flex-start",
-          children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
-        }), /*#__PURE__*/_jsx(VStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: /*#__PURE__*/_jsx(CommentForm, {
-            onSubmit: inputComment => {
-              onAddReply(inputComment, thread.id);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false),
-            submitButtonText: _x('Reply', 'Add reply comment')
-          })
+          onEdit: onEditComment,
+          onDelete: onCommentDelete
+        }), 'approved' === thread.status && /*#__PURE__*/_jsx(CommentBoard, {
+          thread: reply
         })]
+      }, reply.id))]
+    }), 'approved' !== thread.status && isFocused && /*#__PURE__*/_jsxs(VStack, {
+      className: "editor-collab-sidebar-panel__child-thread",
+      spacing: "2",
+      children: [/*#__PURE__*/_jsx(HStack, {
+        alignment: "left",
+        spacing: "3",
+        justify: "flex-start",
+        children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
+      }), /*#__PURE__*/_jsx(VStack, {
+        spacing: "3",
+        className: "editor-collab-sidebar-panel__comment-field",
+        children: /*#__PURE__*/_jsx(CommentForm, {
+          onSubmit: inputComment => {
+            onAddReply(inputComment, thread.id);
+          },
+          onCancel: event => {
+            event.stopPropagation(); // Prevent the parent onClick from being triggered
+            clearThreadFocus();
+          },
+          submitButtonText: _x('Reply', 'Add reply comment')
+        })
       })]
-    }, thread.id))]
+    })]
   });
 }
-
-/**
- * Renders the header of a comment in the collaboration sidebar.
- *
- * @param {Object}   props           - The component props.
- * @param {Object}   props.thread    - The comment thread object.
- * @param {Function} props.onResolve - The function to resolve the comment.
- * @param {Function} props.onEdit    - The function to edit the comment.
- * @param {Function} props.onDelete  - The function to delete the comment.
- * @param {Function} props.onReply   - The function to reply to the comment.
- * @param {string}   props.status    - The status of the comment.
- * @return {React.ReactNode} The rendered comment header.
- */
-function CommentHeader({
+const CommentBoard = ({
   thread,
   onResolve,
   onEdit,
   onDelete,
-  onReply,
   status
-}) {
-  const actions = [{
+}) => {
+  const [actionState, setActionState] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const handleConfirmDelete = () => {
+    onDelete(thread.id);
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const handleConfirmResolve = () => {
+    onResolve(thread.id);
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const handleCancel = () => {
+    setActionState(false);
+    setShowConfirmDialog(false);
+  };
+  const actions = [onEdit && {
     title: _x('Edit', 'Edit comment'),
-    onClick: onEdit
-  }, {
+    onClick: () => {
+      setActionState('edit');
+    }
+  }, onDelete && {
     title: _x('Delete', 'Delete comment'),
-    onClick: onDelete
-  }, {
-    title: _x('Reply', 'Reply on a comment'),
-    onClick: onReply
+    onClick: () => {
+      setActionState('delete');
+      setShowConfirmDialog(true);
+    }
   }];
-  const moreActions = actions.filter(item => item.onClick);
-  return /*#__PURE__*/_jsxs(HStack, {
-    alignment: "left",
-    spacing: "3",
-    justify: "flex-start",
-    children: [/*#__PURE__*/_jsx(CommentAuthorInfo, {
-      avatar: thread?.author_avatar_urls?.[48],
-      name: thread?.author_name,
-      date: thread?.date
-    }), /*#__PURE__*/_jsxs("span", {
-      className: "editor-collab-sidebar-panel__comment-status",
-      children: [status !== 'approved' && /*#__PURE__*/_jsxs(HStack, {
-        alignment: "right",
-        justify: "flex-end",
-        spacing: "0",
-        children: [0 === thread?.parent && onResolve && /*#__PURE__*/_jsx(Button, {
-          label: _x('Resolve', 'Mark comment as resolved'),
-          __next40pxDefaultSize: true,
-          icon: published,
-          onClick: onResolve,
-          showTooltip: true
-        }), /*#__PURE__*/_jsx(DropdownMenu, {
-          icon: moreVertical,
-          label: _x('Select an action', 'Select comment action'),
-          className: "editor-collab-sidebar-panel__comment-dropdown-menu",
-          controls: moreActions
+  const moreActions = actions.filter(item => item?.onClick);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      children: [/*#__PURE__*/_jsx(CommentAuthorInfo, {
+        avatar: thread?.author_avatar_urls?.[48],
+        name: thread?.author_name,
+        date: thread?.date
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "editor-collab-sidebar-panel__comment-status",
+        children: [status !== 'approved' && /*#__PURE__*/_jsxs(HStack, {
+          alignment: "right",
+          justify: "flex-end",
+          spacing: "0",
+          children: [0 === thread?.parent && onResolve && /*#__PURE__*/_jsx(Button, {
+            label: _x('Resolve', 'Mark comment as resolved'),
+            __next40pxDefaultSize: true,
+            icon: published,
+            onClick: () => {
+              setActionState('resolve');
+              setShowConfirmDialog(true);
+            },
+            showTooltip: true
+          }), 0 < moreActions.length && /*#__PURE__*/_jsx(DropdownMenu, {
+            icon: moreVertical,
+            label: _x('Select an action', 'Select comment action'),
+            className: "editor-collab-sidebar-panel__comment-dropdown-menu",
+            controls: moreActions
+          })]
+        }), status === 'approved' &&
+        /*#__PURE__*/
+        // translators: tooltip for resolved comment
+        _jsx(Tooltip, {
+          text: __('Resolved'),
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: check
+          })
         })]
-      }), status === 'approved' &&
-      /*#__PURE__*/
-      // translators: tooltip for resolved comment
-      _jsx(Tooltip, {
-        text: __('Resolved'),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: check
-        })
       })]
+    }), /*#__PURE__*/_jsx(HStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      className: "editor-collab-sidebar-panel__user-comment",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: "3",
+        className: "editor-collab-sidebar-panel__comment-field",
+        children: ['edit' === actionState && /*#__PURE__*/_jsx(CommentForm, {
+          onSubmit: value => {
+            onEdit(thread.id, value);
+            setActionState(false);
+          },
+          onCancel: () => handleCancel(),
+          thread: thread,
+          submitButtonText: _x('Update', 'verb')
+        }), 'edit' !== actionState && /*#__PURE__*/_jsx(RawHTML, {
+          children: thread?.content?.raw
+        })]
+      })
+    }), 'resolve' === actionState && /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: showConfirmDialog,
+      onConfirm: handleConfirmResolve,
+      onCancel: handleCancel,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      children:
+      // translators: message displayed when confirming an action
+      __('Are you sure you want to mark this comment as resolved?')
+    }), 'delete' === actionState && /*#__PURE__*/_jsx(ConfirmDialog, {
+      isOpen: showConfirmDialog,
+      onConfirm: handleConfirmDelete,
+      onCancel: handleCancel,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
+      children:
+      // translators: message displayed when confirming an action
+      __('Are you sure you want to delete this comment?')
     })]
   });
-}
+};
 //# sourceMappingURL=comments.js.map

package/build-module/components/collab-sidebar/comments.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","RawHTML","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalConfirmDialog","ConfirmDialog","Button","DropdownMenu","Tooltip","Icon","check","published","moreVertical","__","_x","useSelect","store","blockEditorStore","CommentAuthorInfo","CommentForm","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Comments","threads","onEditComment","onAddReply","onCommentDelete","onCommentResolve","actionState","setActionState","isConfirmDialogOpen","setIsConfirmDialogOpen","handleConfirmDelete","id","handleConfirmResolve","handleCancelDelete","blockCommentId","select","_select$getBlock$attr","clientID","getSelectedBlockClientId","getBlock","attributes","CommentBoard","thread","parentThread","_parentThread$status","children","CommentHeader","onResolve","_parentThread$id","action","onEdit","onDelete","onReply","undefined","status","alignment","spacing","justify","className","onSubmit","value","onCancel","submitButtonText","content","raw","isOpen","onConfirm","confirmButtonText","cancelButtonText","Array","isArray","length","map","reply","inputComment","actions","title","onClick","moreActions","filter","item","avatar","author_avatar_urls","name","author_name","date","parent","label","__next40pxDefaultSize","icon","showTooltip","controls","text"],"sources":["@wordpress/editor/src/components/collab-sidebar/comments.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, RawHTML } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tButton,\n\tDropdownMenu,\n\tTooltip,\n} from '@wordpress/components';\nimport { Icon, check, published, moreVertical } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\n\n/**\n * Renders the Comments component.\n *\n * @param {Object}   props                  - The component props.\n * @param {Array}    props.threads          - The array of comment threads.\n * @param {Function} props.onEditComment    - The function to handle comment editing.\n * @param {Function} props.onAddReply       - The function to add a reply to a comment.\n * @param {Function} props.onCommentDelete  - The function to delete a comment.\n * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.\n * @return {React.ReactNode} The rendered Comments component.\n */\nexport function Comments( {\n\tthreads,\n\tonEditComment,\n\tonAddReply,\n\tonCommentDelete,\n\tonCommentResolve,\n} ) {\n\tconst [ actionState, setActionState ] = useState( false );\n\tconst [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );\n\n\tconst handleConfirmDelete = () => {\n\t\tonCommentDelete( actionState.id );\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst handleConfirmResolve = () => {\n\t\tonCommentResolve( actionState.id );\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst handleCancelDelete = () => {\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst blockCommentId = useSelect( ( select ) => {\n\t\tconst clientID = select( blockEditorStore ).getSelectedBlockClientId();\n\t\treturn (\n\t\t\tselect( blockEditorStore ).getBlock( clientID )?.attributes\n\t\t\t\t?.blockCommentId ?? false\n\t\t);\n\t}, [] );\n\n\tconst CommentBoard = ( { thread, parentThread } ) => {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<CommentHeader\n\t\t\t\t\tthread={ thread }\n\t\t\t\t\tonResolve={ () => {\n\t\t\t\t\t\tsetActionState( {\n\t\t\t\t\t\t\taction: 'resolve',\n\t\t\t\t\t\t\tid: parentThread?.id ?? thread.id,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetIsConfirmDialogOpen( true );\n\t\t\t\t\t} }\n\t\t\t\t\tonEdit={ () =>\n\t\t\t\t\t\tsetActionState( { action: 'edit', id: thread.id } )\n\t\t\t\t\t}\n\t\t\t\t\tonDelete={ () => {\n\t\t\t\t\t\tsetActionState( { action: 'delete', id: thread.id } );\n\t\t\t\t\t\tsetIsConfirmDialogOpen( true );\n\t\t\t\t\t} }\n\t\t\t\t\tonReply={\n\t\t\t\t\t\t! parentThread\n\t\t\t\t\t\t\t? () =>\n\t\t\t\t\t\t\t\t\tsetActionState( {\n\t\t\t\t\t\t\t\t\t\taction: 'reply',\n\t\t\t\t\t\t\t\t\t\tid: thread.id,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstatus={ parentThread?.status ?? thread.status }\n\t\t\t\t/>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"left\"\n\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-comment\"\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ 'edit' === actionState?.action &&\n\t\t\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\tonSubmit={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonEditComment( thread.id, value );\n\t\t\t\t\t\t\t\t\t\tsetActionState( false );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonCancel={ () => setActionState( false ) }\n\t\t\t\t\t\t\t\t\tthread={ thread }\n\t\t\t\t\t\t\t\t\tsubmitButtonText={ _x( 'Update', 'verb' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ( ! actionState ||\n\t\t\t\t\t\t\t'edit' !== actionState?.action ) && (\n\t\t\t\t\t\t\t<RawHTML>{ thread?.content?.raw }</RawHTML>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ 'resolve' === actionState?.action &&\n\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isConfirmDialogOpen }\n\t\t\t\t\t\t\tonConfirm={ handleConfirmResolve }\n\t\t\t\t\t\t\tonCancel={ handleCancelDelete }\n\t\t\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Are you sure you want to mark this comment as resolved?'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t\t{ 'delete' === actionState?.action &&\n\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isConfirmDialogOpen }\n\t\t\t\t\t\t\tonConfirm={ handleConfirmDelete }\n\t\t\t\t\t\t\tonCancel={ handleCancelDelete }\n\t\t\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Are you sure you want to delete this comment?'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// If there are no comments, show a message indicating no comments are available.\n\t\t\t\t( ! Array.isArray( threads ) || threads.length === 0 ) && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__thread\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// translators: message displayed when there are no comments available\n\t\t\t\t\t\t\t__( 'No comments available' )\n\t\t\t\t\t\t}\n\t\t\t\t\t</VStack>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t{ Array.isArray( threads ) &&\n\t\t\t\tthreads.length > 0 &&\n\t\t\t\tthreads.map( ( thread ) => (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tkey={ thread.id }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'editor-collab-sidebar-panel__thread',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'editor-collab-sidebar-panel__active-thread':\n\t\t\t\t\t\t\t\t\tblockCommentId &&\n\t\t\t\t\t\t\t\t\tblockCommentId === thread.id,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tid={ thread.id }\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CommentBoard thread={ thread } />\n\t\t\t\t\t\t{ 0 < thread?.reply?.length &&\n\t\t\t\t\t\t\tthread.reply.map( ( reply ) => (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tkey={ reply.id }\n\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__child-thread\"\n\t\t\t\t\t\t\t\t\tid={ reply.id }\n\t\t\t\t\t\t\t\t\tspacing=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CommentBoard\n\t\t\t\t\t\t\t\t\t\tthread={ reply }\n\t\t\t\t\t\t\t\t\t\tparentThread={ thread }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t{ 'reply' === actionState?.action &&\n\t\t\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__child-thread\"\n\t\t\t\t\t\t\t\t\tspacing=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<CommentAuthorInfo />\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\t\t\tonSubmit={ ( inputComment ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonAddReply(\n\t\t\t\t\t\t\t\t\t\t\t\t\tinputComment,\n\t\t\t\t\t\t\t\t\t\t\t\t\tthread.id\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\tsetActionState( false );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetActionState( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsubmitButtonText={ _x(\n\t\t\t\t\t\t\t\t\t\t\t\t'Reply',\n\t\t\t\t\t\t\t\t\t\t\t\t'Add reply comment'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * Renders the header of a comment in the collaboration sidebar.\n *\n * @param {Object}   props           - The component props.\n * @param {Object}   props.thread    - The comment thread object.\n * @param {Function} props.onResolve - The function to resolve the comment.\n * @param {Function} props.onEdit    - The function to edit the comment.\n * @param {Function} props.onDelete  - The function to delete the comment.\n * @param {Function} props.onReply   - The function to reply to the comment.\n * @param {string}   props.status    - The status of the comment.\n * @return {React.ReactNode} The rendered comment header.\n */\nfunction CommentHeader( {\n\tthread,\n\tonResolve,\n\tonEdit,\n\tonDelete,\n\tonReply,\n\tstatus,\n} ) {\n\tconst actions = [\n\t\t{\n\t\t\ttitle: _x( 'Edit', 'Edit comment' ),\n\t\t\tonClick: onEdit,\n\t\t},\n\t\t{\n\t\t\ttitle: _x( 'Delete', 'Delete comment' ),\n\t\t\tonClick: onDelete,\n\t\t},\n\t\t{\n\t\t\ttitle: _x( 'Reply', 'Reply on a comment' ),\n\t\t\tonClick: onReply,\n\t\t},\n\t];\n\n\tconst moreActions = actions.filter( ( item ) => item.onClick );\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t<CommentAuthorInfo\n\t\t\t\tavatar={ thread?.author_avatar_urls?.[ 48 ] }\n\t\t\t\tname={ thread?.author_name }\n\t\t\t\tdate={ thread?.date }\n\t\t\t/>\n\t\t\t<span className=\"editor-collab-sidebar-panel__comment-status\">\n\t\t\t\t{ status !== 'approved' && (\n\t\t\t\t\t<HStack alignment=\"right\" justify=\"flex-end\" spacing=\"0\">\n\t\t\t\t\t\t{ 0 === thread?.parent && onResolve && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t\t'Resolve',\n\t\t\t\t\t\t\t\t\t'Mark comment as resolved'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\ticon={ published }\n\t\t\t\t\t\t\t\tonClick={ onResolve }\n\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Select an action',\n\t\t\t\t\t\t\t\t'Select comment action'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-dropdown-menu\"\n\t\t\t\t\t\t\tcontrols={ moreActions }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t\t{ status === 'approved' && (\n\t\t\t\t\t// translators: tooltip for resolved comment\n\t\t\t\t\t<Tooltip text={ __( 'Resolved' ) }>\n\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</span>\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","RawHTML","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalConfirmDialog","ConfirmDialog","Button","DropdownMenu","Tooltip","Icon","check","published","moreVertical","__","_x","sprintf","useSelect","store","blockEditorStore","CommentAuthorInfo","CommentForm","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Comments","threads","onEditComment","onAddReply","onCommentDelete","onCommentResolve","showCommentBoard","setShowCommentBoard","blockCommentId","select","getBlockAttributes","getSelectedBlockClientId","_clientId","focusThread","setFocusThread","clearThreadFocus","children","Array","isArray","length","alignment","className","justify","spacing","map","thread","id","onClick","Thread","isFocused","CommentBoard","onResolve","onEdit","onDelete","status","reply","onSubmit","inputComment","onCancel","event","stopPropagation","submitButtonText","actionState","setActionState","showConfirmDialog","setShowConfirmDialog","handleConfirmDelete","handleConfirmResolve","handleCancel","actions","title","moreActions","filter","item","avatar","author_avatar_urls","name","author_name","date","parent","label","__next40pxDefaultSize","icon","showTooltip","controls","text","value","content","raw","isOpen","onConfirm","confirmButtonText","cancelButtonText"],"sources":["@wordpress/editor/src/components/collab-sidebar/comments.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, RawHTML } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tButton,\n\tDropdownMenu,\n\tTooltip,\n} from '@wordpress/components';\nimport { Icon, check, published, moreVertical } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\n\n/**\n * Renders the Comments component.\n *\n * @param {Object}   props                     - The component props.\n * @param {Array}    props.threads             - The array of comment threads.\n * @param {Function} props.onEditComment       - The function to handle comment editing.\n * @param {Function} props.onAddReply          - The function to add a reply to a comment.\n * @param {Function} props.onCommentDelete     - The function to delete a comment.\n * @param {Function} props.onCommentResolve    - The function to mark a comment as resolved.\n * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.\n * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.\n * @return {React.ReactNode} The rendered Comments component.\n */\nexport function Comments( {\n\tthreads,\n\tonEditComment,\n\tonAddReply,\n\tonCommentDelete,\n\tonCommentResolve,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\tconst { blockCommentId } = useSelect( ( select ) => {\n\t\tconst { getBlockAttributes, getSelectedBlockClientId } =\n\t\t\tselect( blockEditorStore );\n\t\tconst _clientId = getSelectedBlockClientId();\n\n\t\treturn {\n\t\t\tblockCommentId: _clientId\n\t\t\t\t? getBlockAttributes( _clientId )?.blockCommentId\n\t\t\t\t: null,\n\t\t};\n\t}, [] );\n\n\tconst [ focusThread, setFocusThread ] = useState(\n\t\tshowCommentBoard && blockCommentId ? blockCommentId : null\n\t);\n\n\tconst clearThreadFocus = () => {\n\t\tsetFocusThread( null );\n\t\tsetShowCommentBoard( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// If there are no comments, show a message indicating no comments are available.\n\t\t\t\t( ! Array.isArray( threads ) || threads.length === 0 ) && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__thread\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// translators: message displayed when there are no comments available\n\t\t\t\t\t\t\t__( 'No comments available' )\n\t\t\t\t\t\t}\n\t\t\t\t\t</VStack>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{ Array.isArray( threads ) &&\n\t\t\t\tthreads.length > 0 &&\n\t\t\t\tthreads.map( ( thread ) => (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tkey={ thread.id }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'editor-collab-sidebar-panel__thread',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'editor-collab-sidebar-panel__active-thread':\n\t\t\t\t\t\t\t\t\tblockCommentId &&\n\t\t\t\t\t\t\t\t\tblockCommentId === thread.id,\n\t\t\t\t\t\t\t\t'editor-collab-sidebar-panel__focus-thread':\n\t\t\t\t\t\t\t\t\tfocusThread && focusThread === thread.id,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tid={ thread.id }\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\tonClick={ () => setFocusThread( thread.id ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Thread\n\t\t\t\t\t\t\tthread={ thread }\n\t\t\t\t\t\t\tonAddReply={ onAddReply }\n\t\t\t\t\t\t\tonCommentDelete={ onCommentDelete }\n\t\t\t\t\t\t\tonCommentResolve={ onCommentResolve }\n\t\t\t\t\t\t\tonEditComment={ onEditComment }\n\t\t\t\t\t\t\tisFocused={ focusThread === thread.id }\n\t\t\t\t\t\t\tclearThreadFocus={ clearThreadFocus }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nfunction Thread( {\n\tthread,\n\tonEditComment,\n\tonAddReply,\n\tonCommentDelete,\n\tonCommentResolve,\n\tisFocused,\n\tclearThreadFocus,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<CommentBoard\n\t\t\t\tthread={ thread }\n\t\t\t\tonResolve={ onCommentResolve }\n\t\t\t\tonEdit={ onEditComment }\n\t\t\t\tonDelete={ onCommentDelete }\n\t\t\t\tstatus={ thread.status }\n\t\t\t/>\n\t\t\t{ 0 < thread?.reply?.length && (\n\t\t\t\t<>\n\t\t\t\t\t{ ! isFocused && (\n\t\t\t\t\t\t<VStack className=\"editor-collab-sidebar-panel__show-more-reply\">\n\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t// translators: 1: number of replies.\n\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t'%s more replies..',\n\t\t\t\t\t\t\t\t\t'Show replies button'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tthread?.reply?.length\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ isFocused &&\n\t\t\t\t\t\tthread.reply.map( ( reply ) => (\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tkey={ reply.id }\n\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__child-thread\"\n\t\t\t\t\t\t\t\tid={ reply.id }\n\t\t\t\t\t\t\t\tspacing=\"2\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ 'approved' !== thread.status && (\n\t\t\t\t\t\t\t\t\t<CommentBoard\n\t\t\t\t\t\t\t\t\t\tthread={ reply }\n\t\t\t\t\t\t\t\t\t\tonEdit={ onEditComment }\n\t\t\t\t\t\t\t\t\t\tonDelete={ onCommentDelete }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ 'approved' === thread.status && (\n\t\t\t\t\t\t\t\t\t<CommentBoard thread={ reply } />\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ 'approved' !== thread.status && isFocused && (\n\t\t\t\t<VStack\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__child-thread\"\n\t\t\t\t\tspacing=\"2\"\n\t\t\t\t>\n\t\t\t\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t\t\t\t<CommentAuthorInfo />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\tonSubmit={ ( inputComment ) => {\n\t\t\t\t\t\t\t\tonAddReply( inputComment, thread.id );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCancel={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.stopPropagation(); // Prevent the parent onClick from being triggered\n\t\t\t\t\t\t\t\tclearThreadFocus();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsubmitButtonText={ _x(\n\t\t\t\t\t\t\t\t'Reply',\n\t\t\t\t\t\t\t\t'Add reply comment'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {\n\tconst [ actionState, setActionState ] = useState( false );\n\tconst [ showConfirmDialog, setShowConfirmDialog ] = useState( false );\n\n\tconst handleConfirmDelete = () => {\n\t\tonDelete( thread.id );\n\t\tsetActionState( false );\n\t\tsetShowConfirmDialog( false );\n\t};\n\n\tconst handleConfirmResolve = () => {\n\t\tonResolve( thread.id );\n\t\tsetActionState( false );\n\t\tsetShowConfirmDialog( false );\n\t};\n\n\tconst handleCancel = () => {\n\t\tsetActionState( false );\n\t\tsetShowConfirmDialog( false );\n\t};\n\n\tconst actions = [\n\t\tonEdit && {\n\t\t\ttitle: _x( 'Edit', 'Edit comment' ),\n\t\t\tonClick: () => {\n\t\t\t\tsetActionState( 'edit' );\n\t\t\t},\n\t\t},\n\t\tonDelete && {\n\t\t\ttitle: _x( 'Delete', 'Delete comment' ),\n\t\t\tonClick: () => {\n\t\t\t\tsetActionState( 'delete' );\n\t\t\t\tsetShowConfirmDialog( true );\n\t\t\t},\n\t\t},\n\t];\n\n\tconst moreActions = actions.filter( ( item ) => item?.onClick );\n\n\treturn (\n\t\t<>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t\t<CommentAuthorInfo\n\t\t\t\t\tavatar={ thread?.author_avatar_urls?.[ 48 ] }\n\t\t\t\t\tname={ thread?.author_name }\n\t\t\t\t\tdate={ thread?.date }\n\t\t\t\t/>\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__comment-status\">\n\t\t\t\t\t{ status !== 'approved' && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"right\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tspacing=\"0\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ 0 === thread?.parent && onResolve && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t\t\t'Resolve',\n\t\t\t\t\t\t\t\t\t\t'Mark comment as resolved'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\ticon={ published }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetActionState( 'resolve' );\n\t\t\t\t\t\t\t\t\t\tsetShowConfirmDialog( true );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ 0 < moreActions.length && (\n\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t\t\t'Select an action',\n\t\t\t\t\t\t\t\t\t\t'Select comment action'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-dropdown-menu\"\n\t\t\t\t\t\t\t\t\tcontrols={ moreActions }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t\t{ status === 'approved' && (\n\t\t\t\t\t\t// translators: tooltip for resolved comment\n\t\t\t\t\t\t<Tooltip text={ __( 'Resolved' ) }>\n\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t</HStack>\n\t\t\t<HStack\n\t\t\t\talignment=\"left\"\n\t\t\t\tspacing=\"3\"\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-comment\"\n\t\t\t>\n\t\t\t\t<VStack\n\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t>\n\t\t\t\t\t{ 'edit' === actionState && (\n\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\tonSubmit={ ( value ) => {\n\t\t\t\t\t\t\t\tonEdit( thread.id, value );\n\t\t\t\t\t\t\t\tsetActionState( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCancel={ () => handleCancel() }\n\t\t\t\t\t\t\tthread={ thread }\n\t\t\t\t\t\t\tsubmitButtonText={ _x( 'Update', 'verb' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ 'edit' !== actionState && (\n\t\t\t\t\t\t<RawHTML>{ thread?.content?.raw }</RawHTML>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</HStack>\n\t\t\t{ 'resolve' === actionState && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ showConfirmDialog }\n\t\t\t\t\tonConfirm={ handleConfirmResolve }\n\t\t\t\t\tonCancel={ handleCancel }\n\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t>\n\t\t\t\t\t{\n\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Are you sure you want to mark this comment as resolved?'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t\t{ 'delete' === actionState && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ showConfirmDialog }\n\t\t\t\t\tonConfirm={ handleConfirmDelete }\n\t\t\t\t\tonCancel={ handleCancel }\n\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t>\n\t\t\t\t\t{\n\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t__( 'Are you sure you want to delete this comment?' )\n\t\t\t\t\t}\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/collab-sidebar/index.js

@@ -1,3 +1,4 @@
+/* wp:polyfill */
 /**
  * WordPress dependencies
  */
@@ -174,8 +175,10 @@ function CollabSidebarContent({
       onEditComment: onEditComment,
       onAddReply: addNewComment,
       onCommentDelete: onCommentDelete,
-      onCommentResolve: onCommentResolve
-    })]
+      onCommentResolve: onCommentResolve,
+      showCommentBoard: showCommentBoard,
+      setShowCommentBoard: setShowCommentBoard
+    }, getSelectedBlockClientId())]
   });
 }
 
@@ -268,11 +271,15 @@ export default function CollabSidebar() {
         sortedThreads: []
       };
     }
+    const updatedResult = result.map(item => ({
+      ...item,
+      reply: [...item.reply].reverse()
+    }));
     const blockCommentIds = getCommentIdsFromBlocks(blocks);
-    const threadIdMap = new Map(result.map(thread => [thread.id, thread]));
+    const threadIdMap = new Map(updatedResult.map(thread => [thread.id, thread]));
     const sortedComments = blockCommentIds.map(id => threadIdMap.get(id)).filter(thread => thread !== undefined);
     return {
-      resultComments: result,
+      resultComments: updatedResult,
       sortedThreads: sortedComments
     };
   }, [threads, blocks]);