@pie-lib/math-input 8.1.2-next.88 → 9.0.0-next.7

package/src/mq/__tests__/mathquill-instance.test.js

@@ -1,67 +0,0 @@
-const mockRegisterEmbed = jest.fn();
-const mockStaticMath = jest.fn().mockReturnValue({ mockInstance: true });
-
-jest.mock('@pie-framework/mathquill', () => ({
-  __esModule: true,
-  default: {
-    getInterface: jest.fn(() => ({
-      registerEmbed: mockRegisterEmbed,
-      StaticMath: mockStaticMath,
-    })),
-  },
-}));
-
-jest.mock('../custom-elements', () => ({
-  registerLineBreak: jest.fn(),
-}));
-
-describe('mathquill-instance', () => {
-  let registerEmbed;
-  let applyStaticMath;
-
-  beforeEach(() => {
-    jest.resetModules();
-    mockRegisterEmbed.mockClear();
-    mockStaticMath.mockClear();
-    ({ registerEmbed, applyStaticMath } = require('../mathquill-instance'));
-  });
-
-  describe('registerEmbed', () => {
-    it('delegates to MQ.registerEmbed when available', () => {
-      const factory = () => ({});
-      registerEmbed('answerBlock', factory);
-
-      expect(mockRegisterEmbed).toHaveBeenCalledTimes(1);
-      expect(mockRegisterEmbed).toHaveBeenCalledWith('answerBlock', factory);
-    });
-  });
-
-  describe('applyStaticMath', () => {
-    it('returns undefined when element is missing', () => {
-      expect(applyStaticMath(null, 'x')).toBeUndefined();
-      expect(mockStaticMath).not.toHaveBeenCalled();
-    });
-
-    it('sets textContent when latex is provided and calls StaticMath', () => {
-      const el = document.createElement('span');
-      const handlers = { edit: jest.fn() };
-
-      const result = applyStaticMath(el, '\\frac{1}{2}', { handlers });
-
-      expect(el.textContent).toBe('\\frac{1}{2}');
-      expect(mockStaticMath).toHaveBeenCalledTimes(1);
-      expect(mockStaticMath).toHaveBeenCalledWith(el, { handlers });
-      expect(result).toEqual({ mockInstance: true });
-    });
-
-    it('omits textContent when latex is undefined but still calls StaticMath', () => {
-      const el = document.createElement('span');
-      el.textContent = 'preset';
-
-      applyStaticMath(el, undefined);
-
-      expect(el.textContent).toBe('preset');
-      expect(mockStaticMath).toHaveBeenCalledWith(el, undefined);
-    });
-  });
-});

package/src/mq/__tests__/static.test.jsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import Static from '../static';
-
-const Mathquill = require('@pie-framework/mathquill');
-
-jest.mock('@pie-framework/mathquill', () => ({
-  StaticMath: jest.fn().mockReturnValue({
-    latex: jest.fn(),
-    parseLatex: jest.fn(),
-  }),
-  getInterface: jest.fn().mockReturnThis(),
-}));
-
-describe('static', () => {
-  describe('rendering', () => {
-    it('renders with latex prop', () => {
-      const { container } = render(<Static latex="foo" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with empty latex', () => {
-      const { container } = render(<Static latex="" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  // Note: Tests for internal methods like componentDidMount, shouldComponentUpdate
-  // are implementation details and cannot be directly tested with RTL.
-  // These components are wrappers around MathQuill library and the original tests
-  // focused on testing internal implementation rather than user-facing behavior.
-  // The actual MathQuill integration is tested through integration/e2e tests.
-});

package/src/mq/common-mq-styles.js

@@ -1,109 +0,0 @@
-export const commonMqFontStyles = {
-  fontFamily: 'MJXZERO, MJXTEX !important',
-  '-webkit-font-smoothing': 'antialiased !important',
-
-  '& .mq-math-mode > span > var': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode span var': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode .mq-nonSymbola': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode > span > var.mq-operator-name': {
-    fontFamily: 'MJXZERO, MJXTEX !important',
-  },
-};
-
-export const longdivStyles = {
-  '& .mq-longdiv-inner': {
-    marginTop: '-1px',
-    marginLeft: '5px !important;',
-
-    '& > .mq-empty': {
-      padding: '0 !important',
-      marginLeft: '0px !important',
-      marginTop: '2px',
-    },
-  },
-
-  '& .mq-math-mode .mq-longdiv': {
-    display: 'inline-flex !important',
-  },
-};
-
-export const supsubStyles = {
-  '& .mq-math-mode sup.mq-nthroot': {
-    fontSize: '70% !important',
-    verticalAlign: '0.5em !important',
-    paddingRight: '0.15em',
-  },
-  '& .mq-math-mode .mq-supsub': {
-    fontSize: '70.7% !important',
-  },
-  '& .mq-supsub ': {
-    fontSize: '70.7%',
-  },
-  '& .mq-math-mode .mq-supsub.mq-sup-only': {
-    verticalAlign: '-0.1em !important',
-
-    '& .mq-sup': {
-      marginBottom: '0px !important',
-    },
-  },
-  /* But when the base is a fraction, move it higher */
-  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
-    verticalAlign: '0.4em !important',
-  },
-
-  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
-    verticalAlign: '0.4em !important',
-  },
-};
-
-export const commonMqKeyboardStyles = {
-  '& *': {
-    ...commonMqFontStyles,
-    ...longdivStyles,
-    '& .mq-math-mode .mq-sqrt-prefix': {
-      top: '0 !important',
-    },
-
-    '& .mq-math-mode .mq-empty': {
-      padding: '9px 1px !important',
-    },
-
-    '& .mq-math-mode .mq-longdiv-inner .mq-empty': {
-      padding: '0 !important',
-    },
-
-    '& .mq-math-mode .mq-supsub': {
-      fontSize: '70.7% !important',
-    },
-
-    '& .mq-math-mode .mq-sqrt-stem': {
-      marginTop: '-5px',
-      paddingTop: '4px',
-    },
-
-    '& .mq-math-mode .mq-paren': {
-      verticalAlign: 'middle !important',
-    },
-
-    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
-      padding: '0 !important',
-    },
-
-    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
-      padding: '0 !important',
-    },
-  },
-};
-
-export default {
-  commonMqFontStyles,
-  longdivStyles,
-  supsubStyles,
-  commonMqKeyboardStyles,
-};

package/src/mq/custom-elements.js

@@ -1,11 +0,0 @@
-const registerLineBreak = function(MQ) {
-  MQ.registerEmbed('newLine', () => {
-    return {
-      htmlString: '<div class="newLine"></div>',
-      text: () => 'testText',
-      latex: () => '\\embed{newLine}[]',
-    };
-  });
-};
-
-export { registerLineBreak };

package/src/mq/index.js

@@ -1,5 +0,0 @@
-import Input from './input';
-import Static from './static';
-import CommonMqStyles from './common-mq-styles';
-
-export { Input, Static, CommonMqStyles };

package/src/mq/input.jsx

@@ -1,166 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-import { MQ } from './mathquill-instance';
-
-const log = debug('math-input:mq:input');
-
-const StyledSpan = styled('span')({
-  // No specific styles needed, but component is available for future styling
-});
-
-/**
- * Wrapper for MathQuill MQ.MathField.
- */
-export class Input extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    latex: PropTypes.string,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-  };
-
-  componentDidMount() {
-    if (!MQ) {
-      throw new Error('MQ is not defined - but component has mounted?');
-    }
-
-    this.mathField = MQ.MathField(this.input, {
-      handlers: {
-        edit: this.onInputEdit.bind(this),
-      },
-    });
-
-    this.updateLatex();
-  }
-
-  componentDidUpdate() {
-    this.updateLatex();
-  }
-
-  updateLatex() {
-    if (!this.mathField) {
-      return;
-    }
-
-    const { latex } = this.props;
-
-    if (latex !== undefined && latex !== null) {
-      this.mathField.latex(latex);
-    }
-  }
-
-  clear() {
-    this.mathField.latex('');
-
-    return '';
-  }
-
-  blur() {
-    log('blur mathfield');
-    this.mathField.blur();
-  }
-
-  focus() {
-    log('focus mathfield...');
-    this.mathField.focus();
-  }
-
-  command(v) {
-    log('command: ', v);
-    if (Array.isArray(v)) {
-      v.forEach((vv) => {
-        this.mathField.cmd(vv);
-      });
-    } else {
-      this.mathField.cmd(v);
-    }
-
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  keystroke(v) {
-    this.mathField.keystroke(v);
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  write(v) {
-    log('write: ', v);
-    this.mathField.write(v);
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  onInputEdit = () => {
-    log('[onInputEdit] ...');
-    const { onChange } = this.props;
-
-    if (!this.mathField) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(this.mathField.latex());
-    }
-  };
-
-  refresh = () => {
-    this.blur();
-    this.focus();
-  };
-
-  onKeyPress = (event) => {
-    const keys = Object.keys(this.mathField.__controller.options);
-
-    if (keys.indexOf('ignoreNextMousedown') < 0) {
-      // It seems like the controller has the above handler as an option
-      // when all the right events are set and everything works fine
-      // this seems to work in all cases
-      this.refresh();
-    }
-
-    if (event.charCode === 13) {
-      event.preventDefault();
-      return;
-    }
-  };
-
-  onClick = (event) => {
-    const { onClick } = this.props;
-
-    this.refresh();
-    onClick && onClick(event);
-  };
-
-  shouldComponentUpdate(nextProps) {
-    log('next: ', nextProps.latex);
-    log('current: ', this.mathField.latex());
-
-    return nextProps.latex !== this.mathField.latex();
-  }
-
-  render() {
-    const { onFocus, onBlur, className } = this.props;
-
-    return (
-      <StyledSpan
-        className={className}
-        onKeyDown={this.onKeyPress}
-        onClick={this.onClick}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        ref={(r) => (this.input = r)}
-      />
-    );
-  }
-}
-
-export default Input;

package/src/mq/static.jsx

@@ -1,290 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import debug from 'debug';
-import { updateSpans } from '../updateSpans';
-import { MQ } from './mathquill-instance';
-
-const log = debug('pie-lib:math-input:mq:static');
-const REGEX = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g;
-const WHITESPACE_REGEX = / /g;
-
-function stripSpaces(string = '') {
-  return string.replace(WHITESPACE_REGEX, '');
-}
-
-function countBraces(latex) {
-  let count = 0;
-
-  for (let i = 0; i < (latex || '').length; i++) {
-    if (latex[i] === '{') {
-      count++;
-    }
-  }
-
-  return count;
-}
-
-/**
- * Wrapper for MathQuill MQ.MathField.
- */
-export default class Static extends React.Component {
-  static propTypes = {
-    latex: PropTypes.string.isRequired,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    className: PropTypes.string,
-    getFieldName: PropTypes.func,
-    onSubFieldChange: PropTypes.func,
-    onSubFieldFocus: PropTypes.func,
-    setInput: PropTypes.func,
-  };
-
-  static defaultProps = {
-    getFieldName: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      announcement: '',
-      previousLatex: '',
-      inputSource: null,
-      isDeleteKeyPressed: false,
-    };
-
-    this.inputRef = React.createRef();
-  }
-
-  componentDidMount() {
-    this.update();
-    updateSpans();
-
-    this.createLiveRegion();
-    this.addEventListeners();
-  }
-
-  componentDidUpdate() {
-    this.update();
-    updateSpans();
-  }
-
-  componentWillUnmount() {
-    this.removeLiveRegion();
-    this.removeEventListeners();
-  }
-
-  createLiveRegion = () => {
-    this.liveRegion = document.createElement('div');
-    this.liveRegion.style.position = 'absolute';
-    this.liveRegion.style.width = '1px';
-    this.liveRegion.style.height = '1px';
-    this.liveRegion.style.marginTop = '-1px';
-    this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
-    this.liveRegion.style.overflow = 'hidden';
-    this.liveRegion.setAttribute('aria-live', 'polite');
-    this.liveRegion.setAttribute('aria-atomic', 'true');
-
-    document.body.appendChild(this.liveRegion);
-  };
-
-  addEventListeners = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.addEventListener('keydown', this.handleKeyDown);
-      input.addEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeEventListeners = () => {
-    const input = this.inputRef.current;
-
-    if (input) {
-      input.removeEventListener('keydown', this.handleKeyDown);
-      input.removeEventListener('click', this.handleMathKeyboardClick);
-    }
-  };
-
-  removeLiveRegion = () => {
-    if (this.liveRegion) {
-      document.body.removeChild(this.liveRegion);
-      this.liveRegion = null;
-    }
-  };
-
-  handleKeyDown = (event) => {
-    if (event?.key === 'Backspace' || event?.key === 'Delete') {
-      this.setState({ isDeleteKeyPressed: true });
-    }
-    this.setState({ inputSource: 'keyboard' });
-  };
-
-  handleMathKeyboardClick = () => {
-    this.setState({ inputSource: 'mathKeyboard' });
-  };
-
-  onInputEdit = (field) => {
-    if (!this.mathField || this._isProgrammaticUpdate) {
-      return;
-    }
-    const name = this.props.getFieldName(field, this.mathField.innerFields);
-
-    if (this.props.onSubFieldChange) {
-      // eslint-disable-next-line no-useless-escape
-      const regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-
-      if (this.inputRef?.current && regexMatch && regexMatch?.length) {
-        try {
-          field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
-          field.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(e.toString());
-        }
-      } else {
-        this.props.onSubFieldChange(name, field.latex());
-      }
-    }
-
-    this.announceLatexConversion(field.latex());
-  };
-
-  announceLatexConversion = (newLatex) => {
-    if (!this.state) {
-      // eslint-disable-next-line no-console
-      console.error('State is not initialized');
-      return;
-    }
-
-    const { previousLatex, inputSource, isDeleteKeyPressed } = this.state;
-    const announcement = 'Converted to math symbol';
-
-    if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
-      const newBraces = countBraces(newLatex);
-      const oldBraces = countBraces(previousLatex);
-
-      if (newBraces > oldBraces) {
-        this.announceMessage(announcement);
-      } else {
-        try {
-          this.mathField.parseLatex(previousLatex);
-          this.mathField.parseLatex(newLatex);
-
-          if (newLatex == previousLatex) {
-            this.announceMessage(announcement);
-          }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn('Error parsing latex:', e.message);
-          // eslint-disable-next-line no-console
-          console.warn(e);
-        }
-      }
-    }
-
-    // Only setState when values change to avoid "Maximum update depth exceeded"
-    if (this.state.previousLatex !== newLatex || this.state.isDeleteKeyPressed) {
-      this.setState({ previousLatex: newLatex, isDeleteKeyPressed: false });
-    }
-  };
-
-  announceMessage = (message) => {
-    this.setState({ previousLatex: '' });
-
-    if (this.liveRegion) {
-      this.liveRegion.textContent = message;
-
-      // Clear the message after it is announced
-      setTimeout(() => {
-        this.liveRegion.textContent = '';
-      }, 500);
-    }
-  };
-
-  update = () => {
-    if (!MQ) {
-      throw new Error('MQ is not defined - but component has mounted?');
-    }
-    if (!this.mathField) {
-      this.mathField = MQ.StaticMath(this.inputRef?.current, {
-        handlers: {
-          edit: this.onInputEdit.bind(this),
-        },
-      });
-    }
-
-    try {
-      this._isProgrammaticUpdate = true;
-      this.mathField.parseLatex(this.props.latex);
-      this.mathField.latex(this.props.latex);
-    } catch (e) {
-      // default latex if received has errors
-      this.mathField.latex('\\MathQuillMathField[r1]{}');
-    } finally {
-      this._isProgrammaticUpdate = false;
-    }
-  };
-
-
-  blur = () => {
-    log('blur mathfield');
-    this.mathField.blur();
-  };
-
-  focus = () => {
-    log('focus mathfield...');
-    this.mathField.focus();
-  };
-
-  shouldComponentUpdate(nextProps) {
-    try {
-      const parsedLatex = this.mathField.parseLatex(nextProps.latex);
-      const stripped = stripSpaces(parsedLatex);
-      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;
-
-      const out =
-        stripped !== stripSpaces(this.mathField.latex().trim()) ||
-        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;
-
-      log('[shouldComponentUpdate] ', out);
-      return out;
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn('Error parsing latex:', e.message, 'skip update');
-      // eslint-disable-next-line no-console
-      console.warn(e);
-      return false;
-    }
-  }
-
-  onFocus = (e) => {
-    try {
-      let rootBlock = e.target.parentElement.nextSibling;
-      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
-
-      if (!id) {
-        rootBlock = rootBlock.parentElement;
-        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
-      }
-
-      const innerField = this.mathField.innerFields.find((f) => f.id === id);
-
-      if (innerField) {
-        const name = this.props.getFieldName(innerField, this.mathField.innerFields);
-        if (this.props.setInput) {
-          this.props.setInput(innerField);
-        }
-        this.props.onSubFieldFocus(name, innerField);
-      }
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('error finding root block', err.message);
-    }
-  };
-
-  render() {
-    const { onBlur, className } = this.props;
-
-    return <span className={className} onFocus={this.onFocus} onBlur={onBlur} ref={this.inputRef} />;
-  }
-}

package/src/updateSpans.js

@@ -1,15 +0,0 @@
-// increase the font of parallel notation
-const updateSpans = () => {
-  const spans = Array.from(document.querySelectorAll('span[mathquill-command-id]'));
-  (spans || []).forEach((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');
-    }
-  });
-};
-
-export { updateSpans };