NeoMath Web

Editores web

Integre o NeoMath Web ao TipTap, ao CKEditor 5 ou a qualquer página com Web Components e a API JavaScript, com equações e química editáveis por duplo clique.

Nesta página

TipTap
CKEditor 5
Web Components
API JavaScript
Configuração

Os plugins oficiais trazem os dois produtos, a equação (NeoMath) e a química (NeoChem). Cada um vira uma imagem no texto. O duplo clique reabre o editor certo e atualiza a imagem no próprio editor.

TipTap#

JavaScript

import { Editor, Node, mergeAttributes } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import { criarExtensoesTipTap } from "./adaptadores/tiptap.js";

const { NeoMath, NeoChem } = criarExtensoesTipTap({ Node, mergeAttributes });
const editor = new Editor({ element, extensions: [StarterKit, NeoMath, NeoChem] });

editor.commands.inserirNeoMath();
editor.commands.inserirNeoChem("H2SO4");

Comando	O que faz
`inserirNeoMath(latex?)` / `inserirNeoChem(texto?)`	abre o diálogo e insere no cursor
`adicionarNeoMath(resultado)` / `adicionarNeoChem(resultado)`	insere um resultado já gerado, sem diálogo
`editarNeoMath()` / `editarNeoChem()`	reabre o diálogo para o nó selecionado

Opções de cada nó: HTMLAttributes e editarComDuploClique (padrão true). getText() devolve o LaTeX ou o texto químico.

CKEditor 5#

JavaScript

import * as CK from "ckeditor5";
import { criarPluginsCKEditor5 } from "./adaptadores/ckeditor5.js";

const { NeoMath, NeoChem } = criarPluginsCKEditor5(CK);
ClassicEditor.create(el, {
  plugins: [CK.Essentials, CK.Paragraph, NeoMath, NeoChem],
  toolbar: ["neomath", "neochem"],
});

Os botões neomath e neochem executam os comandos de mesmo nome: editor.execute("neomath"), ou editor.execute("neochem", { resultado }) para inserir sem diálogo.

Web Components#

Quatro elementos HTML com Shadow DOM: o CSS do site não muda as equações e o CSS delas não vaza para o site.

HTML

<script type="module" src="/neo/componentes/index.js"></script>

<neo-math latex="\frac{a}{b}"></neo-math>
<neo-chem texto="2H2 + O2 -> 2H2O"></neo-chem>
<neo-chem modo="balancear" texto="Fe + O2 -> Fe2O3"></neo-chem>

<form>
  <neo-math-editor name="resposta" value="x^2"></neo-math-editor>
  <neo-chem-editor name="reacao" placeholder="Clique para escrever a reação"></neo-chem-editor>
</form>

Elemento	Atributos	Eventos
`<neo-math>`	`latex` (ou o conteúdo), `cor`, `formato` (`svg` ou `png`), `escala`	`neo-desenhado`, `neo-erro`
`<neo-chem>`	`texto` (ou o conteúdo), `modo` (`auto`, `balancear`, `bohr`), `cor`, `formato`, `escala`	`neo-desenhado`, `neo-erro`
`<neo-math-editor>`	`value`, `name`, `placeholder`, `disabled`	`input`, `change`
`<neo-chem-editor>`	`value`, `name`, `placeholder`, `disabled`	`input`, `change`

Os editores são campos de formulário de verdade: o valor (LaTeX ou texto químico) entra no FormData, o reset volta ao value inicial e disabled vale também pelo <fieldset>. Clique ou Enter abre o diálogo.

Para personalizar: ::part(imagem), ::part(erro), ::part(campo), ::part(dica) e as variáveis --neo-foco, --neo-borda, --neo-fundo, --neo-texto, --neo-raio e --neo-erro.

API JavaScript#

Para editores sem plugin oficial, a API global NeoMath faz o trabalho:

JavaScript

const r = await NeoMath.gerarImagem("e^{i\\pi}+1=0", { formato: "svg" });
if (r.ok) document.querySelector("#saida").append(NeoMath.aplicarNoImg(r));

NeoMath.inserir((img) => editor.insertNode(img), { latex: "x^2" });

const parar = NeoMath.vigiar(document.querySelector("#conteudo"), {
  aoAtualizar: (img, resultado) => salvar(),
});

Função	O que faz
`pronta()`	resolve quando o editor está carregado
`gerarImagem(latex, opcoes?)` / `gerarImagens(lista)`	gera SVG ou PNG com largura, altura, linha de base, LaTeX e MathML
`latexParaMathml(latex)` / `mathmlParaLatex(mathml)`	conversões de texto
`inserir(aoInserir, { latex? })`	abre o diálogo e devolve a imagem pronta
`editar(img, aoAtualizar?)`	reabre uma imagem do NeoMath
`vigiar(raiz, opcoes?)`	duplo clique em qualquer equação dentro de `raiz` abre a edição
`usarPredefinicao(p)`	aplica uma predefinição de fontes
`baixar(r, nome?)`	baixa a imagem gerada

Para química, NeoChem.gerarImagem(texto), NeoChem.balancear(texto), NeoChem.bohr(elemento) e NeoChem.inserir(aoInserir, { texto, aba }) seguem o mesmo padrão.

Configuração#

NeoMath.config aceita formato (svg ou png), cor, escala, pngEscala, idioma, tema (auto, claro ou escuro), separadorMilhar e separadorDecimal.