fix: fix anchor links position in article page; closes #175

src/components/Article/Article.Block.tsx

@@ -11,7 +11,7 @@ import { Quote, Typography } from '@acid-info/lsd-react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
-import React from 'react'
+import React, { useMemo } from 'react'
 import ReactPlayer from 'react-player'
 import { LPE } from '../../types/lpe.types'
 import { ArticleImageBlockWrapper } from './Article.ImageBlockWrapper'
@@ -25,9 +25,11 @@ export const RenderArticleBlock = ({
   headingElementsRef?: HeadingElementsRef
   hide?: boolean
 }) => {
+  const content = useMemo(() => {
     switch (block.type) {
       case 'image':
         return <ArticleImageBlockWrapper image={block} order={block.order} />
+
       case 'text':
         switch (block.tagName) {
           case 'h1':
@@ -36,12 +38,7 @@ export const RenderArticleBlock = ({
           case 'h4':
           case 'h5':
           case 'h6': {
-          return (
-            <ArticleHeading
-              block={block}
-              headingElementsRef={headingElementsRef}
-            />
-          )
+            return <ArticleHeading block={block} />
           }
           case 'p': {
             const isIframe = block.embed && block.labels.includes('embed')
@@ -65,11 +62,7 @@ export const RenderArticleBlock = ({
               block.classNames.includes('u-with-margin-left')
             ) {
               return (
-              <Quote
-                mode="indented-line"
-                genericFontFamily="serif"
-                id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
-              >
+                <Quote mode="indented-line" genericFontFamily="serif">
                   <Paragraph
                     variant="body1"
                     dangerouslySetInnerHTML={{
@@ -89,11 +82,12 @@ export const RenderArticleBlock = ({
                   extractClassFromFirstTag(block.html),
                   block.classNames,
                 )}
-              id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
                 css={css`
                   ${extractAttributeFromHTML(block.html, 'style', '')}
                 `}
-              dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }}
+                dangerouslySetInnerHTML={{
+                  __html: extractInnerHtml(block.html),
+                }}
               />
             )
           }
@@ -107,7 +101,6 @@ export const RenderArticleBlock = ({
                 variant="body1"
                 component="div"
                 genericFontFamily="sans-serif"
-              id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
               >
                 <Component
                   start={Number.parseInt(
@@ -140,14 +133,42 @@ export const RenderArticleBlock = ({
                   extractClassFromFirstTag(block.html),
                   block.classNames,
                 )}
-              id={extractIdFromFirstTag(block.html) || `p-${block.order}`}
-              dangerouslySetInnerHTML={{ __html: extractInnerHtml(block.html) }}
+                dangerouslySetInnerHTML={{
+                  __html: extractInnerHtml(block.html),
+                }}
               />
             )
         }
       default:
         return null
     }
+  }, [block])
+
+  const elementId = useMemo(
+    () =>
+      (block.type === 'text' && extractIdFromFirstTag(block.html)) ||
+      `${block.type === 'image' ? 'i' : block.tagName}-${block.order}`,
+    [block],
+  )
+
+  return (
+    <>
+      <span
+        className="anchor"
+        id={elementId}
+        ref={(el) => {
+          if (
+            headingElementsRef &&
+            el &&
+            block.type === 'text' &&
+            ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(block.tagName)
+          )
+            headingElementsRef.current[elementId] = el as HTMLHeadingElement
+        }}
+      />
+      {content}
+    </>
+  )
 }
 
 const Paragraph = styled(Typography)`

src/components/Article/Article.Heading.tsx

@@ -1,9 +1,4 @@
-import {
-  extractClassFromFirstTag,
-  extractIdFromFirstTag,
-  extractInnerHtml,
-} from '@/utils/html.utils'
-import { HeadingElementsRef } from '@/utils/ui.utils'
+import { extractClassFromFirstTag, extractInnerHtml } from '@/utils/html.utils'
 import { Typography, TypographyProps } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { PropsWithChildren } from 'react'
@@ -12,28 +7,10 @@ import { lsdUtils } from '../../utils/lsd.utils'
 
 type Props = PropsWithChildren<{
   block: LPE.Article.TextBlock
-  headingElementsRef?: HeadingElementsRef
   typographyProps?: TypographyProps
 }>
-export const ArticleHeading = ({
-  block,
-  headingElementsRef,
-  typographyProps,
-  ...props
-}: Props) => {
-  const id =
-    extractIdFromFirstTag(block.html) || `${block.tagName}-${block.order}`
-  const refProp = {
-    ref: (ref: any) => {
-      if (headingElementsRef) {
-        headingElementsRef.current[id] = ref
-      }
-    },
-  }
-
+export const ArticleHeading = ({ block, typographyProps, ...props }: Props) => {
   return (
-    <>
-      <span className="anchor" id={id} {...refProp} />
     <Headline
       variant={block.tagName as any}
       component={block.tagName as any}
@@ -43,7 +20,6 @@ export const ArticleHeading = ({
       {...(typographyProps || {})}
       {...props}
     />
-    </>
   )
 }