Merge branch 'lucko:master' into master

.prettierrc

@@ -5,5 +5,6 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "arrowParens": "avoid",
-  "quoteProps": "consistent"
-}
+  "quoteProps": "consistent",
+  "plugins": ["prettier-plugin-organize-imports"]
+}

package.json

@@ -3,38 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@monaco-editor/react": "^4.5.1",
-    "copy-to-clipboard": "^3.3.1",
-    "history": "^5.0.0",
+    "@monaco-editor/react": "^4.6.0",
+    "copy-to-clipboard": "^3.3.3",
+    "history": "^5.3.0",
     "local-storage": "^2.0.0",
+    "monaco-editor": "^0.52.0",
     "monaco-themes": "^0.4.4",
-    "pako": "^2.0.3",
-    "react": "^18.2.0",
-    "react-device-detect": "^2.1.2",
-    "react-dom": "^18.2.0",
+    "pako": "^2.1.0",
+    "react": "^19.0.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^19.0.0",
     "react-scripts": "^5.0.1",
-    "styled-components": "^5.2.1",
-    "typescript": "^4.8.4",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.7.2",
     "whatwg-mimetype": "^3.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.0",
-    "@types/jest": "^29.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
     "@types/node": "^18.11.9",
-    "@types/pako": "^2.0.0",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@types/styled-components": "^5.1.26",
-    "@types/whatwg-mimetype": "^3.0.0",
-    "monaco-editor": "^0.34.1",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.1.1"
+    "@types/pako": "^2.0.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/whatwg-mimetype": "^3.0.2",
+    "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "CI=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write '**/*.ts' '**/*.tsx' '**/*.css'",

src/components/Button.tsx

@@ -9,7 +9,7 @@ const Button = styled.div`
   color: inherit;
   text-decoration: none;
 
-  :hover {
+  &:hover {
     background: ${props => props.theme.highlight};
   }
 

src/components/Editor.tsx

@@ -27,7 +27,7 @@ export default function Editor({
 }: EditorProps) {
   const [language, setLanguage] = useState<string>('plain');
   const [readOnly, setReadOnly] = useState<boolean>(isMobile && !!pasteId);
-  const resetFunction = useRef<ResetFunction>();
+  const resetFunction = useRef<ResetFunction>(null);
 
   const [theme, setTheme] = usePreference<keyof Themes>(
     'theme',

src/components/EditorControls.tsx

@@ -1,6 +1,6 @@
 import copy from 'copy-to-clipboard';
 import history from 'history/browser';
-import { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import { RefObject, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import themes, { Themes } from '../style/themes';
@@ -12,7 +12,7 @@ import MenuButton from './MenuButton';
 
 export interface EditorControlsProps {
   actualContent: string;
-  resetFunction: MutableRefObject<ResetFunction | undefined>;
+  resetFunction: RefObject<ResetFunction | null>;
   language: string;
   setLanguage: (value: string) => void;
   readOnly: boolean;
@@ -136,7 +136,7 @@ export default function EditorControls({
 const Header = styled.header`
   position: fixed;
   top: 0;
-  z-index: 2;
+  z-index: 10;
   width: 100%;
   height: 2em;
   color: ${props => props.theme.primary};

src/components/EditorGlobalStyle.tsx

@@ -1,7 +1,6 @@
-import { createGlobalStyle, ThemeProps } from 'styled-components';
-import { Theme } from '../style/themes';
+import { createGlobalStyle } from 'styled-components';
 
-const EditorGlobalStyle = createGlobalStyle<ThemeProps<Theme>>`
+const EditorGlobalStyle = createGlobalStyle`
   html, body {
     color-scheme: ${props => props.theme.lightOrDark};
     scrollbar-color: ${props => props.theme.lightOrDark};

src/components/EditorTextArea.tsx

@@ -5,19 +5,20 @@ import Editor, {
   OnMount,
 } from '@monaco-editor/react';
 import history from 'history/browser';
-import React, {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import themes, { Theme } from '../style/themes';
 
 import type { editor } from 'monaco-editor';
+import { diffLanguage } from '../util/languages/diff';
+import { logLanguage } from '../util/languages/log';
 import { ResetFunction } from './Editor';
 
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
+
 export interface EditorTextAreaProps {
   forcedContent: string;
   actualContent: string;
@@ -26,7 +27,7 @@ export interface EditorTextAreaProps {
   language: string;
   fontSize: number;
   readOnly: boolean;
-  resetFunction: MutableRefObject<ResetFunction | undefined>;
+  resetFunction: RefObject<ResetFunction | null>;
 }
 
 export default function EditorTextArea({
@@ -60,6 +61,11 @@ export default function EditorTextArea({
       monaco.editor.defineTheme(theme.id, theme.editor);
     }
 
+    monaco.languages.register({ id: 'log' });
+    monaco.languages.setMonarchTokensProvider('log', logLanguage);
+    monaco.languages.register({ id: 'diff' });
+    monaco.languages.setMonarchTokensProvider('diff', diffLanguage);
+
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
       noSemanticValidation: true,
       noSyntaxValidation: true,
@@ -242,7 +248,7 @@ function useSelectedLine(): [SelectedLine, ToggleSelectedFunction] {
 }
 
 function useLineNumberMagic(
-  editorAreaRef: React.RefObject<HTMLDivElement>,
+  editorAreaRef: RefObject<HTMLDivElement | null>,
   selected: SelectedLine,
   toggleSelected: ToggleSelectedFunction,
   forcedContent: string,
@@ -257,13 +263,13 @@ function useLineNumberMagic(
     }
 
     const handler = (click: MouseEvent) => {
-      const target = click?.target as HTMLElement;
+      const element = document.elementFromPoint(click.x, click.y);
       if (
-        target &&
-        target.classList.contains('line-numbers') &&
-        target.textContent
+        element &&
+        element.classList.contains('line-numbers') &&
+        element.textContent
       ) {
-        toggleSelected(parseInt(target.textContent), click);
+        toggleSelected(parseInt(element.textContent), click);
       }
     };
 

src/components/MenuButton.tsx

@@ -92,7 +92,7 @@ const Menu = styled.ul`
   }
 
   > li.selected {
-    ::before {
+    &::before {
       content: '*';
       font-weight: bold;
     }

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './style/base.css';
+import type {} from './style/styled';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/style/styled.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { Theme } from './themes';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}

src/style/themes.ts

@@ -65,6 +65,14 @@ const themes: Themes = {
         keyword: '#ff7b72',
         type: '#ffa657',
         variable: '#ffa657',
+        logInfo: '#3fb950', // green.3
+        logError: '#f85149', // red.4
+        logWarning: '#d29922', // yellow.3
+        logDate: '#33B3AE', // teal.3
+        logException: '#f8e3a1', // yellow.0
+        diffMeta: '#33B3AE', // teal.3
+        diffAddition: '#3fb950', // green.3
+        diffDeletion: '#f85149', // red.4
       },
     }),
   },
@@ -96,6 +104,14 @@ const themes: Themes = {
         keyword: '#0077aa',
         type: '#DD4A68',
         variable: '#ee9900',
+        logInfo: '#2da44e', // green.4
+        logError: '#cf222e', // red.5
+        logWarning: '#d4a72c', // yellow.3
+        logDate: '#136061', // teal.6
+        logException: '#7d4e00', // yellow.6
+        diffMeta: '#136061', // teal.6
+        diffAddition: '#2da44e', // green.4
+        diffDeletion: '#cf222e', // red.5
       },
     }),
   },
@@ -110,7 +126,16 @@ const themes: Themes = {
       color: '#586e75',
       backgroundColor: '#44475a',
     },
-    editor: dracula as editor.IStandaloneThemeData,
+    editor: addExtraColors(dracula as editor.IStandaloneThemeData, {
+      logInfo: '#50FA7B', // green
+      logError: '#FF5555', // red
+      logWarning: '#FFB86C', // orange
+      logDate: '#BD93F9', // purple
+      logException: '#F1FA8C', // yellow
+      diffMeta: '#BD93F9', // purple
+      diffAddition: '#50FA7B', // green
+      diffDeletion: '#FF5555', // red
+    }),
   },
   'monokai': {
     id: 'monokai',
@@ -123,7 +148,16 @@ const themes: Themes = {
       color: '#49483E',
       backgroundColor: '#3E3D32',
     },
-    editor: monokai as editor.IStandaloneThemeData,
+    editor: addExtraColors(monokai as editor.IStandaloneThemeData, {
+      logInfo: '#a6e22e', // green
+      logError: '#f92672', // red
+      logWarning: '#fd971f', // orange
+      logDate: '#AB9DF2', // purple
+      logException: '#F1FA8C', // yellow
+      diffMeta: '#AB9DF2', // purple
+      diffAddition: '#a6e22e', // green
+      diffDeletion: '#f92672', // red
+    }),
   },
   'solarized': {
     id: 'solarized',
@@ -136,7 +170,16 @@ const themes: Themes = {
       color: '#93a1a1', // base1
       backgroundColor: '#073642', // base02
     },
-    editor: solarizedDark as editor.IStandaloneThemeData,
+    editor: addExtraColors(solarizedDark as editor.IStandaloneThemeData, {
+      logInfo: '#268bd2', // blue
+      logError: '#dc322f', // red
+      logWarning: '#b58900', // yellow
+      logDate: '#2aa198', // cyan
+      logException: '#859900', // green
+      diffMeta: '#2aa198', // cyan
+      diffAddition: '#859900', // green
+      diffDeletion: '#dc322f', // red
+    }),
   },
   'solarized-light': {
     id: 'solarized-light',
@@ -149,7 +192,16 @@ const themes: Themes = {
       color: '#586e75', // base01
       backgroundColor: '#eee8d5', // base2
     },
-    editor: solarizedLight as editor.IStandaloneThemeData,
+    editor: addExtraColors(solarizedLight as editor.IStandaloneThemeData, {
+      logInfo: '#268bd2', // blue
+      logError: '#dc322f', // red
+      logWarning: '#b58900', // yellow
+      logDate: '#2aa198', // cyan
+      logException: '#859900', // green
+      diffMeta: '#2aa198', // cyan
+      diffAddition: '#859900', // green
+      diffDeletion: '#dc322f', // red
+    }),
   },
   'catppuccin-latte': {
     id: 'catppuccin-latte',
@@ -300,6 +352,17 @@ const themes: Themes = {
 
 export default themes;
 
+interface ExtraColors {
+  logInfo: Color;
+  logError: Color;
+  logWarning: Color;
+  logDate: Color;
+  logException: Color;
+  diffMeta: Color;
+  diffAddition: Color;
+  diffDeletion: Color;
+}
+
 interface MonacoThemeProps {
   base: 'vs' | 'vs-dark';
   colors: {
@@ -315,7 +378,7 @@ interface MonacoThemeProps {
     keyword: Color;
     type: Color;
     variable: Color;
-  };
+  } & ExtraColors;
 }
 
 export function makeMonacoTheme(
@@ -353,10 +416,40 @@ export function makeMonacoTheme(
       { token: 'identifier', foreground: colors.primary },
       { token: 'type', foreground: colors.type },
       { token: 'comment', foreground: colors.comment },
+      { token: 'info.log', foreground: colors.logInfo },
+      { token: 'error.log', foreground: colors.logError, fontStyle: 'bold' },
+      { token: 'warning.log', foreground: colors.logWarning },
+      { token: 'date.log', foreground: colors.logDate },
+      { token: 'exception.log', foreground: colors.logException },
+      { token: 'meta.diff', foreground: colors.diffMeta },
+      { token: 'addition.diff', foreground: colors.diffAddition },
+      { token: 'deletion.diff', foreground: colors.diffDeletion },
     ],
     colors: {
       'editor.background': `#${colors.background}`,
       'editor.foreground': `#${colors.primary}`,
     },
   };
 }
+
+export function addExtraColors(
+  theme: editor.IStandaloneThemeData,
+  extraColors: ExtraColors
+): editor.IStandaloneThemeData {
+  const colors = Object.fromEntries(
+    Object.entries(extraColors).map(([key, color]) => [key, color.substring(1)])
+  ) as Record<keyof ExtraColors, string>;
+  theme.rules.push(
+    ...[
+      { token: 'info.log', foreground: colors.logInfo },
+      { token: 'error.log', foreground: colors.logError, fontStyle: 'bold' },
+      { token: 'warning.log', foreground: colors.logWarning },
+      { token: 'date.log', foreground: colors.logDate },
+      { token: 'exception.log', foreground: colors.logException },
+      { token: 'meta.diff', foreground: colors.diffMeta },
+      { token: 'addition.diff', foreground: colors.diffAddition },
+      { token: 'deletion.diff', foreground: colors.diffDeletion },
+    ]
+  );
+  return theme;
+}