update dependencies

package.json

@@ -7,6 +7,7 @@
     "copy-to-clipboard": "^3.3.3",
     "history": "^5.3.0",
     "local-storage": "^2.0.0",
+    "monaco-editor": "^0.51.0",
     "monaco-themes": "^0.4.4",
     "pako": "^2.1.0",
     "react": "^18.2.0",
@@ -27,7 +28,6 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/whatwg-mimetype": "^3.0.2",
-    "monaco-editor": "^0.44.0",
     "prettier": "^3.1.0",
     "prettier-plugin-organize-imports": "^3.2.4"
   },

src/components/EditorControls.tsx

@@ -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/EditorTextArea.tsx

@@ -19,6 +19,11 @@ import type { editor } from 'monaco-editor';
 import { ResetFunction } from './Editor';
 import { logLanguage } from '../util/log-language';
 
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
+
+loader.config({ monaco });
+
 export interface EditorTextAreaProps {
   forcedContent: string;
   actualContent: string;
@@ -261,13 +266,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);
       }
     };