Use the target range to insert the replacement text

When the browser auto-corrects a misspelled word, it dispatches a
`beforeinput` event with the `insertReplacementText` input type and a
`dataTransfer` object containing the replacement text. The event also
contains a `getTargetRanges` method that returns an array of `DOMRange`
objects representing the range of text that will be replaced.

When the `Level2InputController` was originally implemented, not all
browsers supported the `getTargetRanges` method, so it was not used.

Now that all supported browsers do support `getTargetRanges`, we can use
it to insert the replacement text at the correct location. This ensures
editor state is updated correctly the cursor is positioned correctly.

Ref.

- https://w3c.github.io/input-events/#overview (search for "insertReplacementText")
- https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/getTargetRanges

Author: afcapel

src/test/system/level_2_input_test.js

@@ -139,15 +139,22 @@ testGroup("Level 2 Input", testOptions, () => {
   })
 
   // https://input-inspector.now.sh/profiles/hVXS1cHYFvc2EfdRyTWQ
-  test("correcting a misspelled word in Chrome", async () => {
+  test("correcting a misspelled word", async () => {
     insertString("onr")
     getComposition().setSelectedRange([ 0, 3 ])
     await nextFrame()
 
     const inputType = "insertReplacementText"
     const dataTransfer = createDataTransfer({ "text/plain": "one" })
-    const event = createEvent("beforeinput", { inputType, dataTransfer })
+
+    const targetRange = document.createRange()
+    const textNode = getEditorElement().firstElementChild.lastChild
+    targetRange.setStart(textNode, 0)
+    targetRange.setEnd(textNode, 3)
+
+    const event = createEvent("beforeinput", { inputType, dataTransfer, getTargetRanges: () => [ targetRange ] })
     document.activeElement.dispatchEvent(event)
+
     await nextFrame()
     expectDocument("one\n")
   })

src/trix/controllers/level_2_input_controller.js

@@ -443,8 +443,12 @@ export default class Level2InputController extends InputController {
     },
 
     insertReplacementText() {
-      this.insertString(this.event.dataTransfer.getData("text/plain"), { updatePosition: false })
-      this.requestRender()
+      const replacement = this.event.dataTransfer.getData("text/plain")
+      const domRange = this.event.getTargetRanges()[0]
+
+      this.withTargetDOMRange(domRange, () => {
+        this.insertString(replacement, { updatePosition: false })
+      })
     },
 
     insertText() {

src/trix/models/selection_manager.js

@@ -29,6 +29,7 @@ export default class SelectionManager extends BasicObject {
     this.lockCount = 0
     handleEvent("mousedown", { onElement: this.element, withCallback: this.didMouseDown })
   }
+
   getLocationRange(options = {}) {
     if (options.strict === false) {
       return this.createLocationRangeFromDOMRange(getDOMRange())