fix regexes

src/components/Article/Article.Block.tsx

@@ -15,7 +15,6 @@ export const RenderArticleBlock = ({
 }: {
   block: UnbodyImageBlock | UnbodyTextBlock
 }) => {
-  console.log(block.__typename)
   switch (block.__typename) {
     case UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock:
       return (

src/components/Article/ArticleBody.tsx

@@ -12,6 +12,7 @@ import {
   UnbodyGoogleDoc,
   UnbodyImageBlock,
   UnbodyTextBlock,
+  UnbodyTocItem,
 } from '@/lib/unbody/unbody.types'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
 
@@ -20,7 +21,9 @@ import { ArticleImageBlockWrapper } from './Article.ImageBlockWrapper'
 import { getArticleCover, getContentBlocks } from '@/utils/data.utils'
 
 interface Props {
-  data: UnbodyGoogleDoc
+  data: UnbodyGoogleDoc & {
+    toc: UnbodyTocItem[]
+  }
 }
 
 export default function ArticleBody({ data }: Props) {
@@ -46,6 +49,7 @@ export default function ArticleBody({ data }: Props) {
   }, [blocks])
 
   const _blocks = useMemo(() => {
+    console.log(getContentBlocks(blocks))
     return getContentBlocks(blocks).map((block, idx) => (
       <RenderArticleBlock key={'block-' + idx} block={block} />
     ))
@@ -55,7 +59,6 @@ export default function ArticleBody({ data }: Props) {
     () =>
       toc?.length > 0 && (
         <Collapse className={styles.mobileToc} label="Contents">
-          {/* @ts-ignore */}
           {toc.map((toc, idx) => (
             <Content
               onClick={() => setTocIndex(idx)}
@@ -63,7 +66,7 @@ export default function ArticleBody({ data }: Props) {
               variant="body3"
               key={idx}
             >
-              {toc}
+              {toc.title}
             </Content>
           ))}
         </Collapse>

src/lib/unbody/unbody-content.types.ts

@@ -93,8 +93,13 @@ export namespace UnbodyGraphQl {
   }
 
   export namespace Fragments {
-    export interface TocItem {}
-
+    export interface TocItem {
+      tag: string
+      blockIndex: number
+      href: string
+      title: string
+      level: number
+    }
     export interface FootnoteItem {}
   }
 

src/lib/unbody/unbody.types.ts

@@ -6,6 +6,7 @@ export type UnbodyTextBlock = UnbodyGraphQl.TextBlock
 export type UnbodyImageBlock = UnbodyGraphQl.ImageBlock
 export type UnbodyAudio = UnbodyGraphQl.AudioFile
 export type UnbodyGetFilters = UnbodyGraphQl.Filters.GetDocsArgs
+export type UnbodyTocItem = UnbodyGraphQl.Fragments.TocItem
 
 export * as UnbodyGraphQl from './unbody-content.types'
 

src/utils/data.utils.ts

@@ -5,6 +5,11 @@ import {
 } from '@/lib/unbody/unbody.types'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
 
+function hasClassName(inputString: string, className: string) {
+  const regex = new RegExp(`class\\s*=\\s*"[^"]*\\b${className}\\b[^"]*"`)
+  return regex.test(inputString)
+}
+
 export const getContentBlocks = (
   blocks: (UnbodyImageBlock | UnbodyTextBlock)[],
 ) => {
@@ -13,8 +18,8 @@ export const getContentBlocks = (
       (b.__typename === UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock &&
         b.order !== 4) ||
       (b.__typename === UnbodyGraphQl.UnbodyDocumentTypeNames.TextBlock &&
-        b.html.indexOf(`class="subtitle"`) === -1 &&
-        b.html.indexOf(`class="title"`) === -1)
+        !hasClassName(b.html, 'subtitle') &&
+        !hasClassName(b.html, 'title'))
     )
   })
 }

src/utils/html.utils.ts

@@ -1,10 +1,23 @@
-const regexForInnerHtml = /<[^>]*>([^<]*)<\/[^>]*>/
+const regexForInnerHtml = /<[^>]*>/
+
+// const regexForInnerHtml = /<[^>]*>([^<]*)<\/[^>]*>/
 const regexForId = /id="([^"]*)"/
 const regexForClass = /class="([^"]*)"/
+//
+// export const extractInnerHtml = (html: string) => {
+//     const match = html.match(regexForInnerHtml)
+//     return match ? match[1] : html
+// }
 
-export const extractInnerHtml = (html: string) => {
-  const match = html.match(regexForInnerHtml)
-  return match ? match[1] : html
+export function extractInnerHtml(htmlString: string) {
+  var regex = /^<[^>]+>([\s\S]*)<\/[^>]+>$/
+  var match = regex.exec(htmlString)
+
+  if (match) {
+    return match[1]
+  } else {
+    return ''
+  }
 }
 
 export const extractIdFromFirstTag = (html: string) => {