@wordpress/editor/build-module/components/collab-sidebar/note.mjs

Enhanced block editor for WordPress posts.

// packages/editor/src/components/collab-sidebar/note.js
import clsx from "clsx";
import { useRef, useState, useLayoutEffect } from "@wordpress/element";
import {
  __experimentalConfirmDialog as ConfirmDialog,
  Button,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
import { Button as UIButton } from "@wordpress/ui";
import { __, _x, sprintf } from "@wordpress/i18n";
import { moreVertical, published } from "@wordpress/icons";
import { NoteCard } from "./note-card.mjs";
import { NoteForm } from "./note-form.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { Menu } = unlock(componentsPrivateApis);
function NoteActionsMenu({ items, buttonRef }) {
  return /* @__PURE__ */ jsxs(Menu, { placement: "bottom-end", children: [
    /* @__PURE__ */ jsx(
      Menu.TriggerButton,
      {
        render: /* @__PURE__ */ jsx(
          Button,
          {
            ref: buttonRef,
            size: "small",
            icon: moreVertical,
            label: __("Actions"),
            disabled: !items.length,
            accessibleWhenDisabled: true
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      Menu.Popover,
      {
        modal: false,
        children: items.map((item) => /* @__PURE__ */ jsx(Menu.Item, { onClick: item.onClick, children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: item.title }) }, item.id))
      }
    )
  ] });
}
function Note({
  note,
  parentNote,
  isSelected,
  onEditNote,
  onDeleteNote,
  onResolve
}) {
  const [actionState, setActionState] = useState(null);
  const actionButtonRef = useRef(null);
  const commentRef = useRef(null);
  const rawContent = note?.content?.raw;
  const [prevContent, setPrevContent] = useState(rawContent);
  const [isExpanded, setIsExpanded] = useState(false);
  const [isOverflowing, setIsOverflowing] = useState(false);
  if (prevContent !== rawContent) {
    setPrevContent(rawContent);
    setIsExpanded(false);
  }
  useLayoutEffect(() => {
    const commentElement = commentRef.current;
    if (commentElement) {
      setIsOverflowing(
        commentElement.scrollHeight > commentElement.clientHeight
      );
    }
  }, [rawContent]);
  const canResolve = note.parent === 0;
  const isResolutionNote = note.type === "note" && note.meta && (note.meta._wp_note_status === "resolved" || note.meta._wp_note_status === "reopen");
  const menuItems = [
    {
      id: "edit",
      title: __("Edit"),
      isEligible: ({ status }) => status !== "approved",
      onClick: () => setActionState("edit")
    },
    {
      id: "reopen",
      title: _x("Reopen", "Reopen note"),
      isEligible: ({ status }) => status === "approved",
      onClick: () => onEditNote({ id: note.id, status: "hold" })
    },
    {
      id: "delete",
      title: __("Delete"),
      isEligible: () => true,
      onClick: () => setActionState("delete")
    }
  ];
  const availableItems = parentNote?.status !== "approved" ? menuItems.filter((item) => item.isEligible(note)) : [];
  const deleteConfirmMessage = note.parent === 0 ? __(
    "Are you sure you want to delete this note? This will also delete all of this note's replies."
  ) : __("Are you sure you want to delete this reply?");
  const handleCancel = () => {
    setActionState(null);
    actionButtonRef.current?.focus();
  };
  let body;
  if (actionState === "edit") {
    body = /* @__PURE__ */ jsx(
      NoteForm,
      {
        onSubmit: async (value) => {
          const saved = await onEditNote({
            id: note.id,
            content: value
          });
          if (saved) {
            handleCancel();
          }
          return saved;
        },
        onCancel: handleCancel,
        note,
        labels: {
          submit: _x("Update", "verb"),
          input: sprintf(
            // translators: %1$s: note identifier, %2$s: author name.
            __("Edit note %1$s by %2$s"),
            note.id,
            note.author_name
          )
        }
      }
    );
  } else {
    let content;
    if (isResolutionNote) {
      const actionText = note.meta._wp_note_status === "resolved" ? __("Marked as resolved") : __("Reopened");
      const raw = note?.content?.raw;
      content = raw && typeof raw === "string" && raw.trim() !== "" ? sprintf(
        // translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
        __("%1$s: %2$s"),
        actionText,
        raw
      ) : actionText;
    } else {
      content = note?.content?.rendered;
    }
    body = /* @__PURE__ */ jsx(
      "div",
      {
        ref: commentRef,
        className: clsx("editor-collab-sidebar-panel__note-content", {
          "editor-collab-sidebar-panel__resolution-text": isResolutionNote,
          "is-collapsed": !isExpanded
        }),
        dangerouslySetInnerHTML: { __html: content ?? "" }
      }
    );
  }
  const actions = isSelected ? /* @__PURE__ */ jsxs(Fragment, { children: [
    canResolve && onResolve && /* @__PURE__ */ jsx(
      Button,
      {
        label: _x("Resolve", "Mark note as resolved"),
        size: "small",
        icon: published,
        disabled: note.status === "approved",
        accessibleWhenDisabled: note.status === "approved",
        onClick: onResolve
      }
    ),
    /* @__PURE__ */ jsx(
      NoteActionsMenu,
      {
        items: availableItems,
        buttonRef: actionButtonRef
      }
    )
  ] }) : null;
  return /* @__PURE__ */ jsxs(
    NoteCard,
    {
      note,
      actions,
      role: note.parent !== 0 ? "treeitem" : void 0,
      children: [
        body,
        actionState === "delete" && /* @__PURE__ */ jsx(
          ConfirmDialog,
          {
            isOpen: true,
            onConfirm: () => {
              onDeleteNote(note);
              setActionState(null);
            },
            onCancel: handleCancel,
            confirmButtonText: __("Delete"),
            children: deleteConfirmMessage
          }
        ),
        isOverflowing && "edit" !== actionState && /* @__PURE__ */ jsx(
          UIButton,
          {
            className: "editor-collab-sidebar-panel__show-more-button",
            variant: "unstyled",
            size: "small",
            onClick: () => setIsExpanded(!isExpanded),
            children: !isExpanded ? __("Show more") : __("Show less")
          }
        )
      ]
    }
  );
}
export {
  Note
};
//# sourceMappingURL=note.mjs.map