fix: add execCommand fallback for contenteditable input#210
Open
voidborne-d wants to merge 1 commit intoalibaba:mainfrom
Open
fix: add execCommand fallback for contenteditable input#210voidborne-d wants to merge 1 commit intoalibaba:mainfrom
voidborne-d wants to merge 1 commit intoalibaba:mainfrom
Conversation
When typing into contenteditable elements (e.g. LinkedIn post editor),
the synthetic event approach (Plan A) may fail silently — the events
fire but the editor's internal state doesn't update, leaving the
element empty.
This adds an automatic fallback: after Plan A, we verify the text was
actually inserted by checking element.innerText. If it wasn't, we
fall back to execCommand('insertText') which integrates natively with
most rich-text editors including LinkedIn, Quill, and Slate.js.
The fallback uses proper Selection/Range API to select-all before
replacing, and preserves the undo stack since execCommand is handled
by the browser natively.
Fixes alibaba#168
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
When Page Agent tries to type into contenteditable elements (e.g. LinkedIn post editor, #168), the synthetic event approach (Plan A) fires
beforeinput/inputevents and setsinnerText, but some editors' internal state doesn't update — the text appears momentarily then gets wiped, or never appears at all.This happens because editors like LinkedIn's use framework-level event handlers that don't respond to synthetic
InputEventdispatches.Solution
After executing Plan A, we now verify the text was actually inserted by checking
element.innerText. If it wasn't, we automatically fall back to Plan B:execCommand.The fallback:
Selection/RangeAPI to select all contentexecCommand('delete')execCommand('insertText')Why this works
execCommandis deprecated but still widely supported by all major browsers. More importantly, it integrates natively with the browser's editing machinery — rich-text editors built on contenteditable (LinkedIn, Quill, Slate.js, ProseMirror) all respond to it correctly because it flows through the same code path as real user input.What stays the same
<input>or<textarea>elementsFixes #168