setPadding prop

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

[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.

[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.