§@gravity-ui/markdown-editor ·

§Éditeur WYSIWYG et de balisage Markdown

MarkdownEditor est un outil puissant pour travailler avec Markdown, qui combine les modes WYSIWYG (What You See Is What You Get) 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.
• 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 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

Pour démarrer le storybook de développement

npm 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