From ced4cd953c7298bf016b5789ccf9619e64026e70 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Mon, 26 Jun 2023 00:09:07 +0200 Subject: [PATCH] fix(frontend): improve performance by reducing array constructions Signed-off-by: Tilman Vatteroth --- .../document-sync/y-text-sync-view-plugin.ts | 6 +++-- .../editor-page/editor-pane/linter/linter.ts | 8 ++++++- .../linter/single-line-regex-linter.ts | 22 ++++++++----------- .../reveal/process-reveal-comment-nodes.ts | 3 ++- .../utils/line-content-to-line-id-mapper.ts | 5 +---- .../calculate-line-start-indexes.ts | 6 ++--- 6 files changed, 26 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/document-sync/y-text-sync-view-plugin.ts b/frontend/src/components/editor-page/editor-pane/codemirror-extensions/document-sync/y-text-sync-view-plugin.ts index 974331939..0beb1b51c 100644 --- a/frontend/src/components/editor-page/editor-pane/codemirror-extensions/document-sync/y-text-sync-view-plugin.ts +++ b/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 { diff --git a/frontend/src/components/editor-page/editor-pane/linter/linter.ts b/frontend/src/components/editor-page/editor-pane/linter/linter.ts index ac569a062..13d7655b6 100644 --- a/frontend/src/components/editor-page/editor-pane/linter/linter.ts +++ b/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] + ) } diff --git a/frontend/src/components/editor-page/editor-pane/linter/single-line-regex-linter.ts b/frontend/src/components/editor-page/editor-pane/linter/single-line-regex-linter.ts index 726f33a54..2c3a742b1 100644 --- a/frontend/src/components/editor-page/editor-pane/linter/single-line-regex-linter.ts +++ b/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 - .toString() - .split('\n') - .reduce( - (state, line, lineIndex, lines) => [ - ...state, - { - line, - startIndex: lineIndex === 0 ? 0 : state[lineIndex - 1].startIndex + lines[lineIndex - 1].length + 1 - } as LineWithStartIndex - ], - [] as LineWithStartIndex[] - ) + const lines = view.state.doc.toString().split('\n') + return lines + .reduce((state, line, lineIndex, lines) => { + state[lineIndex] = { + line, + startIndex: lineIndex === 0 ? 0 : state[lineIndex - 1].startIndex + lines[lineIndex - 1].length + 1 + } as LineWithStartIndex + return state + }, new Array(lines.length)) .map(({ line, startIndex }) => ({ lineStartIndex: startIndex, regexResult: this.regex.exec(line) diff --git a/frontend/src/components/markdown-renderer/extensions/reveal/process-reveal-comment-nodes.ts b/frontend/src/components/markdown-renderer/extensions/reveal/process-reveal-comment-nodes.ts index 8728abec8..6c6de85f6 100644 --- a/frontend/src/components/markdown-renderer/extensions/reveal/process-reveal-comment-nodes.ts +++ b/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) { diff --git a/frontend/src/components/markdown-renderer/markdown-to-react/utils/line-content-to-line-id-mapper.ts b/frontend/src/components/markdown-renderer/markdown-to-react/utils/line-content-to-line-id-mapper.ts index 91e800803..d207eea41 100644 --- a/frontend/src/components/markdown-renderer/markdown-to-react/utils/line-content-to-line-id-mapper.ts +++ b/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( - (previousLineKeys, currentChange) => [...previousLineKeys, ...this.convertChangeToLinesWithIds(currentChange)], - [] as LineWithId[] - ) + .flatMap((currentChange) => this.convertChangeToLinesWithIds(currentChange)) } /** diff --git a/frontend/src/redux/note-details/calculate-line-start-indexes.ts b/frontend/src/redux/note-details/calculate-line-start-indexes.ts index efb91d121..e351fe19e 100644 --- a/frontend/src/redux/note-details/calculate-line-start-indexes.ts +++ b/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 - return [...state, lastIndex] - }, [] as number[]) + state[lineIndex] = lineIndex === 0 ? 0 : state[lineIndex - 1] + lines[lineIndex - 1].length + 1 + return state + }, new Array(markdownContentLines.length)) }