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

Enhanced block editor for WordPress posts.

// packages/editor/src/components/collab-sidebar/add-note.js
import { __ } from "@wordpress/i18n";
import { useRef } from "@wordpress/element";
import { __experimentalUseFocusOutside as useFocusOutside } from "@wordpress/compose";
import { useSelect, useDispatch } from "@wordpress/data";
import {
  store as blockEditorStore,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import { NoteCard } from "./note-card.mjs";
import { NoteForm } from "./note-form.mjs";
import { FloatingContainer } from "./floating-container.mjs";
import { focusNoteThread } from "./utils.mjs";
import { store as editorStore } from "../../store/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { jsx } from "react/jsx-runtime";
var { useBlockElement } = unlock(blockEditorPrivateApis);
function AddNote({ onSubmit, sidebarRef, floating }) {
  const { clientId } = useSelect((select) => {
    const { getSelectedBlockClientId } = select(blockEditorStore);
    return {
      clientId: getSelectedBlockClientId()
    };
  }, []);
  const selectedNote = useSelect(
    (select) => unlock(select(editorStore)).getSelectedNote(),
    []
  );
  const blockElement = useBlockElement(clientId);
  const { toggleBlockSpotlight } = unlock(useDispatch(blockEditorStore));
  const { selectNote } = unlock(useDispatch(editorStore));
  const { getSelectedNote } = unlock(useSelect(editorStore));
  const isSubmittingRef = useRef(false);
  const focusOutside = useFocusOutside((event) => {
    if (event.relatedTarget?.closest(
      ".editor-collab-sidebar-panel__add-note"
    )) {
      return;
    }
    if (isSubmittingRef.current) {
      return;
    }
    if (getSelectedNote() === "new") {
      toggleBlockSpotlight(clientId, false);
      selectNote(void 0);
    }
  });
  const unselectNote = () => {
    selectNote(void 0);
    blockElement?.focus();
    toggleBlockSpotlight(clientId, false);
  };
  if (selectedNote !== "new" || !clientId) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    FloatingContainer,
    {
      floating,
      className: "editor-collab-sidebar-panel__add-note is-selected",
      gap: "md",
      tabIndex: 0,
      "aria-label": __("New note"),
      role: "treeitem",
      style: floating ? { opacity: !floating.y ? 0 : void 0 } : void 0,
      ...focusOutside,
      children: /* @__PURE__ */ jsx(NoteCard, { children: /* @__PURE__ */ jsx(
        NoteForm,
        {
          onSubmit: async (inputComment) => {
            isSubmittingRef.current = true;
            try {
              const savedRecord = await onSubmit({
                content: inputComment
              });
              if (savedRecord) {
                selectNote(savedRecord.id);
                focusNoteThread(
                  savedRecord.id,
                  sidebarRef.current
                );
              }
              return savedRecord;
            } finally {
              isSubmittingRef.current = false;
            }
          },
          onCancel: unselectNote,
          labels: {
            input: __("New note"),
            placeholder: __("Add a note or @ mention")
          }
        }
      ) })
    }
  );
}
export {
  AddNote
};
//# sourceMappingURL=add-note.mjs.map