Editor does not scroll horizontally with long line

1

When a line is longer than the width of the editor, I would expect that the horizontal scrollbar appears within the editor.

Instead, CodeMirror increases the width of the editor

CodeMirror scrolling
CodeMirror scrolling900×470 651 KB

I made sure than the option lineWrapping is set to false.

Is there a way to force scrolling of the editor itself.

1 Like
2

The editor does behave like you expect if you make sure it has a fixed width in your style (see all the examples on the website for example). So check your CSS, I guess.

3

I use width='100%' for the style of the TextArea, so that the editor always fit horizontally when the dialog window is resized. Is this the problem?

If I set a fixed width, it does work however: the horizontal scrollbar appears within the editor.

4

Have you found a solution for this?

5

A solution is to set the width manually on every resize, this is an example in React

    const containerRef = useRef<HTMLDivElement>(null)
    const [width, setWidth] = useState('100%')
    useLayoutEffect(() => {
        const onResize = () => {
            const element = containerRef.current
            if (!element) {
                return
            }
            element.style.width = '100%'
            const w = element.getBoundingClientRect().width
            setWidth(w)
        }
        onResize()
        window.addEventListener('resize', onResize)
        return () => {
            window.removeEventListener('resize', onResize)
        }
    }, [])

    return (
        <div
            ref={containerRef}
            style={{ width }}
            className='flex flex-col overflow-x-auto grow'
        >
            <div
                className='markdown-editor grow not-prose h-full'
                ref={elementRef}
            ></div>
        </div>
    )