Quill version 2.0 has been released.
Official TypeScript Statement
Quill's source code has been fully transitioned to TypeScript, with the benefits of early error detection, improved maintainability, and better tooling support.
Previously, developers had to @types/quillinstall it as a separate package to obtain TypeScript definitions. In Quill 2.0, type declarations can be obtained directly from the source.
multiple registries
Blog projects may use Quill to provide a full-featured editing interface for the post itself, including titles, images, and code blocks, while on the same page, Quill also supports bold and italic comment input, as well as supported link formats. New registryfeatures in Quill 2.0 support this use case, allowing multiple editors with their own style configurations to coexist on the same page without any conflicts.
Automatic rolling container detection
In the past, developers would need to specify the editor's scroll container when creating a Quill instance so that the user's cursor or selection could scroll into view when needed. But this configuration is often overlooked or confused, and the rolling container is either incorrectly specified or not specified at all. Additionally, in larger apps and code bases, it's not always easy to find the right scroll container for reusable editor components that may appear in different contexts. In 2.0, Quill automatically finds the correct scroll container, which makes it easier to use Quill with longer format text and supports more complex interactions, such as freely nested scroll containers and horizontal scrolling.
Using InputEvent
One of Quill's main strengths is its internally managed document model, which does not rely on the DOM as a single source of truth. This provides a mapping of rich text states closer to the developer's mental model and supports a simpler text editing API.
Quill does this by listening for DOM changes and normalizing them back to its internal document model. However, browsers may handle user actions inconsistently or incorrectly, resulting in incorrect DOM changes being generated. For example, when a user selects red text and replaces it by typing, the browser sometimes replaces it with fontan element that has red in its attributes style, even though the editor uses spanthe element to represent the color.
In Quill 2.0, use modern and common browser features to trigger InputEvents . Now, the user's actions are first captured to update the internal document model before the resulting changes are synced to the DOM. This approach provides a more consistent and reliable editing experience, especially for complex content and formats. This feature is currently focused on the most problematic sources of text replacement interactions, with plans for wider use in the future.
The following is a list of the main update information for 2.0:
Major improvements
-
Quill is now a valid ESM package to better support ecosystem (e.g. packagers) and tree-shaking functionality
-
Support nested Quill #3590
-
Improved input method (IME) and spelling corrector support #3807
-
Semantic cleanup of TEXT_CHANGE event #3778
-
History: Logging selections in history module #3823
-
Automatically detect scrolling containers #3840
-
Clipboard: Improved support for pasting from Google Docs and Microsoft Word
Performance improvements
-
Quill 2.0 includes a number of performance optimizations, the most important of which is improved speed at rendering large amounts of content.
-
Improve insertion performance #3815
-
Avoid getting selection sets if possible #3538
-
No need to setContents when container is empty #3539
Code modernization
-
Migrate to TypeScript
-
Official TypeScript declaration provided
-
Migrate to Vitest for unit testing
-
Migrate to Playwright for end-to-end testing
-
Migrate website to Gatsby
For details, check the official announcement and 2.0 migration guide: