How to Build a Rich Text Editor with Claude Code

リッチテキストエディタの構築

リッチテキストエディタはCMS、メール作成、ドキュメントEditなど多くのアプリで必要とされますが、一から構築するのは非常に複雑です。Claude Codeを使えば、Tiptapなどのライブラリをベースに、用途に合ったエディタを素早くカスタマイズできます。

Tiptapベースのエディタ構築

> Tiptapを使ったリッチテキストエディタを作って。
> 太字、イタリック、リスト、リンク、画像挿入に対応して。

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
import Image from '@tiptap/extension-image';

function RichTextEditor({ content, onChange }: { content: string; onChange: (html: string) => void }) {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Link.configure({ openOnClick: false }),
      Image.configure({ inline: true }),
    ],
    content,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
  });

  if (!editor) return null;

  return (
    <div className="border rounded-lg overflow-hidden">
      <Toolbar editor={editor} />
      <EditorContent editor={editor} className="prose max-w-none p-4 min-h-[200px]" />
    </div>
  );
}

ツールバーの実装

import { Editor } from '@tiptap/react';

function Toolbar({ editor }: { editor: Editor }) {
  const addLink = () => {
    const url = window.prompt('URLを入力');
    if (url) editor.chain().focus().setLink({ href: url }).run();
  };

  const addImage = () => {
    const url = window.prompt('画像URLを入力');
    if (url) editor.chain().focus().setImage({ src: url }).run();
  };

  return (
    <div className="flex gap-1 p-2 border-b bg-gray-50" role="toolbar" aria-label="書式設定">
      <ToolButton
        active={editor.isActive('bold')}
        onClick={() => editor.chain().focus().toggleBold().run()}
        label="太字"
      >B</ToolButton>
      <ToolButton
        active={editor.isActive('italic')}
        onClick={() => editor.chain().focus().toggleItalic().run()}
        label="斜体"
      >I</ToolButton>
      <ToolButton
        active={editor.isActive('bulletList')}
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        label="箇条書き"
      >•</ToolButton>
      <ToolButton
        active={editor.isActive('orderedList')}
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        label="番号付きリスト"
      >1.</ToolButton>
      <ToolButton onClick={addLink} label="リンク追加" active={editor.isActive('link')}>🔗</ToolButton>
      <ToolButton onClick={addImage} label="画像追加">📷</ToolButton>
    </div>
  );
}

function ToolButton({ active, onClick, label, children }: {
  active?: boolean; onClick: () => void; label: string; children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      aria-pressed={active}
      className={`px-3 py-1 rounded text-sm font-medium ${
        active ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
      }`}
    >{children}</button>
  );
}

カスタムエクステンションの作成

> メンション機能（@ユーザー名）のエクステンションを作って。

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

const Mention = Node.create({
  name: 'mention',
  group: 'inline',
  inline: true,
  selectable: false,
  atom: true,

  addAttributes() {
    return {
      id: { default: null },
      label: { default: null },
    };
  },

  parseHTML() {
    return [{ tag: 'span[data-mention]' }];
  },

  renderHTML({ node, HTMLAttributes }) {
    return ['span', mergeAttributes(HTMLAttributes, {
      'data-mention': '',
      class: 'mention bg-blue-100 text-blue-700 rounded px-1',
    }), `@${node.attrs.label}`];
  },

  addProseMirrorPlugins() {
    return [
      Suggestion({
        editor: this.editor,
        char: '@',
        items: ({ query }) => fetchUsers(query),
        render: () => createSuggestionRenderer(),
      }),
    ];
  },
});

コンテンツのサニタイズ

import DOMPurify from 'dompurify';

function sanitizeContent(html: string): string {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'img', 'h1', 'h2', 'h3', 'blockquote', 'code', 'pre'],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'class', 'target', 'rel'],
  });
}

Zusammenfassung

Claude Codeを使えば、Tiptapをベースとしたリッチテキストエディタの構築から、カスタムエクステンション開発、セキュアなコンテンツ管理まで効率的に実装できます。フォーム設計についてはフォームバリデーションを、マークダウン処理はMarkdown処理の記事を参照してください。

Tiptapの詳細はTiptap公式ドキュメントをご覧ください。