Сервер и Просмотр в Next.js

Документ приходит с клиента, а клиенту доверять нельзя. Сервер чистит HTML при сохранении теми же правилами, что Редактор, а страница показывает уже чистый Документ серверным RichTextView.

Поправьте HTML слева: <script>, onclick, style, javascript: и чужие теги уходят, текст остаётся, Блок с недопустимым тоном теряет атрибут, а код подсвечивается.

На сервереСкопировать ссылку на раздел

Пример выше чистит в браузере, чтобы было видно результат. В приложении то же самое делает сервер:

"use server";
import { JSDOM } from "jsdom";
import createDOMPurify from "dompurify";
import { sanitizeRichText } from "@olddevs/ui/editor/schema";
import { EDITOR_TOOLS } from "@/editor/tools"; // тот же массив, что в `tools` Редактора

const DOMPurify = createDOMPurify(new JSDOM("").window);

export async function saveArticle(id: string, dirty: string) {
  await db.articles.update(id, { html: sanitizeRichText(dirty, DOMPurify, EDITOR_TOOLS) });
}

import { RichTextView } from "@olddevs/ui/editor";
import { highlightCodeBlocks } from "@olddevs/ui/editor/highlight";
import { EDITOR_TOOLS } from "@/editor/tools";

// Серверный компонент: директива не нужна, Tiptap в браузер не едет.
export default async function ArticlePage({ params }: { params: Promise<{ id: string }> }) {
  const article = await db.articles.get((await params).id);
  return <RichTextView html={highlightCodeBlocks(article.html)} tools={EDITOR_TOOLS} />;
}

Как устроеноСкопировать ссылку на раздел

• Один массив tools у Редактора, очистки и Просмотра. Без третьего аргумента sanitizeRichText срежет свои Блоки.
• @olddevs/ui/editor/schema — лёгкий вход без Tiptap и React. Описание своего Инструмента с загрузчиком Части для движка импортируется на сервере без движка: очистка читает только правила.
• RichTextView HTML не чистит — он показывает то, что сохранено. Чистите при сохранении, а не при показе.
• Подсветка на сервере (highlightCodeBlocks) — в браузер не едут ни lowlight, ни грамматики.
• В Next.js вход @olddevs/ui/editor добавьте в optimizePackageImports своей строкой, иначе с Просмотром в браузер уедет весь Редактор — «Пакет в серверных компонентах».