Correct way to use replace range for broadcasting code?

1

Hello!

I’m making a code broadcast/share application. Currently, I’m using getValue() to send code from the broadcaster and setValue() to update viewers. This seems unnecessarily expensive, so I’m trying to use replaceRange on the viewers with changeObj sent by the broadcaster.

I’m having indent and bracket issues with this approach, similar to issue 2147 on GitHub. What is the right way to do this in the current version? I was unable to find anything on GitHub, StackOverflow or on here.

Thank you.

Tags: Share code, collaborate, broadcast code, send code, publish code, update codemirror from changes

2

Please let me know if you need more information on this.

Here’s an SS of what’s happening:
image

My configs:

   var codeCM = new CodeMirror.fromTextArea(txtareaCode, {
  mode: "python", //Force python
  autoCloseBrackets: true,
  autoCloseTags: true,
  imageUpload: false,
  foldGutter: {
    rangeFinder: new CodeMirror.fold.combine(
      CodeMirror.fold.brace,
      CodeMirror.fold.comment
    ),
  },
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
});

var watchCM = new CodeMirror.fromTextArea(txtareaWatch, {
  mode: "python", //Force python
  foldGutter: {
    rangeFinder: new CodeMirror.fold.combine(
      CodeMirror.fold.brace,
      CodeMirror.fold.comment
    ),
  },
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
});
3

The relevant code, which applies changes to the other editor, doesn’t appear to be there. Just applying the changes provided by "change" or "changes" events, in the right order, should be all you need to do to keep another editor in sync (assuming one-way synchronization).

4

I’m using

    codeCM.on('changes', function(cm, changeObj){
    watchCM.replaceRange(changeObj[0].text, changeObj[0].from, changeObj[0].to, 'Teacher')
})

CodePen here

5

Given that you’re passed an array of change objects, you could try applying all of them, as opposed to just the first one.