Remove document content (#1470)

* Merge documentContent and markdownContent

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add hook for markdown content without frontmatter

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Use hook for export

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Let subcomponent handle the markdown content

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/editor-document-renderer/editor-document-renderer.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { RenderIframe, RenderIframeProps } from '../renderer-pane/render-iframe'
+import { useNoteMarkdownContentWithoutFrontmatter } from '../../../hooks/common/use-note-markdown-content-without-frontmatter'
+
+export type EditorDocumentRendererProps = Omit<RenderIframeProps, 'markdownContent'>
+
+/**
+ * Renders the markdown content from the global application state with the iframe renderer.
+ *
+ * @param props Every property from the {@link RenderIframe} except the markdown content.
+ */
+export const EditorDocumentRenderer: React.FC<EditorDocumentRendererProps> = (props) => {
+  const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
+  return <RenderIframe frameClasses={'h-100 w-100'} markdownContent={markdownContent} {...props} />
+}

src/components/editor-page/editor-page.tsx

@@ -8,12 +8,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
 import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
-import { useNoteMarkdownContent } from '../../hooks/common/use-note-markdown-content'
-import {
-  setCheckboxInMarkdownContent,
-  setNoteContent,
-  updateNoteTitleByFirstHeading
-} from '../../redux/note-details/methods'
+import { setCheckboxInMarkdownContent, updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
 import { MotdBanner } from '../common/motd-banner/motd-banner'
 import { ShowIf } from '../common/show-if/show-if'
 import { ErrorWhileLoadingNoteAlert } from '../document-read-only-page/ErrorWhileLoadingNoteAlert'
@@ -23,7 +18,6 @@ import { EditorMode } from './app-bar/editor-view-mode'
 import { EditorPane } from './editor-pane/editor-pane'
 import { useLoadNoteFromServer } from './hooks/useLoadNoteFromServer'
 import { useViewModeShortcuts } from './hooks/useViewModeShortcuts'
-import { RenderIframe } from './renderer-pane/render-iframe'
 import { Sidebar } from './sidebar/sidebar'
 import { Splitter } from './splitter/splitter'
 import { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
@@ -34,6 +28,7 @@ import { useNotificationTest } from './use-notification-test'
 import { IframeEditorToRendererCommunicatorContextProvider } from './render-context/iframe-editor-to-renderer-communicator-context-provider'
 import { useUpdateLocalHistoryEntry } from './hooks/useUpdateLocalHistoryEntry'
 import { useApplicationState } from '../../hooks/common/use-application-state'
+import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer'
 
 export interface EditorPagePathParams {
   id: string
@@ -46,10 +41,7 @@ export enum ScrollSource {
 
 export const EditorPage: React.FC = () => {
   useTranslation()
-  const markdownContent = useNoteMarkdownContent()
   const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
-
-  const documentContent = useApplicationState((state) => state.noteDetails.documentContent)
   const editorMode: EditorMode = useApplicationState((state) => state.editorConfig.editorMode)
   const editorSyncScroll: boolean = useApplicationState((state) => state.editorConfig.syncScroll)
 
@@ -98,21 +90,18 @@ export const EditorPage: React.FC = () => {
   const leftPane = useMemo(
     () => (
       <EditorPane
-        onContentChange={setNoteContent}
-        content={documentContent}
         scrollState={scrollState.editorScrollState}
         onScroll={onEditorScroll}
         onMakeScrollSource={setEditorToScrollSource}
       />
     ),
-    [documentContent, onEditorScroll, scrollState.editorScrollState, setEditorToScrollSource]
+    [onEditorScroll, scrollState.editorScrollState, setEditorToScrollSource]
   )
 
   const rightPane = useMemo(
     () => (
-      <RenderIframe
+      <EditorDocumentRenderer
         frameClasses={'h-100 w-100'}
-        markdownContent={markdownContent}
         onMakeScrollSource={setRendererToScrollSource}
         onFirstHeadingChange={updateNoteTitleByFirstHeading}
         onTaskCheckedChange={setCheckboxInMarkdownContent}
@@ -121,7 +110,7 @@ export const EditorPage: React.FC = () => {
         rendererType={RendererType.DOCUMENT}
       />
     ),
-    [markdownContent, onMarkdownRendererScroll, scrollState.rendererScrollState, setRendererToScrollSource]
+    [onMarkdownRendererScroll, scrollState.rendererScrollState, setRendererToScrollSource]
   )
 
   return (

src/components/editor-page/editor-pane/editor-pane.tsx

@@ -19,6 +19,8 @@ import { handleUpload } from './upload-handler'
 import { handleFilePaste, handleTablePaste, PasteEvent } from './tool-bar/utils/pasteHandlers'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import './codemirror-imports'
+import { setNoteContent } from '../../../redux/note-details/methods'
+import { useNoteMarkdownContent } from '../../../hooks/common/use-note-markdown-content'
 
 export interface EditorPaneProps {
   onContentChange: (content: string) => void
@@ -50,13 +52,8 @@ interface DropEvent {
   preventDefault: () => void
 }
 
-export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({
-  onContentChange,
-  content,
-  scrollState,
-  onScroll,
-  onMakeScrollSource
-}) => {
+export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMakeScrollSource }) => {
+  const markdownContent = useNoteMarkdownContent()
   const { t } = useTranslation()
   const maxLength = useApplicationState((state) => state.config.maxDocumentLength)
   const smartPasteEnabled = useApplicationState((state) => state.editorConfig.smartPaste)
@@ -128,10 +125,11 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({
       if (value.length <= maxLength) {
         maxLengthWarningAlreadyShown.current = false
       }
-      onContentChange(value)
+      setNoteContent(value)
     },
-    [onContentChange, maxLength, maxLengthWarningAlreadyShown]
+    [maxLength]
   )
+
   const onEditorDidMount = useCallback(
     (mountedEditor: Editor) => {
       setStatusBarInfo(createStatusInfo(mountedEditor, maxLength))
@@ -204,7 +202,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({
       <ToolBar editor={editor} />
       <ControlledCodeMirror
         className={`overflow-hidden w-100 flex-fill ${ligaturesEnabled ? '' : 'no-ligatures'}`}
-        value={content}
+        value={markdownContent}
         options={codeMirrorOptions}
         onChange={onChange}
         onPaste={onPaste}

src/components/editor-page/sidebar/export-markdown-sidebar-entry.tsx

@@ -10,15 +10,15 @@ import { store } from '../../../redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { download } from '../../common/download/download'
 import { SidebarButton } from './sidebar-button'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { useNoteMarkdownContent } from '../../../hooks/common/use-note-markdown-content'
 
 export const ExportMarkdownSidebarEntry: React.FC = () => {
   const { t } = useTranslation()
-  const documentContent = useApplicationState((state) => state.noteDetails.documentContent)
+  const markdownContent = useNoteMarkdownContent()
   const onClick = useCallback(() => {
     const sanitized = sanitize(store.getState().noteDetails.noteTitle)
-    download(documentContent, `${sanitized !== '' ? sanitized : t('editor.untitledNote')}.md`, 'text/markdown')
-  }, [documentContent, t])
+    download(markdownContent, `${sanitized !== '' ? sanitized : t('editor.untitledNote')}.md`, 'text/markdown')
+  }, [markdownContent, t])
 
   return (
     <SidebarButton data-cy={'menu-export-markdown'} onClick={onClick} icon={'file-text'}>