vue-codemirror

CodeMirror(6) component for Vue(3).

vue-codemirror v5/v6 has been released. This is a new version based on CodeMirror@6 and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ completely NOT compatible with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.

This example site contains most of what you want.

Legacy version

• examples (Vue2)
• vue-codemirror@4.x (Vue2 / CodeMirror5)

Documentation

• CodeMirror6 Guide
• CodeMirror6 APIs
• CodeMirror6 Examples
• CodeMirror6 Example: Writing a Language Package
• CodeMirror6 Example: Styling
• CodeMirror Forum

CodeMirror packages

• CodeMirror6 Languages
• CodeMirror6 Themes

Usage

Install

yarn add codemirror vue-codemirror

npm install codemirror vue-codemirror --save

Depending on your actual needs, you may need to install more CodeMirror packages

# CodeMirror languages...
yarn add @codemirror/lang-html
yarn add @codemirror/lang-json
yarn add @codemirror/lang-javascript

# CodeMirror themes...
yarn add @codemirror/theme-one-dark

# more CodeMirror packages...

If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your package.json

e.g.

"dependencies": {
  "@codemirror/state": "6.x"
}

import { EditorState } from '@codemirror/state'

Local component

<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 } 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>

Global component

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]
  // ...
})

Component Props

Component Events

Basic Setup

The basic-setup extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.

app.use(VueCodemirror, {
  // keep the global default extensions empty
  extensions: []
})

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.

CHANGELOG

v6.1.1 (2022-08-28)

• feat: use vue's built-in CSSProperties instead of csstype

v6.1.0 (2022-08-27)

• feat: add phrases prop #166

v6.0.2 (2022-07-27)

• fix: use the correct global component name #161

v6.0.1 (2022-07-22)

• feat: add autoDestroy prop for #156.
• feat: refactoring component.
• chore: upgrade deps and upgrade vite to v3.

v6.0.0 (2022-06-13)

Breaking changes

1. The package no longer depends on the codemirror package and now requires you to install the codemirror dependency manually.

e.g. npm install codemirror vue-codemirror

1. The package no longer exports the original codemirror package. If you need import interface from codemirror, you now need to make codemirror explicitly dependent in your package.json.

e.g.

"dependencies": {
  "@codemirror/state": "6.x"
}

import { EditorView } from 'codemirror'
import { EditorState } from '@codemirror/state'

v5.1.0 (2022-06-12)

• Upgrade codemirror dependencies to 6.x
• The package no longer exports @codemirror/view @codemirror/state @codemirror/basic-setup.
• Change the package from @codemirror/example-setup to just codemirror.

v5.0.1 (2022-05-14)

• Use the correct version dependencies for the @codemirror/* package.

v5.0.0-beta.1

• Upgrade to Vue@3
• Upgrade to CodeMirror@v6

v4.0.6

• add textarea name prop with #82

v4.0.5

Enable switching from/to DiffView based on 'merge' prop status(merge pr 65).

v4.0.4

optimize events and refresh function.

v4.0.3

add props placeholder

v4.0.2

• add scroll event

v4.0.1

• the components options attr is not required

v4.0.0

• fix import es module bug
• add test script
• assign options to ssr.js
• add global default events
• update the options assign logic
• add global default options
• update editor to codemirror

project

• add browser support
• add test scripts
• update babel and webpack configs