@tiptap/react

Basic Editor Setup

This code sets up a basic Tiptap editor with the StarterKit extension, which includes common features like bold, italic, and lists.

import React from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World!</p>',
  });

  return <EditorContent editor={editor} />;
};

export default Tiptap;

Custom Extensions

This code demonstrates how to create a custom extension for Tiptap. The custom extension defines a new node type that can be used within the editor.

import { Node, mergeAttributes } from '@tiptap/core';

const CustomExtension = Node.create({
  name: 'customExtension',
  group: 'block',
  content: 'inline*',
  parseHTML() {
    return [{ tag: 'custom-extension' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['custom-extension', mergeAttributes(HTMLAttributes), 0];
  },
});

export default CustomExtension;

Collaboration

This code sets up a collaborative editing environment using Tiptap and Yjs with WebRTC. Multiple users can edit the same document in real-time.

import { Collaboration } from '@tiptap/extension-collaboration';
import { WebrtcProvider } from 'y-webrtc';

const editor = useEditor({
  extensions: [
    StarterKit,
    Collaboration.configure({
      document: ydoc,
    }),
  ],
});

const provider = new WebrtcProvider('your-room-name', ydoc);