Allow wrapping `cm-gutters` and `cm-content` with a container div that controls width

[alexw]

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) to 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 max-width on cm-scroller but making it non-scrollable, and setting overflow: auto on a higher ancestor element? Will this cause problems?

[marijn]

@alexw

• Is it a good idea to change this.view.scrollDOM.insertBefore(this.dom, after) to 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.

Supporting that kind of invasive changes to the editor’s DOM structure is not something I’m interested in—it’d be a pain to maintain, and will surely break 3rd-party code.

@alexw

Or are there other recommended workarounds? For example, what about setting max-width on cm-scroller but making it non-scrollable, and setting overflow: auto on a higher ancestor element? Will this cause problems?

No, that’s entirely supported. (cm-scroller is non-scrollable by default, in fact).

[alexw]

Thanks for clarifying! I think I should stick to just setting CSS and not changing the DOM structure.