CodeMirror v6 React line-break not working

v6
1

Is there an easy way for achieving line break in CoreMirror v6? I was searching all around the globe and suggestion to add following into css does not seem to work:

.CodeMirror-wrap pre {
word-break: break-word !important;
}

This is all of my code for CodeMirror form itself:

        <CodeMirror
          value={prettyResults(results)}
          height="100%"
          theme={oneDark}
          editable={false}
          lineWrapping={true}
        />
2

You can use the EditorView.lineWrapping facet.

3

Thanks for the reply.
Any way of achieving this using CodeMirror component?

4

If you are using a CodeMirror React wrapper that someone else created I suggest to raise that issue with them. But you can also look at what the facet does (it adds a couple of CSS rules) and apply those yourself.

I’d assume that if a component exposes a lineWrapping prop then it would just work. If it doesn’t, that’s even more of a reason to raise an issue with the creator of that component.

1 Like
5

Thanks for the help!