@pie-lib/math-input 6.31.1 → 6.32.0-mui-update.0

package/lib/mq/static.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/mq/static.jsx"],"names":["MQ","window","MathQuill","getInterface","log","REGEX","WHITESPACE_REGEX","stripSpaces","string","replace","countBraces","latex","count","i","length","Static","props","liveRegion","document","createElement","style","position","width","height","marginTop","clip","overflow","setAttribute","body","appendChild","input","inputRef","current","addEventListener","handleKeyDown","handleMathKeyboardClick","removeEventListener","removeChild","event","key","setState","isDeleteKeyPressed","inputSource","field","mathField","name","getFieldName","innerFields","onSubFieldChange","regexMatch","match","__controller","cursor","insLeftOf","parent","el","dispatchEvent","KeyboardEvent","keyCode","e","console","error","toString","announceLatexConversion","newLatex","state","previousLatex","announcement","newBraces","oldBraces","announceMessage","parseLatex","warn","message","textContent","setTimeout","Error","StaticMath","handlers","edit","onInputEdit","bind","blur","focus","rootBlock","target","parentElement","nextSibling","id","parseInt","getAttribute","innerField","find","f","setInput","onSubFieldFocus","err","React","createRef","update","createLiveRegion","addEventListeners","removeLiveRegion","removeEventListeners","nextProps","parsedLatex","stripped","newFieldCount","out","trim","Object","keys","onBlur","className","onFocus","Component","PropTypes","isRequired","func"],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport MathQuill from '@pie-framework/mathquill';\nimport { updateSpans } from '../updateSpans';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n}\n\nconst log = debug('pie-lib:math-input:mq:static');\nconst REGEX = /\\\\MathQuillMathField\\[r\\d*\\]\\{(.*?)\\}/g;\nconst WHITESPACE_REGEX = / /g;\n\nfunction stripSpaces(string = '') {\n  return string.replace(WHITESPACE_REGEX, '');\n}\n\nfunction countBraces(latex) {\n  let count = 0;\n\n  for (let i = 0; i < (latex || '').length; i++) {\n    if (latex[i] === '{') {\n      count++;\n    }\n  }\n\n  return count;\n}\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport default class Static extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    className: PropTypes.string,\n    getFieldName: PropTypes.func,\n    onSubFieldChange: PropTypes.func,\n    onSubFieldFocus: PropTypes.func,\n    setInput: PropTypes.func,\n  };\n\n  static defaultProps = {\n    getFieldName: () => {},\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      announcement: '',\n      previousLatex: '',\n      inputSource: null,\n      isDeleteKeyPressed: false,\n    };\n\n    this.inputRef = React.createRef();\n  }\n\n  componentDidMount() {\n    this.update();\n    updateSpans();\n\n    this.createLiveRegion();\n    this.addEventListeners();\n  }\n\n  componentDidUpdate() {\n    this.update();\n    updateSpans();\n  }\n\n  componentWillUnmount() {\n    this.removeLiveRegion();\n    this.removeEventListeners();\n  }\n\n  createLiveRegion = () => {\n    this.liveRegion = document.createElement('div');\n    this.liveRegion.style.position = 'absolute';\n    this.liveRegion.style.width = '1px';\n    this.liveRegion.style.height = '1px';\n    this.liveRegion.style.marginTop = '-1px';\n    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';\n    this.liveRegion.style.overflow = 'hidden';\n    this.liveRegion.setAttribute('aria-live', 'polite');\n    this.liveRegion.setAttribute('aria-atomic', 'true');\n\n    document.body.appendChild(this.liveRegion);\n  };\n\n  addEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.addEventListener('keydown', this.handleKeyDown);\n      input.addEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.removeEventListener('keydown', this.handleKeyDown);\n      input.removeEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeLiveRegion = () => {\n    if (this.liveRegion) {\n      document.body.removeChild(this.liveRegion);\n      this.liveRegion = null;\n    }\n  };\n\n  handleKeyDown = (event) => {\n    if (event?.key === 'Backspace' || event?.key === 'Delete') {\n      this.setState({ isDeleteKeyPressed: true });\n    }\n    this.setState({ inputSource: 'keyboard' });\n  };\n\n  handleMathKeyboardClick = () => {\n    this.setState({ inputSource: 'mathKeyboard' });\n  };\n\n  onInputEdit = (field) => {\n    if (!this.mathField) {\n      return;\n    }\n    const name = this.props.getFieldName(field, this.mathField.innerFields);\n\n    if (this.props.onSubFieldChange) {\n      // eslint-disable-next-line no-useless-escape\n      const regexMatch = field.latex().match(/[0-9]\\\\ \\\\frac\\{[^\\{]*\\}\\{ \\}/);\n\n      if (this.inputRef?.current && regexMatch && regexMatch?.length) {\n        try {\n          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);\n          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error(e.toString());\n        }\n      } else {\n        this.props.onSubFieldChange(name, field.latex());\n      }\n    }\n\n    this.announceLatexConversion(field.latex());\n  };\n\n  announceLatexConversion = (newLatex) => {\n    if (!this.state) {\n      console.error('State is not initialized');\n      return;\n    }\n\n    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;\n    const announcement = 'Converted to math symbol';\n\n    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {\n      const newBraces = countBraces(newLatex);\n      const oldBraces = countBraces(previousLatex);\n\n      if (newBraces > oldBraces) {\n        this.announceMessage(announcement);\n      } else {\n        try {\n          this.mathField.parseLatex(previousLatex);\n          this.mathField.parseLatex(newLatex);\n\n          if (newLatex == previousLatex) {\n            this.announceMessage(announcement);\n          }\n        } catch (e) {\n          console.warn('Error parsing latex:', e.message);\n          console.warn(e);\n        }\n      }\n    }\n\n    this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });\n  };\n\n  announceMessage = (message) => {\n    this.setState({ previousLatex: '' });\n\n    if (this.liveRegion) {\n      this.liveRegion.textContent = message;\n\n      // Clear the message after it is announced\n      setTimeout(() => {\n        this.liveRegion.textContent = '';\n      }, 500);\n    }\n  };\n\n  update = () => {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n    if (!this.mathField) {\n      this.mathField = MQ.StaticMath(this.inputRef?.current, {\n        handlers: {\n          edit: this.onInputEdit.bind(this),\n        },\n      });\n    }\n\n    try {\n      this.mathField.parseLatex(this.props.latex);\n      this.mathField.latex(this.props.latex);\n    } catch (e) {\n      // default latex if received has errors\n      this.mathField.latex('\\\\MathQuillMathField[r1]{}');\n    }\n  };\n\n  blur = () => {\n    log('blur mathfield');\n    this.mathField.blur();\n  };\n\n  focus = () => {\n    log('focus mathfield...');\n    this.mathField.focus();\n  };\n\n  shouldComponentUpdate(nextProps) {\n    try {\n      const parsedLatex = this.mathField.parseLatex(nextProps.latex);\n      const stripped = stripSpaces(parsedLatex);\n      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;\n\n      const out =\n        stripped !== stripSpaces(this.mathField.latex().trim()) ||\n        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;\n\n      log('[shouldComponentUpdate] ', out);\n      return out;\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn('Error parsing latex:', e.message, 'skip update');\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      return false;\n    }\n  }\n\n  onFocus = (e) => {\n    try {\n      let rootBlock = e.target.parentElement.nextSibling;\n      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n\n      if (!id) {\n        rootBlock = rootBlock.parentElement;\n        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n      }\n\n      const innerField = this.mathField.innerFields.find((f) => f.id === id);\n\n      if (innerField) {\n        const name = this.props.getFieldName(innerField, this.mathField.innerFields);\n        if (this.props.setInput) {\n          this.props.setInput(innerField);\n        }\n        this.props.onSubFieldFocus(name, innerField);\n      }\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('error finding root block', err.message);\n    }\n  };\n\n  render() {\n    const { onBlur, className } = this.props;\n\n    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;\n  }\n}\n"],"file":"static.js"}
+{"version":3,"file":"static.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_mathquill","_updateSpans","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","MQ","window","MathQuill","getInterface","log","debug","REGEX","WHITESPACE_REGEX","stripSpaces","string","arguments","length","undefined","replace","countBraces","latex","count","i","Static","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","liveRegion","document","createElement","style","position","width","height","marginTop","clip","overflow","setAttribute","body","appendChild","input","inputRef","current","addEventListener","handleKeyDown","handleMathKeyboardClick","removeEventListener","removeChild","event","key","setState","isDeleteKeyPressed","inputSource","field","mathField","name","getFieldName","innerFields","onSubFieldChange","_this$inputRef","regexMatch","match","__controller","cursor","insLeftOf","parent","el","dispatchEvent","KeyboardEvent","keyCode","console","error","toString","announceLatexConversion","newLatex","state","_this$state","previousLatex","announcement","newBraces","oldBraces","announceMessage","parseLatex","warn","message","textContent","setTimeout","Error","_this$inputRef2","StaticMath","handlers","edit","onInputEdit","bind","blur","focus","rootBlock","target","parentElement","nextSibling","id","parseInt","getAttribute","innerField","find","f","setInput","onSubFieldFocus","err","React","createRef","_inherits2","_createClass2","value","componentDidMount","update","updateSpans","createLiveRegion","addEventListeners","componentDidUpdate","componentWillUnmount","removeLiveRegion","removeEventListeners","shouldComponentUpdate","nextProps","parsedLatex","stripped","newFieldCount","out","trim","Object","keys","render","_this$props","onBlur","className","onFocus","ref","Component","PropTypes","isRequired","func"],"sources":["../../src/mq/static.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport MathQuill from '@pie-framework/mathquill';\nimport { updateSpans } from '../updateSpans';\n\nlet MQ;\nif (typeof window !== 'undefined') {\n  MQ = MathQuill.getInterface(2);\n}\n\nconst log = debug('pie-lib:math-input:mq:static');\nconst REGEX = /\\\\MathQuillMathField\\[r\\d*\\]\\{(.*?)\\}/g;\nconst WHITESPACE_REGEX = / /g;\n\nfunction stripSpaces(string = '') {\n  return string.replace(WHITESPACE_REGEX, '');\n}\n\nfunction countBraces(latex) {\n  let count = 0;\n\n  for (let i = 0; i < (latex || '').length; i++) {\n    if (latex[i] === '{') {\n      count++;\n    }\n  }\n\n  return count;\n}\n\n/**\n * Wrapper for MathQuill MQ.MathField.\n */\nexport default class Static extends React.Component {\n  static propTypes = {\n    latex: PropTypes.string.isRequired,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    className: PropTypes.string,\n    getFieldName: PropTypes.func,\n    onSubFieldChange: PropTypes.func,\n    onSubFieldFocus: PropTypes.func,\n    setInput: PropTypes.func,\n  };\n\n  static defaultProps = {\n    getFieldName: () => {},\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      announcement: '',\n      previousLatex: '',\n      inputSource: null,\n      isDeleteKeyPressed: false,\n    };\n\n    this.inputRef = React.createRef();\n  }\n\n  componentDidMount() {\n    this.update();\n    updateSpans();\n\n    this.createLiveRegion();\n    this.addEventListeners();\n  }\n\n  componentDidUpdate() {\n    this.update();\n    updateSpans();\n  }\n\n  componentWillUnmount() {\n    this.removeLiveRegion();\n    this.removeEventListeners();\n  }\n\n  createLiveRegion = () => {\n    this.liveRegion = document.createElement('div');\n    this.liveRegion.style.position = 'absolute';\n    this.liveRegion.style.width = '1px';\n    this.liveRegion.style.height = '1px';\n    this.liveRegion.style.marginTop = '-1px';\n    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';\n    this.liveRegion.style.overflow = 'hidden';\n    this.liveRegion.setAttribute('aria-live', 'polite');\n    this.liveRegion.setAttribute('aria-atomic', 'true');\n\n    document.body.appendChild(this.liveRegion);\n  };\n\n  addEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.addEventListener('keydown', this.handleKeyDown);\n      input.addEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeEventListeners = () => {\n    const input = this.inputRef.current;\n\n    if (input) {\n      input.removeEventListener('keydown', this.handleKeyDown);\n      input.removeEventListener('click', this.handleMathKeyboardClick);\n    }\n  };\n\n  removeLiveRegion = () => {\n    if (this.liveRegion) {\n      document.body.removeChild(this.liveRegion);\n      this.liveRegion = null;\n    }\n  };\n\n  handleKeyDown = (event) => {\n    if (event?.key === 'Backspace' || event?.key === 'Delete') {\n      this.setState({ isDeleteKeyPressed: true });\n    }\n    this.setState({ inputSource: 'keyboard' });\n  };\n\n  handleMathKeyboardClick = () => {\n    this.setState({ inputSource: 'mathKeyboard' });\n  };\n\n  onInputEdit = (field) => {\n    if (!this.mathField) {\n      return;\n    }\n    const name = this.props.getFieldName(field, this.mathField.innerFields);\n\n    if (this.props.onSubFieldChange) {\n      // eslint-disable-next-line no-useless-escape\n      const regexMatch = field.latex().match(/[0-9]\\\\ \\\\frac\\{[^\\{]*\\}\\{ \\}/);\n\n      if (this.inputRef?.current && regexMatch && regexMatch?.length) {\n        try {\n          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);\n          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          console.error(e.toString());\n        }\n      } else {\n        this.props.onSubFieldChange(name, field.latex());\n      }\n    }\n\n    this.announceLatexConversion(field.latex());\n  };\n\n  announceLatexConversion = (newLatex) => {\n    if (!this.state) {\n      console.error('State is not initialized');\n      return;\n    }\n\n    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;\n    const announcement = 'Converted to math symbol';\n\n    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {\n      const newBraces = countBraces(newLatex);\n      const oldBraces = countBraces(previousLatex);\n\n      if (newBraces > oldBraces) {\n        this.announceMessage(announcement);\n      } else {\n        try {\n          this.mathField.parseLatex(previousLatex);\n          this.mathField.parseLatex(newLatex);\n\n          if (newLatex == previousLatex) {\n            this.announceMessage(announcement);\n          }\n        } catch (e) {\n          console.warn('Error parsing latex:', e.message);\n          console.warn(e);\n        }\n      }\n    }\n\n    this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });\n  };\n\n  announceMessage = (message) => {\n    this.setState({ previousLatex: '' });\n\n    if (this.liveRegion) {\n      this.liveRegion.textContent = message;\n\n      // Clear the message after it is announced\n      setTimeout(() => {\n        this.liveRegion.textContent = '';\n      }, 500);\n    }\n  };\n\n  update = () => {\n    if (!MQ) {\n      throw new Error('MQ is not defined - but component has mounted?');\n    }\n    if (!this.mathField) {\n      this.mathField = MQ.StaticMath(this.inputRef?.current, {\n        handlers: {\n          edit: this.onInputEdit.bind(this),\n        },\n      });\n    }\n\n    try {\n      this.mathField.parseLatex(this.props.latex);\n      this.mathField.latex(this.props.latex);\n    } catch (e) {\n      // default latex if received has errors\n      this.mathField.latex('\\\\MathQuillMathField[r1]{}');\n    }\n  };\n\n  blur = () => {\n    log('blur mathfield');\n    this.mathField.blur();\n  };\n\n  focus = () => {\n    log('focus mathfield...');\n    this.mathField.focus();\n  };\n\n  shouldComponentUpdate(nextProps) {\n    try {\n      const parsedLatex = this.mathField.parseLatex(nextProps.latex);\n      const stripped = stripSpaces(parsedLatex);\n      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;\n\n      const out =\n        stripped !== stripSpaces(this.mathField.latex().trim()) ||\n        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;\n\n      log('[shouldComponentUpdate] ', out);\n      return out;\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.warn('Error parsing latex:', e.message, 'skip update');\n      // eslint-disable-next-line no-console\n      console.warn(e);\n      return false;\n    }\n  }\n\n  onFocus = (e) => {\n    try {\n      let rootBlock = e.target.parentElement.nextSibling;\n      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n\n      if (!id) {\n        rootBlock = rootBlock.parentElement;\n        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);\n      }\n\n      const innerField = this.mathField.innerFields.find((f) => f.id === id);\n\n      if (innerField) {\n        const name = this.props.getFieldName(innerField, this.mathField.innerFields);\n        if (this.props.setInput) {\n          this.props.setInput(innerField);\n        }\n        this.props.onSubFieldFocus(name, innerField);\n      }\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('error finding root block', err.message);\n    }\n  };\n\n  render() {\n    const { onBlur, className } = this.props;\n\n    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/shared/constants.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.PIE_TOOLBAR__CLASS = exports.MAIN_CONTAINER_CLASS = void 0;
-var MAIN_CONTAINER_CLASS = 'main-container';
-exports.MAIN_CONTAINER_CLASS = MAIN_CONTAINER_CLASS;
-var PIE_TOOLBAR__CLASS = 'pie-toolbar';
-exports.PIE_TOOLBAR__CLASS = PIE_TOOLBAR__CLASS;
-var _default = {
+var MAIN_CONTAINER_CLASS = exports.MAIN_CONTAINER_CLASS = 'main-container';
+var PIE_TOOLBAR__CLASS = exports.PIE_TOOLBAR__CLASS = 'pie-toolbar';
+var _default = exports["default"] = {
   MAIN_CONTAINER_CLASS: MAIN_CONTAINER_CLASS,
   PIE_TOOLBAR__CLASS: PIE_TOOLBAR__CLASS
 };
-exports["default"] = _default;
 //# sourceMappingURL=constants.js.map

package/lib/updateSpans.js

@@ -4,20 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateSpans = void 0;
-
 // increase the font of parallel notation
-var updateSpans = function updateSpans() {
+var updateSpans = exports.updateSpans = function updateSpans() {
   var spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
   (spans || []).forEach(function (span) {
     if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {
       span.style.fontSize = '32px';
     }
-
     if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {
       span.setAttribute('data-prime', 'true');
     }
   });
 };
-
-exports.updateSpans = updateSpans;
 //# sourceMappingURL=updateSpans.js.map

package/lib/updateSpans.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/updateSpans.js"],"names":["updateSpans","spans","Array","from","document","querySelectorAll","forEach","span","innerText","className","style","fontSize","hasAttribute","setAttribute"],"mappings":";;;;;;;AAAA;AACA,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAN,CAAWC,QAAQ,CAACC,gBAAT,CAA0B,4BAA1B,CAAX,CAAd;AACA,GAACJ,KAAK,IAAI,EAAV,EAAcK,OAAd,CAAsB,UAACC,IAAD,EAAU;AAC9B,QAAIA,IAAI,IAAIA,IAAI,CAACC,SAAL,KAAmB,GAA3B,IAAkCD,IAAI,CAACE,SAAL,KAAmB,mBAAzD,EAA8E;AAC5EF,MAAAA,IAAI,CAACG,KAAL,CAAWC,QAAX,GAAsB,MAAtB;AACD;;AAED,QAAI,CAACJ,IAAI,CAACC,SAAL,KAAmB,GAAnB,IAA0BD,IAAI,CAACC,SAAL,KAAmB,IAA9C,KAAuD,CAACD,IAAI,CAACK,YAAL,CAAkB,YAAlB,CAA5D,EAA6F;AAC3FL,MAAAA,IAAI,CAACM,YAAL,CAAkB,YAAlB,EAAgC,MAAhC;AACD;AACF,GARD;AASD,CAXD","sourcesContent":["// increase the font of parallel notation\nconst updateSpans = () => {\n  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));\n  (spans || []).forEach((span) => {\n    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {\n      span.style.fontSize = '32px';\n    }\n\n    if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {\n      span.setAttribute('data-prime', 'true');\n    }\n  });\n};\n\nexport { updateSpans };\n"],"file":"updateSpans.js"}
+{"version":3,"file":"updateSpans.js","names":["updateSpans","exports","spans","Array","from","document","querySelectorAll","forEach","span","innerText","className","style","fontSize","hasAttribute","setAttribute"],"sources":["../src/updateSpans.js"],"sourcesContent":["// increase the font of parallel notation\nconst updateSpans = () => {\n  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));\n  (spans || []).forEach((span) => {\n    if (span && span.innerText === '∥' && span.className !== 'mq-editable-field') {\n      span.style.fontSize = '32px';\n    }\n\n    if ((span.innerText === '′' || span.innerText === '′′') && !span.hasAttribute('data-prime')) {\n      span.setAttribute('data-prime', 'true');\n    }\n  });\n};\n\nexport { updateSpans };\n"],"mappings":";;;;;;AAAA;AACA,IAAMA,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EACxB,IAAME,KAAK,GAAGC,KAAK,CAACC,IAAI,CAACC,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC;EACjF,CAACJ,KAAK,IAAI,EAAE,EAAEK,OAAO,CAAC,UAACC,IAAI,EAAK;IAC9B,IAAIA,IAAI,IAAIA,IAAI,CAACC,SAAS,KAAK,GAAG,IAAID,IAAI,CAACE,SAAS,KAAK,mBAAmB,EAAE;MAC5EF,IAAI,CAACG,KAAK,CAACC,QAAQ,GAAG,MAAM;IAC9B;IAEA,IAAI,CAACJ,IAAI,CAACC,SAAS,KAAK,GAAG,IAAID,IAAI,CAACC,SAAS,KAAK,IAAI,KAAK,CAACD,IAAI,CAACK,YAAY,CAAC,YAAY,CAAC,EAAE;MAC3FL,IAAI,CAACM,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC;IACzC;EACF,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/package.json

@@ -3,12 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.31.1",
+  "version": "6.32.0-mui-update.0",
   "main": "lib/index.js",
   "module": "src/index.jsx",
   "dependencies": {
-    "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/mathquill": "^1.1.3",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -17,12 +19,12 @@
     "react-portal": "^4.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.1"
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "scripts": {},
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca"
+  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4"
 }

package/src/keypad/index.jsx

@@ -1,31 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { lighten, alpha, styled } from '@mui/material/styles';
 import classNames from 'classnames';
-import { lighten, fade } from '@material-ui/core/styles/colorManipulator';
-import green from '@material-ui/core/colors/green';
 import debug from 'debug';
 import _ from 'lodash';
 import MathQuill from '@pie-framework/mathquill';
-
 import * as mq from '../mq';
+
 import { baseSet } from '../keys';
 import editableHtmlConstants from '../../../editable-html/src/constants';
 import { commonMqKeyboardStyles } from '../mq/common-mq-styles';
 import { sortKeys } from './keys-layout';
+import { green } from '@mui/material/colors';
 
 const log = debug('pie-lib:math-inline:keypad');
 
-const LatexButton = withStyles((theme) => ({
-  root: {
-    textTransform: 'none',
-    padding: 0,
-    margin: 0,
-    fontSize: '110% !important',
-  },
-  latexButton: {
+const StyledLatexButton = styled(Button)(({ theme }) => ({
+  textTransform: 'none',
+  padding: 0,
+  margin: 0,
+  fontSize: '110% !important',
+}));
+
+const LatexButtonContent = styled(mq.Static)(({ theme, latex }) => {
+  const baseStyles = {
     pointerEvents: 'none',
     textTransform: 'none !important',
     '& .mq-scaled.mq-sqrt-prefix': {
@@ -35,25 +35,24 @@ const LatexButton = withStyles((theme) => ({
       marginBottom: '0.9px !important',
     },
     '& .mq-empty': {
-      backgroundColor: `${fade(theme.palette.secondary.main, 0.4)} !important`,
+      backgroundColor: `${alpha(theme.palette.secondary.main, 0.4)} !important`,
     },
     '& .mq-overline .mq-overline-inner': {
       borderTop: '2px solid black',
     },
     '& .mq-non-leaf.mq-overline': {
-      borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
+      borderTop: 'none !important',
     },
     '& .mq-overarrow': {
       width: '30px',
       marginTop: '0 !important',
       borderTop: '2px solid black',
       fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-
       '&.mq-arrow-both': {
         top: '0px !important',
         '& *': {
           lineHeight: '1 !important',
-          borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line,
+          borderTop: 'none !important',
         },
         '&:before': {
           fontSize: '80%',
@@ -119,40 +118,43 @@ const LatexButton = withStyles((theme) => ({
     '& .mq-overarc': {
       borderTop: '2px solid black !important',
       '& .mq-overline': {
-        borderTop: 'none !important', // fixing PD-4873 - in OT, it has border-top 1px and adds extra line
-      },
-      '& .mq-overline-inner': {
         borderTop: 'none !important',
-        paddingTop: '0 !important',
       },
-    },
-  },
-  parallelButton: {
-    fontStyle: 'italic !important',
-  },
-  leftRightArrowButton: {
-    '& .mq-overarrow.mq-arrow-both': {
       '& .mq-overline-inner': {
         borderTop: 'none !important',
         paddingTop: '0 !important',
       },
-      '&:after': {
-        position: 'absolute !important',
-        top: '0px !important',
-      },
     },
-  },
-}))((props) => {
-  let buttonClass;
-
-  if (props.latex === '\\parallel') {
-    buttonClass = classNames(props.classes.latexButton, props.mqClassName, props.classes.parallelButton);
-  } else if (props.latex === '\\overleftrightarrow{\\overline{}}') {
-    buttonClass = classNames(props.classes.latexButton, props.mqClassName, props.classes.leftRightArrowButton);
-  } else {
-    buttonClass = classNames(props.classes.latexButton, props.mqClassName);
+  };
+
+  // Add specific styles based on latex content
+  if (latex === '\\parallel') {
+    return {
+      ...baseStyles,
+      fontStyle: 'italic !important',
+    };
+  }
+
+  if (latex === '\\overleftrightarrow{\\overline{}}') {
+    return {
+      ...baseStyles,
+      '& .mq-overarrow.mq-arrow-both': {
+        '& .mq-overline-inner': {
+          borderTop: 'none !important',
+          paddingTop: '0 !important',
+        },
+        '&:after': {
+          position: 'absolute !important',
+          top: '0px !important',
+        },
+      },
+    };
   }
 
+  return baseStyles;
+});
+
+const LatexButton = (props) => {
   try {
     const MQ = MathQuill.getInterface(2);
     const span = document.createElement('span');
@@ -167,15 +169,15 @@ const LatexButton = withStyles((theme) => ({
   }
 
   return (
-    <Button
-      className={classNames(props.classes.root, props.className)}
+    <StyledLatexButton
+      className={props.className}
       onClick={props.onClick}
       aria-label={props.ariaLabel}
     >
-      <mq.Static className={buttonClass} latex={props.latex} />
-    </Button>
+      <LatexButtonContent latex={props.latex} />
+    </StyledLatexButton>
   );
-});
+};
 
 const createCustomLayout = (layoutObj) => {
   if (layoutObj) {
@@ -189,9 +191,83 @@ const createCustomLayout = (layoutObj) => {
   return {};
 };
 
+const KeyPadContainer = styled('div')(({ theme }) => ({
+  ...commonMqKeyboardStyles,
+  width: '100%',
+  display: 'grid',
+  gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+  gridRowGap: '0px',
+  gridColumnGap: '0px',
+  gridAutoFlow: 'column',
+  '&.character': {
+    textTransform: 'initial !important',
+    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
+  },
+  '&.language': {
+    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  },
+}));
+
+const StyledButton = styled(Button)(({ theme, category, isDelete, isComma, isDot }) => ({
+  minWidth: 'auto',
+  fontSize: isComma || isDot ? '200% !important' : '140% !important',
+  lineHeight: isComma || isDot ? '100%' : 'normal',
+  backgroundColor: 
+    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
+    category === 'comparison' ? lighten(green[500], 0.5) :
+    lighten(theme.palette.primary.light, 0.5),
+  '&:hover': {
+    backgroundColor: 
+      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
+      category === 'comparison' ? lighten(green[500], 0.7) :
+      lighten(theme.palette.primary.light, 0.7),
+  },
+  borderRadius: 0,
+  ...(isDelete && {
+    '& > span': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+    },
+  }),
+}));
+
+const StyledLatexButtonWrapper = styled(Button)(({ theme, category }) => ({
+  minWidth: 'auto',
+  borderRadius: 0,
+  backgroundColor: 
+    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
+    category === 'comparison' ? lighten(green[500], 0.5) :
+    lighten(theme.palette.primary.light, 0.5),
+  '&:hover': {
+    backgroundColor: 
+      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
+      category === 'comparison' ? lighten(green[500], 0.7) :
+      lighten(theme.palette.primary.light, 0.7),
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme, category }) => ({
+  minWidth: 'auto',
+  backgroundColor: 
+    category === 'operators' ? lighten(theme.palette.secondary.light, 0.5) :
+    category === 'comparison' ? lighten(green[500], 0.5) :
+    lighten(theme.palette.primary.light, 0.5),
+  '&:hover': {
+    backgroundColor: 
+      category === 'operators' ? lighten(theme.palette.secondary.light, 0.7) :
+      category === 'comparison' ? lighten(green[500], 0.7) :
+      lighten(theme.palette.primary.light, 0.7),
+  },
+  borderRadius: 0,
+  '& .icon': {
+    height: '30px',
+  },
+}));
+
 export class KeyPad extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     controlledKeypadMode: PropTypes.bool,
     baseSet: PropTypes.array,
@@ -289,14 +365,14 @@ export class KeyPad extends React.Component {
   };
 
   render() {
-    const { classes, className, baseSet, additionalKeys, layoutForKeyPad, onFocus, mode } = this.props;
+    const { className, baseSet, additionalKeys, layoutForKeyPad, onFocus, mode } = this.props;
 
     const noBaseSet = ['non-negative-integers', 'integers', 'decimals', 'fractions', 'item-authoring', 'language'];
 
     const keysWithoutBaseSet = noBaseSet.includes(mode);
     const allKeys = keysWithoutBaseSet
       ? this.flowKeys([], additionalKeys || [])
-      : this.flowKeys(baseSet, additionalKeys || []); //, ...sortKeys(additionalKeys)];
+      : this.flowKeys(baseSet, additionalKeys || []);
 
     const shift = allKeys.length % 5 ? 1 : 0;
     const style = {
@@ -305,9 +381,9 @@ export class KeyPad extends React.Component {
     };
 
     return (
-      <div
+      <KeyPadContainer
         ref={this.keypadRef}
-        className={classNames(classes.keys, className, classes[mode])}
+        className={classNames(className, mode)}
         style={style}
         onFocus={onFocus}
       >
@@ -320,13 +396,6 @@ export class KeyPad extends React.Component {
 
           const common = {
             onClick,
-            className: classNames(
-              classes.labelButton,
-              !keysWithoutBaseSet && classes[k.category],
-              classes[k.extraClass],
-              k.label === ',' && classes.comma,
-              k.label === '.' && classes.dot,
-            ),
             disabled: this.keyIsNotAllowed(k),
             key: `${k.label || k.latex || k.command}-${index}`,
             ...(k.actions || {}),
@@ -335,116 +404,47 @@ export class KeyPad extends React.Component {
 
           if (k.latex) {
             return (
-              <LatexButton
-                latex={k.latex}
-                key={index}
+              <StyledLatexButtonWrapper
                 {...common}
-                className={classes.latexButton}
-                ariaLabel={k.ariaLabel ? k.ariaLabel : k.name || k.label}
-              />
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
+              >
+                <LatexButtonContent latex={k.latex} />
+              </StyledLatexButtonWrapper>
             );
           }
 
           if (k.label) {
             return (
-              <Button
-                key={index}
+              <StyledButton
                 {...common}
-                className={classNames(common.className, { [classes.deleteButton]: k.label === '⌫' })}
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                isDelete={k.label === '⌫'}
+                isComma={k.label === ','}
+                isDot={k.label === '.'}
                 aria-label={k.ariaLabel ? k.ariaLabel : k.name || k.label}
               >
                 {k.label}
-              </Button>
+              </StyledButton>
             );
           } else {
             const Icon = k.icon ? k.icon : 'div';
 
             return (
-              <IconButton tabIndex={'-1'} {...common} key={index}>
-                <Icon className={classes.icon} />
-              </IconButton>
+              <StyledIconButton
+                tabIndex={'-1'}
+                {...common}
+                category={!keysWithoutBaseSet ? k.category : undefined}
+                size="large"
+              >
+                <Icon className="icon" />
+              </StyledIconButton>
             );
           }
         })}
-      </div>
+      </KeyPadContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  keys: {
-    ...commonMqKeyboardStyles,
-    width: '100%',
-    display: 'grid',
-    gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
-    gridRowGap: '0px',
-    gridColumnGap: '0px',
-    gridAutoFlow: 'column',
-  },
-  character: {
-    textTransform: 'initial !important',
-    gridTemplateRows: 'repeat(5, minmax(40px, 50px)) !important',
-  },
-  language: {
-    gridTemplateRows: 'repeat(4, minmax(40px, 50px)) !important',
-    '& *': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-  holder: {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#cef',
-    borderRadius: 0,
-    padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`,
-  },
-  labelButton: {
-    minWidth: 'auto',
-    fontSize: '140% !important',
-    backgroundColor: lighten(theme.palette.primary.light, 0.5),
-    '&:hover': {
-      backgroundColor: lighten(theme.palette.primary.light, 0.7),
-    },
-    borderRadius: 0,
-  },
-  latexButton: {
-    minWidth: 'auto',
-    borderRadius: 0,
-    backgroundColor: lighten(theme.palette.primary.light, 0.5),
-    '&:hover': {
-      backgroundColor: lighten(theme.palette.primary.light, 0.7),
-    },
-  },
-  deleteButton: {
-    '& > span': {
-      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
-    },
-  },
-  base: {},
-  operators: {
-    backgroundColor: lighten(theme.palette.secondary.light, 0.5),
-    '&:hover': {
-      backgroundColor: lighten(theme.palette.secondary.light, 0.7),
-    },
-  },
-  comparison: {
-    backgroundColor: lighten(green[500], 0.5),
-    '&:hover': {
-      backgroundColor: lighten(green[500], 0.7),
-    },
-  },
-  comma: {
-    fontSize: '200% !important',
-    lineHeight: '100%',
-  },
-  dot: {
-    fontSize: '200% !important',
-    lineHeight: '100%',
-  },
-  icon: {
-    height: '30px',
-  },
-});
-
-export default withStyles(styles)(KeyPad);
+export default KeyPad;