기능, 안정성 및 개발자 경험이 크게 향상된 리치 텍스트 편집기 Quill 2.0이 출시되었습니다.

퀼 버전 2.0이 출시되었습니다.

공식 TypeScript 선언문

Quill의 소스 코드는 조기 오류 감지, 향상된 유지 관리 및 향상된 도구 지원이라는 이점을 통해 TypeScript로 완전히 전환되었습니다.

@types/quill이전에는 개발자가 TypeScript 정의를 얻으려면 별도의 패키지로 설치 해야 했습니다 . Quill 2.0에서는 유형 선언을 소스에서 직접 얻을 수 있습니다.

여러 레지스트리

블로그 프로젝트에서는 Quill을 사용하여 제목, 이미지 및 코드 블록을 포함하여 게시물 자체에 대한 모든 기능을 갖춘 편집 인터페이스를 제공할 수 있으며, 동일한 페이지에서 Quill은 지원되는 링크 형식뿐만 아니라 굵은 글꼴 및 기울임꼴 주석 입력도 지원합니다. Quill 2.0의 새로운 registry기능은 이 사용 사례를 지원하므로 고유한 스타일 구성을 가진 여러 편집기가 충돌 없이 동일한 페이지에 공존할 수 있습니다.

자동 롤링 컨테이너 감지

과거에는 개발자가 Quill 인스턴스를 생성할 때 필요할 때 사용자의 커서나 선택 항목이 스크롤되어 표시될 수 있도록 편집기의 스크롤 컨테이너를 지정해야 했습니다. 그러나 이 구성은 간과되거나 혼동되는 경우가 많으며 롤링 컨테이너가 잘못 지정되거나 전혀 지정되지 않습니다. 또한 대규모 앱과 코드 베이스에서는 다양한 컨텍스트에 나타날 수 있는 재사용 가능한 편집기 구성 요소에 대한 올바른 스크롤 컨테이너를 찾는 것이 항상 쉬운 것은 아닙니다. 2.0에서 Quill은 올바른 스크롤 컨테이너를 자동으로 찾습니다. 이를 통해 더 긴 형식의 텍스트로 Quill을 사용하기가 더 쉬워지고 자유롭게 중첩된 스크롤 컨테이너 및 가로 스크롤과 같은 보다 복잡한 상호 작용이 지원됩니다.

입력이벤트 사용

Quill의 주요 강점 중 하나는 DOM을 단일 소스로 사용하지 않는 내부 관리형 문서 모델입니다. 이는 개발자의 정신 모델에 더 가까운 서식 있는 텍스트 상태 매핑을 제공하고 더 간단한 텍스트 편집 API를 지원합니다.

Quill은 DOM 변경 사항을 수신하고 이를 내부 문서 모델로 다시 정규화하여 이를 수행합니다. 그러나 브라우저는 사용자 작업을 일관되지 않거나 부정확하게 처리하여 잘못된 DOM 변경이 생성될 수 있습니다. 예를 들어, 사용자가 빨간색 텍스트를 선택하고 이를 입력하여 바꾸는 경우, 편집기가 해당 요소를 사용하여 색상을 표시 하더라도 브라우저 는 때때로 font해당 텍스트를 속성에 빨간색이 포함된 요소 로 대체합니다.stylespan

Quill 2.0에서는 현대적이고 일반적인 브라우저 기능을 사용하여 InputEvents 를 트리거합니다 . 이제 결과 변경 사항이 DOM에 동기화되기 전에 먼저 사용자 작업을 캡처하여 내부 문서 모델을 업데이트합니다. 이 접근 방식은 특히 복잡한 콘텐츠와 형식에 대해 더욱 일관되고 안정적인 편집 환경을 제공합니다. 이 기능은 현재 가장 문제가 되는 텍스트 교체 상호 작용 소스에 초점을 맞추고 있으며 앞으로 더 폭넓게 사용할 계획입니다.

2.0의 주요 업데이트 정보 목록은 다음과 같습니다.

주요 개선 사항

Quill은 이제 생태계(예: 패키저) 및 트리 쉐이킹 기능을 더 잘 지원하는 유효한 ESM 패키지입니다.
중첩된 Quill #3590 지원
향상된 입력 방법(IME) 및 맞춤법 교정기 지원 #3807
TEXT_CHANGE 이벤트 #3778 의 의미 정리
기록: 기록 모듈 #3823 의 선택 항목 로깅
스크롤 컨테이너 자동 감지 #3840
클립보드: Google Docs 및 Microsoft Word에서 붙여넣기에 대한 지원이 향상되었습니다.

성능 개선

Quill 2.0에는 다양한 성능 최적화가 포함되어 있으며, 그 중 가장 중요한 것은 대량의 콘텐츠 렌더링 속도가 향상되었다는 것입니다.
삽입 성능 향상 #3815
가능하면 선택 세트를 가져오지 마세요 #3538
컨테이너가 비어 있으면 setContents를 설정할 필요가 없습니다 . #3539

코드 현대화

TypeScript로 마이그레이션
공식 TypeScript 선언 제공
단위 테스트를 위해 Vitest로 마이그레이션
엔드투엔드 테스트를 위해 Playwright로 마이그레이션
웹사이트를 Gatsby로 마이그레이션

자세한 내용은 공식 발표 및 2.0 마이그레이션 가이드를 확인하세요.