Add YAML-metadata for notes and change the document title accordingly (#310)

* Added yaml-frontmatter extracting and error handling
* add tests
* changed document-title, so the editor can change the title to the title of the yaml metadata. closes #303
* extracted first line parsing in a core rule of markdown-it
document title will now be determined like this:
1. yaml metadata title
2. opengraph title
3. first level one heading
4. 'Untitled'
* added documentTitle e2e test

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Philip Molares <philip@mauricedoepke.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>
This commit is contained in:
Philip Molares 2020-07-18 22:17:36 +02:00 committed by GitHub
parent 07fed5c67e
commit 29709d2ba4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 499 additions and 20 deletions

View file

@ -6,13 +6,16 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { ShowIf } from '../../common/show-if/show-if'
import { MarkdownRenderer } from '../markdown-renderer/markdown-renderer'
import { MarkdownToc } from '../markdown-toc/markdown-toc'
import { YAMLMetaData } from '../yaml-metadata/yaml-metadata'
interface RenderWindowProps {
content: string
onMetadataChange: (metaData: YAMLMetaData | undefined) => void
onFirstHeadingChange: (firstHeading: string | undefined) => void
wide?: boolean
}
export const MarkdownRenderWindow: React.FC<RenderWindowProps> = ({ content, wide }) => {
export const MarkdownRenderWindow: React.FC<RenderWindowProps> = ({ content, onMetadataChange, onFirstHeadingChange, wide }) => {
const [tocAst, setTocAst] = useState<TocAst>()
const renderer = useRef<HTMLDivElement>(null)
const { width } = useResizeObserver({ ref: renderer })
@ -26,7 +29,10 @@ export const MarkdownRenderWindow: React.FC<RenderWindowProps> = ({ content, wid
className={'flex-fill'}
content={content}
wide={wide}
onTocChange={(tocAst) => setTocAst(tocAst)}/>
onTocChange={(tocAst) => setTocAst(tocAst)}
onMetaDataChange={onMetadataChange}
onFirstHeadingChange={onFirstHeadingChange}
/>
<div className={`col-md d-flex flex-column ${realWidth < 1280 ? 'justify-content-end' : ''}`}>
<ShowIf condition={realWidth >= 1280 && !!tocAst}>