surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.25k stars 380 forks source link

Cannot input spaces when used with other plugins #218

Open W1228 opened 8 months ago

W1228 commented 8 months ago

Describe the bug

When I was using it with other plugins, I found that I couldn't input spaces. After checking, I found that another plugin monitored the space button and blocked default events, but did not block Input and Textarea. I tried to set inputStyle to "textarea", but it was still blocked, so I still couldn't input spaces. Is there any solution? thanks

Reproduction

The spacebar listening code for this other plugin

onKeyDown(" ", (e) => {
    var element = e.target as HTMLElement;
    if (!["INPUT", "TEXTAREA"].includes(element.tagName)) {
      e.preventDefault();
    }
    pressSpace.value = true;
  });

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 829.70 MB / 15.37 GB
  Binaries:
    Node: 18.17.1 - D:\software\node\node.EXE
    Yarn: 1.22.19 - D:\software\node\yarn.CMD
    npm: 9.6.7 - D:\software\node\npm.CMD
    pnpm: 8.6.12 - D:\software\node\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (120.0.2210.121)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @ant-design/icons-vue: ^7.0.1 => 7.0.1
    @codemirror/lang-javascript: ^6.2.1 => 6.2.1
    @originjs/vite-plugin-commonjs: ^1.0.3 => 1.0.3
    @types/file-saver: ^2.0.7 => 2.0.7
    @types/lodash: ^4.14.182 => 4.14.202
    @types/mockjs: ^1.0.6 => 1.0.10
    @types/node: ^18.0.0 => 18.19.4
    @vitejs/plugin-vue: ^4.6.2 => 4.6.2
    @vitejs/plugin-vue-jsx: ^1.3.10 => 1.3.10
    @vueuse/core: ^8.6.0 => 8.9.4
    @vueuse/integrations: ^9.0.0 => 9.13.0
    animate.css: ^4.1.1 => 4.1.1
    ant-design-vue: ^4.0.7 => 4.0.8
    autoprefixer: ^10.4.7 => 10.4.16
    axios: ^0.27.2 => 0.27.2
    codemirror: ^6.0.1 => 6.0.1
    consola: ^2.15.3 => 2.15.3
    dayjs: ^1.11.9 => 1.11.10
    element-china-area-data: ^5.0.2 => 5.0.2
    epic-designer: ^0.8.14 => 0.8.14
    exceljs: ^4.4.0 => 4.4.0
    file-saver: ^2.0.5 => 2.0.5
    info: ^0.0.6-beta.0 => 0.0.6-beta.0
    install: ^0.13.0 => 0.13.0
    jsbarcode: ^3.11.6 => 3.11.6
    json-editor-vue3: ^1.0.9 => 1.0.9
    jszip: ^3.10.1 => 3.10.1
    less: ^4.1.2 => 4.2.0
    less-loader: ^11.0.0 => 11.1.4
    lodash: ^4.17.21 => 4.17.21
    mockjs: ^1.1.0 => 1.1.0
    pinia: ^2.0.14 => 2.1.7
    pinia-plugin-persist: ^1.0.0 => 1.0.0
    postcss: ^8.4.14 => 8.4.32
    print-js: ^1.6.0 => 1.6.0
    qrcode: ^1.5.1 => 1.5.3
    tailwindcss: ^3.0.24 => 3.4.0
    typescript: ^4.5.4 => 4.9.5
    underscore: ^1.13.6 => 1.13.6
    unplugin-vue-components: ^0.26.0 => 0.26.0
    vite: ^5.0.2 => 5.0.10
    vite-plugin-style-import: ^2.0.0 => 2.0.0
    vite-plugin-vue-devtools: ^1.0.0-rc.5 => 1.0.0-rc.8
    vite-plugin-vue-setup-extend: ^0.4.0 => 0.4.0
    vue: ^3.2.25 => 3.4.3
    vue-codemirror: ^6.1.1 => 6.1.1
    vue-router: ^4.0.15 => 4.2.5
    vue-tsc: ^1.8.27 => 1.8.27
    vuedraggable: ^4.1.0 => 4.1.0
    vxe-table: ^4.2.8 => 4.5.17
    vxe-table-plugin-export-xlsx: next => 3.1.0
    xe-utils: ^3.5.4 => 3.5.14

Used Package Manager

npm

Validations