fix(frontend): migrate TOC to @hedgedoc/markdown-it-plugins

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/editor-page/table-of-contents/table-of-contents.test.tsx

@@ -5,8 +5,8 @@
  */
 import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n'
 import { TableOfContents } from './table-of-contents'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import { render } from '@testing-library/react'
-import type { TocAst } from 'markdown-it-toc-done-right'
 
 describe('Table of contents', () => {
   beforeAll(async () => {
@@ -14,29 +14,29 @@ describe('Table of contents', () => {
   })
 
   const level4Ast: TocAst = {
-    n: 'Level 4',
-    l: 4,
-    c: []
+    name: 'Level 4',
+    level: 4,
+    children: []
   }
   const level3Ast: TocAst = {
-    n: 'Level 3',
-    l: 3,
-    c: [level4Ast]
+    name: 'Level 3',
+    level: 3,
+    children: [level4Ast]
   }
   const level2Ast: TocAst = {
-    n: 'Level 2',
-    l: 2,
-    c: [level3Ast]
+    name: 'Level 2',
+    level: 2,
+    children: [level3Ast]
   }
   const level1Ast: TocAst = {
-    n: 'Level 1',
-    l: 1,
-    c: [level2Ast]
+    name: 'Level 1',
+    level: 1,
+    children: [level2Ast]
   }
   const level0Ast: TocAst = {
-    n: '',
-    l: 0,
-    c: [level1Ast]
+    name: '',
+    level: 0,
+    children: [level1Ast]
   }
 
   it('renders correctly', () => {

frontend/src/components/editor-page/table-of-contents/table-of-contents.tsx

@@ -6,7 +6,7 @@
 import { ShowIf } from '../../common/show-if/show-if'
 import styles from './table-of-contents.module.scss'
 import { useBuildReactDomFromTocAst } from './use-build-react-dom-from-toc-ast'
-import type { TocAst } from 'markdown-it-toc-done-right'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -31,7 +31,7 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({ ast, maxDepth
 
   return (
     <div className={`${styles['markdown-toc']} ${className ?? ''}`}>
-      <ShowIf condition={ast.c.length === 0}>
+      <ShowIf condition={ast.children.length === 0}>
         <Trans i18nKey={'editor.infoToc'} />
       </ShowIf>
       {tocTree}

frontend/src/components/editor-page/table-of-contents/use-build-react-dom-from-toc-ast.tsx

@@ -6,7 +6,7 @@
 import { ShowIf } from '../../common/show-if/show-if'
 import { JumpAnchor } from '../../markdown-renderer/extensions/link-replacer/jump-anchor'
 import { tocSlugify } from './toc-slugify'
-import type { TocAst } from 'markdown-it-toc-done-right'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import type { ReactElement } from 'react'
 import React, { Fragment, useMemo } from 'react'
 
@@ -28,21 +28,21 @@ const buildReactDomFromTocAst = (
     return null
   }
 
-  const rawName = toc.n.trim()
+  const rawName = toc.name.trim()
   const nameCount = (headerCounts.get(rawName) ?? -1) + 1
   const slug = `#${tocSlugify(rawName)}${nameCount > 0 ? `-${nameCount}` : ''}`
   const headlineUrl = new URL(slug, baseUrl).toString()
 
   headerCounts.set(rawName, nameCount)
 
-  const children = toc.c
+  const children = toc.children
     .map((child) => buildReactDomFromTocAst(child, levelsToShowUnderThis - 1, headerCounts, baseUrl))
     .filter((value) => !!value)
     .map((child, index) => <li key={index}>{child}</li>)
 
   return (
     <Fragment>
-      <ShowIf condition={toc.l > 0}>
+      <ShowIf condition={toc.level > 0}>
         <JumpAnchor href={headlineUrl} title={rawName} jumpTargetId={slug.slice(1)}>
           {rawName}
         </JumpAnchor>