@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
167 lines (166 loc) • 6.38 kB
JavaScript
// packages/editor/src/components/collab-sidebar/index.js
import { __ } from "@wordpress/i18n";
import { useSelect, useDispatch } from "@wordpress/data";
import { useRef } from "@wordpress/element";
import { useViewportMatch } from "@wordpress/compose";
import { useShortcut } from "@wordpress/keyboard-shortcuts";
import { comment as commentIcon } from "@wordpress/icons";
import { store as blockEditorStore } from "@wordpress/block-editor";
import { store as interfaceStore } from "@wordpress/interface";
import { store as preferencesStore } from "@wordpress/preferences";
import PluginSidebar from "../plugin-sidebar/index.mjs";
import {
ALL_NOTES_SIDEBAR,
FLOATING_NOTES_SIDEBAR,
SIDEBARS
} from "./constants.mjs";
import { Notes } from "./notes.mjs";
import { store as editorStore } from "../../store/index.mjs";
import { AddNoteMenuItem } from "./add-note-menu-item.mjs";
import { NoteAvatarIndicator } from "./note-indicator-toolbar.mjs";
import { useGlobalStylesContext } from "../global-styles-provider/index.mjs";
import { useNoteThreads, useEnableFloatingSidebar } from "./hooks.mjs";
import PostTypeSupportCheck from "../post-type-support-check/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function NotesSidebar({ postId }) {
const { getActiveComplementaryArea } = useSelect(interfaceStore);
const { enableComplementaryArea } = useDispatch(interfaceStore);
const { toggleBlockSpotlight, selectBlock } = unlock(
useDispatch(blockEditorStore)
);
const { selectNote } = unlock(useDispatch(editorStore));
const isLargeViewport = useViewportMatch("medium");
const sidebarRef = useRef(null);
const { clientId, noteId, isClassicBlock } = useSelect((select) => {
const { getBlockAttributes, getSelectedBlockClientId, getBlockName } = select(blockEditorStore);
const _clientId = getSelectedBlockClientId();
return {
clientId: _clientId,
noteId: _clientId ? getBlockAttributes(_clientId)?.metadata?.noteId : null,
isClassicBlock: _clientId ? getBlockName(_clientId) === "core/freeform" : false
};
}, []);
const { isDistractionFree } = useSelect((select) => {
const { get } = select(preferencesStore);
return {
isDistractionFree: get("core", "distractionFree")
};
}, []);
const selectedNote = useSelect(
(select) => unlock(select(editorStore)).getSelectedNote(),
[]
);
const { notes, unresolvedNotes } = useNoteThreads(postId);
const showFloatingSidebar = isLargeViewport;
const showAllNotesSidebar = notes.length > 0 || !showFloatingSidebar;
useEnableFloatingSidebar(
showFloatingSidebar && (unresolvedNotes.length > 0 || selectedNote !== void 0)
);
useShortcut(
"core/editor/new-note",
(event) => {
event.preventDefault();
openTheSidebar();
},
{
// When multiple notes per block are supported. Remove note ID check.
// See: https://github.com/WordPress/gutenberg/pull/75147.
isDisabled: isDistractionFree || isClassicBlock || !clientId || !!noteId
}
);
const { merged: GlobalStyles } = useGlobalStylesContext();
const backgroundColor = GlobalStyles?.styles?.color?.background;
const currentThread = noteId ? notes.find((thread) => thread.id === noteId) : null;
async function openTheSidebar(selectedClientId) {
const prevArea = await getActiveComplementaryArea("core");
const activeNotesArea = SIDEBARS.find((name) => name === prevArea);
const targetClientId = selectedClientId && selectedClientId !== clientId ? selectedClientId : clientId;
const targetNote = notes.find(
(note) => note.blockClientId === targetClientId
);
if (targetNote?.status === "approved") {
enableComplementaryArea("core", ALL_NOTES_SIDEBAR);
} else if (!activeNotesArea || !showAllNotesSidebar) {
enableComplementaryArea(
"core",
showFloatingSidebar ? FLOATING_NOTES_SIDEBAR : ALL_NOTES_SIDEBAR
);
}
const currentArea = await getActiveComplementaryArea("core");
if (!SIDEBARS.includes(currentArea)) {
return;
}
selectBlock(targetClientId, null);
toggleBlockSpotlight(targetClientId, true);
selectNote(targetNote ? targetNote.id : "new", { focus: true });
}
if (isDistractionFree) {
return /* @__PURE__ */ jsx(AddNoteMenuItem, { isDistractionFree: true });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
!!currentThread && /* @__PURE__ */ jsx(
NoteAvatarIndicator,
{
note: currentThread,
onClick: openTheSidebar
}
),
/* @__PURE__ */ jsx(AddNoteMenuItem, { onClick: openTheSidebar }),
showAllNotesSidebar && /* @__PURE__ */ jsx(
PluginSidebar,
{
identifier: ALL_NOTES_SIDEBAR,
name: ALL_NOTES_SIDEBAR,
title: __("All notes"),
header: /* @__PURE__ */ jsx("h2", { className: "interface-complementary-area-header__title", children: __("All notes") }),
icon: commentIcon,
closeLabel: __("Close Notes"),
children: /* @__PURE__ */ jsx(Notes, { notes, sidebarRef })
}
),
isLargeViewport && /* @__PURE__ */ jsx(
PluginSidebar,
{
isPinnable: false,
header: false,
identifier: FLOATING_NOTES_SIDEBAR,
className: "editor-collab-sidebar",
headerClassName: "editor-collab-sidebar__header",
backgroundColor,
children: /* @__PURE__ */ jsx(
Notes,
{
notes: unresolvedNotes,
sidebarRef,
styles: { backgroundColor },
isFloating: true
}
)
}
)
] });
}
function NotesSidebarContainer() {
const { postId, editorMode, revisionsMode } = useSelect((select) => {
const { getCurrentPostId, getEditorMode, isRevisionsMode } = unlock(
select(editorStore)
);
return {
postId: getCurrentPostId(),
editorMode: getEditorMode(),
revisionsMode: isRevisionsMode()
};
}, []);
if (!postId || typeof postId !== "number") {
return null;
}
if (editorMode === "text" || revisionsMode) {
return null;
}
return /* @__PURE__ */ jsx(PostTypeSupportCheck, { supportKeys: "editor.notes", children: /* @__PURE__ */ jsx(NotesSidebar, { postId }) });
}
export {
NotesSidebarContainer as default
};
//# sourceMappingURL=index.mjs.map