Upgrade to CodeMirror 6 (#1787)

Upgrade to CodeMirror 6

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

src/components/render-page/iframe-markdown-renderer.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import type { ScrollState } from '../editor-page/synced-scroll/scroll-props'
 import type { BaseConfiguration } from './window-post-message-communicator/rendering-message'
 import { CommunicationMessageType, RendererType } from './window-post-message-communicator/rendering-message'
@@ -27,26 +27,50 @@ export const IframeMarkdownRenderer: React.FC = () => {
 
   const communicator = useRendererToEditorCommunicator()
 
-  const countWordsInRenderedDocument = useCallback(() => {
-    const documentContainer = document.querySelector('[data-word-count-target]')
-    communicator.sendMessageToOtherSide({
-      type: CommunicationMessageType.ON_WORD_COUNT_CALCULATED,
-      words: documentContainer ? countWords(documentContainer) : 0
-    })
-  }, [communicator])
+  const sendScrolling = useRef<boolean>(false)
 
-  useRendererReceiveHandler(CommunicationMessageType.SET_BASE_CONFIGURATION, (values) =>
-    setBaseConfiguration(values.baseConfiguration)
+  useRendererReceiveHandler(
+    CommunicationMessageType.DISABLE_RENDERER_SCROLL_SOURCE,
+    useCallback(() => {
+      sendScrolling.current = false
+    }, [])
   )
-  useRendererReceiveHandler(CommunicationMessageType.SET_MARKDOWN_CONTENT, (values) =>
-    setMarkdownContentLines(values.content)
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_BASE_CONFIGURATION,
+    useCallback((values) => setBaseConfiguration(values.baseConfiguration), [])
   )
-  useRendererReceiveHandler(CommunicationMessageType.SET_DARKMODE, (values) => setDarkMode(values.activated))
-  useRendererReceiveHandler(CommunicationMessageType.SET_SCROLL_STATE, (values) => setScrollState(values.scrollState))
-  useRendererReceiveHandler(CommunicationMessageType.SET_FRONTMATTER_INFO, (values) =>
-    setFrontmatterInfo(values.frontmatterInfo)
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_MARKDOWN_CONTENT,
+    useCallback((values) => setMarkdownContentLines(values.content), [])
+  )
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_DARKMODE,
+    useCallback((values) => setDarkMode(values.activated), [])
+  )
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_SCROLL_STATE,
+    useCallback((values) => setScrollState(values.scrollState), [])
+  )
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_FRONTMATTER_INFO,
+    useCallback((values) => setFrontmatterInfo(values.frontmatterInfo), [])
+  )
+
+  useRendererReceiveHandler(
+    CommunicationMessageType.GET_WORD_COUNT,
+    useCallback(() => {
+      const documentContainer = document.querySelector('[data-word-count-target]')
+      communicator.sendMessageToOtherSide({
+        type: CommunicationMessageType.ON_WORD_COUNT_CALCULATED,
+        words: documentContainer ? countWords(documentContainer) : 0
+      })
+    }, [communicator])
   )
-  useRendererReceiveHandler(CommunicationMessageType.GET_WORD_COUNT, () => countWordsInRenderedDocument())
 
   const onTaskCheckedChange = useCallback(
     (lineInMarkdown: number, checked: boolean) => {
@@ -70,13 +94,17 @@ export const IframeMarkdownRenderer: React.FC = () => {
   )
 
   const onMakeScrollSource = useCallback(() => {
+    sendScrolling.current = true
     communicator.sendMessageToOtherSide({
-      type: CommunicationMessageType.SET_SCROLL_SOURCE_TO_RENDERER
+      type: CommunicationMessageType.ENABLE_RENDERER_SCROLL_SOURCE
     })
   }, [communicator])
 
   const onScroll = useCallback(
     (scrollState: ScrollState) => {
+      if (!sendScrolling.current) {
+        return
+      }
       communicator.sendMessageToOtherSide({
         type: CommunicationMessageType.SET_SCROLL_STATE,
         scrollState

src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts

@@ -7,7 +7,7 @@
 import { useEffect } from 'react'
 import type { CommunicationMessages, RendererToEditorMessageType } from '../rendering-message'
 import { useEditorToRendererCommunicator } from '../../../editor-page/render-context/editor-to-renderer-communicator-context-provider'
-import type { Handler } from '../window-post-message-communicator'
+import type { MaybeHandler } from '../window-post-message-communicator'
 
 /**
  * Sets the handler for the given message type in the current editor to renderer communicator.
@@ -17,7 +17,7 @@ import type { Handler } from '../window-post-message-communicator'
  */
 export const useEditorReceiveHandler = <R extends RendererToEditorMessageType>(
   messageType: R,
-  handler: Handler<CommunicationMessages, R>
+  handler: MaybeHandler<CommunicationMessages, R>
 ): void => {
   const editorToRendererCommunicator = useEditorToRendererCommunicator()
   useEffect(() => {

src/components/render-page/window-post-message-communicator/hooks/use-renderer-receive-handler.ts

@@ -9,6 +9,11 @@ import type { CommunicationMessages, EditorToRendererMessageType } from '../rend
 import type { Handler } from '../window-post-message-communicator'
 import { useRendererToEditorCommunicator } from '../../../editor-page/render-context/renderer-to-editor-communicator-context-provider'
 
+export type CommunicationMessageHandler<MESSAGE_TYPE extends EditorToRendererMessageType> = Handler<
+  CommunicationMessages,
+  MESSAGE_TYPE
+>
+
 /**
  * Sets the handler for the given message type in the current renderer to editor communicator.
  *
@@ -17,7 +22,7 @@ import { useRendererToEditorCommunicator } from '../../../editor-page/render-con
  */
 export const useRendererReceiveHandler = <MESSAGE_TYPE extends EditorToRendererMessageType>(
   messageType: MESSAGE_TYPE,
-  handler: Handler<CommunicationMessages, MESSAGE_TYPE>
+  handler: CommunicationMessageHandler<MESSAGE_TYPE>
 ): void => {
   const editorToRendererCommunicator = useRendererToEditorCommunicator()
   useEffect(() => {

src/components/render-page/window-post-message-communicator/rendering-message.ts

@@ -12,7 +12,8 @@ export enum CommunicationMessageType {
   SET_DARKMODE = 'SET_DARKMODE',
   ON_TASK_CHECKBOX_CHANGE = 'ON_TASK_CHECKBOX_CHANGE',
   ON_FIRST_HEADING_CHANGE = 'ON_FIRST_HEADING_CHANGE',
-  SET_SCROLL_SOURCE_TO_RENDERER = 'SET_SCROLL_SOURCE_TO_RENDERER',
+  ENABLE_RENDERER_SCROLL_SOURCE = 'ENABLE_RENDERER_SCROLL_SOURCE',
+  DISABLE_RENDERER_SCROLL_SOURCE = 'DISABLE_RENDERER_SCROLL_SOURCE',
   SET_SCROLL_STATE = 'SET_SCROLL_STATE',
   IMAGE_CLICKED = 'IMAGE_CLICKED',
   ON_HEIGHT_CHANGE = 'ON_HEIGHT_CHANGE',
@@ -23,8 +24,8 @@ export enum CommunicationMessageType {
   IMAGE_UPLOAD = 'IMAGE_UPLOAD'
 }
 
-export interface NoPayloadMessage {
-  type: CommunicationMessageType.RENDERER_READY | CommunicationMessageType.SET_SCROLL_SOURCE_TO_RENDERER
+export interface NoPayloadMessage<TYPE extends CommunicationMessageType> {
+  type: TYPE
 }
 
 export interface SetDarkModeMessage {
@@ -97,7 +98,9 @@ export interface OnWordCountCalculatedMessage {
 }
 
 export type CommunicationMessages =
-  | NoPayloadMessage
+  | NoPayloadMessage<CommunicationMessageType.RENDERER_READY>
+  | NoPayloadMessage<CommunicationMessageType.ENABLE_RENDERER_SCROLL_SOURCE>
+  | NoPayloadMessage<CommunicationMessageType.DISABLE_RENDERER_SCROLL_SOURCE>
   | SetDarkModeMessage
   | SetBaseUrlMessage
   | GetWordCountMessage
@@ -118,10 +121,11 @@ export type EditorToRendererMessageType =
   | CommunicationMessageType.SET_BASE_CONFIGURATION
   | CommunicationMessageType.GET_WORD_COUNT
   | CommunicationMessageType.SET_FRONTMATTER_INFO
+  | CommunicationMessageType.DISABLE_RENDERER_SCROLL_SOURCE
 
 export type RendererToEditorMessageType =
   | CommunicationMessageType.RENDERER_READY
-  | CommunicationMessageType.SET_SCROLL_SOURCE_TO_RENDERER
+  | CommunicationMessageType.ENABLE_RENDERER_SCROLL_SOURCE
   | CommunicationMessageType.ON_FIRST_HEADING_CHANGE
   | CommunicationMessageType.ON_TASK_CHECKBOX_CHANGE
   | CommunicationMessageType.SET_SCROLL_STATE

src/components/render-page/window-post-message-communicator/window-post-message-communicator.ts

@@ -11,12 +11,14 @@ import type { Logger } from '../../../utils/logger'
  */
 export class IframeCommunicatorSendingError extends Error {}
 
-export type Handler<MESSAGES, MESSAGE_TYPE extends string> =
-  | ((values: Extract<MESSAGES, PostMessage<MESSAGE_TYPE>>) => void)
-  | undefined
+export type Handler<MESSAGES, MESSAGE_TYPE extends string> = (
+  values: Extract<MESSAGES, PostMessage<MESSAGE_TYPE>>
+) => void
+
+export type MaybeHandler<MESSAGES, MESSAGE_TYPE extends string> = Handler<MESSAGES, MESSAGE_TYPE> | undefined
 
 export type HandlerMap<MESSAGES, MESSAGE_TYPE extends string> = Partial<{
-  [key in MESSAGE_TYPE]: Handler<MESSAGES, MESSAGE_TYPE>
+  [key in MESSAGE_TYPE]: MaybeHandler<MESSAGES, MESSAGE_TYPE>
 }>
 
 export interface PostMessage<MESSAGE_TYPE extends string> {
@@ -108,8 +110,9 @@ export abstract class WindowPostMessageCommunicator<
    * @param messageType The message type for which the handler should be called
    * @param handler The handler that processes messages with the given message type.
    */
-  public setHandler<R extends RECEIVE_TYPE>(messageType: R, handler: Handler<MESSAGES, R>): void {
-    this.handlers[messageType] = handler as Handler<MESSAGES, RECEIVE_TYPE>
+  public setHandler<R extends RECEIVE_TYPE>(messageType: R, handler: MaybeHandler<MESSAGES, R>): void {
+    this.log.debug('Set handler for', messageType)
+    this.handlers[messageType] = handler as MaybeHandler<MESSAGES, RECEIVE_TYPE>
   }
 
   /**