Upgrade dependencies

Author: lucko

package.json

@@ -11,34 +11,35 @@
     "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@monaco-editor/react": "^4.6.0",
     "@catppuccin/palette": "^1.7.1",
+    "@monaco-editor/react": "^4.8.0-rc.3",
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",
-    "monaco-editor": "^0.52.0",
-    "monaco-themes": "^0.4.4",
+    "monaco-editor": "^0.55.1",
+    "monaco-themes": "^0.4.8",
     "pako": "^2.1.0",
+    "react": "^19.2.4",
     "react-device-detect": "^2.2.3",
-    "styled-components": "^6.1.13",
-    "whatwg-mimetype": "^3.0.0"
+    "react-dom": "^19.2.4",
+    "styled-components": "^6.3.11",
+    "whatwg-mimetype": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/pako": "^2.0.3",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "@types/pako": "^2.0.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/whatwg-mimetype": "^3.0.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5",
-    "prettier": "^3.4.2",
-    "prettier-plugin-organize-imports": "^4.1.0"
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "eslint": "^10.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.3.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1"
   }
 }

src/App.tsx

@@ -4,8 +4,8 @@ import About from './components/About.tsx';
 import Editor from './components/Editor';
 import usePreference from './hooks/usePreference.ts';
 import themes, { Themes } from './style/themes.ts';
-import { loadFromBytebin } from './util/storage';
 import { useQueryRouting } from './util/constants';
+import { loadFromBytebin } from './util/storage';
 
 const INITIAL = Symbol();
 const LOADING = Symbol();
@@ -33,6 +33,7 @@ export default function App() {
 
   useEffect(() => {
     if (pasteId && state === INITIAL) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setState(LOADING);
       setContent('Loading...');
 

src/components/About.tsx

@@ -180,6 +180,10 @@ const AboutPanel = styled.div`
   span {
     color: ${props => props.theme.logo};
   }
+
+  a {
+    color: ${props => props.theme.logo};
+  }
 `;
 
 const BannerContainer = styled.div`

src/components/Editor.tsx

@@ -48,6 +48,7 @@ export default function Editor({
 
   useEffect(() => {
     if (contentType) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLanguage(contentType);
     }
   }, [contentType]);
@@ -84,7 +85,7 @@ export default function Editor({
         fontSize={fontSize}
         readOnly={readOnly}
         wordWrap={wordWrap}
-        resetFunction={resetFunction}
+        resetFunctionRef={resetFunction}
       />
     </>
   );

src/components/EditorControls.tsx

@@ -4,9 +4,9 @@ import { RefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
+import { useQueryRouting } from '../util/constants';
 import { languages } from '../util/highlighting';
 import { saveToBytebin } from '../util/storage';
-import { useQueryRouting } from '../util/constants';
 import Button from './Button';
 import { ResetFunction } from './Editor';
 import MenuButton from './MenuButton';
@@ -44,6 +44,7 @@ export default function EditorControls({
   const [recentlySaved, setRecentlySaved] = useState<boolean>(false);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setRecentlySaved(false);
   }, [actualContent, language]);
 

src/components/EditorTextArea.tsx

@@ -5,14 +5,7 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import {
-  MutableRefObject,
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import themes, { Theme } from '../style/themes';
 
@@ -62,7 +55,7 @@ export interface EditorTextAreaProps {
   fontSize: number;
   readOnly: boolean;
   wordWrap: boolean;
-  resetFunction: MutableRefObject<ResetFunction | null>;
+  resetFunctionRef: RefObject<ResetFunction | null>;
 }
 
 export default function EditorTextArea({
@@ -73,7 +66,7 @@ export default function EditorTextArea({
   fontSize,
   readOnly,
   wordWrap,
-  resetFunction,
+  resetFunctionRef,
 }: EditorTextAreaProps) {
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
   const [monaco, setMonaco] = useState<Monaco>();
@@ -129,7 +122,7 @@ export default function EditorTextArea({
     setEditor(editor);
     setMonaco(monaco);
 
-    resetFunction.current = () => {
+    resetFunctionRef.current = () => {
       editor.setValue('');
       editor.focus();
     };

src/components/MenuButton.tsx

@@ -132,6 +132,7 @@ const Menu = styled.ul`
 
   > li {
     padding: 0em 1em 0.05em 1em;
+    color: ${props => props.theme.primary};
   }
 
   > li:hover {

src/style/themes.ts

@@ -1,9 +1,14 @@
 import type { editor } from 'monaco-editor';
 
 import { CatppuccinFlavor, ColorFormat, flavors } from '@catppuccin/palette';
+
+// @ts-expect-error Alias import added in vite.config.ts
 import dracula from 'monaco-themes/themes/Dracula.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import monokai from 'monaco-themes/themes/Monokai.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedDark from 'monaco-themes/themes/Solarized-dark.json';
+// @ts-expect-error Alias import added in vite.config.ts
 import solarizedLight from 'monaco-themes/themes/Solarized-light.json';
 
 type Color = `#${string}`;
@@ -87,7 +92,7 @@ const themes: Themes = {
     secondary: '#022550',
     highlight: '#36368c',
     background: '#ffffff',
-    logo: '#022550',
+    logo: '#00a2ff',
     lightOrDark: 'light',
 
     highlightedLine: {

src/util/constants.ts

@@ -1,5 +1,5 @@
 export const bytebinUrl =
   import.meta.env.VITE_BYTEBIN_URL || 'https://api.pastes.dev/';
 export const postUrl = bytebinUrl + 'post';
-export const useQueryRouting = 
+export const useQueryRouting =
   import.meta.env.VITE_USE_QUERY_ROUTING === 'true';

vite.config.ts

@@ -1,7 +1,15 @@
 import react from '@vitejs/plugin-react-swc';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      'monaco-themes/themes': fileURLToPath(
+        new URL('./node_modules/monaco-themes/themes', import.meta.url)
+      ),
+    },
+  },
 });