Should handle vertical and horizontal overflow about react-simple-code-editor HOT 6 CLOSED

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.

from react-simple-code-editor.

@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

from react-simple-code-editor.

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

from react-simple-code-editor.

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

from react-simple-code-editor.

@satya164 horizontal scrollBar still need to be solved。

from react-simple-code-editor.

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;

from react-simple-code-editor.