mirror of
https://github.com/dergigi/boris.git
synced 2026-02-08 00:24:46 +01:00
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:
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user