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

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

frontend/package.json

@@ -48,7 +48,7 @@
     "@fontsource/source-sans-pro": "4.5.11",
     "@hedgedoc/commons": "workspace:commons",
     "@hedgedoc/html-to-react": "1.4.5",
-    "@hedgedoc/markdown-it-plugins": "1.0.0",
+    "@hedgedoc/markdown-it-plugins": "2.0.0",
     "@mrdrogdrog/optional": "1.0.0",
     "@react-hook/resize-observer": "1.2.6",
     "@redux-devtools/core": "3.13.1",
@@ -97,7 +97,6 @@
     "markdown-it-regex": "0.2.0",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",
-    "markdown-it-toc-done-right": "4.2.0",
     "mermaid": "9.2.2",
     "next": "13.0.6",
     "react": "18.2.0",

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

yarn.lock

@@ -2340,7 +2340,7 @@ __metadata:
     "@fontsource/source-sans-pro": 4.5.11
     "@hedgedoc/commons": "workspace:commons"
     "@hedgedoc/html-to-react": 1.4.5
-    "@hedgedoc/markdown-it-plugins": 1.0.0
+    "@hedgedoc/markdown-it-plugins": 2.0.0
     "@mrdrogdrog/optional": 1.0.0
     "@next/bundle-analyzer": 13.0.6
     "@react-hook/resize-observer": 1.2.6
@@ -2429,7 +2429,6 @@ __metadata:
     markdown-it-regex: 0.2.0
     markdown-it-sub: 1.0.0
     markdown-it-sup: 1.0.0
-    markdown-it-toc-done-right: 4.2.0
     mermaid: 9.2.2
     next: 13.0.6
     prettier: 2.8.1
@@ -2478,12 +2477,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hedgedoc/markdown-it-plugins@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@hedgedoc/markdown-it-plugins@npm:1.0.0"
+"@hedgedoc/markdown-it-plugins@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@hedgedoc/markdown-it-plugins@npm:2.0.0"
   peerDependencies:
     markdown-it: ">=12"
-  checksum: d8536d548d370d7c81a67fbf666d3e2bcedd5774fd933f3e1a3f432b7d2007b5d7c1790685a33e5a443d66648d5d0e8269c3e507d367c247b821679deba89407
+  checksum: 07e79bb239310cc0957d8e7fd00237eb3713566b8ec0de934a78b1c9f1bda75e625de3d9e1d3c6ab2329532580675b006692b3d3558a5e5b46da255d53bceaa2
   languageName: node
   linkType: hard
 
@@ -13318,13 +13317,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-it-toc-done-right@npm:4.2.0":
-  version: 4.2.0
-  resolution: "markdown-it-toc-done-right@npm:4.2.0"
-  checksum: 1f6a88a5591ee21fda87aa64ba814e099f5a69f57affdfc222c176959871279907367f18dce962b10e076c6aa61938e137471fdc1dc622327e02b4a6a593c04f
-  languageName: node
-  linkType: hard
-
 "markdown-it@npm:13.0.1":
   version: 13.0.1
   resolution: "markdown-it@npm:13.0.1"