Embedding react-ace in react-split

Question

I get strange behavior embedding react-ace in react-split. Here I've embedded two editors in two panes and typed let x = "this line got scrolled left" into the first line of the first pane:

While typing code, as soon as I hit the right-most margin of the text in the yellow header div that precedes the editor, Ace starts scrolling the line to the left as I type. I am able to subsequently scroll the text back into view, but Ace won't let me position the cursor to the right of this point in the editor.

If I remove the preceding yellow header from each pane, Ace behaves as if this scrolling point is the very first character and thus never lets me see the characters as I type.

It's as if the browser thinks that the pane has one width and Ace thinks it has another width, that width being the minimum width needed to display anything else also in the pane with the editor.

Here is my React, implemented with nextjs:

import Split from 'react-split'
import AceEditor from 'react-ace'
import 'brace/mode/javascript'

export default function Home() {
  return (
    <main className="outermost">
      <Split
        className="my_split"
        sizes={[50, 50]}
        minSize={100}
        expandToMin={false}
        gutterSize={10}
        gutterAlign="center"
        snapOffset={0}
        direction="horizontal"
      >
        <CodePane id="left_pane" />
        <CodePane id="right_pane" />
      </Split>
    </main>
  )
}

function CodePane(props: {id: string}) {
  return <div id={props.id} className="code_pane">
    <div className="pane_header">Right code margin |</div>
    <AceEditor
      name={props.id + "_editor"}
      mode="javascript"
      height="100%"
      width="100%"
    />
  </div>;
}

And here is my CSS:

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.outermost {
  width: 100%;
  height: 100vh;
  background-color: darkblue;
  padding: 20px;
}

.my_split {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.pane_header {
  background-color: yellow;
  width: 100%;
  height: 20px;
}

.code_pane {
  height: 100%;
  background-color: red;
}

.split,
.gutter.gutter-horizontal {
  height: 100%;
}

I attempted to implement the CSS recommendations found in the react-split docs. I've also implemented this with float:left and get the same problem. I may have gotten things wrong, as I found the docs hard to follow.

Did I do something wrong in the CSS? Thanks for any help you can offer.

(Note: I realize that Ace provides a way to split the editor, but that's not what I'm trying to do in my app. I'm just using two editors for demo purposes.)

Answer 1

afk-mario provided an answer on GitHub, which I'll summarize.

The Ace editor recalculates its size in response to a window resize event, so I can force a recalculation by manually issuing this event.

Adding the following to React's componentDidMount() and to Split's onDragEnd() handler solves the problem:

window.dispatchEvent(new Event('resize'));