fix(reader): wire preview ref to markdown conversion hook

- Update useMarkdownToHTML to return {renderedHtml, previewRef}
- Use returned previewRef in ContentPanel hidden markdown preview
- Resolves article markdown not rendering instantly
This commit is contained in:
Gigi
2025-10-07 22:16:31 +01:00
parent a9847a8848
commit 0c3e697df6
2 changed files with 9 additions and 13 deletions

View File

@@ -1,4 +1,4 @@
import React, { useMemo, useRef } from 'react'
import React, { useMemo } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -52,9 +52,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
onTextSelection,
onClearSelection
}) => {
const markdownPreviewRef = useRef<HTMLDivElement>(null)
const renderedMarkdownHtml = useMarkdownToHTML(markdown)
const { renderedHtml: renderedMarkdownHtml, previewRef: markdownPreviewRef } = useMarkdownToHTML(markdown)
const { finalHtml, relevantHighlights } = useHighlightedContent({
html,

View File

@@ -1,10 +1,10 @@
import { useState, useEffect, useRef } from 'react'
import React, { useState, useEffect, useRef } from 'react'
/**
* Hook to convert markdown to HTML using a hidden ReactMarkdown component
*/
export const useMarkdownToHTML = (markdown?: string): string => {
const markdownPreviewRef = useRef<HTMLDivElement>(null)
export const useMarkdownToHTML = (markdown?: string): { renderedHtml: string, previewRef: React.RefObject<HTMLDivElement> } => {
const previewRef = useRef<HTMLDivElement>(null)
const [renderedHtml, setRenderedHtml] = useState<string>('')
useEffect(() => {
@@ -16,8 +16,8 @@ export const useMarkdownToHTML = (markdown?: string): string => {
console.log('📝 Converting markdown to HTML...')
const rafId = requestAnimationFrame(() => {
if (markdownPreviewRef.current) {
const html = markdownPreviewRef.current.innerHTML
if (previewRef.current) {
const html = previewRef.current.innerHTML
console.log('✅ Markdown converted to HTML:', html.length, 'chars')
setRenderedHtml(html)
} else {
@@ -28,10 +28,8 @@ export const useMarkdownToHTML = (markdown?: string): string => {
return () => cancelAnimationFrame(rafId)
}, [markdown])
return renderedHtml
return { renderedHtml, previewRef }
}
export const useMarkdownPreviewRef = () => {
return useRef<HTMLDivElement>(null)
}
// Removed separate useMarkdownPreviewRef; use useMarkdownToHTML to obtain previewRef