diff --git a/src/common/components/post-body-lazy-renderer.tsx b/src/common/components/post-body-lazy-renderer.tsx index b768558fca6..920986af348 100644 --- a/src/common/components/post-body-lazy-renderer.tsx +++ b/src/common/components/post-body-lazy-renderer.tsx @@ -8,9 +8,13 @@ interface Props { className?: string; } +interface Line { + element: Element; + hash: string; +} + export function PostBodyLazyRenderer({ rawBody, className }: Props) { - const [result, setResult] = useState([]); - const [hashes, setHashes] = useState([]); + const [lines, setLines] = useState([]); const { global } = useMappedStore(); useEffect(() => { @@ -25,32 +29,23 @@ export function PostBodyLazyRenderer({ rawBody, className }: Props) { const tree = document.createElement("div"); tree.innerHTML = renderedBody; - const nextHashes: string[] = []; - const linesToRender: number[] = []; - const nextLines: Element[] = []; + const nextLines: Line[] = []; for (let i = 0; i < tree.children.length; i++) { - const child = tree.children.item(i)!!; - - const hash = md5(child.innerHTML); - const existingHash = hashes[i]; + const element = tree.children.item(i)!!; - if (hash !== existingHash) { - linesToRender.push(i); - } + const hash = md5(element.outerHTML + `index-${i}`); - nextHashes.push(hash); - nextLines.push(child); + nextLines.push({ element, hash }); } - setHashes(nextHashes); - setResult(nextLines); + setLines(nextLines); }; return (
- {result.map((line, i) => ( -
+ {lines.map(({ element, hash }) => ( +
))}
);