Tiptap Editor - Next.js Application

A Next.js application featuring professional Tiptap editor components based on the official Tiptap Simple Editor template, with additional custom components for enhanced functionality.

Features

SimpleEditor (Official Tiptap Template)

• Professional UI: Complete implementation of Tiptap's Simple Editor template
• Rich Formatting: Bold, italic, underline, strike-through, subscript, superscript
• Headings & Lists: Multiple heading levels, bullet lists, ordered lists, task lists
• Advanced Features: Image upload, link editing, color highlighting, text alignment
• Code Support: Inline code and code blocks with syntax highlighting
• Table Support: Full table functionality with resizable columns
• Dark/Light Mode: Built-in theme toggle
• Mobile Responsive: Adaptive toolbar for mobile devices
• Blockquotes: Styled blockquote support

Custom Components

• DeleteNodeButton: Delete selected nodes or content
• ImageAlignButton: Align images left, center, or right
• TableButton: Insert and manipulate tables with various actions
• DragHandle: Visual drag handle for reordering content
• Reusable & Exportable: All components designed for import into other applications
• TypeScript Support: Full type safety with TypeScript

Getting Started

Install dependencies and run the development server:

npm install
npm run dev

Open http://localhost:3000 to see the editor.

SCSS Support

Important: The Tiptap Simple Editor template uses SCSS files for styling. Your target project needs SCSS support to use the SimpleEditor component.

Our Custom Components (CSS only):

• table-node.css - Table styling (converted to CSS)
• table-menu.css - Table menu styling (converted to CSS)

Tiptap Template Files (require SCSS):

• All other .scss files in tiptap-node/, tiptap-ui/, and tiptap-ui-primitive/ directories

Options for projects without SCSS:

1. Add SCSS support to your build pipeline (recommended)
2. Use only our custom components (TiptapEditor, TableButton, TableMenu, etc.)
3. Pre-compile SCSS to CSS before importing

Using Components in Other Applications

All components are exported and can be imported into other applications.

SimpleEditor (Recommended)

import { SimpleEditor } from 'editor/components';

export default function MyPage() {
  return <SimpleEditor />;
}

Custom Components

DeleteNodeButton

import { DeleteNodeButton } from 'editor/components';
import { EditorContext } from '@tiptap/react';

<EditorContext.Provider value={{ editor }}>
  <DeleteNodeButton />
</EditorContext.Provider>

ImageAlignButton

import { ImageAlignButton } from 'editor/components';

<ImageAlignButton align="left" />
<ImageAlignButton align="center" />
<ImageAlignButton align="right" />

Props:

• align: 'left' | 'center' | 'right' - Image alignment
• className (optional): Additional CSS classes

TableButton

import { TableButton } from 'editor/components';

<TableButton action="insertTable" label="Insert Table" />
<TableButton action="addRowAfter" />
<TableButton action="deleteColumn" />

Props:

• action: Table operation to perform
  • 'insertTable' - Insert a new 3x3 table
  • 'deleteTable' - Remove the current table
  • 'addColumnBefore' / 'addColumnAfter' - Add columns
  • 'deleteColumn' - Remove current column
  • 'addRowBefore' / 'addRowAfter' - Add rows
  • 'deleteRow' - Remove current row
  • 'mergeCells' / 'splitCell' - Merge or split cells
• label (optional): Custom button label
• className (optional): Additional CSS classes

DragHandle

import { DragHandle } from 'editor/components';

<DragHandle />

Props:

• className (optional): Additional CSS classes

Legacy TiptapEditor

import { TiptapEditor } from 'editor/components';
import { useState } from 'react';

export default function MyPage() {
  const [content, setContent] = useState('<p>Initial content</p>');

  return (
    <TiptapEditor
      content={content}
      onChange={(newContent) => setContent(newContent)}
      editable={true}
      className="my-custom-class"
    />
  );
}

Props:

• content (string, optional): Initial HTML content
• onChange (function, optional): Callback fired when content changes
• editable (boolean, optional): Whether the editor is editable (default: true)
• className (string, optional): Additional CSS classes

Project Structure

├── app/
│   ├── page.tsx          # Main page rendering the editor
│   └── globals.css       # Global styles
├── components/
│   ├── TiptapEditor.tsx  # Reusable Tiptap editor component
│   └── index.ts          # Component exports
└── package.json          # Package configuration with exports

Technologies

• Next.js 16
• React 19
• Tiptap
• TypeScript
• Tailwind CSS