New Annotation
"${escapeHtml(truncatedQuote)}"
${handle[0]?.toUpperCase() || 'U'}
`;
}
})
.join('');
if (overflow > 0) {
html += `+${overflow}
`;
}
hoverIndicator.innerHTML = html;
const firstRect = firstRange.getClientRects()[0];
const totalWidth =
Math.min(uniqueAuthors.length, maxShow + (overflow > 0 ? 1 : 0)) * 18 + 8;
const leftPos = firstRect.left - totalWidth;
const topPos = firstRect.top + firstRect.height / 2 - 12;
hoverIndicator.style.left = `${leftPos}px`;
hoverIndicator.style.top = `${topPos}px`;
hoverIndicator.classList.add('visible');
}
} else {
document.body.style.cursor = '';
if (hoverIndicator) {
hoverIndicator.classList.remove('visible');
}
}
}
function handleDocumentClick(e: MouseEvent) {
if (!overlayEnabled || !overlayHost) return;
const x = e.clientX;
const y = e.clientY;
if (popoverEl) {
const rect = popoverEl.getBoundingClientRect();
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
return;
}
}
if (composeModal) {
const rect = composeModal.getBoundingClientRect();
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
return;
}
composeModal.remove();
composeModal = null;
}
const clickedItems: Annotation[] = [];
for (const { range, item } of activeItems) {
const rects = range.getClientRects();
for (const rect of rects) {
if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
let container: Node | null = range.commonAncestorContainer;
if (container.nodeType === Node.TEXT_NODE) {
container = container.parentNode;
}
if (
container &&
((e.target as Node).contains(container) || container.contains(e.target as Node))
) {
if (!clickedItems.includes(item)) {
clickedItems.push(item);
}
}
break;
}
}
}
if (clickedItems.length > 0) {
e.preventDefault();
e.stopPropagation();
if (popoverEl) {
const currentIds = popoverEl.dataset.itemIds;
const newIds = clickedItems
.map((i) => i.uri || i.id)
.sort()
.join(',');
if (currentIds === newIds) {
popoverEl.remove();
popoverEl = null;
return;
}
}
const firstItem = clickedItems[0];
const match = activeItems.find((x) => x.item === firstItem);
if (match) {
const rects = match.range.getClientRects();
if (rects.length > 0) {
const rect = rects[0];
const top = rect.top + window.scrollY;
const left = rect.left + window.scrollX;
showPopover(clickedItems, top, left);
}
}
} else {
if (popoverEl) {
popoverEl.remove();
popoverEl = null;
}
}
}
function showPopover(items: Annotation[], top: number, left: number) {
if (!shadowRoot) return;
if (popoverEl) popoverEl.remove();
const container = shadowRoot.getElementById('margin-overlay-container');
if (!container) return;
popoverEl = document.createElement('div');
popoverEl.className = 'margin-popover';
const ids = items
.map((i) => i.uri || i.id)
.sort()
.join(',');
popoverEl.dataset.itemIds = ids;
const popWidth = 320;
const screenWidth = window.innerWidth;
let finalLeft = left;
if (left + popWidth > screenWidth) finalLeft = screenWidth - popWidth - 20;
if (finalLeft < 10) finalLeft = 10;
popoverEl.style.top = `${top + 24}px`;
popoverEl.style.left = `${finalLeft}px`;
const count = items.length;
const title = count === 1 ? 'Annotation' : `Annotations`;
const contentHtml = items
.map((item) => {
const author = item.author || item.creator || {};
const handle = author.handle || 'User';
const avatar = author.avatar;
const text = item.body?.value || item.text || '';
const id = item.id || item.uri;
const isHighlight = (item as any).type === 'Highlight';
const createdAt = item.createdAt ? formatRelativeTime(item.createdAt) : '';
let avatarHtml = `${handle[0]?.toUpperCase() || 'U'}
`;
if (avatar) {
avatarHtml = `${Icons.highlightMarker} Highlighted
`;
} else {
bodyHtml = `${escapeHtml(text)}
`;
}
return `
${avatarHtml}
${bodyHtml}
${!isHighlight ? `` : ''}
${title} ${count}
${contentHtml}
`;
popoverEl.querySelector('.popover-close')?.addEventListener('click', (e) => {
e.stopPropagation();
popoverEl?.remove();
popoverEl = null;
});
popoverEl.querySelectorAll('.btn-reply').forEach((btn) => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const id = (btn as HTMLElement).getAttribute('data-id');
if (id) {
window.open(`${APP_URL}/annotation/${encodeURIComponent(id)}`, '_blank');
}
});
});
popoverEl.querySelectorAll('.btn-share').forEach((btn) => {
btn.addEventListener('click', async (e) => {
e.stopPropagation();
const id = (btn as HTMLElement).getAttribute('data-id');
const text = (btn as HTMLElement).getAttribute('data-text');
const url = `${APP_URL}/annotation/${encodeURIComponent(id || '')}`;
const shareText = text ? `${text}\n${url}` : url;
try {
await navigator.clipboard.writeText(shareText);
const originalHtml = btn.innerHTML;
btn.innerHTML = `${Icons.check} Copied!`;
setTimeout(() => (btn.innerHTML = originalHtml), 2000);
} catch (err) {
console.error('Failed to copy', err);
}
});
});
container.appendChild(popoverEl);
}
function formatRelativeTime(dateStr: string): string {
const date = new Date(dateStr);
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return 'just now';
if (diffMins < 60) return `${diffMins}m`;
if (diffHours < 24) return `${diffHours}h`;
if (diffDays < 7) return `${diffDays}d`;
return date.toLocaleDateString();
}
function escapeHtml(text: string): string {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
let lastUrl = window.location.href;
function checkUrlChange() {
if (window.location.href !== lastUrl) {
lastUrl = window.location.href;
onUrlChange();
}
}
function onUrlChange() {
if (typeof CSS !== 'undefined' && CSS.highlights) {
CSS.highlights.clear();
}
activeItems = [];
cachedMatcher = null;
sendMessage('updateBadge', { count: 0 });
if (overlayEnabled) {
setTimeout(() => fetchAnnotations(), 300);
}
}
window.addEventListener('popstate', onUrlChange);
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function (...args) {
originalPushState.apply(this, args);
checkUrlChange();
};
history.replaceState = function (...args) {
originalReplaceState.apply(this, args);
checkUrlChange();
};
setInterval(checkUrlChange, 500);
let domChangeTimeout: ReturnType