피드로 돌아가기
LinkedIn Quietly Migrated From ProseMirror to Quill — and Broke Every Browser Automation Tool That Touched the Composer
Dev.toDev.to
Frontend

LinkedIn의 ProseMirror → Quill 전환에 따른 DOM-Model 불일치 해결 및 API 기반 자동화 구현

LinkedIn Quietly Migrated From ProseMirror to Quill — and Broke Every Browser Automation Tool That Touched the Composer

אחיה כהן2026년 5월 3일4분intermediate

AI 요약

Context

LinkedIn이 공지 없이 Rich Text Editor를 ProseMirror에서 Quill로 교체하며 기존 자동화 툴의 DOM 직접 조작 방식이 무력화된 상황. Editor 내부의 State Model과 실제 DOM 간의 동기화 불일치로 인해 런타임 Exception 및 컴포넌트 Crash가 발생하는 구조적 한계 노출.

Technical Solution

  • DOM 직접 수정 방식에서 Editor Instance API 호출 방식으로 제어 레이어 변경
  • .ql-container 클래스 기반의 Ancestor 탐색을 통한 Quill Instance 식별 로직 구현
  • Quill 2.x의 .__quill 프로퍼티 확인 및 React Fiber 체인 내 memoizedProps.quill 탐색을 통한 Fallback 전략 수립
  • quill.setContents() API와 'api' source flag를 사용하여 내부 Delta Model과 DOM의 원자적 업데이트 보장
  • API 접근 불가 시 isTrusted: true 속성을 가진 실제 CGEvent Cmd+V Paste 이벤트로 대체하는 최후방어선 구축

실천 포인트

- Third-party Rich Text Editor 자동화 시 DOM 조작 대신 내부 Editor API 활용 여부 검토 - 런타임 시점에 Editor Type(ProseMirror, Quill 등)을 동적으로 감지하는 탐지 로직 구현 - API 기반 제어 실패를 대비한 OS 레벨의 Clipboard Event Fallback 설계 - 외부 플랫폼의 UI 프레임워크 변경을 감지하기 위한 Telemetry 및 클래스 시그니처 모니터링 도입

태그

#DOM Manipulation#State Synchronization#ProseMirror#Quill#React Fiber
원문 읽기