chore(deps): upgrade dependencies for frontend + lint fixes

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

frontend/package.json

@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@codemirror/autocomplete": "6.18.1",
-    "@codemirror/commands": "6.6.2",
+    "@codemirror/commands": "6.7.1",
-    "@codemirror/lang-markdown": "6.2.5",
+    "@codemirror/lang-markdown": "6.3.0",
     "@codemirror/language": "6.10.3",
     "@codemirror/language-data": "6.5.1",
     "@codemirror/lint": "6.8.2",
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "6.1.2",
-    "@codemirror/view": "6.33.0",
+    "@codemirror/view": "6.34.1",
-    "@dicebear/core": "9.2.1",
+    "@dicebear/core": "9.2.2",
-    "@dicebear/identicon": "9.2.1",
+    "@dicebear/identicon": "9.2.2",
-    "@fontsource/source-sans-pro": "5.0.8",
+    "@fontsource/source-sans-pro": "5.1.0",
     "@hedgedoc/commons": "workspace:commons",
     "@hedgedoc/html-to-react": "workspace:html-to-react",
     "@hedgedoc/markdown-it-plugins": "workspace:markdown-it-plugins",
@@ -50,11 +50,10 @@
     "@orama/orama": "2.0.23",
     "@react-hook/resize-observer": "2.0.2",
     "@redux-devtools/core": "4.0.0",
-    "@reduxjs/toolkit": "2.2.7",
+    "@reduxjs/toolkit": "2.3.0",
     "@svgr/webpack": "8.1.0",
-    "@types/katex": "0.16.7",
+    "@uiw/react-codemirror": "4.23.5",
-    "@uiw/react-codemirror": "4.23.3",
+    "abcjs": "6.4.3",
-    "abcjs": "6.4.2",
     "bootstrap": "5.3.3",
     "copy-webpack-plugin": "12.0.2",
     "cross-env": "7.0.3",
@@ -65,7 +64,7 @@
     "dom-serializer": "2.0.0",
     "domhandler": "5.0.3",
     "dompurify": "3.1.6",
-    "emoji-picker-element": "1.22.4",
+    "emoji-picker-element": "1.22.8",
     "emoji-picker-element-data": "1.6.1",
     "eventemitter2": "6.4.9",
     "fast-deep-equal": "3.1.3",
@@ -73,14 +72,14 @@
     "flowchart.js": "1.18.0",
     "highlight.js": "11.10.0",
     "htmlparser2": "9.1.0",
-    "i18next": "23.14.0",
+    "i18next": "23.16.2",
     "i18next-browser-languagedetector": "8.0.0",
     "i18next-resources-to-backend": "1.2.1",
     "katex": "0.16.11",
     "luxon": "3.5.0",
     "markdown-it": "13.0.2",
     "markdown-it-abbr": "2.0.0",
-    "markdown-it-anchor": "9.1.0",
+    "markdown-it-anchor": "9.2.0",
     "markdown-it-container": "4.0.0",
     "markdown-it-deflist": "3.0.0",
     "markdown-it-emoji": "3.0.0",
@@ -92,24 +91,24 @@
     "markdown-it-regex": "0.2.0",
     "markdown-it-sub": "2.0.0",
     "markdown-it-sup": "2.0.0",
-    "mermaid": "11.0.2",
+    "mermaid": "11.3.0",
     "next": "14.2.10",
-    "picocolors": "1.0.1",
+    "picocolors": "1.1.1",
     "react": "18.3.1",
-    "react-bootstrap": "2.10.4",
+    "react-bootstrap": "2.10.5",
     "react-bootstrap-icons": "1.11.4",
     "react-bootstrap-typeahead": "6.3.2",
     "react-diff-viewer": "3.1.1",
     "react-dom": "18.3.1",
-    "react-i18next": "15.0.1",
+    "react-i18next": "15.1.0",
     "react-redux": "9.1.2",
     "react-use": "17.5.1",
     "redux": "5.0.1",
     "reveal.js": "5.1.0",
     "sanitize-filename": "1.6.3",
-    "sass": "1.77.8",
+    "sass": "1.80.3",
     "sharp": "0.33.5",
-    "tlds": "1.254.0",
+    "tlds": "1.255.0",
     "twemoji-colr-font": "15.0.3",
     "uuid": "10.0.0",
     "vega": "5.30.0",
@@ -117,48 +116,47 @@
     "vega-lite": "5.21.0",
     "words-count": "2.0.2",
     "ws": "8.18.0",
-    "yjs": "13.6.18"
+    "yjs": "13.6.20"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "14.2.7",
     "@testing-library/cypress": "10.0.2",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/d3-graphviz": "2.6.10",
-    "@types/diff": "5.2.2",
+    "@types/diff": "5.2.3",
     "@types/dompurify": "3.0.5",
-    "@types/jest": "29.5.12",
+    "@types/jest": "29.5.13",
+    "@types/katex": "0.16.7",
     "@types/luxon": "3.4.2",
     "@types/markdown-it": "13.0.7",
-    "@types/markdown-it-container": "2.0.9",
+    "@types/markdown-it-container": "2.0.10",
-    "@types/markdown-it-plantuml": "1.4.4",
+    "@types/markdown-it-plantuml": "1.4.5",
     "@types/node": "20.16.2",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
-    "@types/sass": "1.45.0",
+    "@types/uuid": "10.0.0",
-    "@types/testing-library__jest-dom": "5.14.9",
+    "@types/ws": "8.5.12",
-    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "8.11.0",
-    "@types/ws": "8.5.10",
+    "@typescript-eslint/parser": "8.11.0",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
     "csstype": "3.1.3",
-    "cypress": "13.6.6",
+    "cypress": "13.15.0",
     "cypress-commands": "3.0.0",
     "cypress-fill-command": "1.0.2",
     "dotenv-cli": "7.4.2",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.7",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-chai-friendly": "0.7.4",
+    "eslint-plugin-chai-friendly": "1.0.1",
-    "eslint-plugin-cypress": "2.15.2",
+    "eslint-plugin-cypress": "4.0.0",
-    "eslint-plugin-jest": "27.9.0",
+    "eslint-plugin-jest": "28.8.3",
-    "eslint-plugin-n": "14.0.0",
+    "eslint-plugin-n": "17.11.1",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-promise": "6.6.0",
+    "eslint-plugin-promise": "7.1.0",
-    "eslint-plugin-testing-library": "6.3.0",
+    "eslint-plugin-testing-library": "6.4.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.3.3",
@@ -166,7 +164,7 @@
     "ts-loader": "9.5.1",
     "ts-mockery": "1.2.0",
     "ts-node": "11.0.0-beta.1",
-    "typescript": "5.5.4",
+    "typescript": "5.6.3",
     "user-agent-data-types": "0.4.2"
   },
   "packageManager": "yarn@4.4.1"

frontend/src/api/common/api-request-builder/test-utils/expect-fetch.ts

@@ -32,7 +32,7 @@ export const expectFetch = (
       Mock.of<Response>({
         status: requestStatusCode,
         statusText: mapCodeToText(requestStatusCode),
-        json: jest.fn(() => (responseBody ? Promise.resolve(responseBody) : Promise.reject()))
+        json: jest.fn(() => (responseBody ? Promise.resolve(responseBody) : Promise.reject(new Error())))
       })
     )
   }) as typeof global.fetch

frontend/src/app/(editor)/[id]/page.tsx

@@ -27,7 +27,7 @@ const DirectLinkFallback = async ({ params }: PageProps) => {
     if (noteData.metadata.version !== 1) {
       notFound()
     }
-  } catch (error) {
+  } catch {
     notFound()
   }
 

frontend/src/components/application-loader/initializers/index.ts

@@ -44,7 +44,7 @@ export interface InitTask {
 const fetchUserInformation = async (): Promise<void> => {
   try {
     await fetchAndSetUser()
-  } catch (error) {
+  } catch {
     logger.error("Couldn't load user. Probably not logged in.")
   }
 }

frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.spec.tsx

@@ -46,7 +46,7 @@ describe('Copy to clipboard button', () => {
 
   const mockClipboard = (copyIsSuccessful: boolean): jest.Mock => {
     const writeTextToClipboardSpy = jest.fn(() =>
-      copyIsSuccessful ? Promise.resolve() : Promise.reject('mocked clipboard failed')
+      copyIsSuccessful ? Promise.resolve() : Promise.reject(new Error('mocked clipboard failed'))
     )
     Object.assign(global.navigator, {
       clipboard: {

frontend/src/components/common/redirect.tsx

@@ -23,7 +23,11 @@ export const Redirect: React.FC<RedirectProps> = ({ to, replace }) => {
   const router = useRouter()
 
   useEffect(() => {
-    replace ? router.replace(to) : router.push(to)
+    if (replace) {
+      router.replace(to)
+    } else {
+      router.push(to)
+    }
   }, [replace, router, to])
 
   return (

frontend/src/components/common/upload-input.tsx

@@ -32,6 +32,8 @@ export const UploadInput: React.FC<UploadInputProps> = ({ onLoad, allowedFileTyp
   }, [])
 
   const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    // TODO Check and fix this
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     async (event) => {
       const fileInput = event.currentTarget
       if (!fileInput.files || fileInput.files.length < 1) {

frontend/src/components/global-dialogs/motd-modal/fetch-motd.spec.ts

@@ -28,7 +28,7 @@ describe('fetch motd', () => {
   ): jest.SpyInstance<Promise<Response>> => {
     return jest.spyOn(global, 'fetch').mockImplementation((url: RequestInfo | URL) => {
       if (url !== motdUrl) {
-        return Promise.reject('wrong url')
+        return Promise.reject(new Error('wrong url'))
       }
       return Promise.resolve(
         Mock.of<Response>({

frontend/src/components/markdown-renderer/extensions/link-replacer/anchor-node-preprocessor.ts

@@ -39,7 +39,7 @@ export class AnchorNodePreprocessor extends TravelerNodeProcessor {
 
     try {
       node.attribs.href = new URL(url, this.baseUrl).toString()
-    } catch (e) {
+    } catch {
       node.attribs.href = url
     }
   }

frontend/src/components/markdown-renderer/markdown-to-react/utils/node-to-react-transformer.tsx

@@ -74,7 +74,8 @@ export class NodeToReactTransformer {
    * @return the created react element
    */
   private translateElementToReactElement(element: Element, index: number | string): ValidReactDomElement {
-    const elementKey = this.calculateUniqueKey(element).orElseGet(() => (-index).toString())
+    const numericIndex = typeof index === 'number' ? index : Number.parseInt(index)
+    const elementKey = this.calculateUniqueKey(element).orElseGet(() => (-numericIndex).toString())
     const replacement = this.findElementReplacement(element, elementKey)
     if (replacement === null) {
       return null

frontend/src/pages/api/private/config.ts

@@ -57,6 +57,8 @@ const initialConfig: FrontendConfig = {
 let currentConfig: FrontendConfig = initialConfig
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
+  // This is shorter than storing the return boolean in a variable and then calling respondToTestRequest with if
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   respondToMatchingRequest<FrontendConfig>(HttpMethod.GET, req, res, currentConfig, 200, false) ||
     respondToTestRequest<FrontendConfig>(req, res, () => {
       currentConfig = {

frontend/src/redux/history/methods.ts

@@ -96,7 +96,7 @@ export const toggleHistoryEntryPinning = async (noteId: string): Promise<void> =
   const state = store.getState().history
   const entryToUpdate = state.find((entry) => entry.identifier === noteId)
   if (!entryToUpdate) {
-    return Promise.reject(`History entry for note '${noteId}' not found`)
+    return Promise.reject(new Error(`History entry for note '${noteId}' not found`))
   }
   const updatedEntry = {
     ...entryToUpdate,

frontend/src/utils/read-file.ts

@@ -23,8 +23,8 @@ export const readFile = async (file: Blob, fileReaderMode: FileContentFormat): P
     fileReader.addEventListener('load', () => {
       resolve(fileReader.result as string)
     })
-    fileReader.addEventListener('error', (error) => {
+    fileReader.addEventListener('error', (errorObj) => {
-      reject(error)
+      reject(new Error(JSON.stringify(errorObj)))
     })
     switch (fileReaderMode) {
       case FileContentFormat.DATA_URL: