@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

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

@@ -1,269 +1,182 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch, subscribe } from '@wordpress/data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
-import { comment as commentIcon } from '@wordpress/icons';
-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';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import PluginSidebar from '../plugin-sidebar';
-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 CommentAvatarIndicator from './comment-indicator-toolbar';
-import { useGlobalStylesContext } from '../global-styles-provider';
-import { useBlockComments } from './hooks';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { __experimentalVStack as VStack } from "@wordpress/components";
+import { useState, useRef } from "@wordpress/element";
+import { useViewportMatch } from "@wordpress/compose";
+import { comment as commentIcon } from "@wordpress/icons";
+import { store as blockEditorStore } from "@wordpress/block-editor";
+import { store as interfaceStore } from "@wordpress/interface";
+import PluginSidebar from "../plugin-sidebar";
+import { collabHistorySidebarName, collabSidebarName } from "./constants";
+import { Comments } from "./comments";
+import { AddComment } from "./add-comment";
+import { store as editorStore } from "../../store";
+import AddCommentMenuItem from "./comment-menu-item";
+import CommentAvatarIndicator from "./comment-indicator-toolbar";
+import { useGlobalStylesContext } from "../global-styles-provider";
+import {
+  useBlockComments,
+  useBlockCommentsActions,
+  useEnableFloatingSidebar
+} from "./hooks";
+import { focusCommentThread } from "./utils";
 function CollabSidebarContent({
   showCommentBoard,
   setShowCommentBoard,
   styles,
-  comments
+  comments,
+  commentSidebarRef,
+  reflowComments,
+  commentLastUpdated,
+  isFloating = false
 }) {
-  const {
-    createNotice
-  } = useDispatch(noticesStore);
-  const {
-    saveEntityRecord,
-    deleteEntityRecord
-  } = useDispatch(coreStore);
-  const {
-    updateBlockAttributes
-  } = useDispatch(blockEditorStore);
-  const {
-    currentPostId,
-    getSelectedBlockClientId,
-    getBlockAttributes
-  } = useSelect(select => {
-    const {
-      getCurrentPostId
-    } = select(editorStore);
-    return {
-      getSelectedBlockClientId: select(blockEditorStore).getSelectedBlockClientId,
-      getBlockAttributes: select(blockEditorStore).getBlockAttributes,
-      currentPostId: getCurrentPostId()
-    };
-  }, []);
-  const onError = error => {
-    const errorMessage = error.message && error.code !== 'unknown_error' ? decodeEntities(error.message) : __('An error occurred while performing an update.');
-    createNotice('error', errorMessage, {
-      type: 'snackbar',
-      isDismissible: true
-    });
-  };
-  const addNewComment = async ({
-    content,
-    parent
-  }) => {
-    try {
-      const savedRecord = await saveEntityRecord('root', 'comment', {
-        post: currentPostId,
-        content,
-        comment_type: 'block_comment',
-        comment_approved: 0,
-        parent: parent || 0
-      }, {
-        throwOnError: true
-      });
-
-      // If it's a main comment, update the block attributes with the comment id.
-      if (!parent && savedRecord?.id) {
-        const metadata = getBlockAttributes(getSelectedBlockClientId())?.metadata;
-        updateBlockAttributes(getSelectedBlockClientId(), {
-          metadata: {
-            ...metadata,
-            commentId: savedRecord.id
+  const { onCreate, onEdit, onDelete } = useBlockCommentsActions(reflowComments);
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      className: "editor-collab-sidebar-panel",
+      style: styles,
+      role: "list",
+      spacing: "3",
+      ref: (node) => {
+        commentSidebarRef.current = node;
+      },
+      children: [
+        !isFloating && /* @__PURE__ */ jsx(
+          AddComment,
+          {
+            onSubmit: onCreate,
+            showCommentBoard,
+            setShowCommentBoard,
+            commentSidebarRef
           }
-        });
-      }
-      createNotice('snackbar', parent ? __('Reply added successfully.') : __('Comment added successfully.'), {
-        type: 'snackbar',
-        isDismissible: true
-      });
-    } catch (error) {
-      onError(error);
-    }
-  };
-  const onEditComment = async ({
-    id,
-    content,
-    status
-  }) => {
-    const messageType = status ? status : 'updated';
-    const messages = {
-      approved: __('Comment marked as resolved.'),
-      hold: __('Comment reopened.'),
-      updated: __('Comment updated.')
-    };
-    try {
-      var _messages$messageType;
-      await saveEntityRecord('root', 'comment', {
-        id,
-        content,
-        status
-      }, {
-        throwOnError: true
-      });
-      createNotice('snackbar', (_messages$messageType = messages[messageType]) !== null && _messages$messageType !== void 0 ? _messages$messageType : __('Comment updated.'), {
-        type: 'snackbar',
-        isDismissible: true
-      });
-    } catch (error) {
-      onError(error);
-    }
-  };
-  const onCommentDelete = async comment => {
-    try {
-      await deleteEntityRecord('root', 'comment', comment.id, undefined, {
-        throwOnError: true
-      });
-      if (!comment.parent) {
-        const metadata = getBlockAttributes(getSelectedBlockClientId())?.metadata;
-        updateBlockAttributes(getSelectedBlockClientId(), {
-          metadata: {
-            ...metadata,
-            commentId: undefined
+        ),
+        /* @__PURE__ */ jsx(
+          Comments,
+          {
+            threads: comments,
+            onEditComment: onEdit,
+            onAddReply: onCreate,
+            onCommentDelete: onDelete,
+            showCommentBoard,
+            setShowCommentBoard,
+            commentSidebarRef,
+            reflowComments,
+            commentLastUpdated,
+            isFloating
           }
-        });
-      }
-      createNotice('snackbar', __('Comment deleted successfully.'), {
-        type: 'snackbar',
-        isDismissible: true
-      });
-    } catch (error) {
-      onError(error);
+        )
+      ]
     }
-  };
-  return /*#__PURE__*/_jsx("div", {
-    className: "editor-collab-sidebar-panel",
-    style: styles,
-    children: /*#__PURE__*/_jsxs(VStack, {
-      role: "list",
-      spacing: "3",
-      children: [/*#__PURE__*/_jsx(AddComment, {
-        onSubmit: addNewComment,
-        showCommentBoard: showCommentBoard,
-        setShowCommentBoard: setShowCommentBoard
-      }), /*#__PURE__*/_jsx(Comments, {
-        threads: comments,
-        onEditComment: onEditComment,
-        onAddReply: addNewComment,
-        onCommentDelete: onCommentDelete,
-        showCommentBoard: showCommentBoard,
-        setShowCommentBoard: setShowCommentBoard
-      }, getSelectedBlockClientId())]
-    })
-  });
+  );
 }
-
-/**
- * Renders the Collab sidebar.
- */
-export default function CollabSidebar() {
+function CollabSidebar() {
   const [showCommentBoard, setShowCommentBoard] = useState(false);
-  const {
-    enableComplementaryArea
-  } = useDispatch(interfaceStore);
-  const {
-    getActiveComplementaryArea
-  } = useSelect(interfaceStore);
-  const isLargeViewport = useViewportMatch('medium');
-  const {
-    postId
-  } = useSelect(select => {
-    const {
-      getCurrentPostId
-    } = select(editorStore);
+  const { getActiveComplementaryArea } = useSelect(interfaceStore);
+  const { enableComplementaryArea } = useDispatch(interfaceStore);
+  const isLargeViewport = useViewportMatch("medium");
+  const commentSidebarRef = useRef(null);
+  const { postId } = useSelect((select) => {
+    const { getCurrentPostId } = select(editorStore);
     return {
       postId: getCurrentPostId()
     };
   }, []);
-  const blockCommentId = useSelect(select => {
-    const {
-      getBlockAttributes,
-      getSelectedBlockClientId
-    } = select(blockEditorStore);
-    const _clientId = getSelectedBlockClientId();
-    return _clientId ? getBlockAttributes(_clientId)?.metadata?.commentId : null;
+  const blockCommentId = useSelect((select) => {
+    const { getBlockAttributes, getSelectedBlockClientId } = select(blockEditorStore);
+    const clientId = getSelectedBlockClientId();
+    return clientId ? getBlockAttributes(clientId)?.metadata?.commentId : null;
   }, []);
-  const openCollabBoard = () => {
-    setShowCommentBoard(true);
-    enableComplementaryArea('core', collabHistorySidebarName);
-  };
   const {
     resultComments,
     unresolvedSortedThreads,
-    totalPages
+    totalPages,
+    reflowComments,
+    commentLastUpdated
   } = useBlockComments(postId);
+  useEnableFloatingSidebar(resultComments.length > 0);
   const hasMoreComments = totalPages && totalPages > 1;
-
-  // Get the global styles to set the background color of the sidebar.
-  const {
-    merged: GlobalStyles
-  } = useGlobalStylesContext();
+  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', collabSidebarName);
-        unsubscribe();
-      }
-    });
-  }
-  const AddCommentComponent = blockCommentId ? CommentAvatarIndicator : AddCommentButton;
-
-  // Find the current thread for the selected block.
-  const currentThread = blockCommentId ? resultComments.find(thread => thread.id === blockCommentId) : null;
-
-  // If postId is not a valid number, do not render the comment sidebar.
-  if (!(!!postId && typeof postId === 'number')) {
+  const currentThread = blockCommentId ? resultComments.find((thread) => thread.id === blockCommentId) : null;
+  if (!(!!postId && typeof postId === "number")) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(AddCommentComponent, {
-      onClick: openCollabBoard,
-      thread: currentThread,
-      hasMoreComments: hasMoreComments
-    }), /*#__PURE__*/_jsx(PluginSidebar, {
-      identifier: collabHistorySidebarName
-      // translators: Comments sidebar title
-      ,
-      title: __('Comments'),
-      icon: commentIcon,
-      closeLabel: __('Close Comments'),
-      children: /*#__PURE__*/_jsx(CollabSidebarContent, {
-        comments: resultComments,
-        showCommentBoard: showCommentBoard,
-        setShowCommentBoard: setShowCommentBoard
-      })
-    }), isLargeViewport && /*#__PURE__*/_jsx(PluginSidebar, {
-      isPinnable: false,
-      header: false,
-      identifier: collabSidebarName,
-      className: "editor-collab-sidebar",
-      headerClassName: "editor-collab-sidebar__header",
-      children: /*#__PURE__*/_jsx(CollabSidebarContent, {
-        comments: unresolvedSortedThreads,
-        showCommentBoard: showCommentBoard,
-        setShowCommentBoard: setShowCommentBoard,
-        styles: {
-          backgroundColor
-        }
-      })
-    })]
-  });
+  async function openTheSidebar() {
+    enableComplementaryArea("core", collabHistorySidebarName);
+    const activeArea = await getActiveComplementaryArea("core");
+    if ([collabHistorySidebarName, collabSidebarName].includes(
+      activeArea
+    )) {
+      setShowCommentBoard(!blockCommentId);
+      focusCommentThread(
+        blockCommentId,
+        commentSidebarRef.current,
+        // Focus a comment thread when there's a selected block with a comment.
+        !blockCommentId ? "textarea" : void 0
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    blockCommentId && /* @__PURE__ */ jsx(
+      CommentAvatarIndicator,
+      {
+        thread: currentThread,
+        hasMoreComments,
+        onClick: openTheSidebar
+      }
+    ),
+    /* @__PURE__ */ jsx(AddCommentMenuItem, { onClick: openTheSidebar }),
+    /* @__PURE__ */ jsx(
+      PluginSidebar,
+      {
+        identifier: collabHistorySidebarName,
+        title: __("Notes"),
+        icon: commentIcon,
+        closeLabel: __("Close Notes"),
+        children: /* @__PURE__ */ jsx(
+          CollabSidebarContent,
+          {
+            comments: resultComments,
+            showCommentBoard,
+            setShowCommentBoard,
+            commentSidebarRef,
+            reflowComments,
+            commentLastUpdated
+          }
+        )
+      }
+    ),
+    isLargeViewport && unresolvedSortedThreads.length > 0 && /* @__PURE__ */ jsx(
+      PluginSidebar,
+      {
+        isPinnable: false,
+        header: false,
+        identifier: collabSidebarName,
+        className: "editor-collab-sidebar",
+        headerClassName: "editor-collab-sidebar__header",
+        backgroundColor,
+        children: /* @__PURE__ */ jsx(
+          CollabSidebarContent,
+          {
+            comments: unresolvedSortedThreads,
+            showCommentBoard,
+            setShowCommentBoard,
+            commentSidebarRef,
+            reflowComments,
+            commentLastUpdated,
+            styles: {
+              backgroundColor
+            },
+            isFloating: true
+          }
+        )
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=index.js.map
+export {
+  CollabSidebar as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["__","useSelect","useDispatch","subscribe","__experimentalVStack","VStack","useState","useViewportMatch","comment","commentIcon","store","noticesStore","coreStore","blockEditorStore","interfaceStore","decodeEntities","PluginSidebar","collabHistorySidebarName","collabSidebarName","Comments","AddComment","editorStore","AddCommentButton","CommentAvatarIndicator","useGlobalStylesContext","useBlockComments","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CollabSidebarContent","showCommentBoard","setShowCommentBoard","styles","comments","createNotice","saveEntityRecord","deleteEntityRecord","updateBlockAttributes","currentPostId","getSelectedBlockClientId","getBlockAttributes","select","getCurrentPostId","onError","error","errorMessage","message","code","type","isDismissible","addNewComment","content","parent","savedRecord","post","comment_type","comment_approved","throwOnError","id","metadata","commentId","onEditComment","status","messageType","messages","approved","hold","updated","_messages$messageType","onCommentDelete","undefined","className","style","children","role","spacing","onSubmit","threads","onAddReply","CollabSidebar","enableComplementaryArea","getActiveComplementaryArea","isLargeViewport","postId","blockCommentId","_clientId","openCollabBoard","resultComments","unresolvedSortedThreads","totalPages","hasMoreComments","merged","GlobalStyles","backgroundColor","color","background","length","unsubscribe","activeSidebar","AddCommentComponent","currentThread","find","thread","onClick","identifier","title","icon","closeLabel","isPinnable","header","headerClassName"],"sources":["@wordpress/editor/src/components/collab-sidebar/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch, subscribe } from '@wordpress/data';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport { collabHistorySidebarName, collabSidebarName } from './constants';\nimport { Comments } from './comments';\nimport { AddComment } from './add-comment';\nimport { store as editorStore } from '../../store';\nimport AddCommentButton from './comment-button';\nimport CommentAvatarIndicator from './comment-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport { useBlockComments } from './hooks';\n\nfunction CollabSidebarContent( {\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n\tstyles,\n\tcomments,\n} ) {\n\tconst { createNotice } = useDispatch( noticesStore );\n\tconst { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { currentPostId, getSelectedBlockClientId, getBlockAttributes } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst { getCurrentPostId } = select( editorStore );\n\t\t\treturn {\n\t\t\t\tgetSelectedBlockClientId:\n\t\t\t\t\tselect( blockEditorStore ).getSelectedBlockClientId,\n\t\t\t\tgetBlockAttributes:\n\t\t\t\t\tselect( blockEditorStore ).getBlockAttributes,\n\t\t\t\tcurrentPostId: getCurrentPostId(),\n\t\t\t};\n\t\t}, [] );\n\n\tconst onError = ( error ) => {\n\t\tconst errorMessage =\n\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t? decodeEntities( error.message )\n\t\t\t\t: __( 'An error occurred while performing an update.' );\n\t\tcreateNotice( 'error', errorMessage, {\n\t\t\ttype: 'snackbar',\n\t\t\tisDismissible: true,\n\t\t} );\n\t};\n\n\tconst addNewComment = async ( { content, parent } ) => {\n\t\ttry {\n\t\t\tconst savedRecord = await saveEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'comment',\n\t\t\t\t{\n\t\t\t\t\tpost: currentPostId,\n\t\t\t\t\tcontent,\n\t\t\t\t\tcomment_type: 'block_comment',\n\t\t\t\t\tcomment_approved: 0,\n\t\t\t\t\tparent: parent || 0,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\t// If it's a main comment, update the block attributes with the comment id.\n\t\t\tif ( ! parent && savedRecord?.id ) {\n\t\t\t\tconst metadata = getBlockAttributes(\n\t\t\t\t\tgetSelectedBlockClientId()\n\t\t\t\t)?.metadata;\n\t\t\t\tupdateBlockAttributes( getSelectedBlockClientId(), {\n\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t...metadata,\n\t\t\t\t\t\tcommentId: savedRecord.id,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tcreateNotice(\n\t\t\t\t'snackbar',\n\t\t\t\tparent\n\t\t\t\t\t? __( 'Reply added successfully.' )\n\t\t\t\t\t: __( 'Comment added successfully.' ),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tisDismissible: true,\n\t\t\t\t}\n\t\t\t);\n\t\t} catch ( error ) {\n\t\t\tonError( error );\n\t\t}\n\t};\n\n\tconst onEditComment = async ( { id, content, status } ) => {\n\t\tconst messageType = status ? status : 'updated';\n\t\tconst messages = {\n\t\t\tapproved: __( 'Comment marked as resolved.' ),\n\t\t\thold: __( 'Comment reopened.' ),\n\t\t\tupdated: __( 'Comment updated.' ),\n\t\t};\n\n\t\ttry {\n\t\t\tawait saveEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'comment',\n\t\t\t\t{\n\t\t\t\t\tid,\n\t\t\t\t\tcontent,\n\t\t\t\t\tstatus,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\t\t\tcreateNotice(\n\t\t\t\t'snackbar',\n\t\t\t\tmessages[ messageType ] ?? __( 'Comment updated.' ),\n\t\t\t\t{\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tisDismissible: true,\n\t\t\t\t}\n\t\t\t);\n\t\t} catch ( error ) {\n\t\t\tonError( error );\n\t\t}\n\t};\n\n\tconst onCommentDelete = async ( comment ) => {\n\t\ttry {\n\t\t\tawait deleteEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'comment',\n\t\t\t\tcomment.id,\n\t\t\t\tundefined,\n\t\t\t\t{\n\t\t\t\t\tthrowOnError: true,\n\t\t\t\t}\n\t\t\t);\n\n\t\t\tif ( ! comment.parent ) {\n\t\t\t\tconst metadata = getBlockAttributes(\n\t\t\t\t\tgetSelectedBlockClientId()\n\t\t\t\t)?.metadata;\n\t\t\t\tupdateBlockAttributes( getSelectedBlockClientId(), {\n\t\t\t\t\tmetadata: {\n\t\t\t\t\t\t...metadata,\n\t\t\t\t\t\tcommentId: undefined,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tcreateNotice( 'snackbar', __( 'Comment deleted successfully.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tisDismissible: true,\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tonError( error );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"editor-collab-sidebar-panel\" style={ styles }>\n\t\t\t<VStack role=\"list\" spacing=\"3\">\n\t\t\t\t<AddComment\n\t\t\t\t\tonSubmit={ addNewComment }\n\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t/>\n\t\t\t\t<Comments\n\t\t\t\t\tkey={ getSelectedBlockClientId() }\n\t\t\t\t\tthreads={ comments }\n\t\t\t\t\tonEditComment={ onEditComment }\n\t\t\t\t\tonAddReply={ addNewComment }\n\t\t\t\t\tonCommentDelete={ onCommentDelete }\n\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\n/**\n * Renders the Collab sidebar.\n */\nexport default function CollabSidebar() {\n\tconst [ showCommentBoard, setShowCommentBoard ] = useState( false );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst { postId } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId } = select( editorStore );\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t};\n\t}, [] );\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 _clientId\n\t\t\t? getBlockAttributes( _clientId )?.metadata?.commentId\n\t\t\t: null;\n\t}, [] );\n\n\tconst openCollabBoard = () => {\n\t\tsetShowCommentBoard( true );\n\t\tenableComplementaryArea( 'core', collabHistorySidebarName );\n\t};\n\n\tconst { resultComments, unresolvedSortedThreads, totalPages } =\n\t\tuseBlockComments( postId );\n\n\tconst hasMoreComments = totalPages && totalPages > 1;\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\tif ( 0 < resultComments.length ) {\n\t\tconst unsubscribe = subscribe( () => {\n\t\t\tconst activeSidebar = getActiveComplementaryArea( 'core' );\n\n\t\t\tif ( ! activeSidebar ) {\n\t\t\t\tenableComplementaryArea( 'core', collabSidebarName );\n\t\t\t\tunsubscribe();\n\t\t\t}\n\t\t} );\n\t}\n\n\tconst AddCommentComponent = blockCommentId\n\t\t? CommentAvatarIndicator\n\t\t: AddCommentButton;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = blockCommentId\n\t\t? resultComments.find( ( thread ) => thread.id === blockCommentId )\n\t\t: null;\n\n\t// If postId is not a valid number, do not render the comment sidebar.\n\tif ( ! ( !! postId && typeof postId === 'number' ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<AddCommentComponent\n\t\t\t\tonClick={ openCollabBoard }\n\t\t\t\tthread={ currentThread }\n\t\t\t\thasMoreComments={ hasMoreComments }\n\t\t\t/>\n\t\t\t<PluginSidebar\n\t\t\t\tidentifier={ collabHistorySidebarName }\n\t\t\t\t// translators: Comments sidebar title\n\t\t\t\ttitle={ __( 'Comments' ) }\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tcloseLabel={ __( 'Close Comments' ) }\n\t\t\t>\n\t\t\t\t<CollabSidebarContent\n\t\t\t\t\tcomments={ resultComments }\n\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t/>\n\t\t\t</PluginSidebar>\n\t\t\t{ isLargeViewport && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ collabSidebarName }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t>\n\t\t\t\t\t<CollabSidebarContent\n\t\t\t\t\t\tcomments={ unresolvedSortedThreads }\n\t\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t\t\tstyles={ {\n\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { useState, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport PluginSidebar from '../plugin-sidebar';\nimport { collabHistorySidebarName, collabSidebarName } from './constants';\nimport { Comments } from './comments';\nimport { AddComment } from './add-comment';\nimport { store as editorStore } from '../../store';\nimport AddCommentMenuItem from './comment-menu-item';\nimport CommentAvatarIndicator from './comment-indicator-toolbar';\nimport { useGlobalStylesContext } from '../global-styles-provider';\nimport {\n\tuseBlockComments,\n\tuseBlockCommentsActions,\n\tuseEnableFloatingSidebar,\n} from './hooks';\nimport { focusCommentThread } from './utils';\n\nfunction CollabSidebarContent( {\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n\tstyles,\n\tcomments,\n\tcommentSidebarRef,\n\treflowComments,\n\tcommentLastUpdated,\n\tisFloating = false,\n} ) {\n\tconst { onCreate, onEdit, onDelete } =\n\t\tuseBlockCommentsActions( reflowComments );\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel\"\n\t\t\tstyle={ styles }\n\t\t\trole=\"list\"\n\t\t\tspacing=\"3\"\n\t\t\tref={ ( node ) => {\n\t\t\t\t// Keeps the ref fresh when switching between floating and pinned sidebar.\n\t\t\t\tcommentSidebarRef.current = node;\n\t\t\t} }\n\t\t>\n\t\t\t{ ! isFloating && (\n\t\t\t\t<AddComment\n\t\t\t\t\tonSubmit={ onCreate }\n\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Comments\n\t\t\t\tthreads={ comments }\n\t\t\t\tonEditComment={ onEdit }\n\t\t\t\tonAddReply={ onCreate }\n\t\t\t\tonCommentDelete={ onDelete }\n\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\tisFloating={ isFloating }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Renders the Collab sidebar.\n */\nexport default function CollabSidebar() {\n\tconst [ showCommentBoard, setShowCommentBoard ] = useState( false );\n\tconst { getActiveComplementaryArea } = useSelect( interfaceStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst commentSidebarRef = useRef( null );\n\n\tconst { postId } = useSelect( ( select ) => {\n\t\tconst { getCurrentPostId } = select( editorStore );\n\t\treturn {\n\t\t\tpostId: getCurrentPostId(),\n\t\t};\n\t}, [] );\n\n\tconst blockCommentId = useSelect( ( select ) => {\n\t\tconst { getBlockAttributes, getSelectedBlockClientId } =\n\t\t\tselect( blockEditorStore );\n\t\tconst clientId = getSelectedBlockClientId();\n\t\treturn clientId\n\t\t\t? getBlockAttributes( clientId )?.metadata?.commentId\n\t\t\t: null;\n\t}, [] );\n\n\tconst {\n\t\tresultComments,\n\t\tunresolvedSortedThreads,\n\t\ttotalPages,\n\t\treflowComments,\n\t\tcommentLastUpdated,\n\t} = useBlockComments( postId );\n\tuseEnableFloatingSidebar( resultComments.length > 0 );\n\n\tconst hasMoreComments = totalPages && totalPages > 1;\n\n\t// Get the global styles to set the background color of the sidebar.\n\tconst { merged: GlobalStyles } = useGlobalStylesContext();\n\tconst backgroundColor = GlobalStyles?.styles?.color?.background;\n\n\t// Find the current thread for the selected block.\n\tconst currentThread = blockCommentId\n\t\t? resultComments.find( ( thread ) => thread.id === blockCommentId )\n\t\t: null;\n\n\t// If postId is not a valid number, do not render the comment sidebar.\n\tif ( ! ( !! postId && typeof postId === 'number' ) ) {\n\t\treturn null;\n\t}\n\n\tasync function openTheSidebar() {\n\t\tenableComplementaryArea( 'core', collabHistorySidebarName );\n\t\tconst activeArea = await getActiveComplementaryArea( 'core' );\n\n\t\t// Move focus to the target element after the sidebar has opened.\n\t\tif (\n\t\t\t[ collabHistorySidebarName, collabSidebarName ].includes(\n\t\t\t\tactiveArea\n\t\t\t)\n\t\t) {\n\t\t\tsetShowCommentBoard( ! blockCommentId );\n\t\t\tfocusCommentThread(\n\t\t\t\tblockCommentId,\n\t\t\t\tcommentSidebarRef.current,\n\t\t\t\t// Focus a comment thread when there's a selected block with a comment.\n\t\t\t\t! blockCommentId ? 'textarea' : undefined\n\t\t\t);\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ blockCommentId && (\n\t\t\t\t<CommentAvatarIndicator\n\t\t\t\t\tthread={ currentThread }\n\t\t\t\t\thasMoreComments={ hasMoreComments }\n\t\t\t\t\tonClick={ openTheSidebar }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<AddCommentMenuItem onClick={ openTheSidebar } />\n\t\t\t<PluginSidebar\n\t\t\t\tidentifier={ collabHistorySidebarName }\n\t\t\t\ttitle={ __( 'Notes' ) }\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tcloseLabel={ __( 'Close Notes' ) }\n\t\t\t>\n\t\t\t\t<CollabSidebarContent\n\t\t\t\t\tcomments={ resultComments }\n\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\treflowComments={ reflowComments }\n\t\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\t/>\n\t\t\t</PluginSidebar>\n\t\t\t{ isLargeViewport && unresolvedSortedThreads.length > 0 && (\n\t\t\t\t<PluginSidebar\n\t\t\t\t\tisPinnable={ false }\n\t\t\t\t\theader={ false }\n\t\t\t\t\tidentifier={ collabSidebarName }\n\t\t\t\t\tclassName=\"editor-collab-sidebar\"\n\t\t\t\t\theaderClassName=\"editor-collab-sidebar__header\"\n\t\t\t\t\tbackgroundColor={ backgroundColor }\n\t\t\t\t>\n\t\t\t\t\t<CollabSidebarContent\n\t\t\t\t\t\tcomments={ unresolvedSortedThreads }\n\t\t\t\t\t\tshowCommentBoard={ showCommentBoard }\n\t\t\t\t\t\tsetShowCommentBoard={ setShowCommentBoard }\n\t\t\t\t\t\tcommentSidebarRef={ commentSidebarRef }\n\t\t\t\t\t\treflowComments={ reflowComments }\n\t\t\t\t\t\tcommentLastUpdated={ commentLastUpdated }\n\t\t\t\t\t\tstyles={ {\n\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisFloating\n\t\t\t\t\t/>\n\t\t\t\t</PluginSidebar>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -1,87 +1,82 @@
-/**
- * WordPress dependencies
- */
-import { _x } from '@wordpress/i18n';
-
-/**
- * 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) {
+import { _x } from "@wordpress/i18n";
+function sanitizeCommentString(str) {
   return str.trim();
 }
-
-/**
- * These colors are picked from the WordPress.org design library.
- * @see https://www.figma.com/design/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?node-id=1-2193&t=M6WdRvTpt0mh8n6T-1
- */
-const AVATAR_BORDER_COLORS = ['#3858E9',
-// Blueberry
-'#9fB1FF',
-// Blueberry 2
-'#1D35B4',
-// Dark Blueberry
-'#1A1919',
-// Charcoal 0
-'#E26F56',
-// Pomegranate
-'#33F078',
-// Acid Green
-'#FFF972',
-// Lemon
-'#7A00DF' // Purple
+function noop() {
+}
+const AVATAR_BORDER_COLORS = [
+  "#3858E9",
+  // Blueberry
+  "#9fB1FF",
+  // Blueberry 2
+  "#1D35B4",
+  // Dark Blueberry
+  "#1A1919",
+  // Charcoal 0
+  "#E26F56",
+  // Pomegranate
+  "#33F078",
+  // Acid Green
+  "#FFF972",
+  // Lemon
+  "#7A00DF"
+  // Purple
 ];
-
-/**
- * Gets the border color for an avatar based on the user ID.
- *
- * @param {number} userId - The user ID.
- * @return {string} - The border color.
- */
-export function getAvatarBorderColor(userId) {
+function getAvatarBorderColor(userId) {
   return AVATAR_BORDER_COLORS[userId % AVATAR_BORDER_COLORS.length];
 }
-
-/**
- * Generates a comment excerpt from text based on word count type and length.
- *
- * @param {string} text          - The comment text to generate excerpt from.
- * @param {number} excerptLength - The maximum length for the commentexcerpt.
- * @return {string} - The generated comment excerpt.
- */
-export function getCommentExcerpt(text, excerptLength = 10) {
+function getCommentExcerpt(text, excerptLength = 10) {
   if (!text) {
-    return '';
+    return "";
   }
-
-  /*
-   * translators: If your word count is based on single characters (e.g. East Asian characters),
-   * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
-   * Do not translate into your own language.
-   */
-  const wordCountType = _x('words', 'Word count type. Do not translate!');
+  const wordCountType = _x("words", "Word count type. Do not translate!");
   const rawText = text.trim();
-  let trimmedExcerpt = '';
-  if (wordCountType === 'words') {
-    trimmedExcerpt = rawText.split(' ', excerptLength).join(' ');
-  } else if (wordCountType === 'characters_excluding_spaces') {
-    /*
-     * 1. Split the text at the character limit,
-     * then join the substrings back into one string.
-     * 2. Count the number of spaces in the text
-     * by comparing the lengths of the string with and without spaces.
-     * 3. Add the number to the length of the visible excerpt,
-     * so that the spaces are excluded from the word count.
-     */
-    const textWithSpaces = rawText.split('', excerptLength).join('');
-    const numberOfSpaces = textWithSpaces.length - textWithSpaces.replaceAll(' ', '').length;
-    trimmedExcerpt = rawText.split('', excerptLength + numberOfSpaces).join('');
-  } else if (wordCountType === 'characters_including_spaces') {
-    trimmedExcerpt = rawText.split('', excerptLength).join('');
+  let trimmedExcerpt = "";
+  if (wordCountType === "words") {
+    trimmedExcerpt = rawText.split(" ", excerptLength).join(" ");
+  } else if (wordCountType === "characters_excluding_spaces") {
+    const textWithSpaces = rawText.split("", excerptLength).join("");
+    const numberOfSpaces = textWithSpaces.length - textWithSpaces.replaceAll(" ", "").length;
+    trimmedExcerpt = rawText.split("", excerptLength + numberOfSpaces).join("");
+  } else if (wordCountType === "characters_including_spaces") {
+    trimmedExcerpt = rawText.split("", excerptLength).join("");
   }
   const isTrimmed = trimmedExcerpt !== rawText;
-  return isTrimmed ? trimmedExcerpt + '…' : trimmedExcerpt;
+  return isTrimmed ? trimmedExcerpt + "\u2026" : trimmedExcerpt;
+}
+function focusCommentThread(commentId, container, additionalSelector) {
+  if (!container) {
+    return;
+  }
+  const threadSelector = commentId ? `[role=listitem][id="comment-thread-${commentId}"]` : "[role=listitem]:not([id])";
+  const selector = additionalSelector ? `${threadSelector} ${additionalSelector}` : threadSelector;
+  return new Promise((resolve) => {
+    if (container.querySelector(selector)) {
+      return resolve(container.querySelector(selector));
+    }
+    let timer = null;
+    const observer = new window.MutationObserver(() => {
+      if (container.querySelector(selector)) {
+        clearTimeout(timer);
+        observer.disconnect();
+        resolve(container.querySelector(selector));
+      }
+    });
+    observer.observe(container, {
+      childList: true,
+      subtree: true
+    });
+    timer = setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, 3e3);
+  }).then((element) => element?.focus());
 }
-//# sourceMappingURL=utils.js.map
+export {
+  focusCommentThread,
+  getAvatarBorderColor,
+  getCommentExcerpt,
+  noop,
+  sanitizeCommentString
+};
+//# sourceMappingURL=utils.js.map