§@gravity-ui/markdown-editor ·

§Éditeur Markdown WYSIWYG et de balisage

MarkdownEditor est un outil puissant pour travailler avec Markdown, qui combine les modes WYSIWYG et Markup. Cela signifie que vous pouvez créer et modifier du contenu dans un mode visuel pratique, tout en ayant un contrôle total sur le balisage.

§🔧 Fonctionnalités principales

• Prise en charge de la syntaxe Markdown de base et de YFM.
• Extensibilité grâce à l'utilisation des moteurs ProseMirror et CodeMirror.
• La possibilité de travailler en modes WYSIWYG et Markup pour une flexibilité maximale.

§Installation

npm install @gravity-ui/markdown-editor

§Dépendances requises

Veuillez noter que pour commencer à utiliser le package, votre projet doit également avoir installé les éléments suivants : @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components et quelques autres. Consultez la section peerDependencies de package.json pour des informations précises.

§Démarrage

L'éditeur Markdown est fourni sous forme de hook React pour créer une instance de l'éditeur et d'un composant pour le rendu de la vue. Pour configurer le style et le thème, consultez la documentation 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() {
      // Sérialiser le contenu actuel en balisage markdown
      const value = editor.getValue();
      onSubmit(value);
    }

    editor.on('submit', submitHandler);
    return () => {
      editor.off('submit', submitHandler);
    };
  }, [onSubmit]);

  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
}

En savoir plus :

• Comment connecter l'éditeur dans Create React App
• Comment ajouter un aperçu pour le mode balisage
• Comment ajouter une extension HTML
• Comment ajouter une extension Latex
• Comment ajouter une extension Mermaid
• Comment écrire une extension
• Comment ajouter une extension GPT
• Comment ajouter une extension de liaison de texte en markdown

§Développement

1. Installez l'environnement Nodejs, la version est spécifiée dans le fichier .nvmrc. Nous recommandons d'utiliser NVM ou un outil similaire.
2. Installez pnpm, la version est spécifiée dans la propriété "packageManager" de package.json.
3. Installez les dépendances : pnpm i
4. Lancez le serveur de développement storybook : pnpm start

§i18n

Pour configurer l'internationalisation, il vous suffit d'utiliser configure :

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

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

N'oubliez pas d'appeler configure() depuis UIKit et d'autres bibliothèques d'interface utilisateur.

§Contribution

• Directives pour les contributeurs

§Licence

Distribué sous la licence MIT. Voir LICENSE pour les détails.

§Pour les agents IA

Un éditeur Markdown à double mode pour React qui combine un mode WYSIWYG (ProseMirror) et un mode balisage brut (CodeMirror), avec prise en charge de Markdown de base et de YFM.

§Quand l'utiliser

• Édition de contenu Markdown/YFM avec une vue visuelle (WYSIWYG) et source (balisage) commutable.
• Vous avez besoin d'un éditeur extensible : marques, nœuds, éléments de barre d'outils et extensions personnalisés (HTML, LaTeX, Mermaid, GPT) via les moteurs ProseMirror/CodeMirror.
• Rendu de l'interface utilisateur de l'éditeur : créez l'instance avec useMarkdownEditor et rendez-la avec MarkdownEditorView.

§Quand ne pas l'utiliser

• Rendu en lecture seule de Markdown vers HTML sans édition — transformez-le avec @diplodoc/transform et rendez la sortie à la place.
• Entrée de texte multiligne simple — utilisez TextArea de @gravity-ui/uikit.
• Texte enrichi qui n'est pas Markdown/YFM — cet éditeur est axé sur Markdown.

§Pièges courants

• C'est un hook plus une vue, pas un seul composant. Créez l'instance avec useMarkdownEditor(...) et passez-la à <MarkdownEditorView editor={editor} /> ; il n'y a pas de <MarkdownEditor> unique que vous rendez directement.
• Lisez la valeur via l'instance, pas une prop value contrôlée. Appelez editor.getValue() (par exemple, lors de l'événement submit) pour sérialiser en Markdown ; l'éditeur gère son propre état.
• Les dépendances pairées sont requises. Votre projet doit fournir @diplodoc/transform, @gravity-ui/uikit, @gravity-ui/components, react et react-dom — vérifiez les peerDependencies dans package.json.
• Les styles et l'i18n proviennent d'uikit. Configurez le thème/les styles conformément à la documentation d'uikit et appelez configure({lang}) à la fois depuis ce package et depuis @gravity-ui/uikit.