playbooks

home / skills / harborgrid-justin / lexiflow-premium / rich-text-editor-engineering

rich-text-editor-engineering skill

/frontend/.github-skills/rich-text-editor-engineering

This skill helps you design and integrate a contenteditable editor with custom data models, ensuring safe HTML, cross-browser selection, and basic formatting.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill rich-text-editor-engineering

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
604 B
---
name: rich-text-editor-engineering
description: Integrate or build a contenteditable-based editor with custom data models.
---

# Rich Text Editor Engineering

## Summary
Integrate or build a contenteditable-based editor with custom data models.

## Key Capabilities
- Manage selection state.
- Normalize HTML and Delta content.
- Implement custom formatting operations.

## PhD-Level Challenges
- Cross-browser selection inconsistencies.
- Sanitize pasted HTML content.
- Sync model with view.

## Acceptance Criteria
- Implement basic formatting.
- Handle image pasting.
- Ensure safe HTML output.

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

FAQ

How do I handle cross-browser selection differences?

Abstract selection as model ranges and translate DOM selections into that model on every interaction; normalize edge cases and re-render selection from the model.

What’s the best way to sanitize pasted HTML?

Sanitize at paste: strip disallowed tags/attributes, convert safe constructs to model nodes, and reject executable content. Prefer whitelist-based rules and validate image sources.

How can I ensure safe HTML output?

Emit HTML only from your validated model, not raw DOM. Use escaping and a final sanitization pass before storage or rendering.