124 lines
3.7 KiB
JavaScript
124 lines
3.7 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const documentPath = document.querySelector('[data-document-path]')?.dataset.documentPath;
|
|
const documentHash = document.querySelector('[data-document-hash]')?.dataset.documentHash;
|
|
const documentId = documentPath ? 'doc:' + documentPath.replace(/\.md$/, '') : null;
|
|
|
|
if (!documentId) return;
|
|
|
|
// Hash a paragraph's text content for anchoring
|
|
function hashParagraph(el) {
|
|
const text = (el.textContent || '').trim();
|
|
if (!text) return null;
|
|
// Simple hash: first 16 chars of base64 of char codes (deterministic)
|
|
let hash = 0;
|
|
for (let i = 0; i < text.length; i++) {
|
|
const char = text.charCodeAt(i);
|
|
hash = ((hash << 5) - hash) + char;
|
|
hash = hash & hash;
|
|
}
|
|
return 'h' + Math.abs(hash).toString(36);
|
|
}
|
|
|
|
function addCommentButton(el, hash) {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'comment-anchor-btn';
|
|
btn.title = 'Add comment';
|
|
btn.innerHTML = '+';
|
|
btn.addEventListener('click', () => promptComment(el, hash));
|
|
el.appendChild(btn);
|
|
}
|
|
|
|
async function promptComment(el, anchorHash) {
|
|
const text = window.prompt('Comment on this paragraph:');
|
|
if (!text || !text.trim()) return;
|
|
|
|
try {
|
|
const res = await fetch('/api/comments', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
documentId,
|
|
versionHash: documentHash,
|
|
content: text.trim(),
|
|
anchorHash,
|
|
}),
|
|
});
|
|
if (!res.ok) throw new Error(await res.text());
|
|
// Refresh comments display
|
|
await loadCommentsForAnchor(el, anchorHash);
|
|
} catch (err) {
|
|
window.alert('Failed to post comment: ' + err.message);
|
|
}
|
|
}
|
|
|
|
async function loadCommentsForAnchor(el, anchorHash) {
|
|
try {
|
|
const res = await fetch(`/api/comments?document_id=${encodeURIComponent(documentId)}&anchor_hash=${encodeURIComponent(anchorHash)}`);
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
renderComments(el, data.comments || []);
|
|
} catch (err) {
|
|
console.error('load comments', err);
|
|
}
|
|
}
|
|
|
|
function renderComments(el, comments) {
|
|
// Remove existing comment list
|
|
const existing = el.querySelector('.comment-list');
|
|
if (existing) existing.remove();
|
|
|
|
if (!comments.length) return;
|
|
|
|
const list = document.createElement('div');
|
|
list.className = 'comment-list';
|
|
comments.forEach(c => {
|
|
const item = document.createElement('div');
|
|
item.className = 'comment-item';
|
|
item.innerHTML = `
|
|
<div class="comment-meta">
|
|
<strong>${escapeHtml(c.authorName || 'Anonymous')}</strong>
|
|
<time>${formatDate(c.createdAt)}</time>
|
|
</div>
|
|
<div class="comment-body">${escapeHtml(c.content)}</div>
|
|
`;
|
|
list.appendChild(item);
|
|
});
|
|
el.appendChild(list);
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function formatDate(iso) {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
// Initialize: hash all paragraphs in markdown body
|
|
function init() {
|
|
const body = document.querySelector('.markdown-body');
|
|
if (!body) return;
|
|
|
|
const paragraphs = body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, blockquote, pre');
|
|
paragraphs.forEach(el => {
|
|
const hash = hashParagraph(el);
|
|
if (!hash) return;
|
|
el.dataset.anchorHash = hash;
|
|
el.classList.add('commentable');
|
|
addCommentButton(el, hash);
|
|
loadCommentsForAnchor(el, hash);
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|