@together.agency/editor

A collaborative rich text editor component based on Tiptap.

Installation

yarn add @together.agency/editor
# or
npm install @together.agency/editor

Make sure you also install the required peer dependencies:

yarn add react react-dom @tiptap/core @tiptap/react @tiptap/starter-kit yjs
# or
npm install react react-dom @tiptap/core @tiptap/react @tiptap/starter-kit yjs

Usage

import React from 'react';
import { Editor } from '@together.agency/editor';
import '@together.agency/editor/dist/styles.css'; // Import base styles if needed

const MyComponent = () => {
  // Define a simple data provider or use the default one
  const simpleDataProvider = {
    getContent: async (id) => ({ id, content: null }), // Implement fetching
    saveContent: async (id, content) => {
      console.log('Saving content:', id, content);
      // Implement saving
    },
  };

  return (
    <Editor
      contentId="my-document-id"
      options={{
        dataProvider: simpleDataProvider,
        // Add other options as needed
      }}
    />
  );
};

export default MyComponent;

Features

• Built with Tiptap v2
• Real-time collaboration (optional, via Hocuspocus)
• Slash commands
• Bubble menu
• Placeholder text
• Customizable extensions
• Generic data provider interface

Documentation

(Coming soon)

License

MIT