feat: simplify ContentEditable handling

packages/page-controller/src/actions.ts

@@ -114,91 +114,60 @@ export async function inputTextElement(element: HTMLElement, text: string) {
 	await clickElement(element)
 
 	if (isContentEditable) {
-		// For contenteditable elements (like LinkedIn editor, rich text editors),
+		// (keydown) -> beforeinput -> mutation -> input -> (keyup) -> change
-		// we need to dispatch proper events to trigger framework listeners.
-		// Many frameworks (React, Vue, etc.) listen to specific events.
-		const editableElement = element as HTMLElement & { innerText: string }
 
-		try {
+		// Dispatch beforeinput + mutation + input for clearing
-			// Focus the element first
+		if (
-			editableElement.focus()
+			element.dispatchEvent(
-
+				new InputEvent('beforeinput', {
-			// Dispatch keydown first (typical event order: keydown -> beforeinput -> mutation -> input -> keyup)
-			// Only for single-character input to maintain semantic consistency
-			if (text.length === 1) {
-				const keydownEvent = new KeyboardEvent('keydown', {
 					bubbles: true,
 					cancelable: true,
-					key: text,
+					inputType: 'deleteContent',
 				})
-				editableElement.dispatchEvent(keydownEvent)
+			)
-			}
+		) {
-
+			element.innerText = ''
-			// Dispatch beforeinput for clearing (deleteContent)
+			element.dispatchEvent(
-			const deleteEvent = new InputEvent('beforeinput', {
-				bubbles: true,
-				cancelable: true,
-				inputType: 'deleteContent',
-			})
-			editableElement.dispatchEvent(deleteEvent)
-
-			// Clear existing content (first mutation)
-			editableElement.innerText = ''
-
-			// Dispatch input event for the deletion
-			editableElement.dispatchEvent(
 				new InputEvent('input', {
 					bubbles: true,
 					inputType: 'deleteContent',
 				})
 			)
+		}
 
-			// Dispatch beforeinput event for insertion (important for React apps)
+		// Dispatch beforeinput + mutation + input for insertion (important for React apps)
-			// Check if canceled - if so, skip the mutation but continue cleanup
+		if (
-			const beforeInputEvent = new InputEvent('beforeinput', {
+			element.dispatchEvent(
-				bubbles: true,
+				new InputEvent('beforeinput', {
-				cancelable: true,
-				inputType: 'insertText',
-				data: text,
-			})
-			const notCanceled = editableElement.dispatchEvent(beforeInputEvent)
-			const shouldInsert = notCanceled && !beforeInputEvent.defaultPrevented
-
-			// Set the text content (DOM mutation) - only if not canceled
-			if (shouldInsert) {
-				editableElement.innerText = text
-
-				// Dispatch input event for the insertion
-				editableElement.dispatchEvent(
-					new InputEvent('input', {
-						bubbles: true,
-						inputType: 'insertText',
-						data: text,
-					})
-				)
-			}
-
-			// Dispatch keyup after input (completing the typical event sequence)
-			if (text.length === 1) {
-				const keyupEvent = new KeyboardEvent('keyup', {
 					bubbles: true,
 					cancelable: true,
-					key: text,
+					inputType: 'insertText',
+					data: text,
 				})
-				editableElement.dispatchEvent(keyupEvent)
+			)
-			}
+		) {
-
+			element.innerText = text
-			// Dispatch change event (for good measure)
+			element.dispatchEvent(
-			editableElement.dispatchEvent(new Event('change', { bubbles: true }))
+				new InputEvent('input', {
-
+					bubbles: true,
-			// Trigger blur for validation, then refocus
+					inputType: 'insertText',
-			// blur() dispatches its own focusout event, so we don't need a duplicate
+					data: text,
-			editableElement.blur()
+				})
-			editableElement.focus()
+			)
-		} finally {
-			// Ensure cleanup always runs, even if early return above
-			// This is handled by the common cleanup below
 		}
+
+		// Dispatch change event (for good measure)
+		element.dispatchEvent(new Event('change', { bubbles: true }))
+
+		// Trigger blur for validation, then refocus
+		// blur() dispatches its own focusout event, so we don't need a duplicate
+		element.blur()
+
+		// // Plan B: execCommand — triggers trusted native events for rich text editors
+		// element.focus()
+		// document.execCommand('selectAll')
+		// document.execCommand('delete')
+		// document.execCommand('insertText', false, text)
 	} else if (element instanceof HTMLTextAreaElement) {
 		nativeTextAreaValueSetter.call(element, text)
 	} else {