Describe the bug

replaceSelection() 插入数据有具体的使用方式吗

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

1faa2f9 is a bad change:

1. This is absolutely a breaking change. It should not appear in a patch release.
2. Any reason to prefer 200px over 100%? I don't understand. I think 200px will be the proper height only in very limited situations, so a default value of 200px is hardly helpful.
3. This breaks the design of width-auto and height-auto: https://github.com/RennCheung/codemirror-editor-vue3/blob/1faa2f9f533628a44c228c1830698cdea4f71c1a/packages/src/components/index.vue#L7-L8

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

期待有的属性

https://renncheung.github.io/codemirror-editor-vue3/merge/index.html
官方文档中存在报错，编辑器渲染为空。

app.630317b7.js:1 TypeError: Cannot read properties of undefined (reading 'appendChild')
at new E.MergeView (index.0db5470d.js:24:15082)

通过 sourcemap
看起来是
codemirror/addon/merge/merge.js 542行 下的 MergeView = CodeMirror.MergeView = function(node, options) {}
参数node为none。
574行 var wrapElt = this.wrap = node.appendChild(elt("div", wrap, "CodeMirror-merge CodeMirror-merge-" + panes + "pane"));
导致的空指针报错

Hi. thank you for your great work on this package.

I would like to know if it's possible to use codemirror extesions on this project, and how to do it.
I would like to use the extension codemirror-vscode-keymap.

Describe the bug

请问是哪里出现了问题谢谢,浏览器没有报错信息

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

能否提供基于codemirror-editor-vue3的show-hint的示例和electricInput‘s event 的示例，thanks for you

Describe the bug

如图所示语法高亮有问题

但是别人的语法高亮没问题

https://codepen.io/ouhsnaux/pen/oNqzjKW

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

I have followed all the steps described for the installation, from the following url:

https://renncheung.github.io/codemirror-editor-vue3/guide/getting-started

Problem

When trying to pass a test of a component that is using codemirror-editor-vue3, it fails showing the following error:

Checks performed

1. The file exists ✅
2. The component renders and works without problems when running the app in dev mode. ✅

Attempted solution

vitest-dev/vitest#1388

Vue component code

<template>
  <Codemirror
    :value="value"
    class="s-code"
    :options="options"
    height="auto"
    :original-style="true"
    @input="onInput"
  />
  <div
    v-show="internalError"
    id="errorMessage"
    class="b2-typography"
  >
    {{ internalError }}
  </div>
</template>

<script setup lang="ts">
import Codemirror from "codemirror-editor-vue3"
import { computed } from "vue"
import "codemirror/mode/javascript/javascript.js"
import "codemirror/theme/dracula.css"
import type { EditorConfiguration } from "codemirror"
import { SCodeLanguage } from './types'

type SCode = {
  value: string,
  language: SCodeLanguage,
  errorMessage: string,
  isReadOnly: boolean
}

const props = withDefaults(defineProps<SCode>(), {
  language: SCodeLanguage.Default,
  errorMessage: '',
  isReadOnly: false
})

const emit = defineEmits<{
  (e: 'input', code: string): void
}>()

const checkInternalError = () => {
  try {
    JSON.parse(props.value)
    return ''
  } catch (e) {
    return e
  }
}

const internalError = computed(() => {
  if (props.errorMessage) {
    return props.errorMessage
  }
  if (props.language === SCodeLanguage.JSON) return checkInternalError()
  else return ''
})

const isReadable:any = computed(() => {
  if (props.isReadOnly) {
    return 'nocursor'
  }
  return undefined
})

const languageMode:any = computed(() => {
  const languages = {
    [SCodeLanguage.JSON]: 'application/json',
    [SCodeLanguage.Javascript]: 'application/javascript',
    [SCodeLanguage.SQL]: 'text/x-mysql',
    [SCodeLanguage.Default]: null
  }
  return languages[props.language] || languageMode[SCodeLanguage.Default]
})

const options: EditorConfiguration = {
  readOnly: isReadable,
  tabSize: 4,
  mode: languageMode,
  lineNumbers: true,
  theme: 'dracula'
}

const onInput = (code: string) => {
  emit('input', code)
}
</script>

<style scoped>
.s-code {
  padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
  height: auto;
}
.s-code :deep() .CodeMirror {
  font-family: inherit;
  font-size: var(--typography-b2-font-size);
  font-weight: var(--typography-b2-font-weight);
  font-family: var(--typography-b2-font-family);
  height: auto;
  border-radius: var(--radius-mr);
}

#errorMessage {
  padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
  margin-top: var(--spacing-xs);
  color: var(--s-error);
}
</style>

Tests code

import { defaultGlobalOptions } from 'test-config/utils'
import { screen, render } from '@testing-library/vue'
import { describe, test, expect } from 'vitest'
import SCode from './SCode.vue'

describe('SCode.vue', () => {
  const value = '{ "content": "aContent" }'
  test('shows the code without language mode', () => {
    const { container } = render(SCode, {
      ...defaultGlobalOptions,
      props: { value }
    })

    expect(screen.getByText(value)).toBeInTheDocument()
    expect(container).toMatchSnapshot()
  })
})

I think there is something that I'm missing out either from the vite config file or the vitest config file, in order to make the test pass. I have searched the internet for this problem, but I've not been able to find a solution.

If anyone need more information, feel free to ask me. I will try to answer as soon as possible. If I have made a mistake in creating this insidency I apologize in advance. 😅

原生的foldCode是：cminstance.foldCode(CodeMirror.pos(start, end))
CodeMirror是个全局变量，不知道在你的封装实现中，如何调用foldCode？

因为在编辑器我要输入vue代码供前台加载渲染，所以想在输入时校验这段vue代码的准确性，请问下如何实现

Describe the bug

Seems the 2.3.1 publication is broken

When building with it, I get the error
contains a reference to the file "codemirror-editor-vue3". This file can not be found, please check it for typos or update it if the file got moved.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

区域滚动的时候报错 chunk-JCLRMUKX.js?v=abcb5d37:623 Unable to preventDefault inside passive event listener invocation.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

import CodeEditor from 'codemirror-editor-vue3'

const EfCodeEditor = defineComponent({
  setup (props, { attrs }) {
    const height = ref(20)
    const expandEditor = () => {
      height.value += 100
    }
    return () => (
    <div>
        <div style="position: absolute;top:5px;right: 15px;z-index: 1;cursor:pointer" onClick={e => expandEditor()}>
          <ExpandAltOutlined />
        </div>
        <CodeEditor {...attrs} `height={height.value}` />
    </div>
    )
  }
})

通过上面的方式，调整 height 貌似无效

Describe the bug

当我按照useage使用 placeholder参数时，输入框并没有显示相关placeholder

解决方法：

引入以下文件
<script> import "codemirror/addon/display/placeholder.js" </script>
麻烦更新一下useage的readme文件

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

感谢作者大大们的努力！这里在开始使用的过程中遇到一些问题，请教下。
我使用vue-cli和官网网站的ts setup实例建立了一个基本demo，但是画面启动报错如下：

另外就是import codemirror这一行也有报错：

完整的页面代码如下，与网站上的例子完全一致：

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="测试 placeholder"
    :height="200"
    @change="onChange"
  />
</template>
<script lang="ts" setup>
import Codemirror from 'codemirror-editor-vue3'
import { Editor, EditorSelectionChange } from 'codemirror'
// placeholder
import 'codemirror/addon/display/placeholder.js'
// language
import 'codemirror/mode/javascript/javascript.js'

import { ref } from 'vue'
const code = ref('console.log("test");')

const cmOptions:EditorSelectionChange = {
  mode: 'text/javascript', // language mode
  theme: 'default' // theme
}

const onChange = (val: string, cm: Editor) => {
  console.log(val)
  console.log(cm.getValue())
}
</script>

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

It can`t work correctly.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Is your feature request related to a problem? Please describe.
I would like to be able to focus the Codemirror editor.

Describe the solution you'd like
Focus the editor using a .focus() like call. Or access to the underlying Codemirror instance to be able to call any documented functions.

Describe the bug

目前的package.json的exports字段是有点问题的。

可以参考以下代码片段。

  "exports": {
    ".": {
      "import": {
        "types": "./dist/packages/index.d.ts",
        "default": "./dist/codemirror-editor-vue3.js"
      },
      "require": {
        "types": "./dist/packages/index.d.ts",
        "default": "./dist/codemirror-editor-vue3.umd.cjs"
      }
    }
  },

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

有个需求,使用实例的scrollTo方法,想默认随着内容的增多滚动到底部,但是无法生效.我直接使用codemirror的该方法是可以的

Describe the bug

When I delete the value entirely at the first load of editor, the change event is not triggered.

version: 2.1.4

step

1. select all code text in editor use command + A
2. push "delete" button

In addition, the event is not triggered, so the connected model value is not changed.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

当页面出现滚动 编辑器种也有滚动时候
火狐会变卡，并且控制台出现警告

只有火狐出现
火狐的警告：
此网站似乎使用 scroll-linked 定位效果。这可能无法与异步平移一起使用；参见 https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 详细了解，也可加入我们一起讨论相关的工具和功能！

火狐版本：63.0.3 (64 位)

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

我把placeholder当做属性传进来，子组件中我用watch监听打印出来确实变化了，但是视图上却没变化，
<code-mirror
v-model:value="code"
:options="options"
:placeholder="placeholder"
:height="300"
@change="onChange"
/>
const props = defineProps({
code: {
default: '',
type: String
},
placeholder: {
default: '',
type: String
}
})
const code = toRef(props, 'code')
const placeholder = toRef(props, 'placeholder')
watch(placeholder, function (newVal, oldVal) {
console.log(newVal, oldVal)
})
我改成直接用响应式数据不用props，也不行

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Have a demo?

how to get an instance

cm.addWidget(pos: {line, ch}, node: Element, scrollIntoView: boolean)
Puts node, which should be an absolutely positioned DOM node, into the editor, positioned right below the given {line, ch} position. When scrollIntoView is true, the editor will ensure that the entire node is visible (if possible). To remove the widget again, simply use DOM methods (move it somewhere else, or call removeChild on its parent).

Describe the bug

node_modules/codemirror-editor-vue3/dist/packages/src/components/index.vue.d.ts:108:1442 - error TS2300: Duplicate identifier 'event'.

108     emit: ((event: "change", value: string, cm: Editor) => void) & ((event: "changes", instance: Editor, changes: import("codemirror").EditorChange[]) => void) & ((event: "beforeChange", instance: Editor, changeObj: import("codemirror").EditorChangeCancellable) => void) & ((event: "cursorActivity", instance: Editor) => void) & ((event: "keyHandled", instance: Editor, name: string, event: Event) => void) & ((event: "inputRead", instance: Editor, changeObj: import("codemirror").EditorChange) => void) & ((event: "electricInput", instance: Editor, line: number) => void) & ((event: "beforeSelectionChange", instance: Editor, obj: import("codemirror").EditorSelectionChange) => void) & ((event: "viewportChange", instance: Editor, from: number, to: number) => void) & ((event: "swapDoc", instance: Editor, oldDoc: import("codemirror").Doc) => void) & ((event: "gutterClick", instance: Editor, line: number, gutter: string, clickEvent: Event) => void) & ((event: "gutterContextMenu", instance: Editor, line: number, gutter: string, contextMenuEvent: MouseEvent) => void) & ((event: "focus", instance: Editor, event: FocusEvent) => void) & ((event: "blur", instance: Editor, event: FocusEvent) => void) & ((event: "scroll", instance: Editor) => void) & ((event: "refresh", instance: Editor) => void) & ((event: "optionChange", instance: Editor, option: keyof EditorConfiguration) => void) & ((event: "scrollCursorIntoView", instance: Editor, event: Event) => void) & ((event: "update", instance: Editor) => void) & ((event: "renderLine", instance: Editor, lineHandle: import("codemirror").LineHandle, element: HTMLElement) => void) & ((event: "overwriteToggle", instance: Editor, overwrite: boolean) => void) & ((event: "update:value", value: string) => void) & ((event: "input", value: string) => void) & ((event: "ready", cm: Editor) => void);

需要修改第二个 event: Event ts定义的名称

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

选中会报错

Hi there, I just got an problem with SSR

node_modules/codemirror/lib/codemirror.css:3
.CodeMirror {
^

SyntaxError: Unexpected token '.'
    at Object.compileFunction (node:vm:355:18)
    at wrapSafe (node:internal/modules/cjs/loader:1022:15)
    at Module._compile (node:internal/modules/cjs/loader:1056:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at ~/node_modules/codemirror-editor-vue3/dist/codemirror-editor-vue3.umd.js:19:9
    at Object.<anonymous> (~/node_modules/codemirror-editor-vue3/dist/codemirror-editor-vue3.umd.js:44:3)

"exports": {
    ".": {
      "import": "./dist/codemirror-editor-vue3.es.js",
      "require": "./dist/codemirror-editor-vue3.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  }

Maybe it's an error of "package conditional exports" because the module invoked "*.umd.js" on the node environment and would not compile "CSS" files

After changing the source file " package.json" exports field, Anther error occurred as below,

ReferenceError: navigator is not defined
    at xxx/entry-server.js:1:141657
    at Module.<anonymous> (xxx/entry-server.js:1:314555)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at xxx/ssr-server.js:75:18
    at Layer.handle [as handle_request] (~/node_modules/express/lib/router/layer.js:95:5)

And this navigator error must be accessed for the 'navigator' object on Node.js

BTW, I use the 'vite' for compilation

Describe the bug

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

[vite] Internal server error: Missing "./mode/javascript/javascript.js" export in "codemirror" package

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Here is the official demo:

https://codemirror.net/demo/complete.html
Thanks.

类似ctrl + F 高亮展示，

Describe the bug

Hi, firstly thanks for the useful library!

The lib seems to use a function styleInject which injects some CSS into the document head using JS. This has presented a problem for me in two ways:

• It doesn't play well with web components, where the CSS should be injected into the shadow root rather than the document head
• It creates conflicts with existing styles. For example I have an existing CSS file that sets the Codemirror font, but then the library injects a font-family: consolas !important rule which wipes out my existing font settings.

I'd suggest allowing the user to add the Codemirror CSS themselves, rather than baking the CSS into the JS library, as this would improve flexibility of the library. Although even just removing the !important flags would be helpful.

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

复现步骤

第1步.使用WebStorm/IDEA按以下配置生成Vite+TS工程：

第2步.按CodeMirror-editor-vue3官方手册编写案例

App.vue

<template>
  <Codemirror
      v-model:value="code"
      :options="cmOptions"
      border
      @change="onChange"
      @ready="onReady"
      @focus="onFocus"
  >
  </Codemirror>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import Codemirror from "codemirror-editor-vue3";

// @types/codemirror
import type {Doc, Editor, EditorChange, EditorConfiguration} from "codemirror";

// language
import "codemirror/mode/javascript/javascript.js";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const cminstance = ref<Editor>();
    const code = ref(`const ary = []
    for(var i = 0;i < 10;i ++) {
      window.alert(i);
    }
    `);

    const cmOptions: EditorConfiguration = {
      mode: "text/javascript",
      lineWrapping: true,
    };

    return {
      code,
      cmOptions,
      onReady(cm: Editor) {
        cminstance.value = cm;
      },
      onChange(value: string, cm: Editor) {
        console.log(value, cm);
      },
      onFocus(cm: Editor, event: FocusEvent) {
        console.log("onFocus", cm, event);
        cm.getDoc().on("beforeChange", (instance: Doc, obj: EditorChange) => {
          console.log("beforeChange", instance, obj);
        });
      },
    };
  },
});
</script>

package.json

{
  "name": "editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/codemirror": "^5.60.10",
    "codemirror": "5.65.12",
    "codemirror-editor-vue3": "^2.3.0",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

第3步.运行工程

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

I have installed this package to my typescript project, but found that the type definition file is missing from the npm package.
It would be great if the type definitions are included in the npm package.

请问能支持java代码编写吗