Editores web

Los plugins oficiales traen los dos productos, la ecuación (NeoMath) y la química (NeoChem). Cada uno se convierte en una imagen en el texto. El doble clic reabre el editor correcto y actualiza la imagen en el propio editor.

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

Opciones de cada nodo: HTMLAttributes y editarComDuploClique (predeterminado true). getText() devuelve el LaTeX o el texto químico.

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

Los botones neomath y neochem ejecutan los comandos del mismo nombre: editor.execute("neomath"), o editor.execute("neochem", { resultado }) para insertar sin diálogo.

Web Components#

Cuatro elementos HTML con Shadow DOM: el CSS del sitio no cambia las ecuaciones y el CSS de ellas no se filtra al sitio.

<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="Haz clic para escribir la reacción"></neo-chem-editor>
</form>

Los editores son campos de formulario de verdad: el valor (LaTeX o texto químico) entra en el FormData, el reset vuelve al value inicial y disabled vale también por el <fieldset>. El clic o Enter abre el diálogo.

Para personalizar: ::part(imagem), ::part(erro), ::part(campo), ::part(dica) y las variables --neo-foco, --neo-borda, --neo-fundo, --neo-texto, --neo-raio y --neo-erro.

API JavaScript#

Para editores sin plugin oficial, la API global NeoMath hace el trabajo:

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

Para química, NeoChem.gerarImagem(texto), NeoChem.balancear(texto), NeoChem.bohr(elemento) y NeoChem.inserir(aoInserir, { texto, aba }) siguen el mismo patrón.

Configuración#

NeoMath.config acepta formato (svg o png), cor, escala, pngEscala, idioma, tema (auto, claro o escuro), separadorMilhar y separadorDecimal.