Tiptap UI Components 🎨

Welcome to the Tiptap UI Components repository! This project provides React components and templates for building rich text editor UIs with Tiptap. If you are looking to enhance your text editing experience, you are in the right place!

Table of Contents

• Features
• Installation
• Usage
• Components
• Examples
• Contributing
• License
• Contact

Features

• Rich Text Editing: Create powerful text editors with ease.
• Customizable Components: Tailor components to fit your design needs.
• Responsive Design: Ensure your editors look great on all devices.
• Easy Integration: Quickly add to your existing React projects.
• WYSIWYG Editing: Provide a What You See Is What You Get experience for users.

Installation

To get started, you can install the package via npm or yarn. Run the following command in your terminal:

npm install tiptap-ui-components

or

yarn add tiptap-ui-components

Usage

After installation, you can import the components into your React application. Here’s a simple example:

import React from 'react';
import { Editor } from 'tiptap-ui-components';

const App = () => {
  return (
    <div>
      <h1>My Rich Text Editor</h1>
      <Editor />
    </div>
  );
};

export default App;

This code will render a basic rich text editor. You can further customize it based on your requirements.

Components

The library includes several components to help you build your editor:

• Editor: The main component for the text editor.
• Toolbar: A customizable toolbar for formatting options.
• Menu: A dropdown menu for additional features.
• Button: A reusable button component for toolbar actions.

Editor

The Editor component is the core of your text editing experience. You can customize its behavior and appearance through props.

Toolbar

The Toolbar component provides buttons for common formatting actions like bold, italic, and underline. You can add or remove buttons as needed.

Menu

The Menu component allows for additional features, such as inserting images or links. You can configure the menu to show the options relevant to your application.

Button

The Button component is a simple, reusable button that you can use in your toolbar or anywhere in your application.

Examples

Here are some examples to illustrate how to use the components effectively:

Basic Editor

import React from 'react';
import { Editor } from 'tiptap-ui-components';

const BasicEditor = () => {
  return <Editor />;
};

export default BasicEditor;

Custom Toolbar

import React from 'react';
import { Editor, Toolbar } from 'tiptap-ui-components';

const CustomToolbarEditor = () => {
  return (
    <div>
      <Toolbar>
        <Button action="bold">Bold</Button>
        <Button action="italic">Italic</Button>
      </Toolbar>
      <Editor />
    </div>
  );
};

export default CustomToolbarEditor;

Contributing

We welcome contributions! If you would like to help improve the project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes.
4. Submit a pull request.

Your contributions help us enhance the library for everyone.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For questions or feedback, please reach out via GitHub issues or contact me.

Releases

To see the latest releases, visit the Releases section. You can download the latest version and execute it in your project.

Thank you for checking out Tiptap UI Components! We hope it helps you build amazing text editing experiences.