is it possible to style custom gutter on right side?

prenx4x · December 6, 2021, 12:07am

As the title suggests I want to display a custom gutter on the right side in CM6. Is this possible and if yes then how? any examples would be appreciated.

marijn · December 6, 2021, 7:05am

With the @codemirror/gutter package, only if you set your entire editor’s text direction to be right-to-left. But it should be possible to write a plugin similar to the gutter extension that does this by adding a new DOM element next to the content element.

fs1 · March 14, 2022, 10:50pm

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

github.com

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.

VasylMarchuk · January 15, 2025, 10:33am

For even more future people who use @codemirror/view as of version 6.3.2, after cloning the file and patching the gutterView’s constructor as mentioned above, you also need to patch it’s syncGutters method

on line 191, from:

    if (detach) this.view.scrollDOM.insertBefore(this.dom, after)

to:

    if (detach) {
      if (after) {
        this.view.scrollDOM.insertBefore(this.dom, after)
      } else {
        this.view.scrollDOM.appendChild(this.dom)
      }
    }