Екстремальне кастомізування Strapi 5: інтеграція Quill та мультиорендна архітектура

У вересні 2025 року реліз «Strapi 5» приніс важливі оновлення для розробників. Завдяки повному розриву зі структурами даних Strapi 4, він представив кардинальні зміни, перероблені мультимовні API та покращення продуктивності. Хоча система стала простішим і потужнішим інструментом, деякі налаштування за замовчуванням залишали простір для вдосконалення.

Зокрема, стандартний редактор «Blocks» (на базі Lexical) є сучасним, але йому бракує розширених інструментів редагування таблиць та оформлення тексту, які часто потрібні для створення складного дизайну макетів. За замовчуванням він не міг створити навіть просту таблицю. Хоча межі таблиць менш поширені в західному дизайні, вони необхідні в Японії для створення структурованих сторінок, які легко читати.

Крім того, у Strapi 5 відсутня вбудована мультиорендність (multi-tenancy). Ви можете запускати окремі контейнери для кожної організації, але підтримка виділеної бази даних PostgreSQL для кожного орендаря коштує дорого. Щоб досягти економічно вигідної мультиоренди, я налаштував бекенд. Ось як я модифікував середовище Strapi 5 для блогу «kuro.boo» для забезпечення зручної роботи та високої ефективності управління.

1. Вирішення проблем із японським введенням (IME)

Strapi побудований на React, що зумовлює певні особливості поведінки інтерфейсу. Головний редактор у Strapi 5 мав невеликі проблеми з обробкою подій японського IME, через що курсор стрибав під час введення тексту. Я спробував три різні IME на macOS — стандартний від Apple, Google Japanese Input та Kawasemi — але проблеми з курсором не зникли, оскільки редактор перехоплював непотрібні події клавіш. Спочатку мені доводилося писати статті в зовнішніх редакторах, таких як Zed, і копіювати їх. Це було занадто втомливо.

2. Робота з кількома зображеннями

Статті потребують більше, ніж просто текст та обкладинка. Спочатку я спробував наступний плагін:

TipTap

TipTap популярний і підтримує кілька зображень, но його впровадження вимагало додавання окремих блоків введення для кожного окремого зображення та абзацу тексту. Це виглядало застарілим і далеким від справжнього досвіду WYSIWYG, через що я сумував за зручними інструментами розмітки Dropbox Paper (яким я часто користуюся).

3. Перехід на Quill

Оскільки Lexical та TipTap не підійшли під мої потреби, я звернув увагу на Quill. З випуском версії v2 Quill пропонує чудову гнучкість. Його функції WYSIWYG виглядали перспективно, але все ще бракувало вбудованої підтримки складних таблиць. Щоб виправити це, я інтегрував «quill-better-table» (після дня налагодження). Цей плагін дозволяє додавати/видаляти рядки та стовпці правою кнопкою миші, об'єднувати клітинки та налаштовувати стиль клітинок безпосередньо всередині панелі адміністратора Strapi. Важливо, що ці таблиці зберігаються як стандартний HTML, що дозволяє легко рендерити їх у фронтенді Astro.

Це вирішило проблеми з редагуванням таблиць та введенням IME, надавши нам високофункціональну панель редактора WYSIWYG всередині Strapi:

4. Додавання завантаження зображень перетягуванням

Щоб полегшити процес написання текстів, я додав функцію drag-and-drop: перетягування зображення або його вставка з буфера обміну автоматично запускає API завантаження Strapi, реєструючи його в медіабібліотеці та вставляючи в редактор. (Примітка: оскільки перетягування не показує детальних повідомлень про помилки для занадто великих файлів, нам все одно доводиться стежити за лімітами розміру файлів).

5. Мультиорендність на основі схем

Для керування кількома сайтами в одному екземплярі Strapi без запуску окремих контейнерів баз даних я реалізував перемикання схем баз даних (DATABASE_SCHEMA) в межах одного екземпляра бази даних. Це дозволяє утримувати низькі витрати на базу даних, зберігаючи при цьому ізольовані та безпечні середовища для кожного орендаря.

6. Локальний робочий процес генерації статичних сайтів (SSG)

Хоча робота сервера CMS у режимі 24/7 є ідеальною для команд, це створює непотрібні витрати та ризики безпеки для персональних блогів або сайтів із рідкісними оновленнями. Тому я змінив архітектуру розгортання:

1. Запускайте локальний екземпляр Strapi лише під час написання або редагування.
2. Запускайте збірку для розробки, яка компілює контент Strapi у статичні сторінки Astro, копіюючи зображення в папку збірки та оновлюючи посилання на зображення.
3. Зупиняйте локальний екземпляр Strapi та розгортайте повністю статичний сайт на Cloudflare Pages.

Така конфігурація означає, що наш публічний сайт повністю розміщений на периферійній мережі Cloudflare. Він завантажується надзвичайно швидко, нічого не коштує для хостингу та усуває ризики безпеки публічних баз даних. На kuro.boo я тримаю локальний екземпляр Strapi запущеним на своїй локальній машині для зручності, оскільки це не вимагає плати за хостинг.

Порівняння стандартних та кастомних налаштувань:

Висновок

Я також усунув невелику помилку, коли будь-яке дрібне редагування оновлювало дату публікації статті, виштовхуючи старіші публікації вгору стрічки. Я додав виділене поле `publishedAt` і налаштував сортування за ним. Хоча зміна вихідного коду Strapi 5 безпосередньо може ускладнити майбутні оновлення, саме такий рівень кастомізації робить headless CMS платформи настільки потужними. Це дозволило мені створити середовище редагування, розроблене точно під мої потреби.

Джерела :

・Документація Strapi 5

・Quill - Редактор форматованого тексту

・quill-table-better (GitHub)