vue-codemirror6

vue-codemirror6 copied to clipboard

Describe the bug

    "@codemirror/lang-java": "^6.0.1",
    "@codemirror/lang-markdown": "^6.0.5",
    "@codemirror/state": "^6.1.4",
    "@codemirror/theme-one-dark": "^6.1.0",
    "@codemirror/view": "^6.7.1",
    "@intlify/unplugin-vue-i18n": "^0.8.1",
    "@zebing/vite-plugin-css-modules": "^1.1.0",
    "ant-design-vue": "^3.2.15",
    "auto-changelog": "^2.4.0",
    "codemirror": "^6.0.1",
    "esbuild": "^0.16.6",
    "jsonlint": "^1.6.3",
    "jsonlint-mod": "^1.7.6",
    "pinia": "^2.0.28",
    "postcss-load-config": "^4.0.1",
    "vite-plugin-implicit-css-modules": "^0.0.3",
    "vite-plugin-vsharp": "^1.3.0",
    "vite-plugin-vue-static-css-modules": "^3.0.3",
    "vue": "^3.2.45",
    "vue-codemirror": "^6.1.1",
    "vue-codemirror6": "^1.1.1",
    "vue-cookie-next": "^1.3.0",
    "vue-demi": "^0.13.11",
    "vue-i18n": "^9.2.2",
    "vue-router": "4.1.6",
    "vue-toastification": "^2.0.0-rc.5"
           ...
   "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
    "unplugin-auto-import": "^0.12.1",
    "unplugin-vue-components": "^0.22.12",
    "vite": "^4.0.1",

Hi, I did everything according to the guide, as a result, nothing works. no code highlighting there is nothing Even the out of the box option doesn't work.

Reproduction

<template>
   <div>
   <Codemirror
            v-model="value"
            basic
            wrap
            tab
            :dark="dark"
            :lang="lang"
            :extensions="extensions"
            :options="cmOption"
          ></Codemirror>
        </div>
        //....
</template>
<!-- SCRIPT -->
<script lang="ts" setup>
  import Codemirror  from 'vue-codemirror6';
  import { markdown as md } from '@codemirror/lang-markdown';
  import type { LanguageSupport } from '@codemirror/language';
  import type { Extension } from '@codemirror/state';
  import type { ViewUpdate } from '@codemirror/view';
  import { oneDark } from '@codemirror/theme-one-dark';

  console.log(`[LOG] oneDark`, `<${typeof oneDark}>`, oneDark);

  const value = ref(`
  adw
  da
  widthwad
  awda
  widthawd
  awdawdawdwd
  
  `);

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

  /**
   * CodeMirror Language
   *
   * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}
   */
  const lang: LanguageSupport = md();
  const extensions = [md(), oneDark];
  const cmOption = ref({
    lineNumbers: true,
  });
        </script>

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 2.38 GB / 15.83 GB
  Binaries:
    Node: 19.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.46)
    Internet Explorer: 11.0.22000.120

Used Package Manager

yarn

There is no prop definition called options in vue-codemirror6.

It seems that there is no special usage, so I think it will work with the following code.

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import CodeMirror from 'vue-codemirror6';
import { markdown as md } from '@codemirror/lang-markdown';
import { oneDark } from '@codemirror/theme-one-dark';

console.log(`[LOG] oneDark`, `<${typeof oneDark}>`, oneDark);

const value: Ref<string> = ref(`
adw
da
widthwad
awda
widthawd
awdawdawdwd
`);

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

<template>
  <code-mirror
    v-model="value"
    basic
    wrap
    tab
    :dark="dark"
    :lang="md()"
    :theme="oneDark"
  />
</template>

thanks i will check later