Fix smooth scroll and other bugs (#1861)

This PR fixes:

- The wrong clean up of window post message communicators
- The smooth scroll bug in chrome (Fixes Anchor navigation in render view not working #1770)
- Scroll by using touch devices in renderer
- Lazy loading of the editor (code mirror doesn't need to be lazy loaded any more)

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

@@ -0,0 +1,168 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
+import { setCheckboxInMarkdownContent, updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
+import { MotdModal } from '../common/motd-modal/motd-modal'
+import { ShowIf } from '../common/show-if/show-if'
+import { ErrorWhileLoadingNoteAlert } from '../document-read-only-page/ErrorWhileLoadingNoteAlert'
+import { LoadingNoteAlert } from '../document-read-only-page/LoadingNoteAlert'
+import { AppBar, AppBarMode } from './app-bar/app-bar'
+import { EditorMode } from './app-bar/editor-view-mode'
+import { useLoadNoteFromServer } from './hooks/useLoadNoteFromServer'
+import { useViewModeShortcuts } from './hooks/useViewModeShortcuts'
+import { Sidebar } from './sidebar/sidebar'
+import { Splitter } from './splitter/splitter'
+import type { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
+import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
+import { useEditorModeFromUrl } from './hooks/useEditorModeFromUrl'
+import { UiNotifications } from '../notifications/ui-notifications'
+import { useUpdateLocalHistoryEntry } from './hooks/useUpdateLocalHistoryEntry'
+import { useApplicationState } from '../../hooks/common/use-application-state'
+import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer'
+import { Logger } from '../../utils/logger'
+import { NoteType } from '../../redux/note-details/types/note-details'
+import { NoteAndAppTitleHead } from '../layout/note-and-app-title-head'
+import equal from 'fast-deep-equal'
+import { EditorPane } from './editor-pane/editor-pane'
+
+export interface EditorPagePathParams {
+  id: string
+}
+
+export enum ScrollSource {
+  EDITOR = 'editor',
+  RENDERER = 'renderer'
+}
+
+const log = new Logger('EditorPage')
+
+/**
+ * This is the content of the actual editor page.
+ */
+export const EditorPageContent: React.FC = () => {
+  useTranslation()
+  const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
+  const editorMode: EditorMode = useApplicationState((state) => state.editorConfig.editorMode)
+  const editorSyncScroll: boolean = useApplicationState((state) => state.editorConfig.syncScroll)
+
+  const [scrollState, setScrollState] = useState<DualScrollState>(() => ({
+    editorScrollState: { firstLineInView: 1, scrolledPercentage: 0 },
+    rendererScrollState: { firstLineInView: 1, scrolledPercentage: 0 }
+  }))
+
+  const onMarkdownRendererScroll = useCallback(
+    (newScrollState: ScrollState) => {
+      if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
+        setScrollState((old) => {
+          const newState: DualScrollState = {
+            editorScrollState: newScrollState,
+            rendererScrollState: old.rendererScrollState
+          }
+          return equal(newState, old) ? old : newState
+        })
+      }
+    },
+    [editorSyncScroll]
+  )
+
+  useEffect(() => {
+    log.debug('New scroll state', scrollState, scrollSource.current)
+  }, [scrollState])
+
+  const onEditorScroll = useCallback(
+    (newScrollState: ScrollState) => {
+      if (scrollSource.current === ScrollSource.EDITOR && editorSyncScroll) {
+        setScrollState((old) => {
+          const newState: DualScrollState = {
+            rendererScrollState: newScrollState,
+            editorScrollState: old.editorScrollState
+          }
+          return equal(newState, old) ? old : newState
+        })
+      }
+    },
+    [editorSyncScroll]
+  )
+
+  useViewModeShortcuts()
+  useApplyDarkMode()
+  useEditorModeFromUrl()
+
+  const [error, loading] = useLoadNoteFromServer()
+
+  useUpdateLocalHistoryEntry(!error && !loading)
+
+  const setRendererToScrollSource = useCallback(() => {
+    if (scrollSource.current !== ScrollSource.RENDERER) {
+      scrollSource.current = ScrollSource.RENDERER
+      log.debug('Make renderer scroll source')
+    }
+  }, [])
+
+  const setEditorToScrollSource = useCallback(() => {
+    if (scrollSource.current !== ScrollSource.EDITOR) {
+      scrollSource.current = ScrollSource.EDITOR
+      log.debug('Make editor scroll source')
+    }
+  }, [])
+
+  const leftPane = useMemo(
+    () => (
+      <EditorPane
+        scrollState={scrollState.editorScrollState}
+        onScroll={onEditorScroll}
+        onMakeScrollSource={setEditorToScrollSource}
+      />
+    ),
+    [onEditorScroll, scrollState.editorScrollState, setEditorToScrollSource]
+  )
+  const noteType: NoteType = useApplicationState((state) => state.noteDetails.frontmatter.type)
+
+  const rightPane = useMemo(
+    () => (
+      <EditorDocumentRenderer
+        frameClasses={'h-100 w-100'}
+        onMakeScrollSource={setRendererToScrollSource}
+        onFirstHeadingChange={updateNoteTitleByFirstHeading}
+        onTaskCheckedChange={setCheckboxInMarkdownContent}
+        onScroll={onMarkdownRendererScroll}
+        scrollState={scrollState.rendererScrollState}
+        rendererType={noteType === NoteType.SLIDE ? RendererType.SLIDESHOW : RendererType.DOCUMENT}
+      />
+    ),
+    [noteType, onMarkdownRendererScroll, scrollState.rendererScrollState, setRendererToScrollSource]
+  )
+
+  return (
+    <Fragment>
+      <NoteAndAppTitleHead />
+      <UiNotifications />
+      <MotdModal />
+      <div className={'d-flex flex-column vh-100'}>
+        <AppBar mode={AppBarMode.EDITOR} />
+        <div className={'container'}>
+          <ErrorWhileLoadingNoteAlert show={error} />
+          <LoadingNoteAlert show={loading} />
+        </div>
+        <ShowIf condition={!error && !loading}>
+          <div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
+            <Splitter
+              showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
+              left={leftPane}
+              showRight={editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH}
+              right={rightPane}
+              additionalContainerClassName={'overflow-hidden'}
+            />
+            <Sidebar />
+          </div>
+        </ShowIf>
+      </div>
+    </Fragment>
+  )
+}

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

@@ -91,7 +91,10 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
   const { t } = useTranslation()
 
   return (
-    <div className={`d-flex flex-column h-100 position-relative`} onMouseEnter={onMakeScrollSource}>
+    <div
+      className={`d-flex flex-column h-100 position-relative`}
+      onTouchStart={onMakeScrollSource}
+      onMouseEnter={onMakeScrollSource}>
       <MaxLengthWarning />
       <ToolBar />
       <ReactCodeMirror
@@ -112,5 +115,3 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
     </div>
   )
 }
-
-export default EditorPane

src/components/editor-page/editor-pane/hooks/use-cursor-activity-callback.ts

@@ -5,12 +5,12 @@
  */
 
 import type { RefObject } from 'react'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import { updateCursorPositions } from '../../../../redux/note-details/methods'
 import type { ViewUpdate } from '@codemirror/view'
 import { EditorView } from '@codemirror/view'
 import { Logger } from '../../../../utils/logger'
-import type { Extension } from '@codemirror/state'
+import type { Extension, SelectionRange } from '@codemirror/state'
 
 const logger = new Logger('useCursorActivityCallback')
 
@@ -20,14 +20,20 @@ const logger = new Logger('useCursorActivityCallback')
  * @return the generated callback
  */
 export const useCursorActivityCallback = (editorFocused: RefObject<boolean>): Extension => {
+  const lastMainSelection = useRef<SelectionRange>()
+
   return useMemo(
     () =>
       EditorView.updateListener.of((viewUpdate: ViewUpdate): void => {
+        const firstSelection = viewUpdate.state.selection.main
+        if (lastMainSelection.current === firstSelection) {
+          return
+        }
+        lastMainSelection.current = firstSelection
         if (!editorFocused.current) {
           logger.debug("Don't post updated cursor because editor isn't focused")
           return
         }
-        const firstSelection = viewUpdate.state.selection.main
         const newCursorPos = {
           from: firstSelection.from,
           to: firstSelection.to === firstSelection.from ? undefined : firstSelection.to

src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx

@@ -38,3 +38,5 @@ export const EmojiPickerButton: React.FC = () => {
     </Fragment>
   )
 }
+
+export default EmojiPickerButton

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

@@ -4,15 +4,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { Fragment, Suspense } from 'react'
 import { ButtonGroup, ButtonToolbar } from 'react-bootstrap'
-import { EmojiPickerButton } from './emoji-picker/emoji-picker-button'
 import { TablePickerButton } from './table-picker/table-picker-button'
 import styles from './tool-bar.module.scss'
 import { UploadImageButton } from './upload-image-button'
 import { ToolbarButton } from './toolbar-button'
 import { FormatType } from '../../../../redux/note-details/types'
 
+const EmojiPickerButton = React.lazy(() => import('./emoji-picker/emoji-picker-button'))
+
 export const ToolBar: React.FC = () => {
   return (
     <ButtonToolbar className={`bg-light ${styles.toolbar}`}>
@@ -43,7 +44,9 @@ export const ToolBar: React.FC = () => {
         <ToolbarButton icon={'minus'} formatType={FormatType.HORIZONTAL_LINE} />
         <ToolbarButton icon={'caret-square-o-down'} formatType={FormatType.COLLAPSIBLE_BLOCK} />
         <ToolbarButton icon={'comment'} formatType={FormatType.COMMENT} />
-        <EmojiPickerButton />
+        <Suspense fallback={<Fragment />}>
+          <EmojiPickerButton />
+        </Suspense>
       </ButtonGroup>
     </ButtonToolbar>
   )

src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { createContext, useContext, useMemo } from 'react'
+import React, { createContext, useContext, useEffect, useMemo } from 'react'
 import { EditorToRendererCommunicator } from '../../render-page/window-post-message-communicator/editor-to-renderer-communicator'
 
 const EditorToRendererCommunicatorContext = createContext<EditorToRendererCommunicator | undefined>(undefined)
@@ -29,6 +29,14 @@ export const useEditorToRendererCommunicator: () => EditorToRendererCommunicator
 export const EditorToRendererCommunicatorContextProvider: React.FC = ({ children }) => {
   const communicator = useMemo<EditorToRendererCommunicator>(() => new EditorToRendererCommunicator(), [])
 
+  useEffect(() => {
+    const currentCommunicator = communicator
+    currentCommunicator.registerEventListener()
+    return () => {
+      currentCommunicator.unregisterEventListener()
+    }
+  }, [communicator])
+
   return (
     <EditorToRendererCommunicatorContext.Provider value={communicator}>
       {children}

src/components/editor-page/render-context/renderer-to-editor-communicator-context-provider.tsx

@@ -27,20 +27,18 @@ export const useRendererToEditorCommunicator: () => RendererToEditorCommunicator
 
 export const RendererToEditorCommunicatorContextProvider: React.FC = ({ children }) => {
   const editorOrigin = useOriginFromConfig(ORIGIN_TYPE.EDITOR)
-  const communicator = useMemo<RendererToEditorCommunicator>(() => {
-    const newCommunicator = new RendererToEditorCommunicator()
-    newCommunicator.setMessageTarget(window.parent, editorOrigin)
-    return newCommunicator
-  }, [editorOrigin])
+  const communicator = useMemo<RendererToEditorCommunicator>(() => new RendererToEditorCommunicator(), [])
 
   useEffect(() => {
     const currentCommunicator = communicator
+    currentCommunicator.setMessageTarget(window.parent, editorOrigin)
+    currentCommunicator.registerEventListener()
     currentCommunicator.enableCommunication()
     currentCommunicator.sendMessageToOtherSide({
       type: CommunicationMessageType.RENDERER_READY
     })
     return () => currentCommunicator?.unregisterEventListener()
-  }, [communicator])
+  }, [communicator, editorOrigin])
 
   /**
    * Provides a {@link RendererToEditorCommunicator renderer to editor communicator} for the child components via Context.

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -58,13 +58,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   const onIframeLoad = useForceRenderPageUrlOnIframeLoadCallback(frameReference, rendererOrigin, resetRendererReady)
   const [frameHeight, setFrameHeight] = useState<number>(0)
 
-  useEffect(
-    () => () => {
-      iframeCommunicator.unregisterEventListener()
-      setRendererStatus(false)
-    },
-    [iframeCommunicator]
-  )
+  useEffect(() => () => setRendererStatus(false), [iframeCommunicator])
 
   useEffect(() => {
     if (!rendererReady) {