AtomicRanges in codemirror 0.20.0

Hi there. I’m facing an issue when upgrading to codemirror 0.20.0, as I do not manage to get atomic ranges working again (previously used for cursor movement and deleting replace decorations as a single entity).

What I was doing in previous version was exporting my plugin as :

  const variablesPlugin = ViewPlugin.fromClass(class {
    decorations: DecorationSet;

    constructor(view: EditorView) {
      this.decorations = variables(view);

    update(update: ViewUpdate) {
      if (update.docChanged || update.viewportChanged)
        this.decorations = variables(update.view);
  }, {
    decorations: v => v.decorations,
    provide: [PluginField.atomicRanges.from((v) => v.decorations)]

I’m having a hard time understanding how I should migrate this to get a similar behaviour in version 0.20.0, and I’d appreciate any help I can get.


1 Like

Something like this should work:

  provide: plugin => EditorView.atomicRanges.of(view => {
    let value = view.plugin(plugin)
    return value ? value.decorations : Decoration.none
1 Like

Thank you, it’s working great :+1:

Hello, can this be updated on the Examples section for the CM 6 site?

There doesn’t seem to be any reference to atomicRanges in any of the examples, so I’m not sure what you want me to update.

Perhaps the “Decorations” section in the manual can have a reference to this useful ViewPlugin that @PepitoBoy wrote as an example of how to port atomic replacement marks to cm6. Would be awesome.