リッチテキストエディタ（Tiptap）

用途

Notion風リッチテキストエディタ。見出し・リスト・リンク・画像対応。

特徴

• Markdown互換
• 画像貼付け
• スラッシュコマンド
• コラボレーション対応

コード（コピペ用）

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

export function RichEditor({ value, onChange }: { value: string; onChange: (html: string) => void }) {
  const editor = useEditor({
    extensions: [StarterKit],
    content: value,
    onUpdate: ({ editor }) => onChange(editor.getHTML()),
  });

  return (
    <div>
      <button onClick={() => editor?.chain().focus().toggleBold().run()}>B</button>
      <button onClick={() => editor?.chain().focus().toggleItalic().run()}>I</button>
      <button onClick={() => editor?.chain().focus().toggleBulletList().run()}>•</button>
      <EditorContent editor={editor} />
    </div>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加