AtomicRanges in codemirror 0.20.0

v6
1

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.

Thanks

1 Like
2

Something like this should work:

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

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

4

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

5

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.

6

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.