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

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,11 @@
+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

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

package/src/mq/input.jsx

@@ -0,0 +1,166 @@
+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

@@ -0,0 +1,45 @@
+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 };