@e4ia/richeditor - A Rich Text Editor for React 📝

App: E4LINK-Dashboard

A powerful and customizable rich text editor component for React, built with Tiptap. Perfect for creating feature-rich editing experiences in your React applications. 🚀

📑 Table of Contents

• 📑 Table of Contents
• 🚀 Installation
• 🛠️ Usage
• 📜 API
  • RichEditor
    • Props:
• 💡 Examples
  • Basic Example
  • Advanced Example with Extensions
• 📝 License

🚀 Installation

You can install the @e4ia/richeditor component via npm:

npm install @e4ia/richeditor

Or using yarn:

yarn add @e4ia/richeditor

🛠️ Usage

Once installed, you can use the RichEditor component in your React project like this:

import React, { useState } from 'react'; import { RichEditor } from '@e4ia/richeditor';

const App = () => { const [content, setContent] = useState('Hello, world!');

const handleChange = (newContent) => { setContent(newContent); };

return ( Rich Text Editor 📝 ); };

export default App;

📜 API

RichEditor

A customizable rich text editor component for React.

Props:

| Name | Type | Default | Description | |--------------|----------------|---------------|-------------| | value | string | "" | The current HTML content of the editor. | | onChange | function | undefined | A callback function triggered when the content changes. | | extensions | Array | [] | Custom extensions for Tiptap. | | placeholder| string | "Write something..." | Placeholder text for the editor. | | readOnly | boolean | false | Whether the editor is read-only. |

💡 Examples

Basic Example

<RichEditor value="Hello, world!" onChange={(newContent) => console.log(newContent)} />

This will display a rich text editor with default functionality.

Advanced Example with Extensions

import { Highlight } from '@tiptap/extension-highlight'; import { Link } from '@tiptap/extension-link';

<RichEditor value="Rich text editor with custom extensions." onChange={(newContent) => console.log(newContent)} extensions={[Highlight, Link]} placeholder="Start typing..." />

This will display an editor with highlight and link extensions enabled.

📝 License

This package is licensed under SEE LICENSE IN LICENSE. 📝