Changing values of numbers in CodeMirror by using scrubbing addon

Question

I'm having trouble with CodeMirror. I'm trying to add in live number scrubbing, similar to Brett Victor's example, and Khan Academy's capability, but I am not having too much luck.

I can't post links, but I found this library which kind of gets the job done (made by user FWeinb on GitHub) which can kind of accomplish what I'm looking for, but I've noticed that although the numbers appear to have been changed, as soon as I do something like press enter in CodeMirror, then the value of the variable resets to what it was originally.

I'm using ReactJS, and I am not too sure how to fix this. I'm trying something a little ludicrous by calling this.replaceRange every time the contents are being changed, but there must be a better way. Here is a snippet of my code. It's not what I want it to be ideally, but just for testing purposes:

this.cm.on('dblclick', this.handleDblClick.bind(this))
...
handleDblClick() {
  let matches = document.querySelectorAll(".cm-number");
  let scrub = new Scrubbing (matches[0], 
    { driver : 
              [ 
                Scrubbing.driver.Mouse,
                Scrubbing.driver.MouseWheel,
                Scrubbing.driver.Touch
              ]
    })
  matches[0].addEventListener('DOMSubtreeModified', () => {
    //console.log('change detected')
  })
}

So I know that currently the scrubber edits this: <span class="cm-number"></span>, but that the actual underlying data isn't updating with the scrubber, nor is it persisting. Can anyone shed some light on what I should be doing here so that the value of the variable within the editor is updating live with the scrubber, and so that the value persists upon a new action?