search

uiwjs / react-textarea-code-editor

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

stop code wrap #112

Open jashwanth999 opened 2 years ago

jashwanth999 commented 2 years ago

Is there any way to stop code wrap and make it horizontal scroll

image
jaywcjlove commented 2 years ago

This can not be achieved, it can only be so simple. @jashwanth999 There are more complex options here:

https://github.com/jaywcjlove/react-monacoeditor https://github.com/uiwjs/react-codemirror

vangelov commented 1 year ago

@jaywcjlove I just wonder why something like overflow-wrap: normal does not work here?

jaywcjlove commented 1 year ago

@vangelov This highlighting is implemented by overlapping pre and textarea. Maybe this is why overflow-wrap: normal doesn't work.

vangelov commented 1 year ago

Oh, I see. Thanks for the answer.

mskafo commented 1 year ago

so there's nothing to do?

nnnnat commented 3 months ago

I was able to prevent the code from text wrapping by nesting the CodeEditor inside a div with overflow: auto; and setting the width on the CodeEditor to max-content.

<div style={{ overflow: 'auto', }}>
  <CodeEditor style={{ width: 'max-content', }} />
</div>