mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-15 15:44:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

modularize renderer (#552)

Browse source
This commit is contained in:
mrdrogdrog 2020-09-08 21:49:42 +02:00 • committed by GitHub
parent ac00bc98c0
commit a86d4cbc58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 580 additions and 455 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/editor/document-renderer-pane/document-render-pane.tsx
View file

@ -4,7 +4,8 @@ import useResizeObserver from 'use-resize-observer'
import { TocAst } from '../../../external-types/markdown-it-toc-done-right/interface'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { ShowIf } from '../../common/show-if/show-if'
import { LineMarkerPosition, MarkdownRenderer } from '../../markdown-renderer/markdown-renderer'
import { LineMarkerPosition } from '../../markdown-renderer/types'
import { FullMarkdownRenderer } from '../../markdown-renderer/full-markdown-renderer'
import { ScrollProps, ScrollState } from '../scroll/scroll-props'
import { findLineMarks } from '../scroll/utils'
import { TableOfContents } from '../table-of-contents/table-of-contents'
@ -108,16 +109,18 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
<div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'}
ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource}>
<div className={'col-md'}/>
<MarkdownRenderer
className={'flex-fill mb-3'}
content={content}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={setLineMarks}
onMetaDataChange={onMetadataChange}
onTaskCheckedChange={onTaskCheckedChange}
onTocChange={(tocAst) => setTocAst(tocAst)}
wide={wide}
/>
<div className={'bg-light flex-fill'}>
<FullMarkdownRenderer
className={'flex-fill mb-3'}
content={content}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={setLineMarks}
onMetaDataChange={onMetadataChange}
onTaskCheckedChange={onTaskCheckedChange}
onTocChange={(tocAst) => setTocAst(tocAst)}
wide={wide}
/>
</div>
<div className={'col-md'}>
<ShowIf condition={realWidth >= 1280 && !!tocAst}>