import { slugify } from "helpers/formatters"; import { Immutable } from "helpers/types"; import { useRouter } from "next/router"; import { preprocessMarkDawn } from "./Markdawn"; interface Props { text: string; title?: string; } export function TOC(props: Immutable): JSX.Element { const { text, title } = props; const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title); const router = useRouter(); return ( <>

Table of content

router.replace(`#${toc.slug}`)}> {{toc.title}}

); } interface LevelProps { tocchildren: TOCInterface[]; parentNumbering: string; } function TOCLevel(props: LevelProps): JSX.Element { const router = useRouter(); const { tocchildren, parentNumbering } = props; return (
    {tocchildren.map((child, childIndex) => ( <>
  1. {`${parentNumbering}${ childIndex + 1 }.`}{" "} router.replace(`#${child.slug}`)}> {{child.title}}
  2. ))}
); } interface TOCInterface { title: string; slug: string; children: TOCInterface[]; } export function getTocFromMarkdawn(text: string, title?: string): TOCInterface { const toc: TOCInterface = { title: title ?? "Return to top", slug: slugify(title), children: [], }; let h2 = -1; let h3 = -1; let h4 = -1; let h5 = -1; let scenebreak = 0; let scenebreakIndex = 0; function getTitle(line: string): string { return line.slice(line.indexOf(`">`) + 2, line.indexOf("`)); } text.split("\n").map((line) => { if (line.startsWith("