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.