esc-editor

A feature-rich WYSIWYG HTML editor component for React with support for tables, images, text formatting, and more.

Features

• 📝 Rich text editing with contentEditable
• 📊 Advanced table support with row/column management
• 🖼️ Image insertion with sizing and alignment options
• 🎨 Text formatting (bold, italic, underline, strikethrough)
• 📋 Lists (ordered, unordered)
• 🔗 Link insertion
• 🌙 Dark mode support via CSS custom properties
• 📱 Responsive design
• 💻 Source code view
• 🎯 TypeScript support

Installation

npm install esc-editor
# or
yarn add esc-editor
# or
pnpm add esc-editor

Usage

import { RichTextEditor, prepareContentForAPI } from 'esc-editor';
import 'esc-editor/styles.css';

function MyComponent() {
  const handleChange = (html: string) => {
    console.log('Content changed:', html);
  };

  const handleSave = (html: string) => {
    // Clean HTML for API submission
    const cleanHtml = prepareContentForAPI(html);
    // Send to your API...
  };

  return (
    <RichTextEditor
      initialValue="<p>Hello World!</p>"
      onChange={handleChange}
      placeholder="Start typing..."
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialValue | string | "" | Initial HTML content | | onChange | (html: string) => void | - | Callback when content changes | | placeholder | string | "" | Placeholder text when empty | | className | string | "" | Additional CSS classes | | disabled | boolean | false | Disable editing | | minHeight | string | "200px" | Minimum editor height |

Styling

The editor uses CSS custom properties for theming. Override these in your CSS:

:root {
  --esc-editor-bg: #ffffff;
  --esc-editor-text: #1f2937;
  --esc-editor-border: #e5e7eb;
  --esc-editor-toolbar-bg: #f9fafb;
  --esc-editor-button-hover: #e5e7eb;
  --esc-editor-button-active: #dbeafe;
}

/* Dark mode */
.dark {
  --esc-editor-bg: #1f2937;
  --esc-editor-text: #f9fafb;
  --esc-editor-border: #374151;
  --esc-editor-toolbar-bg: #111827;
  --esc-editor-button-hover: #374151;
  --esc-editor-button-active: #1e3a5f;
}

API

prepareContentForAPI(html: string): string

Cleans HTML content for safe API submission by removing selection markers and normalizing whitespace.

import { prepareContentForAPI } from 'esc-editor';

const cleanHtml = prepareContentForAPI(editorContent);

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

# Type check
npm run typecheck

License

MIT © EasySiteControl