@pie-lib/math-input 8.1.1-next.2 → 8.1.1-next.57

package/src/__tests__/index.test.js

@@ -0,0 +1,247 @@
+import { addBrackets, removeBrackets, registerEmbed, applyStaticMath } from '../index';
+
+describe('math-input index', () => {
+  it('exports registerEmbed and applyStaticMath', () => {
+    expect(typeof registerEmbed).toBe('function');
+    expect(typeof applyStaticMath).toBe('function');
+  });
+
+  describe('addBrackets', () => {
+    it('should add both brackets to a plain string', () => {
+      expect(addBrackets('x^2')).toBe('\\(x^2\\)');
+    });
+
+    it('should not add left bracket if already present', () => {
+      expect(addBrackets('\\(x^2')).toBe('\\(x^2\\)');
+    });
+
+    it('should not add right bracket if already present', () => {
+      expect(addBrackets('x^2\\)')).toBe('\\(x^2\\)');
+    });
+
+    it('should not add brackets if both are already present', () => {
+      expect(addBrackets('\\(x^2\\)')).toBe('\\(x^2\\)');
+    });
+
+    it('should handle empty string', () => {
+      expect(addBrackets('')).toBe('\\(\\)');
+    });
+
+    it('should handle complex latex expressions', () => {
+      expect(addBrackets('\\frac{1}{2}')).toBe('\\(\\frac{1}{2}\\)');
+    });
+
+    it('should handle expressions with parentheses', () => {
+      expect(addBrackets('(x+y)')).toBe('\\((x+y)\\)');
+    });
+
+    it('should not confuse regular parentheses with latex brackets', () => {
+      expect(addBrackets('(x)')).toBe('\\((x)\\)');
+    });
+
+    it('should handle expressions with backslashes', () => {
+      expect(addBrackets('\\sin(x)')).toBe('\\(\\sin(x)\\)');
+    });
+  });
+
+  describe('removeBrackets', () => {
+    it('should remove both brackets from a bracketed string', () => {
+      expect(removeBrackets('\\(x^2\\)')).toBe('x^2');
+    });
+
+    it('should not remove left bracket if not present', () => {
+      expect(removeBrackets('x^2\\)')).toBe('x^2');
+    });
+
+    it('should not remove right bracket if not present', () => {
+      expect(removeBrackets('\\(x^2')).toBe('x^2');
+    });
+
+    it('should not remove brackets if none are present', () => {
+      expect(removeBrackets('x^2')).toBe('x^2');
+    });
+
+    it('should handle empty bracketed string', () => {
+      expect(removeBrackets('\\(\\)')).toBe('');
+    });
+
+    it('should handle complex latex expressions', () => {
+      expect(removeBrackets('\\(\\frac{1}{2}\\)')).toBe('\\frac{1}{2}');
+    });
+
+    it('should handle expressions with parentheses', () => {
+      expect(removeBrackets('\\((x+y)\\)')).toBe('(x+y)');
+    });
+
+    it('should only remove latex brackets, not regular parentheses', () => {
+      expect(removeBrackets('\\((x)\\)')).toBe('(x)');
+    });
+
+    it('should handle nested latex commands', () => {
+      expect(removeBrackets('\\(\\sqrt{x^2+y^2}\\)')).toBe('\\sqrt{x^2+y^2}');
+    });
+
+    it('should handle multiple backslashes', () => {
+      expect(removeBrackets('\\(\\\\text{hello}\\)')).toBe('\\\\text{hello}');
+    });
+  });
+
+  describe('addBrackets and removeBrackets symmetry', () => {
+    it('should be inverse operations for plain strings', () => {
+      const original = 'x^2+y^2';
+      expect(removeBrackets(addBrackets(original))).toBe(original);
+    });
+
+    it('should be inverse operations for latex expressions', () => {
+      const original = '\\frac{a}{b}';
+      expect(removeBrackets(addBrackets(original))).toBe(original);
+    });
+
+    it('should be inverse operations for complex expressions', () => {
+      const original = '\\sqrt{\\frac{x^2+y^2}{z}}';
+      expect(removeBrackets(addBrackets(original))).toBe(original);
+    });
+
+    it('should handle idempotency - adding brackets twice', () => {
+      const original = 'x+y';
+      const once = addBrackets(original);
+      const twice = addBrackets(once);
+      expect(once).toBe(twice);
+      expect(once).toBe('\\(x+y\\)');
+    });
+
+    it('should handle idempotency - removing brackets twice', () => {
+      const original = '\\(x+y\\)';
+      const once = removeBrackets(original);
+      const twice = removeBrackets(once);
+      expect(once).toBe(twice);
+      expect(once).toBe('x+y');
+    });
+  });
+
+  describe('edge cases', () => {
+    describe('addBrackets edge cases', () => {
+      it('should handle string with only left bracket', () => {
+        expect(addBrackets('\\(')).toBe('\\(\\)');
+      });
+
+      it('should handle string with only right bracket', () => {
+        expect(addBrackets('\\)')).toBe('\\(\\)');
+      });
+
+      it('should handle string that starts with \\( in the middle', () => {
+        expect(addBrackets('x\\(y')).toBe('\\(x\\(y\\)');
+      });
+
+      it('should handle string that ends with \\) in the middle', () => {
+        expect(addBrackets('x\\)y')).toBe('\\(x\\)y\\)');
+      });
+
+      it('should handle very long latex expressions', () => {
+        const long = '\\frac{1}{2}+\\frac{3}{4}+\\frac{5}{6}+\\frac{7}{8}';
+        expect(addBrackets(long)).toBe(`\\(${long}\\)`);
+      });
+    });
+
+    describe('removeBrackets edge cases', () => {
+      it('should handle string with only left bracket', () => {
+        expect(removeBrackets('\\(')).toBe('');
+      });
+
+      it('should handle string with only right bracket', () => {
+        expect(removeBrackets('\\)')).toBe('');
+      });
+
+      it('should not remove brackets in the middle of string', () => {
+        expect(removeBrackets('x\\(middle\\)y')).toBe('x\\(middle\\)y');
+      });
+    });
+  });
+
+  describe('special characters and unicode', () => {
+    it('should handle expressions with special math symbols', () => {
+      expect(addBrackets('π')).toBe('\\(π\\)');
+      expect(removeBrackets('\\(π\\)')).toBe('π');
+    });
+
+    it('should handle expressions with greek letters', () => {
+      expect(addBrackets('\\alpha+\\beta')).toBe('\\(\\alpha+\\beta\\)');
+      expect(removeBrackets('\\(\\alpha+\\beta\\)')).toBe('\\alpha+\\beta');
+    });
+
+    it('should handle expressions with subscripts and superscripts', () => {
+      expect(addBrackets('x_1^2')).toBe('\\(x_1^2\\)');
+      expect(removeBrackets('\\(x_1^2\\)')).toBe('x_1^2');
+    });
+  });
+
+  describe('whitespace handling', () => {
+    it('should preserve whitespace in addBrackets', () => {
+      expect(addBrackets(' x + y ')).toBe('\\( x + y \\)');
+    });
+
+    it('should preserve whitespace in removeBrackets', () => {
+      expect(removeBrackets('\\( x + y \\)')).toBe(' x + y ');
+    });
+
+    it('should handle strings with only whitespace', () => {
+      expect(addBrackets('   ')).toBe('\\(   \\)');
+      expect(removeBrackets('\\(   \\)')).toBe('   ');
+    });
+
+    it('should handle newlines', () => {
+      expect(addBrackets('x\ny')).toBe('\\(x\ny\\)');
+      expect(removeBrackets('\\(x\ny\\)')).toBe('x\ny');
+    });
+
+    it('should handle tabs', () => {
+      expect(addBrackets('x\ty')).toBe('\\(x\ty\\)');
+      expect(removeBrackets('\\(x\ty\\)')).toBe('x\ty');
+    });
+  });
+
+  describe('real-world latex examples', () => {
+    const examples = [
+      '\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}',
+      '\\int_{0}^{\\infty} e^{-x^2} dx',
+      '\\sum_{n=1}^{\\infty} \\frac{1}{n^2}',
+      '\\lim_{x\\to\\infty} \\frac{1}{x}',
+      '\\begin{matrix}a&b\\\\c&d\\end{matrix}',
+      '\\sqrt[3]{x^3+y^3}',
+      'f(x)=\\begin{cases}x^2&x\\geq0\\\\-x^2&x<0\\end{cases}',
+    ];
+
+    examples.forEach((latex, index) => {
+      it(`should handle complex latex example ${index + 1}`, () => {
+        const withBrackets = addBrackets(latex);
+        expect(withBrackets).toBe(`\\(${latex}\\)`);
+        expect(removeBrackets(withBrackets)).toBe(latex);
+      });
+    });
+  });
+
+  describe('boundary conditions', () => {
+    it('should handle very short strings', () => {
+      expect(addBrackets('x')).toBe('\\(x\\)');
+      expect(removeBrackets('\\(x\\)')).toBe('x');
+    });
+
+    it('should handle single character', () => {
+      expect(addBrackets('a')).toBe('\\(a\\)');
+      expect(removeBrackets('\\(a\\)')).toBe('a');
+    });
+
+    it('should handle string that is exactly "\\(\\)"', () => {
+      expect(addBrackets('\\(\\)')).toBe('\\(\\)');
+      expect(removeBrackets('\\(\\)')).toBe('');
+    });
+
+    it('should handle string with length exactly 2', () => {
+      expect(addBrackets('xy')).toBe('\\(xy\\)');
+    });
+
+    it('should handle string with length exactly 3', () => {
+      expect(addBrackets('xyz')).toBe('\\(xyz\\)');
+    });
+  });
+});

package/src/__tests__/math-input-test.jsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { MathInput } from '../math-input';
+
+describe('MathInput', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    classes: {},
+    className: 'className',
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<MathInput {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(container.firstChild).toHaveClass('className');
+    });
+
+    it('renders with latex prop', () => {
+      const { container } = render(<MathInput {...defaultProps} latex="x^2" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with keypadMode', () => {
+      const { container } = render(<MathInput {...defaultProps} keypadMode="scientific" />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with disabled prop', () => {
+      const { container } = render(<MathInput {...defaultProps} disabled={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  // Note: Tests for internal methods (keypadPress, changeLatex, inputFocus, inputBlur)
+  // are implementation details and cannot be directly tested with RTL.
+  // These components are wrappers around MathQuill library and the original tests
+  // focused on testing internal implementation via instance methods rather than user-facing behavior.
+  // The actual MathQuill integration and user interactions are tested through integration/e2e tests.
+});

package/src/__tests__/updateSpans.test.js

@@ -0,0 +1,297 @@
+import { updateSpans } from '../updateSpans';
+
+describe('updateSpans', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('prime notation (′ and ′′)', () => {
+    it('should add data-prime attribute to single prime', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '′';
+      document.body.appendChild(span);
+
+      updateSpans();
+
+      expect(span.getAttribute('data-prime')).toBe('true');
+    });
+
+    it('should add data-prime attribute to double prime', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '′′';
+      document.body.appendChild(span);
+
+      updateSpans();
+
+      expect(span.getAttribute('data-prime')).toBe('true');
+    });
+
+    it('should not add data-prime if already present', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '′';
+      span.setAttribute('data-prime', 'true');
+      document.body.appendChild(span);
+
+      updateSpans();
+
+      expect(span.getAttribute('data-prime')).toBe('true');
+    });
+
+    it('should handle multiple prime notation spans', () => {
+      const span1 = document.createElement('span');
+      span1.setAttribute('mathquill-command-id', '1');
+      span1.innerText = '′';
+      document.body.appendChild(span1);
+
+      const span2 = document.createElement('span');
+      span2.setAttribute('mathquill-command-id', '2');
+      span2.innerText = '′′';
+      document.body.appendChild(span2);
+
+      updateSpans();
+
+      expect(span1.getAttribute('data-prime')).toBe('true');
+      expect(span2.getAttribute('data-prime')).toBe('true');
+    });
+  });
+
+  describe('combined scenarios', () => {
+    it('should handle both parallel and prime notation in same document', () => {
+      const parallelSpan = document.createElement('span');
+      parallelSpan.setAttribute('mathquill-command-id', '1');
+      parallelSpan.innerText = '∥';
+      document.body.appendChild(parallelSpan);
+
+      const primeSpan = document.createElement('span');
+      primeSpan.setAttribute('mathquill-command-id', '2');
+      primeSpan.innerText = '′';
+      document.body.appendChild(primeSpan);
+
+      updateSpans();
+
+      expect(parallelSpan.style.fontSize).toBe('32px');
+      expect(primeSpan.getAttribute('data-prime')).toBe('true');
+    });
+
+    it('should handle complex document with multiple span types', () => {
+      const parallelSpan = document.createElement('span');
+      parallelSpan.setAttribute('mathquill-command-id', '1');
+      parallelSpan.innerText = '∥';
+      document.body.appendChild(parallelSpan);
+
+      const primeSpan = document.createElement('span');
+      primeSpan.setAttribute('mathquill-command-id', '2');
+      primeSpan.innerText = '′';
+      document.body.appendChild(primeSpan);
+
+      const normalSpan = document.createElement('span');
+      normalSpan.setAttribute('mathquill-command-id', '3');
+      normalSpan.innerText = 'x';
+      document.body.appendChild(normalSpan);
+
+      const editableParallel = document.createElement('span');
+      editableParallel.setAttribute('mathquill-command-id', '4');
+      editableParallel.innerText = '∥';
+      editableParallel.className = 'mq-editable-field';
+      document.body.appendChild(editableParallel);
+
+      updateSpans();
+
+      expect(parallelSpan.style.fontSize).toBe('32px');
+      expect(primeSpan.getAttribute('data-prime')).toBe('true');
+      expect(normalSpan.style.fontSize).toBe('');
+      expect(normalSpan.getAttribute('data-prime')).toBeNull();
+      expect(editableParallel.style.fontSize).toBe('');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty document', () => {
+      expect(() => updateSpans()).not.toThrow();
+    });
+
+    it('should handle document with no mathquill spans', () => {
+      const span = document.createElement('span');
+      span.innerText = '∥';
+      document.body.appendChild(span);
+
+      expect(() => updateSpans()).not.toThrow();
+      expect(span.style.fontSize).toBe('');
+    });
+
+    it('should handle spans with empty innerText', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '';
+      document.body.appendChild(span);
+
+      expect(() => updateSpans()).not.toThrow();
+    });
+
+    it('should handle spans with whitespace', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '   ';
+      document.body.appendChild(span);
+
+      expect(() => updateSpans()).not.toThrow();
+    });
+
+    it('should handle null or undefined spans gracefully', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '∥';
+      document.body.appendChild(span);
+
+      expect(() => updateSpans()).not.toThrow();
+    });
+  });
+
+  describe('idempotency', () => {
+    it('should be safe to call multiple times on parallel notation', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '∥';
+      document.body.appendChild(span);
+
+      updateSpans();
+      const fontSize1 = span.style.fontSize;
+
+      updateSpans();
+      const fontSize2 = span.style.fontSize;
+
+      updateSpans();
+      const fontSize3 = span.style.fontSize;
+
+      expect(fontSize1).toBe('32px');
+      expect(fontSize2).toBe('32px');
+      expect(fontSize3).toBe('32px');
+    });
+
+    it('should be safe to call multiple times on prime notation', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '′';
+      document.body.appendChild(span);
+
+      updateSpans();
+      expect(span.getAttribute('data-prime')).toBe('true');
+
+      updateSpans();
+      expect(span.getAttribute('data-prime')).toBe('true');
+
+      updateSpans();
+      expect(span.getAttribute('data-prime')).toBe('true');
+    });
+  });
+
+  describe('className variations', () => {
+    it('should modify parallel notation with classes other than mq-editable-field', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '∥';
+      span.className = 'some-other-class';
+      document.body.appendChild(span);
+
+      updateSpans();
+
+      expect(span.style.fontSize).toBe('32px');
+    });
+
+    it('should modify parallel notation with no className', () => {
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '∥';
+      document.body.appendChild(span);
+
+      updateSpans();
+
+      expect(span.style.fontSize).toBe('32px');
+    });
+  });
+
+  describe('nested structures', () => {
+    it('should handle spans nested in other elements', () => {
+      const container = document.createElement('div');
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '∥';
+      container.appendChild(span);
+      document.body.appendChild(container);
+
+      updateSpans();
+
+      expect(span.style.fontSize).toBe('32px');
+    });
+
+    it('should handle deeply nested spans', () => {
+      const level1 = document.createElement('div');
+      const level2 = document.createElement('div');
+      const level3 = document.createElement('div');
+      const span = document.createElement('span');
+      span.setAttribute('mathquill-command-id', '1');
+      span.innerText = '′';
+
+      level3.appendChild(span);
+      level2.appendChild(level3);
+      level1.appendChild(level2);
+      document.body.appendChild(level1);
+
+      updateSpans();
+
+      expect(span.getAttribute('data-prime')).toBe('true');
+    });
+  });
+
+  describe('special characters', () => {
+    it('should only match exact parallel symbol', () => {
+      const symbols = ['||', '|', '‖', '∥∥', 'parallel'];
+
+      symbols.forEach((symbol, index) => {
+        const span = document.createElement('span');
+        span.setAttribute('mathquill-command-id', String(index));
+        span.innerText = symbol;
+        document.body.appendChild(span);
+      });
+
+      const parallelSpan = document.createElement('span');
+      parallelSpan.setAttribute('mathquill-command-id', 'correct');
+      parallelSpan.innerText = '∥';
+      document.body.appendChild(parallelSpan);
+
+      updateSpans();
+
+      expect(parallelSpan.style.fontSize).toBe('32px');
+
+      symbols.forEach((_, index) => {
+        const span = document.querySelector(`span[mathquill-command-id="${index}"]`);
+        expect(span.style.fontSize).toBe('');
+      });
+    });
+
+    it('should only match exact prime symbols', () => {
+      const symbols = ["'", '"', '`', '´', 'prime'];
+
+      symbols.forEach((symbol, index) => {
+        const span = document.createElement('span');
+        span.setAttribute('mathquill-command-id', String(index));
+        span.innerText = symbol;
+        document.body.appendChild(span);
+      });
+
+      updateSpans();
+
+      symbols.forEach((_, index) => {
+        const span = document.querySelector(`span[mathquill-command-id="${index}"]`);
+        expect(span.getAttribute('data-prime')).toBeNull();
+      });
+    });
+  });
+});

package/src/horizontal-keypad.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { keysForGrade, normalizeAdditionalKeys } from './keys/grades';
+import { extendKeySet } from './keys/utils';
+import Keypad from './keypad';
+
+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) => {
+    const { onClick } = 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,28 @@
+import { keysForGrade } from './keys/grades';
+import { updateSpans } from './updateSpans';
+import * as keys from './keys';
+
+import HorizontalKeypad from './horizontal-keypad';
+
+import * as mq from './mq';
+import { registerEmbed, applyStaticMath } from './mq/mathquill-instance';
+
+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));
+
+export {
+  keysForGrade,
+  addBrackets,
+  removeBrackets,
+  keys,
+  HorizontalKeypad,
+  mq,
+  updateSpans,
+  registerEmbed,
+  applyStaticMath,
+};