Editra

Editra is a lightweight, zero-dependency HTML editor component for React and Preact. Perfect for any modern web application built with Next.js, Vite, Create React App, or any other React-based framework.

✨ Features

• 🪶 Zero Dependencies - Only requires React/Preact as peer dependency
• 🎨 Full WYSIWYG Editor - Rich text editing with visual toolbar
• 🔧 Highly Customizable - Control styles, behavior, and appearance
• 📦 Tiny Bundle Size - Minimal footprint for production apps
• ⚡ Framework Agnostic - Works with React 16.8+, Preact, Next.js, Vite, etc.
• 🎯 No Sanitization - Raw HTML output for maximum flexibility
• 💪 TypeScript Support - Full type definitions included

📦 Installation

npm install editra

or

yarn add editra

🚀 Quick Start

Basic Usage

import React, { useState } from 'react';
import Editra from 'editra';

function App() {
  const [html, setHtml] = useState('<h2>Hello World</h2>');

  return (
    <Editra
      html={html}
      onChange={(newHtml) => setHtml(newHtml)}
      onSubmit={(finalHtml) => console.log('Submitted:', finalHtml)}
    />
  );
}

Next.js Usage

import dynamic from 'next/dynamic';

const Editra = dynamic(() => import('editra'), { ssr: false });

export default function Page() {
  return <Editra html="<p>Edit me!</p>" />;
}

Preact Usage

import { h } from 'preact';
import { useState } from 'preact/hooks';
import Editra from 'editra';

export default function App() {
  const [content, setContent] = useState('');

  return (
    <Editra
      html={content}
      onChange={setContent}
    />
  );
}

📖 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | html | string | "" | Initial HTML content | | onChange | (html: string) => void | - | Callback fired when content changes | | onSubmit | (html: string) => void | - | Callback for submit action | | style | CSSProperties | {} | Custom styles for wrapper | | className | string | "" | Custom className for wrapper | | maxHeight | string | "50vh" | Maximum height for editor area | | hideToolbar | boolean | false | Hide the formatting toolbar |

Features Included

Text Formatting

• Bold, Italic, Underline, ~~Strikethrough~~
• Font family selection (Arial, Times New Roman, Courier, Georgia, Verdana, Tahoma)
• Font size control (8-72px)
• Text and highlight colors

Block Formatting

• Headings (H1, H2, H3)
• Paragraphs
• Code blocks
• Bulleted lists
• Numbered lists

Alignment & Indentation

• Left, Center, Right, Justify
• Indent/Outdent

Advanced Features

• Insert links
• Insert images
• Code view (HTML source)
• Remove formatting

🎨 Customization Examples

Custom Styling

<Editra
  html="<p>Custom styled editor</p>"
  style={{
    width: '800px',
    margin: '0 auto',
    border: '2px solid #333'
  }}
  maxHeight="300px"
/>

Controlled Component

function ControlledEditor() {
  const [content, setContent] = useState('<p>Initial content</p>');

  const handleSave = () => {
    // Save content to database
    fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify({ html: content })
    });
  };

  return (
    <>
      <Editra
        html={content}
        onChange={setContent}
      />
      <button onClick={handleSave}>Save</button>
    </>
  );
}

Toolbar-less Editor

<Editra
  html="<p>Simple contenteditable area</p>"
  hideToolbar={true}
  onChange={(html) => console.log(html)}
/>

🔒 Security Note

Important: Editra does not sanitize HTML output. If you're displaying user-generated content, you should sanitize it before rendering to prevent XSS attacks. Consider using libraries like DOMPurify for sanitization.

import DOMPurify from 'dompurify';

function SafeDisplay({ html }) {
  const clean = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

MIT © [Your Name]

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

If you find a bug or have a feature request, please open an issue.

💖 Support

If you find this package useful, please consider giving it a ⭐️ on GitHub!