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

Use the target range to insert the replacement text
seanpdoyle · Feb 5, 2024 · e8dec44 · e8dec44
2 parents 10573a8 + cd9563c
commit e8dec44
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/test/system/level_2_input_test.js b/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")
   })

diff --git a/src/trix/controllers/level_2_input_controller.js b/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() {

diff --git a/src/trix/models/selection_manager.js b/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())