Extract editor code into hooks (#1531)

* Extract code into hooks

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

src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useEffect, useRef } from 'react'
+import { Editor } from 'codemirror'
+import { ScrollState } from '../../synced-scroll/scroll-props'
+
+/**
+ * Monitors the given scroll state and scrolls the editor to the state if changed.
+ *
+ * @param editor The editor that should be manipulated
+ * @param scrollState The scroll state that should be monitored
+ */
+export const useApplyScrollState = (editor?: Editor, scrollState?: ScrollState): void => {
+  const lastScrollPosition = useRef<number>()
+  useEffect(() => {
+    if (!editor || !scrollState) {
+      return
+    }
+    const startYOfLine = editor.heightAtLine(scrollState.firstLineInView - 1, 'local')
+    const heightOfLine = (editor.lineInfo(scrollState.firstLineInView - 1).handle as { height: number }).height
+    const newPositionRaw = startYOfLine + (heightOfLine * scrollState.scrolledPercentage) / 100
+    const newPosition = Math.floor(newPositionRaw)
+    if (newPosition !== lastScrollPosition.current) {
+      lastScrollPosition.current = newPosition
+      editor.scrollTo(0, newPosition)
+    }
+  }, [editor, scrollState])
+}

src/components/editor-page/editor-pane/hooks/use-code-mirror-options.ts

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { EditorConfiguration } from 'codemirror'
+import { useMemo } from 'react'
+import { defaultKeyMap } from '../key-map'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { useTranslation } from 'react-i18next'
+
+/**
+ * Generates the configuration for a CodeMirror instance.
+ */
+export const useCodeMirrorOptions = (): EditorConfiguration => {
+  const editorPreferences = useApplicationState((state) => state.editorConfig.preferences)
+  const { t } = useTranslation()
+
+  return useMemo<EditorConfiguration>(
+    () => ({
+      ...editorPreferences,
+      mode: 'gfm',
+      viewportMargin: 20,
+      styleActiveLine: true,
+      lineNumbers: true,
+      lineWrapping: true,
+      showCursorWhenSelecting: true,
+      highlightSelectionMatches: true,
+      inputStyle: 'textarea',
+      matchBrackets: true,
+      autoCloseBrackets: true,
+      matchTags: {
+        bothTags: true
+      },
+      autoCloseTags: true,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'authorship-gutters', 'CodeMirror-foldgutter'],
+      extraKeys: defaultKeyMap,
+      flattenSpans: true,
+      addModeClass: true,
+      autoRefresh: true,
+      // otherCursors: true,
+      placeholder: t('editor.placeholder')
+    }),
+    [t, editorPreferences]
+  )
+}

src/components/editor-page/editor-pane/hooks/use-on-editor-file-drop.ts

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useCallback } from 'react'
+import { Editor } from 'codemirror'
+import { handleUpload } from '../upload-handler'
+import { DomEvent } from 'react-codemirror2'
+
+interface DropEvent {
+  pageX: number
+  pageY: number
+  dataTransfer: {
+    files: FileList
+    effectAllowed: string
+  } | null
+  preventDefault: () => void
+}
+
+/**
+ * Creates a callback that is used to process file drops on the code mirror editor
+ *
+ * @return the code mirror callback
+ */
+export const useOnEditorFileDrop = (): DomEvent => {
+  return useCallback((dropEditor: Editor, event: DropEvent) => {
+    if (
+      event &&
+      dropEditor &&
+      event.pageX &&
+      event.pageY &&
+      event.dataTransfer &&
+      event.dataTransfer.files &&
+      event.dataTransfer.files.length >= 1
+    ) {
+      event.preventDefault()
+      const newCursor = dropEditor.coordsChar({ top: event.pageY, left: event.pageX }, 'page')
+      dropEditor.setCursor(newCursor)
+      const files: FileList = event.dataTransfer.files
+      handleUpload(files[0], dropEditor)
+    }
+  }, [])
+}

src/components/editor-page/editor-pane/hooks/use-on-editor-paste-callback.ts

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useCallback } from 'react'
+import { Editor } from 'codemirror'
+import { handleFilePaste, handleTablePaste, PasteEvent } from '../tool-bar/utils/pasteHandlers'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { DomEvent } from 'react-codemirror2'
+
+/**
+ * Creates a callback that handles the table or file paste action in code mirror.
+ *
+ * @return the created callback
+ */
+export const useOnEditorPasteCallback = (): DomEvent => {
+  const smartPasteEnabled = useApplicationState((state) => state.editorConfig.smartPaste)
+
+  return useCallback(
+    (pasteEditor: Editor, event: PasteEvent) => {
+      if (!event || !event.clipboardData) {
+        return
+      }
+      if (smartPasteEnabled && handleTablePaste(event, pasteEditor)) {
+        return
+      }
+      handleFilePaste(event, pasteEditor)
+    },
+    [smartPasteEnabled]
+  )
+}

src/components/editor-page/editor-pane/hooks/use-on-editor-scroll.ts

@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { DomEvent } from 'react-codemirror2'
+import { useCallback, useEffect, useState } from 'react'
+import { Editor, ScrollInfo } from 'codemirror'
+import { ScrollState } from '../../synced-scroll/scroll-props'
+
+/**
+ * Creates a callback for the scroll binding of the code mirror editor.
+ * It calculates a {@link ScrollState} and posts it on change.
+ *
+ * @param onScroll The callback that is used to post the {@link ScrolLState}.
+ * @return The callback for the code mirror scroll binding.
+ */
+export const useOnEditorScroll = (onScroll?: (scrollState: ScrollState) => void): DomEvent => {
+  const [editorScrollState, setEditorScrollState] = useState<ScrollState>()
+
+  useEffect(() => {
+    if (onScroll && editorScrollState) {
+      onScroll(editorScrollState)
+    }
+  }, [editorScrollState, onScroll])
+
+  return useCallback(
+    (editor: Editor, scrollInfo: ScrollInfo) => {
+      if (!editor || !onScroll || !scrollInfo) {
+        return
+      }
+      const line = editor.lineAtHeight(scrollInfo.top, 'local')
+      const startYOfLine = editor.heightAtLine(line, 'local')
+      const lineInfo = editor.lineInfo(line)
+      if (lineInfo === null) {
+        return
+      }
+      const heightOfLine = (lineInfo.handle as { height: number }).height
+      const percentageRaw = Math.max(scrollInfo.top - startYOfLine, 0) / heightOfLine
+      const percentage = Math.floor(percentageRaw * 100)
+
+      setEditorScrollState({ firstLineInView: line + 1, scrolledPercentage: percentage })
+    },
+    [onScroll]
+  )
+}