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

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

@@ -1,83 +1,161 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useState, RawHTML, useRef } from '@wordpress/element';
-import { __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalConfirmDialog as ConfirmDialog, Button, FlexItem, privateApis as componentsPrivateApis } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
-import { published, moreVertical } from '@wordpress/icons';
-import { __, _x, sprintf, _n } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import CommentAuthorInfo from './comment-author-info';
-import CommentForm from './comment-form';
-import { getCommentExcerpt } from './utils';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  useBlockElement
-} = unlock(blockEditorPrivateApis);
-const {
-  Menu
-} = unlock(componentsPrivateApis);
-
-/**
- * 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.
- */
-export function Comments({
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState, RawHTML, useEffect, useCallback } from "@wordpress/element";
+import {
+  __experimentalText as Text,
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  __experimentalConfirmDialog as ConfirmDialog,
+  Button,
+  FlexItem,
+  privateApis as componentsPrivateApis
+} from "@wordpress/components";
+import { useDebounce } from "@wordpress/compose";
+import { published, moreVertical } from "@wordpress/icons";
+import { __, _x, sprintf, _n } from "@wordpress/i18n";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
+import {
+  store as blockEditorStore,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
+import { unlock } from "../../lock-unlock";
+import CommentAuthorInfo from "./comment-author-info";
+import CommentForm from "./comment-form";
+import { getCommentExcerpt, focusCommentThread } from "./utils";
+import { useFloatingThread } from "./hooks";
+const { useBlockElement } = unlock(blockEditorPrivateApis);
+const { Menu } = unlock(componentsPrivateApis);
+function Comments({
   threads,
   onEditComment,
   onAddReply,
   onCommentDelete,
-  setShowCommentBoard
+  setShowCommentBoard,
+  commentSidebarRef,
+  reflowComments,
+  isFloating = false,
+  commentLastUpdated
 }) {
-  const blockCommentId = useSelect(select => {
-    const {
-      getBlockAttributes,
-      getSelectedBlockClientId
-    } = select(blockEditorStore);
-    const clientId = getSelectedBlockClientId();
-    return clientId ? getBlockAttributes(clientId)?.metadata?.commentId : null;
+  const [heights, setHeights] = useState({});
+  const [selectedThread, setSelectedThread] = useState(null);
+  const [boardOffsets, setBoardOffsets] = useState({});
+  const [blockRefs, setBlockRefs] = useState({});
+  const { blockCommentId, selectedBlockClientId, blockIds } = useSelect(
+    (select) => {
+      const {
+        getBlockAttributes,
+        getSelectedBlockClientId,
+        getBlockOrder
+      } = select(blockEditorStore);
+      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);
+      focusCommentThread(comment.parent, commentSidebarRef.current);
+      return;
+    }
+    if (nextThread) {
+      setSelectedThread(nextThread.id);
+      focusCommentThread(nextThread.id, commentSidebarRef.current);
+    } else if (prevThread) {
+      setSelectedThread(prevThread.id);
+      focusCommentThread(prevThread.id, commentSidebarRef.current);
+    } else {
+      setSelectedThread(null);
+      setShowCommentBoard(false);
+      relatedBlockElement?.focus();
+    }
+  };
+  useEffect(() => {
+    setSelectedThread(blockCommentId ?? void 0);
+  }, [blockCommentId]);
+  const setBlockRef = useCallback((id, blockRef) => {
+    setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
   }, []);
-  const [selectedThread = blockCommentId, setSelectedThread] = useState();
+  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__*/_jsx(VStack, {
-      alignment: "left",
-      className: "editor-collab-sidebar-panel__thread",
-      justify: "flex-start",
-      spacing: "2",
-      children:
-      // translators: message displayed when there are no comments available
-      __('No comments available')
-    });
+    return /* @__PURE__ */ jsx(
+      VStack,
+      {
+        alignment: "left",
+        className: "editor-collab-sidebar-panel__thread",
+        justify: "flex-start",
+        spacing: "3",
+        children: __("No notes available.")
+      }
+    );
   }
-  return threads.map(thread => /*#__PURE__*/_jsx(Thread, {
-    thread: thread,
-    onAddReply: onAddReply,
-    onCommentDelete: onCommentDelete,
-    onEditComment: onEditComment,
-    isSelected: selectedThread === thread.id,
-    setSelectedThread: setSelectedThread,
-    setShowCommentBoard: setShowCommentBoard
-  }, thread.id));
+  return /* @__PURE__ */ jsxs(VStack, { spacing: "3", children: [
+    !isFloating && /* @__PURE__ */ jsx(Text, { as: "p", variant: "muted", children: __("Only logged in users can see Notes") }),
+    threads.map((thread) => /* @__PURE__ */ 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,
@@ -85,172 +163,251 @@ function Thread({
   onAddReply,
   onCommentDelete,
   isSelected,
+  setShowCommentBoard,
+  commentSidebarRef,
+  reflowComments,
+  isFloating,
+  calculatedOffset,
+  setHeights,
+  setBlockRef,
   setSelectedThread,
-  setShowCommentBoard
+  selectedThread,
+  commentLastUpdated
 }) {
-  const threadRef = useRef(null);
-  const {
-    toggleBlockHighlight
-  } = useDispatch(blockEditorStore);
+  const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
+    useDispatch(blockEditorStore)
+  );
   const relatedBlockElement = useBlockElement(thread.blockClientId);
-  const debouncedToggleBlockHighlight = useDebounce(toggleBlockHighlight, 50);
+  const debouncedToggleBlockHighlight = useDebounce(
+    toggleBlockHighlight,
+    50
+  );
+  const { y, refs } = 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 = getCommentExcerpt(stripHTML(thread.content.rendered), 10);
+  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 = getCommentExcerpt(
+    stripHTML(thread.content.rendered),
+    10
+  );
   const ariaLabel = relatedBlockElement ? sprintf(
-  // translators: %s: comment excerpt
-  __('Comment: %s'), commentExcerpt) : sprintf(
-  // translators: %s: comment excerpt
-  __('Original block deleted. Comment: %s'), commentExcerpt);
+    // translators: %s: note excerpt
+    __("Note: %s"),
+    commentExcerpt
+  ) : sprintf(
+    // translators: %s: note excerpt
+    __("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
-    _jsxs(VStack, {
-      className: clsx('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__ */ 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.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__*/_jsx(Text, {
-        as: "p",
-        weight: 500,
-        variant: "muted",
-        children: __('Original block deleted.')
-      }), /*#__PURE__*/_jsx(CommentBoard, {
-        thread: thread,
-        onEdit: (params = {}) => {
-          const {
-            status
-          } = params;
-          onEditComment(params);
-          if (status === 'approved') {
+          if (event.key === "Escape") {
             unselectThread();
-            focusThread();
+            focusCommentThread(thread.id, commentSidebarRef.current);
           }
         },
-        onDelete: onCommentDelete,
-        status: thread.status
-      }), isSelected && replies.map(reply => /*#__PURE__*/_jsx(VStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        id: reply.id,
-        spacing: "2",
-        children: /*#__PURE__*/_jsx(CommentBoard, {
-          thread: reply,
-          onEdit: 'approved' !== thread.status ? onEditComment : undefined,
-          onDelete: 'approved' !== thread.status ? onCommentDelete : undefined
-        })
-      }, 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),
-          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,
-        onEdit: 'approved' !== thread.status ? onEditComment : undefined,
-        onDelete: 'approved' !== thread.status ? onCommentDelete : undefined
-      }), isSelected && /*#__PURE__*/_jsxs(VStack, {
-        className: "editor-collab-sidebar-panel__child-thread",
-        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'
-                });
-              }
-              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__ */ 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")
+            }
+          ),
+          !relatedBlockElement && /* @__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
+                  );
+                }
+              },
+              onDelete: onCommentDelete,
+              reflowComments
+            }
+          ),
+          isSelected && allReplies.map((reply) => /* @__PURE__ */ jsx(
+            CommentBoard,
+            {
+              thread: reply,
+              parent: thread,
+              isExpanded: isSelected,
+              onEdit: onEditComment,
+              onDelete: onCommentDelete,
+              reflowComments
             },
-            submitButtonText: 'approved' === thread.status ? __('Reopen & Reply') : __('Reply'),
-            rows: 'approved' === thread.status ? 2 : 4,
-            labelText: sprintf(
-            // translators: %1$s: comment identifier, %2$s: author name
-            __('Reply to Comment %1$s by %2$s'), thread.id, thread?.author_name || 'Unknown')
-          })
-        })]
-      })]
-    })
+            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", 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 || "Unknown"
+                ),
+                reflowComments
+              }
+            ) })
+          ] }),
+          /* @__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 = ({
   thread,
+  parent,
+  isExpanded,
   onEdit,
   onDelete,
-  status
+  reflowComments
 }) => {
   const [actionState, setActionState] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
@@ -263,108 +420,163 @@ const CommentBoard = ({
     setActionState(false);
     setShowConfirmDialog(false);
   };
-  const actions = [onEdit && status !== 'approved' && {
-    id: 'edit',
-    title: _x('Edit', 'Edit comment'),
-    onClick: () => {
-      setActionState('edit');
-    }
-  }, onDelete && {
-    id: 'delete',
-    title: _x('Delete', 'Delete comment'),
-    onClick: () => {
-      setActionState('delete');
-      setShowConfirmDialog(true);
-    }
-  }, onEdit && status === 'approved' && {
-    id: 'reopen',
-    title: _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: __("Edit"),
+      isEligible: ({ status }) => status !== "approved",
+      onClick: () => {
+        setActionState("edit");
+      }
+    },
+    {
+      id: "reopen",
+      title: _x("Reopen", "Reopen note"),
+      isEligible: ({ status }) => status === "approved",
+      onClick: () => {
+        onEdit({ id: thread.id, status: "hold" });
+      }
+    },
+    {
+      id: "delete",
+      title: __("Delete"),
+      isEligible: () => true,
+      onClick: () => {
+        setActionState("delete");
+        setShowConfirmDialog(true);
+      }
     }
-  }];
-  const canResolve = thread?.parent === 0;
-  const moreActions = actions.filter(item => item?.onClick);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    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
-      }), /*#__PURE__*/_jsx(FlexItem, {
-        className: "editor-collab-sidebar-panel__comment-status",
-        onClick: event => {
-          // Prevent the thread from being selected.
-          event.stopPropagation();
-        },
-        children: /*#__PURE__*/_jsxs(HStack, {
-          spacing: "0",
-          children: [canResolve && /*#__PURE__*/_jsx(Button, {
-            label: _x('Resolve', 'Mark comment as resolved'),
-            size: "small",
-            icon: published,
-            disabled: status === 'approved',
-            accessibleWhenDisabled: status === 'approved',
-            onClick: () => {
-              onEdit({
-                id: thread.id,
-                status: 'approved'
-              });
-            }
-          }), /*#__PURE__*/_jsxs(Menu, {
-            placement: "bottom-end",
-            children: [/*#__PURE__*/_jsx(Menu.TriggerButton, {
-              render: /*#__PURE__*/_jsx(Button, {
+  ];
+  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"
+                ),
                 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: thread,
-      submitButtonText: _x('Update', 'verb'),
-      labelText: sprintf(
-      // translators: %1$s: comment identifier, %2$s: author name.
-      __('Edit Comment %1$s by %2$s'), thread.id, thread?.author_name || 'Unknown')
-    }) : /*#__PURE__*/_jsx(RawHTML, {
-      className: "editor-collab-sidebar-panel__user-comment",
-      children: thread?.content?.rendered
-    }), 'delete' === actionState && /*#__PURE__*/_jsx(ConfirmDialog, {
-      isOpen: showConfirmDialog,
-      onConfirm: handleConfirmDelete,
-      onCancel: handleCancel,
-      confirmButtonText: __('Delete'),
-      children:
-      // translators: message displayed when confirming an action
-      __('Are you sure you want to delete this comment?')
-    })]
-  });
+                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,
+                    {
+                      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 || "Unknown"
+        ),
+        reflowComments
+      }
+    ) : /* @__PURE__ */ jsx(
+      RawHTML,
+      {
+        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
+      }
+    ),
+    "delete" === actionState && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: showConfirmDialog,
+        onConfirm: handleConfirmDelete,
+        onCancel: handleCancel,
+        confirmButtonText: __("Delete"),
+        children: __("Are you sure you want to delete this note?")
+      }
+    )
+  ] });
+};
+var comments_default = Comments;
+export {
+  Comments,
+  comments_default as default
 };
-//# sourceMappingURL=comments.js.map
+//# sourceMappingURL=comments.js.map