Improvement/move document content into redux (#691)

This commit is contained in:
mrdrogdrog 2020-10-28 22:15:00 +01:00 committed by GitHub
parent 0750695e2f
commit 1690a7bdcf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 101 additions and 51 deletions

View file

@ -1,7 +1,9 @@
import React, { RefObject, useState } from 'react'
import { Dropdown } from 'react-bootstrap'
import { useSelector } from 'react-redux'
import useResizeObserver from 'use-resize-observer'
import { TocAst } from '../../../external-types/markdown-it-toc-done-right/interface'
import { ApplicationState } from '../../../redux'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { ShowIf } from '../../common/show-if/show-if'
import { LineMarkerPosition } from '../../markdown-renderer/types'
@ -10,7 +12,6 @@ import { TableOfContents } from '../table-of-contents/table-of-contents'
import { YAMLMetaData } from '../yaml-metadata/yaml-metadata'
export interface DocumentRenderPaneProps {
content: string
extraClasses?: string
onFirstHeadingChange: (firstHeading: string | undefined) => void
onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
@ -23,7 +24,6 @@ export interface DocumentRenderPaneProps {
}
export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
content,
extraClasses,
onFirstHeadingChange,
onLineMarkerPositionChanged,
@ -37,6 +37,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
const [tocAst, setTocAst] = useState<TocAst>()
const { width } = useResizeObserver(rendererReference ? { ref: rendererReference } : undefined)
const realWidth = width || 0
const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content)
return (
<div className={`bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 ${extraClasses ?? ''}`}
@ -45,7 +46,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
<div className={'bg-light flex-fill'}>
<FullMarkdownRenderer
className={'flex-fill mb-3'}
content={content}
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={onLineMarkerPositionChanged}
onMetaDataChange={onMetadataChange}