React Editor Component

A rich text editor component built with React and TypeScript, powered by Tiptap.

Installation

npm install @satek-vn/react-editor

Usage

import React, { useState } from "react";
import { Editor, EditorConfig } from "@satek-vn/react-editor";

const App = () => {
    const [content, setContent] = useState('');
    const config: EditorConfig = {
        placeholder: 'Enter content...',
        menubar: ['bold', 'italic', 'underline', 'strike', '', 'bullet-list', 'ordered-list', '', 'text-align', '', 'image', 'link', '', 'h1', 'h2', 'h3', '', 'mention'],
        uploadImage: async (files) => {
            // Example: Upload files and return URLs
            return Array.from(files).map(file => URL.createObjectURL(file));
        },
        popupLink: (previousUrl, submit) => {
            // Example: Open popup and submit url
            const url = window.prompt('URL', previousUrl);
            if (url === null) {
                return;
            }

            submit(url);
        },
        getSuggestion: (query) => {
            // Example: Return mention suggestions
            const list = [
                {id: 1, label: 'Lea Thompson'},
                {id: 2, label: 'Cyndi Lauper'},
                {id: 3, label: 'Tom Cruise'},
                {id: 4, label: 'Madonna'},
                {id: 5, label: 'Jerry Hall'},
                {id: 6, label: 'Joan Collins'},
                {id: 7, label: 'Winona Ryder'},
                {id: 8, label: 'Christina Applegate'},
                {id: 9, label: 'Alyssa Milano'},
                {id: 10, label: 'Molly Ringwald'},
                {id: 11, label: 'Ally Sheedy'},
                {id: 12, label: 'Debbie Harry'},
                {id: 13, label: 'Olivia Newton-John'},
                {id: 14, label: 'Elton John'},
                {id: 15, label: 'Michael J. Fox'},
                {id: 16, label: 'Axl Rose'},
                {id: 17, label: 'Emilio Estevez'},
                {id: 18, label: 'Ralph Macchio'},
                {id: 19, label: 'Rob Lowe'},
                {id: 20, label: 'Jennifer Grey'},
                {id: 21, label: 'Mickey Rourke'},
                {id: 22, label: 'John Cusack'},
                {id: 23, label: 'Matthew Broderick'},
                {id: 24, label: 'Justine Bateman'},
                {id: 25, label: 'Lisa Bonet'},
            ];

            return list.filter((item) => item.label.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5);
        },
    };

    return (
        <div>
            <Editor config={config} value={content} onChange={setContent} />
        </div>
    );
};

export default App;

Screenshots

Features

The editor supports the following features:

• Text Formatting: Bold, Italic, Underline, Strike-through.
• Headings: H1, H2, H3, H4, H5, H6.
• Lists: Bullet List, Ordered List.
• Block Elements: Blockquote, Code Block.
• Links: Add and edit hyperlinks.
• Images: Upload and insert images.
• Files: Upload and insert files.
• Mentions: Mention users with suggestions.
• Text Alignment: Align text (Left, Center, Right, Justify).
• Placeholder: Customizable placeholder text.

Props

| Prop | Type | Required | Description | |--------------|----------------------------------------|----------|-----------------------------------------------------------------------------| | config | EditorConfig | Yes | Configuration object for the editor. | | value | string | No | Initial content of the editor. | | onChange | (value) => void | No | Callback function triggered when the content changes. | | onFocus | (event) => void | No | Callback function triggered when the editor gains focus. | | onBlur | (event) => void | No | Callback function triggered when the editor loses focus. | | className | string | No | Additional CSS class for the editor container. |

EditorConfig

| Property | Type | Required | Description | |-----------------|----------------------------------------------------------------|----------|-------------------------------------------------------------------------------------| | menubar | Array<MenuItem> | Yes | List of menu items to display in the toolbar. | | placeholder | string | No | Placeholder text displayed when the editor is empty. | | className | string | No | Additional CSS class for the editor. | | readOnly | boolean | No | If set to true, the editor switches to read-only mode, disabling content editing. | | popupLink | (previousUrl, submit) => void | No | Custom popup for adding/editing links. | | uploadImage | (files) => Promise<string[]> | No | Function to handle image uploads and return URLs. | | uploadFile | (files) => Promise<FileItem[]> | No | Function to handle file uploads and return URLs. | | getSuggestion | (query) => Array<SuggestionItem> | No | Function to provide mention suggestions based on the query. |

MenuItem

| Name | Description | |-----------------|------------------------------------------------------| | bold | Apply bold formatting to the selected text. | | italic | Apply italic formatting to the selected text. | | underline | Apply underline formatting to the selected text. | | strike | Apply strikethrough formatting to the selected text. | | link | Add or edit a hyperlink. | | image | Upload and insert an image. | | file | Upload and insert an file. | | blockquote | Convert the selected text into a blockquote. | | code-block | Insert a block of code. | | bullet-list | Create a bullet list. | | ordered-list | Create a numbered list. | | text-align | Align text (left, center, right, justify). | | mention | Mention a user with suggestions. | | h1 | Apply Heading 1 style. | | h2 | Apply Heading 2 style. | | h3 | Apply Heading 3 style. | | h4 | Apply Heading 4 style. | | h5 | Apply Heading 5 style. | | h6 | Apply Heading 6 style. |

Development

To run the component locally:

npm install
npm run dev

License

This project is licensed under the MIT License.