Editor Component

A reusable rich-text editor component built with React, TipTap, and Tailwind CSS. This editor allows you to initialize with existing content, handle content changes, and toggle read-only mode.

Table of Contents

• Installation
• Peer Dependencies
• Usage
• Importing Styles
• Example Usage
• Props
• License

Installation

Install the editor component via npm:

npm install @connectedxm/editor

Peer Dependencies

Ensure your project has the following packages installed:

• React
• React DOM

You can install them using

npm install react react-dom

Usage

Importing the Component

Import the Editor component into your React application:

import Editor from "@connectedxm/editor";

Importing Styles

The Editor component relies on a style sheet styling.

import "@connectedxm/editor/dist/styles.css";

Example Usage

Use the Editor component in your React components:

import "@connectedxm/editor/dist/styles.css";

function MyComponent() {
  const [content, setContent] = useState("<p>Initial content</p>");

  const handleContentChange = (newContent) => {
    setContent(newContent);
  };

  return (
    <Editor
      initialContent={content}
      onChange={handleContentChange}
      readOnly={false}
      className="custom-editor-class"
    />
  );
}

Props

The Editor component accepts the following props:

| Name | Description | Type | Required | | ---------------- | -------------------------------------------------------------- | --------------------------- | -------- | | initialContent | The initial HTML content to load into the editor. | string | Yes | | onChange | Callback function that is called whenever the content changes. | (content: string) => void | Yes | | readOnly | If set to true, the editor will be in read-only mode. | boolean | No | | className | Additional custom classes to apply to the editor container. | string | No |

License

This project is licensed under the MIT License.