Merge pull request basecamp#1131 from basecamp/selected-ranges

Use the target range to insert the replacement text

Author: Alberto Fernández-Capel

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())