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
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.
- Is it a good idea to change
after?.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
cm-scrollerbut making it non-scrollable, and setting
overflow: autoon a higher ancestor element? Will this cause problems?