§@gravity-ui/markdown-editor ·

§Editor de marcado y wysiwyg de Markdown

MarkdownEditor es una potente herramienta para trabajar con Markdown, que combina los modos WYSIWYG y Markup. Esto significa que puede crear y editar contenido en un cómodo modo visual, así como tener un control total sobre el marcado.

§🔧 Características principales

• Soporte para la sintaxis básica de Markdown e YFM.
• Extensibilidad mediante el uso de los motores ProseMirror y CodeMirror.
• La capacidad de trabajar en los modos WYSIWYG y Markup para una máxima flexibilidad.

§Instalar

npm install @gravity-ui/markdown-editor

§Dependencias necesarias

Tenga en cuenta que para empezar a usar el paquete, su proyecto también debe tener instalado lo siguiente: @diplodoc/transform react, react-dom, @gravity-ui/uikit, @gravity-ui/components y algunos otros. Consulte la peerDependencies sección de package.json para obtener información precisa.

§Cómo empezar

El editor Markdown se suministra como un gancho de React para crear una instancia de editor y un componente para renderizar la vista.
Para configurar el estilo y el tema, consulta la documentación de 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() {
      // Serialize current content to markdown markup
      const value = editor.getValue();
      onSubmit(value);
    }

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

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

Leer más:

• Cómo conectar el editor en la aplicación Create React
• Cómo agregar una vista previa para el modo de marcado
• Cómo añadir una extensión HTML
• Cómo agregar la extensión Latex
• Cómo agregar la extensión Mermaid
• Cómo escribir una extensión
• Cómo agregar la extensión GPT
• Cómo añadir una extensión de enlace de texto en Markdown

§Desarrollo

Para iniciar el libro de cuentos para desarrolladores

npm start

§i18n

Para configurar la internacionalización, solo tiene que utilizar: configure

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

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

No olvides llamar configure() desde UIKit y otras bibliotecas de interfaz de usuario.

§Contribuyendo

• Pautas para los colaboradores