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.
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
For future people, I followed @marijn suggestion and essentially copied this entire file:
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.
4 Likes
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)
}
}
After a recent CodeMirror update, the autocomplete popover started only being visible when the cursor was a few dozen columns into the editor. I’ve been using the approach described by @fs1 for a bit, and it turns out we also need to swap lines 232 and 233; the gutter class that we’re copying assumes that its width will be eating up the left-hand side of the editor (for LTR languages), but since our patched version goes on the right-hand side of the editor, we need to increase the margin on that side.
return view.textDirection == Direction.LTR
? { right: value.dom.offsetWidth * view.scaleX }
: { left: value.dom.offsetWidth * view.scaleX };