React implementation of https://codemirror.net/demo/indentwrap.html "This page uses a hack on top of the "renderLine" event to make wrapped text line up with the base indentation of the line."

codemirror-renderline-react.js

import React, { Component } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/xml/xml';
import { countColumn } from 'codemirror';

class RenderCodeMirror extends Component {
    constructor(props) {
      super(props);
      this.state = {
        source: '<p>test</p>',
      };
    }
  
    render() {
      return (
        <>
          <CodeMirror
            value={this.state.source}
            options={{
              mode: 'xml',
              theme: 'material',
              lineNumbers: true,
              lineWrapping: true
            }}
            onBeforeChange={(editor, data, value) => {
              this.setState({
                source: value
              });
            }}
            onChange={(editor, data, value) => {
              this.setState({
                source: value
              });
            }}
            onRenderLine={(editor, cm, line) => {
              const charWidth = editor.defaultCharWidth(),
                basePadding = 4;
              const off =
                countColumn(cm.text, null, editor.options.tabSize) *
                charWidth;
              line.style.textIndent = `-${off}px`;
              line.style.paddingLeft = `${basePadding}${off}px`;
            }}
          />
        </>
      )
    }
}

export default RenderCodeMirror;