Перейти к основному содержимому

Установка

Установите @powerduck/md-editor с помощью выбранного менеджера пакетов.

npm install @powerduck/md-editor
yarn add @powerduck/md-editor
pnpm add @powerduck/md-editor

Пути импорта​

В package.json явно определены экспорты подпутей:

Путь импортаСодержимое
@powerduck/md-editorОсновной вход: класс MarkdownEditor, все самостоятельные вспомогательные средства, типы и функции.
@powerduck/md-editor/reactПодпуть React: компонент MarkdownEditorReact, типы MarkdownEditorProps и MarkdownEditorHandle.
@powerduck/md-editor/dist/style.cssСкомпилированная таблица стилей редактора; её нужно импортировать один раз.
@powerduck/md-editor/styles/tokens.cssИсходные пользовательские свойства CSS для дизайн-токенов.

Пакет поставляется как ECMAScript-модуль ("type": "module") с двумя сборками: dist/index.mjs (ESM) и dist/index.cjs (CommonJS). Декларации типов находятся в dist/index.d.ts.

// Vanilla JS main entry
import { MarkdownEditor, renderMarkdown } from '@powerduck/md-editor';
import '@powerduck/md-editor/dist/style.css';
// React subpath
import { MarkdownEditorReact, type MarkdownEditorHandle } from '@powerduck/md-editor/react';
import '@powerduck/md-editor/dist/style.css';

Peer-зависимости​

react и react-dom объявлены необязательными peer-зависимостями (>=17). Они нужны только при импорте подпути ./react:

npm install react react-dom

Класс MarkdownEditor без привязки к фреймворку и самостоятельная функция renderMarkdown не зависят от React и работают в любом браузерном проекте без его установки.

Поддержка TypeScript​

Пакет содержит собственные декларации типов; дополнительные пакеты @types/* не нужны. Основной вход экспортирует MarkdownEditorOptions, EditorMode, EditorTheme, ToolbarConfig, RendererOptions и все вспомогательные типы. Подпуть ./react экспортирует MarkdownEditorProps и MarkdownEditorHandle.

import { MarkdownEditor, type MarkdownEditorOptions } from '@powerduck/md-editor';
import type { MarkdownEditorHandle } from '@powerduck/md-editor/react';

Побочные эффекты CSS​

Файлы *.css отмечены в package.json как имеющие побочные эффекты, поэтому сборщики не удаляют их при tree-shaking. Импортируйте dist/style.css один раз во входном модуле приложения: он включает оформление редактора, предпросмотра через github-markdown-css, KaTeX и всех плагинов.

Следующие шаги​