fix: split anchor tags from doc headlines

Author: tylandavis

src/components/RichText/Heading.tsx

@@ -12,16 +12,18 @@ export const Heading: React.FC<any> = ({ node, nodesToJSX }) => {
 
   const childrenText = node.children?.[0]?.text as string
 
-  const anchor = slugify(formatAnchor(childrenText))
+  const { label, tag } = formatAnchor(childrenText)
   const { addHeading } = useRichText()
 
+  const anchor = slugify(tag ?? label)
+
   useEffect(() => {
     addHeading(anchor, childrenText, 'secondary')
   }, [addHeading, anchor, childrenText])
 
   return (
     <JumplistNode id={anchor} type={node.tag.toLowerCase()}>
-      {children}
+      {children.length > 1 ? children : label}
     </JumplistNode>
   )
 }

src/components/RichText/formatAnchor.ts

@@ -24,13 +24,21 @@ const flattenChildren: (value: { props: { children: any } } | string) => string
   return value.props.children
 }
 
-export const formatAnchor: (children: string | string[]) => string = (children) => {
+export const formatAnchor: (children: string | string[]) => {
+  label: string
+  tag?: string | undefined
+} = (children) => {
   if (Array.isArray(children)) {
-    return children.map(flattenChildren).join('')
+    return {
+      label: children.map(flattenChildren).join(''),
+    }
   }
 
   if (typeof children === 'string' && children.includes('#')) {
-    return children.split('#')[1]
+    return {
+      label: children.split('#')[0],
+      tag: children.split('#')[1],
+    }
   }
-  return flattenChildren(children)
+  return { label: flattenChildren(children) }
 }