Added TOC and anchors for headings (#243)

* Added TOC support and anchors for headings

* Moved @types/markdown-it-anchor from devDependencies to dependencies

* Add subnode renderer

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Added node-replacer for toc generation

ul lists may not be nested inside a p element. Therefore replaces this replacer every p that has a div.table-of-contents inside of it with the div directly.

* Add index to replacer function

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Add TOC to example code

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Remove unused import

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Removed unnecessary div wrapper of toc

* Fixed toc-renderer

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Erik Michelson 2020-06-21 14:04:37 +02:00 committed by GitHub
parent cb2ea5fa6e
commit fd378cf89b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 93 additions and 13 deletions

View file

@ -14,7 +14,7 @@ interface resizeEvent {
id: string
}
const getElementReplacement:ComponentReplacer = (node, counterMap) => {
const getElementReplacement:ComponentReplacer = (node, index:number, counterMap) => {
const attributes = getAttributesFromCodiMdTag(node, 'gist')
if (attributes && attributes.id) {
const gistId = attributes.id

View file

@ -5,7 +5,7 @@ import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import './pdf-frame.scss'
const getElementReplacement = (node: DomElement, counterMap: Map<string, number>): (ReactElement | undefined) => {
const getElementReplacement = (node: DomElement, index:number, counterMap: Map<string, number>): (ReactElement | undefined) => {
const attributes = getAttributesFromCodiMdTag(node, 'pdf')
if (attributes && attributes.url) {
const pdfUrl = attributes.url

View file

@ -0,0 +1,17 @@
import { DomElement } from 'domhandler'
import { ReactElement } from 'react'
import { SubNodeConverter } from '../../markdown-renderer'
const getElementReplacement = (node: DomElement, index: number, counterMap: Map<string, number>, nodeConverter: SubNodeConverter): (ReactElement | undefined) => {
if (node.name === 'p' && node.children && node.children.length === 1) {
const possibleTocDiv = node.children[0]
if (possibleTocDiv.name === 'div' && possibleTocDiv.attribs && possibleTocDiv.attribs.class &&
possibleTocDiv.attribs.class === 'table-of-contents' && possibleTocDiv.children && possibleTocDiv.children.length === 1) {
const listElement = possibleTocDiv.children[0]
listElement.attribs = Object.assign(listElement.attribs || {}, { class: 'table-of-contents' })
return nodeConverter(listElement, index)
}
}
}
export { getElementReplacement as getTOCReplacement }

View file

@ -3,7 +3,7 @@ import { ComponentReplacer } from '../../markdown-renderer'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
const getElementReplacement:ComponentReplacer = (node, counterMap) => {
const getElementReplacement:ComponentReplacer = (node, index:number, counterMap) => {
const attributes = getAttributesFromCodiMdTag(node, 'vimeo')
if (attributes && attributes.id) {
const videoId = attributes.id

View file

@ -3,7 +3,7 @@ import { ComponentReplacer } from '../../markdown-renderer'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
const getElementReplacement: ComponentReplacer = (node, counterMap) => {
const getElementReplacement: ComponentReplacer = (node, index:number, counterMap) => {
const attributes = getAttributesFromCodiMdTag(node, 'youtube')
if (attributes && attributes.id) {
const videoId = attributes.id