@pie-lib/math-input 8.1.1-next.3 → 8.1.1

package/src/mq/static.jsx

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

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

package/dist/_virtual/_rolldown/runtime.js

@@ -1,11 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (t, n) => {
-	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
-		enumerable: !0
-	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-};
-//#endregion
-export { t as __exportAll };

package/dist/horizontal-keypad.d.ts

@@ -1,31 +0,0 @@
-/**
- * @synced-from pie-lib/packages/math-input/src/horizontal-keypad.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export default class HorizontalKeypad extends React.Component {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        controlledKeypadMode: PropTypes.Requireable<boolean>;
-        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        layoutForKeyPad: PropTypes.Requireable<object>;
-        onClick: PropTypes.Validator<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        noDecimal: PropTypes.Requireable<boolean>;
-        additionalKeys: PropTypes.Requireable<any[]>;
-        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
-        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        mode: string;
-        noDecimal: boolean;
-        additionalKeys: never[];
-    };
-    keypadPress: any;
-    render(): React.JSX.Element;
-}

package/dist/horizontal-keypad.js

@@ -1,57 +0,0 @@
-import { extendKeySet as e } from "./keys/utils.js";
-import { keysForGrade as t, normalizeAdditionalKeys as n } from "./keys/grades.js";
-import r from "./keypad/accessible-keypad.js";
-import i from "react";
-import a from "prop-types";
-import { jsx as o } from "react/jsx-runtime";
-//#region src/horizontal-keypad.tsx
-var s = (e) => {
-	if (e.command) return {
-		value: e.command,
-		type: "command"
-	};
-	if (e.write) return { value: e.write };
-	if (e.keystroke) return {
-		type: "cursor",
-		value: e.keystroke
-	};
-}, c = class extends i.Component {
-	static propTypes = {
-		className: a.string,
-		controlledKeypadMode: a.bool,
-		mode: a.oneOfType([a.string, a.number]),
-		layoutForKeyPad: a.object,
-		onClick: a.func.isRequired,
-		onFocus: a.func,
-		noDecimal: a.bool,
-		additionalKeys: a.array,
-		setKeypadInteraction: a.func,
-		onRequestClose: a.func
-	};
-	static defaultProps = {
-		mode: "scientific",
-		noDecimal: !1,
-		additionalKeys: []
-	};
-	keypadPress = (e) => {
-		let { onClick: t } = this.props;
-		t(s(e));
-	};
-	render() {
-		let { mode: i, onFocus: a, controlledKeypadMode: s, noDecimal: c, className: l, additionalKeys: u, layoutForKeyPad: d, setKeypadInteraction: f, onRequestClose: p } = this.props, m = n(u);
-		return /* @__PURE__ */ o(r, {
-			className: l,
-			controlledKeypadMode: s,
-			onFocus: a,
-			noDecimal: c,
-			layoutForKeyPad: d,
-			additionalKeys: e(t(i), m),
-			onPress: this.keypadPress,
-			mode: i,
-			setKeypadInteraction: f,
-			onRequestClose: p
-		});
-	}
-};
-//#endregion
-export { c as default };

package/dist/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * @synced-from pie-lib/packages/math-input/src/index.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import { keysForGrade } from './keys/grades';
-import { updateSpans } from './updateSpans';
-import * as keys from './keys';
-import HorizontalKeypad from './horizontal-keypad';
-import * as mq from './mq';
-declare const addBrackets: (s: any) => any;
-declare const removeBrackets: (s: any) => any;
-declare const registerEmbed: (name: any, factory: any) => void;
-declare const applyStaticMath: (element: any, latex?: string) => any;
-export { keysForGrade, addBrackets, removeBrackets, keys, HorizontalKeypad, mq, updateSpans, registerEmbed, applyStaticMath, };

package/dist/index.js

@@ -1,19 +0,0 @@
-import { keysForGrade as e } from "./keys/grades.js";
-import { updateSpans as t } from "./updateSpans.js";
-import { keys_exports as n } from "./keys/index.js";
-import r from "./horizontal-keypad.js";
-import { mq_exports as i } from "./mq/index.js";
-import a from "@pie-framework/mathquill";
-//#region src/index.tsx
-var o = (e) => e.indexOf("\\(") === 0 ? e : `\\(${e}`, s = (e) => e.indexOf("\\)") === e.length - 2 ? e : `${e}\\)`, c = (e) => e.indexOf("\\(") === 0 ? e.substring(2) : e, l = (e) => e.indexOf("\\)") === e.length - 2 ? e.substring(0, e.length - 2) : e, u = (e) => s(o(e)), d = (e) => l(c(e)), f = () => typeof window > "u" ? null : a.getInterface(2), p = (e, t) => {
-	let n = f();
-	n?.registerEmbed && n.registerEmbed(e, t);
-}, m = (e, n = "") => {
-	let r = f();
-	if (!r?.StaticMath || !e) return null;
-	e.textContent = "";
-	let i = r.StaticMath(e);
-	return typeof i?.latex == "function" && i.latex(n), t(e), i;
-};
-//#endregion
-export { r as HorizontalKeypad, u as addBrackets, m as applyStaticMath, n as keys, e as keysForGrade, i as mq, p as registerEmbed, d as removeBrackets, t as updateSpans };

package/dist/keypad/accessible-keypad.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-export default class AccessibleKeypad extends React.Component {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        controlledKeypadMode: PropTypes.Requireable<boolean>;
-        baseSet: PropTypes.Requireable<any[]>;
-        additionalKeys: PropTypes.Requireable<any[]>;
-        layoutForKeyPad: PropTypes.Requireable<object>;
-        onPress: PropTypes.Validator<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        noDecimal: PropTypes.Requireable<boolean>;
-        setKeypadInteraction: PropTypes.Requireable<(...args: any[]) => any>;
-        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        baseSet: any[][];
-        noDecimal: boolean;
-    };
-    constructor(props: any);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleKeypadInteraction: () => void;
-    keyIsNotAllowed: (key: any) => any;
-    flowKeys: (base: any, extras: any) => unknown[];
-    toRenderModel: () => {
-        id: string;
-        ariaLabel: string;
-        key: any;
-    }[];
-    pressKey: (definition: any) => void;
-    moveFocus: (nextIndex: any) => void;
-    onButtonKeyDown: (event: any, index: any) => void;
-    renderKey: (definition: any, index: any) => React.JSX.Element;
-    render(): React.JSX.Element;
-}