$ show JiHong88/suneditor
SunEditor is a fully-featured, vanilla JavaScript WYSIWYG HTML editor library designed for modern browsers. It provides a rich text editing experience with extensive formatting options (inline, block, lists, tables, media embedding), multiple display modes (classic, inline, balloon), and a plugin architecture that supports dropdowns, modals, commands, browsers, and input fields. The editor is built around a clean dependency injection kernel, a reducer-based event handling system for keyboard and input events, and a modular structure for UI components (toolbar, menu, controllers) and file management. It includes built-in plugins for images, videos, audio, drawing, math expressions, autocomplete, slash commands, table editing, code view, markdown preview, and document layouts (A4 page breaks). The codebase is extensively tested with unit, integration, and e2e tests (Playwright), and follows strict architectural rules enforced by dependency-cruiser. It exports TypeScript definitions, supports internationalization (20+ languages), and integrates with popular frameworks via official React/Vue wrappers. The library is distributed via npm and CDN, and demonstrates a high level of engineering craftsmanship in its event system, DOM manipulation utilities, and plugin lifecycle management.
The LLM identified 3 files worth highlighting for reuse:
Provides a robust collection of DOM utility functions (offset measurement, scroll parent detection, element visibility, CSS variable access) that are independent of the editor core and can be extracted into any web project. Demonstrates careful edge-case handling (e.g., offset relative to document, scroll offset correction, cross-browser compatibility) and is a leaf module with no internal dependencies.
Implements efficient DOM traversal functions (closest, previous/next element, child element) with support for custom matchers and text node filtering. Originally developed for reliable element targeting within the editor, these utilities are self-contained and reusable in any application requiring precise DOM navigation. The functions avoid common pitfalls like whitespace text nodes and provide consistent cross-browser behaviour.
Offers low-level DOM node manipulation operations (splitNode, mergeNode, removeEmptyNode, etc.) that preserve tree structure and properly handle text nodes, nested elements, and edge cases (e.g., empty nodes, bounding container splits). This module is self-contained and relies only on standard DOM APIs, making it suitable for extraction into other editors, content transformation tools, or any project that needs fine-grained control over the DOM tree.