Skip to content

Commit

Permalink
Fix: duplicated newlines when using dictation on iOS 18+.
Browse files Browse the repository at this point in the history
This fixes a bug that started to happen with iOS 18, where you would get duplicated newlines
after completing the dictation.

The bug happens because, upon dictation completion, iOS sends the sequence of `beforeinput` events
very quickly. With the `insertParagraph` ones, it can happen that the internal document range fails
to update, resulting in duplicated newlines and missed content.

This workaround is necessary due to the inability to distinguish text entered in dictation mode, as
iOS WebKit doesn’t trigger composition events during dictation (https://bugs.webkit.org/show_bug.cgi?id=261764).
  • Loading branch information
jorgemanrubia committed Oct 28, 2024
1 parent e597bc4 commit 5c5a4f3
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 5 deletions.
9 changes: 7 additions & 2 deletions src/trix/controllers/level_2_input_controller.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getAllAttributeNames, squishBreakableWhitespace } from "trix/core/helpers"
import { getAllAttributeNames, shouldRenderInmmediately, squishBreakableWhitespace } from "trix/core/helpers"
import InputController from "trix/controllers/input_controller"
import * as config from "trix/config"

Expand Down Expand Up @@ -80,7 +80,12 @@ export default class Level2InputController extends InputController {

if (handler) {
this.withEvent(event, handler)
this.scheduleRender()

if (shouldRenderInmmediately(event)) {
this.render()
} else {
this.scheduleRender()
}
}
},

Expand Down
19 changes: 16 additions & 3 deletions src/trix/core/helpers/events.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const testTransferData = { "application/x-trix-feature-detection": "test" }

export const dataTransferIsPlainText = function(dataTransfer) {
export const dataTransferIsPlainText = function (dataTransfer) {
const text = dataTransfer.getData("text/plain")
const html = dataTransfer.getData("text/html")

Expand All @@ -20,7 +20,7 @@ export const dataTransferIsMsOfficePaste = ({ dataTransfer }) => {
dataTransfer.getData("text/html").includes("urn:schemas-microsoft-com:office:office")
}

export const dataTransferIsWritable = function(dataTransfer) {
export const dataTransferIsWritable = function (dataTransfer) {
if (!dataTransfer?.setData) return false

for (const key in testTransferData) {
Expand All @@ -36,10 +36,23 @@ export const dataTransferIsWritable = function(dataTransfer) {
return true
}

export const keyEventIsKeyboardCommand = (function() {
export const keyEventIsKeyboardCommand = (function () {
if (/Mac|^iP/.test(navigator.platform)) {
return (event) => event.metaKey
} else {
return (event) => event.ctrlKey
}
})()

export function shouldRenderInmmediately(inputEvent) {
if (/iPhone|iPad/i.test(navigator.userAgent)) {
// Handle duplicated newlines when using dictation on iOS 18+. Upon dictation completion, iOS sends
// the list of insertText / insertParagraph events in a quick sequence. For newlines, if we don't render
// the editor synchronously, the internal range fails to update and results in duplicated newlines.
// This workaround is necessary because iOS doesn't send composing events as expected while dictating:
// https://bugs.webkit.org/show_bug.cgi?id=261764
return inputEvent.inputType === "insertParagraph"
} else {
return false
}
}

0 comments on commit 5c5a4f3

Please sign in to comment.