prenx4x
December 6, 2021, 12:07am
#1
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
#2
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.
1 Like
fs1
March 14, 2022, 10:50pm
#3
For future people, I followed @marijn suggestion and essentially copied this entire file:
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.