How to use scrollMargin?


I made it pretty far with CodeMirror 6 and almost got a complete Markdown editor field for Kirby CMS working (see GitHub - sylvainjule/kirby-markdown-field at next). It’s just such a big step from CM5, thank you so much!

But I’m currently struggling with scrollMargins, because the editor field is supposed to have a sticky toolbar and Kirby also has a bottom bar, which sometimes covers parts of the editor. When I stumbled across scrollMargin support in the reference (CodeMirror 6 Reference Manual), I was wondering how I would create a single extension, that would just keep care of setting this property?


Something like this (when you provide the marginPlugin value as an extension) should work:

const marginPlugin = ViewPlugin.fromClass(class {
  margin: {left: 0}

  constructor(_view: EditorView) {}

  update(_update: ViewUpdate) {
    // Your update logic here
    this.margin = {left: 100}
}, {
  provide: PluginField.scrollMargins.from(value => value.margin)

Thank you very much, works perfectly! :100:

@marijn I’ve just updated all of the CM packages to their latest versions and somehow the PluginField class is not exported any longer. But in the view’s changelog I cannot find anything. Was this an intentional change? If so, I’d like to ask you kindly for providing an updated example. :slight_smile:

It looks like the changelog on the website is broken, I’ll look into that. For now, take a look at the changelog file on github, or the announcement post.

@marijn Thanks for the info. But to be honest, I’m afraid that still don’t understand the concept of Facets, though. What’s the simplest way of providing a scrollmargins value to the editor?

Well, time to study then, I’d say.

Sorry to bother you.
I get some confuse with this functionality in 0.20.0, and I tried it for several hours but I haven’t make it.
Could you please give me some hint or example?

I find a similar answer in AtomicRanges in codemirror 0.20.0, it solve my problem perfectly.