Быстрый старт

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

Ставьте точную версию, без каретки: сайт описывает ровно её.

npm i @olddevs/ui@VERSION

Редактор работает на Tiptap 3: его пакеты — peer-зависимости кита, npm поставит их сам.

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

В CSS приложения обязательны три строки. Tailwind 4 импортирует само приложение, один раз; @source нужен, потому что Tailwind не сканирует node_modules.

@import "tailwindcss";
@import "@olddevs/ui/styles.css";
@source "./node_modules/@olddevs/ui/dist";

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

Без этой строки страница, которой нужен один компонент, отгружает весь кит, а страница с RichTextView — весь Редактор с движком:

export default {
  experimental: { optimizePackageImports: ["@olddevs/ui", "@olddevs/ui/editor"] },
};

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

import { RICH_TEXT_PRESETS, RichTextEditor } from "@olddevs/ui/editor";

export function ArticleBody() {
  return <RichTextEditor aria-label="Текст статьи" tools={RICH_TEXT_PRESETS.basic} />;
}

tools — набор Инструментов: имена кита, пресет или свои Инструменты. Пресет basic — короткая Панель, full — всё, что умеет кит. Как добавить своё — Рецепт «Поле письма».

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

• Справочник RichTextEditor — пропы, Хэндл, события, Скелет.
• API расширения — свой Инструмент и граница стабильности.