React-ace: カーソルが正しい場所にありません

こんにちは
私は同じ問題を抱えています
デモの例を使用しました（http://securingsincity.github.io/react-ace/）
コードからfontSize = {14}を削除することで助けられました

@ huangjiatian @ RTKSoftware私はあなたを助けるかもしれないこのツイートを見つけましたhttps://twitter.com/Maluen0/status/862636368857583616soultionの正確な問題のように聞こえます

この問題は、CSSのフォントサイズがエディターの小道具に渡した値と異なる場合に発生しました。 CSSからfont-sizeを削除することで問題を解決しました。

同じ問題。 修正してください。 または、修正する方法を提供します。

@MaximusDesign私もこの問題を抱えていて、aceがモノスペースフォントに依存していることがわかりました。
私の場合、この問題は、エースが設定するmonacoをオーバーライドするグローバルフォントファミリ設定が原​​因で発生しました。

エディターでフォントを等幅フォントに設定するか、単にinheritを設定することで、解決できることがわかりました。

スタイル付きコンポーネントを使用しているため、ソリューションは次のようになります。

const Editor = styled(AceEditor)`
    * {
        font-family: inherit;
    }
`;

カーソルが実際の位置から4スペース離れていることをエディターに削除または追加するときに、同様の問題を使用しました。 @MatthewLarnerと同様に、 styled-componentsを使用しましたが、代わりにフォントファミリをAceのデフォルトのconsolasに設定し、行の高さを減らしました。

 const StyledEditor = styled.div`
      margin-top: 10px;
      * {
        font-family: consolas;
        line-height: 1;
      }
    `;

    return (
      <StyledEditor>
        <AceEditor
        mode="json"
        theme="solarized_dark"
        fontSize={14}
        value={''}
        setOptions={{
          showLineNumbers: false,
          tabSize: 2,
        }}
        editorProps={{ $blockScrolling: true }}
      />
      </StyledEditor>
    );

同じ問題が発生しましたが、上記のすべてが機能しない場合は、元のエースからソリューションを検索します。
私はこれをhttps://github.com/ajaxorg/ace/issues/2548で入手しました。 フォントがカーソルの問題を引き起こしていることは確かです。 フォントをmonospaceに変更してください。
.ace_editor, .ace_editor div{ font-family:monospace }