fix(frontend): improve performance by reducing array constructions

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

frontend/src/components/editor-page/editor-pane/codemirror-extensions/document-sync/y-text-sync-view-plugin.ts

@@ -35,9 +35,11 @@ export class YTextSyncViewPlugin implements PluginValue {
     const [changes] = event.delta.reduce(
       ([changes, position], delta) => {
         if (delta.insert !== undefined && typeof delta.insert === 'string') {
-          return [[...changes, { from: position, to: position, insert: delta.insert }], position]
+          changes.push({ from: position, to: position, insert: delta.insert })
+          return [changes, position]
         } else if (delta.delete !== undefined) {
-          return [[...changes, { from: position, to: position + delta.delete, insert: '' }], position + delta.delete]
+          changes.push({ from: position, to: position + delta.delete, insert: '' })
+          return [changes, position + delta.delete]
         } else if (delta.retain !== undefined) {
           return [changes, position + delta.retain]
         } else {

frontend/src/components/editor-page/editor-pane/linter/linter.ts

@@ -11,6 +11,7 @@ import { linter } from '@codemirror/lint'
 import type { Extension } from '@codemirror/state'
 import type { EditorView } from '@codemirror/view'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 
 /**
  * The Linter interface.
@@ -32,11 +33,16 @@ const createLinterExtension = () =>
 /**
  * Creates a codemirror linter that runs all markdown extension linters.
  * Due to a bug in codemirror that breaks the "fix" buttons when switching themes, the extension is recreated if the app switches between dark and light mode.
+ * To update translations the t function is also included.
  *
  * @return The build codemirror linter extension
  */
 export const useLinter = (): Extension => {
   const darkModeActivated = useDarkModeState()
+  const { t } = useTranslation()
 
-  return useMemo(() => (darkModeActivated ? createLinterExtension() : createLinterExtension()), [darkModeActivated])
+  return useMemo(
+    () => (darkModeActivated && !!t ? createLinterExtension() : createLinterExtension()),
+    [darkModeActivated, t]
+  )
 }

frontend/src/components/editor-page/editor-pane/linter/single-line-regex-linter.ts

@@ -30,19 +30,15 @@ export class SingleLineRegexLinter implements Linter {
   ) {}
 
   lint(view: EditorView): Diagnostic[] {
-    return view.state.doc
+    const lines = view.state.doc.toString().split('\n')
-      .toString()
+    return lines
-      .split('\n')
+      .reduce((state, line, lineIndex, lines) => {
-      .reduce(
+        state[lineIndex] = {
-        (state, line, lineIndex, lines) => [
+          line,
-          ...state,
+          startIndex: lineIndex === 0 ? 0 : state[lineIndex - 1].startIndex + lines[lineIndex - 1].length + 1
-          {
+        } as LineWithStartIndex
-            line,
+        return state
-            startIndex: lineIndex === 0 ? 0 : state[lineIndex - 1].startIndex + lines[lineIndex - 1].length + 1
+      }, new Array<LineWithStartIndex>(lines.length))
-          } as LineWithStartIndex
-        ],
-        [] as LineWithStartIndex[]
-      )
       .map(({ line, startIndex }) => ({
         lineStartIndex: startIndex,
         regexResult: this.regex.exec(line)

frontend/src/components/markdown-renderer/extensions/reveal/process-reveal-comment-nodes.ts

@@ -42,7 +42,8 @@ const processCommentNode = (node: DataNode): void => {
     return
   }
 
-  for (const dataAttribute of [...regexResult[2].matchAll(dataAttributesSyntax)]) {
+  const matches = [...regexResult[2].matchAll(dataAttributesSyntax)]
+  for (const dataAttribute of matches) {
     const attributeName = dataAttribute[1]
     const attributeValue = dataAttribute[2] ?? dataAttribute[3]
     if (attributeValue) {

frontend/src/components/markdown-renderer/markdown-to-react/utils/line-content-to-line-id-mapper.ts

@@ -63,10 +63,7 @@ export class LineContentToLineIdMapper {
           LineContentToLineIdMapper.changeIsNotChangingLines(change) ||
           LineContentToLineIdMapper.changeIsAddingLines(change)
       )
-      .reduce(
+      .flatMap((currentChange) => this.convertChangeToLinesWithIds(currentChange))
-        (previousLineKeys, currentChange) => [...previousLineKeys, ...this.convertChangeToLinesWithIds(currentChange)],
-        [] as LineWithId[]
-      )
   }
 
   /**

frontend/src/redux/note-details/calculate-line-start-indexes.ts

@@ -12,7 +12,7 @@
  */
 export const calculateLineStartIndexes = (markdownContentLines: string[]): number[] => {
   return markdownContentLines.reduce((state, line, lineIndex, lines) => {
-    const lastIndex = lineIndex === 0 ? 0 : state[lineIndex - 1] + lines[lineIndex - 1].length + 1
+    state[lineIndex] = lineIndex === 0 ? 0 : state[lineIndex - 1] + lines[lineIndex - 1].length + 1
-    return [...state, lastIndex]
+    return state
-  }, [] as number[])
+  }, new Array<number>(markdownContentLines.length))
 }