@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
148 lines (147 loc) • 4.66 kB
JavaScript
// packages/editor/src/components/collab-sidebar/utils.js
import { _x } from "@wordpress/i18n";
function sanitizeNoteContent(str) {
return str.trim();
}
var THREAD_ALIGN_OFFSET = -16;
var THREAD_GAP = 16;
var OVERLAP_MARGIN = 20;
var AVATAR_BORDER_COLORS = [
"#C36EFF",
// Purple
"#FF51A8",
// Pink
"#E4780A",
// Orange
"#FF35EE",
// Magenta
"#879F11",
// Olive
"#46A494",
// Teal
"#00A2C3"
// Cyan
];
function getAvatarBorderColor(userId) {
return AVATAR_BORDER_COLORS[userId % AVATAR_BORDER_COLORS.length];
}
function getNoteExcerpt(text, excerptLength = 10) {
if (!text) {
return "";
}
const wordCountType = _x("words", "Word count type. Do not translate!");
const rawText = text.trim();
let trimmedExcerpt = "";
if (wordCountType === "words") {
trimmedExcerpt = rawText.split(" ", excerptLength).join(" ");
} else if (wordCountType === "characters_excluding_spaces") {
const textWithSpaces = rawText.split("", excerptLength).join("");
const numberOfSpaces = textWithSpaces.length - textWithSpaces.replaceAll(" ", "").length;
trimmedExcerpt = rawText.split("", excerptLength + numberOfSpaces).join("");
} else if (wordCountType === "characters_including_spaces") {
trimmedExcerpt = rawText.split("", excerptLength).join("");
}
const isTrimmed = trimmedExcerpt !== rawText;
return isTrimmed ? trimmedExcerpt + "\u2026" : trimmedExcerpt;
}
function calculateNotePositions({
threads,
selectedNoteId,
blockRects,
heights,
scrollTop = 0
}) {
const offsets = {};
const anchorIndex = Math.max(
0,
threads.findIndex((thread) => thread.id === selectedNoteId)
);
const anchorThread = threads[anchorIndex];
if (!anchorThread || !blockRects[anchorThread.id]) {
return { positions: {} };
}
const anchorRect = blockRects[anchorThread.id];
const anchorTop = anchorRect.top || 0;
const anchorHeight = heights[anchorThread.id] || 0;
offsets[anchorThread.id] = THREAD_ALIGN_OFFSET;
let prevAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
let prevHeight = anchorHeight;
for (let i = anchorIndex + 1; i < threads.length; i++) {
const thread = threads[i];
const threadRect = blockRects[thread.id];
if (!threadRect) {
continue;
}
const threadTop = threadRect.top || 0;
const threadHeight = heights[thread.id] || 0;
let offset = THREAD_ALIGN_OFFSET;
const prevBottom = prevAdjustedTop + prevHeight;
if (threadTop < prevBottom + THREAD_GAP) {
offset = prevBottom - threadTop + OVERLAP_MARGIN;
}
offsets[thread.id] = offset;
prevAdjustedTop = threadTop + offset;
prevHeight = threadHeight;
}
let belowAdjustedTop = anchorTop + THREAD_ALIGN_OFFSET;
for (let i = anchorIndex - 1; i >= 0; i--) {
const thread = threads[i];
const threadRect = blockRects[thread.id];
if (!threadRect) {
continue;
}
const threadTop = threadRect.top || 0;
const threadHeight = heights[thread.id] || 0;
let offset = THREAD_ALIGN_OFFSET;
const threadBottom = threadTop + threadHeight;
if (threadBottom > belowAdjustedTop) {
offset = belowAdjustedTop - threadTop - threadHeight - OVERLAP_MARGIN;
}
offsets[thread.id] = offset;
belowAdjustedTop = threadTop + offset;
}
const positions = {};
for (const thread of threads) {
const blockRect = blockRects[thread.id];
if (blockRect && offsets[thread.id] !== void 0) {
positions[thread.id] = blockRect.top + scrollTop + offsets[thread.id];
}
}
return { positions };
}
function focusNoteThread(noteId, container, additionalSelector) {
if (!container) {
return;
}
const threadSelector = noteId && noteId !== "new" ? `[role=treeitem][id="note-thread-${noteId}"]` : "[role=treeitem]:not([id])";
const selector = additionalSelector ? `${threadSelector} ${additionalSelector}` : threadSelector;
return new Promise((resolve) => {
if (container.querySelector(selector)) {
return resolve(container.querySelector(selector));
}
let timer = null;
const observer = new window.MutationObserver(() => {
if (container.querySelector(selector)) {
clearTimeout(timer);
observer.disconnect();
resolve(container.querySelector(selector));
}
});
observer.observe(container, {
childList: true,
subtree: true
});
timer = setTimeout(() => {
observer.disconnect();
resolve(null);
}, 3e3);
}).then((element) => element?.focus());
}
export {
calculateNotePositions,
focusNoteThread,
getAvatarBorderColor,
getNoteExcerpt,
sanitizeNoteContent
};
//# sourceMappingURL=utils.mjs.map