2020-06-15 15:54:20 -04:00
|
|
|
import React, { Fragment, useEffect, useState } from 'react'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { useSelector } from 'react-redux'
|
2020-06-12 19:22:27 -04:00
|
|
|
import useMedia from 'use-media'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { ApplicationState } from '../../redux'
|
2020-06-12 19:22:27 -04:00
|
|
|
import { setEditorModeConfig } from '../../redux/editor/methods'
|
|
|
|
import { Splitter } from '../common/splitter/splitter'
|
2020-06-15 15:54:20 -04:00
|
|
|
import { InfoBanner } from '../landing/layout/info-banner'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { EditorWindow } from './editor-window/editor-window'
|
2020-06-20 15:05:24 -04:00
|
|
|
import { MarkdownRenderer } from './markdown-renderer/markdown-renderer'
|
2020-05-31 16:51:36 -04:00
|
|
|
import { EditorMode } from './task-bar/editor-view-mode'
|
2020-05-29 09:44:45 -04:00
|
|
|
import { TaskBar } from './task-bar/task-bar'
|
|
|
|
|
|
|
|
const Editor: React.FC = () => {
|
|
|
|
const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
|
2020-06-20 14:32:44 -04:00
|
|
|
const [markdownContent, setMarkdownContent] = useState(`
|
|
|
|
# Embedding demo
|
|
|
|
## Slideshare
|
|
|
|
{%slideshare mazlan1/internet-of-things-the-tip-of-an-iceberg %}
|
|
|
|
|
|
|
|
## Gist
|
|
|
|
https://gist.github.com/schacon/1
|
|
|
|
|
|
|
|
## YouTube
|
|
|
|
https://www.youtube.com/watch?v=KgMpKsp23yY
|
|
|
|
|
|
|
|
## Vimeo
|
|
|
|
https://vimeo.com/23237102
|
|
|
|
|
|
|
|
## PDF
|
|
|
|
{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}`)
|
2020-06-12 19:22:27 -04:00
|
|
|
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])
|
2020-05-29 09:44:45 -04:00
|
|
|
|
|
|
|
return (
|
2020-06-15 15:54:20 -04:00
|
|
|
<Fragment>
|
|
|
|
<InfoBanner/>
|
|
|
|
<div className={'d-flex flex-column vh-100'}>
|
|
|
|
<TaskBar/>
|
|
|
|
<Splitter
|
|
|
|
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
|
2020-06-19 18:44:18 -04:00
|
|
|
left={<EditorWindow onContentChange={content => setMarkdownContent(content)} content={markdownContent}/>}
|
2020-06-15 15:54:20 -04:00
|
|
|
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
|
2020-06-20 15:05:24 -04:00
|
|
|
right={<MarkdownRenderer content={markdownContent}/>}
|
2020-06-15 15:54:20 -04:00
|
|
|
containerClassName={'overflow-hidden'}/>
|
|
|
|
</div>
|
|
|
|
</Fragment>
|
2020-05-29 09:44:45 -04:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export { Editor }
|