Yoopta Editor: мощный headless rich-text редактор для React с 20+ плагинами и AI

TL;DR: Yoopta Editor — это headless rich-text редактор для React с гибкой архитектурой плагинов, поддержкой AI, drag & drop, реального времени коллаборации и экспорта. Он позволяет создавать сложные редакторы, CMS и даже конструкторы сайтов.

Введение: почему Yoopta Editor?

Rich-text редакторы — это must-have инструмент для современных веб-приложений, будь то блоги, CMS или конструкторы сайтов. Однако создание гибкого и производительного редактора с нуля — сложная задача. Yoopta Editor предлагает готовое решение с открытым исходным кодом, которое сочетает мощь плагинов, AI и коллаборации.

Основная часть: ключевые возможности

Архитектура плагинов

Yoopta Editor построен на плагинах, что делает его гибким и расширяемым. Встроенные плагины включают:

Параграфы, заголовки, списки, таблицы
Код с подсветкой синтаксиса
Изображения, встраиваемые элементы
Аккордеоны, вкладки, шаги

Пример подключения плагинов:

import { YooptaEditor } from '@yoopta/editor';

const plugins = [
  ParagraphPlugin,
  HeadingPlugin,
  ListPlugin,
  CodePlugin,
  ImagePlugin,
];

function App() {
  return <YooptaEditor plugins={plugins} />;
}

Headless подход

Yoopta Editor полностью headless, что дает полный контроль над UI. Вы можете использовать предопределенные темы (например, shadcn, Material) или создать собственные.

Коллаборация в реальном времени

С помощью Yjs редактор поддерживает реальное время коллаборацию, включая курсоры других пользователей.

import { YooptaEditor, YjsCollaborationPlugin } from '@yoopta/editor';

function App() {
  return (
    <YooptaEditor
      plugins={[...defaultPlugins, YjsCollaborationPlugin]}
      collaborationOptions={{ roomId: 'unique-room-id' }}
    />
  );
}

Экспорт и поддержка MDX

Редактор поддерживает экспорт в HTML, Markdown, Plain text и Email, а также формат MDX для интеграции с современными статическими генераторами сайтов.

import { exportToHTML } from '@yoopta/editor';

const htmlContent = exportToHTML(editorValue);

AI-агент

В разработке находится AI-агент для управления документами, который будет интегрирован в редактор.

Практическое применение

Пример: конструктор сайтов

Yoopta Editor достаточно гибок для создания конструкторов сайтов. Пример использования drag & drop для добавления секций:

import { YooptaEditor, DragDropPlugin } from '@yoopta/editor';

function CMSBuilder() {
  return (
    <YooptaEditor
      plugins={[...defaultPlugins, DragDropPlugin]}
      dragDropOptions={{
        sections: ['hero', 'nav', 'pricing', 'testimonials', 'footer'],
      }}
    />
  );
}

Пример: Slack-like чат

Редактор можно использовать для создания Slack-like чата с поддержкой упоминаний и форматирования:

import { YooptaEditor, MentionPlugin } from '@yoopta/editor';

function SlackChat() {
  return (
    <YooptaEditor
      plugins={[...defaultPlugins, MentionPlugin]}
      mentionOptions={{
        users: [
          { id: '1', name: 'John Doe' },
          { id: '2', name: 'Jane Smith' },
        ],
      }}
    />
  );
}

Заключение

Yoopta Editor — это современный инструмент для разработчиков, которые хотят интегрировать мощный rich-text редактор в свои приложения. Его гибкость, поддержка плагинов и коллаборации делают его отличным выбором для сложных проектов. Попробуйте Yoopta Editor и поделитесь своим фидбеком!

GitHub: Yoopta Editor
Примеры: Yoopta Examples
Документация: Yoopta Docs

Источник: https://www.reddit.com/r/reactjs/comments/1rkjvo8/i_built_an_opensource_richtext_editor_for_react/