diff --git a/dist/index.html b/dist/index.html index 6849bf82..bc2e69b5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,7 +5,7 @@ Boris - Nostr Bookmarks - + diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index 33036e08..504d7570 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -58,10 +58,17 @@ const ContentPanel: React.FC = ({ // Filter highlights by URL and visibility settings const relevantHighlights = useMemo(() => { + console.log('🔍 ContentPanel: Processing highlights', { + totalHighlights: highlights.length, + selectedUrl, + showHighlights + }) + const urlFiltered = filterHighlightsByUrl(highlights, selectedUrl) + console.log('📌 URL filtered highlights:', urlFiltered.length) // Apply visibility filtering - return urlFiltered + const filtered = urlFiltered .map(h => { // Classify highlight level let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse' @@ -78,7 +85,10 @@ const ContentPanel: React.FC = ({ if (h.level === 'friends') return highlightVisibility.friends return highlightVisibility.nostrverse }) - }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys]) + + console.log('✅ Relevant highlights after filtering:', filtered.length, filtered.map(h => h.content.substring(0, 30))) + return filtered + }, [selectedUrl, highlights, highlightVisibility, currentUserPubkey, followedPubkeys, showHighlights]) // Convert markdown to HTML when markdown content changes useEffect(() => { @@ -87,10 +97,16 @@ const ContentPanel: React.FC = ({ return } + console.log('📝 Converting markdown to HTML...') + // Use requestAnimationFrame to ensure ReactMarkdown has rendered const rafId = requestAnimationFrame(() => { if (markdownPreviewRef.current) { - setRenderedHtml(markdownPreviewRef.current.innerHTML) + const html = markdownPreviewRef.current.innerHTML + console.log('✅ Markdown converted to HTML:', html.length, 'chars') + setRenderedHtml(html) + } else { + console.warn('⚠️ markdownPreviewRef.current is null') } }) @@ -100,13 +116,30 @@ const ContentPanel: React.FC = ({ // Prepare the final HTML with highlights applied const finalHtml = useMemo(() => { const sourceHtml = markdown ? renderedHtml : html - if (!sourceHtml) return '' + + console.log('🎨 Preparing final HTML:', { + hasMarkdown: !!markdown, + hasHtml: !!html, + renderedHtmlLength: renderedHtml.length, + sourceHtmlLength: sourceHtml?.length || 0, + showHighlights, + relevantHighlightsCount: relevantHighlights.length + }) + + if (!sourceHtml) { + console.warn('⚠️ No source HTML available') + return '' + } // Apply highlights if we have them and highlights are enabled if (showHighlights && relevantHighlights.length > 0) { - return applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle) + console.log('✨ Applying', relevantHighlights.length, 'highlights to HTML') + const highlightedHtml = applyHighlightsToHTML(sourceHtml, relevantHighlights, highlightStyle) + console.log('✅ Highlights applied, result length:', highlightedHtml.length) + return highlightedHtml } + console.log('📄 Returning source HTML without highlights') return sourceHtml }, [html, renderedHtml, markdown, relevantHighlights, showHighlights, highlightStyle]) @@ -224,7 +257,8 @@ const ContentPanel: React.FC = ({ /> {markdown || html ? ( markdown ? ( - finalHtml ? ( + // For markdown, always use finalHtml once it's ready to ensure highlights are applied + renderedHtml && finalHtml ? (
= ({ onMouseUp={handleMouseUp} /> ) : ( -
- - {markdown} - + // Show loading state while markdown is being converted to HTML +
+
+ +
) ) : ( + // For HTML, use finalHtml directly
{ - if (!h.urlReference) return false + const filtered = highlights.filter(h => { + if (!h.urlReference) { + console.log('⚠️ Highlight has no urlReference:', h.id, 'eventReference:', h.eventReference) + return false + } const normalizedRef = normalizeUrl(h.urlReference) - return normalizedSelected === normalizedRef || + const matches = normalizedSelected === normalizedRef || normalizedSelected.includes(normalizedRef) || normalizedRef.includes(normalizedSelected) + + if (matches) { + console.log('✅ URL match:', normalizedRef) + } else { + console.log('❌ URL mismatch:', normalizedRef, 'vs', normalizedSelected) + } + + return matches }) + + console.log('📊 Filtered to', filtered.length, 'highlights') + return filtered }