Move frontmatter extraction from renderer to redux (#1413)

This commit is contained in:
Erik Michelson 2021-09-02 11:15:31 +02:00 committed by GitHub
parent 7fb7c55877
commit 04e16d8880
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 680 additions and 589 deletions

View file

@ -7,7 +7,6 @@
import { TocAst } from 'markdown-it-toc-done-right'
import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
import useResizeObserver from 'use-resize-observer'
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
import { YamlArrayDeprecationAlert } from '../editor-page/renderer-pane/yaml-array-deprecation-alert'
import { useSyncedScrolling } from '../editor-page/synced-scroll/hooks/use-synced-scrolling'
import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
@ -17,10 +16,11 @@ import './markdown-document.scss'
import { WidthBasedTableOfContents } from './width-based-table-of-contents'
import { ShowIf } from '../common/show-if/show-if'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { RendererFrontmatterInfo } from '../common/note-frontmatter/types'
import { InvalidYamlAlert } from '../markdown-renderer/invalid-yaml-alert'
export interface RendererProps extends ScrollProps {
onFirstHeadingChange?: (firstHeading: string | undefined) => void
onFrontmatterChange?: (frontmatter: NoteFrontmatter | undefined) => void
onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
documentRenderPaneRef?: MutableRefObject<HTMLDivElement | null>
markdownContent: string
@ -33,13 +33,13 @@ export interface MarkdownDocumentProps extends RendererProps {
additionalRendererClasses?: string
disableToc?: boolean
baseUrl: string
frontmatterInfo?: RendererFrontmatterInfo
}
export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
additionalOuterContainerClasses,
additionalRendererClasses,
onFirstHeadingChange,
onFrontmatterChange,
onMakeScrollSource,
onTaskCheckedChange,
baseUrl,
@ -48,7 +48,8 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
onScroll,
scrollState,
onHeightChange,
disableToc
disableToc,
frontmatterInfo
}) => {
const rendererRef = useRef<HTMLDivElement | null>(null)
const rendererSize = useResizeObserver({ ref: rendererRef.current })
@ -85,19 +86,20 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
onMouseEnter={onMakeScrollSource}>
<div className={'markdown-document-side'} />
<div className={'markdown-document-content'}>
<YamlArrayDeprecationAlert />
<InvalidYamlAlert show={!!frontmatterInfo?.frontmatterInvalid} />
<YamlArrayDeprecationAlert show={!!frontmatterInfo?.deprecatedSyntax} />
<BasicMarkdownRenderer
outerContainerRef={rendererRef}
className={`mb-3 ${additionalRendererClasses ?? ''}`}
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={onLineMarkerPositionChanged}
onFrontmatterChange={onFrontmatterChange}
onTaskCheckedChange={onTaskCheckedChange}
onTocChange={setTocAst}
baseUrl={baseUrl}
onImageClick={onImageClick}
useAlternativeBreaks={useAlternativeBreaks}
frontmatterLineOffset={frontmatterInfo?.offsetLines}
/>
</div>
<div className={'markdown-document-side pt-4'}>