How to set up automatic line wrapping？

[Deja-vuuu]

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

[jaywcjlove]

@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

[makcyd]

@Deja-vuuu

• How to wrap text in CodeMirrorMerge? #514 (comment)
• How to enable word wrap? #274 (comment)
• How to turn on lineWrapping? #228 (comment)

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.

[schettn]

@Deja-vuuu

• How to wrap text in CodeMirrorMerge? #514 (comment)
• How to enable word wrap? #274 (comment)
• How to turn on lineWrapping? #228 (comment)

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'