@satek-vn/react-editor NPM

React Editor Component

npm license

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

Editor 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.