@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
303 lines (301 loc) • 11.2 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/collaborators-overlay/use-block-highlighting.ts
var use_block_highlighting_exports = {};
__export(use_block_highlighting_exports, {
useBlockHighlighting: () => useBlockHighlighting
});
module.exports = __toCommonJS(use_block_highlighting_exports);
var import_core_data = require("@wordpress/core-data");
var import_block_editor = require("@wordpress/block-editor");
var import_element = require("@wordpress/element");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_utils = require("../collab-sidebar/utils.cjs");
var import_get_avatar_url = require("./get-avatar-url.cjs");
var import_use_debounced_recompute = require("./use-debounced-recompute.cjs");
var import_cursor_dom_utils = require("./cursor-dom-utils.cjs");
var import_compute_selection = require("./compute-selection.cjs");
var import_resolve_start_position = require("./resolve-start-position.cjs");
var import_get_collaborator_display_name = require("../../utils/get-collaborator-display-name.cjs");
var { useActiveCollaborators, useResolvedSelection } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
var { isElementVisible } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
var { SelectionType } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
function useBlockHighlighting(overlayElement, blockEditorDocument, postId, postType, delayMs) {
const highlightedBlockIds = (0, import_element.useRef)(/* @__PURE__ */ new Set());
const userStates = useActiveCollaborators(
postId ?? null,
postType ?? null
);
const resolveSelection = useResolvedSelection(
postId ?? null,
postType ?? null
);
const [highlights, setHighlights] = (0, import_element.useState)(
[]
);
const [recomputeToken, rerenderHighlightsAfterDelay] = (0, import_use_debounced_recompute.useDebouncedRecompute)(delayMs);
const [resizeToken, rerenderHighlightsOnResize] = (0, import_use_debounced_recompute.useRequestAnimationFrameRecompute)();
(0, import_element.useEffect)(() => {
if (!blockEditorDocument) {
setHighlights([]);
return;
}
const currentHighlightedIds = highlightedBlockIds.current;
const seen = /* @__PURE__ */ new Set();
const blocksToHighlight = userStates.filter((userState) => {
if (userState.isMe) {
return false;
}
const selType = userState.editorState?.selection?.type;
return selType === SelectionType.WholeBlock || selType === SelectionType.SelectionInMultipleBlocks || selType === SelectionType.Cursor || selType === SelectionType.SelectionInOneBlock;
}).flatMap((userState) => {
const selection = userState.editorState?.selection;
if (selection.type === SelectionType.WholeBlock) {
let localClientId;
try {
({ localClientId } = resolveSelection(selection));
} catch {
return [];
}
if (!localClientId) {
return [];
}
let blockId = localClientId;
const blockElement = getBlockElementById(
blockEditorDocument,
localClientId
);
if (blockElement && !isElementVisible(blockElement)) {
const container = (0, import_cursor_dom_utils.getNearestVisibleBlockAncestor)(blockElement);
const containerId = container?.getAttribute("data-block");
if (!containerId) {
return [];
}
blockId = containerId;
}
return [
{
blockId,
clientId: userState.clientId,
userId: userState.collaboratorInfo.id ?? userState.clientId,
color: (0, import_utils.getAvatarBorderColor)(
userState.collaboratorInfo.id ?? userState.clientId
),
userName: (0, import_get_collaborator_display_name.getCollaboratorDisplayName)(
userState.collaboratorInfo
),
avatarUrl: (0, import_get_avatar_url.getAvatarUrl)(
userState.collaboratorInfo.avatar_urls
),
alwaysOutline: true
}
];
}
if (selection.type === SelectionType.Cursor || selection.type === SelectionType.SelectionInOneBlock) {
const resolved = (0, import_resolve_start_position.resolveStartPosition)(
selection,
resolveSelection
);
if (!resolved?.localClientId) {
return [];
}
const targetElement = (0, import_compute_selection.resolveTargetElement)(
blockEditorDocument,
resolved
);
if (!targetElement || isElementVisible(targetElement)) {
return [];
}
const container = (0, import_cursor_dom_utils.getNearestVisibleBlockAncestor)(targetElement);
const containerId = container?.getAttribute("data-block");
if (!containerId) {
return [];
}
return [
{
blockId: containerId,
clientId: userState.clientId,
userId: userState.collaboratorInfo.id ?? userState.clientId,
color: (0, import_utils.getAvatarBorderColor)(
userState.collaboratorInfo.id ?? userState.clientId
),
userName: (0, import_get_collaborator_display_name.getCollaboratorDisplayName)(
userState.collaboratorInfo
),
avatarUrl: (0, import_get_avatar_url.getAvatarUrl)(
userState.collaboratorInfo.avatar_urls
),
alwaysOutline: true
}
];
}
const resolveEndpointId = (endpoint) => {
try {
return resolveSelection(endpoint).localClientId;
} catch {
return null;
}
};
const startId = resolveEndpointId(selection.startEndpoint);
const endId = resolveEndpointId(selection.endEndpoint);
if (!startId || !endId) {
return [];
}
const range = (0, import_cursor_dom_utils.getOrderedBlockRange)(
startId,
endId,
blockEditorDocument
);
if (!range) {
return [];
}
const { firstId, lastId, middleEls, sameContainer } = range;
const color = (0, import_utils.getAvatarBorderColor)(
userState.collaboratorInfo.id ?? userState.clientId
);
const userName = (0, import_get_collaborator_display_name.getCollaboratorDisplayName)(
userState.collaboratorInfo
);
const avatarUrl = (0, import_get_avatar_url.getAvatarUrl)(
userState.collaboratorInfo.avatar_urls
);
if (sameContainer) {
return [
{
blockId: firstId,
clientId: userState.clientId,
userId: userState.collaboratorInfo.id ?? userState.clientId,
color,
userName,
avatarUrl,
alwaysOutline: false
}
];
}
const intermediateIds = middleEls.map((el) => el.getAttribute("data-block")).filter((id) => Boolean(id));
return [firstId, ...intermediateIds, lastId].map(
(blockId) => ({
blockId,
clientId: userState.clientId,
userId: userState.collaboratorInfo.id ?? userState.clientId,
color,
userName,
avatarUrl,
alwaysOutline: false
})
);
}).filter((block) => {
if (seen.has(block.blockId)) {
return false;
}
seen.add(block.blockId);
return true;
});
const selectedBlockIds = new Set(
blocksToHighlight.map((block) => block.blockId)
);
for (const blockId of currentHighlightedIds) {
if (!selectedBlockIds.has(blockId)) {
const blockElement = getBlockElementById(
blockEditorDocument,
blockId
);
if (blockElement) {
blockElement.classList.remove("is-collaborator-selected");
blockElement.style.removeProperty(
"--collaborator-outline-color"
);
}
currentHighlightedIds.delete(blockId);
}
}
const results = [];
const overlayRect = overlayElement?.getBoundingClientRect() ?? null;
const usersWithAvatar = /* @__PURE__ */ new Set();
blocksToHighlight.forEach((block) => {
const { color, blockId, userName, avatarUrl } = block;
const blockElement = getBlockElementById(
blockEditorDocument,
blockId
);
if (!blockElement) {
return;
}
blockElement.classList.remove("is-collaborator-selected");
blockElement.style.removeProperty("--collaborator-outline-color");
currentHighlightedIds.delete(blockId);
if (!isElementVisible(blockElement)) {
return;
}
const isNonTextBlock = !blockElement.innerText?.trim();
if (block.alwaysOutline || isNonTextBlock) {
blockElement.classList.add("is-collaborator-selected");
blockElement.style.setProperty(
"--collaborator-outline-color",
color
);
currentHighlightedIds.add(blockId);
}
if (overlayRect && !usersWithAvatar.has(block.userId)) {
usersWithAvatar.add(block.userId);
const blockRect = blockElement.getBoundingClientRect();
results.push({
blockId,
clientId: block.clientId,
userName,
avatarUrl,
color,
x: blockRect.left - overlayRect.left,
y: blockRect.top - overlayRect.top
});
}
});
setHighlights(results);
return () => {
for (const blockId of currentHighlightedIds) {
const el = getBlockElementById(blockEditorDocument, blockId);
if (el) {
el.classList.remove("is-collaborator-selected");
el.style.removeProperty("--collaborator-outline-color");
}
}
currentHighlightedIds.clear();
};
}, [
userStates,
blockEditorDocument,
overlayElement,
recomputeToken,
resizeToken,
resolveSelection
]);
return {
highlights,
rerenderHighlightsAfterDelay,
rerenderHighlightsOnResize
};
}
var getBlockElementById = (blockEditorDocument, blockId) => {
return blockEditorDocument.querySelector(`[data-block="${blockId}"]`);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
useBlockHighlighting
});
//# sourceMappingURL=use-block-highlighting.cjs.map