auto scroll to selected line

src/components/EditorTextArea.js

@@ -16,7 +16,7 @@ export default function EditorTextArea({
   const [monaco, setMonaco] = useState();
   const [selected, toggleSelected] = useSelectedLine();
   const editorAreaRef = useRef();
-  useLineNumberMagic(editorAreaRef, selected, toggleSelected, editor, monaco);
+  useLineNumberMagic(editorAreaRef, selected, toggleSelected, forcedContent, editor, monaco);
   usePlaceholderText(actualContent, editor, monaco);
 
   function beforeMount(monaco) {
@@ -112,6 +112,7 @@ function useLineNumberMagic(
   editorAreaRef,
   selected,
   toggleSelected,
+  forcedContent,
   editor,
   monaco
 ) {
@@ -134,27 +135,34 @@ function useLineNumberMagic(
   }, [editorAreaRef, toggleSelected]);
 
   // apply a 'highlighed' decoration to the selected lines
+  // and scroll them into view if not already
   useEffect(() => {
-    if (!editor || !monaco) {
+    if (!editor || !monaco || selected[0] === -1) {
       return;
     }
 
-    const newDecorations = [];
+    // apply a decoration
-    if (selected[0] !== -1) {
+    const newDecorations = [{
-      newDecorations.push({
+      range: new monaco.Range(selected[0], 1, selected[1], 1),
-        range: new monaco.Range(selected[0], 1, selected[1], 1),
+      options: {
-        options: {
+        isWholeLine: true,
-          isWholeLine: true,
+        linesDecorationsClassName: 'highlighted-line',
-          linesDecorationsClassName: 'highlighted-line',
+      },
-        },
+    }];
-      });
-    }
     const decorations = editor.deltaDecorations([], newDecorations);
 
+    // scroll the selected line into view
+    if (selected[0] === selected[1]) {
+      editor.revealLineInCenterIfOutsideViewport(selected[0]);
+    } else {
+      editor.revealLinesInCenterIfOutsideViewport(selected[0], selected[1]);
+    }
+
+    // cleanup by removing the decorations
     return () => {
       editor.deltaDecorations(decorations, []);
     };
-  }, [editor, monaco, selected]);
+  }, [editor, monaco, selected, forcedContent]);
 }
 
 function useSelectedLine() {

src/style/themes.js

@@ -157,7 +157,7 @@ export function makeMonacoTheme(theme) {
       },
       {
         token: 'identifier',
-        foreground: theme.editor.function.substring(1),
+        foreground: theme.editor.primary.substring(1),
       },
       {
         token: 'type',
@@ -167,10 +167,6 @@ export function makeMonacoTheme(theme) {
         token: 'comment',
         foreground: theme.editor.comment.substring(1),
       },
-      {
-        token: 'identifier.java',
-        foreground: theme.editor.primary.substring(1),
-      },
     ],
     colors: {
       'editor.background': theme.editor.background,