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

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

@@ -1,91 +1,184 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comments_exports = {};
+__export(comments_exports, {
+  Comments: () => Comments,
+  default: () => comments_default
 });
-exports.Comments = Comments;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
-var _data = require("@wordpress/data");
-var _dom = require("@wordpress/dom");
-var _blockEditor = require("@wordpress/block-editor");
-var _lockUnlock = require("../../lock-unlock");
-var _commentAuthorInfo = _interopRequireDefault(require("./comment-author-info"));
-var _commentForm = _interopRequireDefault(require("./comment-form"));
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  useBlockElement
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const {
-  Menu
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-
-/**
- * Renders the Comments component.
- *
- * @param {Object}   props                     - The component props.
- * @param {Array}    props.threads             - The array of comment threads.
- * @param {Function} props.onEditComment       - The function to handle comment editing.
- * @param {Function} props.onAddReply          - The function to add a reply to a comment.
- * @param {Function} props.onCommentDelete     - The function to delete a comment.
- * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
- * @return {React.ReactNode} The rendered Comments component.
- */
+module.exports = __toCommonJS(comments_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_icons = require("@wordpress/icons");
+var import_i18n = require("@wordpress/i18n");
+var import_data = require("@wordpress/data");
+var import_dom = require("@wordpress/dom");
+var import_block_editor = require("@wordpress/block-editor");
+var import_lock_unlock = require("../../lock-unlock");
+var import_comment_author_info = __toESM(require("./comment-author-info"));
+var import_comment_form = __toESM(require("./comment-form"));
+var import_utils = require("./utils");
+var import_hooks = require("./hooks");
+const { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 function Comments({
   threads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  setShowCommentBoard
+  setShowCommentBoard,
+  commentSidebarRef,
+  reflowComments,
+  isFloating = false,
+  commentLastUpdated
 }) {
-  const blockCommentId = (0, _data.useSelect)(select => {
-    const {
-      getBlockAttributes,
-      getSelectedBlockClientId
-    } = select(_blockEditor.store);
-    const clientId = getSelectedBlockClientId();
-    return clientId ? getBlockAttributes(clientId)?.metadata?.commentId : null;
+  const [heights, setHeights] = (0, import_element.useState)({});
+  const [selectedThread, setSelectedThread] = (0, import_element.useState)(null);
+  const [boardOffsets, setBoardOffsets] = (0, import_element.useState)({});
+  const [blockRefs, setBlockRefs] = (0, import_element.useState)({});
+  const { blockCommentId, selectedBlockClientId, blockIds } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getBlockAttributes,
+        getSelectedBlockClientId,
+        getBlockOrder
+      } = select(import_block_editor.store);
+      const clientId = getSelectedBlockClientId();
+      return {
+        blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.commentId : null,
+        selectedBlockClientId: clientId,
+        blockIds: getBlockOrder()
+      };
+    },
+    []
+  );
+  const relatedBlockElement = useBlockElement(selectedBlockClientId);
+  const handleDelete = async (comment) => {
+    const currentIndex = threads.findIndex((t) => t.id === comment.id);
+    const nextThread = threads[currentIndex + 1];
+    const prevThread = threads[currentIndex - 1];
+    await onCommentDelete(comment);
+    if (comment.parent !== 0) {
+      setSelectedThread(comment.parent);
+      (0, import_utils.focusCommentThread)(comment.parent, commentSidebarRef.current);
+      return;
+    }
+    if (nextThread) {
+      setSelectedThread(nextThread.id);
+      (0, import_utils.focusCommentThread)(nextThread.id, commentSidebarRef.current);
+    } else if (prevThread) {
+      setSelectedThread(prevThread.id);
+      (0, import_utils.focusCommentThread)(prevThread.id, commentSidebarRef.current);
+    } else {
+      setSelectedThread(null);
+      setShowCommentBoard(false);
+      relatedBlockElement?.focus();
+    }
+  };
+  (0, import_element.useEffect)(() => {
+    setSelectedThread(blockCommentId ?? void 0);
+  }, [blockCommentId]);
+  const setBlockRef = (0, import_element.useCallback)((id, blockRef) => {
+    setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
-  const [selectedThread = blockCommentId, setSelectedThread] = (0, _element.useState)();
+  (0, import_element.useEffect)(() => {
+    const calculateAllOffsets = () => {
+      const offsets = {};
+      let previousThreadData = null;
+      if (!isFloating) {
+        return;
+      }
+      threads.forEach((thread) => {
+        if (!blockRefs[thread.id]) {
+          return;
+        }
+        const blockElement = blockRefs[thread.id];
+        const blockRect = blockElement?.getBoundingClientRect();
+        const threadTop = blockRect?.top || 0;
+        const threadHeight = heights[thread.id] || 0;
+        let additionalOffset = -16;
+        if (previousThreadData) {
+          const previousBottom = previousThreadData.threadTop + previousThreadData.threadHeight;
+          if (threadTop < previousBottom) {
+            additionalOffset = previousBottom - threadTop + 20;
+          }
+        }
+        previousThreadData = {
+          threadTop: threadTop + additionalOffset,
+          threadHeight
+        };
+        offsets[thread.id] = additionalOffset;
+      });
+      return offsets;
+    };
+    const newOffsets = calculateAllOffsets();
+    setBoardOffsets(newOffsets);
+  }, [heights, blockIds, blockRefs, isFloating, threads]);
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-      alignment: "left",
-      className: "editor-collab-sidebar-panel__thread",
-      justify: "flex-start",
-      spacing: "2",
-      children:
-      // translators: message displayed when there are no comments available
-      (0, _i18n.__)('No comments available')
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalVStack,
+      {
+        alignment: "left",
+        className: "editor-collab-sidebar-panel__thread",
+        justify: "flex-start",
+        spacing: "3",
+        children: (0, import_i18n.__)("No notes available.")
+      }
+    );
   }
-  return threads.map(thread => /*#__PURE__*/(0, _jsxRuntime.jsx)(Thread, {
-    thread: thread,
-    onAddReply: onAddReply,
-    onCommentDelete: onCommentDelete,
-    onEditComment: onEditComment,
-    isSelected: selectedThread === thread.id,
-    setSelectedThread: setSelectedThread,
-    setShowCommentBoard: setShowCommentBoard
-  }, thread.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "3", children: [
+    !isFloating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", variant: "muted", children: (0, import_i18n.__)("Only logged in users can see Notes") }),
+    threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Thread,
+      {
+        thread,
+        onAddReply,
+        onCommentDelete: handleDelete,
+        onEditComment,
+        isSelected: selectedThread === thread.id,
+        setSelectedThread,
+        setShowCommentBoard,
+        commentSidebarRef,
+        reflowComments,
+        isFloating,
+        calculatedOffset: boardOffsets ? boardOffsets[thread.id] : 0,
+        setHeights,
+        setBlockRef,
+        selectedThread,
+        commentLastUpdated
+      },
+      thread.id
+    ))
+  ] });
 }
 function Thread({
   thread,
@@ -93,175 +186,254 @@ function Thread({
   onAddReply,
   onCommentDelete,
   isSelected,
+  setShowCommentBoard,
+  commentSidebarRef,
+  reflowComments,
+  isFloating,
+  calculatedOffset,
+  setHeights,
+  setBlockRef,
   setSelectedThread,
-  setShowCommentBoard
+  selectedThread,
+  commentLastUpdated
 }) {
-  const threadRef = (0, _element.useRef)(null);
-  const {
-    toggleBlockHighlight
-  } = (0, _data.useDispatch)(_blockEditor.store);
+  const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
+    (0, import_data.useDispatch)(import_block_editor.store)
+  );
   const relatedBlockElement = useBlockElement(thread.blockClientId);
-  const debouncedToggleBlockHighlight = (0, _compose.useDebounce)(toggleBlockHighlight, 50);
+  const debouncedToggleBlockHighlight = (0, import_compose.useDebounce)(
+    toggleBlockHighlight,
+    50
+  );
+  const { y, refs } = (0, import_hooks.useFloatingThread)({
+    thread,
+    calculatedOffset,
+    setHeights,
+    setBlockRef,
+    selectedThread,
+    commentLastUpdated
+  });
   const onMouseEnter = () => {
     debouncedToggleBlockHighlight(thread.blockClientId, true);
   };
   const onMouseLeave = () => {
     debouncedToggleBlockHighlight(thread.blockClientId, false);
   };
-  const handleCommentSelect = ({
-    id,
-    blockClientId
-  }) => {
+  const handleCommentSelect = () => {
     setShowCommentBoard(false);
-    setSelectedThread(id);
-    if (blockClientId && relatedBlockElement) {
-      relatedBlockElement.scrollIntoView({
-        behavior: 'instant',
-        block: 'center'
-      });
-    }
-  };
-  const focusThread = () => {
-    threadRef.current?.focus();
+    setSelectedThread(thread.id);
+    selectBlock(thread.blockClientId, null);
+    toggleBlockSpotlight(thread.blockClientId, true);
   };
   const unselectThread = () => {
     setSelectedThread(null);
     setShowCommentBoard(false);
+    toggleBlockSpotlight(thread.blockClientId, false);
   };
-  const replies = thread?.reply;
-  const lastReply = !!replies.length ? replies[replies.length - 1] : undefined;
-  const restReplies = !!replies.length ? replies.slice(0, -1) : [];
-  const commentExcerpt = (0, _utils.getCommentExcerpt)((0, _dom.__unstableStripHTML)(thread.content.rendered), 10);
-  const ariaLabel = relatedBlockElement ? (0, _i18n.sprintf)(
-  // translators: %s: comment excerpt
-  (0, _i18n.__)('Comment: %s'), commentExcerpt) : (0, _i18n.sprintf)(
-  // translators: %s: comment excerpt
-  (0, _i18n.__)('Original block deleted. Comment: %s'), commentExcerpt);
+  const allReplies = thread?.reply || [];
+  const lastReply = allReplies.length > 0 ? allReplies[allReplies.length - 1] : void 0;
+  const restReplies = allReplies.length > 0 ? allReplies.slice(0, -1) : [];
+  const commentExcerpt = (0, import_utils.getCommentExcerpt)(
+    (0, import_dom.__unstableStripHTML)(thread.content.rendered),
+    10
+  );
+  const ariaLabel = relatedBlockElement ? (0, import_i18n.sprintf)(
+    // translators: %s: note excerpt
+    (0, import_i18n.__)("Note: %s"),
+    commentExcerpt
+  ) : (0, import_i18n.sprintf)(
+    // translators: %s: note excerpt
+    (0, import_i18n.__)("Original block deleted. Note: %s"),
+    commentExcerpt
+  );
   return (
-    /*#__PURE__*/
     // Disable reason: role="listitem" does in fact support aria-expanded.
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
-    (0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-      className: (0, _clsx.default)('editor-collab-sidebar-panel__thread', {
-        'is-selected': isSelected
-      }),
-      id: `thread-${thread.id}`,
-      spacing: "2",
-      onClick: () => handleCommentSelect(thread),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onFocus: onMouseEnter,
-      onBlur: onMouseLeave,
-      onKeyDown: event => {
-        // Expand or Collapse thread.
-        if (event.key === 'Enter' && event.currentTarget === event.target) {
-          if (isSelected) {
-            unselectThread();
-          } else {
-            handleCommentSelect(thread);
+    /* @__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.key === "Enter" && event.currentTarget === event.target) {
+            if (isSelected) {
+              unselectThread();
+            } else {
+              handleCommentSelect();
+            }
           }
-        }
-        // Collapse thread and focus the thread.
-        if (event.key === 'Escape') {
-          unselectThread();
-          focusThread();
-        }
-      },
-      tabIndex: 0,
-      role: "listitem",
-      ref: threadRef,
-      "aria-label": ariaLabel,
-      "aria-expanded": isSelected,
-      children: [!relatedBlockElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
-        as: "p",
-        weight: 500,
-        variant: "muted",
-        children: (0, _i18n.__)('Original block deleted.')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
-        thread: thread,
-        onEdit: (params = {}) => {
-          const {
-            status
-          } = params;
-          onEditComment(params);
-          if (status === 'approved') {
+          if (event.key === "Escape") {
             unselectThread();
-            focusThread();
+            (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
           }
         },
-        onDelete: onCommentDelete,
-        status: thread.status
-      }), isSelected && replies.map(reply => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        id: reply.id,
-        spacing: "2",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
-          thread: reply,
-          onEdit: 'approved' !== thread.status ? onEditComment : undefined,
-          onDelete: 'approved' !== thread.status ? onCommentDelete : undefined
-        })
-      }, reply.id)), !isSelected && restReplies.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-        className: "editor-collab-sidebar-panel__more-reply-separator",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          size: "compact",
-          variant: "tertiary",
-          className: "editor-collab-sidebar-panel__more-reply-button",
-          onClick: () => setSelectedThread(thread.id),
-          children: (0, _i18n.sprintf)(
-          // translators: %s: number of replies.
-          (0, _i18n._n)('%s more reply', '%s more replies', restReplies.length), restReplies.length)
-        })
-      }), !isSelected && lastReply && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
-        thread: lastReply,
-        onEdit: 'approved' !== thread.status ? onEditComment : undefined,
-        onDelete: 'approved' !== thread.status ? onCommentDelete : undefined
-      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        spacing: "2",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
-          alignment: "left",
-          spacing: "3",
-          justify: "flex-start",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-          spacing: "2",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
-            onSubmit: inputComment => {
-              if ('approved' === thread.status) {
-                onEditComment({
-                  id: thread.id,
-                  status: 'hold'
-                });
-              }
-              onAddReply({
-                content: inputComment,
-                parent: thread.id
-              });
-            },
-            onCancel: event => {
-              threadRef.current?.focus();
-              event.stopPropagation(); // Prevent the parent onClick from being triggered
-              unselectThread();
+        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")
+            }
+          ),
+          !relatedBlockElement && /* @__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();
+                  (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
             },
-            submitButtonText: 'approved' === thread.status ? (0, _i18n.__)('Reopen & Reply') : (0, _i18n.__)('Reply'),
-            rows: 'approved' === thread.status ? 2 : 4,
-            labelText: (0, _i18n.sprintf)(
-            // translators: %1$s: comment identifier, %2$s: author name
-            (0, _i18n.__)('Reply to Comment %1$s by %2$s'), thread.id, thread?.author_name || 'Unknown')
-          })
-        })]
-      })]
-    })
+            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
+                );
+              },
+              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", 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 || "Unknown"
+                ),
+                reflowComments
+              }
+            ) })
+          ] }),
+          /* @__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 = ({
   thread,
+  parent,
+  isExpanded,
   onEdit,
   onDelete,
-  status
+  reflowComments
 }) => {
-  const [actionState, setActionState] = (0, _element.useState)(false);
-  const [showConfirmDialog, setShowConfirmDialog] = (0, _element.useState)(false);
+  const [actionState, setActionState] = (0, import_element.useState)(false);
+  const [showConfirmDialog, setShowConfirmDialog] = (0, import_element.useState)(false);
   const handleConfirmDelete = () => {
     onDelete(thread);
     setActionState(false);
@@ -271,108 +443,163 @@ const CommentBoard = ({
     setActionState(false);
     setShowConfirmDialog(false);
   };
-  const actions = [onEdit && status !== 'approved' && {
-    id: 'edit',
-    title: (0, _i18n._x)('Edit', 'Edit comment'),
-    onClick: () => {
-      setActionState('edit');
-    }
-  }, onDelete && {
-    id: 'delete',
-    title: (0, _i18n._x)('Delete', 'Delete comment'),
-    onClick: () => {
-      setActionState('delete');
-      setShowConfirmDialog(true);
-    }
-  }, onEdit && status === 'approved' && {
-    id: 'reopen',
-    title: (0, _i18n._x)('Reopen', 'Reopen comment'),
-    onClick: () => {
-      onEdit({
-        id: thread.id,
-        status: 'hold'
-      });
+  const isResolutionComment = thread.type === "note" && thread.meta && (thread.meta._wp_note_status === "resolved" || thread.meta._wp_note_status === "reopen");
+  const actions = [
+    {
+      id: "edit",
+      title: (0, import_i18n.__)("Edit"),
+      isEligible: ({ status }) => status !== "approved",
+      onClick: () => {
+        setActionState("edit");
+      }
+    },
+    {
+      id: "reopen",
+      title: (0, import_i18n._x)("Reopen", "Reopen note"),
+      isEligible: ({ status }) => status === "approved",
+      onClick: () => {
+        onEdit({ id: thread.id, status: "hold" });
+      }
+    },
+    {
+      id: "delete",
+      title: (0, import_i18n.__)("Delete"),
+      isEligible: () => true,
+      onClick: () => {
+        setActionState("delete");
+        setShowConfirmDialog(true);
+      }
     }
-  }];
-  const canResolve = thread?.parent === 0;
-  const moreActions = actions.filter(item => item?.onClick);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-      alignment: "left",
-      spacing: "3",
-      justify: "flex-start",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {
-        avatar: thread?.author_avatar_urls?.[48],
-        name: thread?.author_name,
-        date: thread?.date,
-        userId: thread?.author
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-        className: "editor-collab-sidebar-panel__comment-status",
-        onClick: event => {
-          // Prevent the thread from being selected.
-          event.stopPropagation();
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-          spacing: "0",
-          children: [canResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-            label: (0, _i18n._x)('Resolve', 'Mark comment as resolved'),
-            size: "small",
-            icon: _icons.published,
-            disabled: status === 'approved',
-            accessibleWhenDisabled: status === 'approved',
-            onClick: () => {
-              onEdit({
-                id: thread.id,
-                status: 'approved'
-              });
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
-            placement: "bottom-end",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
-              render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+  ];
+  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"
+                ),
                 size: "small",
-                icon: _icons.moreVertical,
-                label: (0, _i18n.__)('Actions'),
-                disabled: !moreActions.length,
-                accessibleWhenDisabled: true
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Popover, {
-              children: moreActions.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Item, {
-                onClick: () => action.onClick(),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
-                  children: action.title
-                })
-              }, action.id))
-            })]
-          })]
-        })
-      })]
-    }), 'edit' === actionState ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
-      onSubmit: value => {
-        onEdit({
-          id: thread.id,
-          content: value
-        });
-        setActionState(false);
-      },
-      onCancel: () => handleCancel(),
-      thread: thread,
-      submitButtonText: (0, _i18n._x)('Update', 'verb'),
-      labelText: (0, _i18n.sprintf)(
-      // translators: %1$s: comment identifier, %2$s: author name.
-      (0, _i18n.__)('Edit Comment %1$s by %2$s'), thread.id, thread?.author_name || 'Unknown')
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
-      className: "editor-collab-sidebar-panel__user-comment",
-      children: thread?.content?.rendered
-    }), 'delete' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
-      isOpen: showConfirmDialog,
-      onConfirm: handleConfirmDelete,
-      onCancel: handleCancel,
-      confirmButtonText: (0, _i18n.__)('Delete'),
-      children:
-      // translators: message displayed when confirming an action
-      (0, _i18n.__)('Are you sure you want to delete this comment?')
-    })]
-  });
+                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,
+                    {
+                      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);
+        },
+        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 || "Unknown"
+        ),
+        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
+      }
+    ),
+    "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?")
+      }
+    )
+  ] });
 };
-//# sourceMappingURL=comments.js.map
+var comments_default = Comments;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Comments
+});
+//# sourceMappingURL=comments.js.map