Migration guide Tiptap 2 → Tiptap 3

Migration guide Tiptap 2 → Tiptap 3 (TipTap 2 → 3 마이그레이션 가이드)

TipTap을 2에서 3으로 올리는 데 도움을 주는 가이드예요. 필수 옵션과 StarterKit, import 경로 변경을 설명해 드릴게요.

출처: 문서

본문

shouldRerenderOnTransaction

useEditor에 shouldRerenderOnTransaction: true를 설정하세요. 활성 컨트롤 하이라이트에 필요해요:

const editor = useEditor({
  shouldRerenderOnTransaction: true,
  // ... other options
});

immediatelyRender

Next.js나 서버 사이드 렌더링이 있는 다른 프레임워크를 쓴다면 immediatelyRender: false로 설정하세요. hydration 불일치를 방지하기 위해 필요해요:

const editor = useEditor({
  immediatelyRender: false,
  // ... other options
});

StarterKit 변경 사항

StarterKit이 이제 underline과 link 확장을 기본 포함해요:

  • underline 확장을 더 이상 수동으로 추가할 필요 없어요
  • Mantine이 제공하는 확장을 사용하려면 기본 link 확장을 비활성화해야 해요
// With tiptap 2.x – ❌ no longer works with tiptap 3.x
import Underline from '@tiptap/extension-underline';
import StarterKit from '@tiptap/starter-kit';
import { Link } from '@mantine/tiptap';

const editor = useEditor({
  extensions: [StarterKit, Underline, Link],
});

// With tiptap 3x – ✅ new usage example
import StarterKit from '@tiptap/starter-kit';
import { Link } from '@mantine/tiptap';

const editor = useEditor({
  // Remove underline and link extensions
  extensions: [StarterKit.configure({ link: false }), Link],
});

Import 경로

플로팅과 버블 메뉴 컴포넌트의 import 경로를 변경하세요:

// With tiptap 2.x – ❌ no longer works with tiptap 3.x
import { BubbleMenu, FloatingMenu } from '@tiptap/react';

// With tiptap 3.x – ✅ new usage example
import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';

더 알아보기 (Learn more)