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

Add editor split component (#198)

Browse source 
Add split and split divider component
This commit is contained in:
mrdrogdrog 2020-06-13 01:22:27 +02:00 • committed by GitHub
parent c679f5524c
commit f298d1469b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 130 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/editor/editor.tsx
View file

@ -1,7 +1,9 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import useMedia from 'use-media'
import { ApplicationState } from '../../redux'
import { ShowIf } from '../common/show-if/show-if'
import { setEditorModeConfig } from '../../redux/editor/methods'
import { Splitter } from '../common/splitter/splitter'
import { EditorWindow } from './editor-window/editor-window'
import { MarkdownPreview } from './markdown-preview/markdown-preview'
import { EditorMode } from './task-bar/editor-view-mode'
@ -13,18 +15,28 @@ interface RouteParameters {
const Editor: React.FC = () => {
const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
const isWide = useMedia({ minWidth: 576 })
const [firstDraw, setFirstDraw] = useState(true)
useEffect(() => {
setFirstDraw(false)
}, [])
useEffect(() => {
if (!firstDraw && !isWide && editorMode === EditorMode.BOTH) {
setEditorModeConfig(EditorMode.PREVIEW)
}
}, [editorMode, firstDraw, isWide])
return (
<div className={'d-flex flex-column vh-100'}>
<TaskBar/>
<div className={'flex-fill flex-row d-flex'}>
<ShowIf condition={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}>
<EditorWindow/>
</ShowIf>
<ShowIf condition={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}>
<MarkdownPreview/>
</ShowIf>
</div>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={<EditorWindow/>}
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
right={<MarkdownPreview/>}
containerClassName={'overflow-hidden'}/>
</div>
)
}