https://github.com/linklib/miniwar

Встала задача добавить к проект создание и редактирование контентной части наиболее простым, но прямо максимально "хорошим" способом. Коряво как-то вышло. Вот так лучше: чтобы без заморочек и классно получилось. Полез искать и таки есть: https://editorjs.io/

"И сразу же вот эту штучку. Если скажете, что это плохо - Вы мой враг на всю жизнь!" (с) Штука показалась мне классной и, на первый взгляд, "безгемморойной".

1. Сначала выяснилось, что нужен кастыль под реакт, но всё уже придумали до нас: https://www.npmjs.com/package/react-editor-js
2. Потом стало понятно, что с next.js и конкретно с SSR штука не дружит. Решение нашлось у самого next.js - https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Идея в том, что создаётся новый компонент и уже его динамическим импортом закидываем на нужную страницу:

И во чтобы дойти до этого мне потребовалось потратить кучу времени. Объяснюсь.

Вообще говоря для эксперимента я использовал базовый пакет + дополнительно @editorjs/simple-image

И вот чтобы я не делал, базовый параграф добавлялся, а вот картинка так и появлялась в редакторе. Вот искал причину, пока не догадался попробовать добавить любой другой элемент: и он встал нормально. Не работает сам плагин @editorjs/simple-image похоже.

На нужной странице импортируем компонент так:

Дальше по плану загрузка картинок и установка редактора по месту дислакации.