mirror of
https://github.com/dergigi/boris.git
synced 2026-01-30 04:04:42 +01:00
fix: ensure highlights always render on markdown content
- Add logic to wait for HTML conversion when highlights need to be applied - Prevent rendering plain markdown when highlights are pending - Show ReactMarkdown fallback only when no highlights need to be applied - Fixes default article highlights not showing
This commit is contained in:
@@ -74,6 +74,10 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
|
||||
return sourceHtml
|
||||
}, [html, renderedHtml, markdown, relevantHighlights, showUnderlines, highlightStyle])
|
||||
|
||||
// Check if we need to wait for HTML conversion
|
||||
const needsHtmlConversion = markdown && !renderedHtml
|
||||
const shouldShowContent = !needsHtmlConversion || relevantHighlights.length === 0
|
||||
|
||||
// Attach click handlers to highlight marks
|
||||
useEffect(() => {
|
||||
if (!onHighlightClick || !contentRef.current) return
|
||||
@@ -184,24 +188,24 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
|
||||
</div>
|
||||
)}
|
||||
{markdown || html ? (
|
||||
finalHtml ? (
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={markdown ? "reader-markdown" : "reader-html"}
|
||||
dangerouslySetInnerHTML={{ __html: finalHtml }}
|
||||
/>
|
||||
) : markdown ? (
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="reader-markdown"
|
||||
>
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<div className={markdown ? "reader-markdown" : "reader-html"} ref={contentRef} />
|
||||
)
|
||||
finalHtml || (markdown && shouldShowContent) ? (
|
||||
finalHtml ? (
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={markdown ? "reader-markdown" : "reader-html"}
|
||||
dangerouslySetInnerHTML={{ __html: finalHtml }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="reader-markdown"
|
||||
>
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)
|
||||
) : null
|
||||
) : (
|
||||
<div className="reader empty">
|
||||
<p>No readable content found for this URL.</p>
|
||||
|
||||
Reference in New Issue
Block a user