§@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 bequem in einem 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 für die Nutzung des Pakets auch die folgenden Abhängigkeiten in Ihrem Projekt installiert sein müssen: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components und einige weitere. 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. Für Styling und Themes siehe die 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:

• So verbinden Sie den Editor in Create React App
• So fügen Sie eine Vorschau für den Markup-Modus hinzu
• So fügen Sie eine HTML-Erweiterung hinzu
• So fügen Sie eine Latex-Erweiterung hinzu
• So fügen Sie eine Mermaid-Erweiterung hinzu
• So schreiben Sie eine Erweiterung
• So fügen Sie eine GPT-Erweiterung hinzu
• So fügen Sie eine Textbindungs-Erweiterung in Markdown hinzu

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

§Mitwirken

• Richtlinien für Mitwirkende