Встала задача добавить к проект создание и редактирование контентной части наиболее простым, но прямо максимально "хорошим" способом. Коряво как-то вышло. Вот так лучше: чтобы без заморочек и классно получилось. Полез искать и таки есть: 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
Идея в том, что создаётся новый компонент и уже его динамическим импортом закидываем на нужную страницу:
import { createReactEditorJS } from 'react-editor-js'
import SimpleImage from '@editorjs/simple-image'
import CheckList from '@editorjs/checklist'
import Image from '@editorjs/image'
const ReactEditorJS = createReactEditorJS()
export const CustomEditor = () => {
return (
<ReactEditorJS
tools={{ simpleImage: SimpleImage, checklist: CheckList, image: Image }}
/>
)
}
export default CustomEditor
И во чтобы дойти до этого мне потребовалось потратить кучу времени. Объяснюсь.
Вообще говоря для эксперимента я использовал базовый пакет + дополнительно @editorjs/simple-image
И вот чтобы я не делал, базовый параграф добавлялся, а вот картинка так и появлялась в редакторе. Вот искал причину, пока не догадался попробовать добавить любой другой элемент: и он встал нормально. Не работает сам плагин @editorjs/simple-image похоже.
На нужной странице импортируем компонент так:
import dynamic from 'next/dynamic'
const CustomEditor = dynamic(() => import('src/components/EditorJS'), {
ssr: false,
})
Дальше по плану загрузка картинок и установка редактора по месту дислакации.
Дима, не хочу тебя расстраивать, но под React нормального WYSIWYG с поддержкой SSR просто нет :)
Вот этот вот костыль с import dynamic from 'next/dynamic' приводит к тому, что на сервере этот компонент просто не отрисовывается. То есть он срабатывает только на стороне браузера. То есть если отключить JS, то у тебя будет пустой контент.
Такие дела.
Дорогу осилит идущий. И спасибо: избавил от лишних поисков)