§@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 les éléments suivants installés : @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

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 package.json dans la propriété "packageManager".

   Vous pouvez utiliser Corepack, ou simplement l'installer via npm : exécutez npm deps:global --force.

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 UI.

§Contribution

• Directives pour les contributeurs