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..."
         defaultValue="<p>This is the default content!</p>"
        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" }}
  defaultValue="<p>This is the default content!</p>"
/>

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. | | defaultValue | string | "<p>This is the default content!</p>" | Default value shown in the editor. | | 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.