@connectedxm/editor v0.0.19

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:

License

This project is licensed under the MIT License.