§@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 de 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

Observe 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 na propriedade "packageManager" do package.json.
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

§Licença

Distribuído sob a Licença MIT. Veja LICENSE para detalhes.

§Para agentes de IA

Um editor Markdown de modo duplo para React que combina um modo WYSIWYG (ProseMirror) e um modo de marcação bruta (CodeMirror), com suporte para Markdown básico e YFM.

§Quando usar

• Edição de conteúdo Markdown/YFM com uma visualização alternável entre visual (WYSIWYG) e de origem (marcação).
• Você precisa de um editor extensível: marcas, nós, itens de barra de ferramentas e extensões personalizadas (HTML, LaTeX, Mermaid, GPT) através dos motores ProseMirror/CodeMirror.
• Renderização da interface do editor: crie a instância com useMarkdownEditor e renderize-a com MarkdownEditorView.

§Quando não usar

• Renderização somente leitura de Markdown para HTML sem edição — transforme-o com @diplodoc/transform e renderize a saída em vez disso.
• Entrada de texto simples com várias linhas — use TextArea de @gravity-ui/uikit.
• Texto rico que não é Markdown/YFM — este editor é focado em Markdown.

§Armadilhas comuns

• É um hook mais uma visualização, não um único componente. Crie a instância com useMarkdownEditor(...) e passe-a para <MarkdownEditorView editor={editor} />; não há um único <MarkdownEditor> que você renderize diretamente.
• Leia o valor através da instância, não de uma prop value controlada. Chame editor.getValue() (por exemplo, no evento submit) para serializar para Markdown; o editor gerencia seu próprio estado.
• Dependências de pares são necessárias. Seu projeto deve fornecer @diplodoc/transform, @gravity-ui/uikit, @gravity-ui/components, react e react-dom — verifique as peerDependencies no package.json.
• Estilos e i18n vêm do uikit. Configure temas/estilos de acordo com a documentação do uikit e chame configure({lang}) tanto deste pacote quanto de @gravity-ui/uikit.

§Documentação para agentes de IA

A documentação legível por agente para a versão instalada está localizada em node_modules/@gravity-ui/markdown-editor/build/docs/INDEX.md.