Setting editor text without focus


#1

I’m watching a TextEditor and a wysihtml5 editor in an iframe. When a new word is written in the wysihtml5 editor I send its contents to the TextEditor. The problem is, this causes wysihtml5 to lose focus of some sort so that when I type into it again the cursor is now in the middle of the wysihtml5 editor, no matter where I was tying into it before.

Code (what I’ve tried)

editor.on('newword:composer', function () {
  var html = editor.getValue();
  console.debug('Change detected in wysihtml editor');
  window.parent.postMessage({event: 'atom-wysiwyg:wysiwyg-change', html: html},
    '*');
});

This sends a message to the parent window (Node’s global) every time a new word is written in the wysiwyg.

global.addEventListener('message', (event) ->
  # check type of event
  switch event.data.event
    when 'atom-wysiwyg:wysiwyg-change'
      editor.setText event.data.html
)

This changes the Atom editor contents when the message is received. This results in the Atom editor emitting an event which I listen to set the wysiwyg contents (this time, the wysiwyg doesn’t emit an event, so there’s no infinite recursion).

Atom editor event listener

@subscriptions.add editor.onDidChange ->
  console.log 'Change detected in atom editor'
  atomWysiwygView.setText editor.getText()

Wysiwyg message event listener to set contents

window.addEventListener('message', function (event) {
  // check name of event
  if (event.data.event === 'atom-wysiwyg:text-editor-change') {
    console.debug('Request to set wysihtml editor text received');
    console.debug(event.data);
    editor.setValue(event.data.text);
  }
});