How to use scrollMargin?

v6
1

Hi,

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?

Thanks

2

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)
})
2 Likes
3

Thank you very much, works perfectly! :100:

4

@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:

5

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.

6

@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?

7

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

8

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?

9

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

10

Is this still the way to do scrollMargins? I can’t seem to get this code working.

Looking at the Reference Manual I don’t see anything about PluginField, so I don’t even know where to import that from.

I do see that scrollMargins is now a Facet under EditorView. I can get the following extension to execute but it doesn’t seem to actually work for increasing the scroll margin.

EditorView.scrollMargins.of((view) => {
  console.log(view);
  return {
    bottom: 100
  }
})

I’m just trying to get a basic “scroll-past-end” setup in CM6. Do you have any updated examples of how scrollMargins are supposed to work?

11

Alternative way to achieve the basic “scroll-past-end” functionality using a theme.

EditorView.theme({
  '.cm-scroller': {
    paddingBottom: '10em'
  }
});

Not sure if that’s the intended way. :man_shrugging:

12

scrollMargin won’t help with what you are trying to accomplish. The scrollPastEnd extension might be what you are looking for.

13

Ah. Perfect. Despite my searching, I didn’t find that extension. Thank you.