Web editors

The official plugins bring both products, equation (NeoMath) and chemistry (NeoChem). Each becomes an image in the text. Double-clicking reopens the right editor and updates the image in the editor itself.

TipTap#

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");

Options of each node: HTMLAttributes and editarComDuploClique (default true). getText() returns the LaTeX or the chemical text.

CKEditor 5#

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"],
});

The neomath and neochem buttons run the commands of the same name: editor.execute("neomath"), or editor.execute("neochem", { resultado }) to insert without a dialog.

Web Components#

Four HTML elements with Shadow DOM: the site’s CSS does not change the equations and their CSS does not leak into the site.

<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="Click to write the reaction"></neo-chem-editor>
</form>

The editors are real form fields: the value (LaTeX or chemical text) goes into FormData, reset returns to the initial value and disabled also applies through the <fieldset>. Click or Enter opens the dialog.

To customize: ::part(imagem), ::part(erro), ::part(campo), ::part(dica) and the variables --neo-foco, --neo-borda, --neo-fundo, --neo-texto, --neo-raio and --neo-erro.

JavaScript API#

For editors without an official plugin, the global NeoMath API does the work:

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(),
});

For chemistry, NeoChem.gerarImagem(texto), NeoChem.balancear(texto), NeoChem.bohr(elemento) and NeoChem.inserir(aoInserir, { texto, aba }) follow the same pattern.

Configuration#

NeoMath.config accepts formato (svg or png), cor, escala, pngEscala, idioma, tema (auto, claro or escuro), separadorMilhar and separadorDecimal.