Improve handling of composition events

src/trix/controllers/input_controller.coffee

@@ -225,33 +225,34 @@ class Trix.InputController extends Trix.BasicObject
       event.preventDefault()
 
     compositionstart: (event) ->
+      if @inputSummary.eventName is "keypress" and @inputSummary.textAdded
+        @responder?.deleteInDirection("left")
+
       unless @selectionIsExpanded()
-        # Skip placeholder if keypress input was received before the composition started
-        unless @inputSummary.eventName is "keypress" and @inputSummary.textAdded
-          textAdded = @responder?.insertPlaceholder()
-          @setInputSummary({textAdded})
-          @requestRender()
+        @responder?.insertPlaceholder()
+        @requestRender()
 
-      @setInputSummary(composing: true, compositionStart: event.data)
+      compositionRange = @responder?.getSelectedRange()
+      @setInputSummary({compositionRange, compositionStart: event.data, composing: true})
 
     compositionupdate: (event) ->
-      if @responder?.selectPlaceholder()
+      if compositionRange = @responder?.selectPlaceholder()
+        @setInputSummary({compositionRange})
         @responder?.forgetPlaceholder()
 
-      @setInputSummary(composing: true, compositionUpdate: event.data)
+      @setInputSummary(compositionUpdate: event.data)
 
     compositionend: (event) ->
-      if @responder?.selectPlaceholder()
-        @responder?.forgetPlaceholder()
-
-      {compositionStart} = @inputSummary
-      {data} = event
+      {compositionStart, compositionRange} = @inputSummary
 
-      if compositionStart? and data? and compositionStart isnt data
+      if compositionStart? and compositionRange?
         @delegate?.inputControllerWillPerformTyping()
-        @responder?.insertString(data)
-        {added, removed} = summarizeStringChange(compositionStart, data)
-        @setInputSummary(composing: false, textAdded: added, didDelete: Boolean(removed))
+        @responder?.setSelectedRange(compositionRange)
+        @responder?.insertString(event.data)
+        @setInputSummary(preferDocument: true)
+
+      @responder?.forgetPlaceholder()
+      @setInputSummary(composing: false)
 
     input: (event) ->
       event.stopPropagation()

src/trix/models/composition.coffee

@@ -195,12 +195,11 @@ class Trix.Composition extends Trix.BasicObject
   insertPlaceholder: ->
     @placeholderPosition = @getPosition()
     @insertString(placeholder)
-    placeholder
 
   selectPlaceholder: ->
     if @placeholderPosition?
       @setSelectedRange([@placeholderPosition, @placeholderPosition + placeholder.length])
-      true
+      @getSelectedRange()
 
   forgetPlaceholder: ->
     @placeholderPosition = null

test/src/system/composition_input_test.coffee

@@ -51,3 +51,25 @@ editorTest "composing another language using a QWERTY keyboard", (expectDocument
     updateComposition "xi", ->
       endComposition "喜", ->
         expectDocument "喜\n"
+
+# Simulates the sequence of events when pressing backspace through a word on Android
+editorTest "backspacing through a composition", (expectDocument) ->
+  element = getEditorElement()
+  element.editor.insertString("a cat")
+
+  triggerEvent(element, "keydown", charCode: 0, keyCode: 229, which: 229)
+  triggerEvent(element, "compositionupdate", data: "ca")
+  removeCharacters -1, ->
+    triggerEvent(element, "keydown", charCode: 0, keyCode: 229, which: 229)
+    triggerEvent(element, "compositionupdate", data: "c")
+    triggerEvent(element, "compositionend", data: "c")
+    removeCharacters -1, ->
+      pressKey "backspace", ->
+        expectDocument "a \n"
+
+removeCharacters = (direction, callback) ->
+  selection = rangy.getSelection()
+  range = selection.getRangeAt(0)
+  range.moveStart("character", direction)
+  range.deleteContents()
+  defer(callback)