is it possible to style custom gutter on right side?

fs1 · March 14, 2022, 10:50pm

For future people, I followed @marijn suggestion and essentially copied this entire file:

codemirror/gutter/blob/c864e4a09219a10e8f3f503e68534a8f0c28bb20/src/index.ts#L180

      
        
              this.gutters = view.state.facet(activeGutters).map(conf => new SingleGutterView(view, conf))
              for (let gutter of this.gutters) this.dom.appendChild(gutter.dom)
              this.fixed = !view.state.facet(unfixGutters)
              if (this.fixed) {
                // FIXME IE11 fallback, which doesn't support position: sticky,
                // by using position: relative + event handlers that realign the
                // gutter (or just force fixed=false on IE11?)
                this.dom.style.position = "sticky"
              }
              this.syncGutters(false)
              view.scrollDOM.insertBefore(this.dom, view.contentDOM)
            }
            
            
update(update: ViewUpdate) {
              if (this.updateGutters(update)) {
                // Detach during sync when the viewport changed significantly
                // (such as during scrolling), since for large updates that is
                // faster.
                let vpA = this.prevViewport, vpB = update.view.viewport
                let vpOverlap = Math.min(vpA.to, vpB.to) - Math.max(vpA.from, vpB.from)
                this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8)

Changing line 180 to:

view.scrollDOM.insertBefore(this.dom, view.contentDOM.nextSibling);

Which simply appends the gutter after the main editor area, placing it neatly on the right side.