MarkdownEditor

WYSIWYG-редактор на TipTap с тулбаром форматирования и preview-тоглом. Работает в controlled (value / onChange) и uncontrolled (defaultValue) режимах. Готовый результат показывайте через Markdown.

Когда использовать

• Поле ввода форматированного текста с тулбаром и предпросмотром: описания, комментарии, заметки.
• Редактирование markdown, который потом сохраняется и рендерится в публичной части.

Когда не нужен:

• Для простого многострочного текста без форматирования:
  • нативный textarea или поле ввода из @cloud-ru/ds-fields.
• Для показа готового markdown без редактирования:
  • компонент Markdown.

Анатомия

Редактор состоит из:

• header — тогл Preview слева и подпись (label) справа.
• toolbar — кнопки форматирования, сгруппированные по смыслу; лишние сворачиваются в меню «Ещё».
• content — редактируемая область с кнопкой очистки.

Preview (default false)

Переключает форму редактирования (обе редактируемы, тулбар работает в обеих):

• false (по умолчанию) — редактирование «сырого» markdown-текста в textarea. Кнопки тулбара вставляют markdown-разметку (**жирный**, # заголовок, - список) в исходник.
• true — форматированный WYSIWYG-редактор; те же кнопки применяют форматирование к rich-узлам.

Управляется тоглом в шапке либо пропами preview / defaultPreview / onPreviewChange.

Toolbar (default — полный набор)

Какие кнопки показать:

• toolbar={[...]} — массив значений TOOLBAR_ITEM (показываются только перечисленные кнопки).
• toolbar={false} — без тулбара.
• не указан — полный набор кнопок.

Header (default — виден)

Шапка с тоглом Preview и подписью:

• label — подпись справа. false — без подписи.
• previewLabel — текст тогла Preview.
• hideHeader — скрыть шапку целиком.

Resizable (default true)

Может ли пользователь менять размеры поля перетаскиванием уголка.

Установка

pnpm add @cloud-ru/ds-markdown

import { MarkdownEditor, TOOLBAR_ITEM } from '@cloud-ru/ds-markdown'

Редактор использует порталы (тултипы, выпадающие меню) — оборачивайте его в PortalContextProvider из @cloud-ru/ds-portal-context.

Примеры использования

Редактор (uncontrolled)

import { MarkdownEditor } from '@cloud-ru/ds-markdown';

const INITIAL = `# Заметка

Печатайте текст и форматируйте его через тулбар. Поддерживается **markdown**.
`;

export function EditorUncontrolled() {
  return <MarkdownEditor defaultValue={INITIAL} placeholder='Начните писать…' />;
}

Редактор (controlled) + Preview

import { MarkdownEditor } from '@cloud-ru/ds-markdown';
import { useState } from 'react';

export function EditorControlled() {
  const [value, setValue] = useState('# Controlled\n\nЗначение хранится во внешнем `useState`.');
  const [preview, setPreview] = useState(false);

  return (
    <MarkdownEditor value={value} onChange={setValue} preview={preview} onPreviewChange={setPreview} label='Описание' />
  );
}

Свой набор кнопок тулбара

import { MarkdownEditor, TOOLBAR_ITEM } from '@cloud-ru/ds-markdown';

const INITIAL = `Оставьте в тулбаре только нужные кнопки через \`toolbar\`.
`;

export function EditorCustomToolbar() {
  return (
    <MarkdownEditor
      defaultValue={INITIAL}
      label='Комментарий'
      toolbar={[TOOLBAR_ITEM.Bold, TOOLBAR_ITEM.Italic, TOOLBAR_ITEM.Link, TOOLBAR_ITEM.BulletList]}
    />
  );
}

Props

Types

MarkdownEditorProps

Unions

ToolbarItemId

Storybook

Figma