mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-04 08:49:59 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add toc sidebar+dropdown (#272)

Browse source 
* Replace markdown-it-table-of-contents with markdown-it-toc-done-right

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Philip Molares <philip.molares@udo.edu>

Extract render window code

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Philip Molares <philip.molares@udo.edu>

add new package

fix stickyness

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

show toc sidebar only if there is enough space

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

* add min height class

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

* Move markdown toc into own component

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

* add sidebar buttons

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

* Use other button color

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

* Change name of component

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

* Fix merge issues and make toc work again

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

* pin dependencies

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

* remove blank line

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

* pin dependency

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

* Fix anchors

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

* Add use memo

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

* Add change log entry for removal of custom slugify
This commit is contained in:
mrdrogdrog 2020-06-29 17:51:40 +02:00 • committed by GitHub
parent 8ab7776a82
commit 50b04c8403
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 505 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/components/editor/markdown-toc/markdown-toc.tsx Normal file
View file

@ -0,0 +1,59 @@
import React, { Fragment, ReactElement, useMemo } from 'react'
import { TocAst } from '../../../external-types/markdown-it-toc-done-right/interface'
import { slugify } from '../../../utils/slugify'
import { ShowIf } from '../../common/show-if/show-if'
import './markdown-toc.scss'
export interface MarkdownTocProps {
ast: TocAst
maxDepth?: number
sticky?: boolean
}
const convertLevel = (toc: TocAst, levelsToShowUnderThis: number, headerCounts: Map<string, number>, wrapInListItem: boolean): ReactElement | null => {
if (levelsToShowUnderThis < 0) {
return null
}
const rawName = toc.n.trim()
const nameCount = (headerCounts.get(rawName) ?? 0) + 1
const slug = `#${slugify(rawName)}${nameCount > 1 ? `-${nameCount}` : ''}`
headerCounts.set(rawName, nameCount)
const content = (
<Fragment>
<ShowIf condition={toc.l > 0}>
<a href={slug}>{rawName}</a>
</ShowIf>
<ShowIf condition={toc.c.length > 0}>
<ul>
{
toc.c.map(child =>
(convertLevel(child, levelsToShowUnderThis - 1, headerCounts, true)))
}
</ul>
</ShowIf>
</Fragment>
)
if (wrapInListItem) {
return (
<li key={slug}>
{content}
</li>
)
} else {
return content
}
}
export const MarkdownToc: React.FC<MarkdownTocProps> = ({ ast, maxDepth = 3, sticky }) => {
const tocTree = useMemo(() => convertLevel(ast, maxDepth, new Map<string, number>(), false), [ast, maxDepth])
return (
<div className={`markdown-toc ${sticky ? 'sticky' : ''}`}>
{tocTree}
</div>
)
}