react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

How to set up automatic line wrapping?

Open Deja-vuuu opened this issue 1 year ago • 4 comments

Deja-vuuu avatar Jul 26 '23 09:07 Deja-vuuu

I tried to find this configuration in the document, but I didn't find it !

Deja-vuuu avatar Jul 26 '23 09:07 Deja-vuuu

@Deja-vuuu

  • https://github.com/uiwjs/react-codemirror/issues/514#issuecomment-1574414930
  • https://github.com/uiwjs/react-codemirror/issues/274#issuecomment-1060137121
  • https://github.com/uiwjs/react-codemirror/issues/228#issuecomment-1057144653

jaywcjlove avatar Jul 26 '23 09:07 jaywcjlove

@Deja-vuuu

The problem is, however, that the following code:

import CodeMirror, { BasicSetupOptions } from "@uiw/react-codemirror"
import { langs } from "@uiw/codemirror-extensions-langs"
import { githubLight } from "@uiw/codemirror-theme-github"
import { EditorView } from "@codemirror/view"

const CodemirrorEditor: React.FC<CodemirrorProps> = ({ content, onChange }) => {

    return (
        <CodeMirror
            extensions={[langs.markdown(), EditorView.lineWrapping]}
            theme={githubLight}
            value={content}
            basicSetup={basicSetup}
    
            onChange={ (value, viewUpdate) => {
                onChange(value)
            }}
            />
    )
}

Throws an error:

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

makcyd avatar Aug 16 '23 18:08 makcyd

@Deja-vuuu

The problem is, however, that the following code:

import CodeMirror, { BasicSetupOptions } from "@uiw/react-codemirror"
import { langs } from "@uiw/codemirror-extensions-langs"
import { githubLight } from "@uiw/codemirror-theme-github"
import { EditorView } from "@codemirror/view"

const CodemirrorEditor: React.FC<CodemirrorProps> = ({ content, onChange }) => {

    return (
        <CodeMirror
            extensions={[langs.markdown(), EditorView.lineWrapping]}
            theme={githubLight}
            value={content}
            basicSetup={basicSetup}
    
            onChange={ (value, viewUpdate) => {
                onChange(value)
            }}
            />
    )
}

Throws an error:

Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

You have to import EditorView from @uiw/react-codemirror.

import CodeMirror, { EditorView } from '@uiw/react-codemirror'

schettn avatar Apr 11 '24 17:04 schettn