esc-editor

Esc-editor: A Feature-Rich WYSIWYG Editor for React that Elevates Content Creation

In the world of React applications, rich text editors are a common yet often frustrating component to integrate. You want something that feels native, looks polished, and handles real-world content needs—tables, images, links, and robust formatting—without forcing you to wrestle with brittle APIs or fragile markup. Esc-editor delivers a comprehensive, TypeScript-friendly WYSIWYG HTML editor that checks all of these boxes. Built around the familiar contentEditable model and extended with thoughtful features, esc-editor gives you a fast, reliable editing experience that plays well with modern front-end ecosystems.

Below is a detailed journey through what esc-editor offers, how it fits into a React project, and how to maximize its power in real-world scenarios. This guide is designed for developers who want a solid, maintainable editor with sensible defaults, clean API surfaces, and theming that adapts to light and dark experiences.

Why esc-editor Stands Out

Rich editing with contentEditable that feels native to users while remaining predictable for developers. The editor exposes a familiar toolbar with formatting commands, while the underlying content is stored as HTML that you can easily read, sanitize, and submit to APIs.
Strong table support. Tables are more than a cosmetic feature here—they come with row and column management that keeps large datasets well-structured. You can insert, delete, and reorganize cells with confidence, which is essential for content-heavy dashboards, documentation, or content management systems.
Image insertion with sizing and alignment options. Images aren’t an afterthought; esc-editor provides controls for sizing and alignment so that embedded media align with the surrounding content and layout constraints.
Extensive text formatting. Bold, italic, underline, and strikethrough are all supported, delivering the typography flexibility readers expect.
Lists for structured content. Ordered and unordered lists help authors convey structure and hierarchy, from checklists to outlines.
Link support. Inserting and managing hyperlinks straight from the editor keeps content connected to external resources without leaving the editing context.
Theming via CSS custom properties, with built-in dark mode support. Theming is designed to be easy to adopt in your app's design system, ensuring visual consistency and accessible contrast across light and dark themes.
Responsive design. The editor scales gracefully across devices, from desktops to tablets to phones, ensuring a usable editing surface wherever your users work.
Source code view. For developers who want to peek under the hood, a source view offers insight into the underlying HTML, making debugging and content refinement simpler.
TypeScript support. Strong typing reduces runtime surprises and helps you integrate esc-editor into large, scalable codebases with confidence.

Core Features in Depth

Rich Text Editing with contentEditable

Esc-editor is built on the familiar contentEditable paradigm, providing an editing surface that behaves like a real text editor in the browser. This foundation makes it easy for users to format text, insert blocks, and structure content without a steep learning curve. Because the editor emits HTML, you can store, transport, or transform the content with predictable semantics. The result is a flexible yet reliable editing experience that works well across browsers and environments.

Advanced Table Support with Row/Column Management

Tables are a powerful tool for presenting structured data within content. Esc-editor’s table features let authors insert tables, add or remove rows and columns, merge cells when needed, and manage layout with intuitive controls. This capability is invaluable for documentation, product catalogs, data-driven articles, and dashboards where tabular data needs to live alongside narrative text.

Image Insertion with Sizing and Alignment Options

Images bring content to life, and esc-editor recognizes that sizing and alignment matter. The editor includes controls to adjust image width, height, and alignment relative to surrounding text. Whether you’re embedding a hero image, a diagram, or a product photo, you’ll be able to fine-tune presentation without leaving the editing context.

Text Formatting: Bold, Italic, Underline, Strikethrough

Typography expresses emphasis and tone. Esc-editor provides a complete set of formatting tools for emphasis (bold, italic), emphasis alternatives (underline, strikethrough), and a straightforward way to style content on the fly. This is essential for creating readable, professional documents, blog posts, and knowledge bases.

Lists: Ordered and Unordered

Structured lists help readers navigate content and digest information. Whether you’re outlining steps or listing feature highlights, the editor’s list support makes it easy to switch between ordered and unordered formats. Nested lists are supported, enabling complex hierarchies without sacrificing readability.

Link Insertion

Hyperlinks connect content to related resources, citations, or external references. The link insertion feature is designed to be simple, with intuitive controls to add, edit, or remove hyperlinks, keeping the user focused on content creation rather than navigation concerns.

Dark Mode Support via CSS Custom Properties

Theming through CSS variables makes esc-editor a friendly fit for modern design systems. You can override root variables to match your brand palette, and a dedicated dark mode theme uses CSS custom properties to deliver consistent contrast and legibility. This approach ensures that the editor integrates visually with your app, whether your users prefer light or dark environments.

Responsive Design

A critical requirement for any modern UI component is adaptivity. Esc-editor is designed to be responsive, providing a usable editing space on small screens without sacrificing the full feature set. This makes it suitable for admin panels, content management interfaces, or in-app editors on mobile devices.

Source Code View

For advanced users and developers, esc-editor includes a source code view that exposes the underlying HTML. This view helps with debugging, content moderation, or when you need to apply precise customizations to the markup you’re generating. It’s a handy bridge between WYSIWYG editing and manual HTML fine-tuning.

TypeScript Support

From a developer perspective, TypeScript support is a major win. Types help you catch integration issues early, document the public API clearly, and make it easier to maintain and upgrade the editor across large projects. The typing discipline aligns well with modern React workflows and your design-system-driven approach.

Installation: Getting Started Quickly

To begin using esc-editor in a React project, you’ll install the package from your favorite package manager. The library is published under a permissive license (MIT), designed to fit into both small prototypes and large-scale apps without heavy overhead.

Installation options:
npm install esc-editor
yarn add esc-editor
pnpm add esc-editor

After installation, you’ll typically import the editor and its styles into your component:

Import the RichTextEditor component from esc-editor.
Import the styles.css file to apply the default styling and ensure the editor renders as intended.

Usage: A Practical Quick Start

In a typical usage scenario, you’ll render the rich text editor within a React component, and you’ll wire up onChange handlers to react to content changes. You can log changes, strip or transform HTML before submission, and prepare content for API calls using the provided helpers.

A concise workflow might look like this:

Render the RichTextEditor in your component.
Provide an initial HTML value if you have pre-existing content to edit.
Use an onChange callback to react to user edits in real time.
When submitting content to an API, call prepareContentForAPI(html) to normalize whitespace and remove any editor-specific markers.

The API surface is designed to be ergonomic for typical use cases: you pass in the initialValue, subscribe to onChange events, and optionally customize placeholder text, CSS classes, disabled state, and a minimum height for the editor.

Props: What to Know

To keep your integration clean and predictable, esc-editor exposes a small, well-typed prop surface. Here is a concise description of each prop and its intended purpose:

initialValue (string): The starting HTML content displayed in the editor. If empty, the editor shows an empty surface ready for user input.
onChange (function): A callback that fires whenever the content changes. It receives the current HTML as a string, allowing you to keep state synchronized with your React component.
placeholder (string): Placeholder text that appears when the editor is empty, guiding users on what to write.
className (string): Optional additional CSS classes you can apply to the editor container to customize styling within your design system.
disabled (boolean): When true, editing is disabled so users cannot modify content. This is useful for read-only previews or gated content.
minHeight (string): Sets a minimum height for the editor, ensuring a usable editing surface even when content is sparse. The default is typically a pleasant baseline like "200px."

Styling and Theming: The CSS Custom Properties Approach

Esc-editor embraces theming through CSS custom properties (variables). This makes it straightforward to align the editor with your app’s visual language. A typical root theme might define:

--esc-editor-bg: Background color of the editor surface.
--esc-editor-text: Primary text color.
--esc-editor-border: Border color for the editor frame.
--esc-editor-toolbar-bg: Background color for the editor’s toolbar.
--esc-editor-button-hover: Hover color for toolbar buttons.
--esc-editor-button-active: Active or selected color for toolbar controls.

For dark mode, you can leverage a dark class on the root element and override the same variables to deliver a comfortable, high-contrast editing experience.

Example theming approach:

In light mode, define a clean, neutral palette that emphasizes readability and focus.
In dark mode, swap in deeper surfaces and brighter text, keeping toolbar affordances visible and accessible.

The CSS-driven approach makes it easy to integrate with design systems, ensuring a consistent look across your application and enabling teams to collaborate on styling decisions without touching the core editor code.

API: Prepare Content for API Submissions

When you’re ready to submit content to an API, you’ll want to sanitize and normalize the HTML to avoid sending extraneous editor artifacts or inconsistent whitespace. Esc-editor exposes a helper function designed precisely for this: prepareContentForAPI(html: string): string.

What it does:

Removes selection markers or editor-specific artifacts that should not be part of the final payload.
Normalizes whitespace to produce stable HTML string content that APIs expect.
Returns a clean string ready for submission, storage, or further processing.

Usage pattern:

After the user finishes editing, call prepareContentForAPI(editorContent) to obtain a clean HTML string.
Submit the resulting string to your backend or API layer.

Development and Contribution: How to Build and Extend

If you’re contributing to esc-editor or want to customize its behavior locally, the project provides a straightforward development workflow:

Install dependencies: npm install
Build the library: npm run build
Watch mode for development: npm run dev
Type checking: npm run typecheck

This setup supports a typical development loop: you modify the editor’s code or your integration, run the build to produce updated artifacts, and use the dev script to run a local development environment. Type checking helps catch type mismatches early, aligning with TypeScript’s guarantees and reducing runtime surprises.

License and Origins

Esc-editor is distributed under the MIT license, reflecting a permissive approach that encourages broad adoption and collaboration. This licensing choice is well-suited for both open-source projects and commercial applications, providing a clear path for integration and distribution.

Real-World Scenarios and Best Practices

Content-heavy documentation portals: Esc-editor’s robust table support and media insertion capabilities make it a strong choice for documentation that mixes narrative copy with structured data, diagrams, and embedded assets.
Admin dashboards and CMS interfaces: The responsive design and theming flexibility ensure a cohesive look within dashboards, with a smooth editing experience across devices.
Static site editors and blog platforms: The source code view and API-ready HTML simplify workflows that require clean, portable HTML output for static generation or CMS backends.
Teams using design systems: By leveraging CSS custom properties, teams can align the editor’s appearance with brand guidelines without forking the component or writing extensive overrides.

Tips for a smooth integration:

Start with the default theme and progressively override CSS variables to match your brand palette. This minimizes the risk of visual misalignment when upgrading.
Use prepareContentForAPI to sanitize HTML before persisting or transmitting content. This reduces the chance of carrying over editor-specific artifacts into your data layer.
If you plan to disable editing in certain modes (e.g., preview or read-only views), apply the disabled prop at the appropriate level to ensure the user experience remains coherent.

Design Considerations and Limitations

Accessibility: While the editor aims to provide a solid user experience, you may need to layer in additional ARIA attributes or keyboard shortcuts to meet your accessibility requirements. Consider integrating screen-reader friendly labels for toolbar actions and ensuring focus management aligns with your app’s expectations.
Performance with large content: If you’re editing very long documents with complex tables and media, keep an eye on performance. Debounce onChange updates if you’re syncing content in real time or sending frequent API calls.
Cross-browser consistency: While modern browsers provide reliable contentEditable support, you may run into edge cases with certain editors' markup. Sanitize and normalize HTML on the client side and on the server side as a precaution when dealing with user-generated content.

A Simple Roadmap for Adoption

Install esc-editor in your React project.
Add the editor to a page or component and provide initial HTML content if needed.
Connect onChange to keep your component’s state in sync with the editor.
Apply theming via CSS custom properties to match your app’s design system.
When content is ready for submission, use prepareContentForAPI to sanitize the HTML.
If your app needs a non-editable view, toggle the disabled prop accordingly.
Experiment with the source code view for advanced customization or debugging.

An Imagery-Forward Guide to Visualizing the Editor

In the spirit of the input’s descriptive icons, you can imagine the editor’s interface as a polished canvas:

A rich toolbar perched above the content area, with icons representing text formatting, lists, links, and media controls.
A live editing surface where authors see real-time results as they type, format, or insert elements.
A responsive container that adapts to the user’s device, maintaining comfortable margins and legible typography.
A media workspace where inserted images can be sized and aligned to complement the surrounding content.
A dark mode variant that keeps contrast high and readability strong in low-light environments.

Closing Thoughts

Esc-editor offers a thoughtful blend of power and usability for React developers who need a dependable, feature-rich WYSIWYG editor. By focusing on real-world content needs—tables, images, text formatting, links, and responsive behavior—while keeping a clean API and TypeScript safety, esc-editor is well-suited for modern web applications ranging from documentation platforms to content management interfaces and beyond. The emphasis on theming through CSS custom properties makes it easier to harmonize with your design system, and the availability of a source code view provides a practical bridge between WYSIWYG editing and direct HTML manipulation when necessary.

If you’re building a content-centric feature in React and want an editor that respects structure, media, and clean data submission, esc-editor is a compelling option worth evaluating. Its well-considered feature set, clear API surface, and emphasis on accessible theming make it a practical choice for teams that value maintainability and a polished user experience.

Note: The features described above reflect the capabilities outlined in the provided input, including rich text editing, table management, image insertion with sizing and alignment, comprehensive formatting, list support, link insertion, dark mode via CSS variables, responsive design, a source code view, and TypeScript support. The usage and configuration guidance is designed to help you integrate esc-editor smoothly into your React project while remaining adaptable to your app’s unique requirements.