rennzhang / codemirror-editor-vue3 Goto Github PK
View Code? Open in Web Editor NEWCodeMirror component for Vue3
Home Page: https://rennzhang.github.io/codemirror-editor-vue3
License: MIT License
CodeMirror component for Vue3
Home Page: https://rennzhang.github.io/codemirror-editor-vue3
License: MIT License
我把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,也不行
Have a demo?
[vite] Internal server error: Missing "./mode/javascript/javascript.js" export in "codemirror" package
When I delete the value entirely at the first load of editor, the change event is not triggered.
version: 2.1.4
In addition, the event is not triggered, so the connected model value is not changed.
能否提供基于codemirror-editor-vue3的show-hint的示例和electricInput‘s event 的示例,thanks for you
因为在编辑器我要输入vue代码供前台加载渲染,所以想在输入时校验这段vue代码的准确性,请问下如何实现
类似ctrl + F 高亮展示,
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
replaceSelection() 插入数据有具体的使用方式吗
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).
Sorry, does your component support real time syntax highlight when edited, and does it support accesslog.
Thanks
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:
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.
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.
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.
有个需求,使用实例的scrollTo方法,想默认随着内容的增多滚动到底部,但是无法生效.我直接使用codemirror的该方法是可以的
I have followed all the steps described for the installation, from the following url:
https://renncheung.github.io/codemirror-editor-vue3/guide/getting-started
When trying to pass a test of a component that is using codemirror-editor-vue3, it fails showing the following error:
<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>
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. 😅
当我按照useage使用 placeholder参数时,输入框并没有显示相关placeholder
引入以下文件
<script> import "codemirror/addon/display/placeholder.js" </script>
麻烦更新一下useage的readme文件
目前的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"
}
}
},
1faa2f9 is a bad change:
width-auto
and height-auto
: https://github.com/RennCheung/codemirror-editor-vue3/blob/1faa2f9f533628a44c228c1830698cdea4f71c1a/packages/src/components/index.vue#L7-L8感谢作者大大们的努力!这里在开始使用的过程中遇到一些问题,请教下。
我使用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>
<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>
{
"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"
}
}
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 貌似无效
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.
区域滚动的时候报错 chunk-JCLRMUKX.js?v=abcb5d37:623 Unable to preventDefault inside passive event listener invocation.
当页面出现滚动 编辑器种也有滚动时候
火狐会变卡,并且控制台出现警告
只有火狐出现
火狐的警告:
此网站似乎使用 scroll-linked 定位效果。这可能无法与异步平移一起使用;参见 https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 详细了解,也可加入我们一起讨论相关的工具和功能!
火狐版本:63.0.3 (64 位)
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"));
导致的空指针报错
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定义的名称
{{ reactData.code }}
请问能支持java代码编写吗
Here is the official demo:
原生的foldCode是:cminstance.foldCode(CodeMirror.pos(start, end))
CodeMirror是个全局变量,不知道在你的封装实现中,如何调用foldCode?
但是别人的语法高亮没问题
https://codepen.io/ouhsnaux/pen/oNqzjKW
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.