refactor: ts codemirror

2021-08-31 10:47:00 +05:30
parent 8de544696d
commit 6a1d201e0e
3 changed files with 102 additions and 56 deletions
--- a/components/smart/CodeMirror.vue
+++ b/components/smart/CodeMirror.vue
@@ -2,84 +2,80 @@
  <div ref="editor" class="w-full block"></div>
 </template>

-<script>
+<script setup lang="ts">
 import Codemirror from "codemirror"

 import "codemirror/lib/codemirror.css"
-import "codemirror/theme/juejin.css"
-import "codemirror/addon/fold/foldgutter.css"

+import "codemirror/theme/juejin.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 "codemirror/mode/javascript/javascript"

+import { onMounted, ref, watch } from "@nuxtjs/composition-api"
+
 const DEFAULT_THEME = "juejin"

-export default {
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    mode: {
-      type: Object,
-      default: () => {
-        return {
-          name: "javascript",
-          json: true,
-        }
-      },
-    },
-  },
+const props = defineProps<{
+  value: string
+  mode: string
+}>()

-  data() {
-    return {
-      editor: null,
-      cacheValue: "",
-    }
-  },
+const emit = defineEmits<{
+  (e: "input", value: string): void
+}>()

-  watch: {
-    value(value) {
-      if (value !== this.cacheValue) {
-        this.editor.setValue(value)
-        this.cacheValue = value
-      }
-    },
-    mode(mode) {
-      this.editor.setOption("mode", mode)
-    },
-  },
+watch(
+  () => props.value,
+  (value) => {
+    editor.setValue(value)
+  }
+)

-  mounted() {
-    console.log(Codemirror.modes)
-    this.editor = Codemirror(this.$refs.editor, {
-      value: this.value,
-      mode: this.mode,
-      lineNumbers: true,
-      inputStyle: "textarea",
-      foldGutter: true,
-      theme: DEFAULT_THEME,
-      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-    })
-    this.editor.on("change", (instance) => {
-      const val = instance.doc.getValue()
-      this.cacheValue = val
-      this.$emit("input", val)
-    })
-  },
-}
+watch(
+  () => props.mode,
+  (mode) => {
+    editor.setOption("mode", mode)
+  }
+)
+
+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,
+    autoRefresh: true,
+    lineNumbers: true,
+    foldGutter: true,
+    theme: DEFAULT_THEME,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+  })
+  cm.value?.on("change", (instance) => {
+    const val = instance.getValue()
+    emit("input", val)
+  })
+})
 </script>

-<style>
+<style lang="scss" scoped>
 .CodeMirror {
  @apply block;
  @apply border-b;
  @apply border-dividerLight;
-  @apply h-auto;
  @apply w-full;
+  @apply h-auto;
+}
+
+.CodeMirror-scroll {
+  @apply min-h-32;
 }
 </style>
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
        "@nuxtjs/stylelint-module": "^4.0.0",
        "@nuxtjs/svg": "^0.2.0",
        "@testing-library/jest-dom": "^5.14.1",
+        "@types/codemirror": "^5.60.2",
        "@types/cookie": "^0.4.1",
        "@types/lodash": "^4.14.172",
        "@types/splitpanes": "^2.2.1",
@@ -7892,6 +7893,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.2",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.2.tgz",
+      "integrity": "sha512-tk8YxckrdU49GaJYRKxdzzzXrTlyT2nQGnobb8rAk34jt+kYXOxPKGqNgr7SJpl5r6YGaRD4CDfqiL+6A+/z7w==",
+      "dev": true,
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
    "node_modules/@types/component-emitter": {
      "version": "1.2.10",
      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -7941,6 +7951,12 @@
      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.10.tgz",
      "integrity": "sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ=="
    },
+    "node_modules/@types/estree": {
+      "version": "0.0.50",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
+    },
    "node_modules/@types/etag": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/@types/etag/-/etag-1.8.0.tgz",
@@ -8325,6 +8341,15 @@
      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ=="
    },
+    "node_modules/@types/tern": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
+      "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
    "node_modules/@types/terser-webpack-plugin": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@types/terser-webpack-plugin/-/terser-webpack-plugin-4.2.1.tgz",
@@ -41849,6 +41874,15 @@
        }
      }
    },
+    "@types/codemirror": {
+      "version": "5.60.2",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.2.tgz",
+      "integrity": "sha512-tk8YxckrdU49GaJYRKxdzzzXrTlyT2nQGnobb8rAk34jt+kYXOxPKGqNgr7SJpl5r6YGaRD4CDfqiL+6A+/z7w==",
+      "dev": true,
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
    "@types/component-emitter": {
      "version": "1.2.10",
      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -41898,6 +41932,12 @@
      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.10.tgz",
      "integrity": "sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ=="
    },
+    "@types/estree": {
+      "version": "0.0.50",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
+    },
    "@types/etag": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/@types/etag/-/etag-1.8.0.tgz",
@@ -42282,6 +42322,15 @@
      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ=="
    },
+    "@types/tern": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
+      "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
    "@types/terser-webpack-plugin": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@types/terser-webpack-plugin/-/terser-webpack-plugin-4.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/svg": "^0.2.0",
    "@testing-library/jest-dom": "^5.14.1",
+    "@types/codemirror": "^5.60.2",
    "@types/cookie": "^0.4.1",
    "@types/lodash": "^4.14.172",
    "@types/splitpanes": "^2.2.1",