chore: comments; spell check
This commit is contained in:
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"cSpell.words": [
|
"cSpell.words": [
|
||||||
|
"contenteditable",
|
||||||
"deepseek",
|
"deepseek",
|
||||||
"historychange",
|
"historychange",
|
||||||
"HITL",
|
"HITL",
|
||||||
|
|||||||
@@ -114,15 +114,15 @@ export async function inputTextElement(element: HTMLElement, text: string) {
|
|||||||
await clickElement(element)
|
await clickElement(element)
|
||||||
|
|
||||||
if (isContentEditable) {
|
if (isContentEditable) {
|
||||||
// For contenteditable elements, dispatch proper events to trigger framework listeners.
|
// Contenteditable support (partial)
|
||||||
|
// Not supported:
|
||||||
|
// - Monaco/CodeMirror: Require direct JS instance access. No universal way to obtain.
|
||||||
|
// - Draft.js: Not responsive to synthetic/execCommand/Range/DataTransfer. Unmaintained.
|
||||||
//
|
//
|
||||||
// IMPORTANT: This approach works for Quill, LinkedIn, and simple contenteditable editors,
|
// Plan A: Dispatch synthetic events
|
||||||
// but does NOT work for Slate.js or Draft.js which require framework-specific handling.
|
// Works: LinkedIn, React contenteditable, Quill.
|
||||||
// - Draft.js: Cannot be supported via DOM manipulation (by design, unmaintained)
|
// Fails: Slate.js
|
||||||
// - Slate.js: Uses internal state that doesn't sync with DOM changes
|
// Sequence: beforeinput -> mutation -> input -> change -> blur
|
||||||
// - Monaco/CodeMirror: Require direct JS instance access, not contenteditable path
|
|
||||||
//
|
|
||||||
// Event sequence: beforeinput -> mutation -> input -> change -> blur
|
|
||||||
|
|
||||||
// Dispatch beforeinput + mutation + input for clearing
|
// Dispatch beforeinput + mutation + input for clearing
|
||||||
if (
|
if (
|
||||||
@@ -167,20 +167,15 @@ export async function inputTextElement(element: HTMLElement, text: string) {
|
|||||||
// Dispatch change event (for good measure)
|
// Dispatch change event (for good measure)
|
||||||
element.dispatchEvent(new Event('change', { bubbles: true }))
|
element.dispatchEvent(new Event('change', { bubbles: true }))
|
||||||
|
|
||||||
// Trigger blur for validation, then refocus
|
// Trigger blur for validation
|
||||||
// blur() dispatches its own focusout event, so we don't need a duplicate
|
|
||||||
element.blur()
|
element.blur()
|
||||||
|
|
||||||
// Plan B: execCommand (deprecated but works better for some editors)
|
// Plan B: execCommand (deprecated but works better for some editors)
|
||||||
// Uncomment if synthetic events don't work for your use case.
|
// Works: LinkedIn, Quill, Slate.js, react contenteditable components
|
||||||
// Tested to work with: LinkedIn, Quill, Draft.js
|
|
||||||
// Note: execCommand is deprecated and may be removed in future browsers.
|
|
||||||
//
|
//
|
||||||
// element.focus()
|
|
||||||
// document.execCommand('selectAll')
|
// document.execCommand('selectAll')
|
||||||
// document.execCommand('delete')
|
// document.execCommand('delete')
|
||||||
// document.execCommand('insertText', false, text)
|
// document.execCommand('insertText', false, text)
|
||||||
// document.execCommand('insertText', false, text)
|
|
||||||
} else if (element instanceof HTMLTextAreaElement) {
|
} else if (element instanceof HTMLTextAreaElement) {
|
||||||
nativeTextAreaValueSetter.call(element, text)
|
nativeTextAreaValueSetter.call(element, text)
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Reference in New Issue
Block a user