[v3.x] Uncaught RangeError: Applying a mismatched transaction - when using setHTML or setMarkdown

I recently upgraded from version 2.x to 3.x. For reasons that are beyond my understanding, I’m unable to use setHTML() or setMarkdown() methods to force set different content.

The following code yields a Uncaught RangeError: Applying a mismatched transaction, which appears to originate from ProseMirror.

How To Reproduce

const editor = new Editor({
    el: document.querySelector('#editor'),
    initialValue: ''
});

editor.setHTML('Hi there...');

(The above code is almost 100% identical to what my code looks like. Only difference is that I specify a height and toolbar)

The same is true when using setMarkdown().

Expected behavior

Editor’s content should be set.

Desktop (please complete the following information):

• Browser Firefox, Chromium
• Version latest stable versions

Additional context

Acc. to my browser’s output, the error is thrown somewhere inside the ProseMirror’s applyInner method. However, this is far beyond my understanding.

I need to be able to set the editor’s content dynamically, due to several Browser tests I perform in my application

// : (Transaction) → EditorState
EditorState.prototype.applyInner = function applyInner (tr) {
  if (!tr.before.eq(this.doc)) { throw new RangeError("Applying a mismatched transaction") }
  var newInstance = new EditorState(this.config), fields = this.config.fields;
  for (var i = 0; i < fields.length; i++) {
    var field = fields[i];
    newInstance[field.name] = field.apply(tr, this[field.name], this, newInstance);
  }
  for (var i$1 = 0; i$1 < applyListeners.length; i$1++) { applyListeners[i$1](this, tr, newInstance); }
  return newInstance
};

[aedart]

I sincerely apologise for my mistake. The reason for the failure I experienced, had nothing directly to do with the editor. Somehow the editor instance became reactive, since I created my own Vue.js wrapper for it.

I took a lot of time to find the root cause of the defect, because I wasn’t looking in the right place (was passing reference to editor via a Vue component property… which of course made it reactive!).

[flipwordit]

I sincerely apologise for my mistake. The reason for the failure I experienced, had nothing directly to do with the editor. Somehow the editor instance became reactive, since I created my own Vue.js wrapper for it. I took a lot of time to find the root cause of the defect, because I wasn’t looking in the right place (was passing reference to editor via a Vue component property… which of course made it reactive!).

Hi, how did you solve it? I have the same problem now

Hi! I moved editor member out of vue component in global space. I use one editor on page it’s good enough for me https://github.com/Smartoteka/cheatsheets_chrome/commit/7b3d1a8ebccba554cdfe2127d55f22f255bb28a0#diff-7c90a7dfa2df43f486d015eccdbd19b0a8c4c792884d917cd5984da61dddd11c