在 react-split 中嵌入 react-ace

Posted 2023-03-24

【中文标题】在 react-split 中嵌入 react-ace

【英文标题】：Embedding react-ace in react-split

【发布时间】：2020-12-21 01:59:11

【问题描述】：

我在react-split 中嵌入了react-ace 的奇怪行为。这里我在两个窗格中嵌入了两个编辑器，并在第一个窗格的第一行输入了let x = "this line got scrolled left"：

在键入代码时，只要我点击编辑器前面的黄色标题div 中文本的最右侧边距，Ace 就会在我键入时开始向左滚动该行。我可以随后将文本滚动回视图，但 Ace 不允许我将光标定位到编辑器中该点的右侧。

如果我从每个窗格中删除前面的黄色标题，Ace 的行为就好像这个滚动点是第一个字符，因此在我键入时永远不会让我看到这些字符。

就好像浏览器认为窗格有一个宽度，而 Ace 认为它有另一个宽度，该宽度是使用编辑器在窗格中显示其他任何内容所需的最小宽度。

这是我的 React，使用 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"
      
      
    />
  </div>;

这是我的 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%;

我尝试实施 react-split docs 中的 CSS 建议。我也用float:left 实现了这个并且遇到了同样的问题。我可能搞错了，因为我发现文档很难理解。

我在 CSS 中做错了吗？感谢您提供的任何帮助。

（注意：我意识到 Ace 提供了一种拆分编辑器的方法，但这不是我想要在我的应用程序中做的事情。我只是使用两个编辑器进行演示。）

【参考方案1】：

afk-mario 提供了an answer on GitHub，我会总结一下。

Ace 编辑器会重新计算其大小以响应窗口resize 事件，因此我可以通过手动发出此事件来强制重新计算。

将以下内容添加到 React 的 componentDidMount() 和 Split 的 onDragEnd() 处理程序可以解决问题：

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