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

package/dist/mq/input.js

@@ -0,0 +1,83 @@
+import { registerLineBreak as e } from "./custom-elements.js";
+import t from "@pie-framework/mathquill";
+import n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import a from "debug";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/mq/input.tsx
+var s;
+typeof window < "u" && (s = t.getInterface(2), s && s.registerEmbed && e(s));
+var c = a("math-input:mq:input"), l = i("span")({}), u = class extends n.Component {
+	static propTypes = {
+		className: r.string,
+		onClick: r.func,
+		onChange: r.func,
+		latex: r.string,
+		onFocus: r.func,
+		onBlur: r.func
+	};
+	componentDidMount() {
+		if (!s) throw Error("MQ is not defined - but component has mounted?");
+		this.mathField = s.MathField(this.input, { handlers: { edit: this.onInputEdit.bind(this) } }), this.updateLatex();
+	}
+	componentDidUpdate() {
+		this.updateLatex();
+	}
+	updateLatex() {
+		if (!this.mathField) return;
+		let { latex: e } = this.props;
+		e != null && this.mathField.latex(e);
+	}
+	clear() {
+		return this.mathField.latex(""), "";
+	}
+	blur() {
+		c("blur mathfield"), this.mathField.blur();
+	}
+	focus() {
+		c("focus mathfield..."), this.mathField.focus();
+	}
+	command(e) {
+		return c("command: ", e), Array.isArray(e) ? e.forEach((e) => {
+			this.mathField.cmd(e);
+		}) : this.mathField.cmd(e), this.mathField.focus(), this.mathField.latex();
+	}
+	keystroke(e) {
+		return this.mathField.keystroke(e), this.mathField.focus(), this.mathField.latex();
+	}
+	write(e) {
+		return c("write: ", e), this.mathField.write(e), this.mathField.focus(), this.mathField.latex();
+	}
+	onInputEdit = () => {
+		c("[onInputEdit] ...");
+		let { onChange: e } = this.props;
+		this.mathField && e && e(this.mathField.latex());
+	};
+	refresh = () => {
+		this.blur(), this.focus();
+	};
+	onKeyPress = (e) => {
+		e.charCode === 13 && e.preventDefault();
+	};
+	onClick = (e) => {
+		let { onClick: t } = this.props;
+		this.refresh(), t && t(e);
+	};
+	shouldComponentUpdate(e) {
+		return c("next: ", e.latex), c("current: ", this.mathField.latex()), e.latex !== this.mathField.latex();
+	}
+	render() {
+		let { onFocus: e, onBlur: t, className: n } = this.props;
+		return /* @__PURE__ */ o(l, {
+			className: n,
+			onKeyDown: this.onKeyPress,
+			onClick: this.onClick,
+			onFocus: e,
+			onBlur: t,
+			ref: (e) => this.input = e
+		});
+	}
+};
+//#endregion
+export { u as default };

package/dist/mq/static.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-lib/packages/math-input/src/mq/static.jsx
+ * @auto-generated
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+/**
+ * Wrapper for MathQuill MQ.MathField.
+ */
+export default class Static extends React.Component {
+    static propTypes: {
+        latex: PropTypes.Validator<string>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        getFieldName: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubFieldChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubFieldFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        setInput: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        getFieldName: () => void;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    createLiveRegion: any;
+    addEventListeners: any;
+    removeEventListeners: any;
+    removeLiveRegion: any;
+    handleKeyDown: any;
+    handleMathKeyboardClick: any;
+    onInputEdit: any;
+    announceLatexConversion: any;
+    announceMessage: any;
+    update: any;
+    blur: any;
+    focus: any;
+    shouldComponentUpdate(nextProps: any): boolean;
+    onFocus: any;
+    render(): React.JSX.Element;
+}

package/dist/mq/static.js

@@ -0,0 +1,142 @@
+import { updateSpans as e } from "../updateSpans.js";
+import t from "@pie-framework/mathquill";
+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, "");
+}
+function d(e) {
+	let t = 0;
+	for (let n = 0; n < (e || "").length; n++) e[n] === "{" && t++;
+	return t;
+}
+var f = class extends n.Component {
+	static propTypes = {
+		latex: r.string.isRequired,
+		onFocus: r.func,
+		onBlur: r.func,
+		className: r.string,
+		getFieldName: r.func,
+		onSubFieldChange: r.func,
+		onSubFieldFocus: r.func,
+		setInput: r.func
+	};
+	static defaultProps = { getFieldName: () => {} };
+	constructor(e) {
+		super(e), this.state = {
+			announcement: "",
+			previousLatex: "",
+			inputSource: null,
+			isDeleteKeyPressed: !1
+		}, this.inputRef = n.createRef();
+	}
+	componentDidMount() {
+		this.update(), e(), this.createLiveRegion(), this.addEventListeners();
+	}
+	componentDidUpdate() {
+		this.update(), e();
+	}
+	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 = () => {
+		let e = this.inputRef.current;
+		e && (e.addEventListener("keydown", this.handleKeyDown), e.addEventListener("click", this.handleMathKeyboardClick));
+	};
+	removeEventListeners = () => {
+		let e = this.inputRef.current;
+		e && (e.removeEventListener("keydown", this.handleKeyDown), e.removeEventListener("click", this.handleMathKeyboardClick));
+	};
+	removeLiveRegion = () => {
+		this.liveRegion &&= (document.body.removeChild(this.liveRegion), null);
+	};
+	handleKeyDown = (e) => {
+		(e?.key === "Backspace" || e?.key === "Delete") && this.setState({ isDeleteKeyPressed: !0 }), this.setState({ inputSource: "keyboard" });
+	};
+	handleMathKeyboardClick = () => {
+		this.setState({ inputSource: "mathKeyboard" });
+	};
+	onInputEdit = (e) => {
+		if (!this.mathField) return;
+		let t = this.props.getFieldName(e, this.mathField.innerFields);
+		this.props.onSubFieldChange && this.props.onSubFieldChange(t, e.latex()), this.announceLatexConversion(e.latex());
+	};
+	announceLatexConversion = (e) => {
+		if (!this.state) {
+			console.error("State is not initialized");
+			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);
+		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({
+			previousLatex: e,
+			isDeleteKeyPressed: !1
+		});
+	};
+	announceMessage = (e) => {
+		this.setState({ previousLatex: "" }), this.liveRegion && (this.liveRegion.textContent = e, setTimeout(() => {
+			this.liveRegion.textContent = "";
+		}, 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) } });
+		try {
+			this.mathField.parseLatex(this.props.latex), this.mathField.latex(this.props.latex);
+		} catch {
+			this.mathField.latex("\\MathQuillMathField[r1]{}");
+		}
+	};
+	blur = () => {
+		s("blur mathfield"), this.mathField.blur();
+	};
+	focus = () => {
+		s("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;
+		} catch (e) {
+			return console.warn("Error parsing latex:", e.message, "skip update"), console.warn(e), !1;
+		}
+	}
+	onFocus = (e) => {
+		try {
+			let t = e.target.parentElement.nextSibling, n = parseInt(t.getAttribute("mathquill-block-id"), 10);
+			n ||= (t = t.parentElement, parseInt(t.getAttribute("mathquill-block-id"), 10));
+			let r = this.mathField.innerFields.find((e) => e.id === n);
+			if (r) {
+				let e = this.props.getFieldName(r, this.mathField.innerFields);
+				this.props.setInput && this.props.setInput(r), this.props.onSubFieldFocus(e, r);
+			}
+		} catch (e) {
+			console.error("error finding root block", e.message);
+		}
+	};
+	render() {
+		let { onBlur: e, className: t } = this.props;
+		return /* @__PURE__ */ a("span", {
+			className: t,
+			onFocus: this.onFocus,
+			onBlur: e,
+			ref: this.inputRef
+		});
+	}
+};
+//#endregion
+export { f as default };

package/dist/updateSpans.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/math-input/src/updateSpans.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 const updateSpans: (root?: ParentNode) => void;
+export { updateSpans };

package/dist/updateSpans.js

@@ -0,0 +1,9 @@
+//#region src/updateSpans.ts
+var e = (e) => {
+	let t = e ?? document;
+	(Array.from(t.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");
+	});
+};
+//#endregion
+export { e as updateSpans };

package/package.json

@@ -1,29 +1,44 @@
 {
   "name": "@pie-lib/math-input",
-  "publishConfig": {
-    "access": "public"
-  },
-  "version": "8.1.1-next.1+83827e0fa",
-  "main": "lib/index.js",
-  "module": "src/index.jsx",
-  "repository": "pie-framework/pie-lib",
+  "version": "8.1.1-next.2",
+  "description": "React implementation of @pie-lib/math-input synced from pie-lib",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
+    "@fontsource/stix-two-text": "^5.2.8",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-framework/mathquill": "1.2.1-beta.1",
+    "@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",
     "debug": "^4.1.1",
-    "lodash-es": "^4.17.23",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
+    "@pie-element/shared-lodash": "0.1.1-next.0",
+    "prop-types": "^15.7.2",
     "react": "^18.2.0"
   },
-  "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
-  "scripts": {},
-  "gitHead": "83827e0fae08d56a7954b8c2ff7d28adacb4cab9"
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  },
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  }
 }

package/CHANGELOG.json

@@ -1,17 +0,0 @@
-[
-  {
-    "type": "feat",
-    "scope": "mask-markup",
-    "subject": "merging with the develop branch",
-    "merge": null,
-    "header": "feat(mask-markup): merging with the develop branch",
-    "body": null,
-    "footer": null,
-    "notes": [],
-    "hash": "0153c1aba8a08ba6c974fcc69476a87b9086f6c5",
-    "gitTags": "",
-    "committerDate": "2019-05-02 07:12:59 +0300",
-    "isTagged": true,
-    "tag": "@pie-lib/math-input@6.10.0"
-  }
-]