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: