|
|
|
@ -75,7 +75,6 @@ |
|
|
|
async function fetchHighlights() { |
|
|
|
async function fetchHighlights() { |
|
|
|
// Prevent concurrent fetches |
|
|
|
// Prevent concurrent fetches |
|
|
|
if (loading) { |
|
|
|
if (loading) { |
|
|
|
console.log("[HighlightLayer] Already loading, skipping fetch"); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -99,10 +98,6 @@ |
|
|
|
// AI-NOTE: Mock mode allows testing highlight UI without publishing to relays |
|
|
|
// AI-NOTE: Mock mode allows testing highlight UI without publishing to relays |
|
|
|
// This is useful for development and demonstrating the highlight system |
|
|
|
// This is useful for development and demonstrating the highlight system |
|
|
|
if (useMockHighlights) { |
|
|
|
if (useMockHighlights) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] MOCK MODE - Generating mock highlights for ${allAddresses.length} sections`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
// Generate mock highlight data |
|
|
|
// Generate mock highlight data |
|
|
|
const mockHighlights = generateMockHighlightsForSections(allAddresses); |
|
|
|
const mockHighlights = generateMockHighlightsForSections(allAddresses); |
|
|
|
@ -112,9 +107,6 @@ |
|
|
|
(rawEvent) => new NDKEventClass(ndk, rawEvent), |
|
|
|
(rawEvent) => new NDKEventClass(ndk, rawEvent), |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Generated ${highlights.length} mock highlights`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
loading = false; |
|
|
|
loading = false; |
|
|
|
return; |
|
|
|
return; |
|
|
|
} catch (err) { |
|
|
|
} catch (err) { |
|
|
|
@ -127,11 +119,6 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Fetching highlights for:`, { |
|
|
|
|
|
|
|
eventIds: allEventIds, |
|
|
|
|
|
|
|
addresses: allAddresses, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
// Build filter for kind 9802 highlight events |
|
|
|
// Build filter for kind 9802 highlight events |
|
|
|
// IMPORTANT: Use only #a tags because filters are AND, not OR |
|
|
|
// IMPORTANT: Use only #a tags because filters are AND, not OR |
|
|
|
@ -149,11 +136,6 @@ |
|
|
|
filter["#e"] = allEventIds; |
|
|
|
filter["#e"] = allEventIds; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Fetching with filter:`, |
|
|
|
|
|
|
|
JSON.stringify(filter, null, 2), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Build explicit relay set (same pattern as HighlightSelectionHandler and CommentButton) |
|
|
|
// Build explicit relay set (same pattern as HighlightSelectionHandler and CommentButton) |
|
|
|
const relays = [ |
|
|
|
const relays = [ |
|
|
|
...communityRelays, |
|
|
|
...communityRelays, |
|
|
|
@ -161,10 +143,6 @@ |
|
|
|
...$activeInboxRelays, |
|
|
|
...$activeInboxRelays, |
|
|
|
]; |
|
|
|
]; |
|
|
|
const uniqueRelays = Array.from(new Set(relays)); |
|
|
|
const uniqueRelays = Array.from(new Set(relays)); |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Fetching from ${uniqueRelays.length} relays:`, |
|
|
|
|
|
|
|
uniqueRelays, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* Use WebSocketPool with nostr-tools protocol instead of NDK |
|
|
|
* Use WebSocketPool with nostr-tools protocol instead of NDK |
|
|
|
@ -186,30 +164,41 @@ |
|
|
|
|
|
|
|
|
|
|
|
const fetchPromises = uniqueRelays.map(async (relayUrl) => { |
|
|
|
const fetchPromises = uniqueRelays.map(async (relayUrl) => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
console.log(`[HighlightLayer] Connecting to ${relayUrl}`); |
|
|
|
|
|
|
|
const ws = await WebSocketPool.instance.acquire(relayUrl); |
|
|
|
const ws = await WebSocketPool.instance.acquire(relayUrl); |
|
|
|
|
|
|
|
|
|
|
|
return new Promise<void>((resolve) => { |
|
|
|
return new Promise<void>((resolve) => { |
|
|
|
|
|
|
|
let released = false; |
|
|
|
|
|
|
|
let resolved = false; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const releaseConnection = () => { |
|
|
|
|
|
|
|
if (released) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
released = true; |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) { |
|
|
|
|
|
|
|
ws.send(JSON.stringify(["CLOSE", subscriptionId])); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
ws.removeEventListener("message", messageHandler); |
|
|
|
|
|
|
|
WebSocketPool.instance.release(ws); |
|
|
|
|
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
console.error(`[HighlightLayer] Error releasing connection to ${relayUrl}:`, err); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const safeResolve = () => { |
|
|
|
|
|
|
|
if (!resolved) { |
|
|
|
|
|
|
|
resolved = true; |
|
|
|
|
|
|
|
resolve(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const messageHandler = (event: MessageEvent) => { |
|
|
|
const messageHandler = (event: MessageEvent) => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
const message = JSON.parse(event.data); |
|
|
|
const message = JSON.parse(event.data); |
|
|
|
|
|
|
|
|
|
|
|
// Log ALL messages from relay.nostr.band for debugging |
|
|
|
|
|
|
|
if (relayUrl.includes("relay.nostr.band")) { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] RAW message from ${relayUrl}:`, |
|
|
|
|
|
|
|
message, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (message[0] === "EVENT" && message[1] === subscriptionId) { |
|
|
|
if (message[0] === "EVENT" && message[1] === subscriptionId) { |
|
|
|
const rawEvent = message[2]; |
|
|
|
const rawEvent = message[2]; |
|
|
|
console.log(`[HighlightLayer] EVENT from ${relayUrl}:`, { |
|
|
|
|
|
|
|
id: rawEvent.id, |
|
|
|
|
|
|
|
kind: rawEvent.kind, |
|
|
|
|
|
|
|
content: rawEvent.content.substring(0, 50), |
|
|
|
|
|
|
|
tags: rawEvent.tags, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Avoid duplicates |
|
|
|
// Avoid duplicates |
|
|
|
if (!receivedEventIds.has(rawEvent.id)) { |
|
|
|
if (!receivedEventIds.has(rawEvent.id)) { |
|
|
|
@ -218,29 +207,16 @@ |
|
|
|
// Convert to NDKEvent |
|
|
|
// Convert to NDKEvent |
|
|
|
const ndkEvent = new NDKEventClass(ndk, rawEvent); |
|
|
|
const ndkEvent = new NDKEventClass(ndk, rawEvent); |
|
|
|
highlights = [...highlights, ndkEvent]; |
|
|
|
highlights = [...highlights, ndkEvent]; |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Added highlight, total now: ${highlights.length}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} else if ( |
|
|
|
} else if ( |
|
|
|
message[0] === "EOSE" && |
|
|
|
message[0] === "EOSE" && |
|
|
|
message[1] === subscriptionId |
|
|
|
message[1] === subscriptionId |
|
|
|
) { |
|
|
|
) { |
|
|
|
eoseCount++; |
|
|
|
eoseCount++; |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] EOSE from ${relayUrl} (${eoseCount}/${uniqueRelays.length})`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Close subscription |
|
|
|
// Close subscription and release connection |
|
|
|
ws.send(JSON.stringify(["CLOSE", subscriptionId])); |
|
|
|
releaseConnection(); |
|
|
|
ws.removeEventListener("message", messageHandler); |
|
|
|
safeResolve(); |
|
|
|
WebSocketPool.instance.release(ws); |
|
|
|
|
|
|
|
resolve(); |
|
|
|
|
|
|
|
} else if (message[0] === "NOTICE") { |
|
|
|
|
|
|
|
console.warn( |
|
|
|
|
|
|
|
`[HighlightLayer] NOTICE from ${relayUrl}:`, |
|
|
|
|
|
|
|
message[1], |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
} catch (err) { |
|
|
|
console.error( |
|
|
|
console.error( |
|
|
|
@ -254,24 +230,12 @@ |
|
|
|
|
|
|
|
|
|
|
|
// Send REQ |
|
|
|
// Send REQ |
|
|
|
const req = ["REQ", subscriptionId, filter]; |
|
|
|
const req = ["REQ", subscriptionId, filter]; |
|
|
|
if (relayUrl.includes("relay.nostr.band")) { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Sending REQ to ${relayUrl}:`, |
|
|
|
|
|
|
|
JSON.stringify(req), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Sending REQ to ${relayUrl}`); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
ws.send(JSON.stringify(req)); |
|
|
|
ws.send(JSON.stringify(req)); |
|
|
|
|
|
|
|
|
|
|
|
// Timeout per relay (5 seconds) |
|
|
|
// Timeout per relay (5 seconds) |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
if (ws.readyState === WebSocket.OPEN) { |
|
|
|
releaseConnection(); |
|
|
|
ws.send(JSON.stringify(["CLOSE", subscriptionId])); |
|
|
|
safeResolve(); |
|
|
|
ws.removeEventListener("message", messageHandler); |
|
|
|
|
|
|
|
WebSocketPool.instance.release(ws); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(); |
|
|
|
|
|
|
|
}, 5000); |
|
|
|
}, 5000); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} catch (err) { |
|
|
|
} catch (err) { |
|
|
|
@ -285,19 +249,6 @@ |
|
|
|
// Wait for all relays to respond or timeout |
|
|
|
// Wait for all relays to respond or timeout |
|
|
|
await Promise.all(fetchPromises); |
|
|
|
await Promise.all(fetchPromises); |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Fetched ${highlights.length} highlights`); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (highlights.length > 0) { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Highlights summary:`, |
|
|
|
|
|
|
|
highlights.map((h) => ({ |
|
|
|
|
|
|
|
content: h.content.substring(0, 30) + "...", |
|
|
|
|
|
|
|
address: h.tags.find((t) => t[0] === "a")?.[1], |
|
|
|
|
|
|
|
author: h.pubkey.substring(0, 8), |
|
|
|
|
|
|
|
})), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
loading = false; |
|
|
|
loading = false; |
|
|
|
|
|
|
|
|
|
|
|
// Rendering is handled by the visibility/highlights effect |
|
|
|
// Rendering is handled by the visibility/highlights effect |
|
|
|
@ -321,9 +272,6 @@ |
|
|
|
targetAddress?: string, |
|
|
|
targetAddress?: string, |
|
|
|
): boolean { |
|
|
|
): boolean { |
|
|
|
if (!containerRef) { |
|
|
|
if (!containerRef) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Cannot highlight by position - no containerRef`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
return false; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -333,30 +281,10 @@ |
|
|
|
const sectionElement = document.getElementById(targetAddress); |
|
|
|
const sectionElement = document.getElementById(targetAddress); |
|
|
|
if (sectionElement) { |
|
|
|
if (sectionElement) { |
|
|
|
searchRoot = sectionElement; |
|
|
|
searchRoot = sectionElement; |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Highlighting in specific section: ${targetAddress}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Section ${targetAddress} not found in DOM, searching globally`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
return highlightByOffset(searchRoot, offsetStart, offsetEnd, color); |
|
|
|
`[HighlightLayer] Applying position-based highlight ${offsetStart}-${offsetEnd}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
const result = highlightByOffset(searchRoot, offsetStart, offsetEnd, color); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (result) { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Successfully applied position-based highlight`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Failed to apply position-based highlight`); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return result; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
@ -371,9 +299,6 @@ |
|
|
|
targetAddress?: string, |
|
|
|
targetAddress?: string, |
|
|
|
): void { |
|
|
|
): void { |
|
|
|
if (!containerRef || !text || text.trim().length === 0) { |
|
|
|
if (!containerRef || !text || text.trim().length === 0) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Cannot highlight - containerRef: ${!!containerRef}, text: "${text}"`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -383,21 +308,9 @@ |
|
|
|
const sectionElement = document.getElementById(targetAddress); |
|
|
|
const sectionElement = document.getElementById(targetAddress); |
|
|
|
if (sectionElement) { |
|
|
|
if (sectionElement) { |
|
|
|
searchRoot = sectionElement; |
|
|
|
searchRoot = sectionElement; |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Searching in specific section: ${targetAddress}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Section ${targetAddress} not found in DOM, searching globally`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Searching for text: "${text}" in`, |
|
|
|
|
|
|
|
searchRoot, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Use TreeWalker to find all text nodes |
|
|
|
// Use TreeWalker to find all text nodes |
|
|
|
const walker = document.createTreeWalker( |
|
|
|
const walker = document.createTreeWalker( |
|
|
|
searchRoot, |
|
|
|
searchRoot, |
|
|
|
@ -412,22 +325,11 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Search for the highlight text in text nodes |
|
|
|
// Search for the highlight text in text nodes |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Searching through ${textNodes.length} text nodes`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (const textNode of textNodes) { |
|
|
|
for (const textNode of textNodes) { |
|
|
|
const nodeText = textNode.textContent || ""; |
|
|
|
const nodeText = textNode.textContent || ""; |
|
|
|
const index = nodeText.toLowerCase().indexOf(text.toLowerCase()); |
|
|
|
const index = nodeText.toLowerCase().indexOf(text.toLowerCase()); |
|
|
|
|
|
|
|
|
|
|
|
if (index !== -1) { |
|
|
|
if (index !== -1) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Found match in text node:`, |
|
|
|
|
|
|
|
nodeText.substring( |
|
|
|
|
|
|
|
Math.max(0, index - 20), |
|
|
|
|
|
|
|
Math.min(nodeText.length, index + text.length + 20), |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
const parent = textNode.parentNode; |
|
|
|
const parent = textNode.parentNode; |
|
|
|
if (!parent) continue; |
|
|
|
if (!parent) continue; |
|
|
|
|
|
|
|
|
|
|
|
@ -459,44 +361,26 @@ |
|
|
|
|
|
|
|
|
|
|
|
parent.replaceChild(fragment, textNode); |
|
|
|
parent.replaceChild(fragment, textNode); |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Highlighted text:`, match); |
|
|
|
|
|
|
|
return; // Only highlight first occurrence to avoid multiple highlights |
|
|
|
return; // Only highlight first occurrence to avoid multiple highlights |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] No match found for text: "${text}"`); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* Render all highlights on the page |
|
|
|
* Render all highlights on the page |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
function renderHighlights() { |
|
|
|
function renderHighlights() { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] renderHighlights called - visible: ${visible}, containerRef: ${!!containerRef}, highlights: ${highlights.length}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!visible || !containerRef) { |
|
|
|
if (!visible || !containerRef) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Skipping render - visible: ${visible}, containerRef: ${!!containerRef}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (highlights.length === 0) { |
|
|
|
if (highlights.length === 0) { |
|
|
|
console.log(`[HighlightLayer] No highlights to render`); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Clear existing highlights |
|
|
|
// Clear existing highlights |
|
|
|
clearHighlights(); |
|
|
|
clearHighlights(); |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Rendering ${highlights.length} highlights`); |
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Container element:`, containerRef); |
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Container has children:`, |
|
|
|
|
|
|
|
containerRef.children.length, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Apply each highlight |
|
|
|
// Apply each highlight |
|
|
|
for (const highlight of highlights) { |
|
|
|
for (const highlight of highlights) { |
|
|
|
const content = highlight.content; |
|
|
|
const content = highlight.content; |
|
|
|
@ -511,42 +395,19 @@ |
|
|
|
const hasOffset = |
|
|
|
const hasOffset = |
|
|
|
offsetTag && offsetTag[1] !== undefined && offsetTag[2] !== undefined; |
|
|
|
offsetTag && offsetTag[1] !== undefined && offsetTag[2] !== undefined; |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Rendering highlight:`, { |
|
|
|
|
|
|
|
hasOffset, |
|
|
|
|
|
|
|
offsetTag, |
|
|
|
|
|
|
|
content: content.substring(0, 50), |
|
|
|
|
|
|
|
contentLength: content.length, |
|
|
|
|
|
|
|
targetAddress, |
|
|
|
|
|
|
|
color, |
|
|
|
|
|
|
|
allTags: highlight.tags, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (hasOffset) { |
|
|
|
if (hasOffset) { |
|
|
|
// Use position-based highlighting |
|
|
|
// Use position-based highlighting |
|
|
|
const offsetStart = parseInt(offsetTag[1], 10); |
|
|
|
const offsetStart = parseInt(offsetTag[1], 10); |
|
|
|
const offsetEnd = parseInt(offsetTag[2], 10); |
|
|
|
const offsetEnd = parseInt(offsetTag[2], 10); |
|
|
|
|
|
|
|
|
|
|
|
if (!isNaN(offsetStart) && !isNaN(offsetEnd)) { |
|
|
|
if (!isNaN(offsetStart) && !isNaN(offsetEnd)) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Using position-based highlighting: ${offsetStart}-${offsetEnd}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
highlightByPosition(offsetStart, offsetEnd, color, targetAddress); |
|
|
|
highlightByPosition(offsetStart, offsetEnd, color, targetAddress); |
|
|
|
} else { |
|
|
|
} else if (content && content.trim().length > 0) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Invalid offset values, falling back to text search`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
if (content && content.trim().length > 0) { |
|
|
|
|
|
|
|
findAndHighlightText(content, color, targetAddress); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// Fall back to text-based highlighting |
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Using text-based highlighting`); |
|
|
|
|
|
|
|
if (content && content.trim().length > 0) { |
|
|
|
|
|
|
|
findAndHighlightText(content, color, targetAddress); |
|
|
|
findAndHighlightText(content, color, targetAddress); |
|
|
|
} else { |
|
|
|
|
|
|
|
console.log(`[HighlightLayer] Skipping highlight - empty content`); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} else if (content && content.trim().length > 0) { |
|
|
|
|
|
|
|
// Fall back to text-based highlighting |
|
|
|
|
|
|
|
findAndHighlightText(content, color, targetAddress); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -575,10 +436,6 @@ |
|
|
|
parent.normalize(); |
|
|
|
parent.normalize(); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Cleared ${highlightElements.length} highlights`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Track the last fetched event count to know when to refetch |
|
|
|
// Track the last fetched event count to know when to refetch |
|
|
|
@ -590,10 +447,6 @@ |
|
|
|
const currentCount = eventIds.length + eventAddresses.length; |
|
|
|
const currentCount = eventIds.length + eventAddresses.length; |
|
|
|
const hasEventData = currentCount > 0; |
|
|
|
const hasEventData = currentCount > 0; |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Event data effect - count: ${currentCount}, lastFetched: ${lastFetchedCount}, loading: ${loading}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Only fetch if: |
|
|
|
// Only fetch if: |
|
|
|
// 1. We have event data |
|
|
|
// 1. We have event data |
|
|
|
// 2. The count has changed since last fetch |
|
|
|
// 2. The count has changed since last fetch |
|
|
|
@ -606,9 +459,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
// Debounce: wait 500ms for more events to arrive before fetching |
|
|
|
// Debounce: wait 500ms for more events to arrive before fetching |
|
|
|
fetchTimeout = setTimeout(() => { |
|
|
|
fetchTimeout = setTimeout(() => { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Event data stabilized at ${currentCount} events, fetching highlights...`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
lastFetchedCount = currentCount; |
|
|
|
lastFetchedCount = currentCount; |
|
|
|
fetchHighlights(); |
|
|
|
fetchHighlights(); |
|
|
|
}, 500); |
|
|
|
}, 500); |
|
|
|
@ -626,14 +476,8 @@ |
|
|
|
$effect(() => { |
|
|
|
$effect(() => { |
|
|
|
// This effect runs when either visible or highlights.length changes |
|
|
|
// This effect runs when either visible or highlights.length changes |
|
|
|
const highlightCount = highlights.length; |
|
|
|
const highlightCount = highlights.length; |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Visibility/highlights effect - visible: ${visible}, highlights: ${highlightCount}`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (visible && highlightCount > 0) { |
|
|
|
if (visible && highlightCount > 0) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Both visible and highlights ready, rendering...`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
renderHighlights(); |
|
|
|
renderHighlights(); |
|
|
|
} else if (!visible) { |
|
|
|
} else if (!visible) { |
|
|
|
clearHighlights(); |
|
|
|
clearHighlights(); |
|
|
|
@ -653,9 +497,6 @@ |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
async function fetchAuthorProfiles() { |
|
|
|
async function fetchAuthorProfiles() { |
|
|
|
const uniquePubkeys = Array.from(groupedHighlights.keys()); |
|
|
|
const uniquePubkeys = Array.from(groupedHighlights.keys()); |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Fetching profiles for ${uniquePubkeys.length} authors`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (const pubkey of uniquePubkeys) { |
|
|
|
for (const pubkey of uniquePubkeys) { |
|
|
|
try { |
|
|
|
try { |
|
|
|
@ -693,27 +534,17 @@ |
|
|
|
* Scroll to a specific highlight in the document |
|
|
|
* Scroll to a specific highlight in the document |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
function scrollToHighlight(highlight: NDKEvent) { |
|
|
|
function scrollToHighlight(highlight: NDKEvent) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] scrollToHighlight called for:`, |
|
|
|
|
|
|
|
highlight.content.substring(0, 50), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!containerRef) { |
|
|
|
if (!containerRef) { |
|
|
|
console.warn(`[HighlightLayer] No containerRef available`); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const content = highlight.content; |
|
|
|
const content = highlight.content; |
|
|
|
if (!content || content.trim().length === 0) { |
|
|
|
if (!content || content.trim().length === 0) { |
|
|
|
console.warn(`[HighlightLayer] No content in highlight`); |
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Find the highlight mark element |
|
|
|
// Find the highlight mark element |
|
|
|
const highlightMarks = containerRef.querySelectorAll("mark.highlight"); |
|
|
|
const highlightMarks = containerRef.querySelectorAll("mark.highlight"); |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Found ${highlightMarks.length} highlight marks in DOM`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Try exact match first |
|
|
|
// Try exact match first |
|
|
|
for (const mark of highlightMarks) { |
|
|
|
for (const mark of highlightMarks) { |
|
|
|
@ -721,9 +552,6 @@ |
|
|
|
const searchText = content.toLowerCase(); |
|
|
|
const searchText = content.toLowerCase(); |
|
|
|
|
|
|
|
|
|
|
|
if (markText === searchText) { |
|
|
|
if (markText === searchText) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Found exact match, scrolling and flashing`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
// Scroll to this element |
|
|
|
// Scroll to this element |
|
|
|
mark.scrollIntoView({ behavior: "smooth", block: "center" }); |
|
|
|
mark.scrollIntoView({ behavior: "smooth", block: "center" }); |
|
|
|
|
|
|
|
|
|
|
|
@ -742,9 +570,6 @@ |
|
|
|
const searchText = content.toLowerCase(); |
|
|
|
const searchText = content.toLowerCase(); |
|
|
|
|
|
|
|
|
|
|
|
if (markText.includes(searchText) || searchText.includes(markText)) { |
|
|
|
if (markText.includes(searchText) || searchText.includes(markText)) { |
|
|
|
console.log( |
|
|
|
|
|
|
|
`[HighlightLayer] Found partial match, scrolling and flashing`, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
mark.scrollIntoView({ behavior: "smooth", block: "center" }); |
|
|
|
mark.scrollIntoView({ behavior: "smooth", block: "center" }); |
|
|
|
mark.classList.add("highlight-flash"); |
|
|
|
mark.classList.add("highlight-flash"); |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
@ -753,11 +578,6 @@ |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
console.warn( |
|
|
|
|
|
|
|
`[HighlightLayer] Could not find highlight mark for:`, |
|
|
|
|
|
|
|
content.substring(0, 50), |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
@ -770,7 +590,6 @@ |
|
|
|
try { |
|
|
|
try { |
|
|
|
await navigator.clipboard.writeText(naddr); |
|
|
|
await navigator.clipboard.writeText(naddr); |
|
|
|
copyFeedback = highlight.id; |
|
|
|
copyFeedback = highlight.id; |
|
|
|
console.log(`[HighlightLayer] Copied naddr to clipboard:`, naddr); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Clear feedback after 2 seconds |
|
|
|
// Clear feedback after 2 seconds |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
@ -792,8 +611,6 @@ |
|
|
|
* Public method to refresh highlights (e.g., after creating a new one) |
|
|
|
* Public method to refresh highlights (e.g., after creating a new one) |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
export function refresh() { |
|
|
|
export function refresh() { |
|
|
|
console.log("[HighlightLayer] Manual refresh triggered"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Clear existing highlights |
|
|
|
// Clear existing highlights |
|
|
|
highlights = []; |
|
|
|
highlights = []; |
|
|
|
clearHighlights(); |
|
|
|
clearHighlights(); |
|
|
|
|
silberengel
3 months ago