@pie-lib/math-input 8.1.0 → 8.1.1-next.2

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/mathquill-instance.js

@@ -1,45 +0,0 @@
-import MathQuill from '@pie-framework/mathquill';
-import { registerLineBreak } from './custom-elements';
-
-let MQ;
-if (typeof window !== 'undefined') {
-  MQ = MathQuill.getInterface(3);
-  if (MQ && MQ.registerEmbed) {
-    registerLineBreak(MQ);
-  }
-}
-
-/**
- * Register a MathQuill embed (e.g. answer blocks in pie-elements).
- * No-op in SSR or if the interface is unavailable.
- *
- * @param {string} name
- * @param {Function} factory
- */
-export function registerEmbed(name, factory) {
-  if (!MQ || !MQ.registerEmbed) {
-    return;
-  }
-  MQ.registerEmbed(name, factory);
-}
-
-/**
- * Apply MathQuill static math to a DOM element.
- * Optionally sets element text to `latex` before enhancing (typical pie-elements usage).
- *
- * @param {HTMLElement} element
- * @param {string} [latex] If provided, assigned to element.textContent before StaticMath runs.
- * @param {object} [options] Optional MathQuill StaticMath options (e.g. handlers).
- * @returns {object|undefined} MathQuill static math instance, if any.
- */
-export function applyStaticMath(element, latex, options) {
-  if (!MQ || !element) {
-    return undefined;
-  }
-  if (latex !== undefined && latex !== null) {
-    element.textContent = latex;
-  }
-  return MQ.StaticMath(element, options);
-}
-
-export { MQ };