@pie-lib/math-input-mathlive 1.0.6 → 1.0.8

package/src/__tests__/keypad-render.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import KeyPad, { LatexLabel } from '../keypad';
+
+/**
+ * Keypad behaviour that is new in this package: labels are static markup from
+ * convertLatexToMarkup (the MathQuill version created a live StaticMath per
+ * button), with a raw-latex fallback when the engine is unavailable.
+ */
+describe('LatexLabel', () => {
+  it('falls back to raw latex when MathLive is unavailable', () => {
+    // jsdom cannot load MathLive, so latexToMarkup returns '' - the button must
+    // still show something rather than render blank.
+    const { container } = render(<LatexLabel latex={'\\pi'} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('re-renders when the latex prop changes', () => {
+    const { container, rerender } = render(<LatexLabel latex={'\\pi'} />);
+
+    rerender(<LatexLabel latex={'\\theta'} />);
+
+    expect(container.textContent).toContain('\\theta');
+  });
+
+  it('does not warn more than once about a missing engine', async () => {
+    LatexLabel.warned = false;
+
+    const a = new LatexLabel({ latex: '\\pi' });
+    const b = new LatexLabel({ latex: '\\theta' });
+
+    a.state = { markup: '' };
+    b.state = { markup: '' };
+    a.setState = () => {};
+    b.setState = () => {};
+
+    await a.componentDidMount();
+    await b.componentDidMount();
+
+    expect(LatexLabel.warned).toBe(true);
+  });
+});
+
+describe('KeyPad', () => {
+  const key = (over = {}) => ({ name: 'x', label: 'x', write: 'x', category: 'vars', ...over });
+
+  it('renders a button per key', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[key(), key({ name: 'y', label: 'y' })]]} />);
+
+    expect(container.querySelectorAll('button').length).toBe(2);
+  });
+
+  it('calls onPress with the whole key definition', () => {
+    const onPress = jest.fn();
+    const k = key();
+    const { container } = render(<KeyPad onPress={onPress} baseSet={[[k]]} />);
+
+    container.querySelector('button').click();
+
+    expect(onPress).toHaveBeenCalledWith(k);
+  });
+
+  it('renders a latex key through LatexLabel', () => {
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[{ name: 'pi', latex: '\\pi' }]]} />);
+
+    expect(container.textContent).toContain('\\pi');
+  });
+
+  it('disables the decimal separators when noDecimal is set', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const comma = key({ name: ',', label: ',', write: ',' });
+    const { container } = render(<KeyPad onPress={() => {}} noDecimal baseSet={[[dot, comma]]} />);
+
+    const disabled = Array.from(container.querySelectorAll('button')).filter((b) => b.disabled);
+
+    expect(disabled.length).toBe(2);
+  });
+
+  it('leaves the separators enabled otherwise', () => {
+    const dot = key({ name: '.', label: '.', write: '.' });
+    const { container } = render(<KeyPad onPress={() => {}} baseSet={[[dot]]} />);
+
+    expect(container.querySelector('button').disabled).toBe(false);
+  });
+
+  it('renders a placeholder for empty grid slots', () => {
+    expect(() => render(<KeyPad onPress={() => {}} baseSet={[[null]]} />)).not.toThrow();
+  });
+
+  it('notifies setKeypadInteraction on pointer interaction', () => {
+    const setKeypadInteraction = jest.fn();
+    const { container } = render(
+      <KeyPad onPress={() => {}} setKeypadInteraction={setKeypadInteraction} baseSet={[[key()]]} />,
+    );
+
+    container.firstChild.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+
+    expect(setKeypadInteraction).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the mode as a class so mode-specific styling applies', () => {
+    const { container } = render(<KeyPad onPress={() => {}} mode="language" baseSet={[[key()]]} />);
+
+    expect(container.firstChild.className).toContain('language');
+  });
+
+  it('drops the base set for the modes that supply their own keys', () => {
+    const { container } = render(
+      <KeyPad onPress={() => {}} mode="language" baseSet={[[key(), key()]]} additionalKeys={[[key()]]} />,
+    );
+
+    // base set ignored, only the additional key renders
+    expect(container.querySelectorAll('button').length).toBe(1);
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = render(<KeyPad onPress={() => {}} controlledKeypadMode baseSet={[[key()]]} />);
+
+    expect(() => unmount()).not.toThrow();
+  });
+});

package/src/__tests__/latex-bridge.test.js

@@ -1,4 +1,12 @@
-import { toMathLive, fromMathLive, fieldIds, keyToAction, NEWLINE_EMBED, DEFAULT_FIELD_ID } from '../latex-bridge';
+import {
+  toMathLive,
+  fromMathLive,
+  fieldIds,
+  keyToAction,
+  toNativeCommands,
+  NEWLINE_EMBED,
+  DEFAULT_FIELD_ID,
+} from '../latex-bridge';
 
 describe('latex-bridge', () => {
   describe('toMathLive', () => {
@@ -64,6 +72,32 @@ describe('latex-bridge', () => {
       expect(fromMathLive(toMathLive(stored))).toEqual(stored);
     });
 
+    // MathLive serialises empty slots as \placeholder{}, which MathJax (used by
+    // @pie-lib/math-rendering for prompts/previews) renders as red error text.
+    it('strips unnamed placeholders that MathLive adds', () => {
+      expect(fromMathLive('\\longdiv{\\placeholder{}}')).toEqual('\\longdiv{}');
+      expect(fromMathLive('\\frac{\\placeholder{}}{\\placeholder{}}')).toEqual('\\frac{}{}');
+    });
+
+    it('keeps content inside an unnamed placeholder', () => {
+      expect(fromMathLive('\\sqrt{\\placeholder{7}}')).toEqual('\\sqrt{7}');
+    });
+
+    it('handles a bare \\placeholder with no argument', () => {
+      expect(fromMathLive('\\longdiv{\\placeholder}')).toEqual('\\longdiv{}');
+    });
+
+    it('never leaks the token \\placeholder', () => {
+      ['\\longdiv{\\placeholder{}}', '\\frac{\\placeholder{}}{x}', '\\placeholder{}'].forEach((l) => {
+        expect(fromMathLive(l)).not.toContain('\\placeholder');
+      });
+    });
+
+    it('still maps NAMED placeholders to answer blocks', () => {
+      // named ones are answer blocks and must survive
+      expect(fromMathLive('\\placeholder[r1]{}')).toEqual('\\MathQuillMathField[r1]{}');
+    });
+
     it('round-trips answer blocks combined with newlines', () => {
       const stored = `\\MathQuillMathField[r1]{}${NEWLINE_EMBED}y`;
 
@@ -71,6 +105,58 @@ describe('latex-bridge', () => {
     });
   });
 
+  // A MathLive macro serialises from the arguments it was created with, so text
+  // typed inside its expansion never comes back out of getValue('latex').
+  // Argument-taking pie commands must therefore become native constructs before
+  // they reach a mathfield.
+  describe('toNativeCommands', () => {
+    it('expands \\longdiv to native \\enclose', () => {
+      expect(toNativeCommands('\\longdiv{1234}')).toEqual('\\enclose{longdiv}{1234}');
+      expect(toNativeCommands('\\longdiv{}')).toEqual('\\enclose{longdiv}{}');
+    });
+
+    it('expands \\overarc to native \\overparen', () => {
+      expect(toNativeCommands('\\overarc{AB}')).toEqual('\\overparen{AB}');
+    });
+
+    it('expands \\abs to native \\left|..\\right|', () => {
+      expect(toNativeCommands('\\abs{x}')).toEqual('\\left|x\\right|');
+      expect(toNativeCommands('\\abs{}')).toEqual('\\left|\\right|');
+    });
+
+    it('handles nested braces inside \\abs', () => {
+      expect(toNativeCommands('\\abs{\\frac{1}{2}}')).toEqual('\\left|\\frac{1}{2}\\right|');
+    });
+
+    it('handles several occurrences', () => {
+      expect(toNativeCommands('\\abs{a}+\\abs{b}')).toEqual('\\left|a\\right|+\\left|b\\right|');
+      expect(toNativeCommands('\\longdiv{1}\\longdiv{2}')).toEqual('\\enclose{longdiv}{1}\\enclose{longdiv}{2}');
+    });
+
+    it('leaves other latex untouched', () => {
+      ['\\frac{1}{2}', '\\pi', '\\sqrt{x}', '\\overline{AB}'].forEach((l) => {
+        expect(toNativeCommands(l)).toEqual(l);
+      });
+    });
+
+    it('handles nullish input', () => {
+      expect(toNativeCommands(undefined)).toEqual('');
+      expect(toNativeCommands('')).toEqual('');
+    });
+
+    it('is applied by toMathLive', () => {
+      expect(toMathLive('\\longdiv{5}')).toEqual('\\enclose{longdiv}{5}');
+    });
+
+    it('does not leave a pie macro in what reaches the field', () => {
+      ['\\longdiv{7}', '\\abs{7}', '\\overarc{7}'].forEach((l) => {
+        const out = toMathLive(l);
+
+        expect(out).not.toMatch(/\\longdiv|\\abs|\\overarc/);
+      });
+    });
+  });
+
   describe('fieldIds', () => {
     it('returns ids in document order', () => {
       expect(fieldIds('\\MathQuillMathField[r1]{}+\\MathQuillMathField[r2]{}')).toEqual(['r1', 'r2']);

package/src/__tests__/mathlive-instance.test.js

@@ -63,6 +63,26 @@ describe('mathlive-instance', () => {
       expect(macros.longdiv).toBeDefined();
       expect(macros.napprox).toEqual('\\not\\approx');
     });
+
+    // Argument-taking macros exist only so previously authored latex parses.
+    // Editing never goes through them: MathLive serialises a macro from its
+    // original arguments, so typed content never comes back out.
+    it('argument-taking macros are plain parse-only definitions', () => {
+      ['longdiv', 'overarc', 'abs'].forEach((name) => {
+        expect(typeof instance.PIE_MACROS[name]).toBe('string');
+        expect(instance.PIE_MACROS[name]).toContain('#1');
+      });
+    });
+
+    it('argument-less symbols stay atomic', () => {
+      ['perpendicular', 'square', 'degree', 'napprox', 'parallelogram'].forEach((name) => {
+        expect(typeof instance.PIE_MACROS[name]).toBe('string');
+      });
+    });
+
+    it('longdiv matches the MathJax macro used by math-rendering', () => {
+      expect(instance.PIE_MACROS.longdiv).toEqual('\\enclose{longdiv}{#1}');
+    });
   });
 
   describe('applyStaticMath', () => {

package/src/__tests__/mount-race.test.jsx

@@ -0,0 +1,129 @@
+/**
+ * MathLive loads asynchronously, so `componentDidMount` resumes after an await
+ * before appending a <math-field>. Two orderings must both hold:
+ *
+ *  - StrictMode dev double-mount (mount -> unmount -> mount on the SAME
+ *    instance) must end up with exactly ONE field. A boolean "unmounted" flag
+ *    latches here and blocks the remount entirely - which is why this uses a
+ *    generation counter.
+ *  - A genuine unmount while the load is in flight must append nothing.
+ *
+ * MathLive cannot load under jsdom, so it is mocked with a minimal stub in
+ * order to actually count appended fields.
+ */
+jest.mock('../mathlive-instance', () => {
+  // Must be a real DOM node: the component uses replaceChildren(), which
+  // rejects anything that is not a Node. Returning an element from the
+  // constructor replaces `this`, so callers get a genuine <math-field>.
+  class FakeMathfieldElement {
+    constructor() {
+      // `global` rather than `document`: jest forbids out-of-scope variables in
+      // a mock factory, and `global` is on its allow-list.
+      const el = global.document.createElement('math-field');
+
+      el.value = '';
+      el.getValue = () => el.value;
+
+      return el;
+    }
+  }
+
+  return {
+    loadMathLive: () => Promise.resolve({ MathfieldElement: FakeMathfieldElement }),
+    getMacros: () => ({}),
+    // must mirror the real export, otherwise the component sets `undefined`
+    MATH_MODE_SPACE: '\\ ',
+    latexToMarkup: (l) => `<span>${l}</span>`,
+  };
+});
+
+// eslint-disable-next-line import/first
+import Input from '../mf/input';
+
+const holderFor = (cmp) => {
+  const el = document.createElement('span');
+
+  cmp.holderRef = { current: el };
+
+  return el;
+};
+
+const fieldCount = (el) => Array.from(el.childNodes).filter((n) => n.tagName === 'MATH-FIELD').length;
+
+describe('async mount race', () => {
+  it('StrictMode mount -> unmount -> mount yields exactly one field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const first = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    const second = input.componentDidMount();
+
+    await Promise.all([first, second]);
+
+    expect(fieldCount(el)).toBe(1);
+    expect(input.mathField).toBeDefined();
+  });
+
+  it('appends nothing when unmounted while the load is in flight', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    const pending = input.componentDidMount();
+
+    input.componentWillUnmount();
+
+    await pending;
+
+    expect(fieldCount(el)).toBe(0);
+    expect(input.mathField).toBeUndefined();
+  });
+
+  it('a normal single mount creates the field', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  it('repeated mounts never accumulate fields', async () => {
+    const input = new Input({});
+    const el = holderFor(input);
+
+    await input.componentDidMount();
+    await input.componentDidMount();
+    await input.componentDidMount();
+
+    expect(fieldCount(el)).toBe(1);
+  });
+
+  // MathLive's mathModeSpace defaults to '', which makes the spacebar a no-op.
+  it('configures the spacebar so a space can be typed', async () => {
+    const input = new Input({});
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    // a LaTeX control space - what MathQuill produced, and MathJax understands
+    expect(input.mathField.mathModeSpace).toEqual('\\ ');
+    expect(input.mathField.mathModeSpace).not.toEqual('');
+  });
+
+  it('reports itself through innerRef on mount and clears it on unmount', async () => {
+    const innerRef = jest.fn();
+    const input = new Input({ innerRef });
+
+    holderFor(input);
+    await input.componentDidMount();
+
+    expect(innerRef).toHaveBeenCalledWith(input);
+
+    input.componentWillUnmount();
+
+    expect(innerRef).toHaveBeenLastCalledWith(null);
+  });
+});

package/src/__tests__/static-prompts.test.jsx

@@ -0,0 +1,251 @@
+import Static from '../mf/static';
+
+/**
+ * The answer-block contract: `\MathQuillMathField[id]{}` in stored latex becomes
+ * a MathLive prompt, and sub-field values/focus are surfaced through the same
+ * callbacks @pie-lib/math-input exposed (`onSubFieldChange`, `onSubFieldFocus`,
+ * `getFieldName`, `setInput`).
+ *
+ * Driven against a stub mathfield: a real <math-field> needs a browser, and what
+ * matters here is the mapping, not MathLive's rendering.
+ */
+const stubField = (values = {}, selection = null) => ({
+  values: { ...values },
+  getPrompts() {
+    return Object.keys(this.values);
+  },
+  getPromptValue(id) {
+    return this.values[id];
+  },
+  setPromptValue(id, v) {
+    this.values[id] = v;
+  },
+  getPromptRange(id) {
+    const i = Object.keys(this.values).indexOf(id);
+
+    return [i * 10, i * 10 + 5];
+  },
+  selection,
+  addEventListener() {},
+  removeEventListener() {},
+  focus() {
+    this.focused = true;
+  },
+  blur() {
+    this.blurred = true;
+  },
+  remove() {},
+});
+
+const make = (props = {}) => new Static({ latex: 'x=\\MathQuillMathField[r1]{}', getFieldName: () => {}, ...props });
+
+describe('Static: answer blocks / prompts', () => {
+  describe('isInteractive', () => {
+    it('is interactive when the latex has answer blocks', () => {
+      expect(make({ latex: 'x=\\MathQuillMathField[r1]{}' }).isInteractive()).toBe(true);
+      expect(make({ latex: 'x=\\placeholder[r1]{}' }).isInteractive()).toBe(true);
+    });
+
+    it('is display-only for plain latex', () => {
+      expect(make({ latex: '\\frac{1}{2}' }).isInteractive()).toBe(false);
+      expect(make({ latex: '' }).isInteractive()).toBe(false);
+    });
+  });
+
+  describe('values', () => {
+    it('returns {} before the field exists', () => {
+      expect(make().values()).toEqual({});
+    });
+
+    it('maps each prompt id to its stored-form latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7', r2: '\\placeholder{}' });
+
+      // \placeholder must not leak into stored values
+      expect(s.values()).toEqual({ r1: '7', r2: '' });
+    });
+  });
+
+  describe('promptHandle / innerFields', () => {
+    it('exposes a MathQuill-field-like handle with get/set latex', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '7' });
+
+      const h = s.promptHandle('r1');
+
+      expect(h.id).toEqual('r1');
+      expect(h.latex()).toEqual('7');
+
+      h.latex('9');
+      expect(s.mathField.values.r1).toEqual('9');
+    });
+
+    it('handle latex() is safe with no field', () => {
+      expect(make().promptHandle('r1').latex()).toEqual('');
+    });
+
+    it('innerFields returns one handle per prompt', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+
+      expect(s.innerFields.map((f) => f.id)).toEqual(['r1', 'r2']);
+      expect(make().innerFields).toEqual([]);
+    });
+  });
+
+  describe('onSubFieldChange', () => {
+    it('fires only for prompts whose value changed', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange });
+
+      s.mathField = stubField({ r1: '1', r2: '2' });
+      s.promptValues = { r1: '1', r2: '2' };
+
+      s.mathField.values.r2 = '5';
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledTimes(1);
+      expect(onSubFieldChange).toHaveBeenCalledWith('r2', '5');
+    });
+
+    it('uses getFieldName when it returns a name', () => {
+      const onSubFieldChange = jest.fn();
+      const s = make({ onSubFieldChange, getFieldName: (handle) => 'named-' + handle.id });
+
+      s.mathField = stubField({ r1: '1' });
+      s.promptValues = {};
+
+      s.onPromptInput();
+
+      expect(onSubFieldChange).toHaveBeenCalledWith('named-r1', '1');
+    });
+
+    it('still tracks values when no callback is supplied', () => {
+      const s = make();
+
+      s.mathField = stubField({ r1: '3' });
+      s.onPromptInput();
+
+      expect(s.promptValues).toEqual({ r1: '3' });
+    });
+  });
+
+  describe('onSubFieldFocus', () => {
+    it('reports the prompt containing the selection, plus setInput', () => {
+      const onSubFieldFocus = jest.fn();
+      const setInput = jest.fn();
+      const s = make({ onSubFieldFocus, setInput });
+
+      // r2 occupies offsets 10..15
+      s.mathField = stubField({ r1: '', r2: '' }, { ranges: [[11, 11]] });
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).toHaveBeenCalledTimes(1);
+      expect(onSubFieldFocus.mock.calls[0][0]).toEqual('r2');
+      expect(onSubFieldFocus.mock.calls[0][1].id).toEqual('r2');
+      expect(setInput).toHaveBeenCalled();
+    });
+
+    it('does nothing without a selection', () => {
+      const onSubFieldFocus = jest.fn();
+      const s = make({ onSubFieldFocus });
+
+      s.mathField = stubField({ r1: '' }, null);
+      s.onPromptFocus();
+
+      expect(onSubFieldFocus).not.toHaveBeenCalled();
+    });
+
+    it('does not throw when the field is missing', () => {
+      const s = make({ onSubFieldFocus: jest.fn() });
+
+      expect(() => s.onPromptFocus()).not.toThrow();
+    });
+  });
+
+  describe('accessibility announcements', () => {
+    afterEach(() => {
+      document.body.innerHTML = '';
+    });
+
+    it('creates a polite off-screen live region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+
+      expect(s.liveRegion.getAttribute('aria-live')).toEqual('polite');
+      expect(s.liveRegion.getAttribute('aria-atomic')).toEqual('true');
+      expect(document.body.contains(s.liveRegion)).toBe(true);
+
+      s.removeLiveRegion();
+      expect(s.liveRegion).toBeUndefined();
+    });
+
+    it('does not create a second region', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      const first = s.liveRegion;
+
+      s.createLiveRegion();
+      expect(s.liveRegion).toBe(first);
+      s.removeLiveRegion();
+    });
+
+    it('announces when typed input expands into a command', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      // grew by more than one char AND gained a backslash => a conversion
+      s.announceConversion({ r1: 'x\\frac{}{}' });
+
+      expect(s.liveRegion.textContent).toEqual('Converted to math symbol');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce ordinary typing', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x' };
+      s.announceConversion({ r1: 'xy' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+
+    it('does not announce a deletion', () => {
+      const s = make();
+
+      s.createLiveRegion();
+      s.promptValues = { r1: 'x\\frac{}{}' };
+      s.onKeyDown({ key: 'Backspace' });
+      s.announceConversion({ r1: 'x' });
+
+      expect(s.liveRegion.textContent).toEqual('');
+      s.removeLiveRegion();
+    });
+  });
+
+  describe('focus / blur', () => {
+    it('delegates to the field and is safe without one', () => {
+      const s = make();
+
+      expect(() => {
+        s.focus();
+        s.blur();
+      }).not.toThrow();
+
+      s.mathField = stubField();
+      s.focus();
+      s.blur();
+
+      expect(s.mathField.focused).toBe(true);
+      expect(s.mathField.blurred).toBe(true);
+    });
+  });
+});

package/src/keypad/index.jsx

@@ -57,28 +57,6 @@ const LabelHolder = styled('span')(() => ({
   },
 }));
 
-/**
- * A visible stand-in for an empty argument slot.
- *
- * Key latex uses empty groups to show the shape of a command - `\frac{}{}`,
- * `\overline{}`, `x^{}`. MathQuill drew those as a shaded box (`.mq-empty`);
- * MathLive renders `{}` as nothing at all, so those buttons come out blank.
- * `\placeholder{}` is not a substitute: in static markup it renders as a
- * non-breaking space (the editable box only exists inside a live mathfield), so
- * an actual glyph is required.
- *
- * Tagged with `pie-empty` so it can be muted via CSS.
- */
-const EMPTY_SLOT = '\\htmlData{pie-empty=1}{\\unicode{"25AB}}';
-const EMPTY_GROUP_REGEX = /\{\s*\}/g;
-
-/**
- * Display-only: give empty groups something visible.
- * Never use this for the value that gets inserted into the field - the key's
- * own latex is what gets typed.
- */
-export const latexForDisplay = (latex) => (latex || '').replace(EMPTY_GROUP_REGEX, `{${EMPTY_SLOT}}`);
-
 export class LatexLabel extends React.Component {
   static propTypes = {
     latex: PropTypes.string.isRequired,
@@ -86,7 +64,7 @@ export class LatexLabel extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { markup: latexToMarkup(latexForDisplay(props.latex)) };
+    this.state = { markup: latexToMarkup(props.latex) };
   }
 
   async componentDidMount() {
@@ -101,7 +79,7 @@ export class LatexLabel extends React.Component {
       return;
     }
 
-    const markup = latexToMarkup(latexForDisplay(this.props.latex));
+    const markup = latexToMarkup(this.props.latex);
 
     if (markup) {
       this.setState({ markup });
@@ -119,7 +97,7 @@ export class LatexLabel extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.latex !== this.props.latex) {
-      this.setState({ markup: latexToMarkup(latexForDisplay(this.props.latex)) });
+      this.setState({ markup: latexToMarkup(this.props.latex) });
     }
   }