Extract clean title from first heading (#616)

* removed first-header-extractor
get first heading from markdown rende
* don't remove editor or renderer just hide them
this way both are always up to date and can be shown very fast
* extracted image alt attribute into first title. too
* added tests as suggested by @mrdrogdrog
This commit is contained in:
Philip Molares 2020-09-30 23:50:32 +02:00 committed by GitHub
parent 192f66d169
commit 1ab9b58031
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 47 deletions

View file

@ -8,7 +8,7 @@ import mathJax from 'markdown-it-mathjax'
import plantuml from 'markdown-it-plantuml'
import markdownItRegex from 'markdown-it-regex'
import toc from 'markdown-it-toc-done-right'
import React, { useCallback, useMemo, useRef, useState } from 'react'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Alert } from 'react-bootstrap'
import { Trans } from 'react-i18next'
import { useSelector } from 'react-redux'
@ -20,7 +20,6 @@ import { slugify } from '../editor/table-of-contents/table-of-contents'
import { RawYAMLMetadata, YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata'
import { BasicMarkdownRenderer } from './basic-markdown-renderer'
import { createRenderContainer, validAlertLevels } from './markdown-it-plugins/alert-container'
import { firstHeaderExtractor } from './markdown-it-plugins/first-header-extractor'
import { highlightedCode } from './markdown-it-plugins/highlighted-code'
import { LineMarkers, lineNumberMarker } from './markdown-it-plugins/line-number-marker'
import { plantumlError } from './markdown-it-plugins/plantuml-error'
@ -119,15 +118,28 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
const tocAst = useRef<TocAst>()
usePostTocAstOnChange(tocAst, onTocChange)
const configureMarkdownIt = useCallback((md: MarkdownIt): void => {
if (onFirstHeadingChange) {
md.use(firstHeaderExtractor(), {
firstHeaderFound: (firstHeader: string | undefined) => {
firstHeadingRef.current = firstHeader
}
})
const extractInnerText = useCallback((node: ChildNode) => {
let innerText = ''
if (node.childNodes && node.childNodes.length > 0) {
node.childNodes.forEach((child) => { innerText += extractInnerText(child) })
} else if (node.nodeName === 'IMG') {
innerText += (node as HTMLImageElement).getAttribute('alt')
} else {
innerText += node.textContent
}
return innerText
}, [])
useEffect(() => {
if (onFirstHeadingChange && documentElement.current) {
const firstHeading = documentElement.current.getElementsByTagName('h1').item(0)
if (firstHeading) {
onFirstHeadingChange(extractInnerText(firstHeading))
}
}
}, [content, extractInnerText, onFirstHeadingChange])
const configureMarkdownIt = useCallback((md: MarkdownIt): void => {
if (onMetaDataChange) {
md.use(frontmatter, (rawMeta: string) => {
try {
@ -210,7 +222,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
currentLineMarkers.current = lineMarkers
}
})
}, [onFirstHeadingChange, onMetaDataChange, plantumlServer])
}, [onMetaDataChange, plantumlServer])
const clearMetadata = useCallback(() => {
rawMetaRef.current = undefined