open-index/open-npm huggingface dataset:
npm package: @lenas/rich-edit
Description: A powerful, customizable, and easy-to-use Rich Text Editor component for React, built on top of the amazing [Tiptap](https://tiptap.dev/) editor framework.
Latest version: 0.1.6

# React Rich Text Editor (@lenas/rich-edit)

A powerful, customizable, and easy-to-use Rich Text Editor component for React, built on top of the amazing [Tiptap](https://tiptap.dev/) editor framework.

This component provides a clean user interface and a comprehensive set of features out-of-the-box, making it simple to integrate a full-featured text editor into your React applications.

## Features

- **Comprehensive Formatting:** Includes headings, bold, italics, underline, and more like align text to the left, center, or right.
- **Font and Color Control:** Easily change font families and text/highlight colors.
- **Lists:** Support for both ordered and unordered (bullet) lists.
- **Advanced Blocks:** Includes code blocks with syntax highlighting, blockquotes, and links.
- **Embed Media:** Easily embed images and YouTube videos.
- **Tables:** Full support for creating and editing tables within the editor.
- **Preview Mode:** A clean, prose-styled preview of the HTML output.

## Usage

Import the BlogEditor component and use it in your application. The component handles its own CSS, so no extra style imports are needed.

```ts
import React from 'react';
import BlogEditor from '@lenas/rich-edit';

function MyAwesomePage() {
return (
  <div className="container">
    <h1>My New Article</h1>
    <p>Use the editor below to write your content.</p>
    <BlogEditor />
  </div>
);
}

export default MyAwesomePage;
```