refactor(math-templated): use @pie-lib/math-input registerEmbed/applyStaticMath helpers instead of direct mathquill, remove root mathquill resolution PIE-61

Author: CarlaCostea

package.json

@@ -115,8 +115,7 @@
     "@pie-lib/test-utils": "2.0.0",
     "@pie-lib/text-select": "3.0.0",
     "@pie-lib/tools": "2.0.0",
-    "@pie-lib/translator": "4.0.0",
-    "@pie-framework/mathquill": "1.2.1-beta.1"
+    "@pie-lib/translator": "4.0.0"
   },
   "browserslist": [
     ">0.5%",

packages/math-templated/src/__tests__/main.test.js

@@ -3,16 +3,6 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Main from '../main';
 
-const Mathquill = require('@pie-framework/mathquill');
-
-jest.mock('@pie-framework/mathquill', () => ({
-  StaticMath: jest.fn().mockReturnValue({
-    latex: jest.fn(),
-  }),
-  registerEmbed: jest.fn(),
-  getInterface: jest.fn().mockReturnThis(),
-}));
-
 jest.mock('@pie-lib/render-ui', () => ({
   color: {
     text: () => '#000',
@@ -46,6 +36,8 @@ jest.mock('@pie-lib/math-input', () => ({
   },
   HorizontalKeypad: (props) => <div data-testid="horizontal-keypad" {...props} />,
   updateSpans: jest.fn(),
+  registerEmbed: jest.fn(),
+  applyStaticMath: jest.fn(),
 }));
 
 jest.mock('@pie-lib/math-rendering', () => ({

packages/math-templated/src/main.jsx

@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import { isEmpty, isEqual } from 'lodash-es';
 import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
-import { mq, HorizontalKeypad, updateSpans } from '@pie-lib/math-input';
+import { mq, HorizontalKeypad, updateSpans, registerEmbed, applyStaticMath } from '@pie-lib/math-input';
 import { color, Collapsible, Readable, hasText, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
-import MathQuill from '@pie-framework/mathquill';
 import { Customizable } from '@pie-lib/mask-markup';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import ReactDOM from 'react-dom';
@@ -366,10 +365,8 @@ export class Main extends React.Component {
 
   UNSAFE_componentWillMount() {
     if (typeof window !== 'undefined') {
-      let MQ = MathQuill.getInterface(3);
-
       if (!registered) {
-        MQ.registerEmbed('answerBlock', (data) => ({
+        registerEmbed('answerBlock', (data) => ({
           htmlString: `<div class="block-container">
               <div class="block-response" id="${data}Index">R</div>
               <div class="block-math">
@@ -396,18 +393,15 @@ export class Main extends React.Component {
         const indexEl = this.root.querySelector(`#${answerId}Index`);
 
         if (el) {
-          let MQ = MathQuill.getInterface(3);
           const answer = answers[answerId];
 
-          el.textContent = (answer && answer.value) || '';
+          applyStaticMath(el, (answer && answer.value) || '');
 
           if (model.view) {
             el.parentElement.parentElement.classList.remove('correct');
             el.parentElement.parentElement.classList.remove('incorrect');
           }
 
-          MQ.StaticMath(el);
-
           indexEl.textContent = 'R';
         }
       });