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

Improvement/move document content into redux (#691)

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import useMedia from 'use-media'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { useDocumentTitle } from '../../hooks/common/use-document-title'
import { ApplicationState } from '../../redux'
import { setDocumentContent } from '../../redux/document-content/methods'
import { setEditorMode } from '../../redux/editor/methods'
import { extractNoteTitle } from '../common/document-title/note-title-extractor'
import { MotdBanner } from '../common/motd-banner/motd-banner'
@ -34,7 +35,7 @@ const TASK_REGEX = /(\s*[-*] )(\[[ xX]])( .*)/
export const Editor: React.FC = () => {
const { t } = useTranslation()
const untitledNote = t('editor.untitledNote')
const [markdownContent, setMarkdownContent] = useState(editorTestContent)
const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content)
const isWide = useMedia({ minWidth: 576 })
const [documentTitle, setDocumentTitle] = useState(untitledNote)
const noteMetadata = useRef<YAMLMetaData>()
@ -49,6 +50,10 @@ export const Editor: React.FC = () => {
rendererScrollState: { firstLineInView: 1, scrolledPercentage: 0 }
}))
useEffect(() => {
setDocumentContent(editorTestContent)
}, [])
const updateDocumentTitle = useCallback(() => {
const noteTitle = extractNoteTitle(untitledNote, noteMetadata.current, firstHeading.current)
setDocumentTitle(noteTitle)
@ -71,9 +76,9 @@ export const Editor: React.FC = () => {
const before = results[1]
const after = results[3]
lines[lineInMarkdown] = `${before}[${checked ? 'x' : ' '}]${after}`
setMarkdownContent(lines.join('\n'))
setDocumentContent(lines.join('\n'))
}
}, [markdownContent, setMarkdownContent])
}, [markdownContent])
useViewModeShortcuts()
@ -105,12 +110,12 @@ export const Editor: React.FC = () => {
<MotdBanner/>
<div className={'d-flex flex-column vh-100'}>
<AppBar mode={AppBarMode.EDITOR}/>
<DocumentBar title={documentTitle} noteContent={markdownContent} updateNoteContent={(newContent) => setMarkdownContent(newContent)}/>
<DocumentBar title={documentTitle}/>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={
<EditorPane
onContentChange={content => setMarkdownContent(content)}
onContentChange={setDocumentContent}
content={markdownContent}
scrollState={scrollState.editorScrollState}
onScroll={onEditorScroll}
@ -120,7 +125,6 @@ export const Editor: React.FC = () => {
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
right={
<ScrollingDocumentRenderPane
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onMakeScrollSource={() => {
scrollSource.current = ScrollSource.RENDERER