@pie-lib/math-input 7.1.1-next.0 → 7.2.0-next.0

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/index.jsx

@@ -1,5 +1,10 @@
 import { keysForGrade } from './keys/grades';
 import { updateSpans } from './updateSpans';
+import * as keys from './keys';
+
+import HorizontalKeypad from './horizontal-keypad';
+
+import * as mq from './mq';
 
 const addLeftBracket = (s) => (s.indexOf('\\(') === 0 ? s : `\\(${s}`);
 const addRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s : `${s}\\)`);
@@ -9,10 +14,4 @@ const rmRightBracket = (s) => (s.indexOf('\\)') === s.length - 2 ? s.substring(0
 const addBrackets = (s) => addRightBracket(addLeftBracket(s));
 const removeBrackets = (s) => rmRightBracket(rmLeftBracket(s));
 
-import * as keys from './keys';
-
-import HorizontalKeypad from './horizontal-keypad';
-
-import * as mq from './mq';
-
 export { keysForGrade, addBrackets, removeBrackets, keys, HorizontalKeypad, mq, updateSpans };

package/src/keypad/__tests__/keys-layout.test.js

@@ -1,5 +1,4 @@
 import { sortKeys } from '../keys-layout';
-import { baseSet, comparison } from '../../keys';
 
 describe('keys-layout', () => {
   describe('sortKeys', () => {

package/src/keypad/index.jsx

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { lighten, alpha, styled } from '@mui/material/styles';
+import { alpha, lighten, styled } from '@mui/material/styles';
 import debug from 'debug';
-import _ from 'lodash';
-import MathQuill from '@pie-framework/mathquill';
+import { flatten } from 'lodash-es';
 import * as mq from '../mq';
 
 import { baseSet } from '../keys';
@@ -341,7 +340,7 @@ export class KeyPad extends React.Component {
 
   flowKeys = (base, extras) => {
     const transposed = [...sortKeys(base), ...sortKeys(extras)];
-    return _.flatten(transposed);
+    return flatten(transposed);
   };
 
   keyIsNotAllowed = (key) => {

package/src/keypad/keys-layout.js

@@ -1,4 +1,4 @@
-import * as _ from 'lodash';
+import { times, zip } from 'lodash-es';
 
 /**
  * Sort additional keys.
@@ -8,10 +8,9 @@ import * as _ from 'lodash';
  */
 export const sortKeys = (keys) => {
   // add any missing rows
-  _.times(5 - keys.length, () => {
-    keys.push([]);
-  });
+  times(5 - keys.length, () => keys.push([]));
+
+  const out = zip.apply(null, keys);
 
-  const out = _.zip.apply(null, keys);
   return out;
 };

package/src/keys/__tests__/utils.test.js

@@ -1,5 +1,5 @@
 import { extendKeySet } from '../utils';
-import { keysForGrade, gradeSets } from '../grades';
+import { gradeSets, keysForGrade } from '../grades';
 import * as comparison from '../../keys/comparison';
 
 describe('utils', () => {

package/src/keys/digits.js

@@ -1,4 +1,4 @@
-import times from 'lodash/times';
+import { times } from 'lodash-es';
 
 const digitMap = {
   0: 'zero',

package/src/keys/index.js

@@ -1,7 +1,11 @@
 import digits from './digits';
 import * as nav from './navigation';
 import * as edit from './edit';
-import { divide, multiply, plus, minus, equals } from './basic-operators';
+import { divide, equals, minus, multiply, plus } from './basic-operators';
+import * as comparison from './comparison';
+import * as fractions from './fractions';
+import * as exponent from './exponent';
+import * as misc from './misc';
 
 const { one, two, three, four, five, six, seven, eight, nine, zero, comma, decimalPoint } = digits;
 
@@ -13,9 +17,4 @@ export const baseSet = [
   [nav.left, nav.right, edit.del, equals],
 ];
 
-import * as comparison from './comparison';
-import * as fractions from './fractions';
-import * as exponent from './exponent';
-import * as misc from './misc';
-
 export { comparison, fractions, exponent, misc };

package/src/keys/utils.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { flatten, times } from 'lodash-es';
 
 export const mkSet = (category) => (o) => ({ ...o, category });
 
@@ -23,9 +23,7 @@ export const toKey = (category) => (v) => {
 export const transformToKeySetStructure = (data = []) => {
   const structure = [];
 
-  _.times(5, () => {
-    structure.push([]);
-  });
+  times(5, () => structure.push([]));
 
   let ln = data.length;
   let i = 0;
@@ -43,9 +41,10 @@ export const transformToKeySetStructure = (data = []) => {
 };
 
 const latexAndNameDontExist = (base) => (k) => {
-  const flattened = _.flatten(base);
+  const flattened = flatten(base);
   const latexExists = flattened.some((b) => b.latex === k.latex);
   const nameExists = flattened.some((b) => b.name === k.name);
+
   return !latexExists && !nameExists;
 };
 
@@ -54,12 +53,8 @@ export const extendKeySet = (base = [], keySetData = []) => {
 
   const final = [];
 
-  _.times(5 - base.length, () => {
-    base.push([]);
-  });
-  _.times(5, () => {
-    final.push([]);
-  });
+  times(5 - base.length, () => base.push([]));
+  times(5, () => final.push([]));
 
   const extra = transformToKeySetStructure(keySetData);