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 "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"
+import { ref, watch } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 
 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) => {
-    editor.setValue(value)
-  }
+  (val) => (value.value = val)
 )
 
-watch(
-  () => props.mode,
-  (mode) => {
-    editor.setOption("mode", mode)
-  }
-)
+watch(value, (val) => emit("input", val))
 
 const editor = ref<any | null>(null)
 
-const cm = ref<Codemirror.Editor | null>(null)
-
-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)
-  })
+useCodemirror(editor, value, {
+  mode: props.mode,
 })
 </script>