React Simple Rich Text Editor

Overview

react-simple-rich-text-editor is a lightweight and customizable rich text editor for React, featuring @mention functionality, image upload, and more.

Installation

To install the package in your React project, run the following command:

npm install react-simple-rich-text-editor

Features

• Lightweight and extensible rich text editor.
• Support for @mention functionality.
• Image upload capability.
• Customizable toolbar options.
• Includes TipTap extensions like Font Size, Text Align, Underline, and more.

How to Use

Here is an example of how to use the react-simple-rich-text-editor in your React application:

Example Code:

import React, { useState } from 'react';
import { Editor } from 'react-simple-rich-text-editor';
import 'react-simple-rich-text-editor/dist/styles.css';

const mentions = [
  { id: '1', display: 'John Doe' },
  { id: '2', display: 'Jane Smith' },
  { id: '3', display: 'Bob Johnson' },
];

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

  const handleImageUpload = async (file) => {
    // Implement your image upload logic here
    // Return the URL of the uploaded image
    return 'https://example.com/uploaded-image.png';
  };

  return (
    <div>
      <h1>Rich Text Editor</h1>
      <Editor
        value={content}
        onChange={setContent}
        mentions={mentions}
        onImageUpload={handleImageUpload}
      />
      <div>
        <h2>Output HTML:</h2>
        <pre>{content}</pre>
      </div>
    </div>
  );
}

export default App;

Customizing the Editor

You can customize the editor by providing the following props:

• value: The current content of the editor (HTML).
• onChange: A callback function triggered when the content changes.
• mentions: An array of mentionable users or items (e.g., [{ id: '1', display: 'John Doe' }]).
• onImageUpload: A callback function for handling image uploads.

Example Props:

<Editor
  value={content}
  onChange={setContent}
  mentions={mentions}
  onImageUpload={handleImageUpload}
  placeholder="Start typing..."
/>

Dependencies

None

Contributing

Contributions are welcome! If you find a bug or want to add a new feature, feel free to open an issue or submit a pull request or connect with [email protected]

License

react-simple-rich-text-editor is licensed under the MIT License.