uiwjs / react-textarea-code-editor

A simple code editor with syntax highlighting.
https://uiwjs.github.io/react-textarea-code-editor/
MIT License
476 stars 22 forks source link

more customisable padding #174

Open jkoufalas opened 7 months ago

jkoufalas commented 7 months ago

Hi

I love this package, its very useful. Thanks

Is there a way to use padding in a specific direction instead of the uniform padding prop whish applies the specified number on all sides.

I want to have padding on the left larger than top, bottom and right because I'm using showLineNumbers with rehypePrism which automatically sets my line numbers for each line and also accurately skips numbering a line for lines that go over multiple lines.

when I use CSS to add the line value as content before the line and shift that in front of the line, if there is no padding it will move off the area and not be visible. If I use a larger padding all these problems disappear and it visible and is much more simple to implement.

So, prop for padding be able to accept an array of numbers in the same order as CSS

e.g. padding: "15px 15px 15px 30px", // top, right, bottom, left and possible a single number if people want to keep it the same for all.

thanks john

jaywcjlove commented 6 months ago

@jkoufalas like this?

.w-tc-editor-preview, .w-tc-editor-text {
    padding-left: 32px !important;
}