Lexxy — Свежий взгляд на rich text редакторы в Rails

Знакома ли вам ситуация, когда стандартный rich text редактор в вашем Rails-приложении кажется немного... устаревшим? Возможно, вы любите Action Text за его простоту, но чувствуете, что Trix уже не справляется с современными требованиями к интерактивности, кастомизации и удобству для пользователя. В мире, где ожидания от веб-интерфейсов постоянно растут, хочется чего-то более гибкого, мощного и эстетичного. И вот тут на сцену выходит Lexxy – совершенно новый редактор от команды Basecamp, создателей самого Rails, который обещает вдохнуть новую жизнь в работу с контентом.

Что такое Lexxy и кому он нужен?

Lexxy – это современный rich text редактор, специально разработанный для экосистемы Rails. Его главная особенность и, пожалуй, самое сильное преимущество – это то, что он построен на базе Lexical, мощного и производительного фреймворка для текстовых редакторов от Meta. Да-да, той самой Meta! Это сразу намекает на серьезный подход к архитектуре и возможностям.

Кому же пригодится Lexxy? В первую очередь, это Rails-разработчики, которые:

Ищут замену Trix в Action Text, желая получить больше функционала и гибкости.
Ценят хорошую HTML-семантику и чистый код.
Хотят предложить своим пользователям более продвинутый и интуитивно понятный опыт редактирования.
Нуждаются в таких фичах, как Markdown-поддержка, синтаксическая подсветка кода, умные @упоминания или /команды, и превью вложений.

Lexxy призван сделать работу с контентом в Rails-приложениях не просто функциональной, но и по-настоящему приятной.

Ключевые возможности: Взгляд изнутри

Давайте погрузимся в то, что делает Lexxy таким интересным.

Мощь Lexical под капотом

Как я уже упомянул, основа Lexxy – это Lexical. Что это значит для нас? Это означает, что редактор изначально спроектирован с учетом производительности, доступности и расширяемости. Это не просто "еще один" редактор, а решение, стоящее на плечах гиганта, с потенциалом к быстрому развитию и поддержке. Вы получаете не просто набор фич, а надежный фундамент.

Удобство для пользователя и разработчика: Markdown, код и ссылки

Lexxy сразу радует приятными мелочами, которые значительно улучшают UX:

Markdown-поддержка: Забудьте о постоянном переключении между мышкой и клавиатурой. Lexxy понимает Markdown-сокращения и даже автоматически форматирует текст при вставке. Писать статьи, комментарии или сообщения становится гораздо быстрее.
Синтаксическая подсветка кода в реальном времени: О, это просто бальзам на душу для любого, кто хоть раз вставлял код в rich text редактор! Lexxy подсвечивает синтаксис прямо в процессе набора, делая код читаемым и аккуратным. Больше никаких серых текстовых блоков, где ничего не разобрать.
Правильная HTML-семантика: Разработчики Basecamp позаботились о том, чтобы параграфы были настоящими тегами <p>, а не нагромождением <div>. Это важно для доступности, SEO и просто для чистоты кода.
Удобное создание ссылок: Просто выделите текст и вставьте URL – Lexxy сам превратит его в ссылку. Мелочь, а приятно.

Интерактивность на новом уровне: Промпты и вложения

Вот где Lexxy по-настоящему начинает сиять, предлагая то, чего так часто не хватает в других редакторах:

Настраиваемые промпты (Prompts): Представьте, что вы пишете сообщение и хотите упомянуть коллегу, набрав @имя. Или вызвать команду, набрав /command. Lexxy позволяет легко реализовать такие сценарии. Промпты могут загружать данные как локально, так и удаленно, а выбранные элементы могут быть вставлены как кастомные вложения Action Text (сохраняя всю мощь серверной обработки) или как обычный редактируемый HTML. Это открывает огромные возможности для создания интерактивных интерфейсов.
```
<%= form.rich_text_area :body do %>
  <lexxy-prompt trigger="@" name="mention">
    <%= render partial: "people/prompt_item", collection: Person.all, as: :person %>
  </lexxy-prompt>
<% end %>
```
Это всего лишь один пример, как вы можете настроить промпт для упоминаний. Гибкость здесь поражает!
Превью вложений: Вставляете PDF или видео? Lexxy покажет их превью прямо в редакторе. Это значительно улучшает опыт пользователя, позволяя сразу видеть, что именно он вставляет.
Бесшовная работа с Action Text: Для тех, кто уже использует Action Text, Lexxy – это просто находка. Он генерирует тот же канонический HTML-формат для вложений, что и Action Text, обеспечивая полную совместимость. Вы можете даже настроить его так, чтобы form.rich_text_area по умолчанию использовал Lexxy вместо Trix, или же использовать оба редактора параллельно.

Lexxy editor screenshot Вот так выглядит Lexxy в действии. Обратите внимание на подсветку кода и аккуратный интерфейс.

Кастомизация и гибкость

Lexxy не навязывает вам свой стиль. Все его цветовые стили определены через CSS-переменные, что делает кастомизацию под ваш бренд или реализацию темной темы невероятно простой.

/* Пример кастомизации переменных в вашем CSS */
:root {
  --lexxy-primary-color: #6366f1; /* Фиолетовый */
  --lexxy-text-color: #1f2937; /* Темно-серый */
  /* ...и другие переменные */
}

Кроме того, редактор генерирует ряд событий (lexxy:initialize, lexxy:change, lexxy:insert-link), к которым вы можете привязать свою логику, например, для реализации "разворачивания" ссылок (link unfurling), как показано в README.

Технические детали: Как это работает под капотом?

Lexxy – это гем для Rails, который легко интегрируется в ваше приложение. Вы можете использовать его с import maps или с любым JavaScript-бандлером (webpack, esbuild).

# Gemfile
gem 'lexxy', '~> 0.1.23.beta'

Интересно, что Lexxy использует ElementInternals API, чтобы вести себя как полноценный HTML-контрол в формах. Это значит, что вы можете использовать стандартные HTML-атрибуты, такие как name, value, required, disabled, прямо на элементе <lexxy-editor>. Это делает его предсказуемым и удобным для работы с формами.

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

Inline loading: Все элементы промпта рендерятся сразу внутри <lexxy-prompt>. Отлично подходит для небольших наборов данных.
Remote loading: Элементы загружаются с удаленного эндпоинта. Здесь есть два подварианта:
- Загрузить все элементы один раз и фильтровать на клиенте.
- Включить remote-filtering, чтобы каждый раз отправлять запрос на сервер для фильтрации по мере ввода пользователя. Это идеальный вариант для очень больших или динамических наборов данных.

Практическое применение: Где Lexxy раскроет свой потенциал?

Lexxy может стать отличным выбором для широкого круга Rails-приложений:

Блоги и CMS: Создание статей с красивым форматированием, вставкой кода и медиа.
Форумы и комментарии: Удобные упоминания пользователей, форматирование сообщений.
Внутренние инструменты и админ-панели: Создание богатого контента для внутренних документов, описаний продуктов.
Образовательные платформы: Интерактивные задания, где важна подсветка кода и вставка медиа.

По сути, любое Rails-приложение, где пользователи активно работают с текстовым контентом и где нужен современный, функциональный и расширяемый редактор, найдет в Lexxy мощного союзника.

Выводы: Стоит ли попробовать?

Lexxy находится на стадии ранней беты, и это важно учитывать. Команда Basecamp честно предупреждает об этом, но при этом активно развивает проект, и его дорожная карта выглядит очень многообещающей (таблицы, галереи изображений, отдельный JS-пакет для не-Rails проектов!).

Если вы:

Разработчик на Rails.
Ищете замену Trix или просто более современный rich text редактор.
Цените продуманную архитектуру (Lexical!).
Хотите получить гибкий инструмент с поддержкой Markdown, синтаксической подсветки и мощными промптами.
Готовы экспериментировать с бета-версией и, возможно, сообщать об ошибках.

Тогда Lexxy определенно заслуживает вашего внимания! Загляните в репозиторий, попробуйте его в своем тестовом проекте. Возможно, именно он станет тем самым редактором, который вы так долго искали. Мне кажется, у него есть все шансы стать новым стандартом для rich text в Rails.