@fnix/lexxy-mathjax 0.1.0 → 0.2.0

package/README.md

@@ -16,7 +16,15 @@ Equations are stored in the document (and in what ActionText persists) as:
 <div  class="lexxy-math" data-latex="\int_0^1 x\,dx">...</div>         <!-- display/block -->
 ```
 
-Inside the editor the extension typesets these with the page's MathJax. **MathJax is host-provided, not bundled**: load MathJax v3 (`tex-chtml`) on any page that uses the editor or displays saved content.
+Inside the editor the extension typesets these with the page's MathJax. On a display page, `typesetMath` (below) does the same thing without an editor. **MathJax is host-provided, not bundled**: load MathJax v4 (`tex-chtml` or `tex-svg`) on any page that uses the editor or displays saved content. The extension also works against MathJax v3, so hosts already loading v3 can upgrade on their own schedule.
+
+## The persisted format
+
+This is the whole contract between the editor and anything else that needs to render or process saved equations — MathJax, but also any other script or server-side tool:
+
+- `<span data-latex="...">` is an inline equation, `<div data-latex="...">` is display/block. Tag name is the only signal for inline vs. display; treat it as authoritative.
+- Text content is the raw LaTeX, with no delimiters (`\(...\)`, `$$...$$`, `\[...\]`).
+- `data-latex` is the one attribute this package relies on surviving sanitization (see the ActionText step below). `class="lexxy-math"` / `lexxy-math--display` are presentation only, applied defensively by `typesetMath`, and are not guaranteed to be present or to survive a sanitizer.
 
 ## Installation
 
@@ -55,13 +63,22 @@ Include the stylesheet (`@fnix/lexxy-mathjax/styles`, or copy `styles/lexxy-math
 
 ```html
 <script>
-  window.MathJax = { chtml: { displayAlign: "center" } }
+  window.MathJax = { output: { displayAlign: "center" } }
 </script>
-<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
 ```
 
 If MathJax is missing, the editor still works and equations show their raw LaTeX.
 
+#### MathJax v4 notes
+
+This package persists raw LaTeX (`data-latex`) and re-typesets it on every load, so a few v4 changes are worth knowing about before upgrading a host that already has saved content:
+
+- **Different default font.** v4 defaults to `mathjax-newcm` (New Computer Modern), noticeably lighter than v3's TeX font. Set `output: { font: "mathjax-tex" }` to keep the old look.
+- **`\text{...}` is now macro-parsed.** The `textmacros` extension ships in all v4 combined components, so a backslash or brace inside `\text{}` that was inert in v3 can now raise "undefined control sequence" for existing saved equations.
+- **Font-size macros changed in MathJax 4.1.2** (`\tiny`/`\Tiny` swapped, `\large`…`\Huge` shifted by one), so existing content can render at a different size. Opt out with the `fontsizev3` TeX package (`loader: { load: ["[tex]/fontsizev3"] }, tex: { packages: { "[+]": ["fontsizev3"] } }`) if you pin a floating `@4` range.
+- **Accessibility moved, but only for math MathJax typesets itself.** v4 turns assistive MathML off by default and turns the expression explorer (speech/braille) on instead. MathJax's own docs warn that math inserted via a direct conversion call — `tex2chtmlPromise`/`tex2svgPromise`, which is what this package uses, both in the editor and on display pages — "will not become part of the list of math expressions that MathJax knows about in the page", so the explorer never attaches to it. Both `createDOM` (editor) and `typesetMath` (display pages) compensate by setting `role="math"` / `aria-label="Equation: ..."` on every equation directly, rather than relying on the explorer.
+
 ## Rails / ActionText integration
 
 **1. Allow `data-latex` through the server-side sanitizer** (ActionText strips unknown attributes when rendering):
@@ -73,22 +90,97 @@ ActiveSupport.on_load(:action_text_content) do
 end
 ```
 
-**2. Typeset saved content on display pages.** Load MathJax (as above) plus a small script that renders `[data-latex]` elements, Turbo-compatible:
+**2. Typeset saved content on display pages.** Load MathJax (as above), include the stylesheet, and start the auto-typesetter:
+
+```js
+// app/javascript/application.js
+import "@fnix/lexxy-mathjax/styles"
+import { startMathjaxAutoTypeset } from "@fnix/lexxy-mathjax/typeset"
+
+startMathjaxAutoTypeset()
+```
+
+`@fnix/lexxy-mathjax/typeset` is a separate entry point from the package's default export: it pulls in neither lexxy nor Lexical, so a display-only page doesn't load the editor. It re-typesets on `DOMContentLoaded`, `turbo:load`, `turbo:frame-load` and `turbo:render`, skips equations it has already rendered (so repeated Turbo navigations are cheap), and leaves any equation inside a live `<lexxy-editor>` to the extension.
+
+For manual control — a specific container, a one-off re-render, or Stimulus — call `typesetMath` directly. It never throws and resolves with a summary:
+
+```js
+import { typesetMath } from "@fnix/lexxy-mathjax/typeset"
+
+const { total, typeset, failed, skipped, mathjax } = await typesetMath(document.querySelector(".post-body"))
+```
+
+Options: `output` (`"auto" | "chtml" | "svg"`, default `"auto"` — detects whether the host loaded `tex-chtml` or `tex-svg`), `selector` (default `"[data-latex]"`), `force` (re-typeset elements already rendered), `accessible` (default `true`, adds `role="math"` / `aria-label`).
+
+With Stimulus, for per-element control instead of a page-wide listener:
+
+```js
+// app/javascript/controllers/math_controller.js
+import { Controller } from "@hotwired/stimulus"
+import { typesetMath } from "@fnix/lexxy-mathjax/typeset"
+
+export default class extends Controller {
+  connect() {
+    typesetMath(this.element)
+  }
+}
+```
+```erb
+<div data-controller="math"><%= @post.body %></div>
+```
+
+**Without importing this package's JS at all**, wrap the stored LaTeX in MathJax's own delimiters and let `typesetPromise` scan for it normally:
 
 ```js
-function typesetEquations() {
-  const elements = document.querySelectorAll(".trix-content [data-latex], .lexxy-content [data-latex]")
-  if (elements.length === 0 || !window.MathJax?.typesetPromise) return
+document.querySelectorAll("[data-latex]").forEach((el) => {
+  const latex = el.getAttribute("data-latex")
+  el.textContent = el.tagName === "DIV" ? `\\[${latex}\\]` : `\\(${latex}\\)`
+})
+window.MathJax.typesetPromise()
+```
+
+This is the only approach that keeps MathJax's contextual menu and the v4 expression explorer, because the math becomes part of MathJax's own document list (see the accessibility note above). The trade-offs: it depends on the host's `tex.inlineMath` / `tex.displayMath` configuration matching those delimiters, and invalid LaTeX renders as MathJax's own `merror` markup rather than this package's `.lexxy-math--error` styling.
+
+> An earlier version of this README suggested setting `el.textContent` to the bare, undelimited `data-latex` value and then calling `MathJax.typesetPromise([...elements])`. That never worked: `typesetPromise` scans for delimiters, and bare LaTeX has none — passing an element list narrows *where* it scans, not *whether* it requires delimiters. If you copied that snippet, switch to one of the two approaches above.
+
+## Rendering outside a browser (PDF export)
+
+Both approaches above need an actual MathJax running in a DOM — the editor's, or a display page's. Some PDF pipelines have neither: [sghtmltopdf](https://github.com/waka/sghtmltopdf), for one, runs no JavaScript at all and does not render inline `<svg>`, so MathJax can never execute there, and CHTML output needs WOFF/WOFF2 web fonts, which such engines typically don't support either. The persisted format above is designed for exactly this case: `data-latex` carries everything a separate rendering step needs, without this package's help.
 
-  elements.forEach((el) => { el.textContent = el.getAttribute("data-latex") })
-  window.MathJax.typesetPromise([ ...elements ])
+This isn't something this package ships — it's server-side, has no browser to run in, and every detail (page size, body font, cache store, job queue, PDF engine) belongs to the app, not the editor extension. The recipe:
+
+**1. Render LaTeX to SVG in Node, using MathJax's server-side v4 package**, `@mathjax/src@4` (`mathjax-full` is the v3 name, `mathjax-node` is v2-era and abandoned — most recipes found online are stale):
+
+```js
+global.MathJax = {
+  loader: { paths: { mathjax: "@mathjax/src/bundle" }, load: [ "adaptors/liteDOM" ], require: (f) => import(f) },
+  svg: { fontCache: "none" },   // no shared <use> references — safer for a standalone image
+  options: { enableSpeech: false, enableBraille: false, enableEnrichment: false }   // skip the speech-rule-engine; it's the dominant startup cost
 }
+await import("@mathjax/src/bundle/tex-svg.js")
+await MathJax.startup.promise
+
+const svg = await MathJax.tex2svgPromise(latex, { display, em, ex, containerWidth })
+// pick em/containerWidth from the PDF's body font and page width — 16/780 above are editor-viewport defaults, not PDF ones
+
+MathJax.done()   // mandatory: shuts down the speech-rule-engine's worker threads, or the process never exits
+```
+
+**2. Transfer the geometry, then embed as an image.** MathJax puts sizing on the `<svg>` element itself — `output/svg.ts`'s `createSVG` sets `width="Wex"`, `height="Hex"` and `style="vertical-align:-Dex"` — so wrapping it in an `<img>` (as most non-JS PDF engines require) discards all three unless you copy them onto the wrapper:
 
-document.addEventListener("turbo:load", typesetEquations)
-document.addEventListener("DOMContentLoaded", typesetEquations)
+```html
+<img src="data:image/svg+xml;base64,…" alt="\frac{a}{b}"
+     style="width:2.62em;height:1.29em;vertical-align:-0.40em">
 ```
 
-Note: `typesetPromise` scans for `\(...\)` delimiters by default; the snippet above instead sets each element's content from `data-latex` and typesets just those elements. If you prefer delimiter scanning, configure `tex.inlineMath` accordingly.
+**3. Run this at export time, on a throwaway copy of the HTML — not at save time.** Keep `data-latex` as the only thing that's ever persisted:
+- stored content stays canonical and round-trips through the editor unchanged (an `<img>` in a saved record wouldn't be recognized by `importDOM`);
+- the sanitizer never has to accept `data:` URIs on `img[src]` app-wide, which would be a real XSS surface (`data:image/svg+xml` can carry `<script>`);
+- there's no staleness or backfill migration when MathJax's output changes — bump a version in your cache key and the next export re-renders.
+
+If your PDF engine has no accessibility tagging (sghtmltopdf doesn't), `alt` never reaches the PDF's own text layer either — still worth setting for tools that read it another way, but don't rely on it for accessibility.
+
+Since the transform depends on nothing this package controls, and the format contract is exactly the `data-latex` spec above, this is intentionally left as a recipe rather than shipped code.
 
 ## Demo
 
@@ -115,4 +207,7 @@ The code follows lexxy's own conventions: plain ES modules, vanilla JS, no build
 - `src/nodes/math_node.js` — `DecoratorNode` storing `{ latex, display }`; `createDOM` typesets with MathJax, `exportDOM`/`importDOM` handle the `data-latex` HTML format
 - `src/extensions/mathjax_extension.js` — the `Lexxy.Extension`: registers the node, the `insertMath` command, the toolbar button, and click-to-edit
 - `src/elements/math_editor_dialog.js` — `<lexxy-math-editor>` dialog with live preview
-- `src/helpers/mathjax_helper.js` — serialized MathJax typesetting with graceful degradation
+- `src/helpers/mathjax_helper.js` — serialized MathJax typesetting with graceful degradation; shared by the editor and by `typeset_math.js`
+- `src/typeset_math.js` — `typesetMath(root)`, the display-page renderer; batches conversions and refreshes MathJax's stylesheet once per call instead of once per equation
+- `src/auto_typeset.js` — `startMathjaxAutoTypeset()`, wires `typesetMath` to `DOMContentLoaded`/Turbo events
+- `src/typeset.js` — the `@fnix/lexxy-mathjax/typeset` entry point (re-exports the two above without pulling in lexxy/Lexical)

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@fnix/lexxy-mathjax",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "MathJax LaTeX equation extension for Lexxy, the rich text editor for Rails.",
   "type": "module",
   "main": "src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./typeset": "./src/typeset.js",
     "./styles": "./styles/lexxy-mathjax.css"
   },
   "files": [

package/src/auto_typeset.js

@@ -0,0 +1,21 @@
+import { typesetMath } from "./typeset_math.js"
+
+const DEFAULT_EVENTS = [ "DOMContentLoaded", "turbo:load", "turbo:frame-load", "turbo:render" ]
+
+// Wires typesetMath up to a page's navigation lifecycle. Covers full-page
+// loads, Turbo Drive visits, and Turbo Frames/Streams: on turbo:frame-load
+// the event target is the frame itself, so only its own subtree is
+// retypeset instead of walking the whole document again.
+//
+// Returns a teardown function that removes the listeners.
+export function startMathjaxAutoTypeset({ events = DEFAULT_EVENTS, ...options } = {}) {
+  const handler = (event) => {
+    const root = event.target?.nodeType === 1 ? event.target : document
+    return typesetMath(root, options)
+  }
+
+  events.forEach((name) => document.addEventListener(name, handler))
+  if (document.readyState !== "loading") handler({})
+
+  return () => events.forEach((name) => document.removeEventListener(name, handler))
+}

package/src/helpers/mathjax_helper.js

@@ -1,12 +1,32 @@
 const MATHJAX_WAIT_ATTEMPTS = 40
 const MATHJAX_WAIT_INTERVAL = 250
 
+const CONVERTERS = {
+  chtml: "tex2chtmlPromise",
+  svg: "tex2svgPromise"
+}
+
 let warnedAboutMissingMathJax = false
+let warnedAboutMissingConverter = false
 let renderQueue = Promise.resolve()
+let mathjaxPromise = null
 
 // Resolves with window.MathJax once its startup has finished, or null if
 // MathJax never shows up (the host page is responsible for loading it).
-export async function findMathJax() {
+// The poll is memoized so concurrent callers share one wait instead of each
+// burning the full ~10s timeout on its own.
+export function findMathJax() {
+  if (!mathjaxPromise) {
+    mathjaxPromise = pollForMathJax().then((mathjax) => {
+      if (!mathjax) mathjaxPromise = null // let a later call retry if MathJax arrives late
+      return mathjax
+    })
+  }
+
+  return mathjaxPromise
+}
+
+async function pollForMathJax() {
   for (let attempt = 0; attempt < MATHJAX_WAIT_ATTEMPTS; attempt++) {
     if (window.MathJax?.startup?.promise) {
       await window.MathJax.startup.promise
@@ -18,43 +38,116 @@ export async function findMathJax() {
   if (!warnedAboutMissingMathJax) {
     warnedAboutMissingMathJax = true
     console.warn("@fnix/lexxy-mathjax: window.MathJax not found. Equations will show raw LaTeX. " +
-      "Load MathJax v3 (tex-chtml) on pages that use the editor.")
+      "Load MathJax v4 (tex-chtml) on pages that use the editor.")
+  }
+
+  return null
+}
+
+// Runs task once every previously enqueued task has settled, without ever
+// leaving the shared queue itself rejected. Returns a promise for THIS task
+// specifically (not the shared chain), so a caller can observe its own
+// outcome instead of waiting on unrelated work queued after it.
+export function enqueue(task) {
+  const result = renderQueue.then(task)
+  renderQueue = result.catch(() => {})
+  return result
+}
+
+// Picks which TeX conversion method to use. Consults the document's live
+// output jax first (so a renderer switched via MathJax's own contextual
+// menu is respected), then falls back to whichever of chtml/svg is loaded.
+// MathJax only creates a tex2*Promise method for jax it was actually asked
+// to load, so a host that loaded tex-svg.js has no tex2chtmlPromise at all.
+export function resolveConverter(mathjax, output = "auto") {
+  const candidates = output === "auto"
+    ? [ mathjax.startup?.document?.outputJax?.name?.toLowerCase(), "chtml", "svg" ]
+    : [ output ]
+
+  for (const name of candidates) {
+    const method = CONVERTERS[name]
+    if (method && typeof mathjax[method] === "function") {
+      return { name, convert: (latex, options) => mathjax[method](latex, options) }
+    }
+  }
+
+  if (!warnedAboutMissingConverter) {
+    warnedAboutMissingConverter = true
+    console.warn(`@fnix/lexxy-mathjax: no TeX conversion method found on window.MathJax for output "${output}".`)
   }
 
   return null
 }
 
+// clientWidth is 0 on a non-replaced inline element (e.g. a <span> before
+// the package stylesheet has loaded), so fall back to the parent's width.
+export function measureContainerWidth(element) {
+  return element.clientWidth || element.parentElement?.clientWidth || 780
+}
+
+// Converts latex into element using converter, replacing its content. Falls
+// back to showing the raw LaTeX with an error class when conversion fails.
+// Returns whether conversion succeeded, so callers can decide whether a
+// stylesheet refresh is worth doing.
+export async function convertInto(converter, element, latex, { display = false, containerWidth } = {}) {
+  try {
+    const rendered = await converter.convert(latex, {
+      display,
+      em: 16,
+      ex: 8,
+      containerWidth: containerWidth ?? measureContainerWidth(element)
+    })
+    element.replaceChildren(rendered)
+    element.classList.remove("lexxy-math--error")
+    return true
+  } catch (error) {
+    element.textContent = latex
+    element.classList.add("lexxy-math--error")
+    element.title = `${error}`
+    return false
+  }
+}
+
+// Refreshes MathJax's global stylesheet so glyphs used by newly-converted
+// equations render. reset(), not clear(): clear() also wipes MathJax's
+// record of every expression the host page itself has typeset, which isn't
+// ours to clear. This matters for SVG output too, not just CHTML: with the
+// default global font cache, updateDocument() is what inserts the shared
+// glyph cache into the page, and skipping it can leave SVG <use> references
+// pointing at nothing.
+export function refreshDocumentStyles(mathjax) {
+  mathjax.startup.document.reset()
+  mathjax.startup.document.updateDocument()
+}
+
 // Typesets LaTeX into the given element, replacing its content. Falls back to
 // showing the raw LaTeX when MathJax is unavailable or the LaTeX is invalid.
-// Calls are serialized because MathJax's conversion pipeline is not reentrant.
+// Calls are serialized because MathJax's own promise chaining only covers
+// conversion, not our DOM insertion and stylesheet refresh below.
 export function typesetInto(element, latex, { display = false } = {}) {
   element.textContent = latex
 
-  renderQueue = renderQueue.then(async () => {
+  return enqueue(async () => {
     const mathjax = await findMathJax()
     if (!mathjax) return
 
-    try {
-      const rendered = await mathjax.tex2chtmlPromise(latex, {
-        display,
-        em: 16,
-        ex: 8,
-        containerWidth: element.clientWidth || 780
-      })
-      element.replaceChildren(rendered)
-      element.classList.remove("lexxy-math--error")
-
-      // Refresh MathJax's global stylesheet so glyphs used by this equation render.
-      mathjax.startup.document.clear()
-      mathjax.startup.document.updateDocument()
-    } catch (error) {
-      element.textContent = latex
-      element.classList.add("lexxy-math--error")
-      element.title = `${error}`
+    const converter = resolveConverter(mathjax)
+    if (!converter) return
+
+    if (await convertInto(converter, element, latex, { display })) {
+      refreshDocumentStyles(mathjax)
     }
   })
+}
 
-  return renderQueue
+// Test-only: clears the module-level caches (memoized MathJax lookup, render
+// queue, warning flags) between test cases. Not part of the public API and
+// never re-exported from src/index.js.
+export function __resetMathjaxHelperForTests() {
+  warnedAboutMissingMathJax = false
+  warnedAboutMissingConverter = false
+  renderQueue = Promise.resolve()
+  mathjaxPromise = null
 }
 
 function sleep(milliseconds) {

package/src/index.js

@@ -1,3 +1,4 @@
 export { MathjaxExtension, INSERT_MATH_COMMAND } from "./extensions/mathjax_extension.js"
 export { MathNode, $createMathNode, $isMathNode } from "./nodes/math_node.js"
+export { typesetMath, startMathjaxAutoTypeset } from "./typeset.js"
 export { MathjaxExtension as default } from "./extensions/mathjax_extension.js"

package/src/nodes/math_node.js

@@ -75,7 +75,7 @@ export class MathNode extends DecoratorNode {
 
   exportDOM() {
     const element = document.createElement(this.__display ? "div" : "span")
-    element.className = "lexxy-math"
+    element.className = this.__display ? "lexxy-math lexxy-math--display" : "lexxy-math"
     element.setAttribute("data-latex", this.__latex)
     element.textContent = this.__latex
     return { element }

package/src/typeset.js

@@ -0,0 +1,5 @@
+// Entry point for display-only pages: @fnix/lexxy-mathjax/typeset pulls in
+// neither lexxy nor Lexical, unlike the "." entry which loads the whole
+// editor extension.
+export { typesetMath } from "./typeset_math.js"
+export { startMathjaxAutoTypeset } from "./auto_typeset.js"

package/src/typeset_math.js

@@ -0,0 +1,94 @@
+import {
+  convertInto,
+  findMathJax,
+  measureContainerWidth,
+  refreshDocumentStyles,
+  resolveConverter
+} from "./helpers/mathjax_helper.js"
+
+const DEFAULT_SELECTOR = "[data-latex]"
+const EDITOR_SELECTOR = "lexxy-editor, [contenteditable='true']"
+const OUTPUT_ATTRIBUTE = "data-lexxy-math-output"
+
+// Typesets every [data-latex] element under root (root itself included, so
+// typesetMath(element) works as well as typesetMath(document)). This is the
+// display-page counterpart to MathNode#createDOM: it turns saved
+// `<span data-latex="...">`/`<div data-latex="...">` markup back into
+// rendered math, for pages that have no editor at all.
+//
+// Never rejects: a single bad equation is reported in the result, not thrown.
+export async function typesetMath(root = document, {
+  output = "auto",
+  selector = DEFAULT_SELECTOR,
+  force = false,
+  accessible = true
+} = {}) {
+  const elements = collectElements(root, selector)
+  if (elements.length === 0) return { total: 0, typeset: 0, failed: 0, skipped: 0, mathjax: true }
+
+  const mathjax = await findMathJax()
+  if (!mathjax) return { total: elements.length, typeset: 0, failed: 0, skipped: 0, mathjax: false }
+
+  const converter = resolveConverter(mathjax, output)
+  if (!converter) return { total: elements.length, typeset: 0, failed: 0, skipped: 0, mathjax: true }
+
+  const result = { total: elements.length, typeset: 0, failed: 0, skipped: 0, mathjax: true }
+
+  try {
+    const pending = []
+
+    for (const element of elements) {
+      if (shouldSkip(element, converter, force)) {
+        result.skipped++
+        continue
+      }
+
+      pending.push({
+        element,
+        latex: element.getAttribute("data-latex"),
+        display: element.tagName === "DIV",
+        containerWidth: measureContainerWidth(element)
+      })
+    }
+
+    for (const { element, latex, display, containerWidth } of pending) {
+      applyPresentation(element, display, accessible, latex)
+
+      const succeeded = await convertInto(converter, element, latex, { display, containerWidth })
+      element.setAttribute(OUTPUT_ATTRIBUTE, succeeded ? converter.name : "error")
+
+      if (succeeded) result.typeset++
+      else result.failed++
+    }
+
+    if (result.typeset > 0) refreshDocumentStyles(mathjax)
+  } catch {
+    // typesetMath never rejects: any surprise here is reported via the
+    // per-element failed/typeset counts already recorded above.
+  }
+
+  return result
+}
+
+function collectElements(root, selector) {
+  const own = root.matches?.(selector) ? [ root ] : []
+  return own.concat([ ...root.querySelectorAll(selector) ])
+}
+
+function shouldSkip(element, converter, force) {
+  if (element.closest(EDITOR_SELECTOR)) return true
+  if (force) return false
+
+  const rendered = element.getAttribute(OUTPUT_ATTRIBUTE)
+  return rendered === converter.name || rendered === "error"
+}
+
+function applyPresentation(element, display, accessible, latex) {
+  element.classList.add("lexxy-math")
+  element.classList.toggle("lexxy-math--display", display)
+
+  if (accessible) {
+    element.setAttribute("role", "math")
+    element.setAttribute("aria-label", `Equation: ${latex}`)
+  }
+}

package/styles/lexxy-mathjax.css

@@ -4,6 +4,9 @@
   display: inline-block;
   padding: 0 0.1em;
   border-radius: 0.2em;
+}
+
+lexxy-editor .lexxy-math {
   cursor: pointer;
 }