Tiptap Editor Components

A simple npm package providing two Tiptap editor components: Editor and InlineEditor for React applications.

🚀 Demo

View the demo:

• Open index.html in your browser (works standalone with CDN)
• Or clone the repository and open example-react.html after building
• Install the package: npm install tiptap-editor-components

Installation

npm install tiptap-editor-components

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom @tiptap/core @tiptap/react @tiptap/starter-kit

Usage

Editor Component

The Editor component provides a full-featured rich text editor with all StarterKit extensions.

import React, { useState } from 'react';
import { Editor } from 'tiptap-editor-components';
import 'tiptap-editor-components/dist/styles.css'; // Optional: import default styles

function App() {
  const [content, setContent] = useState('<p>Hello World!</p>');

  return (
    <Editor
      content={content}
      onChange={(html) => setContent(html)}
      placeholder="Start typing..."
      editable={true}
      className="my-custom-class"
    />
  );
}

InlineEditor Component

The InlineEditor component is optimized for inline editing with block-level elements disabled.

import React, { useState } from 'react';
import { InlineEditor } from 'tiptap-editor-components';
import 'tiptap-editor-components/dist/styles.css'; // Optional: import default styles

function App() {
  const [content, setContent] = useState('<p>Click to edit</p>');

  return (
    <div>
      <h1>Title: </h1>
      <InlineEditor
        content={content}
        onChange={(html) => setContent(html)}
        placeholder="Enter text..."
        editable={true}
      />
    </div>
  );
}

Props

Both components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial HTML content | | onChange | (html: string) => void | undefined | Callback fired when content changes | | placeholder | string | 'Start typing...' | Placeholder text when editor is empty | | editable | boolean | true | Whether the editor is editable | | className | string | '' | Additional CSS class names | | extensions | Extension[] | [] | Additional Tiptap extensions |

Custom Extensions

You can add custom Tiptap extensions:

import { Editor } from 'tiptap-editor-components';
import { Link } from '@tiptap/extension-link';
import { Image } from '@tiptap/extension-image';

function App() {
  return (
    <Editor
      content="<p>Hello World!</p>"
      extensions={[
        Link.configure({
          openOnClick: false,
        }),
        Image,
      ]}
    />
  );
}

Styling

The package includes default styles that you can import:

import 'tiptap-editor-components/dist/styles.css';

You can also override styles using the className prop or by targeting the CSS classes:

• .tiptap-editor - Main editor container
• .tiptap-inline-editor - Inline editor container
• .ProseMirror - ProseMirror editor content

Examples

Check out the example files in this repository:

• example-react.html - Visual demonstration and usage examples (open in browser after building)
• example.html - Interactive example (requires package to be built)

To view examples locally:

1. Build the package: npm run build
2. Open example-react.html in your browser

Quick Start Example:

import { Editor, InlineEditor } from 'tiptap-editor-components';
import 'tiptap-editor-components/dist/styles.css';

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

License

MIT