@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
238 lines (236 loc) • 8.55 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/editor/src/components/collab-sidebar/notes.js
var notes_exports = {};
__export(notes_exports, {
Notes: () => Notes
});
module.exports = __toCommonJS(notes_exports);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_data = require("@wordpress/data");
var import_ui = require("@wordpress/ui");
var import_block_editor = require("@wordpress/block-editor");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_note_thread = require("./note-thread.cjs");
var import_utils = require("./utils.cjs");
var import_hooks = require("./hooks.cjs");
var import_add_note = require("./add-note.cjs");
var import_store = require("../../store/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
function Notes({ notes, sidebarRef, isFloating = false, styles }) {
const {
onCreate: onAddReply,
onEdit: onEditNote,
onDelete
} = (0, import_hooks.useNoteActions)();
const { selectNote } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
const { selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
(0, import_data.useDispatch)(import_block_editor.store)
);
const { blockNoteId, selectedBlockClientId, orderedBlockIds } = (0, import_data.useSelect)(
(select) => {
const {
getBlockAttributes,
getSelectedBlockClientId,
getClientIdsWithDescendants
} = select(import_block_editor.store);
const clientId = getSelectedBlockClientId();
return {
blockNoteId: clientId ? getBlockAttributes(clientId)?.metadata?.noteId : null,
selectedBlockClientId: clientId,
orderedBlockIds: getClientIdsWithDescendants()
};
},
[]
);
const { selectedNote, noteFocused } = (0, import_data.useSelect)((select) => {
const { getSelectedNote, isNoteFocused } = (0, import_lock_unlock.unlock)(
select(import_store.store)
);
return {
selectedNote: getSelectedNote(),
noteFocused: isNoteFocused()
};
}, []);
const relatedBlockElement = useBlockElement(selectedBlockClientId);
const threads = (0, import_element.useMemo)(() => {
if (!isFloating || selectedNote !== "new") {
return notes;
}
const newNoteThread = {
id: "new",
blockClientId: selectedBlockClientId,
content: { rendered: "" }
};
const out = [];
orderedBlockIds.forEach((blockId) => {
if (blockId === selectedBlockClientId) {
out.push(newNoteThread);
} else {
const threadForBlock = notes.find(
(t) => t.blockClientId === blockId
);
if (threadForBlock) {
out.push(threadForBlock);
}
}
});
return out;
}, [
notes,
isFloating,
selectedNote,
selectedBlockClientId,
orderedBlockIds
]);
const handleDelete = async (note) => {
const currentIndex = threads.findIndex((t) => t.id === note.id);
const nextThread = threads[currentIndex + 1];
const prevThread = threads[currentIndex - 1];
await onDelete(note);
if (note.parent !== 0) {
selectNote(note.parent);
(0, import_utils.focusNoteThread)(note.parent, sidebarRef.current);
return;
}
if (nextThread) {
selectNote(nextThread.id);
(0, import_utils.focusNoteThread)(nextThread.id, sidebarRef.current);
} else if (prevThread) {
selectNote(prevThread.id);
(0, import_utils.focusNoteThread)(prevThread.id, sidebarRef.current);
} else {
selectNote(void 0);
toggleBlockSpotlight(note.blockClientId, false);
relatedBlockElement?.focus();
}
};
(0, import_element.useEffect)(() => {
selectNote(blockNoteId ?? void 0);
}, [blockNoteId, selectNote]);
(0, import_element.useEffect)(() => {
if (noteFocused && selectedNote) {
(0, import_utils.focusNoteThread)(
selectedNote,
sidebarRef.current,
selectedNote === "new" ? "textarea" : void 0
);
selectNote(selectedNote);
}
}, [noteFocused, selectedNote, selectNote, sidebarRef]);
const { notePositions, registerThread, unregisterThread } = (0, import_hooks.useFloatingBoard)({
threads,
selectedNoteId: selectedNote,
isFloating,
sidebarRef
});
const hasThreads = Array.isArray(threads) && threads.length > 0;
const navigate = (event, thread, isSelected) => {
if (event.defaultPrevented) {
return;
}
const currentIndex = threads.findIndex((t) => t.id === thread.id);
const isSelfTarget = event.currentTarget === event.target;
if ((event.key === "Enter" || event.key === "ArrowRight") && isSelfTarget && !isSelected) {
selectNote(thread.id);
if (!!thread.blockClientId) {
selectBlock(thread.blockClientId, null);
toggleBlockSpotlight(thread.blockClientId, true);
}
} else if ((event.key === "Enter" || event.key === "ArrowLeft") && isSelfTarget && isSelected || event.key === "Escape") {
selectNote(void 0);
if (thread.blockClientId) {
toggleBlockSpotlight(thread.blockClientId, false);
}
(0, import_utils.focusNoteThread)(thread.id, sidebarRef.current);
} else if (event.key === "ArrowDown" && currentIndex < threads.length - 1 && isSelfTarget) {
(0, import_utils.focusNoteThread)(
threads[currentIndex + 1].id,
sidebarRef.current
);
} else if (event.key === "ArrowUp" && currentIndex > 0 && isSelfTarget) {
(0, import_utils.focusNoteThread)(
threads[currentIndex - 1].id,
sidebarRef.current
);
} else if (event.key === "Home" && isSelfTarget) {
(0, import_utils.focusNoteThread)(threads[0].id, sidebarRef.current);
} else if (event.key === "End" && isSelfTarget) {
(0, import_utils.focusNoteThread)(
threads[threads.length - 1].id,
sidebarRef.current
);
}
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_ui.Stack,
{
className: "editor-collab-sidebar-panel",
style: styles,
role: "tree",
direction: "column",
gap: "md",
justify: "flex-start",
ref: (node) => {
if (node) {
sidebarRef.current = node;
}
},
"aria-label": isFloating ? (0, import_i18n.__)("Unresolved notes") : (0, import_i18n.__)("All notes"),
children: !hasThreads && !isFloating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_add_note.AddNote, { onSubmit: onAddReply, sidebarRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
!isFloating && selectedNote === "new" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_add_note.AddNote,
{
onSubmit: onAddReply,
sidebarRef
}
),
threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_note_thread.NoteThread,
{
note: thread,
onAddReply,
onDeleteNote: handleDelete,
onEditNote,
isSelected: selectedNote === thread.id,
sidebarRef,
floating: isFloating ? {
y: notePositions[thread.id],
registerThread,
unregisterThread
} : void 0,
onKeyDown: (event) => navigate(
event,
thread,
selectedNote === thread.id
)
},
thread.id
))
] })
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Notes
});
//# sourceMappingURL=notes.cjs.map