neilj/Squire
Squire
Squire is a DOM-based rich text editor and WYSIWYG content editor that treats raw HTML as the source of truth. It functions as a system for manipulating the document object model directly to provide a visual interface for editing complex web content.
The project focuses on arbitrary HTML editing, allowing the modification of any HTML content without losing original formatting. It includes tools for HTML content normalization and sanitization to ensure that raw input is cleaned and structured consistently before being rendered as editable nodes.
The editor's capability surface covers inline formatting, block element management, and the insertion of media fragments. It also provides state management for tracking cursor positions and maintaining a snapshot-based undo and redo history.
Features
- HTML Content Editors - Provides a visual interface for manipulating structured text data treating raw HTML as the source of truth.
- Rich Text Editors - Provides a rich text editing interface that operates directly on the browser DOM to manipulate web content.
- HTML Serialization - Converts the live DOM tree back into raw HTML strings for persistence and data transfer.
- HTML Content Sanitization - Cleans raw HTML to remove malicious scripts before converting content into editable DOM nodes.
- HTML Structure Normalizers - Converts inconsistent HTML markup from external sources into a standardized structure for consistent editing.
- Block Nesting Management - Manages the hierarchical depth and structure of block elements like lists and blockquotes.
- Document State Management - Implements detailed state management for tracking cursor positions and maintaining a snapshot-based undo and redo history.
- WYSIWYG Editors - Provides a visual editing interface for manipulating DOM elements and block structures with direct control over the resulting HTML.
- DOM-Driven State Management - Uses the browser DOM as the primary source of truth for editor state rather than an internal data model.
- HTML Content Management - Retrieves and sets the editor content using raw HTML strings for import and export.
- Rich Text Editors - Implements a web-based interface for creating and editing formatted HTML content.
- Inline Text Styles - Toggles visual treatments like bold, italics, and color for inline text elements.
- Browser Selection Range Captures - Captures user text selection boundaries using the native Range API to apply styles and insert elements.
- DOM Mutation Tracking - Monitors real-time modifications to the HTML tree to synchronize state and trigger history checkpoints.
- Undo-Redo Management - Provides a system for managing the editing timeline and restoring document state via undo/redo.
- Command-Based Action Dispatchers - Implements a centralized system to process editor requests through prioritized listeners for formatting and structural changes.
- DOM Fragment Insertions - Adds images or raw HTML fragments at the current cursor position or replaces the active selection.
- Cursor Focus Controllers - Manages editor focus and moves the cursor to document boundaries using the browser selection range.
- Undo-Redo History - Maintains a history of state snapshots to enable restoring previous versions of the document.
- Editors - HTML5 rich text editor.
- Rich Text Editors - HTML5-based rich text editor.
