@pie-lib/mask-markup 3.0.12 → 3.1.0-beta

package/src/choices/__tests__/index.test.js

@@ -4,6 +4,21 @@ import Choice from '../choice';
 import { choice } from '../../__tests__/utils';
 import Choices from '../index';
 
+// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
+const collectEmotionRules = () => {
+  const rules = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        rules.push(rule.cssText);
+      }
+    } catch (e) {
+      /* inaccessible stylesheet */
+    }
+  }
+  return rules;
+};
+
 // Mock @dnd-kit hooks to avoid DndContext requirement
 jest.mock('@dnd-kit/core', () => ({
   useDraggable: jest.fn(() => ({
@@ -71,5 +86,24 @@ describe('index', () => {
         expect(container.firstChild).toBeInTheDocument();
       });
     });
+
+    describe('fraction math styling', () => {
+      it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+        render(<Choice {...defaultProps} />);
+        // The new rule targets mjx-mn digits that sit next to an mjx-mfrac.
+        const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
+        expect(rule).toBeDefined();
+        expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
+        expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
+        expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+      });
+
+      it('keeps the existing mjx-frac 120% rule', () => {
+        render(<Choice {...defaultProps} />);
+        const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
+        expect(rule).toBeDefined();
+        expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+      });
+    });
   });
 });

package/src/choices/choice.jsx

@@ -50,6 +50,9 @@ const StyledChipLabel = styled('span')(() => ({
   '& mjx-frac': {
     fontSize: '120% !important',
   },
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
 }));
 
 export default function Choice({ choice, disabled, instanceId }) {
@@ -71,8 +74,8 @@ export default function Choice({ choice, disabled, instanceId }) {
       style={
         isDragging
           ? {
-               width: rootRef.current?.offsetWidth || 90, // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback
-               height: rootRef.current?.offsetHeight || 32, // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback
+              width: rootRef.current?.offsetWidth || 90, // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback
+              height: rootRef.current?.offsetHeight || 32, // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback
             }
           : {}
       }

package/src/components/__tests__/blank.test.js

@@ -30,6 +30,21 @@ jest.mock('@pie-lib/math-rendering', () => ({
   renderMath: jest.fn(),
 }));
 
+// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
+const collectEmotionRules = () => {
+  const rules = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        rules.push(rule.cssText);
+      }
+    } catch (e) {
+      /* inaccessible stylesheet */
+    }
+  }
+  return rules;
+};
+
 describe('Blank', () => {
   const { renderMath } = require('@pie-lib/math-rendering');
   const onChange = jest.fn();
@@ -184,6 +199,24 @@ describe('Blank', () => {
     });
   });
 
+  describe('fraction math styling', () => {
+    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+      render(<Blank {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
+      expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+
+    it('keeps the existing mjx-frac 120% rule', () => {
+      render(<Blank {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+  });
+
   describe('drag and drop', () => {
     it('accepts drag item when not disabled', () => {
       render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);

package/src/components/blank.jsx

@@ -76,6 +76,9 @@ const StyledChipLabel = styled('span')(() => ({
   '& mjx-frac': {
     fontSize: '120% !important',
   },
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
   '&.over': {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -125,11 +128,25 @@ function BlankContent({
   };
 
   const getMeasureNode = () => {
-    if (!spanRef.current) return null;
+    if (!spanRef.current) {
+      return null;
+    }
+
     const mjx = spanRef.current.querySelector('mjx-container');
-    if (mjx && spanRef.current.parentElement) return spanRef.current.parentElement;
+
+    if (mjx && spanRef.current.parentElement) {
+      return spanRef.current.parentElement;
+    }
+
     const img = spanRef.current.querySelector('img');
-    if (img) return img;
+
+    if (img) {
+      // If there's text alongside the image, measure the full span to capture both dimensions
+      const hasTextContent = spanRef.current.textContent.trim().length > 0;
+
+      return hasTextContent ? spanRef.current : img;
+    }
+
     return spanRef.current;
   };
 
@@ -166,7 +183,6 @@ function BlankContent({
       const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
       const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
 
-
       setDimensions((prevState) => ({
         width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
         height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.