@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 { RawHTML, useRef, useState } from "@wordpress/element";
import {
  __experimentalConfirmDialog as ConfirmDialog,
  Button,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
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 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: (value) => {
          onEditNote({ id: note.id, content: value });
          setActionState(null);
          actionButtonRef.current?.focus();
        },
        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 if (isResolutionNote) {
    const actionText = note.meta._wp_note_status === "resolved" ? __("Marked as resolved") : __("Reopened");
    const raw = note?.content?.raw;
    const text = 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;
    body = /* @__PURE__ */ jsx(
      RawHTML,
      {
        className: clsx(
          "editor-collab-sidebar-panel__note-content",
          "editor-collab-sidebar-panel__resolution-text"
        ),
        children: text
      }
    );
  } else {
    body = /* @__PURE__ */ jsx(RawHTML, { className: "editor-collab-sidebar-panel__note-content", children: note?.content?.rendered });
  }
  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
          }
        )
      ]
    }
  );
}
export {
  Note
};
//# sourceMappingURL=note.mjs.map