@wordpress/editor 14.33.4 → 14.33.6

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

@@ -56,8 +56,8 @@ function Comments({
   onEditComment,
   onAddReply,
   onCommentDelete,
-  showCommentBoard,
-  setShowCommentBoard,
+  newNoteFormState,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating = false,
@@ -69,19 +69,23 @@ function Comments({
   const [blockRefs, setBlockRefs] = (0, import_element.useState)({});
   const { setCanvasMinHeight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
   const { blockCommentId, selectedBlockClientId, orderedBlockIds } = (0, import_data.useSelect)((select) => {
-    const { getBlockAttributes, getSelectedBlockClientId } = select(import_block_editor.store);
+    const {
+      getBlockAttributes,
+      getSelectedBlockClientId,
+      getClientIdsWithDescendants
+    } = select(import_block_editor.store);
     const clientId = getSelectedBlockClientId();
     return {
       blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
       selectedBlockClientId: clientId,
-      orderedBlockIds: select(import_block_editor.store).getBlockOrder()
+      orderedBlockIds: getClientIdsWithDescendants()
     };
   }, []);
   const relatedBlockElement = useBlockElement(selectedBlockClientId);
   const threads = (0, import_element.useMemo)(() => {
     const t = [...noteThreads];
     const orderedThreads = [];
-    if (isFloating && showCommentBoard && void 0 === blockCommentId) {
+    if (isFloating && newNoteFormState === "open") {
       const newNoteThread = {
         id: "new-note-thread",
         blockClientId: selectedBlockClientId,
@@ -105,8 +109,7 @@ function Comments({
   }, [
     noteThreads,
     isFloating,
-    showCommentBoard,
-    blockCommentId,
+    newNoteFormState,
     selectedBlockClientId,
     orderedBlockIds
   ]);
@@ -128,14 +131,15 @@ function Comments({
       (0, import_utils.focusCommentThread)(prevThread.id, commentSidebarRef.current);
     } else {
       setSelectedThread(null);
-      setShowCommentBoard(false);
+      setNewNoteFormState("closed");
       relatedBlockElement?.focus();
     }
   };
   (0, import_element.useEffect)(() => {
-    const fallback = showCommentBoard ? "new-note-thread" : null;
-    setSelectedThread(blockCommentId ?? fallback);
-  }, [blockCommentId, showCommentBoard]);
+    setSelectedThread(
+      newNoteFormState === "open" ? "new-note-thread" : blockCommentId
+    );
+  }, [blockCommentId, newNoteFormState]);
   const setBlockRef = (0, import_element.useCallback)((id, blockRef) => {
     setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
@@ -231,27 +235,15 @@ function Comments({
   ]);
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads && !isFloating) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_add_comment.AddComment,
-        {
-          onSubmit: onAddReply,
-          showCommentBoard,
-          setShowCommentBoard,
-          commentSidebarRef
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", children: (0, import_i18n.__)("No notes available.") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", variant: "muted", children: (0, import_i18n.__)("Only logged in users can see Notes.") })
-    ] });
+    return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    !isFloating && showCommentBoard && void 0 === blockCommentId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !isFloating && newNoteFormState === "open" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_add_comment.AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef
       }
     ),
@@ -264,7 +256,7 @@ function Comments({
         onEditComment,
         isSelected: selectedThread === thread.id,
         setSelectedThread,
-        setShowCommentBoard,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -273,7 +265,7 @@ function Comments({
         setBlockRef,
         selectedThread,
         commentLastUpdated,
-        showCommentBoard
+        newNoteFormState
       },
       thread.id
     ))
@@ -285,7 +277,7 @@ function Thread({
   onAddReply,
   onCommentDelete,
   isSelected,
-  setShowCommentBoard,
+  setNewNoteFormState,
   commentSidebarRef,
   reflowComments,
   isFloating,
@@ -295,7 +287,7 @@ function Thread({
   setSelectedThread,
   selectedThread,
   commentLastUpdated,
-  showCommentBoard
+  newNoteFormState
 }) {
   const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
     (0, import_data.useDispatch)(import_block_editor.store)
@@ -320,7 +312,7 @@ function Thread({
     debouncedToggleBlockHighlight(thread.blockClientId, false);
   };
   const handleCommentSelect = () => {
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     setSelectedThread(thread.id);
     if (!!thread.blockClientId) {
       selectBlock(thread.blockClientId, null);
@@ -329,7 +321,7 @@ function Thread({
   };
   const unselectThread = () => {
     setSelectedThread(null);
-    setShowCommentBoard(false);
+    setNewNoteFormState("closed");
     toggleBlockSpotlight(thread.blockClientId, false);
   };
   const allReplies = thread?.reply || [];
@@ -348,13 +340,13 @@ function Thread({
     (0, import_i18n.__)("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__ */ (0, import_jsx_runtime.jsx)(
       import_add_comment.AddComment,
       {
         onSubmit: onAddReply,
-        showCommentBoard,
-        setShowCommentBoard,
+        newNoteFormState,
+        setNewNoteFormState,
         commentSidebarRef,
         reflowComments,
         isFloating,
@@ -363,185 +355,184 @@ function Thread({
       }
     );
   }
-  return (
-    // Disable reason: role="listitem" does in fact support aria-expanded.
-    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.__experimentalVStack,
-      {
-        className: (0, import_clsx.default)("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") {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      className: (0, import_clsx.default)("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();
-            (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
+          } else {
+            handleCommentSelect();
           }
-        },
-        tabIndex: 0,
-        role: "listitem",
-        "aria-label": ariaLabel,
-        "aria-expanded": isSelected,
-        ref: isFloating ? refs.setFloating : void 0,
-        style: isFloating ? { top: y } : void 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-comment",
-              variant: "secondary",
-              size: "compact",
-              onClick: () => {
-                (0, import_utils.focusCommentThread)(
-                  thread.id,
-                  commentSidebarRef.current,
-                  "textarea"
-                );
-              },
-              children: (0, import_i18n.__)("Add new note")
-            }
-          ),
-          !thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", weight: 500, variant: "muted", children: (0, import_i18n.__)("Original block deleted.") }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread,
-              isExpanded: isSelected,
-              onEdit: (params = {}) => {
-                const { status } = params;
-                onEditComment(params);
-                if (status === "approved") {
-                  unselectThread();
+        }
+        if (event.key === "Escape") {
+          unselectThread();
+          (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
+        }
+      },
+      tabIndex: 0,
+      role: "treeitem",
+      "aria-label": ariaLabel,
+      "aria-expanded": isSelected,
+      ref: isFloating ? refs.setFloating : void 0,
+      style: isFloating ? { top: y } : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-comment",
+            variant: "secondary",
+            size: "compact",
+            onClick: () => {
+              (0, import_utils.focusCommentThread)(
+                thread.id,
+                commentSidebarRef.current,
+                "textarea"
+              );
+            },
+            children: (0, import_i18n.__)("Add new note")
+          }
+        ),
+        !thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", weight: 500, variant: "muted", children: (0, import_i18n.__)("Original block deleted.") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread,
+            isExpanded: isSelected,
+            onEdit: (params = {}) => {
+              onEditComment(params);
+              if (params.status === "approved") {
+                unselectThread();
+                if (isFloating) {
+                  relatedBlockElement?.focus();
+                } else {
                   (0, import_utils.focusCommentThread)(
                     thread.id,
                     commentSidebarRef.current
                   );
                 }
-              },
-              onDelete: onCommentDelete,
-              reflowComments
-            }
-          ),
-          isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread: reply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
-              reflowComments
+              }
+            },
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread: reply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          },
+          reply.id
+        )),
+        !isSelected && restReplies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            size: "compact",
+            variant: "tertiary",
+            className: "editor-collab-sidebar-panel__more-reply-button",
+            onClick: () => {
+              setSelectedThread(thread.id);
+              (0, import_utils.focusCommentThread)(
+                thread.id,
+                commentSidebarRef.current
+              );
             },
-            reply.id
-          )),
-          !isSelected && restReplies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { className: "editor-collab-sidebar-panel__more-reply-separator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
+            children: (0, import_i18n.sprintf)(
+              // translators: %s: number of replies.
+              (0, import_i18n._n)(
+                "%s more reply",
+                "%s more replies",
+                restReplies.length
+              ),
+              restReplies.length
+            )
+          }
+        ) }),
+        !isSelected && lastReply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CommentBoard,
+          {
+            thread: lastReply,
+            parent: thread,
+            isExpanded: isSelected,
+            onEdit: onEditComment,
+            onDelete: onCommentDelete,
+            reflowComments
+          }
+        ),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", role: "treeitem", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_comment_form.default,
             {
-              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();
                 (0, import_utils.focusCommentThread)(
                   thread.id,
                   commentSidebarRef.current
                 );
               },
-              children: (0, import_i18n.sprintf)(
-                // translators: %s: number of replies.
-                (0, import_i18n._n)(
-                  "%s more reply",
-                  "%s more replies",
-                  restReplies.length
-                ),
-                restReplies.length
-              )
-            }
-          ) }),
-          !isSelected && lastReply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            CommentBoard,
-            {
-              thread: lastReply,
-              parent: thread,
-              isExpanded: isSelected,
-              onEdit: onEditComment,
-              onDelete: onCommentDelete,
+              submitButtonText: "approved" === thread.status ? (0, import_i18n.__)("Reopen & Reply") : (0, import_i18n.__)("Reply"),
+              rows: "approved" === thread.status ? 2 : 4,
+              labelText: (0, import_i18n.sprintf)(
+                // translators: %1$s: note identifier, %2$s: author name
+                (0, import_i18n.__)("Reply to note %1$s by %2$s"),
+                thread.id,
+                thread.author_name
+              ),
               reflowComments
             }
-          ),
-          isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_comment_form.default,
-              {
-                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();
-                  (0, import_utils.focusCommentThread)(
-                    thread.id,
-                    commentSidebarRef.current
-                  );
-                },
-                submitButtonText: "approved" === thread.status ? (0, import_i18n.__)("Reopen & Reply") : (0, import_i18n.__)("Reply"),
-                rows: "approved" === thread.status ? 2 : 4,
-                labelText: (0, import_i18n.sprintf)(
-                  // translators: %1$s: note identifier, %2$s: author name
-                  (0, import_i18n.__)("Reply to note %1$s by %2$s"),
-                  thread.id,
-                  thread.author_name
-                ),
-                reflowComments
-              }
-            ) })
-          ] }),
-          !!thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-block",
-              variant: "secondary",
-              size: "compact",
-              onClick: (event) => {
-                event.stopPropagation();
-                relatedBlockElement?.focus();
-              },
-              children: (0, import_i18n.__)("Back to block")
-            }
-          )
-        ]
-      }
-    )
+          ) })
+        ] }),
+        !!thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Button,
+          {
+            className: "editor-collab-sidebar-panel__skip-to-block",
+            variant: "secondary",
+            size: "compact",
+            onClick: (event) => {
+              event.stopPropagation();
+              relatedBlockElement?.focus();
+            },
+            children: (0, import_i18n.__)("Back to block")
+          }
+        )
+      ]
+    }
   );
 }
 const CommentBoard = ({
@@ -595,133 +586,140 @@ const CommentBoard = ({
   ];
   const canResolve = thread.parent === 0;
   const moreActions = parent?.status !== "approved" ? actions.filter((item) => item.isEligible(thread)) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_comment_author_info.default,
-        {
-          avatar: thread?.author_avatar_urls?.[48],
-          name: thread?.author_name,
-          date: thread?.date,
-          userId: thread?.author
-        }
-      ),
-      isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.FlexItem,
-        {
-          className: "editor-collab-sidebar-panel__comment-status",
-          onClick: (event) => {
-            event.stopPropagation();
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "0", children: [
-            canResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                label: (0, import_i18n._x)(
-                  "Resolve",
-                  "Mark note as resolved"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      spacing: "2",
+      role: thread.parent !== 0 ? "treeitem" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_comment_author_info.default,
+            {
+              avatar: thread?.author_avatar_urls?.[48],
+              name: thread?.author_name,
+              date: thread?.date,
+              userId: thread?.author
+            }
+          ),
+          isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.FlexItem,
+            {
+              className: "editor-collab-sidebar-panel__comment-status",
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "0", children: [
+                canResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.Button,
+                  {
+                    label: (0, import_i18n._x)(
+                      "Resolve",
+                      "Mark note as resolved"
+                    ),
+                    size: "small",
+                    icon: import_icons.published,
+                    disabled: thread.status === "approved",
+                    accessibleWhenDisabled: thread.status === "approved",
+                    onClick: () => {
+                      onEdit({
+                        id: thread.id,
+                        status: "approved"
+                      });
+                    }
+                  }
                 ),
-                size: "small",
-                icon: import_icons.published,
-                disabled: thread.status === "approved",
-                accessibleWhenDisabled: thread.status === "approved",
-                onClick: () => {
-                  onEdit({
-                    id: thread.id,
-                    status: "approved"
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { placement: "bottom-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Menu.TriggerButton,
-                {
-                  render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_components.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Menu, { placement: "bottom-end", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Menu.TriggerButton,
                     {
-                      ref: actionButtonRef,
-                      size: "small",
-                      icon: import_icons.moreVertical,
-                      label: (0, import_i18n.__)("Actions"),
-                      disabled: !moreActions.length,
-                      accessibleWhenDisabled: true
+                      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.Button,
+                        {
+                          ref: actionButtonRef,
+                          size: "small",
+                          icon: import_icons.moreVertical,
+                          label: (0, import_i18n.__)("Actions"),
+                          disabled: !moreActions.length,
+                          accessibleWhenDisabled: true
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                Menu.Item,
-                {
-                  onClick: () => action.onClick(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: action.title })
-                },
-                action.id
-              )) })
-            ] })
-          ] })
-        }
-      )
-    ] }),
-    "edit" === actionState ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_comment_form.default,
-      {
-        onSubmit: (value) => {
-          onEdit({
-            id: thread.id,
-            content: value
-          });
-          setActionState(false);
-          actionButtonRef.current?.focus();
-        },
-        onCancel: () => handleCancel(),
-        thread,
-        submitButtonText: (0, import_i18n._x)("Update", "verb"),
-        labelText: (0, import_i18n.sprintf)(
-          // translators: %1$s: note identifier, %2$s: author name.
-          (0, import_i18n.__)("Edit note %1$s by %2$s"),
-          thread.id,
-          thread.author_name
-        ),
-        reflowComments
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_element.RawHTML,
-      {
-        className: (0, import_clsx.default)(
-          "editor-collab-sidebar-panel__user-comment",
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Popover, { children: moreActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Menu.Item,
+                    {
+                      onClick: () => action.onClick(),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: action.title })
+                    },
+                    action.id
+                  )) })
+                ] })
+              ] })
+            }
+          )
+        ] }),
+        "edit" === actionState ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_comment_form.default,
           {
-            "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+            onSubmit: (value) => {
+              onEdit({
+                id: thread.id,
+                content: value
+              });
+              setActionState(false);
+              actionButtonRef.current?.focus();
+            },
+            onCancel: () => handleCancel(),
+            thread,
+            submitButtonText: (0, import_i18n._x)("Update", "verb"),
+            labelText: (0, import_i18n.sprintf)(
+              // translators: %1$s: note identifier, %2$s: author name.
+              (0, import_i18n.__)("Edit note %1$s by %2$s"),
+              thread.id,
+              thread.author_name
+            ),
+            reflowComments
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_element.RawHTML,
+          {
+            className: (0, import_clsx.default)(
+              "editor-collab-sidebar-panel__user-comment",
+              {
+                "editor-collab-sidebar-panel__resolution-text": isResolutionComment
+              }
+            ),
+            children: isResolutionComment ? (() => {
+              const actionText = thread.meta._wp_note_status === "resolved" ? (0, import_i18n.__)("Marked as resolved") : (0, import_i18n.__)("Reopened");
+              const content = thread?.content?.raw;
+              if (content && typeof content === "string" && content.trim() !== "") {
+                return (0, import_i18n.sprintf)(
+                  // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+                  (0, import_i18n.__)("%1$s: %2$s"),
+                  actionText,
+                  content
+                );
+              }
+              return actionText;
+            })() : thread?.content?.rendered
           }
         ),
-        children: isResolutionComment ? (() => {
-          const actionText = thread.meta._wp_note_status === "resolved" ? (0, import_i18n.__)("Marked as resolved") : (0, import_i18n.__)("Reopened");
-          const content = thread?.content?.raw;
-          if (content && typeof content === "string" && content.trim() !== "") {
-            return (0, import_i18n.sprintf)(
-              // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
-              (0, import_i18n.__)("%1$s: %2$s"),
-              actionText,
-              content
-            );
+        "delete" === actionState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalConfirmDialog,
+          {
+            isOpen: showConfirmDialog,
+            onConfirm: handleConfirmDelete,
+            onCancel: handleCancel,
+            confirmButtonText: (0, import_i18n.__)("Delete"),
+            children: (0, import_i18n.__)(
+              "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__ */ (0, import_jsx_runtime.jsx)(
-      import_components.__experimentalConfirmDialog,
-      {
-        isOpen: showConfirmDialog,
-        onConfirm: handleConfirmDelete,
-        onCancel: handleCancel,
-        confirmButtonText: (0, import_i18n.__)("Delete"),
-        children: (0, import_i18n.__)(
-          "Are you sure you want to delete this note? This will also delete all of this note's replies."
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 var comments_default = Comments;
 // Annotate the CommonJS export names for ESM import in node: