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>

frontend/src/components/markdown-renderer/extensions/table-of-contents-markdown-extension.ts

@@ -5,10 +5,10 @@
  */
 import { tocSlugify } from '../../editor-page/table-of-contents/toc-slugify'
 import { MarkdownRendererExtension } from './base/markdown-renderer-extension'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
+import { toc } from '@hedgedoc/markdown-it-plugins'
 import equal from 'fast-deep-equal'
 import type MarkdownIt from 'markdown-it'
-import type { TocAst } from 'markdown-it-toc-done-right'
-import toc from 'markdown-it-toc-done-right'
 
 /**
  * Adds table of content to the markdown rendering.
@@ -19,10 +19,9 @@ export class TableOfContentsMarkdownExtension extends MarkdownRendererExtension
 
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
     toc(markdownIt, {
-      placeholder: '(\\[TOC\\]|\\[toc\\])',
       listType: 'ul',
       level: [1, 2, 3],
-      callback: (code: string, ast: TocAst): void => {
+      callback: (ast: TocAst): void => {
         if (equal(ast, this.lastAst)) {
           return
         }

frontend/src/components/render-page/document-toc-sidebar.tsx

@@ -8,7 +8,7 @@ import { TableOfContentsMarkdownExtension } from '../markdown-renderer/extension
 import { useExtensionEventEmitterHandler } from '../markdown-renderer/hooks/use-extension-event-emitter'
 import styles from './markdown-document.module.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'
-import type { TocAst } from 'markdown-it-toc-done-right'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import React, { useState } from 'react'
 
 export interface DocumentTocSidebarProps {

frontend/src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx

@@ -6,7 +6,7 @@
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { TableOfContents } from '../../editor-page/table-of-contents/table-of-contents'
 import styles from './markdown-toc-button.module.scss'
-import type { TocAst } from 'markdown-it-toc-done-right'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
 

frontend/src/components/render-page/width-based-table-of-contents.tsx

@@ -5,7 +5,7 @@
  */
 import { TableOfContents } from '../editor-page/table-of-contents/table-of-contents'
 import { TableOfContentsHoveringButton } from './markdown-toc-button/table-of-contents-hovering-button'
-import type { TocAst } from 'markdown-it-toc-done-right'
+import type { TocAst } from '@hedgedoc/markdown-it-plugins'
 import React from 'react'
 
 export interface DocumentExternalTocProps {

frontend/src/extensions/extra-integrations/task-list/task-list-markdown-extension.ts

@@ -6,7 +6,7 @@
 import { MarkdownRendererExtension } from '../../../components/markdown-renderer/extensions/base/markdown-renderer-extension'
 import type { ComponentReplacer } from '../../../components/markdown-renderer/replace-components/component-replacer'
 import { TaskListReplacer } from './task-list-replacer'
-import { tasksLists } from '@hedgedoc/markdown-it-plugins'
+import { taskLists } from '@hedgedoc/markdown-it-plugins'
 import type MarkdownIt from 'markdown-it'
 
 /**
@@ -14,7 +14,7 @@ import type MarkdownIt from 'markdown-it'
  */
 export class TaskListMarkdownExtension extends MarkdownRendererExtension {
   public configureMarkdownIt(markdownIt: MarkdownIt): void {
-    tasksLists(markdownIt, {
+    taskLists(markdownIt, {
       enabled: true,
       label: true,
       lineNumber: true