Реалізація Markdown-редактора на сайті

Реалізація Markdown-редактора

Markdown-редактор дозволяє користувачам створювати форматований контент без складності WYSIWYG. Популярні варіанти: CodeMirror + marked.js, TipTap з розширеннями Markdown, @uiw/react-md-editor.

@uiw/react-md-editor: швидкий старт

import MDEditor from '@uiw/react-md-editor';
import { useState } from 'react';

function MarkdownEditor({ initialValue = '', onChange }: EditorProps) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (val?: string) => {
    const markdown = val ?? '';
    setValue(markdown);
    onChange?.(markdown);
  };

  return (
    <MDEditor
      value={value}
      onChange={handleChange}
      height={400}
      preview="live"
      hideToolbar={false}
      commands={[
        MDEditor.commands.bold,
        MDEditor.commands.italic,
        MDEditor.commands.title,
        MDEditor.commands.divider,
        MDEditor.commands.link,
        MDEditor.commands.image,
        MDEditor.commands.code,
        MDEditor.commands.codeBlock,
        MDEditor.commands.divider,
        MDEditor.commands.fullscreen,
      ]}
    />
  );
}

CodeMirror 6 + marked.js: кастомна реалізація

import { EditorView, basicSetup } from 'codemirror';
import { markdown } from '@codemirror/lang-markdown';
import { oneDark } from '@codemirror/theme-one-dark';
import { marked } from 'marked';
import DOMPurify from 'dompurify';

function createMarkdownEditor(container: HTMLElement, previewContainer: HTMLElement) {
  const view = new EditorView({
    doc: '',
    extensions: [
      basicSetup,
      markdown(),
      oneDark,
      EditorView.updateListener.of(update => {
        if (update.docChanged) {
          const markdown = update.state.doc.toString();
          const html = marked(markdown, { breaks: true, gfm: true });
          previewContainer.innerHTML = DOMPurify.sanitize(html as string);
        }
      }),
    ],
    parent: container,
  });

  return view;
}

Завантаження зображень з редактора

// Кастомна команда для вставки зображення з завантаженням
import * as commands from '@uiw/react-md-editor/commands';

const imageUploadCommand: commands.ICommand = {
  name: 'upload-image',
  keyCommand: 'upload-image',
  buttonProps: { 'aria-label': 'Завантажити зображення' },
  icon: <ImageIcon />,
  execute: async (state, api) => {
    const file = await openFilePicker(['image/jpeg', 'image/png', 'image/webp']);
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    const { data } = await api.post('/api/media/upload', formData);

    const imageMarkdown = `![${file.name}](${data.url})`;
    api.replaceSelection(imageMarkdown);
  },
};

async function openFilePicker(accept: string[]): Promise<File | null> {
  return new Promise(resolve => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = accept.join(',');
    input.onchange = () => resolve(input.files?.[0] ?? null);
    input.click();
  });
}

Серверна обробка: sanitization

use League\CommonMark\CommonMarkConverter;
use League\HTMLToMarkdown\HtmlConverter;

class MarkdownService
{
    private CommonMarkConverter $converter;

    public function __construct()
    {
        $this->converter = new CommonMarkConverter([
            'html_input'         => 'strip',   // видалити сирий HTML
            'allow_unsafe_links' => false,
            'max_nesting_level'  => 5,
        ]);
    }

    public function toHtml(string $markdown): string
    {
        return $this->converter->convert($markdown)->getContent();
    }

    public function sanitize(string $markdown): string
    {
        // Видалити потенційно небезпечні конструкції
        $markdown = preg_replace('/\[([^\]]+)\]\(javascript:[^)]+\)/', '[$1]', $markdown);
        return strip_tags($markdown);  // очистити якщо попав HTML
    }
}

Зберігання: Markdown vs HTML

Зберігати оригінальний Markdown (для редагування) та рендерити в HTML при відображенні. Кешувати HTML у полі body_html або в Redis.

// Модель статті
class Article extends Model
{
    protected static function booted(): void
    {
        static::saving(function (Article $article) {
            if ($article->isDirty('body_markdown')) {
                $article->body_html = app(MarkdownService::class)
                    ->toHtml($article->body_markdown);
            }
        });
    }
}

Терміни реалізації

@uiw/react-md-editor з завантаженням зображень та серверним sanitization: 2–3 дні. Кастомний редактор на CodeMirror з live-preview та синтаксичними розширеннями: 3–5 днів.