@pie-element/math-inline 10.0.1 → 11.0.3-esm.0

package/esm/element.js

@@ -0,0 +1,1476 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import _ from 'lodash';
+import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
+import PropTypes from 'prop-types';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import { mq, updateSpans, HorizontalKeypad } from '@pie-lib/math-input';
+import { color, hasText, hasMedia, Collapsible, PreviewPrompt, Readable, UiLayout, Feedback } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import isEqual from 'lodash/isEqual';
+import cx from 'classnames';
+import { MathToolbar } from '@pie-lib/math-toolbar';
+import MathQuill from '@pie-framework/mathquill';
+import isEmpty from 'lodash/isEmpty';
+import Translator from '@pie-lib/translator';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const ResponseTypes$1 = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configure
+ */
+
+var defaults = {
+  model: {
+    allowTrailingZerosDefault: false,
+    customKeys: [],
+    equationEditor: '8',
+    expression: '',
+    feedback: {
+      correct: {
+        default: 'Correct',
+        type: 'none'
+      },
+      incorrect: {
+        default: 'Incorrect',
+        type: 'none'
+      },
+      partial: {
+        default: 'Nearly',
+        type: 'none'
+      }
+    },
+    feedbackEnabled: false,
+    ignoreOrderDefault: false,
+    partialScoring: true,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    responseType: ResponseTypes$1.advanced,
+    responses: [],
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    validationDefault: 'literal'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    responseType: {
+      settings: true,
+      label: 'Response type'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    ignoreOrder: {
+      settings: false,
+      label: 'Ignore Order',
+      enabled: true
+    },
+    allowTrailingZeros: {
+      settings: false,
+      label: 'Allow Trailing Zeros',
+      enabled: true
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+
+const ResponseTypes = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+
+class SimpleQuestionBlockRaw extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.mathToolBarContainsTarget = e => document.getElementById(this.mathToolBarId).contains(e.target);
+
+    this.handleClick = e => {
+      try {
+        if (!this.mathToolBarContainsTarget(e)) {
+          this.setState({
+            showKeypad: false
+          });
+        }
+      } catch (e) {// console.log(e.toString());
+      }
+    };
+
+    this.onFocus = () => {
+      const {
+        onSubFieldFocus
+      } = this.props;
+      onSubFieldFocus(this.mathToolBarId);
+    };
+
+    this.mathToolBarId = `math-toolbar-${new Date().getTime()}`;
+  }
+
+  render() {
+    const {
+      classes,
+      model,
+      showCorrect,
+      session,
+      emptyResponse,
+      onSimpleResponseChange,
+      showKeypad
+    } = this.props;
+    const {
+      config,
+      disabled,
+      correctness
+    } = model || {};
+
+    if (!config) {
+      return;
+    }
+
+    const correct = correctness && correctness.correct;
+    const {
+      responses,
+      equationEditor
+    } = config;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.expression,
+      "data-keypad": true
+    }, showCorrect || disabled ? /*#__PURE__*/React.createElement("div", {
+      className: cx(classes.static, {
+        [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
+        [classes.correct]: !emptyResponse && (correct || showCorrect)
+      })
+    }, /*#__PURE__*/React.createElement(mq.Static, {
+      latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || ''
+    })) : /*#__PURE__*/React.createElement("div", {
+      id: this.mathToolBarId
+    }, /*#__PURE__*/React.createElement(MathToolbar, {
+      classNames: {
+        editor: classes.responseEditor
+      },
+      latex: session.response,
+      keypadMode: equationEditor,
+      onChange: onSimpleResponseChange,
+      onDone: () => {},
+      onFocus: this.onFocus,
+      controlledKeypad: true,
+      showKeypad: showKeypad,
+      hideDoneButton: true
+    })));
+  }
+
+}
+SimpleQuestionBlockRaw.propTypes = {
+  classes: PropTypes.object,
+  onSimpleResponseChange: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  emptyResponse: PropTypes.bool,
+  session: PropTypes.object.isRequired,
+  showCorrect: PropTypes.bool,
+  onSubFieldFocus: PropTypes.func.isRequired,
+  showKeypad: PropTypes.bool.isRequired
+};
+const SimpleQuestionBlock = withStyles(theme => ({
+  responseEditor: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: 'auto',
+    maxWidth: 'fit-content',
+    height: 'auto',
+    textAlign: 'left',
+    padding: theme.spacing.unit,
+    '&.mq-math-mode': {
+      border: `1px solid ${color.primaryLight()}`
+    }
+  },
+  expression: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+    padding: theme.spacing.unit
+  },
+  static: {
+    color: color.text(),
+    background: color.background(),
+    border: `1px solid ${color.primaryLight()}`,
+    width: 'fit-content',
+    fontSize: '1rem',
+    padding: theme.spacing.unit / 2,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  correct: {
+    border: `2px solid ${color.correct()} !important`,
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  },
+  incorrect: {
+    border: `2px solid ${color.incorrect()} !important`,
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  }
+}))(SimpleQuestionBlockRaw);
+
+const {
+  translator
+} = Translator;
+let registered = false;
+const NEWLINE_LATEX = /\\newline/g;
+const REGEX = /{{response}}/gm;
+const DEFAULT_KEYPAD_VARIANT = 6; // !!! 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 isChildOfCurrentPieElement(child, parent) {
+  let node = child;
+
+  while (node !== null) {
+    if (parent && node === parent) {
+      return true;
+    }
+
+    node = node.parentNode;
+  }
+
+  return false;
+}
+
+function getKeyPadWidth(additionalKeys = [], equationEditor) {
+  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
+}
+
+function prepareForStatic(model, state) {
+  const {
+    config,
+    disabled
+  } = model || {};
+  const {
+    expression,
+    responses,
+    printMode,
+    alwaysShowCorrect
+  } = config || {};
+
+  if (config && expression) {
+    const modelExpression = expression;
+
+    if (state.showCorrect) {
+      return responses && responses.length && responses[0].answer;
+    }
+
+    let answerBlocks = 1; // assume one at least
+    // build out local state model using responses declared in expression
+
+    return (modelExpression || '').replace(REGEX, function () {
+      const answer = state.session.answers[`r${answerBlocks}`];
+
+      if (printMode && !alwaysShowCorrect) {
+        const blankSpace = '\\ \\ '.repeat(30) + '\\newline ';
+        return `\\MathQuillMathField[r${answerBlocks++}]{${blankSpace.repeat(3)}}`;
+      }
+
+      if (disabled) {
+        return `\\embed{answerBlock}[r${answerBlocks++}]`;
+      }
+
+      return `\\MathQuillMathField[r${answerBlocks++}]{${answer && answer.value || ''}}`;
+    }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
+  }
+}
+
+function parseAnswers(session, model) {
+  const answers = {};
+
+  if (model.config && model.config.expression) {
+    let answerBlocks = 1; // assume one at least
+    // build out local state model using responses declared in expression
+
+    (model.config.expression || '').replace(REGEX, () => {
+      answers[`r${answerBlocks}`] = {
+        value: session && session.answers && session.answers[`r${answerBlocks}`] && session.answers[`r${answerBlocks}`].value || ''
+      };
+      answerBlocks += 1;
+    });
+  }
+
+  return answers;
+}
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleAnswerBlockDomUpdate = () => {
+      const {
+        model,
+        classes
+      } = 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`); // const correct = model.correctness && model.correctness.correct;
+
+          if (el) {
+            let MQ = MathQuill.getInterface(2);
+            const answer = answers[answerId];
+            el.textContent = answer && answer.value || '';
+
+            if (!model.view) ; else {
+              el.parentElement.parentElement.classList.remove(classes.correct);
+              el.parentElement.parentElement.classList.remove(classes.incorrect);
+            }
+
+            MQ.StaticMath(el); // For now, we're not going to be indexing response blocks
+            // TODO go back to indexing once we support individual response correctness
+            // indexEl.textContent = `R${idx + 1}`;
+
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+
+      renderMath(this.root);
+    };
+
+    this.updateAria = () => {
+      const {
+        classes
+      } = this.props;
+
+      if (this.root) {
+        // Update aria-hidden for .mq-selectable elements
+        const selectableElements = this.root.querySelectorAll('.mq-selectable');
+        selectableElements.forEach(elem => elem.setAttribute('aria-hidden', 'true')); // Update aria-label for textarea elements and add aria-describedby
+
+        const textareaElements = this.root.querySelectorAll('textarea');
+        textareaElements.forEach((elem, index) => {
+          elem.setAttribute('aria-label', 'Enter answer.'); // Create a unique id for each instructions element
+
+          const instructionsId = `instructions-${index}`; // Find the parent element that contains the textarea
+
+          const parent = elem.closest('.mq-textarea');
+
+          if (parent) {
+            // Create or find the instructions element within the parent
+            let instructionsElement = parent.querySelector(`#${instructionsId}`);
+
+            if (!instructionsElement) {
+              instructionsElement = document.createElement('span');
+              instructionsElement.id = instructionsId;
+              instructionsElement.className = classes.srOnly;
+              instructionsElement.textContent = 'This field supports both keypad and keyboard input. Use the keyboard to access and interact with the on-screen math keypad, which accepts LaTeX markup. Use the down arrow key to open the keypad and navigate its buttons. Use the escape key to close the keypad and return to the input field.';
+              parent.insertBefore(instructionsElement, elem);
+            }
+
+            elem.setAttribute('aria-describedby', instructionsId);
+          }
+        });
+      }
+    };
+
+    this.focusFirstKeypadElement = () => {
+      setTimeout(() => {
+        const keypadElement = document.querySelector('[data-keypad]');
+
+        if (keypadElement) {
+          const firstButton = keypadElement.querySelector("button, [role='button']");
+
+          if (firstButton) {
+            firstButton.focus();
+          }
+        }
+      }, 0);
+    };
+
+    this.handleKeyDown = (event, id) => {
+      var _this$mqStatic$inputR, _this$mqStatic$inputR2, _document$activeEleme;
+
+      const isTrigerredFromActualPieElement = isChildOfCurrentPieElement(event.target, this.root);
+      const isAnswerInputFocused = this.mqStatic && (_this$mqStatic$inputR = this.mqStatic.inputRef) != null && _this$mqStatic$inputR.current ? (_this$mqStatic$inputR2 = this.mqStatic.inputRef) == null ? void 0 : _this$mqStatic$inputR2.current.contains(document.activeElement) : ((_document$activeEleme = document.activeElement) == null ? void 0 : _document$activeEleme.getAttribute('aria-label')) === 'Enter answer.';
+      const {
+        key,
+        type
+      } = event;
+      const isClickOrTouchEvent = type === 'click' || type === 'touchstart';
+
+      if (isAnswerInputFocused && (key === 'ArrowDown' || isClickOrTouchEvent)) {
+        if (this.state.activeAnswerBlock !== id && isTrigerredFromActualPieElement) {
+          this.cleanupKeyDownListener();
+          this.setState({
+            activeAnswerBlock: id
+          }, () => {
+            this.onSubFieldFocus(id);
+
+            if (key === 'ArrowDown') {
+              this.focusFirstKeypadElement();
+            }
+          });
+        }
+      } else if (event.key === 'Escape') {
+        this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    };
+
+    this.onSubFieldFocus = id => {
+      if (!this.handleEvent) {
+        this.handleEvent = event => {
+          this.handleKeyDown(event, id);
+        };
+
+        document.addEventListener('keydown', this.handleEvent);
+        document.addEventListener('click', this.handleEvent);
+        document.addEventListener('touchstart', this.handleEvent);
+      }
+    };
+
+    this.cleanupKeyDownListener = () => {
+      if (this.handleEvent) {
+        document.removeEventListener('keydown', this.handleEvent);
+        document.removeEventListener('click', this.handleEvent);
+        document.removeEventListener('touchstart', this.handleEvent);
+        this.handleEvent = null;
+      }
+    };
+
+    this.onDone = () => {};
+
+    this.onSimpleResponseChange = response => {
+      this.setState(state => ({
+        session: _extends({}, state.session, {
+          response
+        })
+      }), this.callOnSessionChange);
+    };
+
+    this.toNodeData = data => {
+      if (!data) {
+        return;
+      }
+
+      const {
+        type,
+        value
+      } = data;
+
+      if (type === 'command' || type === 'cursor') {
+        return data;
+      } else if (type === 'answer') {
+        return _extends({
+          type: 'answer'
+        }, data);
+      } else if (value === 'clear') {
+        return {
+          type: 'clear'
+        };
+      } else {
+        return {
+          type: 'write',
+          value
+        };
+      }
+    };
+
+    this.setInput = input => {
+      this.input = input;
+    };
+
+    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);
+      }
+
+      this.input.focus();
+    };
+
+    this.callOnSessionChange = () => {
+      const {
+        onSessionChange
+      } = this.props;
+
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    };
+
+    this.toggleShowCorrect = show => {
+      this.setState({
+        showCorrect: show
+      }, this.handleAnswerBlockDomUpdate);
+    };
+
+    this.subFieldChanged = (name, subfieldValue) => {
+      updateSpans();
+
+      if (name) {
+        this.setState(state => ({
+          session: _extends({}, state.session, {
+            completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+            answers: _extends({}, state.session.answers, {
+              [name]: {
+                value: subfieldValue
+              }
+            })
+          })
+        }), this.callOnSessionChange);
+      }
+    };
+
+    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;
+        });
+      }
+    };
+
+    this.onBlur = e => {
+      const {
+        relatedTarget,
+        currentTarget
+      } = e || {}; // our keypad is in tooltip
+      // in this way we see if event was triggered from the keypad
+
+      const isKeypadOpen = currentTarget && currentTarget.closest('[role=tooltip]');
+
+      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) {
+        var _element$children;
+
+        // only run this max 4 times
+        if (!element || depth >= 4) return null;
+        const child = element == null ? void 0 : (_element$children = element.children) == null ? void 0 : _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 != null && childWithDataKeypad.attributes['data-keypad'])) {
+        // if event was trigered from the keypad, avoid closing the keypad
+        if (!isKeypadOpen) {
+          this.setState({
+            activeAnswerBlock: ''
+          });
+        }
+      } // else {
+      //     // Just for debugging purpose:
+      //     console.log('\n\nNew childWithDataKeypad', childWithDataKeypad);
+      //
+      //     if (IS_SAFARI) {
+      //         // (IS_SAFARI && !relatedTarget?.offsetParent?.children[0]?.children[0]?.attributes?.['data-keypad'])
+      //         console.log('What was being used', relatedTarget?.offsetParent?.children[0]?.children[0]);
+      //     } else {
+      //         // (!IS_SAFARI && !relatedTarget?.offsetParent?.children[0]?.attributes?.['data-keypad']) ||
+      //         console.log('What was being used', relatedTarget?.offsetParent?.children[0]);
+      //     }
+      // }
+
+    };
+
+    const {
+      model: _model,
+      session: _session
+    } = props;
+
+    const _answers = parseAnswers(_session, _model);
+
+    this.state = {
+      session: _extends({}, props.session, {
+        answers: _answers
+      }),
+      activeAnswerBlock: '',
+      showCorrect: this.props.model.config.alwaysShowCorrect || false,
+      tooltipContainerRef: /*#__PURE__*/React.createRef()
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    const {
+      classes
+    } = this.props;
+
+    if (typeof window !== 'undefined') {
+      let MQ = MathQuill.getInterface(2);
+
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => {
+          return {
+            htmlString: `<div class="${classes.blockContainer}">
+                <div class="${classes.blockResponse}" id="${data}Index">R</div>
+                <div class="${classes.blockMath}">
+                  <span id="${data}"></span>
+                </div>
+              </div>`,
+            text: () => 'text',
+            latex: () => `\\embed{answerBlock}[${data}]`
+          };
+        });
+        registered = true;
+      }
+    }
+  }
+
+  countResponseOccurrences(expression) {
+    const pattern = /\{\{response\}\}/g;
+    const matches = expression == null ? void 0 : expression.match(pattern);
+    return matches ? matches.length : 0;
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      config
+    } = this.props.model;
+    const {
+      config: nextConfig = {}
+    } = nextProps.model || {};
+    const {
+      session
+    } = this.props;
+    const {
+      session: nextSession = {}
+    } = nextProps || {}; // in case session props changed in parent, we need to catch this and update local state
+    // example: when env is changing in pieoneer
+
+    if (session && nextSession && !isEqual(session.answers, nextSession.answers)) {
+      this.setState({
+        session: _extends({}, nextSession, {
+          answers: parseAnswers(nextSession, this.props.model)
+        })
+      });
+    } // check if the note is the default one for prev language and change to the default one for new language
+    // this check is necessary in order to diferanciate between default and authour defined note
+    // and only change between languages for default ones
+
+
+    if (config.note && config.language && config.language !== nextConfig.language && config.note === translator.t('mathInline.primaryCorrectWithAlternates', {
+      lng: config.language
+    })) {
+      config.note = translator.t('mathInline.primaryCorrectWithAlternates', {
+        lng: nextConfig.language
+      });
+    }
+
+    if (config.env && config.env.mode !== 'evaluate' || nextConfig.env && nextConfig.env.mode !== 'evaluate') {
+      this.setState(_extends({}, this.state.session, {
+        showCorrect: false
+      }));
+    }
+
+    if (nextConfig.alwaysShowCorrect) {
+      this.setState({
+        showCorrect: true
+      });
+    }
+
+    if (this.countResponseOccurrences(config.expression) < this.countResponseOccurrences(nextConfig.expression)) {
+      setTimeout(() => this.updateAria(), 100);
+    }
+
+    if (config && config.responses && config.responses.length !== nextConfig.responses.length || !config && nextConfig && nextConfig.responses || config && nextConfig && config.expression !== nextConfig.expression) {
+      const newAnswers = {};
+      const answers = this.state.session.answers;
+      let answerBlocks = 1; // assume one at least
+      // build out local state model using responses declared in expression
+
+      (nextConfig.expression || '').replace(REGEX, () => {
+        newAnswers[`r${answerBlocks}`] = {
+          value: answers && answers[`r${answerBlocks}`] && answers[`r${answerBlocks}`].value || ''
+        };
+        answerBlocks++;
+      });
+      this.setState(state => ({
+        session: _extends({}, state.session, {
+          completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+          answers: newAnswers
+        })
+      }), this.handleAnswerBlockDomUpdate);
+    }
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const sameModel = isEqual(this.props.model, nextProps.model);
+    const sameState = isEqual(this.state, nextState);
+    return !sameModel || !sameState;
+  }
+
+  componentDidMount() {
+    this.handleAnswerBlockDomUpdate();
+    this.updateAria();
+    setTimeout(() => renderMath(this.root), 100);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _prevProps$model, _prevProps$model$conf, _this$props$model, _this$props$model$con;
+
+    this.handleAnswerBlockDomUpdate();
+    const prevResponseType = (_prevProps$model = prevProps.model) == null ? void 0 : (_prevProps$model$conf = _prevProps$model.config) == null ? void 0 : _prevProps$model$conf.responseType;
+    const currentResponseType = (_this$props$model = this.props.model) == null ? void 0 : (_this$props$model$con = _this$props$model.config) == null ? void 0 : _this$props$model$con.responseType;
+
+    if (prevResponseType !== currentResponseType) {
+      this.updateAria();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.cleanupKeyDownListener) {
+      this.cleanupKeyDownListener();
+    }
+  }
+
+  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,
+      classes
+    } = this.props;
+    const {
+      activeAnswerBlock,
+      showCorrect,
+      session,
+      tooltipContainerRef
+    } = this.state;
+    const {
+      config,
+      correctness,
+      disabled,
+      extraCSSRules,
+      view,
+      teacherInstructions,
+      rationale,
+      feedback,
+      animationsDisabled,
+      printMode,
+      alwaysShowCorrect,
+      language
+    } = model || {};
+
+    if (!config) {
+      return null;
+    }
+
+    const {
+      showNote,
+      note,
+      prompt,
+      responses,
+      responseType,
+      equationEditor,
+      customKeys,
+      id,
+      env: {
+        mode,
+        role
+      } = {}
+    } = config || {};
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    const emptyResponse = isEmpty(responses);
+    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+    const tooltipModeEnabled = disabled && correctness;
+    const additionalKeys = generateAdditionalKeys(customKeys);
+    const correct = correctness && correctness.correct;
+    const staticLatex = prepareForStatic(model, this.state) || '';
+    const viewMode = disabled && !correctness;
+    const studentPrintMode = printMode && !alwaysShowCorrect;
+    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
+    const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
+    const printView = /*#__PURE__*/React.createElement("div", {
+      className: classes.printContainer
+    }, /*#__PURE__*/React.createElement(mq.Static, {
+      className: classes.static,
+      ref: mqStatic => {
+        if (mqStatic) this.mqStatic = mqStatic;
+      },
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur
+    }));
+    const midContent = /*#__PURE__*/React.createElement("div", {
+      className: classes.main
+    }, mode === 'gather' && /*#__PURE__*/React.createElement("h2", {
+      className: classes.srOnly
+    }, "Math Equation Response Question"), viewMode && showTeacherInstructions && (!animationsDisabled ? /*#__PURE__*/React.createElement(Collapsible, {
+      className: classes.collapsible,
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      }
+    })), prompt && /*#__PURE__*/React.createElement("div", {
+      className: classes.promptContainer
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: prompt
+    })), studentPrintMode ? printView : /*#__PURE__*/React.createElement(Readable, {
+      false: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.inputAndKeypadContainer,
+      tabIndex: 0
+    }, responseType === ResponseTypes.simple && /*#__PURE__*/React.createElement(SimpleQuestionBlock, {
+      onSimpleResponseChange: this.onSimpleResponseChange,
+      showCorrect: showCorrect,
+      emptyResponse: emptyResponse,
+      model: model,
+      session: session,
+      onSubFieldFocus: this.onSubFieldFocus,
+      showKeypad: !!activeAnswerBlock
+    }), responseType === ResponseTypes.advanced && /*#__PURE__*/React.createElement("div", {
+      ref: tooltipContainerRef,
+      className: cx(classes.expression, {
+        [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
+        [classes.correct]: !emptyResponse && (correct || showCorrect),
+        [classes.showCorrectness]: !emptyResponse && disabled && correctness && !view,
+        [classes.correctAnswerShown]: showCorrect,
+        [classes.printCorrect]: printMode && alwaysShowCorrect
+      })
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      ref: ref => this.setTooltipRef(ref),
+      enterTouchDelay: 0,
+      interactive: true,
+      open: !!activeAnswerBlock,
+      classes: {
+        tooltip: classes.keypadTooltip,
+        popper: classes.keypadTooltipPopper
+      },
+      PopperProps: {
+        container: (tooltipContainerRef == null ? void 0 : tooltipContainerRef.current) || undefined,
+        placement: 'bottom-start',
+        modifiers: {
+          preventOverflow: {
+            enabled: true,
+            boundariesElement: 'body'
+          },
+          flip: {
+            enabled: false
+          }
+        }
+      },
+      title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/React.createElement("div", {
+        "data-keypad": true,
+        key: answerId,
+        className: classes.responseContainer,
+        style: {
+          // marginTop: this.mqStatic && this.mqStatic.input.offsetHeight - 20,
+          width: getKeyPadWidth(additionalKeys, equationEditor)
+        }
+      }, /*#__PURE__*/React.createElement(HorizontalKeypad, {
+        additionalKeys: additionalKeys,
+        mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+        onClick: this.onClick
+      })) || null)
+    }, /*#__PURE__*/React.createElement(mq.Static, {
+      className: classes.static,
+      ref: mqStatic => {
+        if (mqStatic) this.mqStatic = mqStatic;
+      },
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur
+    }))))), viewMode && displayNote && /*#__PURE__*/React.createElement("div", {
+      className: classes.note,
+      dangerouslySetInnerHTML: {
+        __html: `<strong>Note:</strong> ${note}`
+      }
+    }), viewMode && showRationale && (!animationsDisabled ? /*#__PURE__*/React.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      }
+    })));
+
+    if (tooltipModeEnabled && (showCorrectAnswerToggle || showTeacherInstructions || showRationale || feedback)) {
+      return /*#__PURE__*/React.createElement(UiLayout, {
+        extraCSSRules: extraCSSRules
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        interactive: true,
+        enterTouchDelay: 0,
+        classes: {
+          tooltip: classes.tooltip,
+          popper: classes.tooltipPopper
+        },
+        title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: classes.main
+        }, showCorrectAnswerToggle && /*#__PURE__*/React.createElement(CorrectAnswerToggle, {
+          language: language,
+          className: classes.toggle,
+          show: true,
+          toggled: showCorrect,
+          onToggle: this.toggleShowCorrect
+        })), showTeacherInstructions && /*#__PURE__*/React.createElement(Collapsible, {
+          className: classes.collapsible,
+          key: "collapsible-teacher-instructions",
+          labels: {
+            hidden: 'Show Teacher Instructions',
+            visible: 'Hide Teacher Instructions'
+          }
+        }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+          prompt: teacherInstructions
+        })), displayNote && hasText(note) && /*#__PURE__*/React.createElement(Collapsible, {
+          className: classes.collapsible,
+          key: "collapsible-note",
+          labels: {
+            hidden: translator.t('common:showNote', {
+              lng: language
+            }),
+            visible: translator.t('common:hideNote', {
+              lng: language
+            })
+          }
+        }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+          prompt: note
+        })), showRationale && /*#__PURE__*/React.createElement(Collapsible, {
+          className: classes.collapsible,
+          key: "collapsible-rationale",
+          labels: {
+            hidden: 'Show Rationale',
+            visible: 'Hide Rationale'
+          }
+        }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+          prompt: rationale
+        })), feedback && /*#__PURE__*/React.createElement(Feedback, {
+          correctness: correctness.correctness,
+          feedback: feedback
+        }))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.mainContainer,
+        ref: r => this.root = r || this.root
+      }, midContent)));
+    }
+
+    return /*#__PURE__*/React.createElement(UiLayout, {
+      id: id,
+      extraCSSRules: extraCSSRules,
+      className: classes.mainContainer,
+      ref: r => {
+        // eslint-disable-next-line react/no-find-dom-node
+        const domNode = ReactDOM.findDOMNode(r);
+        this.root = domNode || this.root;
+      }
+    }, midContent);
+  }
+
+}
+Main.propTypes = {
+  classes: PropTypes.object,
+  session: PropTypes.object.isRequired,
+  onSessionChange: PropTypes.func,
+  model: PropTypes.object.isRequired
+};
+
+const styles = theme => ({
+  mainContainer: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    display: 'inline-block'
+  },
+  tooltip: {
+    background: `${color.primaryLight()} !important`,
+    color: color.text(),
+    padding: theme.spacing.unit * 2,
+    border: `1px solid ${color.secondary()}`,
+    fontSize: '16px',
+    '& :not(.MathJax) > table tr': {
+      '&:nth-child(2n)': {
+        backgroundColor: 'unset !important'
+      }
+    }
+  },
+  tooltipPopper: {
+    opacity: 1
+  },
+  keypadTooltip: {
+    fontSize: 'initial',
+    background: 'transparent',
+    width: '600px',
+    marginTop: 0,
+    paddingTop: 0
+  },
+  keypadTooltipPopper: {
+    background: 'transparent',
+    width: '650px',
+    opacity: 1
+  },
+  promptContainer: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  main: {
+    width: '100%',
+    position: 'relative',
+    backgroundColor: color.background(),
+    color: color.text()
+  },
+  title: {
+    fontSize: '1.1rem',
+    display: 'block',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit
+  },
+  note: {
+    paddingBottom: theme.spacing.unit * 2
+  },
+  collapsible: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  responseContainer: {
+    zIndex: 10,
+    // position: 'absolute',
+    // right: 0,
+    minWidth: '400px',
+    marginTop: theme.spacing.unit * 2
+  },
+  expression: {
+    maxWidth: 'fit-content',
+    padding: theme.spacing.unit / 4,
+    '& > .mq-math-mode': {
+      '& > .mq-root-block': {
+        // PD-4803 unset padding as events are not correctly propagated in the proximity of math input
+        paddingRight: '0 !important',
+        paddingLeft: '0 !important',
+        '& > .mq-editable-field': {
+          minWidth: '10px',
+          padding: theme.spacing.unit / 4
+        }
+      },
+      '& sup': {
+        top: 0
+      }
+    }
+  },
+  static: {
+    '& > .mq-root-block': {
+      '& > .mq-editable-field': {
+        borderColor: color.text()
+      }
+    }
+  },
+  inputAndKeypadContainer: {
+    position: 'relative',
+    '& .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
+    }
+  },
+  showCorrectness: {
+    border: '2px solid'
+  },
+  correctAnswerShown: {
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  },
+  printCorrect: {
+    border: `2px solid ${color.correct()} !important`
+  },
+  correct: {
+    borderColor: `${color.correct()} !important`
+  },
+  incorrect: {
+    borderColor: `${color.incorrect()} !important`
+  },
+  blockContainer: {
+    margin: `${theme.spacing.unit}px !important`,
+    display: 'inline-flex',
+    border: '2px solid grey !important'
+  },
+  blockResponse: {
+    color: 'grey',
+    background: theme.palette.grey['A100'],
+    fontSize: '0.8rem !important',
+    padding: `${theme.spacing.unit / 2}px !important`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: `2px solid ${color.disabled()} !important`,
+    flexShrink: 0,
+    flexGrow: 0,
+    flexBasis: 'auto' // take only the space needed for content + padding
+
+  },
+  toggle: {
+    color: color.text(),
+    marginBottom: theme.spacing.unit * 2
+  },
+  blockMath: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: `${theme.spacing.unit / 2}px !important`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    // take all the remaining space
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  printContainer: {
+    marginBottom: theme.spacing.unit,
+    pointerEvents: 'none'
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
+  }
+});
+
+var Main$1 = withStyles(styles)(Main);
+
+const log = debug('pie-ui:math-inline');
+class MathInline extends HTMLElement {
+  constructor() {
+    super();
+    this._configuration = defaults.configuration;
+    this.sessionChangedEventCaller = _.debounce(() => {
+      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), true));
+    }, 1000);
+  }
+
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang); // set the lang attribute for the nearest parent div with class 'player-container' for MPI items as per PD-2483
+
+    const playerContainer = this.closest('.player-container');
+
+    if (playerContainer) {
+      playerContainer.setAttribute('lang', lang);
+    }
+  }
+
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelSetEvent(this._model, true, !!this._model));
+    this.setLangAttribute();
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  set configuration(c) {
+    this._configuration = c;
+
+    this._render();
+  }
+
+  sessionChanged(s) {
+    Object.keys(s).map(key => {
+      this._session[key] = s[key];
+    });
+    this.sessionChangedEventCaller();
+    log('session: ', this._session);
+  }
+
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Math Response Question');
+    this.setAttribute('role', 'region');
+
+    this._render();
+  }
+
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+
+    const el = /*#__PURE__*/React.createElement(Main$1, {
+      model: this._model,
+      session: this._session,
+      configuration: this._configuration,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    ReactDOM.render(el, this);
+  }
+
+}
+
+export { Main$1 as Component, MathInline as default };
+//# sourceMappingURL=element.js.map