<template>
  <code-mirror v-model="value" />
</template>

<script>
import { ref, defineComponent } from 'vue';

import CodeMirror from 'vue-codemirror6';

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    const value = ref('Cozy lummox gives smart squid who asks for job pen.');

    return { value };
  },
});
</script>

<template>
  <code-mirror :lang="lang" :linter="linter">
    <pre>
{
  "key": "value"
}</pre
    >
  </code-mirror>
</template>

<script>
import { ref, defineComponent } from 'vue';

import { json, jsonParseLinter } from '@codemirror/lang-json';

import CodeMirror from 'vue-codemirror6';

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    const lang = json();
    const linter = jsonParseLinter();
    return { lang, linter };
  },
});
</script>

<template>
  <code-mirror
    v-model="value"
    basic
    :dark="dark"
    :lang="lang"
    :phrases="phreses"
  />
</template>

<script lang="ts">
import { ref, defineComponent, type Ref } from 'vue';

// Load component
import CodeMirror from 'vue-codemirror6';

// CodeMirror extensions
import type { LanguageSupport } from '@codemirror/language';
import { markdown as md } from '@codemirror/lang-markdown';
import type { Extension } from '@codemirror/state';
import type { ViewUpdate } from '@codemirror/view';

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    /**
     * Get Vuetify instance
     * @see {@link https://github.com/logue/vite-vue2-vuetify-ts-starter | vite-vue2-vuetify-ts-starter}
     */
    const vuetify = useVuetify();

    /** text */
    const value: Ref<string> = ref('');

    /**
     * CodeMirror Language
     *
     * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}
     */
    const lang: LanguageSupport = md();

    /** Dark mode **/
    const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches);

    /** When dark value changed, sync vuetify's dark mode */
    watch(dark, v => (vuetify.theme.dark = v));

    /**
     * Internationalization Config.
     * In this example, the display language to Japanese.
     * Must be reactive when used in combination with vue-i18n.
     *
     * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization}
     */
    const phrases: Ref<Record<string, string>> = ref({
      // @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': 'エラーなし',
    });

    return {
      dark,
      value,
      lang,
      phrases,
    };
  },
});
</script>