$ show xdan/jodit
Jodit is a pure TypeScript WYSIWYG HTML editor designed for embedding in web applications. It provides a rich editing experience with a toolbar, file browser, image editor, and support for complex formatting, tables, media embedding, and source code editing. The editor is built on a modular plugin architecture with over 60 built-in plugins, a custom event system, a UI component framework, and extensive internationalization (30+ languages). It includes security-focused HTML sanitization, undo/redo with snapshot history, and async storage providers (IndexedDB, localStorage, memory). The project is MIT-licensed with a commercial PRO version offering additional plugins like AI assistant and PDF export. The architecture is layered: core modules (event emitter, DOM helpers, selection/style engine, async utilities, decorators) provide the foundation; a plugin system manages lifecycle and dependencies; UI components (buttons, forms, popups, dialogs) are built with a BEM-like naming scheme and state-driven rendering; and modules (file browser, uploader, toolbar, history) implement higher-level features. The editor can operate in inline or iframe mode, supports dark themes, and is responsive with mobile-adaptive toolbars. Key entry points are the Jodit class constructor and the static Jodit.make() factory method. The primary data flow is user input (keyboard, mouse, clipboard) processed through the selection engine and plugins, producing sanitized HTML output. External runtime dependencies are minimal (no required JavaScript libraries), but the build system relies on Webpack, TypeScript, and various development tools.
The LLM identified 6 files worth highlighting for reuse:
A robust event emitter supporting namespaced event handlers, muting/unmuting, stop propagation, and lifecycle-bound subscriptions. It handles both custom and DOM events, and can be extracted as a standalone event system for any JavaScript application. The implementation demonstrates careful memory management and a clean API.
A collection of async utilities including debounce, throttle, promise wrapping, requestIdleCallback, and schedulerPostTask. It provides a unified interface for managing asynchronous operations with automatic cleanup on destruction. This module is self-contained and can be reused in any project needing reliable async helpers.
An abstract storage layer with multiple providers (IndexedDB, localStorage, memory) implementing a common async interface. It supports key-value operations with prefix isolation, fallback chains, and automatic provider selection. This pattern is reusable for any application needing persistent or ephemeral storage with a consistent API.
A security-critical HTML sanitizer that strips dangerous content (javascript: URLs, event handlers, srcdoc, data:text/html, smuggled HTML in MathML/SVG). It uses a whitelist approach and handles obfuscated attack vectors. The function is self-contained and can be extracted for use in any application that needs to sanitize user-provided HTML.
A finite state machine that drives the application of text styles (bold, italic, etc.) to selections. It manages transitions between states like 'start', 'wrap', 'unwrap', and 'clean' based on the current selection and target style. This pattern is reusable for any editor or UI component that needs to manage complex state-dependent operations.
An asynchronous DOM walker that processes nodes in chunks using requestIdleCallback or setTimeout, allowing the UI to remain responsive during large document traversals. It supports filtering, early termination, and progress tracking. This component can be extracted for any application needing non-blocking DOM inspection.