repository·main·Indexed 25 days ago
https://github.com/surmon-china/vue-codemirrorA Vue 3 component wrapper for CodeMirror 6 (version 6.1.1) that provides a reactive interface for integrating code editing capabilities into Vue applications. It supports local and global component registration, v-model binding, and modular extensions for languages and themes. The library includes utilities for managing EditorView and EditorState, as well as a set of editor tools for manipulating document content, focus, and styling.
CodeMirror 6 is modular. You must install additional packages for specific languages or themes. Examples include:
@codemirror/lang-html, @codemirror/lang-json, @codemirror/lang-javascript@codemirror/theme-one-dark# Examples of additional packages
yarn add @codemirror/lang-html
yarn add @codemirror/lang-json
yarn add @codemirror/lang-javascript
yarn add @codemirror/theme-one-darkvue-codemirror in a Vue 3 project, you must install both the component and the core codemirror package. Depending on your needs, you may also need to install specific language or theme packages from @codemirror/.Register VueCodemirror globally in your Vue application to provide default options for all editor instances. Note that basicSetup is integrated by default; to override this and provide no default extensions, pass an empty array to the extensions option.
import { createApp } from 'vue'
import { basicSetup } from 'codemirror'
import VueCodemirror from 'vue-codemirror'
const app = createApp()
app.use(VueCodemirror, {
// optional default global options
autofocus: true,
disabled: false,
indentWithTab: true,
tabSize: 2,
placeholder: 'Code goes here...',
extensions: [basicSetup]
// ...
})vue-codemirror globally in your Vue application using the install function. This registers the Codemirror component and allows you to provide a defaultConfig that will be applied to all instances of the component.You can set global configuration defaults for all vue-codemirror components by using injectGlobalConfig during your Vue application setup. This is useful for applying consistent settings like tabSize, indentWithTab, or extensions across your entire application.
Note that the configuration provided will be merged or used as the base for components. The DEFAULT_CONFIG includes:
autofocus: boolean (default: false)disabled: boolean (default: false)indentWithTab: boolean (default: true)tabSize: number (default: 2)placeholder: string (default: '')autoDestroy: boolean (default: true)extensions: array (default: [basicSetup])Pass a partial ConfigProps object to the function.
You can import and use the Codemirror component directly in your Vue components. This allows you to pass specific extensions (like languages and themes) and handle events like @ready to access the underlying CodeMirror EditorView instance.
<template>
<codemirror
v-model="code"
placeholder="Code goes here..."
:style="{ height: '400px' }"
:autofocus="true"
:indent-with-tab="true"
:tab-size="2"
:extensions="extensions"
@ready="handleReady"
@change="log('change', $event)"
@focus="log('focus', $event)"
@blur="log('blur', $event)"
/>
</template>
<script>
import { defineComponent, ref, shallowRef } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
export default defineComponent({
components: {
Codemirror
},
setup() {
const code = ref(`console.log('Hello, world!')`)
const extensions = [javascript(), oneDark]
// Codemirror EditorView instance ref
const view = shallowRef()
const handleReady = (payload) => {
view.value = payload.view
}
// Status is available at all times via Codemirror EditorView
const getCodemirrorStates = () => {
const state = view.value.state
const ranges = state.selection.ranges
const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
const cursor = ranges[0].anchor
const length = state.doc.length
const lines = state.doc.lines
// more state info ...
// return ...
}
return {
code,
extensions,
handleReady,
log: console.log
}
}
})
</script>The following events are emitted by the <codemirror /> component:
| Event | Description | Params |
|---|---|---|
update:modelValue | Only when the CodeMirror content (doc) has changed. | (value: string, viewUpdate: ViewUpdate) |
change | Same as update:modelValue. | ditto |
update | When any state of CodeMirror changes. | (viewUpdate: ViewUpdate) |
focus | When CodeMirror focused. | (viewUpdate: ViewUpdate) |
blur | When CodeMirror blurred. | (viewUpdate: ViewUpdate) |
ready | When editor component mounted. | (payload: { view: EditorView; state: EditorState; container: HTMLDivElement }) |
The following props are available on the <codemirror /> component:
| Prop | Description | Type | Default |
|---|---|---|---|
modelValue | The input values accepted by the component; supports two-way binding. | String | '' |
autofocus | Focus editor immediately after mounted. | Boolean | false |
disabled | Disable input behavior and disable change state. | Boolean | false |
indentWithTab | Bind keyboard Tab key event. | Boolean | true |
tabSize | Specify the indent when the Tab key is pressed. | Number | 2 |
placeholder | Display when empty. | String | '' |
style | The CSS style object that acts on the CodeMirror itself. | Object | {} |
phrases | Codemirror internationalization phrases. | Object | {} |
autoDestroy | Auto destroy the CodeMirror instance before the component unmount. | Boolean | true |
extensions | Passed to CodeMirror EditorState.create({ extensions }) | Extension | [] |
selection | Passed to CodeMirror EditorState.create({ selection }) | EditorSelection | - |
root | Passed to CodeMirror new EditorView({ root }) | ShadowRoot | Document | - |
The component emits several events that allow you to react to editor changes, state updates, and lifecycle stages. The available event keys and their payload structures are:
change: Emitted when the content (doc) changes. Payload: (value: string, viewUpdate: ViewUpdate) => boolean.update: Emitted when the CodeMirror state changes. Payload: (viewUpdate: ViewUpdate) => boolean.focus: Emitted when the editor gains focus. Payload: (viewUpdate: ViewUpdate) => boolean.blur: Emitted when the editor loses focus. Payload: (viewUpdate: ViewUpdate) => boolean.ready: Emitted when the component is mounted. Payload: { view: EditorView; state: EditorState; container: HTMLDivElement }.update:modelValue: An alias for the change event, typically used for v-model synchronization.createEditorView to instantiate a new EditorView using standard EditorViewConfig. To prevent memory leaks, always call destroyEditorView when the editor is no longer needed.The getEditorTools function returns a set of utility methods to interact with an active EditorView without manually dispatching transactions.
Available Tools:
getDoc(): Returns the current document as a string.setDoc(newDoc: string): Replaces the entire document content.focus(): Sets focus to the editor.reExtensions(extensions: Extension[]): Reconfigures the editor extensions.toggleDisabled(): Toggles the editor between editable and read-only modes.toggleIndentWithTab(): Toggles the indentWithTab keymap.setTabSize(tabSize: number): Sets the tab size and indentation unit.setPhrases(phrases: Record<string, string>): Sets translation phrases.setPlaceholder(value: string): Sets the editor's placeholder text.setStyle(style: CSSProperties): Applies CSS styles to the editor element via EditorView.theme.Use createEditorState to initialize the CodeMirror EditorState. This function wraps the standard EditorState.create and provides lifecycle hooks for updates, document changes, and focus changes.
Options:
onUpdate: Called on every view update.onChange: Called when the document content changes. Receives (doc: string, viewUpdate: ViewUpdate).onFocus: Called when the editor gains focus.onBlur: Called when the editor loses focus....config: Any standard EditorStateConfig properties (e.g., doc, selection, extensions).