How to create a right-side panel that's immune to scrolling?

v6
1

My CodeMirror 6-based editor uses a panel on the right side.

According to this discussion, I can add it as a sibling of the gutter. As I can see, cm-gutter and cm-content are siblings, so I tried adding it with view.contentDom.after(panel). However, this had the flaw that when the editor lines were too long, the panel was pushed out of view by the code, and had to be scrolled to.

I tried messing with position: absolute; on the panel, but my attempts had the flaw that long lines would go under the panel.

My current solution is to keep CodeMirror in a div inside flex container, and the panel adds itself as a sibling of the div. This has the flaw that I’m not using the CodeMirror editor scrolling, so gutters can be scrolled out of view.

Is there a solution that would make the panel permanently occupy space on the right of the editor, sort of like gutters but on the right and not scrolling vertically together with the code?

2

I don’t think this can be done inside the editor’s DOM—the wrapper (which doesn’t scroll along with the content) is a vertical flexbox, and the scroller, which is a horizontal flexbox, does scroll with the content. So for a right-side panel, you’d indeed need to create an additional element around the editor that’s a horizontal flexbox. However, since you indicate it shouldn’t scroll with the editor content, it sounds like you could leave the scrolling to the editor’s own element. The scrollbar will be to the left of the panel, but that seems reasonable if it’s not being scrolled.

1 Like
3

Thanks. I was pretty confused with the scrolling/overflowing behavior, but I got to this solution which seems to work (React + Tailwind):

style extension:

extensions: [
            // ...
            EditorView.theme({ "&": { height: "100%" } }),
          ],

container:

<div className="flex w-[100ch] max-h-[80vh]">
      <div ref={editorRef} className="w-3/4  overflow-auto"></div>
      {/*panel goes here*/}
</div>

panel constructor:

 constructor(view: EditorView) {
        this.dom = document.createElement("div");
        this.dom.className = (<div className="w-1/4" />).props.className;
        const parent = view.dom.parentNode as HTMLElement;
        parent.after(this.dom);
        this.reactRoot = createRoot(this.dom);
        this.updatePanel(view);
      }

Editor and panel have separate x and y scrolling, the container doesn’t take more vertical space than needed, and the CM scrolling properly keeps gutters and bottom panels.