CodeMirrorMerge - Gutter size ingreses when updating

[guillermoamaral]

For some reason that I cannot figure out, updating both original and modified values makes gutter margin to increase.

https://codesandbox.io/s/fast-shadow-8v936f?file=/src/App.js

Am I doing someting wrong?

[jaywcjlove]

@guillermoamaral Upgrade v4.21.2

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

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;

function randomText(size) {
  let letters = `abcdefghyjklmnopqrstuvwxyz`;
  let text = "";
  for (let i = 0; i < size; i++) {
    text = text + letters[Math.floor(Math.random() * letters.length)];
  }
  return text;
}

export default function App() {
  const [value, setValue] = useState("abc");
  const [valueModified, setValueModified] = useState("ab");
  return (
    <div>
      <button
        onClick={() => {
          setValue(randomText(10));
          setValueModified(randomText(10));
        }}
      >
        Update
      </button>
      <CodeMirrorMerge orientation="a-b" gutter={false}>
        <Original
          extensions={[EditorView.lineWrapping]}
          onChange={(value) => {
            setValue(value);
          }}
          value={value}
        />
        <Modified
          extensions={[EditorView.lineWrapping]}
          onChange={(value) => {
            setValueModified(value);
          }}
          value={valueModified}
        />
      </CodeMirrorMerge>
    </div>
  );
}

[jaywcjlove]

https://codesandbox.io/embed/bitter-dream-2x1byh?fontsize=14&hidenavigation=1&theme=dark

[guillermoamaral]

Many thanks sr!