text-editor-plugin

Editor de texto rico (TipTap) para React. Agnóstico de contexto — expõe componentes React + estilos prontos para consumo.

O que é

Pacote React com dois pontos de entrada:

• . (editor) — o editor completo, com toolbar (negrito/itálico/listas/alinhamento/cor/fonte), suporte a fórmulas matemáticas (KaTeX/LaTeX), upload e redimensionamento de imagem, caracteres especiais. Usado onde há autoria de conteúdo.
• ./renderer — renderizador somente leitura do HTML gerado pelo editor (reconstrói KaTeX, sanitiza com DOMPurify). Usado onde só é preciso exibir conteúdo já salvo.
• ./style.css — CSS já compilado (Tailwind), para quem consome o pacote sem ter Tailwind configurado.

Instalação

npm install text-editor-plugin

Ou com yarn:

yarn add text-editor-plugin

Peer dependencies — seu projeto precisa ter instalado:

npm install react react-dom react-hot-toast

Uso

Editor (autoria de conteúdo)

import { RichTextEditor } from 'text-editor-plugin'
import 'text-editor-plugin/style.css'

function QuestionForm() {
  const [html, setHtml] = useState('')

  return (
    <RichTextEditor
      value={html}
      onChange={setHtml}
      placeholder="Digite o enunciado..."
      onImageUpload={async (file) => uploadToMyBackend(file)}
    />
  )
}

Renderer (exibição de conteúdo)

import { LatexRenderer } from 'text-editor-plugin/renderer'

<LatexRenderer html={question.statement} />

Props do RichTextEditor

| Prop | Tipo | Obrigatória | Descrição | |---|---|---|---| | value | string | Sim | Conteúdo HTML do editor | | onChange | (value: string) => void | Sim | Callback ao alterar o conteúdo | | placeholder | string | Não | Texto placeholder | | rows | number | Não | Número de linhas (padrão: 4) | | onImageUpload | (file: File) => Promise<string> | Não | Callback para upload de imagem | | disabled | boolean | Não | Desabilita o editor | | label | string | Não | Label do campo | | labelClassName | string | Não | Classes CSS adicionais para o label | | headerActions | ReactNode | Não | Ações extras no header do editor | | notify | { success: (msg: string) => void; error: (msg: string) => void } | Não | Notificador (padrão: react-hot-toast) | | error | string | Não | Mensagem de validação exibida abaixo do campo |

Scripts (desenvolvimento)

| Comando | O que faz | |---|---| | yarn dev | sobe o Vite em modo dev para desenvolver o componente isoladamente | | yarn build | typecheck + gera dist/editor, dist/renderer e dist/style.css | | yarn typecheck | roda tsc --noEmit | | yarn test | roda os testes |

Publicação

yarn build
npm publish