MapComplete/src/UI/Base/TableOfContents.ts

import Combine from "./Combine"
import BaseUIElement from "../BaseUIElement"
import Title from "./Title"
import List from "./List"
import Link from "./Link"
import { marked } from "marked"
import { parse as parse_html } from "node-html-parser"
import {default as turndown} from "turndown"
import { Utils } from "../../Utils"

export default class TableOfContents {


    private static asLinkableId(text: string): string {
        return text
            ?.replace(/ /g, "-")
            ?.replace(/[?#.;:/]/, "")
            ?.toLowerCase() ?? ""
    }

    private static mergeLevel(
        elements: { level: number; content: BaseUIElement }[]
    ): BaseUIElement[] {
        const maxLevel = Math.max(...elements.map((e) => e.level))
        const minLevel = Math.min(...elements.map((e) => e.level))
        if (maxLevel === minLevel) {
            return elements.map((e) => e.content)
        }
        const result: { level: number; content: BaseUIElement }[] = []
        let running: BaseUIElement[] = []
        for (const element of elements) {
            if (element.level === maxLevel) {
                running.push(element.content)
                continue
            }
            if (running.length !== undefined) {
                result.push({
                    content: new List(running),
                    level: maxLevel - 1
                })
                running = []
            }
            result.push(element)
        }
        if (running.length !== undefined) {
            result.push({
                content: new List(running),
                level: maxLevel - 1
            })
        }

        return TableOfContents.mergeLevel(result)
    }

    public static insertTocIntoMd(md: string): string {
        const htmlSource = <string>marked.parse(md)
        const el = parse_html(htmlSource)
        const structure = TableOfContents.generateStructure(<any>el)
        let firstTitle = structure[1]
        let minDepth = undefined
        do {
            minDepth = Math.min(...structure.map(s => s.depth))
            const minDepthCount = structure.filter(s => s.depth === minDepth)
            if (minDepthCount.length > 1) {
                break
            }
            // Erase a single top level heading
            structure.splice(structure.findIndex(s => s.depth === minDepth), 1)
        } while (structure.length > 0)

        if (structure.length <= 1) {
            return md
        }
        const separators = {
            1: "  -",
            2: "    +",
            3: "       *"
        }

        let toc = ""
        let topLevelCount = 0
        for (const el of structure) {
            const depthDiff = el.depth - minDepth
            let link = `[${el.title}](#${TableOfContents.asLinkableId(el.title)})`
            if (depthDiff === 0) {
                topLevelCount++
                toc += `${topLevelCount}. ${link}\n`
            } else if (depthDiff <= 3) {
                toc += `${separators[depthDiff]} ${link}\n`
            }
        }

        const heading = Utils.Times(() => "#", firstTitle.depth)
        toc = heading +" Table of contents\n\n"+toc

        const original = el.outerHTML
        const firstTitleIndex = original.indexOf(firstTitle.el.outerHTML)
        const tocHtml = (<string>marked.parse(toc))
        const withToc = original.substring(0, firstTitleIndex) + tocHtml + original.substring(firstTitleIndex)

        const htmlToMd = new turndown()
        return htmlToMd.turndown(withToc)


    }

    public static generateStructure(html: Element): { depth: number, title: string, el: Element }[] {
        if (html === undefined) {
            return []
        }
        return [].concat(...Array.from(html.childNodes ?? []).map(
            child => {
                const tag: string = child["tagName"]?.toLowerCase()
                if (!tag) {
                    return []
                }
                if (tag.match(/h[0-9]/)) {
                    const depth = Number(tag.substring(1))
                    return [{ depth, title: child.textContent, el: child }]
                }
                return TableOfContents.generateStructure(<Element>child)
            }
        ))
    }
}