From e1a25fa894875701f5d991ff51e5497590f8ff01 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 8 Sep 2021 20:27:36 +0530
Subject: [PATCH] fix: broken conditional rendering of codemirror

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 helpers/editor/codemirror.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/helpers/editor/codemirror.ts b/helpers/editor/codemirror.ts
index e1e8791a3..487365c49 100644
--- a/helpers/editor/codemirror.ts
+++ b/helpers/editor/codemirror.ts
@@ -43,7 +43,7 @@ const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
   gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
   extraKeys: {
     "Ctrl-Space": "autocomplete",
-  }
+  },
 }
 
 /**
@@ -115,8 +115,9 @@ export function useCodemirror(
     }
   }
 
-  // Boot-up CodeMirror, set the value and listeners
-  onMounted(() => {
+  const initialize = () => {
+    if (!el.value) return
+
     cm.value = CodeMirror(el.value!, DEFAULT_EDITOR_CONFIG)
 
     setTheme()
@@ -130,15 +131,16 @@ export function useCodemirror(
         value.value = instance.getValue()
       }
     })
+  }
 
-    // /* TODO: Show autocomplete on typing (this is just for testing) */
-    // cm.value.on("keyup", (instance, event) => {
-    //   if (!instance.state.completionActive && event.key !== "Enter") {
-    //     instance.showHint()
-    //   }
-    // })
+  // Boot-up CodeMirror, set the value and listeners
+  onMounted(() => {
+    initialize()
   })
 
+  // Reinitialize if the target ref updates
+  watch(el, initialize)
+
   const setTheme = () => {
     if (cm.value) {
       cm.value?.setOption("theme", getThemeName($colorMode.value))