React-texteditor-toolkit NPM

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.