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 セクションを確認してください。

はじめに

MarkdownEditor は、エディターインスタンスを作成するための 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} />;
}

さらに読む:

開発

.nvmrc ファイルに指定されているバージョンの Node.js 環境をインストールします。NVM または類似のツールを使用することを推奨します。
package.json の "packageManager" プロパティで指定されているバージョンの pnpm をインストールします。

Corepack を使用するか、npm 経由でインストールできます: npm deps:global --force を実行します。
依存関係をインストールします: pnpm i
Storybook の開発サーバーを実行します: pnpm start

i18n

国際化を設定するには、configure を使用するだけです:

import {configure} from '@gravity-ui/markdown-editor';

configure({
  lang: 'ru',
});

UIKit やその他の UI ライブラリから configure() を呼び出すことを忘れないでください。

貢献

コントリビューターガイドライン

Markdown editor

§@gravity-ui/markdown-editor ·

§Markdown wysiwyg およびマークアップエディター

§🔧 主な機能

§インストール

§必要な依存関係

§はじめに

§開発

§i18n

§貢献