How to wrap text in CodeMirrorMerge?

[kimfucious]

I'm trying to compare two markdown files, using CodeMirrorMerge.

Using the documentation here, I've managed to produce what's shown in this screenshot:

In this example the text is a single "paragraph" of around 60 words. In practice, there will be many more paragraphs with more or less words.

The "original" text is on the left, and the "modified" is on the right. I want to potentially merge changes that are in modified to the original.

Question: Is there any way to wrap the text? It's near impossible to compare long lines (i.e. paragraphs) on a single line?

With CodeMirror from @uiw/react-codemirror, I can wrap text with the following code:

extensions={[
    vim({ status: true }),
    markdown(),
    EditorView.lineWrapping, // <= right here
    EditorView.contentAttributes.of({ spellcheck: "true" }),
]}

The wrapping looks like this:

I can't see a way to do this with CodeMirrorMerge.

[jaywcjlove]

@kimfucious https://codesandbox.io/embed/nostalgic-rgb-gj6kfz?fontsize=14&hidenavigation=1&theme=dark

Upgrade v4.20.3

import React, { useState } from "react";
import CodeMirrorMerge from "react-codemirror-merge";
import { EditorView } from "@codemirror/view";

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
let doc = `one
two
threethreethreethreethreethreethreethreethreethreethreethree
four
five`;

export default function App() {
  const [value, setValue] = useState("");
  const [valueModified, setValueModified] = useState("");
  return (
    <div>
      <CodeMirrorMerge orientation="a-b">
        <Original
          extensions={[EditorView.lineWrapping]}
          onChange={(value) => {
            setValue(value);
          }}
          value={doc}
        />
        <Modified
          extensions={[EditorView.lineWrapping]}
          onChange={(value) => {
            setValueModified(value);
          }}
          value={doc.replace(/t/g, "T") + "Six"}
        />
      </CodeMirrorMerge>
      <div style={{ display: "flex" }}>
        <pre style={{ flex: 1 }}>{value} </pre>
        <pre style={{ backgroundColor: "#fff", flex: 1 }}>{valueModified} </pre>
      </div>
    </div>
  );
}

• How to enable word wrap? #274 (comment)

[kimfucious]

Hi @jaywcjlove.

That's perfect! Thanks much for the help.

I didn't realize that you could add extensions to Original and Modified