REFACTORING: ScriptEditor (#560)

src/ScriptEditor/ui/Editor.tsx

@@ -1,10 +1,9 @@
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import { useEffect, useRef } from "react";
+import { useScriptEditorContext } from "./ScriptEditorContext";
 
 interface EditorProps {
-  /** Editor options */
-  options: monaco.editor.IEditorOptions;
   /** Function to be ran prior to mounting editor */
   beforeMount: () => void;
   /** Function to be ran after mounting editor */
@@ -13,35 +12,38 @@ interface EditorProps {
   onChange: (newCode?: string) => void;
 }
 
-export function Editor({ options, beforeMount, onMount, onChange }: EditorProps) {
+export function Editor({ beforeMount, onMount, onChange }: EditorProps) {
   const containerDiv = useRef<HTMLDivElement | null>(null);
-  const editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const subscription = useRef<monaco.IDisposable | null>(null);
 
+  const { options } = useScriptEditorContext();
+
   useEffect(() => {
     if (!containerDiv.current) return;
     // Before initializing monaco editor
     beforeMount();
 
     // Initialize monaco editor
-    editor.current = monaco.editor.create(containerDiv.current, {
+    editorRef.current = monaco.editor.create(containerDiv.current, {
       value: "",
       automaticLayout: true,
       language: "javascript",
       ...options,
+      glyphMargin: true,
     });
 
     // After initializing monaco editor
-    onMount(editor.current);
-    subscription.current = editor.current.onDidChangeModelContent(() => {
-      onChange(editor.current?.getValue());
+    onMount(editorRef.current);
+    subscription.current = editorRef.current.onDidChangeModelContent(() => {
+      onChange(editorRef.current?.getValue());
     });
 
     // Unmounting
     return () => {
       subscription.current?.dispose();
-      editor.current?.getModel()?.dispose();
-      editor.current?.dispose();
+      editorRef.current?.getModel()?.dispose();
+      editorRef.current?.dispose();
     };
   }, []);