Quill в Next.js App Router, editor, autosave и HTML viewer с подсветкой кода
A WYSIWYG editor in the Next.js App Router touches several layers of the application. Quill works with the DOM and browser APIs, so the editor itself runs on the client. Content should be stored separately from the Quill instance, passed into the component when the entity changes, saved to the server, and then shown without the toolbar or edit mode. If Quill output is stored as HTML, the editor and viewer can work with a single contentHtml string.
WYSIWYG-редактор в Next.js App Router затрагивает несколько слоев приложения. Quill работает с DOM и browser API, поэтому сам редактор живет на клиенте. Контент нужно хранить отдельно от экземпляра Quill, передавать в компонент при смене сущности, сохранять на сервер и затем показывать без toolbar и режима редактирования. Если хранить результат Quill как HTML, редактор и viewer могут работать с одной строкой contentHtml . Editor меняет HTML через onChange . Autosave отправляет новую версию после паузы во вводе. Viewer получает сохраненный HTML и отдельно обрабатывает элементы, которые Quill использует для code blocks. Для подсветки кода добавляется highlight.js. Читать далее