A component for using CodeMirror6 with Vue. Unrelated to surmon-china's vue-codemirror, it is for CodeMirror6.
This component can handle bidirectional binding by v-model like a general Vue component.
| Props | Type | Information |
|---|---|---|
| value | string? | Initial text value. |
| dark | boolean | Toggle Darkmode. If you use Vuetify, I recommend that you enter $vuetify.theme.dark. |
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use @codemirror/theme-one-dark, import oneDark and put it in this prop. |
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
| editable | boolean | When this is set to false, it is similar to readonly, except that the cursor is not displayed like the normal pre tag. |
| lang | LanguageSupport | The language you want to have syntax highlighting. see https://codemirror.net/6/#languages |
| phrases | Record<string, string> | Specify here if you want to make the displayed character string multilingual. see https://codemirror.net/6/examples/translate/ |
| extensions | Extension[] | Includes enhancements to extend CodeMirror. Such as @codemirror/basic-setup. |
| linter | Diagnostic[] | Set Linter. see example https://codesandbox.io/s/f6nb0?file=/src/index.js |
Notice: lang and linter can also be set together in extensions. This is defined for usability compatibility with past CodeMirrors.
| name | Information |
|---|---|
| input | When value changed. |
| update | CodeMirror ViewUpdate event. see https://codemirror.net/6/docs/ref/#view.ViewUpdate |
@codemirror/lang-cpp@codemirror/lang-html@codemirror/lang-java@codemirror/lang-javascript@codemirror/lang-json@codemirror/lang-lezer@codemirror/lang-markdown@codemirror/lang-php@codemirror/lang-python@codemirror/lang-rust@codemirror/lang-sql@codemirror/lang-xml
Mark up as follows to make it work at a minimum.
<template> <code-mirror v-model="value" /> </template> <script> import Vue from 'vue'; import CodeMirror from '@/components/CodeMirror.vue'; export default Vue.extend({ components: { CodeMirror, }, data() { return { value: 'The quick brown fox jumps over the lazy dog.', }; }, }); </script>The contents of the slot will overwrite the existing value. For this reason, it is recommended to use it when simply displaying with a readonly prop without using v-model or value.
Also, insert a <pre> tag to prevent the text in the slot from being automatically formatted.
<template> <code-mirror :lang="lang" :editable="false"> <pre> { "key": "value" }</pre > </code-mirror> </template> <script> import { Component, Vue } from 'vue-property-decorator'; import { json } from '@codemirror/lang-json'; export default Vue.extend({ components: { CodeMirror, }, data() { return { lang: json(), }; }, }); </script>When using as a Markdown editor on Vuetify.
<template> <code-mirror v-model="value" :lang="lang" :phrases="phreses" :extensions="extensions" :dark="$vuetify.theme.dark" @update="onCmUpdate" /> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; // Load component import CodeMirror from 'vue-codemirror6'; // CodeMirror extensions import type { LanguageSupport } from '@codemirror/language'; import { markdown } from '@codemirror/lang-markdown'; import { basicSetup } from '@codemirror/basic-setup'; import type { Extension } from '@codemirror/state'; import type { ViewUpdate } from '@codemirror/view'; @Component({ components: { CodeMirror } }) export default class Home extends Vue { /** text */ value: string; /** * CodeMirror Language * * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language} */ lang: LanguageSupport = markdown(); /** * Internationalization Config. * In this example, the display language to Japanese. * * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization} */ phrases: Record<string, string> = { // @codemirror/view 'Control character': '制御文字', // @codemirror/fold 'Folded lines': '折り畳まれた行', 'Unfolded lines': '折り畳める行', to: '行き先', 'folded code': '折り畳まれたコード', unfold: '折り畳む解除', 'Fold line': '行を折り畳む', 'Unfold line': '行の折り畳む解除', // @codemirror/search 'Go to line': '行き先の行', go: 'OK', Find: '検索', Replace: '置き換え', next: '▼', previous: '▲', all: 'すべて', 'match case': '一致条件', regexp: '正規表現', replace: '置き換え', 'replace all': 'すべてを置き換え', close: '閉じる', 'current match': '現在の一致', 'on line': 'した行', // @codemirror/lint Diagnostics: 'エラー', 'No diagnostics': 'エラーなし', }; /** * CodeMirror Extensions * * @see {@link:https://codemirror.net/6/docs/ref/#state.Extension | Extending Editor State} */ extensions: Extension[] = [ /** @see {@link:https://codemirror.net/6/docs/ref/#basic-setup | basic-setup} */ basicSetup, ]; /** * CodeMirror Hook View update event * * @param update - View Update * * @see {@link https://codemirror.net/6/docs/ref/#view.ViewUpdate|class ViewUpdate} */ onCmUpdate(update: ViewUpdate) { console.log(update); } } </script>