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

package/dist/mq/mathquill-instance.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-lib/packages/math-input/src/mq/mathquill-instance.js
+ * @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.
+ */
+declare let MQ: any;
+/**
+ * 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 declare function registerEmbed(name: any, factory: any): void;
+/**
+ * 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 declare function applyStaticMath(element: any, latex: any, options: any): any;
+export { MQ };

package/dist/mq/mathquill-instance.js

@@ -0,0 +1,13 @@
+import { registerLineBreak as e } from "./custom-elements.js";
+import t from "@pie-framework/mathquill";
+//#region src/mq/mathquill-instance.ts
+var n;
+typeof window < "u" && (n = t.getInterface(3), n && n.registerEmbed && e(n));
+function r(e, t) {
+	!n || !n.registerEmbed || n.registerEmbed(e, t);
+}
+function i(e, t, r) {
+	if (!(!n || !e)) return t != null && (e.textContent = t), n.StaticMath(e, r);
+}
+//#endregion
+export { n as MQ, i as applyStaticMath, r as registerEmbed };

package/dist/mq/static.d.ts

@@ -1,6 +1,10 @@
 /**
  * @synced-from pie-lib/packages/math-input/src/mq/static.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 PropTypes from 'prop-types';
 import React from 'react';

package/dist/mq/static.js

@@ -1,22 +1,20 @@
 import { updateSpans as e } from "../updateSpans.js";
-import t from "@pie-framework/mathquill";
+import { MQ as t } from "./mathquill-instance.js";
 import n from "react";
 import r from "prop-types";
 import i from "debug";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/mq/static.tsx
-var o;
-typeof window < "u" && (o = t.getInterface(2));
-var s = i("pie-lib:math-input:mq:static"), c = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g, l = / /g;
-function u(e = "") {
-	return e.replace(l, "");
+var o = i("pie-lib:math-input:mq:static"), s = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g, c = / /g;
+function l(e = "") {
+	return e.replace(c, "");
 }
-function d(e) {
+function u(e) {
 	let t = 0;
 	for (let n = 0; n < (e || "").length; n++) e[n] === "{" && t++;
 	return t;
 }
-var f = class extends n.Component {
+var d = class extends n.Component {
 	static propTypes = {
 		latex: r.string.isRequired,
 		onFocus: r.func,
@@ -66,9 +64,18 @@ var f = class extends n.Component {
 		this.setState({ inputSource: "mathKeyboard" });
 	};
 	onInputEdit = (e) => {
-		if (!this.mathField) return;
+		if (!this.mathField || this._isProgrammaticUpdate) return;
 		let t = this.props.getFieldName(e, this.mathField.innerFields);
-		this.props.onSubFieldChange && this.props.onSubFieldChange(t, e.latex()), this.announceLatexConversion(e.latex());
+		if (this.props.onSubFieldChange) {
+			let n = e.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+			if (this.inputRef?.current && n && n?.length) try {
+				e.__controller.cursor.insLeftOf(e.__controller.cursor.parent[-1].parent), e.el().dispatchEvent(new KeyboardEvent("keydown", { keyCode: 8 }));
+			} catch (e) {
+				console.error(e.toString());
+			}
+			else this.props.onSubFieldChange(t, e.latex());
+		}
+		this.announceLatexConversion(e.latex());
 	};
 	announceLatexConversion = (e) => {
 		if (!this.state) {
@@ -76,13 +83,13 @@ var f = class extends n.Component {
 			return;
 		}
 		let { previousLatex: t, inputSource: n, isDeleteKeyPressed: r } = this.state, i = "Converted to math symbol";
-		if (n === "keyboard" && !r) if (d(e) > d(t)) this.announceMessage(i);
+		if (n === "keyboard" && !r) if (u(e) > u(t)) this.announceMessage(i);
 		else try {
 			this.mathField.parseLatex(t), this.mathField.parseLatex(e), e == t && this.announceMessage(i);
 		} catch (e) {
 			console.warn("Error parsing latex:", e.message), console.warn(e);
 		}
-		this.setState({
+		(this.state.previousLatex !== e || this.state.isDeleteKeyPressed) && this.setState({
 			previousLatex: e,
 			isDeleteKeyPressed: !1
 		});
@@ -93,24 +100,26 @@ var f = class extends n.Component {
 		}, 500));
 	};
 	update = () => {
-		if (!o) throw Error("MQ is not defined - but component has mounted?");
-		this.mathField ||= o.StaticMath(this.inputRef?.current, { handlers: { edit: this.onInputEdit.bind(this) } });
+		if (!t) throw Error("MQ is not defined - but component has mounted?");
+		this.mathField ||= t.StaticMath(this.inputRef?.current, { handlers: { edit: this.onInputEdit.bind(this) } });
 		try {
-			this.mathField.parseLatex(this.props.latex), this.mathField.latex(this.props.latex);
+			this._isProgrammaticUpdate = !0, this.mathField.parseLatex(this.props.latex), this.mathField.latex(this.props.latex);
 		} catch {
 			this.mathField.latex("\\MathQuillMathField[r1]{}");
+		} finally {
+			this._isProgrammaticUpdate = !1;
 		}
 	};
 	blur = () => {
-		s("blur mathfield"), this.mathField.blur();
+		o("blur mathfield"), this.mathField.blur();
 	};
 	focus = () => {
-		s("focus mathfield..."), this.mathField.focus();
+		o("focus mathfield..."), this.mathField.focus();
 	};
 	shouldComponentUpdate(e) {
 		try {
-			let t = u(this.mathField.parseLatex(e.latex)), n = (e.latex.match(c) || []).length, r = t !== u(this.mathField.latex().trim()) || n !== Object.keys(this.mathField.innerFields).length / 2;
-			return s("[shouldComponentUpdate] ", r), r;
+			let t = l(this.mathField.parseLatex(e.latex)), n = (e.latex.match(s) || []).length, r = t !== l(this.mathField.latex().trim()) || n !== Object.keys(this.mathField.innerFields).length / 2;
+			return o("[shouldComponentUpdate] ", r), r;
 		} catch (e) {
 			return console.warn("Error parsing latex:", e.message, "skip update"), console.warn(e), !1;
 		}
@@ -139,4 +148,4 @@ var f = class extends n.Component {
 	}
 };
 //#endregion
-export { f as default };
+export { d as default };

package/dist/updateSpans.d.ts

@@ -6,5 +6,5 @@
  * Manual edits will be overwritten on next sync.
  * To make changes, edit the upstream JavaScript file and run sync again.
  */
-declare const updateSpans: (root?: ParentNode) => void;
+declare const updateSpans: () => void;
 export { updateSpans };

package/dist/updateSpans.js

@@ -1,7 +1,6 @@
 //#region src/updateSpans.ts
-var e = (e) => {
-	let t = e ?? document;
-	(Array.from(t.querySelectorAll("span[mathquill-command-id]")) || []).forEach((e) => {
+var e = () => {
+	(Array.from(document.querySelectorAll("span[mathquill-command-id]")) || []).forEach((e) => {
 		e && e.innerText === "∥" && e.className !== "mq-editable-field" && (e.style.fontSize = "32px"), (e.innerText === "′" || e.innerText === "′′") && !e.hasAttribute("data-prime") && e.setAttribute("data-prime", "true");
 	});
 };

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@pie-lib/math-input",
-  "version": "8.1.1-next.2",
+  "version": "8.1.1-next.4",
   "description": "React implementation of @pie-lib/math-input synced from pie-lib",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/lib-react/math-input"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/style": "^0.8.0",
-    "@fontsource/stix-two-text": "^5.2.8",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-framework/mathquill": "^1.1.4",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-lib/render-ui": "6.1.1-next.37",
+    "@pie-framework/mathquill": "1.2.1-beta.1",
     "debug": "^4.1.1",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0"
+    "@pie-element/shared-lodash": "0.1.1-next.1",
+    "@pie-lib/render-ui": "6.1.1-next.39"
   },
   "type": "module",
   "main": "./dist/index.js",
@@ -40,5 +42,9 @@
     "@vitejs/plugin-react": "^6.0.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

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;
-}