@bernierllc/tiptap-editor

Rich text editor UI component built on Tiptap with Tamagui styling and real-time collaboration support.

Installation

npm install @bernierllc/tiptap-editor

Peer Dependencies

This package requires the following peer dependencies:

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

Usage

Basic Example

import { TiptapEditor } from '@bernierllc/tiptap-editor';

function App() {
  const handleSave = (content: string) => {
    console.log('Saved:', content);
  };

  return (
    <TiptapEditor
      initialContent="<p>Hello World</p>"
      onSave={handleSave}
    />
  );
}

With Auto-Save

import { TiptapEditor } from '@bernierllc/tiptap-editor';

function App() {
  const handleAutoSave = (content: string) => {
    // Automatically called after 5 seconds of inactivity
    console.log('Auto-saved:', content);
  };

  return (
    <TiptapEditor
      initialContent="<p>Start typing...</p>"
      onAutoSave={handleAutoSave}
      autoSaveInterval={5000}
    />
  );
}

With Collaboration

import { TiptapEditor } from '@bernierllc/tiptap-editor';

function CollaborativeEditor() {
  return (
    <TiptapEditor
      enableCollaboration={true}
      collaborationSessionId="session-123"
      initialContent="<p>Collaborative editing!</p>"
    />
  );
}

Dark Theme

import { TiptapEditor } from '@bernierllc/tiptap-editor';

function DarkEditor() {
  return (
    <TiptapEditor
      theme="dark"
      initialContent="<p>Dark mode editor</p>"
    />
  );
}

Custom Toolbar

import { TiptapEditor } from '@bernierllc/tiptap-editor';

function CustomToolbarEditor() {
  return (
    <TiptapEditor
      toolbar={{
        showBold: true,
        showItalic: true,
        showHeadings: false, // Hide heading buttons
        showLists: true,
        customButtons: [
          {
            label: 'Custom',
            onClick: () => console.log('Custom action'),
            active: false
          }
        ]
      }}
    />
  );
}

API

TiptapEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialContent | string | '' | Initial HTML content for the editor | | onSave | (content: string) => void | - | Callback when save button clicked | | onAutoSave | (content: string) => void | - | Callback for auto-save (debounced) | | autoSaveInterval | number | 5000 | Auto-save debounce interval (ms) | | editable | boolean | true | Whether editor is editable | | enableCollaboration | boolean | false | Enable real-time collaboration | | collaborationSessionId | string | - | Collaboration session identifier | | toolbar | ToolbarConfig | - | Toolbar configuration | | theme | 'light' \| 'dark' | 'light' | Editor theme |

ToolbarConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | showBold | boolean | true | Show bold button | | showItalic | boolean | true | Show italic button | | showHeadings | boolean | true | Show heading buttons | | showLists | boolean | true | Show list buttons | | showLink | boolean | true | Show link button | | showImage | boolean | true | Show image button | | showTable | boolean | true | Show table button | | customButtons | ToolbarButton[] | [] | Custom toolbar buttons |

ToolbarButton

| Property | Type | Description | |----------|------|-------------| | icon | React.ReactNode | Button icon | | label | string | Button label | | onClick | () => void | Click handler | | active | boolean | Whether button is active |

Hooks

useAutoSave

Debounced auto-save hook for custom implementations:

import { useAutoSave } from '@bernierllc/tiptap-editor';

function MyComponent() {
  const handleAutoSave = useAutoSave(
    (content: string) => {
      // Save content
    },
    5000 // 5 second debounce
  );

  return <div>...</div>;
}

Features

• Rich Text Formatting: Bold, italic, headings, lists, and more
• Auto-Save: Configurable debounced auto-save functionality
• Collaboration: Optional real-time collaborative editing
• Theming: Light and dark theme support
• Customizable Toolbar: Show/hide buttons and add custom actions
• TypeScript: Full TypeScript support with type definitions

License

Copyright (c) 2025 Bernier LLC. See LICENSE file for details.