fix: made sure the numbers near the fraction have the same font size as the fraction [PIE-755]

packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/__tests__/choice.test.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DragDropChoice from '../choice';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+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('DragInTheBlank choice', () => {
+  const defaultProps = {
+    value: { id: '1', value: '<math>1/2</math>' },
+    disabled: false,
+    instanceId: 'test-instance',
+    n: { index: 0 },
+    onChange: jest.fn(),
+    removeResponse: jest.fn(),
+    duplicates: false,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<DragDropChoice {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  describe('fraction math styling', () => {
+    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+      render(<DragDropChoice {...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(<DragDropChoice {...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);
+    });
+  });
+});

packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/choice.jsx

@@ -10,6 +10,9 @@ import { GripIcon } from '../../icons/RespArea';
 
 const StyledContent = styled('span')(({ theme }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
   '& mjx-frac': {
     fontSize: '120% !important',
   },

packages/editable-html/src/plugins/respArea/drag-in-the-blank/__tests__/choice.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DragDropChoice from '../choice';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+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('drag-in-the-blank choice', () => {
+  const defaultProps = {
+    value: { id: '1', value: '<math>1/2</math>' },
+    disabled: false,
+    instanceId: 'test-instance',
+    n: { key: 'key-0' },
+    nodeProps: {},
+    opts: { options: { duplicates: false } },
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<DragDropChoice {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  describe('fraction math styling', () => {
+    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+      render(<DragDropChoice {...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(<DragDropChoice {...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);
+    });
+  });
+});

packages/editable-html/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -14,6 +14,9 @@ const StyledContent = styled('span')(({ theme }) => ({
   '& mjx-frac': {
     fontSize: '120% !important',
   },
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
   '&.chip': {
     minWidth: '90px',
   },

packages/mask-markup/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);
+      });
+    });
   });
 });

packages/mask-markup/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
             }
           : {}
       }

packages/mask-markup/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' } }} />);

packages/mask-markup/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',
@@ -166,7 +169,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,