@pie-element/math-templated 7.1.1-next.12 → 7.1.2

package/lib/main.js

@@ -0,0 +1,877 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _styles = require("@mui/material/styles");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _mathInput = require("@pie-lib/math-input");
+var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _maskMarkup = require("@pie-lib/mask-markup");
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  display: 'inline-block'
+});
+const MainContainer = (0, _styles.styled)('div')({
+  width: '100%',
+  position: 'relative',
+  backgroundColor: _renderUi.color.background(),
+  color: _renderUi.color.text()
+});
+const PromptContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const CollapsibleContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const InputAndKeypadContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  '& > div > div': {
+    display: 'flex',
+    alignItems: 'baseline',
+    flexWrap: 'wrap'
+  },
+  '& .mq-overarrow-inner': {
+    border: 'none !important',
+    padding: '0 !important'
+  },
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important'
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important'
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important'
+    },
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px'
+    },
+    '&:after': {
+      top: '-2.4em',
+      right: '-1px'
+    },
+    '&.mq-empty:after': {
+      top: '-0.45em'
+    }
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px'
+    }
+  },
+  '& .mq-longdiv-inner': {
+    borderTop: '1px solid !important',
+    paddingTop: '1.5px !important'
+  },
+  '& .mq-parallelogram': {
+    lineHeight: 0.85
+  }
+});
+const Expression = (0, _styles.styled)('div')(({
+  theme,
+  $incorrect,
+  $correct,
+  $showCorrectness,
+  $correctAnswerShown
+}) => ({
+  maxWidth: 'fit-content',
+  ...($incorrect && {
+    borderColor: `${_renderUi.color.incorrect()} !important`
+  }),
+  ...($correct && {
+    borderColor: `${_renderUi.color.correct()} !important`
+  }),
+  ...($showCorrectness && {
+    border: '2px solid'
+  }),
+  ...($correctAnswerShown && {
+    padding: theme.spacing(1),
+    letterSpacing: '0.5px'
+  }),
+  '& > .mq-math-mode': {
+    '& > .mq-root-block': {
+      '& > .mq-editable-field': {
+        minWidth: '10px',
+        padding: theme.spacing(0.25)
+      }
+    },
+    '& sup': {
+      top: 0
+    }
+  }
+}));
+const StyledStatic = (0, _styles.styled)(_mathInput.mq.Static)({
+  '& > .mq-root-block': {
+    '& > .mq-editable-field': {
+      borderColor: _renderUi.color.text()
+    }
+  }
+});
+
+// Tooltip styling is handled via slotProps, no need for styled component
+
+const ResponseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  zIndex: 10,
+  minWidth: '400px',
+  marginTop: theme.spacing(2)
+}));
+const PrintContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(1),
+  pointerEvents: 'none'
+}));
+const SrOnly = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+const Note = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledToggle = (0, _styles.styled)(_correctAnswerToggle.default)(({
+  theme
+}) => ({
+  color: _renderUi.color.text(),
+  marginBottom: theme.spacing(2)
+}));
+
+// CSS for classes used in HTML strings and classList operations
+if (typeof document !== 'undefined') {
+  const styleId = 'math-templated-main-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .block-container {
+        margin: 8px !important;
+        display: inline-flex;
+        border: 2px solid grey !important;
+      }
+      .block-response {
+        flex: 2;
+        color: grey;
+        background: rgba(0, 0, 0, 0.04);
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+      }
+      .block-math {
+        color: ${_renderUi.color.text()};
+        background-color: ${_renderUi.color.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 8;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .correct {
+        border-color: ${_renderUi.color.correct()} !important;
+      }
+      .incorrect {
+        border-color: ${_renderUi.color.incorrect()} !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+let registered = false;
+
+// Define a regex pattern to match {{number}}
+const REGEX = /(\{\{\d+\}\})/gm;
+const DEFAULT_KEYPAD_VARIANT = 6;
+const KEYPAD_VIEWPORT_PADDING = 8;
+
+// !!! If you're using Chrome but have selected the "iPad" device in Chrome Developer Tools, the navigator.userAgent string may still report as
+//  Safari because Chrome on iOS actually uses the Safari rendering engine under the hood due to Apple's restrictions on third-party browser engines.
+// When you select the "iPad" device in Chrome Developer Tools, you're essentially emulating the behavior of Safari on an iPad, including the user agent string.
+//  Therefore, even though you're using Chrome, the user agent string will resemble that of Safari on an iPad.
+// Since the regular expression /^((?!chrome|android).)*safari/i checks for the presence of "safari" in the user agent string while excluding "chrome" and "android",
+//  it will return true in this case because "safari" is present in the user agent string emulated by Chrome when in iPad mode.
+const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function generateAdditionalKeys(keyData = []) {
+  return keyData.map(key => ({
+    name: key,
+    latex: key,
+    write: key,
+    label: key
+  }));
+}
+function getKeyPadWidth(additionalKeys = [], equationEditor) {
+  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
+}
+function splitByParts(text) {
+  // Use the regex pattern to split the text
+  const parts = text.split(REGEX);
+  // Filter out empty strings that might result from splitting
+  return parts.filter(part => part);
+}
+function prepareForStatic(model, state) {
+  const {
+    responses,
+    disabled,
+    markup,
+    printMode,
+    alwaysShowCorrect
+  } = model || {};
+  if (markup) {
+    if (state.showCorrect) {
+      return Object.keys(responses || {}).reduce((acc, responseKey) => {
+        acc[responseKey] = responses?.[responseKey]?.answer;
+        return acc;
+      }, {});
+    }
+    const splitted = splitByParts(markup);
+    return splitted.reduce((acc, split) => {
+      if (split.match(REGEX)) {
+        const responseKey = Main.getResponseKey(split);
+        const answer = state.session.answers[`r${responseKey}`];
+        if (printMode && !alwaysShowCorrect) {
+          const blankSpace = '\\ \\ '.repeat(30) + '\\embed{newLine}[] ';
+          return {
+            ...acc,
+            [responseKey]: `\\MathQuillMathField[r${responseKey}]{${blankSpace.repeat(3)}}`
+          };
+        }
+        if (disabled) {
+          return {
+            ...acc,
+            [responseKey]: `\\embed{answerBlock}[r${responseKey}]`
+          };
+        }
+        return {
+          ...acc,
+          [responseKey]: `\\MathQuillMathField[r${responseKey}]{${answer && answer.value || ''}}`
+        };
+      }
+      return acc;
+    }, {});
+  }
+}
+
+/**
+ * Popper.js v2 modifier that implements precise horizontal placement:
+ *
+ *   1. Default: left-align the keypad with the left edge of the response area.
+ *
+ *   2. Overflow: if left-aligning would push the right edge of the keypad past
+ *      the viewport's right edge, right-align the keypad so that its right edge
+ *      sits exactly at the left edge of the response area.
+ *
+ * In both cases we compute offsets.x from first principles (rather than
+ * adjusting whatever Popper already set) to avoid any upstream skew.
+ *
+ * Coordinate note:
+ *   state.rects.reference.x  — reference's left edge in offset-parent coords.
+ *   getBoundingClientRect()  — viewport-relative coords.
+ *   Both describe the same physical point, so the difference between them is
+ *   the constant offset needed to convert viewport ↔ offset-parent coords.
+ */
+const smartHorizontalPlacementModifier = {
+  name: 'smartHorizontalPlacement',
+  enabled: true,
+  phase: 'main',
+  requires: ['popperOffsets'],
+  fn: ({
+    state
+  }) => {
+    const offsets = state.modifiersData.popperOffsets;
+    if (!offsets) return;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const popperWidth = state.rects.popper.width;
+    const referenceViewportLeft = state.elements.reference.getBoundingClientRect().left;
+    const offsetParentEl = state.elements.popper?.offsetParent;
+    const offsetParentRect = offsetParentEl?.getBoundingClientRect?.() || {
+      left: 0
+    };
+    const offsetParentScrollLeft = offsetParentEl?.scrollLeft || 0;
+    const referenceOffsetParentX = referenceViewportLeft - offsetParentRect.left + offsetParentScrollLeft;
+    const viewportLeftInOffsetParent = referenceOffsetParentX - referenceViewportLeft;
+    const minX = viewportLeftInOffsetParent + KEYPAD_VIEWPORT_PADDING;
+    const maxX = viewportLeftInOffsetParent + viewportWidth - popperWidth - KEYPAD_VIEWPORT_PADDING;
+    if (referenceViewportLeft + popperWidth <= viewportWidth) {
+      offsets.x = referenceOffsetParentX;
+    } else {
+      offsets.x = referenceOffsetParentX - popperWidth;
+    }
+    if (maxX < minX) {
+      offsets.x = minX;
+    } else {
+      offsets.x = Math.min(Math.max(offsets.x, minX), maxX);
+    }
+  }
+};
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleAnswerBlockDomUpdate", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        session,
+        showCorrect
+      } = this.state;
+      const answers = session.answers;
+      if (this.root && model.disabled && !showCorrect) {
+        Object.keys(answers).forEach(answerId => {
+          const el = this.root.querySelector(`#${answerId}`);
+          const indexEl = this.root.querySelector(`#${answerId}Index`);
+          if (el) {
+            const answer = answers[answerId];
+            (0, _mathInput.applyStaticMath)(el, answer && answer.value || '');
+            if (model.view) {
+              el.parentElement.parentElement.classList.remove('correct');
+              el.parentElement.parentElement.classList.remove('incorrect');
+            }
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+      (0, _mathRendering.renderMath)(this.root);
+    });
+    (0, _defineProperty2.default)(this, "onSubFieldFocus", id => {
+      const editableFields = Array.from(this.root?.querySelectorAll('.mq-editable-field') || []);
+      const savedScroll = editableFields.map(el => ({
+        el,
+        left: el.scrollLeft,
+        top: el.scrollTop
+      }));
+      const restoreEditableScroll = () => {
+        savedScroll.forEach(({
+          el,
+          left,
+          top
+        }) => {
+          el.scrollLeft = left;
+          el.scrollTop = top;
+        });
+      };
+      this.setState({
+        activeAnswerBlock: id
+      }, () => {
+        restoreEditableScroll();
+        requestAnimationFrame(restoreEditableScroll);
+        setTimeout(restoreEditableScroll, 0);
+      });
+    });
+    (0, _defineProperty2.default)(this, "toNodeData", data => {
+      if (!data) {
+        return;
+      }
+      const {
+        type,
+        value
+      } = data;
+      if (type === 'command' || type === 'cursor') return data;
+      if (type === 'answer') return {
+        type: 'answer',
+        ...data
+      };
+      if (value === 'clear') return {
+        type: 'clear'
+      };
+      return {
+        type: 'write',
+        value
+      };
+    });
+    (0, _defineProperty2.default)(this, "setInput", input => {
+      this.input = input;
+    });
+    (0, _defineProperty2.default)(this, "onClick", data => {
+      const c = this.toNodeData(data);
+      if (c.type === 'clear') {
+        this.input.clear();
+      } else if (c.type === 'command') {
+        if (Array.isArray(c.value)) {
+          c.value.forEach(vv => {
+            this.input.cmd(vv);
+          });
+        } else {
+          this.input.cmd(c.value);
+        }
+      } else if (c.type === 'cursor') {
+        this.input.keystroke(c.value);
+      } else {
+        this.input.write(c.value);
+      }
+
+      // Keep all relevant scroll containers stable when refocusing after keypad
+      // click. Browser "focus into view" can scroll horizontally back to start.
+      const fieldElement = this.input?.el?.() || this.root;
+      const scrollTargets = [];
+      let node = fieldElement;
+      while (node && node !== document.body && node !== document.documentElement) {
+        const isScrollable = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight;
+        if (isScrollable) {
+          scrollTargets.push(node);
+        }
+        node = node.parentElement;
+      }
+      if (document.scrollingElement) {
+        scrollTargets.push(document.scrollingElement);
+      }
+      const savedScroll = scrollTargets.map(el => ({
+        el,
+        left: el.scrollLeft,
+        top: el.scrollTop
+      }));
+      const windowScroll = {
+        x: window.scrollX,
+        y: window.scrollY
+      };
+      const restoreScroll = () => {
+        savedScroll.forEach(({
+          el,
+          left,
+          top
+        }) => {
+          el.scrollLeft = left;
+          el.scrollTop = top;
+        });
+        window.scrollTo(windowScroll.x, windowScroll.y);
+      };
+      this.input.focus();
+      restoreScroll();
+      requestAnimationFrame(restoreScroll);
+      setTimeout(restoreScroll, 0);
+    });
+    (0, _defineProperty2.default)(this, "callOnSessionChange", () => {
+      const {
+        onSessionChange
+      } = this.props;
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    });
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", show => {
+      this.setState({
+        showCorrect: show
+      }, this.handleAnswerBlockDomUpdate);
+    });
+    (0, _defineProperty2.default)(this, "subFieldChanged", (name, subfieldValue) => {
+      (0, _mathInput.updateSpans)();
+      if (name) {
+        this.setState(state => ({
+          session: {
+            ...state.session,
+            answers: {
+              ...state.session.answers,
+              [name]: {
+                value: subfieldValue
+              }
+            }
+          }
+        }), this.callOnSessionChange);
+      }
+    });
+    (0, _defineProperty2.default)(this, "getFieldName", (changeField, fields) => {
+      const {
+        answers
+      } = this.state.session;
+      if (Object.keys(answers || {}).length) {
+        const keys = Object.keys(answers);
+        return keys.find(k => {
+          const tf = fields[k];
+          return tf && tf.id == changeField.id;
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "onBlur", e => {
+      const {
+        relatedTarget,
+        currentTarget
+      } = e || {};
+      function getParentWithRoleTooltip(element, depth = 0) {
+        // only run this max 16 times
+        if (!element || depth >= 16) return null;
+        const parent = element.offsetParent;
+        if (!parent) return null;
+        if (parent.getAttribute('role') === 'tooltip') {
+          return parent;
+        }
+        return getParentWithRoleTooltip(parent, depth + 1);
+      }
+      function getDeepChildDataKeypad(element, depth = 0) {
+        // only run this max 4 times
+        if (!element || depth >= 4) return null;
+        const child = element?.children?.[0];
+        if (!child) return null;
+        if (child.attributes && child.attributes['data-keypad']) {
+          return child;
+        }
+        return getDeepChildDataKeypad(child, depth + 1);
+      }
+      const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
+      const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
+      if (!relatedTarget || !currentTarget || !childWithDataKeypad?.attributes['data-keypad']) {
+        this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "renderTeacherInstructions", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        teacherInstructions,
+        animationsDisabled
+      } = model || {};
+      const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+      const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+        defaultClassName: "teacher-instructions",
+        prompt: teacherInstructions
+      });
+      return showTeacherInstructions && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Teacher Instructions',
+          visible: 'Hide Teacher Instructions'
+        }
+      }, teacherInstructionsDiv) : teacherInstructionsDiv);
+    });
+    (0, _defineProperty2.default)(this, "renderRationale", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        rationale,
+        animationsDisabled
+      } = model || {};
+      const rationaleDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
+      });
+      const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+      return showRationale && /*#__PURE__*/_react.default.createElement(CollapsibleContainer, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale',
+          visible: 'Hide Rationale'
+        }
+      }, rationaleDiv) : rationaleDiv);
+    });
+    (0, _defineProperty2.default)(this, "renderPlayerContent", () => {
+      const {
+        model
+      } = this.props;
+      const {
+        activeAnswerBlock,
+        showCorrect,
+        session,
+        tooltipContainerRef
+      } = this.state;
+      const {
+        correctness,
+        disabled,
+        view,
+        responses,
+        equationEditor,
+        customKeys,
+        feedback,
+        env: {
+          mode
+        } = {},
+        printMode,
+        alwaysShowCorrect
+      } = model || {};
+      const emptyResponse = (0, _lodashEs.isEmpty)(responses);
+      const additionalKeys = generateAdditionalKeys(customKeys);
+      const statics = prepareForStatic(model, this.state) || '';
+      const studentPrintMode = printMode && !alwaysShowCorrect;
+      return /*#__PURE__*/_react.default.createElement(InputAndKeypadContainer, null, /*#__PURE__*/_react.default.createElement(_maskMarkup.Customizable, {
+        disabled: disabled,
+        markup: model.markup
+        // TODO remove the need of value?
+        ,
+        value: {},
+        customMarkMarkupComponent: id => {
+          const responseIsCorrect = mode === 'evaluate' && feedback && feedback[id];
+          const MQStatic = /*#__PURE__*/_react.default.createElement(StyledStatic, {
+            ref: mqStatic => {
+              this.mqStatic = mqStatic || this.mqStatic;
+            },
+            latex: statics[id],
+            onSubFieldChange: this.subFieldChanged,
+            getFieldName: this.getFieldName,
+            setInput: this.setInput,
+            onSubFieldFocus: this.onSubFieldFocus,
+            onBlur: this.onBlur
+          });
+          return /*#__PURE__*/_react.default.createElement(Expression, {
+            ref: tooltipContainerRef,
+            $incorrect: !emptyResponse && !responseIsCorrect && !showCorrect,
+            $correct: !emptyResponse && (responseIsCorrect || showCorrect),
+            $showCorrectness: !emptyResponse && disabled && correctness && !view,
+            $correctAnswerShown: showCorrect
+          }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+            ref: ref => this.setTooltipRef(ref),
+            enterTouchDelay: 0,
+            interactive: true,
+            open: activeAnswerBlock === `r${id}`,
+            slotProps: {
+              popper: {
+                container: tooltipContainerRef?.current || undefined,
+                // 'bottom-start' left-aligns the keypad with the left edge of the
+                // response area by default. The smartHorizontalPlacement modifier
+                // below overrides this when the keypad would overflow the viewport.
+                placement: 'bottom-start',
+                sx: {
+                  backgroundColor: 'transparent',
+                  width: 'auto',
+                  opacity: 1,
+                  '& .MuiTooltip-arrow': {
+                    display: 'none'
+                  }
+                },
+                modifiers: [{
+                  name: 'preventOverflow',
+                  enabled: false
+                }, {
+                  name: 'flip',
+                  enabled: false
+                }, smartHorizontalPlacementModifier]
+              },
+              tooltip: {
+                sx: {
+                  fontSize: 'initial',
+                  backgroundColor: 'transparent',
+                  width: 'auto',
+                  maxWidth: 'none',
+                  marginTop: 0,
+                  paddingTop: 0,
+                  boxShadow: 'none'
+                }
+              }
+            },
+            title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/_react.default.createElement(ResponseContainer, {
+              "data-keypad": true,
+              key: answerId,
+              style: {
+                width: getKeyPadWidth(additionalKeys, equationEditor)
+              }
+            }, /*#__PURE__*/_react.default.createElement(_mathInput.HorizontalKeypad, {
+              additionalKeys: additionalKeys,
+              mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+              onClick: this.onClick
+            })) || null)
+          }, studentPrintMode ? /*#__PURE__*/_react.default.createElement(PrintContainer, null, MQStatic) : /*#__PURE__*/_react.default.createElement("div", null, MQStatic)));
+        }
+      }));
+    });
+    const _answers = {};
+    const {
+      model: _model,
+      session: _session
+    } = props || {};
+    const {
+      markup,
+      alwaysShowCorrect: _alwaysShowCorrect
+    } = _model || {};
+    const {
+      answers: sessionAnswers
+    } = _session || {};
+    if (markup) {
+      (markup || '').replace(REGEX, response => {
+        const responseKey = Main.getResponseKey(response);
+        const sessionAnswerForResponse = sessionAnswers && sessionAnswers[`r${responseKey}`];
+        _answers[`r${responseKey}`] = {
+          value: sessionAnswerForResponse?.value || ''
+        };
+      });
+    }
+    this.state = {
+      session: {
+        ...props.session,
+        answers: _answers
+      },
+      activeAnswerBlock: '',
+      showCorrect: _alwaysShowCorrect || false,
+      tooltipContainerRef: /*#__PURE__*/_react.default.createRef()
+    };
+  }
+  UNSAFE_componentWillMount() {
+    if (typeof window !== 'undefined') {
+      if (!registered) {
+        (0, _mathInput.registerEmbed)('answerBlock', data => ({
+          htmlString: `<div class="block-container">
+              <div class="block-response" id="${data}Index">R</div>
+              <div class="block-math">
+                <span id="${data}"></span>
+              </div>
+            </div>`,
+          text: () => 'text',
+          latex: () => `\\embed{answerBlock}[${data}]`
+        }));
+        registered = true;
+      }
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model
+    } = this.props;
+    const {
+      model: nextModel = {}
+    } = nextProps || {};
+    const {
+      markup = '',
+      env = {}
+    } = model || {};
+    const {
+      markup: nextMarkup = '',
+      env: nextEnv = {},
+      alwaysShowCorrect: nextAlwaysShowCorrect = false
+    } = nextModel;
+    const isEvaluateMode = env => env && env.mode === 'evaluate';
+    if (!isEvaluateMode(env) || !isEvaluateMode(nextEnv)) {
+      this.setState(prevState => ({
+        ...prevState.session,
+        showCorrect: false
+      }));
+    }
+    if (nextAlwaysShowCorrect) {
+      this.setState({
+        showCorrect: true
+      });
+    }
+    const matches = markup.match(REGEX);
+    const nextMatches = nextMarkup.match(REGEX);
+
+    // If markup changed, and we no longer have the same response area, the session needs to be updated
+    if (!(0, _lodashEs.isEqual)(matches, nextMatches)) {
+      const newAnswers = {};
+      const answers = this.state.session.answers;
+      (nextMatches || []).forEach(nextMatch => {
+        const responseKey = Main.getResponseKey(nextMatch);
+        const sessionAnswerForResponse = answers && answers[`r${responseKey}`];
+
+        // build out local state model using responses declared in markup
+        newAnswers[`r${responseKey}`] = {
+          value: sessionAnswerForResponse?.value || ''
+        };
+      });
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          answers: newAnswers
+        }
+      }), () => {
+        this.props.onSessionChange(this.state.session);
+        this.handleAnswerBlockDomUpdate();
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const sameModel = (0, _lodashEs.isEqual)(this.props.model, nextProps.model);
+    const sameState = (0, _lodashEs.isEqual)(this.state, nextState);
+    return !sameModel || !sameState;
+  }
+  componentDidMount() {
+    this.handleAnswerBlockDomUpdate();
+    setTimeout(() => (0, _mathRendering.renderMath)(this.root), 100);
+  }
+  componentDidUpdate() {
+    this.handleAnswerBlockDomUpdate();
+  }
+  // function for tooltip
+  setTooltipRef(ref) {
+    // Safari Hack: https://stackoverflow.com/a/42764495/5757635
+    setTimeout(() => {
+      if (ref && IS_SAFARI) {
+        const div = document.querySelector("[role='tooltip']");
+        if (div) {
+          const el = div.firstChild;
+          el.setAttribute('tabindex', '-1');
+        }
+      }
+    }, 1);
+  }
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      showCorrect
+    } = this.state;
+    const {
+      prompt,
+      env: {
+        mode,
+        role
+      } = {},
+      extraCSSRules,
+      correctness,
+      responses,
+      language,
+      showNote,
+      note
+    } = model || {};
+    const emptyResponse = (0, _lodashEs.isEmpty)(responses);
+    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      ref: r => {
+        // eslint-disable-next-line react/no-find-dom-node
+        const domNode = _reactDom.default.findDOMNode(r);
+        this.root = domNode || this.root;
+      }
+    }, /*#__PURE__*/_react.default.createElement(MainContainer, null, mode === 'gather' && /*#__PURE__*/_react.default.createElement(SrOnly, null, "Math Equation Response Question"), /*#__PURE__*/_react.default.createElement(MainContainer, null, showCorrectAnswerToggle && /*#__PURE__*/_react.default.createElement(StyledToggle, {
+      language: language,
+      show: true,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect
+    })), this.renderTeacherInstructions(), prompt && /*#__PURE__*/_react.default.createElement(PromptContainer, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    })), /*#__PURE__*/_react.default.createElement(_renderUi.Readable, {
+      false: true
+    }, this.renderPlayerContent()), displayNote && /*#__PURE__*/_react.default.createElement(Note, {
+      className: "note",
+      dangerouslySetInnerHTML: {
+        __html: note
+      }
+    }), this.renderRationale()));
+  }
+}
+exports.Main = Main;
+// removes {{ and }} and returns only key response. Eg: {{0}} => 0
+(0, _defineProperty2.default)(Main, "getResponseKey", response => (response || '').replaceAll('{{', '').replaceAll('}}', ''));
+(0, _defineProperty2.default)(Main, "propTypes", {
+  session: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map