From ffc9c034523bdac0714ec00dd22d67015a7034db Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Sat, 22 Jan 2022 21:29:28 +0530
Subject: [PATCH] Cleanup and fix bug in code editor

---
 ui/code-editor/index.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui/code-editor/index.tsx b/ui/code-editor/index.tsx
index 98e2a73..6b3dac6 100644
--- a/ui/code-editor/index.tsx
+++ b/ui/code-editor/index.tsx
@@ -42,8 +42,6 @@ type Props = {
 const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
   const [editor, setEditor] = React.useState<EditorInstance | null>(null);
   const [monaco, setMonaco] = React.useState<MonacoInstance | null>(null);
-  // const editorRef = React.useRef<EditorInstance | null>(null);
-  // const monacoRef = React.useRef<MonacoInstance | null>(null);
   const highlightRange = React.useRef<string[]>([]);
   const { isDark } = useDarkMode();
 
@@ -68,17 +66,22 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
   });
 
   /** Update code highlights */
-  const updateHighlights = React.useCallback((hl: DocumentRange | null) => {
-    // Remove previous highlights
-    const prevRange = highlightRange.current;
-    editor!.deltaDecorations(prevRange, []);
+  const updateHighlights = React.useCallback(
+    (hl: DocumentRange | null) => {
+      if (!editor) return;
 
-    // Add new highlights
-    if (!hl) return;
-    const newRange = createHighlightRange(monaco!, hl);
-    const rangeStr = editor!.deltaDecorations([], [newRange]);
-    highlightRange.current = rangeStr;
-  }, []);
+      // Remove previous highlights
+      const prevRange = highlightRange.current;
+      editor.deltaDecorations(prevRange, []);
+
+      // Add new highlights
+      if (!hl) return;
+      const newRange = createHighlightRange(monaco!, hl);
+      const rangeStr = editor.deltaDecorations([], [newRange]);
+      highlightRange.current = rangeStr;
+    },
+    [editor]
+  );
 
   // Provide handle to parent for accessing editor contents
   React.useImperativeHandle(