Replaces basic text input with TipTap v3.19.0 editor. Adds slash commands, interactive tables, mention system, and bidirectional Block[] ↔ TipTap JSON conversion.

Core Integration

• TipTap v3.19.0 with 18 extensions (StarterKit, table suite, text-align, color, highlight, subscript/superscript, emoji, typography)
• Bidirectional converters - convertBlocksToTipTap() / convertTipTapToBlocks() for lossless round-trip
• 4 custom extensions - node alignment, background colors, list normalization, UI state management

Features

• Slash commands - /h1 /table /bullet /todo /code /quote /divider
• Mention system - @note-title for note linking with real-time filtering
• Interactive tables - Add/delete rows/columns, merge cells, alignment controls, drag handles, sort, duplicate
• Custom nodes - Resizable images, stateful todos with checkboxes, asset embeds (image/video/audio)
• Floating toolbar - Context-aware formatting on text selection

Implementation

• Icons - 64 custom SVG components (table ops, alignment, lists, formatting)
• UI components - 53 reusable primitives (buttons, dropdowns, popovers, menus)
• Table suite - 15 components + 7 hooks for comprehensive table editing
• Utilities - Suggestion menu base, floating element positioning (Floating UI)

Usage

import { tiptapEditor } from '@/editor/ui/tiptapEditor';
import { convertBlocksToTipTap, convertTipTapToBlocks } from '@/editor/lib';

// Initialize with blocks
const initialContent = convertBlocksToTipTap(note.blocks);

// Editor updates
<TiptapEditor
  content={initialContent}
  onUpdate={(json) => {
    const blocks = convertTipTapToBlocks(json);
    saveNote({ ...note, blocks });
  }}
/>

Testing & Docs

• 41 tests - 14 E2E (Playwright), 27 unit (converter round-trips, edge cases)
• 7 guides - Architecture, data flow, migration summary, converter API, codebase index

Stats

• 322 files, 42.6k insertions
• 259 TypeScript files
• Zero TS errors, build clean

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.