피드로 돌아가기
Dev.toFrontend
원문 읽기
isTrusted:false 제약을 극복한 Lexical-native API 기반 자동화 설계
The 3 isTrusted:false Bugs That Made LinkedIn Posts Impossible From My MCP Server
AI 요약
Context
DOM 이벤트 기반의 일반적인 자동화 도구가 LinkedIn의 Rich-text Editor와 Modal 구조 내에서 발생하는 3단계의 기술적 병목으로 인해 텍스트 입력에 실패하는 문제 발생. 단순 DOM 조작으로는 브라우저의 보안 모델과 에디터의 내부 상태 관리 체계를 통과할 수 없는 한계 존재.
Technical Solution
- blur() 호출 제거를 통한 Modal focusout 이벤트 기반의 자동 닫힘 현상 방지 -Synthetic Event의 isTrusted:false 속성으로 인한 ProseMirror/Lexical의 입력 거부 문제를 해결하기 위해 OS 레벨의 CGEvent Cmd+V 경로 검토
- OS 레벨 입력 시 발생하는 Safari 포커스 탈취 및 이로 인한 Modal 종료 문제를 완전히 제거하기 위해 Editor-native API 직접 제어 방식 채택
- DOM root 엘리먼트에 노출된 __lexicalEditor 인스턴스에 접근하여 JSON 형태의 EditorState를 직접 주입하는 구조 설계
- 렌더링된 DOM 상태가 아닌 에디터 내부의 Internal State를 직접 수정함으로써 인터페이스 의존성 제거 및 입력 신뢰성 확보
실천 포인트
- Rich-text Editor 자동화 시 .blur() 호출이 Modal dismiss를 유발하는지 검토 - event.isTrusted 체크를 수행하는 에디터의 경우 Synthetic Event 대신 Native OS 입력 또는 내부 API 접근 경로 고려 - 브라우저 자동화 도구 평가 시 LinkedIn, Notion 등 복잡한 에디터 기반 서비스의 입력 성공 여부를 벤치마크로 활용 - UI 상태(DOM)가 아닌 애플리케이션의 내부 상태(State)를 직접 검증하는 테스트 전략 수립