rich-text-editor-engineering_skill

Overview

This skill helps engineers integrate or build a contenteditable-based rich text editor that maps a DOM view to a custom data model. It focuses on selection management, HTML/Delta normalization, and implementing formatting operations while producing safe, predictable output. The guidance targets teams building editorial features for complex apps like legal management platforms.

How this skill works

The skill inspects and controls the contenteditable DOM, extracting and normalizing HTML fragments into a structured model (Delta or a JSON document). It maintains a canonical selection state and provides APIs for applying formatting, inserting images, and sanitizing pasted content. Sync logic reconciles model changes back to the DOM and emits validated, safe HTML for storage or display.

When to use it

• Building a custom editor that must integrate into an existing data model or backend
• Replacing a third-party editor to gain precise control over HTML output and security
• Handling rich content that includes images, annotations, or legal markup
• Needing deterministic behavior across browsers for selection and command execution
• Implementing copy/paste sanitization or custom paste handlers

Best practices

• Represent selection and document state in a single authoritative model; update DOM from model, not vice versa
• Normalize incoming HTML immediately on paste or load to a restricted subset and convert to your model
• Implement granular formatting ops (apply/remove) instead of toggling whole blocks to avoid conflicts
• Use thorough sanitization policies for images, links, and embedded HTML to prevent XSS
• Design change operations as immutable patches or deltas to simplify undo/redo and syncing

Example use cases

• Legal document editor that preserves clause metadata and produces sanitized, auditable HTML
• Custom email composer that needs consistent formatting and safe pasted content across browsers
• WYSIWYG field in a CRM where images and structured annotations must map to database models
• Migration tool that converts legacy HTML fragments to a normalized rich-text model before import