@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
118 lines (117 loc) • 3.78 kB
JavaScript
// packages/editor/src/components/collaborators-overlay/use-render-cursors.ts
import {
privateApis as coreDataPrivateApis,
SelectionType
} from "@wordpress/core-data";
import { useSelect } from "@wordpress/data";
import { useEffect, useState } from "@wordpress/element";
import { store as preferencesStore } from "@wordpress/preferences";
import { unlock } from "../../lock-unlock.mjs";
import { getAvatarUrl } from "./get-avatar-url.mjs";
import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
import { computeSelectionVisual } from "./compute-selection.mjs";
import { useDebouncedRecompute } from "./use-debounced-recompute.mjs";
var { useActiveCollaborators, useResolvedSelection } = unlock(coreDataPrivateApis);
function useRenderCursors(overlayElement, blockEditorDocument, postId, postType, delayMs) {
const sortedUsers = useActiveCollaborators(
postId ?? null,
postType ?? null
);
const resolveSelection = useResolvedSelection(
postId ?? null,
postType ?? null
);
const showOwnCursor = useSelect(
(select) => select(preferencesStore).get("core", "showCollaborationCursor"),
[]
);
const [cursorPositions, setCursorPositions] = useState(
[]
);
const [recomputeToken, rerenderCursorsAfterDelay] = useDebouncedRecompute(delayMs);
useEffect(() => {
if (!overlayElement || !blockEditorDocument) {
setCursorPositions([]);
return;
}
const overlayRect = overlayElement.getBoundingClientRect();
const overlayContext = {
editorDocument: blockEditorDocument,
overlayRect
};
const results = [];
const hasOtherCollaborators = sortedUsers.some(
(u) => !u.isMe
);
sortedUsers.forEach((user) => {
if (user.isMe && (!showOwnCursor || !hasOtherCollaborators)) {
return;
}
const selection = user.editorState?.selection ?? {
type: SelectionType.None
};
let start = {
richTextOffset: null,
localClientId: null
};
let end;
if (selection.type === SelectionType.Cursor) {
try {
start = resolveSelection(selection);
} catch {
return;
}
} else if (selection.type === SelectionType.SelectionInOneBlock || selection.type === SelectionType.SelectionInMultipleBlocks) {
try {
start = resolveSelection({
type: SelectionType.Cursor,
cursorPosition: selection.cursorStartPosition
});
end = resolveSelection({
type: SelectionType.Cursor,
cursorPosition: selection.cursorEndPosition
});
} catch {
return;
}
}
const userName = user.collaboratorInfo.name;
const clientId = user.clientId;
const color = user.isMe ? "var(--wp-admin-theme-color)" : getAvatarBorderColor(user.collaboratorInfo.id);
const avatarUrl = getAvatarUrl(user.collaboratorInfo.avatar_urls);
const selectionVisual = computeSelectionVisual(
selection,
start,
end,
overlayContext
);
if (selectionVisual.coords) {
const cursorData = {
userName,
clientId,
color,
avatarUrl,
isMe: user.isMe,
...selectionVisual.coords
};
if (selectionVisual.selectionRects) {
cursorData.selectionRects = selectionVisual.selectionRects;
}
results.push(cursorData);
}
});
setCursorPositions(results);
}, [
blockEditorDocument,
resolveSelection,
overlayElement,
sortedUsers,
showOwnCursor,
recomputeToken
]);
return { cursors: cursorPositions, rerenderCursorsAfterDelay };
}
export {
useRenderCursors
};
//# sourceMappingURL=use-render-cursors.mjs.map