Thank you @marijn for developing this wonderful library!
I’m building a Markdown editor with CodeMirror 6, and I’d like to use CSS max-width
to limit the width of the content + the gutters.
Although I can add max-width
to cm-scroller
, what I really want is to still keep the scrollbar at the edge of a parent container—for example, at the edge of the screen—instead of leaving some space when max-width
is in effect.
So it seems that I need to be able to add a container that wraps gutters and content, set max-width
on the container, and set width: 100%
on cm-scroller
, resulting in structure like this:
<cm-scroller>
<content-container> <-- the container
<cm-gutters />
<cm-content />
</content-container>
<layers>
</cm-scroller>
I tried creating a ViewPlugin that changes the DOM to this structure, but there’s a problem: the gutters are hard-coded to reference scrollDOM
, especially this line, which means that whenever I scroll the editor quickly to trigger the “detach”, the gutters are gone, because this.dom.nextSibling
is not a child of scrollDOM
, so the gutters fails to insert itself back.
Questions
- Is it a good idea to change
this.view.scrollDOM.insertBefore(this.dom, after)
toafter?.parentNode?.insertBefore(this.dom, after)
in the gutters ViewPlugin? So that it’s more flexible to support the mentioned usage. If it’s fine I’d love to submit a PR. - Or are there other recommended workarounds? For example, what about setting
max-width
oncm-scroller
but making it non-scrollable, and settingoverflow: auto
on a higher ancestor element? Will this cause problems?