~/Projects/hoppscotch
git clone https://code.lsong.org/hoppscotch
Commit
- Commit
- 8de544696db7ebb6cb8ca6ab6daa4a410e0fac21
- Author
- liyasthomas <[email protected]>
- Date
- 2021-08-31 00:03:07 +0530 +0530
- Diffstat
components/smart/CodeMirror.vue | 85 +++++++++++++++++++++++++++++++++++ package-lock.json | 11 ++++ package.json | 1
feat: init codemirror
diff --git a/components/smart/CodeMirror.vue b/components/smart/CodeMirror.vue new file mode 100644 index 0000000000000000000000000000000000000000..f4dfc315fee8a0f0eaa6dcd2bcb381ac3a3d8c80 --- /dev/null +++ b/components/smart/CodeMirror.vue @@ -0,0 +1,85 @@ +<template> + <div ref="editor" class="w-full block"></div> +</template> + +<script> +import Codemirror from "codemirror" + +import "codemirror/lib/codemirror.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/mode/javascript/javascript" + +const DEFAULT_THEME = "juejin" + +export default { + props: { + value: { + type: String, + default: "", + }, + mode: { + type: Object, + default: () => { + return { + name: "javascript", + json: true, + } + }, + }, + }, + + data() { + return { + editor: null, + cacheValue: "", + } + }, + + watch: { + value(value) { + if (value !== this.cacheValue) { + this.editor.setValue(value) + this.cacheValue = value + } + }, + mode(mode) { + this.editor.setOption("mode", mode) + }, + }, + + 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) + }) + }, +} +</script> + +<style> +.CodeMirror { + @apply block; + @apply border-b; + @apply border-dividerLight; + @apply h-auto; + @apply w-full; +} +</style> diff --git a/package-lock.json b/package-lock.json index 098126f2d4c607faf0dfd0776fe0ca536e047e50..83a929fb84ee6cfe951fa28e0db95f670343227d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@nuxtjs/toast": "^3.3.1", "ace-builds": "^1.4.12", "acorn": "^8.5.0", "acorn-walk": "^8.2.0", + "codemirror": "^5.62.3", "core-js": "^3.17.2", "esprima": "^4.0.1", "firebase": "^9.0.1", @@ -13073,6 +13074,11 @@ "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "engines": { "node": ">=0.10.0" } + }, + "node_modules/codemirror": { + "version": "5.62.3", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz", + "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg==" }, "node_modules/collect-v8-coverage": { "version": "1.0.1", @@ -46081,6 +46087,11 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + }, + "codemirror": { + "version": "5.62.3", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz", + "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg==" }, "collect-v8-coverage": { "version": "1.0.1", diff --git a/package.json b/package.json index 94374cc76fe701df06b965f9e2cfc9afc6d9ba15..8206b6b85913eed5ec1b0681cb60f43f2a6edd02 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@nuxtjs/toast": "^3.3.1", "ace-builds": "^1.4.12", "acorn": "^8.5.0", "acorn-walk": "^8.2.0", + "codemirror": "^5.62.3", "core-js": "^3.17.2", "esprima": "^4.0.1", "firebase": "^9.0.1",