React-ace: setPadding prop

[jcruz]

Problem

Looking to be able to set padding through props. Currently have to do editor.renderer.setPadding(value) to set editor padding.

Sample code to reproduce your issue

For example, trying to set padding through style props doesn't work

import React from 'react';
import { render } from 'react-dom';
import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/java';
import 'brace/theme/github';

function onChange(newValue) {
  console.log('change',newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{$blockScrolling: true}}
    style={{padding: 8}}
  />,
  document.getElementById('example')
);

[jcruz]

Ended up setting this property using the onLoad prop.

[tageecc]

any updates?

[brandontle]

Ended up setting this property using the onLoad prop.

Hey @jcruz , do you mind sharing what function you fed into the onLoad prop? I'm also having issues setting the padding for the editor.

[jcruz]

@brandontle yeah, it looks like this:

onLoadFunction = editor => {
  editor.renderer.setPadding(8)
}

[brandontle]

@jcruz Thanks for the reply. It doesn't seem to work for me, although I may be doing something wrong. Was there anything else you did with the editor's style?

I put up a codesandbox with your recommendation:
https://codesandbox.io/s/vjj92wpz07

[brandontle]

@jcruz Sorry, disregard; I got it sorted on the Codesandbox now, but unfortunately, my app doesn't behave the same way. So it must be a styling conflict somewhere in my code.

Thanks for the help!

[brandontle]

But for posterity's sake, the above Codesandbox example only provides side padding, not top or bottom padding.

I've been targeting the .ace_content classname in CSS, but if anyone else has a better way for top/bottom padding, would love to hear it.

[bessarabov]

I've been targeting the .ace_content classname in CSS

I've tried to use

.ace_content {
    padding: 1rem 0.5rem;
}

This added padding, but it also broke mouse selection. With this css the mouse selection is mispositioned. At last I've removed this css and used

<AceEditor
        ...
        onLoad={function(editor){ editor.renderer.setPadding(10); editor.renderer.setScrollMargin(10); }}
        ...

This is not perfect, when you scroll the code in the editor the top "padding" disappears, but for my case it is ok.