React-ace: Cursor is not at the right site

[huangjiatian]

Hi,all
I found the cursor is not all the right site
how can i fix it

[RTKSoftware]

Hello
I got same problem
I used an example from demo (http://securingsincity.github.io/react-ace/)
I was helped by the removal of fontSize = {14} from my code

[securingsincity]

@huangjiatian @RTKSoftware i found this tweet that might help you https://twitter.com/Maluen0/status/862636368857583616 Sounds like the exact issue with the soultion

[samreaves]

I had this issue when the font-size in CSS was a differing value than the one I passed to the editor props. Resolved the issue by removing the font-size from the CSS.

[MM3y3r]

Same issue. Please fix. Or provide a way to fix.

[MatthewLarner]

@MaximusDesign I also had this issue and found that ace is relying on monospace fonts.
In my case the issue was caused because of global font-family settings overriding monaco that ace sets.

I found I could resolve by either setting the font in the editor to a monospace font or simply inherit

We're using styled-components so our solution looks like this.

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

[BrianJVarley]

I used a similar issue when deleting or adding to the editor the cursor is 4 spaces from the actual position. Similar to @MatthewLarner we used styled-components but instead set the font-family to Ace's default consolas and reduced the line height:

 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>
    );

[paulfrom]

i got the same issue,but all way above does not work,then i search the solution from the origin ace,
i got this https://github.com/ajaxorg/ace/issues/2548. it's certain the font cause the cursor problem. change the font to monospace worked for me.
.ace_editor, .ace_editor div{ font-family:monospace }