Виявилося, мені також потрібно створити KuroEditor (Сльози) Vol. 1
product Technology OSS

Виявилося, мені також потрібно створити KuroEditor (Сльози) Vol. 1

Під час розробки headless CMS, яка дозволяє легко створювати дизайн без ПК, я усвідомив річ: відповідних редакторів для KuroCMS немає лол.

Зачекайте, немає редактора?!

Десь на половині розробки KuroCMS Курото раптом згадав, скільки зусиль і часу пішло на налаштування пристойного редактора в Strapi, і заціпенів. Якби моє волосся посивіло, я міг би стати пандовим кроликом.

Хоча ті редактори не підходили для Strapi, я почав досліджувати ринок сподіваючись знайти редактор, який задовольняв би мої вимоги деінде... але не зміг знайти жодного. Не може бути, скажи, що це неправда, Чаппі! (ChatGPT)


Пошук виключно під ліцензією MIT

Оскільки я планував упакувати його та розповсюджувати разом із KuroCMS, редактор із ліцензією MIT був очевидно найзручнішим варіантом.

Згідно з дослідженнями, нинішній тренд серед веб-редакторів повністю домінує headless-варіантами — коли ви запозичуєте лише логіку, а інтерфейс користувача будуєте самі. Так само, як і в headless CMS.


5 найкращих редакторів світу за рейтингом


【TipTap】

  1. За повідомленнями, беззаперечний номер один. Надзвичайно гнучкий, підтримує React/Vue та виводить HTML / JSON.
  2. Headless-редактор. Ви можете повністю узгодити дизайн кнопок і макети панелей інструментів із інтерфейсом вашого застосунку. Побудований на базі потужного рушія ProseMirror.
  3. База користувачів: понад 37 тисяч зірок на GitHub та понад 8 мільйонів завантажень щотижня. Практично світовий стандарт.
  4. Як інтегрувати: встановіть за допомогою `npm install @tiptap/react` і керуйте за допомогою хука `useEditor`.


【Editor.js】

  1. Захоплена база шанувальників, за відгуками, інтуїтивно зрозумілий із відчуттям схожості на Notion, на основі плагінів, виводить JSON (структуровані дані).
  2. Особливості: розглядає все як блок (абзаци, зображення, заголовки). Схоже відчуття від використання, як і в Notion.
  3. Виводить чистий JSON замість HTML, що робить його ідеальним для відображення тих самих даних на веб-сайтах, у мобільних додатках, смарт-годинниках тощо.
  4. Як інтегрувати: завантажте основний пакет та окремі інструменти (Image, Header тощо) окремо, а потім ініціалізуйте за допомогою `new EditorJS()`.


【Lexical】

  1. Швидко зростає, швидкий, легкий, надійний, створений компанією Meta, орієнтований на дизайн, виводить HTML / JSON.
  2. Спеціалізується на продуктивності та доступності. Надзвичайно легкий, що забезпечує високу швидкість роботи навіть масштабних застосунків.
  3. База користувачів: стрімко зростає. Добре працює з контентом, створеним ШІ, і його часто обирають для текстових редакторів із ШІ.
  4. Особливості: пропонує вдосконалене керування станом і деревоподібну модель даних. Повністю відповідає стандартам доступності WCAG.
  5. Як інтегрувати: інтегруйте як плагін React. Визначте іменовані вузли ("nodes") для створення редактора.


【Slate】 (Найпотужніший фреймворк виключно для React)

  1. Створений для розробників, абсолютна кастомізація, тільки для React, виводить JSON (довільний).
  2. Особливості: це скоріше бібліотека для створення редакторів, ніж сам редактор. Ви можете повністю визначити власну модель документа.
  3. База користувачів: сильна підтримка в спільноті React (понад 31 тисяча зірок на GitHub).
  4. Особливості: чудово справляється з документами зі складною вкладеною структурою (наприклад, списки всередині таблиць, зображення всередині списків).
  5. Як інтегрувати: створюйте за допомогою компонентно-орієнтованого підходу. Пишіть власні функції, такі як `renderElement`, для керування рендерингом.


【Milkdown】 (WYSIWYG, спеціалізований на Markdown)

  1. Ефективний у специфічних сценаріях використання | Поєднує Markdown із візуальним керуванням | Рівень складності від низького до середнього | Виводить Markdown / HTML
  2. Особливості: забезпечує досвід роботи, схожий на Typora, де Markdown форматується в реальному часі під час написання.
  3. База користувачів: спеціалізована для розробників і технічної документації.
  4. Особливості: потужні розширення Markdown за допомогою плагінів. Підтримує математичні символи (LaTeX) та діаграми (Mermaid).
  5. Як інтегрувати: створений за допомогою TypeScript; ініціалізуйте, передаючи необхідні плагіни в масиві.


Тож як щодо цієї п'ятірки?

Я пробував використовувати TipTap і Lexical як редактори для Strapi, але з цього нічого не вийшло... Lexical не працював із зображеннями належним чином, а у TipTap також виникали проблеми. Жоден із них не наблизився до WYSIWYG (що означає можливість редагування в редакторі саме в тому вигляді, в якому воно відображатиметься в кінцевому результаті), якого хотів Курото. Editor.js був практично тим самим; редактор, що працює лише з JSON, не може забезпечити справжній WYSIWYG. Вони можуть підійти, якщо ви просто безперервно вводите текст і код. Що стосується Milkdown, то там навіть не згадуються зображення — з таким же успіхом можна використовувати LaTeX. І якщо чесно, Курото дуже не любить React. Перепрошую перед Meta (піт). У крайньому разі я міг би використати Vue, якщо фреймворк необхідний, але я повністю за Astro! Якщо подумати, колись була манга під назвою Astro Kyudan.

Зрештою, я згадав, що Quill + better-table, який я використовував у Strapi, був найкращим варіантом. Однак я просто не міг змиритися з реалізацією таблиць лол. Саме тоді маленький диявол у моїй голові сказав: "Якщо ти збираєшся так сильно скаржитися, створи його сам!" Дійсно, ви маєте рацію. Мої вибачення.


І ось розпочалася розробка KuroEditor

Мені не потрібен був високопродуктивний редактор. Я просто хотів WYSIWYG та інструмент для роботи з таблицями, яким можна користуватися без стресу, схожий на Dropbox Paper! Рухомий цим внутрішнім криком, я вирішив створити його сам. Деталями про редактор, який зробив Курото, я поділюся в наступній статті. Він майже готовий, і як тільки я закінчу тестування під час написання цих статей та організую репозиторій для GitHub, я опублікую його.