Реалізація WYSIWYG-редактора для користувацького контенту на сайті

Реалізація WYSIWYG-редактора для користувацького контенту на сайті

Коли користувачі публікують відгуки, коментарі, пости або статті з форматуванням — потрібен редактор, який вони зможуть освоїти без інструкцій. Задача ускладнюється: контент має бути безпечним на виході, форматування — передбачуваним, а редактор — не гальмувати сторінку.

Виріб редактора

Для користувацького контенту підходять три варіанти залежно від вимог:

Quill — простий, ~200 KB, delta-формат. Хорош для коментарів та коротких текстів з базовим форматуванням.

TipTap (на основі ProseMirror) — розширюваний, TypeScript-first, багата екосистема розширень. Підходить для статей, документів.

Lexical (Meta) — найбільш продуктивний, tree-based, добре працює з React 18 concurrent mode.

Приклад з TipTap як найбільш збалансованим виборі для користувацького контенту:

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-link @tiptap/extension-placeholder

Компонент редактора

// components/UserEditor.tsx
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import Placeholder from '@tiptap/extension-placeholder'
import { useCallback } from 'react'

interface UserEditorProps {
  initialContent?: string
  onChange: (html: string) => void
  maxLength?: number
}

export function UserEditor({ initialContent, onChange, maxLength = 10000 }: UserEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3] }, // не даємо h1 користувачам
        codeBlock: false,            // відключаємо блоки коду
        horizontalRule: false,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          rel: 'nofollow noopener noreferrer',
          target: '_blank',
        },
        validate: href => /^https?:\/\//.test(href), // тільки https/http
      }),
      Image.configure({
        allowBase64: false,
        HTMLAttributes: { loading: 'lazy' },
      }),
      Placeholder.configure({
        placeholder: 'Напишіть що-небудь...',
      }),
    ],
    content: initialContent,
    onUpdate: ({ editor }) => {
      const html = editor.getHTML()
      if (html.length <= maxLength) {
        onChange(html)
      }
    },
  })

  const addLink = useCallback(() => {
    const url = window.prompt('URL:')
    if (url) editor?.chain().focus().setLink({ href: url }).run()
  }, [editor])

  if (!editor) return null

  return (
    <div className="border rounded-lg overflow-hidden">
      <div className="flex gap-1 p-2 border-b bg-gray-50 flex-wrap">
        <ToolbarButton
          active={editor.isActive('bold')}
          onClick={() => editor.chain().focus().toggleBold().run()}
          title="Жирний"
        >B</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('italic')}
          onClick={() => editor.chain().focus().toggleItalic().run()}
          title="Курсив"
        >I</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('bulletList')}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          title="Список"
        >•</ToolbarButton>
        <ToolbarButton
          active={editor.isActive('link')}
          onClick={addLink}
          title="Ссилка"
        >🔗</ToolbarButton>
      </div>
      <EditorContent
        editor={editor}
        className="prose max-w-none p-4 min-h-[150px] focus:outline-none"
      />
      {maxLength && (
        <div className="text-xs text-gray-400 px-4 py-1 border-t text-right">
          {editor.storage.characterCount?.characters?.() ?? 0} / {maxLength}
        </div>
      )}
    </div>
  )
}

Санітизація на сервері

Ніколи не зберігайте та не рендеріть HTML від користувача без очистки. Навіть якщо редактор обмежує теги на фронтенді — прямий POST до API обходить це:

// lib/sanitize.ts
import DOMPurify from 'isomorphic-dompurify'

const ALLOWED_TAGS = [
  'p', 'br', 'strong', 'em', 'u', 's',
  'h2', 'h3', 'ul', 'ol', 'li', 'blockquote',
  'a', 'img',
]

const ALLOWED_ATTR = ['href', 'src', 'alt', 'loading', 'rel', 'target', 'class']

export function sanitizeUserHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS,
    ALLOWED_ATTR,
    // Видаляємо data: URI в src
    FORBID_ATTR: ['style', 'onerror', 'onload'],
    // Принудово додаємо rel для ссилок
    ADD_ATTR: ['rel'],
    FORCE_BODY: false,
  })
}

// В API роуте
export async function POST(request: Request) {
  const { content } = await request.json()
  const clean = sanitizeUserHtml(content)
  await db.post.create({ data: { content: clean, authorId: session.user.id } })
  return Response.json({ success: true })
}

Загрузка зображень

Користувачі захочуть вставляти картинки. Потрібен endpoint загрузки з перевірками:

// app/api/upload/route.ts
import sharp from 'sharp'
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const s3 = new S3Client({ region: process.env.AWS_REGION })

export async function POST(request: Request) {
  const form = await request.formData()
  const file = form.get('file') as File

  if (!file) return new Response('No file', { status: 400 })
  if (file.size > 5 * 1024 * 1024) return new Response('Too large', { status: 413 })
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) {
    return new Response('Invalid type', { status: 415 })
  }

  const buffer = Buffer.from(await file.arrayBuffer())

  // Оптимізуємо через sharp
  const optimized = await sharp(buffer)
    .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
    .webp({ quality: 80 })
    .toBuffer()

  const key = `user-uploads/${Date.now()}-${crypto.randomUUID()}.webp`
  await s3.send(new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    Body: optimized,
    ContentType: 'image/webp',
    CacheControl: 'public, max-age=31536000, immutable',
  }))

  return Response.json({ url: `${process.env.CDN_URL}/${key}` })
}

В редакторі підключаємо завантажувач:

Image.configure({
  uploadFn: async (file: File) => {
    const form = new FormData()
    form.append('file', file)
    const res = await fetch('/api/upload', { method: 'POST', body: form })
    const { url } = await res.json()
    return url
  },
})

Рендеринг збереженого HTML

// components/UserContent.tsx
import DOMPurify from 'isomorphic-dompurify'

// Повторно санітизуємо при рендере — на випадок якщо дані старі
export function UserContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR })

  return (
    <div
      className="prose prose-sm max-w-none
        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
        prose-img:rounded-lg prose-img:mx-auto"
      dangerouslySetInnerHTML={{ __html: clean }}
    />
  )
}

Модерація контенту

Якщо сайт публічний — автоматична перевірка перед показом:

// Простенька перевірка на спам-ссилки
function hasSpamLinks(html: string, maxLinks = 3): boolean {
  const matches = html.match(/<a\s/gi)
  return (matches?.length ?? 0) > maxLinks
}

// Або через OpenAI Moderation API
async function moderateContent(text: string): Promise<boolean> {
  const res = await openai.moderations.create({ input: text })
  return !res.results[0].flagged
}

Терміни

Базовий редактор з санітизацією та збереженням: 2–3 дні. З загрузкою зображень, оптимізацією через sharp, CDN: +2 дні. Автоматична модерація: +1 день.