Markdown editor
@gravity-ui/markdown-editor · 
Markdown wysiwyg および マークアップエディター
MarkdownEditor は、WYSIWYG モードとマークアップモードを組み合わせた、Markdown を扱うための強力なツールです。これにより、便利なビジュアルモードでコンテンツを作成・編集できるだけでなく、マークアップを完全に制御することも可能です。
🔧 主な機能
- 基本的な Markdown および YFM の構文をサポート。
- ProseMirror および CodeMirror エンジンを使用した拡張性。
- 最大限の柔軟性を実現する WYSIWYG モードとマークアップモードでの作業能力。
インストール
npm install @gravity-ui/markdown-editor
必要な依存関係
このパッケージの使用を開始するには、プロジェクトに以下のパッケージもインストールされている必要があります: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components など。正確な情報は package.json の peerDependencies セクションで確認してください。
はじめに
markdown エディターは、エディターインスタンスを作成するための React フックと、ビューをレンダリングするためのコンポーネントとして提供されます。 スタイリングとテーマの設定については、UIKit ドキュメントを参照してください。
import React from 'react';
import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
function Editor({onSubmit}) {
const editor = useMarkdownEditor({allowHTML: false});
React.useEffect(() => {
function submitHandler() {
// 現在のコンテンツを markdown マークアップにシリアライズ
const value = editor.getValue();
onSubmit(value);
}
editor.on('submit', submitHandler);
return () => {
editor.off('submit', submitHandler);
};
}, [onSubmit]);
return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
}
さらに読む:
- Create React App でエディターを接続する方法
- マークアップモードのプレビューを追加する方法
- HTML 拡張機能を追加する方法
- LaTeX 拡張機能を追加する方法
- Mermaid 拡張機能を追加する方法
- 拡張機能の作成方法
- GPT 拡張機能を追加する方法
- Markdown でテキストバインディング拡張機能を追加する方法
開発
.nvmrcファイルに指定されているバージョンの Node.js 環境をインストールします。NVM または類似のツールを使用することを推奨します。package.jsonの "packageManager" プロパティで指定されているバージョンの pnpm をインストールします。- 依存関係をインストールします:
pnpm i - Storybook の開発サーバーを実行します:
pnpm start
i18n
国際化を設定するには、configure を使用するだけです:
import {configure} from '@gravity-ui/markdown-editor';
configure({
lang: 'ru',
});
UIKit やその他の UI ライブラリからも configure() を呼び出すことを忘れないでください。
貢献
ライセンス
MIT ライセンスの下で配布されています。詳細については LICENSE を参照してください。
AI エージェント向け
ProseMirror を使用した WYSIWYG モードと CodeMirror を使用した生のマークアップモードを組み合わせた、React 用のデュアルモード Markdown エディターで、基本的な Markdown と YFM をサポートしています。
使用する場合
- 切り替え可能なビジュアル（WYSIWYG）ビューとソース（マークアップ）ビューで Markdown/YFM コンテンツを編集する場合。
- 拡張可能なエディターが必要な場合: ProseMirror/CodeMirror エンジンを介したカスタムマーク、ノード、ツールバーアイテム、および拡張機能（HTML、LaTeX、Mermaid、GPT）。
- エディター UI のレンダリング:
useMarkdownEditorでインスタンスを作成し、MarkdownEditorViewでレンダリングします。
使用しない場合
- Markdown を HTML にレンダリングするだけで編集しない場合 —
@diplodoc/transformで変換し、出力をレンダリングしてください。 - 単純な複数行テキスト入力 —
@gravity-ui/uikitのTextAreaを使用してください。 - Markdown/YFM ではないリッチテキスト — このエディターは Markdown ファーストです。
よくある落とし穴
- これはフックとビューであり、単一のコンポーネントではありません。
useMarkdownEditor(...)でインスタンスを作成し、それを<MarkdownEditorView editor={editor} />に渡してください。直接レンダリングする単一の<MarkdownEditor>はありません。 - 制御された
valueプロパティではなく、インスタンス経由で値を取得します。 Markdown にシリアライズするためにeditor.getValue()を呼び出します（例:submitイベントで）。エディターは独自のステートを管理します。 - ピア依存関係が必要です。 プロジェクトは
@diplodoc/transform,@gravity-ui/uikit,@gravity-ui/components,react,react-domを提供する必要があります —package.jsonのpeerDependenciesを確認してください。 - スタイルと i18n は uikit から提供されます。 uikit のドキュメントに従ってテーマ設定/スタイルを設定し、このパッケージと
@gravity-ui/uikitの両方からconfigure({lang})を呼び出してください。
AI エージェント向けドキュメント
インストールされているバージョン向けの、エージェントが読み取り可能なドキュメントは node_modules/@gravity-ui/markdown-editor/build/docs/INDEX.md にあります。
