@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
79 lines (78 loc) • 2.5 kB
JavaScript
// packages/editor/src/components/collab-sidebar/add-note.js
import { __ } from "@wordpress/i18n";
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 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__thread is-selected",
gap: "md",
tabIndex: 0,
"aria-label": __("New note"),
role: "treeitem",
style: floating ? { opacity: !floating.y ? 0 : void 0 } : void 0,
onBlur: (event) => {
if (!document.hasFocus()) {
return;
}
if (event.currentTarget.contains(event.relatedTarget)) {
return;
}
toggleBlockSpotlight(clientId, false);
selectNote(void 0);
},
children: /* @__PURE__ */ jsx(NoteCard, { children: /* @__PURE__ */ jsx(
NoteForm,
{
onSubmit: async (inputComment) => {
const { id } = await onSubmit({
content: inputComment
});
selectNote(id);
focusNoteThread(id, sidebarRef.current);
},
onCancel: unselectNote,
labels: { input: __("New note") }
}
) })
}
);
}
export {
AddNote
};
//# sourceMappingURL=add-note.mjs.map