§@gravity-ui/markdown-editor ·

§Editor WYSIWYG e de marcação Markdown

O MarkdownEditor é uma ferramenta poderosa para trabalhar com Markdown, que combina os modos WYSIWYG e de Marcação. Isso significa que você pode criar e editar conteúdo em um modo visual conveniente, além de ter controle total sobre a marcação.

§🔧 Principais recursos

• Suporte à sintaxe básica do Markdown e YFM.
• Extensibilidade através do uso dos motores ProseMirror e CodeMirror.
• A capacidade de trabalhar nos modos WYSIWYG e de Marcação para máxima flexibilidade.

§Instalar

npm install @gravity-ui/markdown-editor

§Dependências necessárias

Por favor, note que para começar a usar o pacote, seu projeto também deve ter os seguintes itens instalados: @diplodoc/transform, react, react-dom, @gravity-ui/uikit, @gravity-ui/components e alguns outros. Consulte a seção peerDependencies do package.json para obter informações precisas.

§Primeiros passos

O editor Markdown é fornecido como um hook React para criar uma instância do editor e um componente para renderizar a visualização. Para configurar estilos e temas, consulte a documentação do 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() {
      // Serializa o conteúdo atual para marcação markdown
      const value = editor.getValue();
      onSubmit(value);
    }

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

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

Leia mais:

• Como conectar o editor no Create React App
• Como adicionar pré-visualização para o modo de marcação
• Como adicionar extensão HTML
• Como adicionar extensão Latex
• Como adicionar extensão Mermaid
• Como escrever uma extensão
• Como adicionar extensão GPT
• Como adicionar extensão de vinculação de texto em markdown

§Desenvolvimento

1. Instale o ambiente Nodejs, a versão é especificada no arquivo .nvmrc. Recomendamos o uso de NVM ou uma ferramenta similar.

2. Instale o pnpm, a versão é especificada em package.json na propriedade "packageManager".

   Você pode usar o Corepack, ou apenas instalar via npm: execute npm deps:global --force.

3. Instale as dependências: pnpm i

4. Execute o servidor de desenvolvimento do storybook: pnpm start

§i18n

Para configurar a internacionalização, basta usar o configure:

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

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

Não se esqueça de chamar configure() do UIKit e de outras bibliotecas de UI.

§Contribuição

• Diretrizes para Contribuintes