View Live Demo & Documentation

🚀 Features

• Rich Text Formatting: Bold, Italic, Underline, Strike, Font size control, Text alignment.
• Structured Content: Lists (Bullet & Numbered), Checklists.
• Advanced Editing: Hyperlinks, Undo/Redo history, Code view.
• Mobile-friendly: Responsive editor UI out of the box.
• Customizable: Fully styled via CSS, easy to override.

📦 Installation

Choose your preferred package manager:

# npm
npm install @resuave/texteditor

# pnpm
pnpm add @resuave/texteditor

# yarn
yarn add @resuave/texteditor

💻 Usage

Import the component and its stylesheet, then use it in your React application:

import { useState } from "react";
import { ResuAveTextEditor } from "@resuave/texteditor";
import "@resuave/texteditor/style.css";

export default function App() {
  const [content, setContent] = useState(
    "<p>Hello, <strong>Resuave</strong>!</p>",
  );

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
      <h2>My Editor</h2>
      <ResuAveTextEditor
        content={content}
        onChange={(html) => setContent(html)}
      />
    </div>
  );
}

🛠️ Props

| Prop | Type | Description | | ------------- | ------------------------ | -------------------------------------------- | | content | string | The initial HTML content of the editor. | | onChange | (html: string) => void | Callback triggered when the content changes. | | placeholder | string | Optional placeholder text. |

(For full props documentation, see the Live Demo).

📝 License

This project is licensed under the MIT License.