@wordpress/editor 14.34.0 → 14.35.0

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

@@ -1,11 +1,12 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// packages/editor/src/components/collab-sidebar/comments.js
 import clsx from "clsx";
 import {
   useState,
   RawHTML,
   useEffect,
   useCallback,
-  useMemo
+  useMemo,
+  useRef
 } from "@wordpress/element";
 import {
   __experimentalText as Text,
@@ -31,15 +32,17 @@ import CommentForm from "./comment-form";
 import { focusCommentThread, getCommentExcerpt } from "./utils";
 import { useFloatingThread } from "./hooks";
 import { AddComment } from "./add-comment";
-const { useBlockElement } = unlock(blockEditorPrivateApis);
-const { Menu } = unlock(componentsPrivateApis);
+import { store as editorStore } from "../../store";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { useBlockElement } = unlock(blockEditorPrivateApis);
+var { Menu } = unlock(componentsPrivateApis);
 function Comments({
   threads: noteThreads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  showCommentBoard,
-  setShowCommentBoard,
+  newNoteFormState,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating = false,
@@ -49,20 +52,28 @@ function Comments({
   const [selectedThread, setSelectedThread] = useState(null);
   const [boardOffsets, setBoardOffsets] = useState({});
   const [blockRefs, setBlockRefs] = useState({});
+  const { setCanvasMinHeight } = unlock(useDispatch(editorStore));
+  const { selectBlock, toggleBlockSpotlight } = unlock(
+    useDispatch(blockEditorStore)
+  );
   const { blockCommentId, selectedBlockClientId, orderedBlockIds } = useSelect((select) => {
-    const { getBlockAttributes, getSelectedBlockClientId } = select(blockEditorStore);
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId,
+      getClientIdsWithDescendants
+    } = select(blockEditorStore);
     const clientId = getSelectedBlockClientId();
     return {
       blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
       selectedBlockClientId: clientId,
-      orderedBlockIds: select(blockEditorStore).getBlockOrder()
+      orderedBlockIds: getClientIdsWithDescendants()
     };
   }, []);
   const relatedBlockElement = useBlockElement(selectedBlockClientId);
   const threads = useMemo(() => {
     const t = [...noteThreads];
     const orderedThreads = [];
-    if (isFloating && showCommentBoard && void 0 === blockCommentId) {
+    if (isFloating && newNoteFormState === "open") {
       const newNoteThread = {
         id: "new-note-thread",
         blockClientId: selectedBlockClientId,
@@ -86,8 +97,7 @@ function Comments({
   }, [
     noteThreads,
     isFloating,
-    showCommentBoard,
-    blockCommentId,
+    newNoteFormState,
     selectedBlockClientId,
     orderedBlockIds
   ]);
@@ -109,13 +119,15 @@ function Comments({
       focusCommentThread(prevThread.id, commentSidebarRef.current);
     } else {
       setSelectedThread(null);
-      setShowCommentBoard(false);
+      setNewNoteFormState("closed");
       relatedBlockElement?.focus();
     }
   };
   useEffect(() => {
-    setSelectedThread(blockCommentId ?? void 0);
-  }, [blockCommentId]);
+    setSelectedThread(
+      newNoteFormState === "open" ? "new-note-thread" : blockCommentId
+    );
+  }, [blockCommentId, newNoteFormState]);
   const setBlockRef = useCallback((id, blockRef) => {
     setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
@@ -123,7 +135,7 @@ function Comments({
     const calculateAllOffsets = () => {
       const offsets = {};
       if (!isFloating) {
-        return offsets;
+        return { offsets, minHeight: 0 };
       }
       const selectedThreadIndex = threads.findIndex(
         (t) => t.id === selectedThread
@@ -131,7 +143,7 @@ function Comments({
       const breakIndex = selectedThreadIndex === -1 ? 0 : selectedThreadIndex;
       const selectedThreadData = threads[breakIndex];
       if (!selectedThreadData || !blockRefs[selectedThreadData.id]) {
-        return offsets;
+        return { offsets, minHeight: 0 };
       }
       let blockElement = blockRefs[selectedThreadData.id];
       let blockRect = blockElement?.getBoundingClientRect();
@@ -184,36 +196,84 @@ function Comments({
           threadTop: threadTop + additionalOffset
         };
       }
-      return offsets;
+      let editorMinHeight = 0;
+      const lastThread = threads[threads.length - 1];
+      if (blockRefs[lastThread.id]) {
+        const lastBlockElement = blockRefs[lastThread.id];
+        const lastBlockRect = lastBlockElement?.getBoundingClientRect();
+        const lastThreadTop = lastBlockRect?.top || 0;
+        const lastThreadHeight = heights[lastThread.id] || 0;
+        const lastThreadOffset = offsets[lastThread.id] || 0;
+        editorMinHeight = lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
+      }
+      return { offsets, minHeight: editorMinHeight };
     };
-    const newOffsets = calculateAllOffsets();
+    const { offsets: newOffsets, minHeight } = calculateAllOffsets();
     if (Object.keys(newOffsets).length > 0) {
       setBoardOffsets(newOffsets);
     }
-  }, [heights, blockRefs, isFloating, threads, selectedThread]);
+    setCanvasMinHeight(minHeight);
+  }, [
+    heights,
+    blockRefs,
+    isFloating,
+    threads,
+    selectedThread,
+    setCanvasMinHeight
+  ]);
+  const handleThreadNavigation = (event, thread, isSelected) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const currentIndex = threads.findIndex((t) => t.id === thread.id);
+    if ((event.key === "Enter" || event.key === "ArrowRight") && event.currentTarget === event.target && !isSelected) {
+      setNewNoteFormState("closed");
+      setSelectedThread(thread.id);
+      if (!!thread.blockClientId) {
+        selectBlock(thread.blockClientId, null);
+        toggleBlockSpotlight(thread.blockClientId, true);
+      }
+    } else if ((event.key === "Enter" || event.key === "ArrowLeft") && event.currentTarget === event.target && isSelected || event.key === "Escape") {
+      setSelectedThread(null);
+      setNewNoteFormState("closed");
+      if (thread.blockClientId) {
+        toggleBlockSpotlight(thread.blockClientId, false);
+      }
+      focusCommentThread(thread.id, commentSidebarRef.current);
+    } else if (event.key === "ArrowDown" && currentIndex < threads.length - 1 && event.currentTarget === event.target) {
+      const nextThread = threads[currentIndex + 1];
+      focusCommentThread(nextThread.id, commentSidebarRef.current);
+    } else if (event.key === "ArrowUp" && currentIndex > 0 && event.currentTarget === event.target) {
+      const prevThread = threads[currentIndex - 1];
+      focusCommentThread(prevThread.id, commentSidebarRef.current);
+    } else if (event.key === "Home" && event.currentTarget === event.target) {
+      focusCommentThread(threads[0].id, commentSidebarRef.current);
+    } else if (event.key === "End" && event.currentTarget === event.target) {
+      focusCommentThread(
+        threads[threads.length - 1].id,
+        commentSidebarRef.current
+      );
+    }
+  };
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads && !isFloating) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        AddComment,
-        {
-          onSubmit: onAddReply,
-          showCommentBoard,
-          setShowCommentBoard,
-          commentSidebarRef
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { as: "p", children: __("No notes available.") }),
-      /* @__PURE__ */ jsx(Text, { as: "p", variant: "muted", children: __("Only logged in users can see Notes.") })
-    ] });
+    return /* @__PURE__ */ jsx(
+      AddComment,
+      {
+        onSubmit: onAddReply,
+        newNoteFormState,
+        setNewNoteFormState,
+        commentSidebarRef
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isFloating && showCommentBoard && void 0 === blockCommentId && /* @__PURE__ */ jsx(
+    !isFloating && newNoteFormState === "open" && /* @__PURE__ */ jsx(
       AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef
       }
     ),
@@ -226,7 +286,7 @@ function Comments({
         onEditComment,
         isSelected: selectedThread === thread.id,
         setSelectedThread,
-        setShowCommentBoard,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -235,7 +295,12 @@ function Comments({
         setBlockRef,
         selectedThread,
         commentLastUpdated,
-        showCommentBoard
+        newNoteFormState,
+        onKeyDown: (event) => handleThreadNavigation(
+          event,
+          thread,
+          selectedThread === thread.id
+        )
       },
       thread.id
     ))
@@ -247,7 +312,7 @@ function Thread({
   onAddReply,
   onCommentDelete,
   isSelected,
-  setShowCommentBoard,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating,
@@ -257,7 +322,8 @@ function Thread({
   setSelectedThread,
   selectedThread,
   commentLastUpdated,
-  showCommentBoard
+  newNoteFormState,
+  onKeyDown
 }) {
   const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
     useDispatch(blockEditorStore)
@@ -282,7 +348,7 @@ function Thread({
     debouncedToggleBlockHighlight(thread.blockClientId, false);
   };
   const handleCommentSelect = () => {
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     setSelectedThread(thread.id);
     if (!!thread.blockClientId) {
       selectBlock(thread.blockClientId, null);
@@ -291,7 +357,7 @@ function Thread({
   };
   const unselectThread = () => {
     setSelectedThread(null);
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     toggleBlockSpotlight(thread.blockClientId, false);
   };
   const allReplies = thread?.reply || [];
@@ -310,13 +376,13 @@ function Thread({
     __("Original block deleted. Note: %s"),
     commentExcerpt
   );
-  if ("new-note-thread" === thread.id && showCommentBoard && isFloating) {
+  if (thread.id === "new-note-thread" && newNoteFormState === "open" && isFloating) {
     return /* @__PURE__ */ jsx(
       AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -325,188 +391,172 @@ function Thread({
       }
     );
   }
-  return (
-    // Disable reason: role="listitem" does in fact support aria-expanded.
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    /* @__PURE__ */ jsxs(
-      VStack,
-      {
-        className: clsx("editor-collab-sidebar-panel__thread", {
-          "is-selected": isSelected,
-          "is-floating": isFloating
-        }),
-        id: `comment-thread-${thread.id}`,
-        spacing: "3",
-        onClick: handleCommentSelect,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus: onMouseEnter,
-        onBlur: onMouseLeave,
-        onKeyDown: (event) => {
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.key === "Enter" && event.currentTarget === event.target) {
-            if (isSelected) {
-              unselectThread();
-            } else {
-              handleCommentSelect();
-            }
-          }
-          if (event.key === "Escape") {
-            unselectThread();
-            focusCommentThread(thread.id, commentSidebarRef.current);
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      className: clsx("editor-collab-sidebar-panel__thread", {
+        "is-selected": isSelected,
+        "is-floating": isFloating
+      }),
+      id: `comment-thread-${thread.id}`,
+      spacing: "3",
+      onClick: handleCommentSelect,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus: onMouseEnter,
+      onBlur: onMouseLeave,
+      onKeyDown,
+      tabIndex: 0,
+      role: "treeitem",
+      "aria-label": ariaLabel,
+      "aria-expanded": isSelected,
+      ref: isFloating ? refs.setFloating : void 0,
+      style: isFloating ? { top: y } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-comment",
+            variant: "secondary",
+            size: "compact",
+            onClick: () => {
+              focusCommentThread(
+                thread.id,
+                commentSidebarRef.current,
+                "textarea"
+              );
+            },
+            children: __("Add new note")
           }
-        },
-        tabIndex: 0,
-        role: "listitem",
-        "aria-label": ariaLabel,
-        "aria-expanded": isSelected,
-        ref: isFloating ? refs.setFloating : void 0,
-        style: isFloating ? { top: y } : void 0,
-        children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-comment",
-              variant: "secondary",
-              size: "compact",
-              onClick: () => {
-                focusCommentThread(
-                  thread.id,
-                  commentSidebarRef.current,
-                  "textarea"
-                );
-              },
-              children: __("Add new note")
-            }
-          ),
-          !thread.blockClientId && /* @__PURE__ */ jsx(Text, { as: "p", weight: 500, variant: "muted", children: __("Original block deleted.") }),
-          /* @__PURE__ */ jsx(
-            CommentBoard,
-            {
-              thread,
-              isExpanded: isSelected,
-              onEdit: (params = {}) => {
-                const { status } = params;
-                onEditComment(params);
-                if (status === "approved") {
-                  unselectThread();
+        ),
+        !thread.blockClientId && /* @__PURE__ */ jsx(Text, { as: "p", weight: 500, variant: "muted", children: __("Original block deleted.") }),
+        /* @__PURE__ */ jsx(
+          CommentBoard,
+          {
+            thread,
+            isExpanded: isSelected,
+            onEdit: (params = {}) => {
+              onEditComment(params);
+              if (params.status === "approved") {
+                unselectThread();
+                if (isFloating) {
+                  relatedBlockElement?.focus();
+                } else {
                   focusCommentThread(
                     thread.id,
                     commentSidebarRef.current
                   );
                 }
-              },
-              onDelete: onCommentDelete,
-              reflowComments
-            }
-          ),
-          isSelected && allReplies.map((reply) => /* @__PURE__ */ jsx(
-            CommentBoard,
-            {
-              thread: reply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
-              reflowComments
+              }
             },
-            reply.id
-          )),
-          !isSelected && restReplies.length > 0 && /* @__PURE__ */ jsx(HStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ jsx(
-            Button,
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && allReplies.map((reply) => /* @__PURE__ */ jsx(
+          CommentBoard,
+          {
+            thread: reply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          },
+          reply.id
+        )),
+        !isSelected && restReplies.length > 0 && /* @__PURE__ */ jsx(HStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "compact",
+            variant: "tertiary",
+            className: "editor-collab-sidebar-panel__more-reply-button",
+            onClick: () => {
+              setSelectedThread(thread.id);
+              focusCommentThread(
+                thread.id,
+                commentSidebarRef.current
+              );
+            },
+            children: sprintf(
+              // translators: %s: number of replies.
+              _n(
+                "%s more reply",
+                "%s more replies",
+                restReplies.length
+              ),
+              restReplies.length
+            )
+          }
+        ) }),
+        !isSelected && lastReply && /* @__PURE__ */ jsx(
+          CommentBoard,
+          {
+            thread: lastReply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && /* @__PURE__ */ jsxs(VStack, { spacing: "2", role: "treeitem", children: [
+          /* @__PURE__ */ jsx(HStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ jsx(CommentAuthorInfo, {}) }),
+          /* @__PURE__ */ jsx(VStack, { spacing: "2", children: /* @__PURE__ */ jsx(
+            CommentForm,
             {
-              size: "compact",
-              variant: "tertiary",
-              className: "editor-collab-sidebar-panel__more-reply-button",
-              onClick: () => {
-                setSelectedThread(thread.id);
+              onSubmit: (inputComment) => {
+                if ("approved" === thread.status) {
+                  onEditComment({
+                    id: thread.id,
+                    status: "hold",
+                    content: inputComment
+                  });
+                } else {
+                  onAddReply({
+                    content: inputComment,
+                    parent: thread.id
+                  });
+                }
+              },
+              onCancel: (event) => {
+                event.stopPropagation();
+                unselectThread();
                 focusCommentThread(
                   thread.id,
                   commentSidebarRef.current
                 );
               },
-              children: sprintf(
-                // translators: %s: number of replies.
-                _n(
-                  "%s more reply",
-                  "%s more replies",
-                  restReplies.length
-                ),
-                restReplies.length
-              )
-            }
-          ) }),
-          !isSelected && lastReply && /* @__PURE__ */ jsx(
-            CommentBoard,
-            {
-              thread: lastReply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
+              submitButtonText: "approved" === thread.status ? __("Reopen & Reply") : __("Reply"),
+              rows: "approved" === thread.status ? 2 : 4,
+              labelText: sprintf(
+                // translators: %1$s: note identifier, %2$s: author name
+                __("Reply to note %1$s by %2$s"),
+                thread.id,
+                thread.author_name
+              ),
               reflowComments
             }
-          ),
-          isSelected && /* @__PURE__ */ jsxs(VStack, { spacing: "2", children: [
-            /* @__PURE__ */ jsx(HStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ jsx(CommentAuthorInfo, {}) }),
-            /* @__PURE__ */ jsx(VStack, { spacing: "2", children: /* @__PURE__ */ jsx(
-              CommentForm,
-              {
-                onSubmit: (inputComment) => {
-                  if ("approved" === thread.status) {
-                    onEditComment({
-                      id: thread.id,
-                      status: "hold",
-                      content: inputComment
-                    });
-                  } else {
-                    onAddReply({
-                      content: inputComment,
-                      parent: thread.id
-                    });
-                  }
-                },
-                onCancel: (event) => {
-                  event.stopPropagation();
-                  unselectThread();
-                  focusCommentThread(
-                    thread.id,
-                    commentSidebarRef.current
-                  );
-                },
-                submitButtonText: "approved" === thread.status ? __("Reopen & Reply") : __("Reply"),
-                rows: "approved" === thread.status ? 2 : 4,
-                labelText: sprintf(
-                  // translators: %1$s: note identifier, %2$s: author name
-                  __("Reply to note %1$s by %2$s"),
-                  thread.id,
-                  thread.author_name
-                ),
-                reflowComments
-              }
-            ) })
-          ] }),
-          !!thread.blockClientId && /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-block",
-              variant: "secondary",
-              size: "compact",
-              onClick: (event) => {
-                event.stopPropagation();
-                relatedBlockElement?.focus();
-              },
-              children: __("Back to block")
-            }
-          )
-        ]
-      }
-    )
+          ) })
+        ] }),
+        !!thread.blockClientId && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-block",
+            variant: "secondary",
+            size: "compact",
+            onClick: (event) => {
+              event.stopPropagation();
+              relatedBlockElement?.focus();
+            },
+            children: __("Back to block")
+          }
+        )
+      ]
+    }
   );
 }
-const CommentBoard = ({
+var CommentBoard = ({
   thread,
   parent,
   isExpanded,
@@ -516,6 +566,7 @@ const CommentBoard = ({
 }) => {
   const [actionState, setActionState] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const actionButtonRef = useRef(null);
   const handleConfirmDelete = () => {
     onDelete(thread);
     setActionState(false);
@@ -524,6 +575,7 @@ const CommentBoard = ({
   const handleCancel = () => {
     setActionState(false);
     setShowConfirmDialog(false);
+    actionButtonRef.current?.focus();
   };
   const isResolutionComment = thread.type === "note" && thread.meta && (thread.meta._wp_note_status === "resolved" || thread.meta._wp_note_status === "reopen");
   const actions = [
@@ -555,131 +607,140 @@ const CommentBoard = ({
   ];
   const canResolve = thread.parent === 0;
   const moreActions = parent?.status !== "approved" ? actions.filter((item) => item.isEligible(thread)) : [];
-  return /* @__PURE__ */ jsxs(VStack, { spacing: "2", 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,
-          userId: thread?.author
-        }
-      ),
-      isExpanded && /* @__PURE__ */ jsx(
-        FlexItem,
-        {
-          className: "editor-collab-sidebar-panel__comment-status",
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          children: /* @__PURE__ */ jsxs(HStack, { spacing: "0", children: [
-            canResolve && /* @__PURE__ */ jsx(
-              Button,
-              {
-                label: _x(
-                  "Resolve",
-                  "Mark note as resolved"
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      spacing: "2",
+      role: thread.parent !== 0 ? "treeitem" : void 0,
+      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,
+              userId: thread?.author
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsx(
+            FlexItem,
+            {
+              className: "editor-collab-sidebar-panel__comment-status",
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: /* @__PURE__ */ jsxs(HStack, { spacing: "0", children: [
+                canResolve && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    label: _x(
+                      "Resolve",
+                      "Mark note as resolved"
+                    ),
+                    size: "small",
+                    icon: published,
+                    disabled: thread.status === "approved",
+                    accessibleWhenDisabled: thread.status === "approved",
+                    onClick: () => {
+                      onEdit({
+                        id: thread.id,
+                        status: "approved"
+                      });
+                    }
+                  }
                 ),
-                size: "small",
-                icon: published,
-                disabled: thread.status === "approved",
-                accessibleWhenDisabled: thread.status === "approved",
-                onClick: () => {
-                  onEdit({
-                    id: thread.id,
-                    status: "approved"
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxs(Menu, { placement: "bottom-end", children: [
-              /* @__PURE__ */ jsx(
-                Menu.TriggerButton,
-                {
-                  render: /* @__PURE__ */ jsx(
-                    Button,
+                /* @__PURE__ */ jsxs(Menu, { placement: "bottom-end", children: [
+                  /* @__PURE__ */ jsx(
+                    Menu.TriggerButton,
                     {
-                      size: "small",
-                      icon: moreVertical,
-                      label: __("Actions"),
-                      disabled: !moreActions.length,
-                      accessibleWhenDisabled: true
+                      render: /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ref: actionButtonRef,
+                          size: "small",
+                          icon: moreVertical,
+                          label: __("Actions"),
+                          disabled: !moreActions.length,
+                          accessibleWhenDisabled: true
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ jsx(
-                Menu.Item,
-                {
-                  onClick: () => action.onClick(),
-                  children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: action.title })
-                },
-                action.id
-              )) })
-            ] })
-          ] })
-        }
-      )
-    ] }),
-    "edit" === actionState ? /* @__PURE__ */ jsx(
-      CommentForm,
-      {
-        onSubmit: (value) => {
-          onEdit({
-            id: thread.id,
-            content: value
-          });
-          setActionState(false);
-        },
-        onCancel: () => handleCancel(),
-        thread,
-        submitButtonText: _x("Update", "verb"),
-        labelText: sprintf(
-          // translators: %1$s: note identifier, %2$s: author name.
-          __("Edit note %1$s by %2$s"),
-          thread.id,
-          thread.author_name
-        ),
-        reflowComments
-      }
-    ) : /* @__PURE__ */ jsx(
-      RawHTML,
-      {
-        className: clsx(
-          "editor-collab-sidebar-panel__user-comment",
+                  ),
+                  /* @__PURE__ */ jsx(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ jsx(
+                    Menu.Item,
+                    {
+                      onClick: () => action.onClick(),
+                      children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: action.title })
+                    },
+                    action.id
+                  )) })
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        "edit" === actionState ? /* @__PURE__ */ jsx(
+          CommentForm,
+          {
+            onSubmit: (value) => {
+              onEdit({
+                id: thread.id,
+                content: value
+              });
+              setActionState(false);
+              actionButtonRef.current?.focus();
+            },
+            onCancel: () => handleCancel(),
+            thread,
+            submitButtonText: _x("Update", "verb"),
+            labelText: sprintf(
+              // translators: %1$s: note identifier, %2$s: author name.
+              __("Edit note %1$s by %2$s"),
+              thread.id,
+              thread.author_name
+            ),
+            reflowComments
+          }
+        ) : /* @__PURE__ */ jsx(
+          RawHTML,
           {
-            "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+            className: clsx(
+              "editor-collab-sidebar-panel__user-comment",
+              {
+                "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+              }
+            ),
+            children: isResolutionComment ? (() => {
+              const actionText = thread.meta._wp_note_status === "resolved" ? __("Marked as resolved") : __("Reopened");
+              const content = thread?.content?.raw;
+              if (content && typeof content === "string" && content.trim() !== "") {
+                return sprintf(
+                  // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+                  __("%1$s: %2$s"),
+                  actionText,
+                  content
+                );
+              }
+              return actionText;
+            })() : thread?.content?.rendered
           }
         ),
-        children: isResolutionComment ? (() => {
-          const actionText = thread.meta._wp_note_status === "resolved" ? __("Marked as resolved") : __("Reopened");
-          const content = thread?.content?.raw;
-          if (content && typeof content === "string" && content.trim() !== "") {
-            return sprintf(
-              // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
-              __("%1$s: %2$s"),
-              actionText,
-              content
-            );
+        "delete" === actionState && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            isOpen: showConfirmDialog,
+            onConfirm: handleConfirmDelete,
+            onCancel: handleCancel,
+            confirmButtonText: __("Delete"),
+            children: __(
+              "Are you sure you want to delete this note? This will also delete all of this note's replies."
+            )
           }
-          return actionText;
-        })() : thread?.content?.rendered
-      }
-    ),
-    "delete" === actionState && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        isOpen: showConfirmDialog,
-        onConfirm: handleConfirmDelete,
-        onCancel: handleCancel,
-        confirmButtonText: __("Delete"),
-        children: __(
-          "Are you sure you want to delete this note? This will also delete all of this note's replies."
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 var comments_default = Comments;
 export {