refactor: extract common codemirror logic out to composable

components/smart/CodeMirror.vue

@@ -3,20 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import Codemirror from "codemirror"
+import "codemirror/mode/javascript/javascript"
 
-import "codemirror/lib/codemirror.css"
+import { ref, watch } from "@nuxtjs/composition-api"
-
+import { useCodemirror } from "~/helpers/editor/codemirror"
-import "codemirror/theme/juejin.css"
-
-import "codemirror/addon/display/autorefresh"
-import "codemirror/addon/selection/active-line"
-import "codemirror/addon/edit/closebrackets"
-import "codemirror/addon/display/placeholder"
-
-import { onMounted, ref, watch } from "@nuxtjs/composition-api"
-
-const DEFAULT_THEME = "juejin"
 
 const props = defineProps<{
   value: string
@@ -29,41 +19,18 @@ const emit = defineEmits<{
   (e: "input", value: string): void
 }>()
 
+const value = ref(props.value)
 watch(
   () => props.value,
-  (value) => {
+  (val) => (value.value = val)
-    editor.setValue(value)
-  }
 )
 
-watch(
+watch(value, (val) => emit("input", val))
-  () => props.mode,
-  (mode) => {
-    editor.setOption("mode", mode)
-  }
-)
 
 const editor = ref<any | null>(null)
 
-const cm = ref<Codemirror.Editor | null>(null)
+useCodemirror(editor, value, {
-
+  mode: props.mode,
-onMounted(() => {
-  cm.value = Codemirror(editor.value, {
-    value: props.value,
-    mode: props.mode,
-    lineWrapping: props.wrap,
-    placeholder: props.placeholder,
-    autoRefresh: true,
-    lineNumbers: true,
-    styleActiveLine: true,
-    autoCloseBrackets: true,
-    theme: DEFAULT_THEME,
-    gutters: ["CodeMirror-linenumbers"],
-  })
-  cm.value?.on("change", (cm) => {
-    const val = cm.getValue()
-    emit("input", val)
-  })
 })
 </script>
 

helpers/editor/codemirror.ts

@@ -0,0 +1,69 @@
+import CodeMirror from "codemirror"
+
+import "codemirror/theme/juejin.css"
+
+import "codemirror/lib/codemirror.css"
+
+import "codemirror/addon/fold/foldgutter.css"
+import "codemirror/addon/fold/foldgutter"
+import "codemirror/addon/fold/brace-fold"
+import "codemirror/addon/fold/comment-fold"
+import "codemirror/addon/fold/indent-fold"
+import "codemirror/addon/display/autorefresh"
+
+import { watch, onMounted, ref, Ref } from "@nuxtjs/composition-api"
+
+const DEFAULT_THEME = "juejin"
+
+const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
+  theme: DEFAULT_THEME,
+  autoRefresh: true,
+  lineNumbers: true,
+  foldGutter: true,
+  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+}
+
+/**
+ * A Vue composable to mount and use Codemirror
+ *
+ * NOTE: Make sure to import all the necessary Codemirror modules,
+ * as this function doesn't import any other than the core
+ * @param el Reference to the dom node to attach to
+ * @param value Reference to value to read/write to
+ * @param options CodeMirror options to pass
+ */
+export function useCodemirror(
+  el: Ref<any | null>,
+  value: Ref<string>,
+  options: CodeMirror.EditorConfiguration
+) {
+  const cm = ref<CodeMirror.Editor | null>(null)
+
+  // Boot-up CodeMirror, set the value and listeners
+  onMounted(() => {
+    cm.value = CodeMirror(el.value!, { ...DEFAULT_EDITOR_CONFIG, ...options })
+    cm.value.setValue(value.value)
+
+    cm.value.on("change", (instance) => {
+      // External update propagation (via watchers) should be ignored
+      if (instance.getValue() !== value.value) {
+        value.value = instance.getValue()
+      }
+    })
+  })
+
+  // Watch value updates
+  watch(value, (newVal) => {
+    // Check if we are mounted
+    if (cm.value) {
+      // Don't do anything on internal updates
+      if (cm.value.getValue() !== newVal) {
+        cm.value.setValue(newVal)
+      }
+    }
+  })
+
+  return {
+    cm,
+  }
+}