@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
193 lines (192 loc) • 6.8 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 { useGlobalStyles } from "../global-styles/index.mjs";
import { useNoteThreads, useEnableFloatingSidebar } from "./hooks.mjs";
import { getNoteIdsFromMetadata, pickPrimaryNote } from "./utils.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 blockNoteIds = getNoteIdsFromMetadata({ noteId });
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)
);
async function focusNote({
targetClientId,
noteId: targetNoteId,
isApproved
}) {
if (!targetClientId) {
return;
}
const prevArea = await getActiveComplementaryArea("core");
if (isApproved) {
enableComplementaryArea("core", ALL_NOTES_SIDEBAR);
} else if (!SIDEBARS.includes(prevArea) || !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(targetNoteId, { focus: true });
}
function openNoteForBlock(targetClientId) {
const blockThreads = notes.filter(
(thread) => thread.blockClientId === targetClientId
);
const target = pickPrimaryNote(blockThreads);
return focusNote({
targetClientId,
noteId: target?.id ?? "new",
isApproved: target?.status === "approved"
});
}
function addNewNoteForBlock(targetClientId) {
return focusNote({
targetClientId,
noteId: "new",
isApproved: false
});
}
useShortcut(
"core/editor/new-note",
(event) => {
event.preventDefault();
addNewNoteForBlock(clientId);
},
{
isDisabled: isDistractionFree || isClassicBlock || !clientId
}
);
const { merged: GlobalStyles } = useGlobalStyles();
const backgroundColor = GlobalStyles?.styles?.color?.background;
const currentThreads = blockNoteIds.length > 0 ? notes.filter((thread) => blockNoteIds.includes(thread.id)) : [];
const currentThread = pickPrimaryNote(currentThreads);
if (isDistractionFree) {
return /* @__PURE__ */ jsx(AddNoteMenuItem, { isDistractionFree: true });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
!!currentThread && /* @__PURE__ */ jsx(
NoteAvatarIndicator,
{
note: currentThread,
onClick: () => openNoteForBlock(clientId)
}
),
/* @__PURE__ */ jsx(
AddNoteMenuItem,
{
onClick: (menuClientId) => addNewNoteForBlock(menuClientId)
}
),
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