fix: iOS Autocorrect strips formatting by reporting wrong dataType by redstar504 · Pull Request #5789 · facebook/lexical

redstar504 · 2024-03-31T00:14:10Z

A troubling issue has been identified with the iOS keyboard's autocorrect behavior and how it affects text formatting.

When a user selects a word prediction, or, when the operating system injects an autocorrected word (such as when typing its and not including the apostrophe), the data transfer type is incorrectly reported as text/html. This does not reflect the actual content, as the payload only contains plain text.

Addressing this issue involves a very straightforward validation to ensure the presence of element nodes within the parsed DOM when the data type is reported as text/html, before proceeding with inserting the DOM nodes.

My solution simply checks for the presence of element nodes in the parsed DOM using querySelector('*'). An alternative condition, Array.from(dom.body.childNodes).some(node => node.nodeType === 1) could be considered; however querySelector offers a more concise expression.

Since iOS reports both text/plain and text/html data types for it's keyboard corrections, this case falls back to text/plain and works properly. My only concern is if there could be some data transfers that might contain only plain text while reporting only text/html. Perhaps we could condition for those and fall through to the text/plain handler if no DOM nodes exist as a result of the predicate that checks for elements.

In my opinion, this simple fix takes the editor from unusable to usable on iOS devices. See the before and after videos.

Before:

autocorrect-before.mp4

After:

autocorrect-after.mp4

vercel · 2024-03-31T00:14:14Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2025 11:20pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2025 11:20pm

ivailop7 · 2024-04-01T13:47:27Z

If this the assumed correct fix, could we please add a test and fix the tests, since they appear to be failing across the board.

ivailop7 · 2024-11-10T22:45:00Z

This seems to work correctly now.

BPreisner · 2024-12-23T10:53:33Z

@ivailop7 this still doesn’t work for me on iOS 18 https://playground.lexical.dev:

ScreenRecording_12-23-2024.11-49-27_1.mov

And it works perfectly on the env deployed for this PR: https://lexical-playground-kpe12sqos-fbopensource.vercel.app/

amanharwara · 2025-01-02T08:04:43Z

Yeah, this is still an issue. Very easily reproducible using the playground on iOS (i tried with a iOS 16.7 device and also a iOS 18.2 simulator). Can this PR be re-opened?

github-actions · 2025-01-02T15:15:38Z

size-limit report 📦

Path	Size
lexical - cjs	28.99 KB (0%)
lexical - esm	28.81 KB (0%)
@lexical/rich-text - cjs	37.96 KB (-0.01% 🔽)
@lexical/rich-text - esm	30.91 KB (-0.07% 🔽)
@lexical/plain-text - cjs	36.54 KB (+0.08% 🔺)
@lexical/plain-text - esm	28.15 KB (0%)
@lexical/react - cjs	39.77 KB (0%)
@lexical/react - esm	32.26 KB (0%)

etrepum · 2025-01-02T15:18:59Z

This PR still needs to be fixed before it can be accepted. If no progress is made on the failing tests and lack of new tests in the next few weeks then it will be closed again.

BPreisner · 2025-01-08T20:20:55Z

@redstar504 are you still around to take a look on these failing tests? 🙏🏼

… plain text

redstar504 · 2025-01-09T20:52:31Z

I've updated my solution with a different approach that passes all of the tests.

To provide a bit of an explanation, when an autocorrection or word prediction is chosen in Safari, the browser pastes the word and includes two meta types which are handled by our clipboard code: text/plain and text/html. This is strange behavior on behalf of Safari, because the pasted word is only ever plain text.

Our clipboard handling code treats the plain text as HTML, and the result of both the plaintext and HTML handling code running simultaneously causes the formatting to be stripped. To avoid this, I added a check that simply prevents the HTML handling code from running if there is also text/plain content, and the content is the same.

It's a pretty simple solution. The original checked for any DOM nodes in the pasted HTML before executing the insertion code (to make sure it's actually HTML). That one broke the tests because some of the tests paste plain text as text/html, or paste text that includes meta HTML without any nodes.

BPreisner · 2025-01-10T17:26:14Z

Awesome @redstar504 🚀 I can confirm that it's working as I would expect on the env deployed. @etrepum could you please review? 🙏🏼

etrepum

The code looks fine but it would be better if there was a test that shows that it does what it is trying to do

BPreisner · 2025-01-14T12:27:50Z

@redstar504 would you mind adding a test? :) We are close to have this issue fixed on main :P Let me know if you don't have enough time so I can try to write one

redstar504 · 2025-01-15T20:14:48Z

Added a test.

etrepum

Thank you for taking the time to write a test!

BPreisner · 2025-01-16T14:15:21Z

Awesome guys, thanks for fixing this @redstar504!

commit a62a1a6 Author: James Fitzsimmons <119275535+james-atticus@users.noreply.github.com> Date: Thu Jan 30 19:13:35 2025 +1100 [lexical-mark] Feature: include inline decorator nodes in marks (facebook#7086) commit 881c7fe Author: Bob Ippolito <bob@redivi.com> Date: Thu Jan 30 00:13:00 2025 -0800 [lexical-utils] Fix: Modify $reverseDfs to be a right-to-left variant of $dfs (facebook#7112) commit ce2bb45 Author: Nigel Gutzmann <nigelgutzmann@gmail.com> Date: Wed Jan 29 14:41:12 2025 -0800 [lexical-utils] Feature: add reverse dfs iterator (facebook#7107) commit 3a140d2 Author: mohammed shaheer kp <72137242+mshaheerz@users.noreply.github.com> Date: Tue Jan 28 06:19:45 2025 +0530 [lexical-playground] Bug Fix: Ensure Delete Node handles all node types (facebook#7096) Co-authored-by: shaheerkpzaigo <mohammedshaheer@zaigoinfotech.com> commit 8e2ede2 Author: Adam Pugh <docadam@meta.com> Date: Mon Jan 27 18:49:38 2025 -0600 Listeners Lexical: 3 updates to spelling and grammar - Update listeners.md (facebook#7100) commit 9fcc494 Author: Adam Pugh <docadam@meta.com> Date: Mon Jan 27 18:49:34 2025 -0600 Lexical Docs: 2 updates to spelling README.md (facebook#7102) commit 946a6df Author: Adam Pugh <docadam@meta.com> Date: Mon Jan 27 18:49:29 2025 -0600 Selection | Lexical: 1 Spelling Update Update selection.md (facebook#7103) commit ce93ea6 Author: Adam Pugh <docadam@meta.com> Date: Mon Jan 27 18:49:25 2025 -0600 Creating a React Plugin: 1 Grammar Update - Update create_plugin.md (facebook#7104) commit ed29d89 Author: Adam Pugh <docadam@meta.com> Date: Mon Jan 27 18:49:21 2025 -0600 Working with DOM Events: 2 Spelling and Grammar Updates Update dom-ev… (facebook#7105) commit 212b70f Author: James Fitzsimmons <119275535+james-atticus@users.noreply.github.com> Date: Mon Jan 27 08:48:09 2025 +1100 [lexical-yjs] Bug Fix: handle text node being split by Yjs redo (facebook#7098) commit 6a98a47 Author: Torleif Berger <torleif@outlook.com> Date: Fri Jan 24 21:46:45 2025 +0100 [lexical-react] Bug Fix: Import `JSX` type from React to prevent "Cannot find namespace 'JSX'"-error when type-checking with React 19 (facebook#7080) commit f8e5968 Author: Tetsuya <62472294+EruditionTu@users.noreply.github.com> Date: Sat Jan 25 04:06:57 2025 +0800 [lexical] Chore: Rename variable and add comments for Safari compositing workaround (facebook#7092) commit 81c9ab6 Author: Mateo Vuković <195247756+hellovuki@users.noreply.github.com> Date: Fri Jan 24 18:44:05 2025 +0100 Fix: Use already defined RegisteredNodes type (facebook#7085) commit 63958a2 Author: Sherry <potatowagon@meta.com> Date: Tue Jan 21 18:15:21 2025 +0800 [playground] Bug fix: prevent growing whitespaces in markdown table toggle (facebook#7041) Co-authored-by: Bob Ippolito <bob@redivi.com> commit d9f9924 Author: Sherry <potatowagon@meta.com> Date: Tue Jan 21 14:58:08 2025 +0800 Unrevert [Breaking Change][lexical] Bug Fix: Commit updates on editor.setRootElement(null) facebook#7023 (facebook#7068) commit 92fa0a3 Author: mohammed shaheer kp <72137242+mshaheerz@users.noreply.github.com> Date: Tue Jan 21 06:23:24 2025 +0530 [lexical-playground] plugins TableOfContent Scroll smooth behaviour A… (facebook#7069) commit 2e4a63e Author: Ivaylo Pavlov <ivailo90@gmail.com> Date: Mon Jan 20 02:37:34 2025 +0000 [lexical-playground] Fix Columns Layout Item Overflow (facebook#7066) commit d319b07 Author: Bob Ippolito <bob@redivi.com> Date: Sun Jan 19 14:45:41 2025 -0800 Change fork modules to use production only when NODE_ENV explicitly set to production (facebook#7065) commit 46c9c2f Author: CityHunter <62472294+EruditionTu@users.noreply.github.com> Date: Sat Jan 18 13:00:38 2025 +0800 [lexical] Bug Fix: In the Safari browser, during the compositing event process, the delete key exhibits unexpected behavior. (facebook#7061) Co-authored-by: 涂博闻 <tubowen@moonshot.cn> commit 92a1cd7 Author: Violet Rosenzweig <rosenzweig.violet@gmail.com> Date: Thu Jan 16 18:44:11 2025 -0500 docs: Change "here" link to more descriptive text (facebook#7058) commit f6377a3 Author: Aman Harwara <amanharwara@protonmail.com> Date: Fri Jan 17 02:08:17 2025 +0530 [lexical-table] Bug Fix: Prevent error if pasted table has empty row (facebook#7057) commit 0835029 Author: Aman Harwara <amanharwara@protonmail.com> Date: Fri Jan 17 00:18:08 2025 +0530 [lexical-list] Bug Fix: Prevent error when calling formatList when selection is at root (facebook#6994) commit 940435d Author: Brayden <1311325+redstar504@users.noreply.github.com> Date: Wed Jan 15 16:10:01 2025 -0800 fix: iOS Autocorrect strips formatting by reporting wrong dataType (facebook#5789) Co-authored-by: Bob Ippolito <bob@redivi.com> commit 136a565 Author: Aman Harwara <amanharwara@protonmail.com> Date: Thu Jan 16 04:48:32 2025 +0530 [lexical-yjs] Feature: Allow passing in custom `syncCursorPositions` function to collab hook (facebook#7053) commit 415c576 Author: Maksim Horbachevsky <fantactuka@gmail.com> Date: Wed Jan 15 18:18:03 2025 -0500 fix: triple click around inline elements (links) (facebook#7055) commit a3ef4f3 Author: Ivaylo Pavlov <ivailo90@gmail.com> Date: Wed Jan 15 23:15:39 2025 +0000 [lexical-table] Support table alignment (facebook#7044) commit 29d733c Author: Sherry <potatowagon@meta.com> Date: Wed Jan 15 21:50:07 2025 +0800 Revert [Breaking Change][lexical] Bug Fix: Commit updates on editorSetRootElement(null) (facebook#7023) (facebook#7052) commit 65ce66a Author: Bob Ippolito <bob@redivi.com> Date: Tue Jan 14 14:57:54 2025 -0800 [lexical] Bug Fix: Normalize selection after applyDOMRange to account for Firefox differences (facebook#7050) commit bbc07af Author: Bob Ippolito <bob@redivi.com> Date: Tue Jan 14 08:55:46 2025 -0800 [*] Bug Fix: Use GITHUB_OUTPUT instead of GITHUB_ENV for size-limit action (facebook#7051) commit c8f27ed Author: Bob Ippolito <bob@redivi.com> Date: Tue Jan 14 06:36:13 2025 -0800 [Breaking Change][*] Chore: Use terser for optimizing cjs prod build (facebook#7047) commit 8bd22d5 Author: Bob Ippolito <bob@redivi.com> Date: Mon Jan 13 07:09:31 2025 -0800 [lexical] Bug Fix: Handle MutationObserver/input event re-ordering when using contentEditable inside of an iframe (facebook#7045) commit 930629c Author: Ivaylo Pavlov <ivailo90@gmail.com> Date: Sat Jan 11 06:03:30 2025 +0000 Clean up nested editor update (facebook#7039) commit bd874a3 Author: Bob Ippolito <bob@redivi.com> Date: Fri Jan 10 15:23:54 2025 -0800 [Breaking Change][lexical][lexical-selection][lexical-list] Bug Fix: Fix infinite loop when splitting invalid ListItemNode (facebook#7037) commit 541fa43 Author: Bob Ippolito <bob@redivi.com> Date: Thu Jan 9 12:42:23 2025 -0800 v0.23.1 (facebook#7035) Co-authored-by: Lexical GitHub Actions Bot <> commit d7abafd Author: Bob Ippolito <bob@redivi.com> Date: Thu Jan 9 08:33:12 2025 -0800 [Breaking Change][lexical] Bug Fix: Commit updates on editor.setRootElement(null) (facebook#7023) commit 6add515 Author: Bob Ippolito <bob@redivi.com> Date: Wed Jan 8 17:27:15 2025 -0800 [lexical] Fix TabNode deserialization regression (facebook#7031) commit 33e3677 Author: Maksim Horbachevsky <fantactuka@gmail.com> Date: Wed Jan 8 14:59:03 2025 -0500 [lexical-react] Feature: Merge TabIndentionPlugin and ListMaxIndentLevelPlugin plugins (facebook#7018) commit 7de86e4 Author: James Fitzsimmons <119275535+james-atticus@users.noreply.github.com> Date: Wed Jan 8 09:45:25 2025 +1100 [lexical-mark] Bug Fix: reverse ternary in MarkNode.addID (facebook#7020) commit 7961130 Author: Bob Ippolito <bob@redivi.com> Date: Sun Jan 5 13:55:25 2025 -0800 v0.23.0 (facebook#7017) Co-authored-by: Lexical GitHub Actions Bot <> commit 2b4252d Author: Aman Harwara <amanharwara@protonmail.com> Date: Sat Jan 4 11:31:19 2025 +0530 [lexical-yjs] Feature: Expose function to get anchor and focus nodes for given user awareness state (facebook#6942) commit 8100d6d Author: Ivaylo Pavlov <ivailo90@gmail.com> Date: Sat Jan 4 01:12:04 2025 +0000 [lexical-playground] Fix table hover actions button position (facebook#7011) commit bd1ef2a Author: Bob Ippolito <bob@redivi.com> Date: Fri Jan 3 14:25:31 2025 -0800 [lexical] Bug Fix: Fix registerNodeTransform regression introduced in facebook#6894 (facebook#7016) commit 85c08b6 Author: Christian Grøngaard <christian@groengaard.dk> Date: Thu Jan 2 00:20:20 2025 +0100 [lexical-playground] Refactor: switch headings test file names (facebook#7008) commit 7c21d4f Author: Bob Ippolito <bob@redivi.com> Date: Wed Jan 1 12:48:12 2025 -0800 [Breaking Change][lexical] Feature: Add updateFromJSON and move more textFormat/textStyle to ElementNode (facebook#6970) commit aaa9009 Author: Bob Ippolito <bob@redivi.com> Date: Wed Jan 1 07:50:39 2025 -0800 [lexical] Bug Fix: Fix getNodes over-selection (facebook#7006) commit 803391d Author: Sherry <potatowagon@meta.com> Date: Tue Dec 31 11:26:17 2024 +0800 [__test__] npm upgrade astro (facebook#7001) commit 684352b Author: Christian Grøngaard <christian@groengaard.dk> Date: Mon Dec 30 05:12:45 2024 +0100 Documentation: Fix typo "nest nest"->"nest" in README.md (facebook#7000) Co-authored-by: Bob Ippolito <bob@redivi.com> commit 27b75cc Author: Sherry <potatowagon@meta.com> Date: Fri Dec 27 11:06:29 2024 +0800 [__tests__] npm upgrade next (facebook#6996) commit 05ddbcc Author: Simon <bauchet.simon@gmail.com> Date: Thu Dec 26 03:37:50 2024 +0100 [lexical] Bug Fix: Flow is missing some variables and functions (facebook#6977) commit e79c946 Author: Sherry <potatowagon@meta.com> Date: Tue Dec 24 09:54:46 2024 +0800 v0.22.0 (facebook#6993) Co-authored-by: Lexical GitHub Actions Bot <> commit c415f7a Author: Sam Zhou <sam@developersam.com> Date: Mon Dec 23 10:31:36 2024 -0800 [lexical-react] Refactor: Replace `React$MixedElement` and `React$Node` with `React.MixedElement` and `React.Node` (facebook#6984) commit c844a4d Author: Sherry <potatowagon@meta.com> Date: Tue Dec 24 02:30:52 2024 +0800 [lexical] Fix flow error: change this to any (facebook#6992) commit 6190033 Author: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com> Date: Mon Dec 23 05:19:27 2024 -0300 Refactor: exportJSON (facebook#6983) commit e0dafb8 Author: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com> Date: Sat Dec 21 13:59:01 2024 -0300 feature: expose forEachSelectedTextNode (facebook#6981) Co-authored-by: Bob Ippolito <bob@redivi.com> commit 23715f5 Author: Alex <UlopLT@gmail.com> Date: Fri Dec 20 18:23:27 2024 +0300 [lexical][lexical-table] Bug fix: TablePlugin: - check is current selection in target table node (facebook#6979) Co-authored-by: alazarev <alazarev@megaputer.ru>

redstar504 requested review from Fetz, acywatson, fantactuka, ivailop7 and zurfyx as code owners March 31, 2024 00:14

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 31, 2024

vercel bot deployed to Preview – lexical March 31, 2024 00:15 View deployment

vercel bot deployed to Preview – lexical-playground March 31, 2024 00:16 View deployment

redstar504 changed the title ~~fix: iOS Autocorrect ruins formatting by reporting wrong dataType~~ fix: iOS Autocorrect strips formatting by reporting wrong dataType Mar 31, 2024

redstar504 mentioned this pull request Mar 31, 2024

fix: Text format getting lost when using suggestion/autocorrect on iOS #5397

Closed

ivailop7 closed this Nov 10, 2024

etrepum reopened this Jan 2, 2025

etrepum requested review from Sahejkm and potatowagon as code owners January 2, 2025 15:13

redstar504 force-pushed the ios-autocorrect-fix branch from 6e50ec4 to 423221c Compare January 9, 2025 20:39

vercel bot deployed to Preview – lexical January 9, 2025 20:40 View deployment

vercel bot deployed to Preview – lexical-playground January 9, 2025 20:40 View deployment

Fix safari autocorrect issue by ensuring that HTML pastes differ from…

3053a21

… plain text

redstar504 force-pushed the ios-autocorrect-fix branch from 423221c to 3053a21 Compare January 9, 2025 20:47

vercel bot deployed to Preview – lexical-playground January 9, 2025 20:48 View deployment

vercel bot deployed to Preview – lexical January 9, 2025 20:48 View deployment

Simplify dataTransfer comparison predicate

07b93e1

vercel bot deployed to Preview – lexical January 9, 2025 20:57 View deployment

vercel bot deployed to Preview – lexical-playground January 9, 2025 20:57 View deployment

etrepum reviewed Jan 10, 2025

View reviewed changes

add test for iOS word prediction bug fix

8dedf47

vercel bot deployed to Preview – lexical-playground January 15, 2025 20:15 View deployment

vercel bot deployed to Preview – lexical January 15, 2025 20:15 View deployment

Use single word in the test as a more accurate representation

73d6979

vercel bot deployed to Preview – lexical January 15, 2025 20:24 View deployment

vercel bot deployed to Preview – lexical-playground January 15, 2025 20:24 View deployment

remove selection condition from test case

791c8a2

vercel bot deployed to Preview – lexical-playground January 15, 2025 20:35 View deployment

vercel bot deployed to Preview – lexical January 15, 2025 20:35 View deployment

add invariant condition to match other copy/paste tests

e3f9127

vercel bot deployed to Preview – lexical January 15, 2025 20:45 View deployment

vercel bot deployed to Preview – lexical-playground January 15, 2025 20:45 View deployment

etrepum approved these changes Jan 15, 2025

View reviewed changes

Merge branch 'main' into ios-autocorrect-fix

908d017

vercel bot deployed to Preview – lexical-playground January 15, 2025 23:20 View deployment

vercel bot deployed to Preview – lexical January 15, 2025 23:20 View deployment

etrepum added the extended-tests Run extended e2e tests on a PR label Jan 15, 2025

ivailop7 added this pull request to the merge queue Jan 16, 2025

Merged via the queue into facebook:main with commit 940435d Jan 16, 2025

Conversation

redstar504 commented Mar 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ivailop7 commented Apr 1, 2024

Uh oh!

ivailop7 commented Nov 10, 2024

Uh oh!

BPreisner commented Dec 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amanharwara commented Jan 2, 2025

Uh oh!

github-actions bot commented Jan 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

etrepum commented Jan 2, 2025

Uh oh!

BPreisner commented Jan 8, 2025

Uh oh!

redstar504 commented Jan 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

BPreisner commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

BPreisner commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

redstar504 commented Jan 15, 2025

Uh oh!

etrepum left a comment

Choose a reason for hiding this comment

Uh oh!

BPreisner commented Jan 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

redstar504 commented Mar 31, 2024 •

edited

Loading

vercel bot commented Mar 31, 2024 •

edited

Loading

BPreisner commented Dec 23, 2024 •

edited

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading

redstar504 commented Jan 9, 2025 •

edited

Loading

BPreisner commented Jan 10, 2025 •

edited

Loading

BPreisner commented Jan 14, 2025 •

edited

Loading