@wordpress/editor 14.33.3 → 14.33.5

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

@@ -5,7 +5,8 @@ import {
   RawHTML,
   useEffect,
   useCallback,
-  useMemo
+  useMemo,
+  useRef
 } from "@wordpress/element";
 import {
   __experimentalText as Text,
@@ -31,6 +32,7 @@ import CommentForm from "./comment-form";
 import { focusCommentThread, getCommentExcerpt } from "./utils";
 import { useFloatingThread } from "./hooks";
 import { AddComment } from "./add-comment";
+import { store as editorStore } from "../../store";
 const { useBlockElement } = unlock(blockEditorPrivateApis);
 const { Menu } = unlock(componentsPrivateApis);
 function Comments({
@@ -49,6 +51,7 @@ function Comments({
   const [selectedThread, setSelectedThread] = useState(null);
   const [boardOffsets, setBoardOffsets] = useState({});
   const [blockRefs, setBlockRefs] = useState({});
+  const { setCanvasMinHeight } = unlock(useDispatch(editorStore));
   const { blockCommentId, selectedBlockClientId, orderedBlockIds } = useSelect((select) => {
     const { getBlockAttributes, getSelectedBlockClientId } = select(blockEditorStore);
     const clientId = getSelectedBlockClientId();
@@ -114,8 +117,9 @@ function Comments({
     }
   };
   useEffect(() => {
-    setSelectedThread(blockCommentId ?? void 0);
-  }, [blockCommentId]);
+    const fallback = showCommentBoard ? "new-note-thread" : null;
+    setSelectedThread(blockCommentId ?? fallback);
+  }, [blockCommentId, showCommentBoard]);
   const setBlockRef = useCallback((id, blockRef) => {
     setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
@@ -123,7 +127,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 +135,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,28 +188,34 @@ 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 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 null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !isFloating && showCommentBoard && void 0 === blockCommentId && /* @__PURE__ */ jsx(
@@ -325,185 +335,181 @@ 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") {
+  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: (event) => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (event.key === "Enter" && event.currentTarget === event.target) {
+          if (isSelected) {
             unselectThread();
-            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__ */ jsx(
-            Button,
-            {
-              className: "editor-collab-sidebar-panel__skip-to-comment",
-              variant: "secondary",
-              size: "compact",
-              onClick: () => {
+        }
+        if (event.key === "Escape") {
+          unselectThread();
+          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__ */ 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();
                 focusCommentThread(
                   thread.id,
-                  commentSidebarRef.current,
-                  "textarea"
+                  commentSidebarRef.current
                 );
-              },
-              children: __("Add new note")
-            }
-          ),
-          !thread.blockClientId && /* @__PURE__ */ jsx(Text, { as: "p", weight: 500, variant: "muted", children: __("Original block deleted.") }),
-          /* @__PURE__ */ jsx(
-            CommentBoard,
+              }
+            },
+            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,
             {
-              thread,
-              isExpanded: isSelected,
-              onEdit: (params = {}) => {
-                const { status } = params;
-                onEditComment(params);
-                if (status === "approved") {
-                  unselectThread();
-                  focusCommentThread(
-                    thread.id,
-                    commentSidebarRef.current
-                  );
+              onSubmit: (inputComment) => {
+                if ("approved" === thread.status) {
+                  onEditComment({
+                    id: thread.id,
+                    status: "hold",
+                    content: inputComment
+                  });
+                } else {
+                  onAddReply({
+                    content: inputComment,
+                    parent: thread.id
+                  });
                 }
               },
-              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);
+              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 = ({
@@ -516,6 +522,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 +531,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 +563,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 {