Support React based editors

[asamuzaK]

See Reviews for withExEditor – Add-ons for Firefox (en-US)

[asamuzaK]

See also:

• Copy/paste between editors · Issue #787 · facebook/draft-js
• Unable to update draft.js content from external Javascript · Issue #1044 · facebook/draft-js

[asamuzaK]

See also

• What is the best way to simulate content change within an editor test? · Issue #743 · facebook/draft-js
• How to simulate user input for testing purpose? · Issue #347 · facebook/draft-js
• Make blackbox testing easier · Issue #325 · facebook/draft-js

[asamuzaK]

See also:

• Use the native beforeinput event if it's supported · Issue #11211 · facebook/react

[asamuzaK]

Summary of some tests.

dispatch beforeinput event: react does not listen to beforeinput

const dispatchBeforeInputEvent = (elm, value) => {
  const evt = new InputEvent("beforeinput", {
    bubbles: true,
    cancelable: true,
    data: value,
    inputType: "insertText",
  });
  elm.dispatchEvent(evt);
};

dispatch paste event: synthetic paste does not succeed

const dispatchPasteEvent = (elm, value) => {
  const evt = new ClipboardEvent("paste", {
    bubbles: true,
    cancelable: true,
    clipboardData: new DataTransfer(),
  });
  evt.clipboardData.setData("text/plain", value);
  elm.dispatchEvent(evt);
};

dispatch textInput event: permisson error occurs on Firefox

// TextEvent for firefox
(() => {
  if (!window.TextEvent && typeof cloneInto === "function") {
    class TextEvent extends InputEvent {
      constructor(type, opt) {
        super(type, opt);
      }
    }
    window.TextEvent = cloneInto(TextEvent, window, {
      cloneFunctions: true,
      wrapReflectors: true,
    });
  }
})();

const dispatchTextInputEvent = (elm, value) => {
  const evt = new TextEvent("textInput", {
    bubbles: true,
    cancelable: true,
    data: value,
  });
  elm.dispatchEvent(evt);
};

[asamuzaK]

Depends on Use the native beforeinput event if it's supported · Issue #11211 · facebook/react

[asamuzaK]

See also

• July 29th F2F Agenda Item - Clipboard events · Issue #135 · w3c/editing
• [beforeinput] PreventDefault() on InputType=cut differs from Clipboard API · Issue #18 · w3c/input-events

[asamuzaK]

#137 fixed Blink

[asamuzaK]

Gecko issue is tracked in another issue #138