@pie-lib/math-input-mathlive 1.0.0

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

@@ -0,0 +1,151 @@
+import {
+  toMathLive,
+  fromMathLive,
+  fieldIds,
+  keyToAction,
+  NEWLINE_EMBED,
+  DEFAULT_FIELD_ID,
+} from '../latex-bridge';
+
+describe('latex-bridge', () => {
+  describe('toMathLive', () => {
+    it('passes plain latex through', () => {
+      expect(toMathLive('\\frac{1}{2}')).toEqual('\\frac{1}{2}');
+    });
+
+    it('handles empty/nullish', () => {
+      expect(toMathLive('')).toEqual('');
+      expect(toMathLive(undefined)).toEqual('');
+      expect(toMathLive(null)).toEqual('');
+    });
+
+    it('converts a newLine embed to a multiline environment', () => {
+      expect(toMathLive(`a${NEWLINE_EMBED}b`)).toEqual('\\displaylines{a \\\\ b}');
+    });
+
+    it('converts multiple newLine embeds', () => {
+      expect(toMathLive(`a${NEWLINE_EMBED}b${NEWLINE_EMBED}c`)).toEqual('\\displaylines{a \\\\ b \\\\ c}');
+    });
+
+    it('converts MathQuill answer blocks to placeholders', () => {
+      expect(toMathLive('x=\\MathQuillMathField[r1]{}')).toEqual('x=\\placeholder[r1]{}');
+    });
+
+    it('preserves answer block content', () => {
+      expect(toMathLive('\\MathQuillMathField[r2]{7}')).toEqual('\\placeholder[r2]{7}');
+    });
+
+    it('defaults an unnamed answer block id', () => {
+      expect(toMathLive('\\MathQuillMathField[]{}')).toEqual(`\\placeholder[${DEFAULT_FIELD_ID}]{}`);
+    });
+
+    it('handles answer blocks and newlines together', () => {
+      expect(toMathLive(`\\MathQuillMathField[r1]{}${NEWLINE_EMBED}x`)).toEqual(
+        '\\displaylines{\\placeholder[r1]{} \\\\ x}',
+      );
+    });
+  });
+
+  describe('fromMathLive', () => {
+    it('passes plain latex through', () => {
+      expect(fromMathLive('\\frac{1}{2}')).toEqual('\\frac{1}{2}');
+    });
+
+    it('unwraps displaylines back to newLine embeds', () => {
+      expect(fromMathLive('\\displaylines{a \\\\ b}')).toEqual(`a${NEWLINE_EMBED}b`);
+    });
+
+    it('converts placeholders back to MathQuill answer blocks', () => {
+      expect(fromMathLive('x=\\placeholder[r1]{}')).toEqual('x=\\MathQuillMathField[r1]{}');
+    });
+
+    it('round-trips a newline document', () => {
+      const stored = `a${NEWLINE_EMBED}b${NEWLINE_EMBED}c`;
+
+      expect(fromMathLive(toMathLive(stored))).toEqual(stored);
+    });
+
+    it('round-trips an answer-block document', () => {
+      const stored = 'x=\\MathQuillMathField[r1]{}+\\MathQuillMathField[r2]{3}';
+
+      expect(fromMathLive(toMathLive(stored))).toEqual(stored);
+    });
+
+    it('round-trips answer blocks combined with newlines', () => {
+      const stored = `\\MathQuillMathField[r1]{}${NEWLINE_EMBED}y`;
+
+      expect(fromMathLive(toMathLive(stored))).toEqual(stored);
+    });
+  });
+
+  describe('fieldIds', () => {
+    it('returns ids in document order', () => {
+      expect(fieldIds('\\MathQuillMathField[r1]{}+\\MathQuillMathField[r2]{}')).toEqual(['r1', 'r2']);
+    });
+
+    it('returns [] when there are none', () => {
+      expect(fieldIds('x+y')).toEqual([]);
+      expect(fieldIds(undefined)).toEqual([]);
+    });
+
+    it('is repeatable (regex lastIndex is reset)', () => {
+      const latex = '\\MathQuillMathField[r1]{}';
+
+      expect(fieldIds(latex)).toEqual(['r1']);
+      expect(fieldIds(latex)).toEqual(['r1']);
+    });
+  });
+
+  describe('keyToAction', () => {
+    it('prefers latex when there is no command', () => {
+      expect(keyToAction({ latex: '\\pi', write: 'p' })).toEqual({ type: 'insert', value: '\\pi' });
+    });
+
+    it('uses write', () => {
+      expect(keyToAction({ write: 'x' })).toEqual({ type: 'insert', value: 'x' });
+    });
+
+    it('expands commands that take arguments into placeholders', () => {
+      expect(keyToAction({ command: '\\frac' })).toEqual({ type: 'insert', value: '\\frac{#?}{#?}' });
+      expect(keyToAction({ command: '\\sqrt' })).toEqual({ type: 'insert', value: '\\sqrt{#?}' });
+      expect(keyToAction({ command: '^' })).toEqual({ type: 'insert', value: '^{#?}' });
+    });
+
+    it('passes argument-less commands through', () => {
+      expect(keyToAction({ command: '\\pi' })).toEqual({ type: 'insert', value: '\\pi' });
+    });
+
+    it('concatenates array commands (MathQuill cmd() applied them in sequence)', () => {
+      // Measured Angle
+      expect(keyToAction({ command: ['m', '\\angle'] })).toEqual({ type: 'insert', value: 'm\\angle' });
+      // log base n - the `_` part must still expand to a placeholder
+      expect(keyToAction({ command: ['\\log', '_'] })).toEqual({ type: 'insert', value: '\\log_{#?}' });
+    });
+
+    it('always returns a string value for insert actions', () => {
+      [{ command: ['m', '\\angle'] }, { command: '\\frac' }, { write: 'x' }, { latex: '\\pi' }].forEach((k) => {
+        expect(typeof keyToAction(k).value).toBe('string');
+      });
+    });
+
+    it('maps keystrokes to MathLive selectors', () => {
+      expect(keyToAction({ keystroke: 'Left' })).toEqual({ type: 'command', value: 'moveToPreviousChar' });
+      expect(keyToAction({ keystroke: 'Right' })).toEqual({ type: 'command', value: 'moveToNextChar' });
+      expect(keyToAction({ keystroke: 'Backspace' })).toEqual({ type: 'command', value: 'deleteBackward' });
+    });
+
+    it('returns undefined for unknown/empty input', () => {
+      expect(keyToAction(undefined)).toBeUndefined();
+      expect(keyToAction({})).toBeUndefined();
+      expect(keyToAction({ keystroke: 'Nope' })).toBeUndefined();
+    });
+
+    it('latex wins over command only when command is absent', () => {
+      // a key with both should use the command path (matches MathInput.keypadPress)
+      expect(keyToAction({ latex: '\\frac{}{}', command: '\\frac' })).toEqual({
+        type: 'insert',
+        value: '\\frac{#?}{#?}',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,130 @@
+describe('mathlive-instance', () => {
+  let instance;
+
+  beforeEach(() => {
+    jest.resetModules();
+    // eslint-disable-next-line global-require
+    instance = require('../mathlive-instance');
+    instance.__resetEmbeds();
+  });
+
+  describe('registerEmbed', () => {
+    it('registers a known embed and exposes it as a macro', () => {
+      instance.registerEmbed('answerBlock', () => ({
+        htmlString: '<div class="answerBlock"></div>',
+        latex: () => '\\embed{answerBlock}[]',
+      }));
+
+      expect(instance.registeredEmbeds()).toEqual(['answerBlock']);
+      // The macro tags output with data-embed so CSS can target it, replacing
+      // MathQuill's htmlString hook.
+      expect(instance.getMacros().answerBlock).toEqual('\\htmlData{embed=answerBlock}{\\placeholder{}}');
+    });
+
+    it('registers newLine as a harmless macro (it is handled by latex-bridge)', () => {
+      instance.registerEmbed('newLine', () => ({ latex: () => '\\embed{newLine}[]' }));
+
+      expect(instance.getMacros().newLine).toEqual('\\htmlData{embed=newLine}{}');
+    });
+
+    it('falls back to a placeholder for an unknown embed', () => {
+      instance.registerEmbed('somethingCustom', () => ({ htmlString: '<b>x</b>' }));
+
+      expect(instance.getMacros().somethingCustom).toEqual('\\htmlData{embed=somethingCustom}{\\placeholder{}}');
+    });
+
+    it('honours an explicit mathliveLatex from the factory', () => {
+      instance.registerEmbed('custom', () => ({ mathliveLatex: '\\alpha' }));
+
+      expect(instance.getMacros().custom).toEqual('\\htmlData{embed=custom}{\\alpha}');
+    });
+
+    it('does not throw when the factory throws', () => {
+      expect(() => instance.registerEmbed('bad', () => {
+        throw new Error('boom');
+      })).not.toThrow();
+
+      expect(instance.registeredEmbeds()).toEqual(['bad']);
+    });
+
+    it('ignores bad arguments', () => {
+      instance.registerEmbed(undefined, () => ({}));
+      instance.registerEmbed('noFactory', undefined);
+
+      expect(instance.registeredEmbeds()).toEqual([]);
+    });
+
+    it('always includes the pie macro set', () => {
+      const macros = instance.getMacros();
+
+      expect(macros.parallelogram).toBeDefined();
+      expect(macros.longdiv).toBeDefined();
+      expect(macros.napprox).toEqual('\\not\\approx');
+    });
+  });
+
+  describe('applyStaticMath', () => {
+    it('returns undefined without an element', () => {
+      expect(instance.applyStaticMath(null, 'x')).toBeUndefined();
+    });
+
+    it('returns undefined when MathLive has not loaded', () => {
+      const el = document.createElement('div');
+
+      expect(instance.applyStaticMath(el, 'x')).toBeUndefined();
+    });
+  });
+
+  describe('configureFonts', () => {
+    // MathLive's default fontsDirectory is the relative './fonts/', which it
+    // resolves against its own (empty, when bundled) script url and throws
+    // "Invalid base URL" from loadFonts. Paths must become absolute.
+    it('is exported and callable before MathLive loads', () => {
+      expect(typeof instance.configureFonts).toBe('function');
+      expect(() => instance.configureFonts('/mathlive-fonts')).not.toThrow();
+    });
+
+    it('accepts null to disable font loading', () => {
+      expect(() => instance.configureFonts(null)).not.toThrow();
+    });
+
+    it('applies an absolute url to an already-loaded MathfieldElement', () => {
+      const MathfieldElement = {};
+
+      // simulate a loaded instance
+      instance.__setMathLiveForTest({ MathfieldElement });
+      instance.configureFonts('/mathlive-fonts');
+
+      expect(MathfieldElement.fontsDirectory).toEqual(`${document.baseURI.replace(/\/$/, '')}/mathlive-fonts`);
+      expect(MathfieldElement.fontsDirectory.startsWith('http')).toBe(true);
+    });
+
+    it('leaves a fully-qualified url untouched', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement });
+      instance.configureFonts('https://cdn.example.com/fonts');
+
+      expect(MathfieldElement.fontsDirectory).toEqual('https://cdn.example.com/fonts');
+    });
+
+    it('passes null through rather than resolving it', () => {
+      const MathfieldElement = {};
+
+      instance.__setMathLiveForTest({ MathfieldElement });
+      instance.configureFonts(null);
+
+      expect(MathfieldElement.fontsDirectory).toBeNull();
+    });
+  });
+
+  describe('latexToMarkup', () => {
+    it('returns empty string when MathLive is not loaded', () => {
+      expect(instance.latexToMarkup('\\pi')).toEqual('');
+    });
+
+    it('returns empty string for empty latex', () => {
+      expect(instance.latexToMarkup('')).toEqual('');
+    });
+  });
+});

package/src/horizontal-keypad.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { keysForGrade, normalizeAdditionalKeys } from './keys/grades';
+import { extendKeySet } from './keys/utils';
+import Keypad from './keypad';
+
+/**
+ * Maps a key definition to the legacy `{value, type}` shape that
+ * @pie-lib/math-toolbar consumes. Unchanged from the MathQuill implementation:
+ * the shape is part of the 4.x-compatible contract, and translation to MathLive
+ * happens later, in `latex-bridge.keyToAction`.
+ */
+const toOldModel = (d) => {
+  if (d.command) {
+    return { value: d.command, type: 'command' };
+  } else if (d.write) {
+    return { value: d.write };
+  } else if (d.keystroke) {
+    return { type: 'cursor', value: d.keystroke };
+  }
+};
+
+export default class HorizontalKeypad extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    controlledKeypadMode: PropTypes.bool,
+    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    layoutForKeyPad: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    noDecimal: PropTypes.bool,
+    additionalKeys: PropTypes.array,
+    setKeypadInteraction: PropTypes.func,
+  };
+
+  static defaultProps = {
+    mode: 'scientific',
+    noDecimal: false,
+    additionalKeys: [],
+  };
+
+  keypadPress = (data) => {
+    this.props.onClick(toOldModel(data));
+  };
+
+  render() {
+    const {
+      mode,
+      onFocus,
+      controlledKeypadMode,
+      noDecimal,
+      className,
+      additionalKeys,
+      layoutForKeyPad,
+      setKeypadInteraction,
+    } = this.props;
+    const normalizedKeys = normalizeAdditionalKeys(additionalKeys);
+
+    return (
+      <Keypad
+        className={className}
+        controlledKeypadMode={controlledKeypadMode}
+        onFocus={onFocus}
+        noDecimal={noDecimal}
+        layoutForKeyPad={layoutForKeyPad}
+        additionalKeys={extendKeySet(keysForGrade(mode), normalizedKeys)}
+        onPress={this.keypadPress}
+        mode={mode}
+        setKeypadInteraction={setKeypadInteraction}
+      />
+    );
+  }
+}

package/src/index.jsx

@@ -0,0 +1,63 @@
+import { keysForGrade } from './keys/grades';
+import * as keys from './keys';
+
+import MathInput from './math-input';
+import HorizontalKeypad from './horizontal-keypad';
+import KeyPad from './keypad';
+
+import * as mf from './mf';
+import {
+  registerEmbed,
+  applyStaticMath,
+  latexToMarkup,
+  loadMathLive,
+  configureFonts,
+  getMacros,
+  PIE_MACROS,
+} from './mathlive-instance';
+import { toMathLive, fromMathLive, keyToAction, NEWLINE_EMBED } from './latex-bridge';
+
+const addLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s : `\\(${s}`);
+const addRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s : `${s}\\)`);
+const rmLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s.substring(2) : s);
+const rmRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s.substring(0, s.length - 2) : s);
+
+const addBrackets = (s) => addRightBracket(addLeftBracket(s));
+const removeBrackets = (s) => rmRightBracket(rmLeftBracket(s));
+
+/**
+ * `updateSpans` is intentionally a no-op.
+ *
+ * In @pie-lib/math-input it patched MathQuill's rendered DOM by walking
+ * `span[mathquill-command-id]` to resize the parallel glyph and tag primes.
+ * MathLive emits none of those attributes and does not need the fixups, but the
+ * export is kept so callers do not break.
+ */
+const updateSpans = () => {};
+
+export {
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  keys,
+  MathInput,
+  HorizontalKeypad,
+  KeyPad,
+  updateSpans,
+  // `mf` is the MathLive equivalent of math-input's `mq`. Both names are
+  // exported so a consumer can switch packages by changing only the import.
+  mf,
+  mf as mq,
+  registerEmbed,
+  applyStaticMath,
+  // MathLive-specific additions
+  latexToMarkup,
+  loadMathLive,
+  configureFonts,
+  getMacros,
+  PIE_MACROS,
+  toMathLive,
+  fromMathLive,
+  keyToAction,
+  NEWLINE_EMBED,
+};