§@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 praktischen 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 für die Nutzung des Pakets auch Folgendes installiert haben muss: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components und einige andere. Genaue 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 der Ansicht bereitgestellt. Informationen zum Einrichten von Styling und Themes finden Sie in der 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

Um den Dev-Storybook zu starten:

npm 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