§@gravity-ui/markdown-editor ·

§Editor WYSIWYG y de marcado Markdown

MarkdownEditor es una herramienta potente para trabajar con Markdown, que combina los modos WYSIWYG y de marcado. Esto significa que puedes crear y editar contenido en un modo visual conveniente, además de tener control total sobre el marcado.

§🔧 Características principales

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

§Instalación

npm install @gravity-ui/markdown-editor

§Dependencias requeridas

Ten en cuenta que para empezar a usar el paquete, tu proyecto también debe tener instalados los siguientes: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components y algunos otros. Consulta la sección peerDependencies de package.json para obtener información precisa.

§Primeros pasos

El editor de Markdown se proporciona como un hook de React para crear una instancia del 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() {
      // Serializar el contenido actual a marcado markdown
      const value = editor.getValue();
      onSubmit(value);
    }

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

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

Lee más:

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

§Desarrollo

1. Instala el entorno de Nodejs, la versión se especifica en el archivo .nvmrc. Recomendamos usar NVM o una herramienta similar.

2. Instala pnpm, la versión se especifica en la propiedad "packageManager" de package.json.

   Puedes usar Corepack, o simplemente instalarlo a través de npm: ejecuta npm deps:global --force.

3. Instala las dependencias: pnpm i

4. Ejecuta el servidor de desarrollo de storybook: pnpm start

§i18n

Para configurar la internacionalización, solo necesitas usar configure:

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

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

No olvides llamar a configure() de UIKit y otras bibliotecas de UI.

§Contribución

• Directrices para colaboradores