https://github.com/sachinraja/rodemirror

React component for CodeMirror 6
https://github.com/sachinraja/rodemirror

codemirror codemirror-6 codemirror-next codemirror6 editor react

Last synced: about 2 hours ago
JSON representation

React component for CodeMirror 6

• Host: GitHub
• URL: https://github.com/sachinraja/rodemirror
• Owner: sachinraja
• License: mit
• Created: 2021-06-30T17:22:50.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-05T17:15:58.000Z (3 months ago)
• Last Synced: 2024-09-08T21:28:37.924Z (25 days ago)
• Topics: codemirror, codemirror-6, codemirror-next, codemirror6, editor, react
• Language: TypeScript
• Homepage:
• Size: 3.47 MB
• Stars: 49
• Watchers: 1
• Forks: 5
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rodemirror

React component for [CodeMirror 6](https://codemirror.net/6/)

## Features

- Lightweight, 829B minified + gzipped

- Simple, wraps CodeMirror's view and state and gets out of your way

- Efficient, only renders when necessary and uses [`StateEffect`](https://codemirror.net/6/docs/ref/#state.StateEffect) to update the editor state on prop changes. The view and state are **never** recreated.

## Installation

```shell

npm install rodemirror @codemirror/state @codemirror/view

```

## Usage

Use the `CodeMirror` component:

```tsx

import { basicSetup } from 'codemirror'

import { javascript } from '@codemirror/lang-javascript'

import { oneDark } from '@codemirror/theme-one-dark'

import { useMemo } from 'react'

import CodeMirror from 'rodemirror'

const Editor = () => {

  const extensions = useMemo(() => [basicSetup, oneDark, javascript()], [])

  return 

}

```

The `useMemo` is so that the extensions are not recreated each time, which would cause unnecessary editor transactions. You'll want to do the same with the `selection` prop.

### Uncontrolled

Create an uncontrolled component for reading values.

```tsx

import { basicSetup } from 'codemirror'

import { javascript } from '@codemirror/lang-javascript'

import { Extension } from '@codemirror/state'

import { oneDark } from '@codemirror/theme-one-dark'

import { useMemo, useState } from 'react'

import CodeMirror from 'rodemirror'

const Editor = () => {

  const extensions = useMemo(

    () => [basicSetup, oneDark, javascript()],

    [],

  )

  const defaultValue = "console.log('Hello world!')"

  // remove if you do not need the value

  const [value, setValue] = useState(defaultValue)

  return (

     {

        if (v.docChanged) {

          setValue(v.state.doc.toString())

        }

      }}

      extensions={extensions}

    />

  )

}

```

### Controlled/Separate Reading and Writing

A truly controlled value is not recommended as you will be overwriting the entire document on each input and the editor will become very slow. This also does not work with features such as autocomplete. If you must pass in a controlled value, you can separate the reading and writing values and only update when necessary:

```tsx

import { useMemo, useState, useEffect } from 'react'

import CodeMirror from 'rodemirror'

import type { Extension } from '@codemirror/state'

import { basicSetup } from 'codemirror'

import { oneDark } from '@codemirror/theme-one-dark'

import { javascript } from '@codemirror/lang-javascript'

const Editor = ({ shouldAddLogOnChange }) => {

  const Editor = ({

    shouldAddLogOnChange,

  }: {

    shouldAddLogOnChange: boolean

  }) => {

    const extensions = useMemo(

      () => [basicSetup, oneDark, javascript()],

      []

    )

    const defaultValue = "console.log('Hello world!')"

    const [readValue, setReadValue] = useState(defaultValue)

    const [writeValue, setWriteValue] = useState(defaultValue)

    // example

    useEffect(() => {

      setWriteValue(`${readValue}\nconsole.log('hello world')`)

    }, [shouldAddLogOnChange])

    return (

       {

          if (v.docChanged) {

            setReadValue(v.state.doc.toString())

          }

        }}

        extensions={extensions}

      />

    )

  }

```

### [EditorView](https://codemirror.net/6/docs/ref/#view.EditorView) and [EditorState](https://codemirror.net/6/docs/ref/#state.EditorState) (Complex Use Cases)

Unless you are performing complex actions, you likely do not need this. You can use callbacks to keep `EditorView` and `EditorState`. You can keep the `EditorView` in a `useState` like so:

```tsx

import { EditorView } from '@codemirror/view'

const Editor = () => {

  const extensions = useMemo(() => [basicSetup, oneDark, javascript()], [])

  const [editorView, setEditorView] = useState(null)

  return (

     setEditorView(editorView)}

    />

  )

}

```

The same applies to `EditorState`, though it can also be accessed from `EditorView.state`.

## Examples

See the [examples](https://github.com/sachinraja/rodemirror/tree/main/examples) for how the editor can be used.