$ show codex-team/editor.js
Editor.js is a block-style, plugin-based WYSIWYG content editor for the web, developed and maintained by the CodeX team. It outputs clean JSON instead of heavy HTML, making it ideal for modern web applications that need structured content. The editor is built as a TypeScript library with a modular architecture: core modules (BlockManager, Toolbar, InlineToolbar, Saver, Renderer, etc.) communicate via an internal event bus, and all editing capabilities are provided by pluggable tools (Block Tools, Inline Tools, Block Tunes). The library exposes a comprehensive API for programmatic control over blocks, caret, selection, events, sanitization, i18n, and read-only mode. The architecture is centered around a plugin system where tools are external classes with lifecycle hooks (render, save, validate, merge, onPaste) and static configuration (toolbox, sanitize, pasteConfig, conversionConfig). The editor handles paste from various sources, supports cross-block selection, drag-and-drop, keyboard navigation, and mobile responsiveness. It includes a rich set of UI components: a floating toolbar, inline toolbar, block settings popover, and a versatile popover system with search, nested menus, and keyboard navigation via the Flipper component. Editor.js is not a standalone application but a library meant to be embedded into web apps. It is distributed as an npm package (@editorjs/editorjs) with UMD and ESM builds. The repository includes extensive Cypress end-to-end tests, example pages, and detailed documentation for developers. While primarily an application library, it also demonstrates strong data engineering patterns in its sanitization and paste handling, though these are not its primary focus.
The LLM identified 7 files worth highlighting for reuse:
Abstract base class for the popover system, providing a common interface and lifecycle for desktop, mobile, and inline popover variants. It encapsulates rendering, positioning, show/hide logic, and keyboard navigation delegation. This component is self-contained and can be extracted to build custom popover menus in other projects.
A reusable keyboard navigation utility that manages arrow/Tab/Enter focus cycling over a list of HTMLElements. It supports activation/deactivation, silent activation, and custom key handlers. Used extensively in popovers and toolbars, it can be extracted for any UI that requires keyboard-driven selection.
A simple, generic promise queue that executes asynchronous tasks sequentially. It supports enqueuing functions that return promises and provides a `clear()` method to cancel pending tasks. This pattern is useful for any scenario requiring ordered async operations, such as batch processing or rate-limited API calls.
A typed event dispatcher that allows modules to emit and listen for custom events with strict type safety. It supports one-time listeners and bulk removal. This is a clean implementation of the observer pattern that can be reused in any TypeScript project for decoupled communication.
A collection of static DOM manipulation utilities including element creation, traversal, emptiness checks, offset calculation, and baseline alignment. These functions are well-tested and abstract away browser quirks. They can be extracted as a standalone DOM helper library.
Provides recursive HTML sanitization of block data using configurable per-tool rules. It leverages the html-janitor library but adds deep traversal and field-level cleaning. This component is critical for security and can be reused in any project that needs to clean user-generated HTML content.
A Map subclass that stores tool instances and provides filtered views (blockTools, inlineTools, internal, external) via computed properties. It demonstrates a clean pattern for managing a heterogeneous collection with type-safe accessors. This can be extracted for any project needing a filtered collection over a map.