Upgrade to CodeMirror 6 (#1787)

Upgrade to CodeMirror 6

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

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>
   }
 
   /**