react-texteditor-toolkit

TextEditor Component

A fully customizable and easy-to-use rich text editor built with React. Includes support for formatting, alignment, lists, and more.

Features

• Formatting: Bold, italic, underline, and capitalization toggle.
• Alignment: Left, center, and right text alignment.
• Lists: Ordered (numbered) and unordered (bulleted) lists.
• Clear Formatting: Remove all applied styles.
• Customizable Toolbar Actions.

Installation

Install the package via npm:

npm i react-texteditor-toolkit

Usage

Here's how to use the TextEditor in your project:

import React, { useState } from "react";
import TextEditor from "react-texteditor-toolkit";

const App = () => {
  const [content, setContent] = useState("");

  const handleContentChange = (e: { target: { value: string } }) => {
    setContent(e.target.value);
    console.log("Editor Content:", e.target.value);
  };

  return (
    <div>
      <h1>My Rich Text Editor</h1>
      <TextEditor
        placeholder="Start typing here..."
        onChange={handleContentChange}
        toolbarActions={["bold", "italic", "underline", "unorderedList", "clear"]}
        contentStyle={{ border: "1px solid #ddd", padding: "10px" }}
      />
      <p>Output:</p>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
};

export default App;

Customization

Styling the Editor

You can customize the editor's appearance using the contentStyle, iconStyle, and headerStyle props.

<TextEditor
  contentStyle={{ border: "2px solid #000", minHeight: "200px" }}
  iconStyle={{ color: "blue" }}
  headerStyle={{ backgroundColor: "#f4f4f4", padding: "10px" }}
/>

Read-Only Mode

To prevent edits, set readOnly to true:

<TextEditor readOnly={true} />

TextEditorProps

Prop	Type	Default	Description
iconStyle	React.CSSProperties	{}	Customize the style of toolbar icons.
contentStyle	React.CSSProperties	{ border: '1px solid #ccc', padding: '10px' }	Customize the editor's content area style.
headerStyle	React.CSSProperties	{}	Customize the style of the toolbar container.
placeholder	string	"Type here..."	Placeholder text shown in the editor when it's empty.
onChange	(e: { target: { value: string } }) => void	undefined	Callback triggered when the editor's content changes.
readOnly	boolean	false	Sets the editor to read-only mode.
toolbarActions	Array<string>	See below	Specify the available toolbar actions.

Available Toolbar Actions

You can customize the toolbarActions prop to include any of the following options:

• "bold": Toggle bold formatting.
• "italic": Toggle italic formatting.
• "underline": Toggle underline formatting.
• "unorderedList": Insert a bulleted list.
• "orderedList": Insert a numbered list.
• "alignLeft": Align text to the left.
• "alignCenter": Align text to the center.
• "alignRight": Align text to the right.
• "capitalize": Toggle text capitalization.
• "clear": Clear all formatting.