Should handle vertical and horizontal overflow

[devenovil]

Current behaviour

Editor didn't handle vertical and horizontal overflow

Expected behaviour

Editor should handle vertical and horizontal overflow (may be wrap content for handle horizontal)

Code sample

https://codesandbox.io/s/py38vl9nn0

Screenshots (if applicable)

What have you tried

I already tried using style={{overflow-y: 'auto', overflow-x:'auto'}} to set scroll if there an overflow content, it's show scroll for both vertical and horizontal overflow, but there is some strange bug.
If i click cursor on overflow line, and put it on the end, it's show on the max width, instead of the end of the line.
And also when i'm going to the bottom line, the cursor show on the max height, instead of the bottom of the line.

Your Environment

software	version
react-simple-code-editor	^0.8.0
react	^16.7.0
npm or yarn	6.2.0
node	10.8.0
browser	Google Chrome Version 72.0.3626.109

[satya164]

Don't set max height and overflow values on the editor directly. Wrap it in a div and set the overflow and height on that.

[devenovil]

Owh thanks, for height it works, but for width it's not work, please re-check again and re-open this issue for horizontal wrap

[wulucxy]

@devenovil have the same problem。do you have solve it?

[wulucxy]

@satya164 horizontal scrollBar still need to be solved。

[devenovil]

@devenovil have the same problem。do you have solve it?

nope, i didn't find any solution for fix this bug, yet @satya164 still not re-open this issue

[SzymonNiemiec]

I found a solution, you have to change textarea width and height dynamically. I'm using styled-components that's why I have variable inside CSS.

Add class to Editor to have the possibility to querySelector (tried with useRef hook but couldn't get scrollHeight from ref)

className="simple-editor"

Make two states (in my case initial width is multiplied by 0.55 because I want to cover 55% screen width by editor).

const [textareaHeight, setTextareaHeight] = useState(window.innerHeight);
const [textareaWidth, setTextareaWidth] = useState(window.innerWidth*0.55);

Each time you change the content, change the width and height of the textarea to the same as the editor itself (you can add deboucing)

    useEffect(() => {
        const editorHeight = document.querySelector('.simple-editor').scrollHeight;
        const editorWidth = document.querySelector('.simple-editor').scrollWidth;
        setTextareaHeight(editorHeight);
        setTextareaWidth(editorWidth);
    },[content])

You have to add following styles to the editor:

overflow: auto !important;  
white-space: pre;  
height: 100vh;

To the "pre" element inside Editor:

height: 100vh;
white-space: pre !important;
word-wrap: normal !important;

To the textarea inside Editor:

white-space: pre !important;
word-wrap: normal !important;
height: ${({ textareaHeight }) => textareaHeight}px!important;
width: ${({ textareaWidth }) => textareaWidth}px!important;