§@gravity-ui/markdown-editor ·

§Markdown WYSIWYG- und Markup-Editor

MarkdownEditor ist ein leistungsstarkes Werkzeug für die Arbeit mit Markdown, das WYSIWYG- und Markup-Modi kombiniert. Das bedeutet, dass Sie Inhalte in einem komfortablen visuellen Modus erstellen und bearbeiten können, während Sie gleichzeitig die volle Kontrolle über das Markup behalten.

§🔧 Hauptfunktionen

• Unterstützung der grundlegenden Markdown- und YFM-Syntax.
• Erweiterbarkeit durch die Verwendung von ProseMirror- und CodeMirror-Engines.
• Die Möglichkeit, in WYSIWYG- und Markup-Modi zu arbeiten, für maximale Flexibilität.

§Installation

npm install @gravity-ui/markdown-editor

§Erforderliche Abhängigkeiten

Bitte beachten Sie, dass Ihr Projekt auch die folgenden Pakete installiert haben muss, um das Paket nutzen zu können: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components und einige andere. Die genauen Informationen finden Sie im Abschnitt peerDependencies der package.json.

§Erste Schritte

Der Markdown-Editor wird als React-Hook zur Erstellung einer Editorinstanz und als Komponente zur Anzeige bereitgestellt. Um Styling und Theme einzurichten, siehe UIKit-Dokumentation.

import React from 'react';
import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';

function Editor({onSubmit}) {
  const editor = useMarkdownEditor({allowHTML: false});

  React.useEffect(() => {
    function submitHandler() {
      // Aktuellen Inhalt in Markdown-Markup serialisieren
      const value = editor.getValue();
      onSubmit(value);
    }

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

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

Mehr erfahren:

• Wie man den Editor in Create React App integriert
• Wie man eine Vorschau für den Markup-Modus hinzufügt
• Wie man die HTML-Erweiterung hinzufügt
• Wie man die Latex-Erweiterung hinzufügt
• Wie man die Mermaid-Erweiterung hinzufügt
• Wie man eine Erweiterung schreibt
• Wie man die GPT-Erweiterung hinzufügt
• Wie man eine Textbindungs-Erweiterung in Markdown hinzufügt

§Entwicklung

1. Installieren Sie die Node.js-Umgebung. Die Version ist in der .nvmrc-Datei angegeben. Wir empfehlen die Verwendung von NVM oder einem ähnlichen Tool.

2. Installieren Sie pnpm. Die Version ist in der package.json unter der Eigenschaft "packageManager" angegeben.

   Sie können Corepack verwenden oder einfach über npm installieren: führen Sie npm deps:global --force aus.

3. Installieren Sie die Abhängigkeiten: pnpm i

4. Starten Sie den Storybook-Entwicklungsserver: pnpm start

§i18n

Um die Internationalisierung einzurichten, müssen Sie nur configure verwenden:

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

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

Vergessen Sie nicht, configure() aus UIKit und anderen UI-Bibliotheken aufzurufen.

§Mitwirkung

• Richtlinien für Mitwirkende