"use strict";
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);

// packages/editor/src/components/collab-sidebar/comments.js
var comments_exports = {};
__export(comments_exports, {
  Comments: () => Comments,
  default: () => comments_default
});
module.exports = __toCommonJS(comments_exports);
var import_clsx = __toESM(require("clsx"), 1);
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.cjs");
var import_comment_author_info = __toESM(require("./comment-author-info.cjs"), 1);
var import_comment_form = __toESM(require("./comment-form.cjs"), 1);
var import_utils = require("./utils.cjs");
var import_hooks = require("./hooks.cjs");
var import_add_comment = require("./add-comment.cjs");
var import_store = require("../../store/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
var { Menu } = (0, import_lock_unlock.unlock)(import_components.privateApis);
function Comments({
  threads: noteThreads,
  onEditComment,
  onAddReply,
  onCommentDelete,
  newNoteFormState,
  setNewNoteFormState,
  commentSidebarRef,
  reflowComments,
  isFloating = false,
  commentLastUpdated
}) {
  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 { setCanvasMinHeight } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
  const { selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
    (0, import_data.useDispatch)(import_block_editor.store)
  );
  const { blockCommentId, selectedBlockClientId, orderedBlockIds } = (0, import_data.useSelect)((select) => {
    const {
      getBlockAttributes,
      getSelectedBlockClientId,
      getClientIdsWithDescendants
    } = select(import_block_editor.store);
    const clientId = getSelectedBlockClientId();
    return {
      blockCommentId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
      selectedBlockClientId: clientId,
      orderedBlockIds: getClientIdsWithDescendants()
    };
  }, []);
  const relatedBlockElement = useBlockElement(selectedBlockClientId);
  const threads = (0, import_element.useMemo)(() => {
    const t = [...noteThreads];
    const orderedThreads = [];
    if (isFloating && newNoteFormState === "open") {
      const newNoteThread = {
        id: "new-note-thread",
        blockClientId: selectedBlockClientId,
        content: { rendered: "" }
      };
      orderedBlockIds.forEach((blockId) => {
        if (blockId === selectedBlockClientId) {
          orderedThreads.push(newNoteThread);
        } else {
          const threadForBlock = t.find(
            (thread) => thread.blockClientId === blockId
          );
          if (threadForBlock) {
            orderedThreads.push(threadForBlock);
          }
        }
      });
      return orderedThreads;
    }
    return t;
  }, [
    noteThreads,
    isFloating,
    newNoteFormState,
    selectedBlockClientId,
    orderedBlockIds
  ]);
  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);
      setNewNoteFormState("closed");
      relatedBlockElement?.focus();
    }
  };
  (0, import_element.useEffect)(() => {
    setSelectedThread(
      newNoteFormState === "open" ? "new-note-thread" : blockCommentId
    );
  }, [blockCommentId, newNoteFormState]);
  const setBlockRef = (0, import_element.useCallback)((id, blockRef) => {
    setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
  }, []);
  (0, import_element.useEffect)(() => {
    const calculateAllOffsets = () => {
      const offsets = {};
      if (!isFloating) {
        return { offsets, minHeight: 0 };
      }
      const selectedThreadIndex = threads.findIndex(
        (t) => t.id === selectedThread
      );
      const breakIndex = selectedThreadIndex === -1 ? 0 : selectedThreadIndex;
      const selectedThreadData = threads[breakIndex];
      if (!selectedThreadData || !blockRefs[selectedThreadData.id]) {
        return { offsets, minHeight: 0 };
      }
      let blockElement = blockRefs[selectedThreadData.id];
      let blockRect = blockElement?.getBoundingClientRect();
      const selectedThreadTop = blockRect?.top || 0;
      const selectedThreadHeight = heights[selectedThreadData.id] || 0;
      offsets[selectedThreadData.id] = -16;
      let previousThreadData = {
        threadTop: selectedThreadTop - 16,
        threadHeight: selectedThreadHeight
      };
      for (let i = breakIndex + 1; i < threads.length; i++) {
        const thread = threads[i];
        if (!blockRefs[thread.id]) {
          continue;
        }
        blockElement = blockRefs[thread.id];
        blockRect = blockElement?.getBoundingClientRect();
        const threadTop = blockRect?.top || 0;
        const threadHeight = heights[thread.id] || 0;
        let additionalOffset = -16;
        const previousBottom = previousThreadData.threadTop + previousThreadData.threadHeight;
        if (threadTop < previousBottom + 16) {
          additionalOffset = previousBottom - threadTop + 20;
        }
        offsets[thread.id] = additionalOffset;
        previousThreadData = {
          threadTop: threadTop + additionalOffset,
          threadHeight
        };
      }
      let nextThreadData = {
        threadTop: selectedThreadTop - 16
      };
      for (let i = selectedThreadIndex - 1; i >= 0; i--) {
        const thread = threads[i];
        if (!blockRefs[thread.id]) {
          continue;
        }
        blockElement = blockRefs[thread.id];
        blockRect = blockElement?.getBoundingClientRect();
        const threadTop = blockRect?.top || 0;
        const threadHeight = heights[thread.id] || 0;
        let additionalOffset = -16;
        const threadBottom = threadTop + threadHeight;
        if (threadBottom > nextThreadData.threadTop) {
          additionalOffset = nextThreadData.threadTop - threadTop - threadHeight - 20;
        }
        offsets[thread.id] = additionalOffset;
        nextThreadData = {
          threadTop: threadTop + additionalOffset
        };
      }
      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 { offsets: newOffsets, minHeight } = calculateAllOffsets();
    if (Object.keys(newOffsets).length > 0) {
      setBoardOffsets(newOffsets);
    }
    setCanvasMinHeight(minHeight);
  }, [
    heights,
    blockRefs,
    isFloating,
    threads,
    selectedThread,
    setCanvasMinHeight
  ]);
  const handleThreadNavigation = (event, thread, isSelected) => {
    if (event.defaultPrevented) {
      return;
    }
    const currentIndex = threads.findIndex((t) => t.id === thread.id);
    if ((event.key === "Enter" || event.key === "ArrowRight") && event.currentTarget === event.target && !isSelected) {
      setNewNoteFormState("closed");
      setSelectedThread(thread.id);
      if (!!thread.blockClientId) {
        selectBlock(thread.blockClientId, null);
        toggleBlockSpotlight(thread.blockClientId, true);
      }
    } else if ((event.key === "Enter" || event.key === "ArrowLeft") && event.currentTarget === event.target && isSelected || event.key === "Escape") {
      setSelectedThread(null);
      setNewNoteFormState("closed");
      if (thread.blockClientId) {
        toggleBlockSpotlight(thread.blockClientId, false);
      }
      (0, import_utils.focusCommentThread)(thread.id, commentSidebarRef.current);
    } else if (event.key === "ArrowDown" && currentIndex < threads.length - 1 && event.currentTarget === event.target) {
      const nextThread = threads[currentIndex + 1];
      (0, import_utils.focusCommentThread)(nextThread.id, commentSidebarRef.current);
    } else if (event.key === "ArrowUp" && currentIndex > 0 && event.currentTarget === event.target) {
      const prevThread = threads[currentIndex - 1];
      (0, import_utils.focusCommentThread)(prevThread.id, commentSidebarRef.current);
    } else if (event.key === "Home" && event.currentTarget === event.target) {
      (0, import_utils.focusCommentThread)(threads[0].id, commentSidebarRef.current);
    } else if (event.key === "End" && event.currentTarget === event.target) {
      (0, import_utils.focusCommentThread)(
        threads[threads.length - 1].id,
        commentSidebarRef.current
      );
    }
  };
  const hasThreads = Array.isArray(threads) && threads.length > 0;
  if (!hasThreads && !isFloating) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_add_comment.AddComment,
      {
        onSubmit: onAddReply,
        newNoteFormState,
        setNewNoteFormState,
        commentSidebarRef
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    !isFloating && newNoteFormState === "open" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_add_comment.AddComment,
      {
        onSubmit: onAddReply,
        newNoteFormState,
        setNewNoteFormState,
        commentSidebarRef
      }
    ),
    threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      Thread,
      {
        thread,
        onAddReply,
        onCommentDelete: handleDelete,
        onEditComment,
        isSelected: selectedThread === thread.id,
        setSelectedThread,
        setNewNoteFormState,
        commentSidebarRef,
        reflowComments,
        isFloating,
        calculatedOffset: boardOffsets[thread.id] ?? 0,
        setHeights,
        setBlockRef,
        selectedThread,
        commentLastUpdated,
        newNoteFormState,
        onKeyDown: (event) => handleThreadNavigation(
          event,
          thread,
          selectedThread === thread.id
        )
      },
      thread.id
    ))
  ] });
}
function Thread({
  thread,
  onEditComment,
  onAddReply,
  onCommentDelete,
  isSelected,
  setNewNoteFormState,
  commentSidebarRef,
  reflowComments,
  isFloating,
  calculatedOffset,
  setHeights,
  setBlockRef,
  setSelectedThread,
  selectedThread,
  commentLastUpdated,
  newNoteFormState,
  onKeyDown
}) {
  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, import_compose.useDebounce)(
    toggleBlockHighlight,
    50
  );
  const { y, refs } = (0, import_hooks.useFloatingThread)({
    thread,
    calculatedOffset,
    setHeights,
    setBlockRef,
    selectedThread,
    commentLastUpdated
  });
  const isKeyboardTabbingRef = (0, import_element.useRef)(false);
  const onMouseEnter = () => {
    debouncedToggleBlockHighlight(thread.blockClientId, true);
  };
  const onMouseLeave = () => {
    debouncedToggleBlockHighlight(thread.blockClientId, false);
  };
  const onFocus = () => {
    toggleBlockHighlight(thread.blockClientId, true);
  };
  const onBlur = (event) => {
    const isNoteFocused = event.relatedTarget?.closest(
      ".editor-collab-sidebar-panel__thread"
    );
    const isDialogFocused = event.relatedTarget?.closest('[role="dialog"]');
    const isTabbing = isKeyboardTabbingRef.current;
    if (isNoteFocused && !isTabbing) {
      return;
    }
    if (isDialogFocused) {
      return;
    }
    if (isTabbing && event.currentTarget.contains(event.relatedTarget)) {
      return;
    }
    toggleBlockHighlight(thread.blockClientId, false);
    unselectThread();
  };
  const handleCommentSelect = () => {
    setNewNoteFormState("closed");
    setSelectedThread(thread.id);
    toggleBlockSpotlight(thread.blockClientId, true);
    if (!!thread.blockClientId) {
      selectBlock(thread.blockClientId, null);
    }
  };
  const unselectThread = () => {
    setSelectedThread(null);
    setNewNoteFormState("closed");
    toggleBlockSpotlight(thread.blockClientId, false);
  };
  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 = !!thread.blockClientId ? (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
  );
  if (thread.id === "new-note-thread" && newNoteFormState === "open" && isFloating) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_add_comment.AddComment,
      {
        onSubmit: onAddReply,
        newNoteFormState,
        setNewNoteFormState,
        commentSidebarRef,
        reflowComments,
        isFloating,
        y,
        refs
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalVStack,
    {
      className: (0, import_clsx.default)("editor-collab-sidebar-panel__thread", {
        "is-selected": isSelected,
        "is-floating": isFloating
      }),
      id: `comment-thread-${thread.id}`,
      spacing: "3",
      onClick: handleCommentSelect,
      onMouseEnter,
      onMouseLeave,
      onFocus,
      onBlur,
      onKeyUp: (event) => {
        if (event.key === "Tab") {
          isKeyboardTabbingRef.current = false;
        }
      },
      onKeyDown: (event) => {
        if (event.key === "Tab") {
          isKeyboardTabbingRef.current = true;
        } else {
          onKeyDown(event);
        }
      },
      tabIndex: 0,
      role: "treeitem",
      "aria-label": ariaLabel,
      "aria-expanded": isSelected,
      ref: isFloating ? refs.setFloating : void 0,
      style: isFloating ? { top: y } : void 0,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Button,
          {
            className: "editor-collab-sidebar-panel__skip-to-comment",
            variant: "secondary",
            size: "compact",
            onClick: () => {
              (0, import_utils.focusCommentThread)(
                thread.id,
                commentSidebarRef.current,
                "textarea"
              );
            },
            children: (0, import_i18n.__)("Add new reply")
          }
        ),
        !thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", weight: 500, variant: "muted", children: (0, import_i18n.__)("Original block deleted.") }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          CommentBoard,
          {
            thread,
            isExpanded: isSelected,
            onEdit: (params = {}) => {
              onEditComment(params);
              if (params.status === "approved") {
                unselectThread();
                if (isFloating) {
                  relatedBlockElement?.focus();
                } else {
                  (0, import_utils.focusCommentThread)(
                    thread.id,
                    commentSidebarRef.current
                  );
                }
              }
            },
            onDelete: onCommentDelete,
            reflowComments
          }
        ),
        isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          CommentBoard,
          {
            thread: reply,
            parent: thread,
            isExpanded: isSelected,
            onEdit: onEditComment,
            onDelete: onCommentDelete,
            reflowComments
          },
          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", role: "treeitem", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_author_info.default, {}) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_comment_form.default,
            {
              onSubmit: (inputComment) => {
                if ("approved" === thread.status) {
                  onEditComment({
                    id: thread.id,
                    status: "hold",
                    content: inputComment
                  });
                } else {
                  onAddReply({
                    content: inputComment,
                    parent: thread.id
                  });
                }
              },
              onCancel: (event) => {
                event.stopPropagation();
                unselectThread();
                (0, import_utils.focusCommentThread)(
                  thread.id,
                  commentSidebarRef.current
                );
              },
              submitButtonText: "approved" === thread.status ? (0, import_i18n.__)("Reopen & Reply") : (0, import_i18n.__)("Reply"),
              rows: "approved" === thread.status ? 2 : 4,
              labelText: (0, import_i18n.sprintf)(
                // translators: %1$s: note identifier, %2$s: author name
                (0, import_i18n.__)("Reply to note %1$s by %2$s"),
                thread.id,
                thread.author_name
              ),
              reflowComments
            }
          ) })
        ] }),
        !!thread.blockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Button,
          {
            className: "editor-collab-sidebar-panel__skip-to-block",
            variant: "secondary",
            size: "compact",
            onClick: (event) => {
              event.stopPropagation();
              relatedBlockElement?.focus();
            },
            children: (0, import_i18n.__)("Back to block")
          }
        )
      ]
    }
  );
}
var CommentBoard = ({
  thread,
  parent,
  isExpanded,
  onEdit,
  onDelete,
  reflowComments
}) => {
  const [actionState, setActionState] = (0, import_element.useState)(false);
  const [showConfirmDialog, setShowConfirmDialog] = (0, import_element.useState)(false);
  const actionButtonRef = (0, import_element.useRef)(null);
  const handleConfirmDelete = () => {
    onDelete(thread);
    setActionState(false);
    setShowConfirmDialog(false);
  };
  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 = [
    {
      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 = parent?.status !== "approved" ? actions.filter((item) => item.isEligible(thread)) : [];
  const deleteConfirmMessage = (
    // When deleting a top level note, descendants will also be deleted.
    thread.parent === 0 ? (0, import_i18n.__)(
      "Are you sure you want to delete this note? This will also delete all of this note's replies."
    ) : (0, import_i18n.__)("Are you sure you want to delete this reply?")
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalVStack,
    {
      spacing: "2",
      role: thread.parent !== 0 ? "treeitem" : void 0,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { alignment: "left", spacing: "3", justify: "flex-start", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_comment_author_info.default,
            {
              avatar: thread?.author_avatar_urls?.[48],
              name: thread?.author_name,
              date: thread?.date,
              userId: thread?.author
            }
          ),
          isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.FlexItem,
            {
              className: "editor-collab-sidebar-panel__comment-status",
              onClick: (event) => {
                event.stopPropagation();
              },
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: "0", children: [
                canResolve && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  import_components.Button,
                  {
                    label: (0, import_i18n._x)(
                      "Resolve",
                      "Mark note as resolved"
                    ),
                    size: "small",
                    icon: import_icons.published,
                    disabled: thread.status === "approved",
                    accessibleWhenDisabled: thread.status === "approved",
                    onClick: () => {
                      onEdit({
                        id: thread.id,
                        status: "approved"
                      });
                    }
                  }
                ),
                /* @__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,
                        {
                          ref: actionButtonRef,
                          size: "small",
                          icon: import_icons.moreVertical,
                          label: (0, import_i18n.__)("Actions"),
                          disabled: !moreActions.length,
                          accessibleWhenDisabled: true
                        }
                      )
                    }
                  ),
                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                    Menu.Popover,
                    {
                      modal: false,
                      children: moreActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                        Menu.Item,
                        {
                          onClick: () => action.onClick(),
                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.ItemLabel, { children: action.title })
                        },
                        action.id
                      ))
                    }
                  )
                ] })
              ] })
            }
          )
        ] }),
        "edit" === actionState ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_comment_form.default,
          {
            onSubmit: (value) => {
              onEdit({
                id: thread.id,
                content: value
              });
              setActionState(false);
              actionButtonRef.current?.focus();
            },
            onCancel: () => handleCancel(),
            thread,
            submitButtonText: (0, import_i18n._x)("Update", "verb"),
            labelText: (0, import_i18n.sprintf)(
              // translators: %1$s: note identifier, %2$s: author name.
              (0, import_i18n.__)("Edit note %1$s by %2$s"),
              thread.id,
              thread.author_name
            ),
            reflowComments
          }
        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_element.RawHTML,
          {
            className: (0, import_clsx.default)(
              "editor-collab-sidebar-panel__user-comment",
              {
                "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: deleteConfirmMessage
          }
        )
      ]
    }
  );
};
var comments_default = Comments;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Comments
});
//# sourceMappingURL=comments.cjs.map
