@pie-element/math-inline 12.1.1-next.147 → 12.1.1-next.16

package/dist/author/general-config-block.js

@@ -0,0 +1,390 @@
+import e from "./response.js";
+import { ResponseTypes as t, generateValidationMessage as n, getPluginProps as r } from "./utils.js";
+import * as i from "react";
+import { isEqual as a } from "@pie-element/shared-lodash";
+import o from "prop-types";
+import { applyStaticMath as s, registerEmbed as c } from "@pie-lib/math-input";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { styled as d } from "@mui/material/styles";
+import f from "@mui/material/Tooltip";
+import { MathToolbar as p } from "@pie-lib/math-toolbar";
+import { InputContainer as m } from "@pie-lib/config-ui";
+import h from "@pie-lib/editable-html-tip-tap";
+import g from "@mui/material/InputLabel";
+import _ from "@mui/material/Select";
+import v from "@mui/material/MenuItem";
+import y from "@mui/icons-material/Info";
+//#region src/author/general-config-block.tsx
+var b = !1, x = d("div")({
+	display: "flex",
+	flexDirection: "column"
+}), S = d(g)({ fontSize: "0.85rem" }), C = d("div")({ fontSize: "1.1rem" }), w = d("div")({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+}), T = d(m)(({ theme: e }) => ({
+	flex: "initial",
+	width: "40%",
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	"& > *:not(label)": { marginTop: e.spacing(1) }
+})), ee = d("div")({
+	display: "flex",
+	flexDirection: "column",
+	".block-container": {
+		margin: "8px",
+		display: "inline-flex",
+		border: "2px solid grey",
+		".mq-cursor": { visibility: "hidden" }
+	},
+	".block-container-generic": { margin: "4px" },
+	".block-response": {
+		flex: 2,
+		color: "grey",
+		background: "#f5f5f5",
+		fontSize: "0.8rem",
+		padding: "4px",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRight: "2px solid grey"
+	},
+	".block-response-generic": { borderRight: 0 },
+	".response-editor ": {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		maxWidth: "900px",
+		height: "auto",
+		minHeight: "130px",
+		textAlign: "left",
+		padding: "8px"
+	},
+	".math-toolbar": { maxWidth: "900px" }
+}), E = d(f)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre-wrap"
+} })), D = d("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), O = d(m)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), k = d("div")(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), A = /{{response}}/gm, j = /\\%response\\%/gm, M = /\\embed\{answerBlock\}\[r\d*\]/g, N = /\\embed\{newLine\}\[\]/g, P = /\\newline/g;
+function F(e) {
+	if (e) {
+		let t = 1;
+		return e.replace(A, () => `\\embed{answerBlock}[r${t++}]`).replace(P, "\\embed{newLine}[]");
+	}
+}
+function I(e) {
+	if (e) return e.replace(M, () => "{{response}}").replace(j, () => "{{response}}").replace(N, () => "\\newline");
+}
+var L = class extends i.Component {
+	static propTypes = {
+		model: o.object.isRequired,
+		imageSupport: o.object,
+		uploadSoundSupport: o.object,
+		configuration: o.object,
+		onChange: o.func.isRequired,
+		promptEnabled: o.bool,
+		rationaleEnabled: o.bool,
+		toolbarOpts: o.object
+	};
+	constructor(e) {
+		super(e);
+		let t = {};
+		if (e.model && e.model.expression) {
+			let n = 1;
+			e.model.expression.replace(A, () => {
+				t[`r${n++}`] = { value: "" };
+			});
+		}
+		this.state = {
+			showKeypad: !1,
+			responseAreas: t,
+			responseIdCounter: Object.keys(t).length
+		};
+	}
+	onChange = (e) => (t) => {
+		let { model: n, onChange: r } = this.props, i = { ...n };
+		typeof t == "object" ? i[e] = t.target.value : i[e] = t, e === "expression" && (i[e] = I(t)), r(i);
+	};
+	onDone = () => {
+		this.setState({ showKeypad: !1 });
+	};
+	onFocus = () => {
+		this.setState({ showKeypad: !0 });
+	};
+	onPromptFocus = () => {
+		this.setState({ showKeypad: !1 });
+	};
+	UNSAFE_componentWillMount() {
+		typeof window < "u" && (b ||= (c("answerBlock", (e) => ({
+			htmlString: `
+            <div class="block-container block-container-generic">
+              <div class="block-response block-response-generic" id="${e}Index">Response</div>
+            </div>`,
+			text: () => "text",
+			latex: () => `\\embed{answerBlock}[${e}]`
+		})), !0));
+	}
+	componentDidMount() {
+		this.handleAnswerBlockDomUpdate();
+	}
+	componentDidUpdate() {
+		this.handleAnswerBlockDomUpdate();
+	}
+	handleAnswerBlockDomUpdate = () => {
+		let { model: e } = this.props, t = {};
+		if (e && e.expression) {
+			let n = 1;
+			e.expression.replace(A, () => {
+				t[`r${n++}`] = { value: "" };
+			});
+		}
+		a(t, this.state.responseAreas) || this.setState({ responseAreas: t }, () => {
+			this.root && Object.keys(t).length && Object.keys(t).forEach((e, t) => {
+				let n = this.root.querySelector(`#${e}`), r = this.root.querySelector(`#${e}Index`);
+				n && (s(n), r.textContent = `R${t + 1}`);
+			});
+		});
+	};
+	onAddResponse = () => {
+		let { model: e, onChange: t } = this.props, { responseIdCounter: n } = this.state, r = { ...e }, i = n;
+		for (; e.responses.find((e) => e.id === i);) i++;
+		let a = {
+			id: i,
+			validation: "literal",
+			answer: "",
+			alternates: {}
+		};
+		r.responses = r.responses.concat(a), t(r), this.setState({ responseIdCounter: a.id });
+	};
+	onResponseChange = (e, t) => {
+		let { model: n, onChange: r } = this.props, i = { ...n };
+		i.responses[t] = e, r(i);
+	};
+	render() {
+		let { model: i, imageSupport: a, uploadSoundSupport: o, configuration: s, promptEnabled: c, rationaleEnabled: d, toolbarOpts: f } = this.props, { showKeypad: m } = this.state, { prompt: g, expression: b, equationEditor: A, promptEquationEditor: j = "8", responses: M, responseType: N, rationale: P, spellCheckEnabled: I, errors: L = {} } = i, { baseInputConfiguration: R = {}, rationale: z = {}, prompt: B = {}, ignoreOrder: V = {}, allowTrailingZeros: H = {}, maxResponseAreas: U, maxImageWidth: W = {}, maxImageHeight: G = {}, mathMlOptions: K = {} } = s || {}, te = n(s, i), { prompt: q, rationale: J, responsesErrors: Y, responseAreasError: X } = L, Z = W && W.prompt, Q = G && G.prompt, ne = {
+			editor: "response-editor",
+			mathToolbar: "math-toolbar"
+		}, re = N === t.advanced ? M : M.slice(0, 1), $ = /* @__PURE__ */ l(E, {
+			disableFocusListener: !0,
+			disableTouchListener: !0,
+			placement: "right",
+			title: te,
+			children: /* @__PURE__ */ l(y, {
+				fontSize: "small",
+				color: "primary",
+				style: { marginLeft: "5px" }
+			})
+		});
+		return /* @__PURE__ */ u(x, {
+			ref: (e) => this.root = e || this.root,
+			children: [
+				c && /* @__PURE__ */ u(O, {
+					label: B.label,
+					children: [/* @__PURE__ */ l(h, {
+						onFocus: this.onPromptFocus,
+						markup: g || "",
+						onChange: this.onChange("prompt"),
+						imageSupport: a,
+						nonEmpty: !1,
+						error: q,
+						toolbarOpts: f,
+						pluginProps: r(B?.inputConfiguration, R),
+						spellCheck: I,
+						maxImageWidth: Z,
+						maxImageHeight: Q,
+						uploadSoundSupport: o,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: K
+					}), q && /* @__PURE__ */ l(D, { children: q })]
+				}),
+				N === t.advanced && /* @__PURE__ */ u(k, { children: [
+					/* @__PURE__ */ u(w, {
+						style: { justifyContent: "flex-start" },
+						children: [/* @__PURE__ */ l(C, { children: "Define Response" }), $]
+					}),
+					/* @__PURE__ */ l(T, {
+						label: "Response Template Equation Editor",
+						children: /* @__PURE__ */ u(_, {
+							onChange: this.onChange("promptEquationEditor"),
+							value: j,
+							MenuProps: { transitionDuration: {
+								enter: 225,
+								exit: 195
+							} },
+							children: [
+								/* @__PURE__ */ l(v, {
+									value: "non-negative-integers",
+									children: "Numeric - Non-Negative Integers"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "integers",
+									children: "Numeric - Integers"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "decimals",
+									children: "Numeric - Decimals"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "fractions",
+									children: "Numeric - Fractions"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: 1,
+									children: "Grade 1 - 2"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: 3,
+									children: "Grade 3 - 5"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: 6,
+									children: "Grade 6 - 7"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: 8,
+									children: "Grade 8 - HS"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "geometry",
+									children: "Geometry"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "advanced-algebra",
+									children: "Advanced Algebra"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "statistics",
+									children: "Statistics"
+								}),
+								/* @__PURE__ */ l(v, {
+									value: "item-authoring",
+									children: "Item Authoring"
+								})
+							]
+						})
+					}, "templateEditorType"),
+					/* @__PURE__ */ u(ee, { children: [/* @__PURE__ */ l(S, { children: "RESPONSE TEMPLATE" }), /* @__PURE__ */ l(p, {
+						classNames: ne,
+						allowAnswerBlock: !0,
+						keypadMode: j,
+						controlledKeypad: !0,
+						showKeypad: m,
+						latex: F(b) || "",
+						onChange: this.onChange("expression"),
+						onFocus: this.onFocus,
+						onDone: this.onDone,
+						maxResponseAreas: U,
+						error: X
+					})] }, "templateHolder"),
+					X && /* @__PURE__ */ l(D, { children: X })
+				] }),
+				/* @__PURE__ */ u(w, {
+					style: { justifyContent: "flex-start" },
+					children: [/* @__PURE__ */ l(C, { children: "Define Correct Response" }), N === t.simple ? $ : null]
+				}),
+				/* @__PURE__ */ l(T, {
+					label: "Equation Editor",
+					children: /* @__PURE__ */ u(_, {
+						onChange: this.onChange("equationEditor"),
+						value: A,
+						MenuProps: { transitionDuration: {
+							enter: 225,
+							exit: 195
+						} },
+						children: [
+							/* @__PURE__ */ l(v, {
+								value: "non-negative-integers",
+								children: "Numeric - Non-Negative Integers"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "integers",
+								children: "Numeric - Integers"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "decimals",
+								children: "Numeric - Decimals"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "fractions",
+								children: "Numeric - Fractions"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: 1,
+								children: "Grade 1 - 2"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: 3,
+								children: "Grade 3 - 5"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: 6,
+								children: "Grade 6 - 7"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: 8,
+								children: "Grade 8 - HS"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "geometry",
+								children: "Geometry"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "advanced-algebra",
+								children: "Advanced Algebra"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "statistics",
+								children: "Statistics"
+							}),
+							/* @__PURE__ */ l(v, {
+								value: "item-authoring",
+								children: "Item Authoring"
+							})
+						]
+					})
+				}),
+				re.map((n, r) => /* @__PURE__ */ l(e, {
+					mode: A,
+					response: n,
+					defaultResponse: N === t.simple,
+					onResponseChange: this.onResponseChange,
+					index: r,
+					cIgnoreOrder: V,
+					cAllowTrailingZeros: H,
+					error: Y && Y[r]
+				}, n.id)),
+				d && /* @__PURE__ */ u(O, {
+					label: z.label,
+					children: [/* @__PURE__ */ l(h, {
+						markup: P || "",
+						onChange: this.onChange("rationale"),
+						imageSupport: a,
+						nonEmpty: !1,
+						error: J,
+						toolbarOpts: f,
+						pluginProps: r(z?.inputConfiguration, {
+							...R,
+							math: { controlledKeypadMode: !1 }
+						}),
+						spellCheck: I,
+						maxImageWidth: W && W.rationale || Z,
+						maxImageHeight: G && G.rationale || Q,
+						uploadSoundSupport: o,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: K
+					}), J && /* @__PURE__ */ l(D, { children: J })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { L as default };

package/dist/author/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @synced-from pie-elements/packages/math-inline/configure/src/index.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.
+ */
+export default class MathInlineConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => {
+        allowTrailingZerosDefault: boolean;
+        customKeys: never[];
+        equationEditor: string;
+        expression: string;
+        feedback: {
+            correct: {
+                default: string;
+                type: string;
+            };
+            incorrect: {
+                default: string;
+                type: string;
+            };
+            partial: {
+                default: string;
+                type: string;
+            };
+        };
+        feedbackEnabled: boolean;
+        ignoreOrderDefault: boolean;
+        partialScoring: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        responseType: string;
+        responses: never[];
+        scoringType: string;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        validationDefault: string;
+    };
+    constructor();
+    set model(m: any);
+    set configuration(c: any);
+    onModelChanged(model: any): void;
+    onConfigurationChanged(c: any): void;
+    /**
+     *
+     * @param {done, progress, file} handler
+     */
+    insertImage(handler: any): void;
+    onDeleteImage(src: any, done: any): void;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    _render(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

@@ -0,0 +1,80 @@
+import { Configure as e } from "./configure.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import i from "debug";
+import { isEmpty as a } from "@pie-element/shared-lodash";
+import { DeleteImageEvent as o, DeleteSoundEvent as s, InsertImageEvent as c, InsertSoundEvent as l, ModelUpdatedEvent as u } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var d = i("pie-elements:math-inline:configure"), f = class i extends HTMLElement {
+	static createDefaultModel = (e = {}) => (a(e.responses) || (e.responses = e.responses.map((e) => ({
+		...e,
+		validation: e.validation || t.model.validationDefault,
+		allowTrailingZeros: e.allowTrailingZeros || t.model.allowTrailingZerosDefault,
+		ignoreOrder: e.ignoreOrder || t.model.ignoreOrderDefault || !1
+	}))), {
+		...t.model,
+		...e
+	});
+	constructor() {
+		super(), this._root = null, this._model = i.createDefaultModel(), this._configuration = t.configuration;
+	}
+	set model(e) {
+		this._model = i.createDefaultModel(e), this._render();
+	}
+	set configuration(e) {
+		let n = {
+			...t.configuration,
+			...e
+		};
+		this._configuration = n, n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
+			value: this._model.language,
+			label: this._model.language
+		})) : delete this._model.language, this._render();
+	}
+	onModelChanged(e) {
+		this._model = e, d("[onModelChanged]: ", this._model), this._render(), this.dispatchEvent(new u(this._model));
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._model && this.onModelChanged(this._model), this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new c(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new o(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new l(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new s(e, t));
+	}
+	_render() {
+		if (this._model) {
+			let t = n.createElement(e, {
+				onModelChanged: this.onModelChanged.bind(this),
+				onConfigurationChanged: this.onConfigurationChanged.bind(this),
+				model: this._model,
+				configuration: this._configuration,
+				imageSupport: {
+					add: this.insertImage.bind(this),
+					delete: this.onDeleteImage.bind(this)
+				},
+				uploadSoundSupport: {
+					add: this.insertSound.bind(this),
+					delete: this.onDeleteSound.bind(this)
+				}
+			});
+			this._root ||= r(this), this._root.render(t);
+		}
+	}
+	connectedCallback() {
+		this._render();
+	}
+	disconnectedCallback() {
+		this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { f as default };

package/dist/author/response.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @synced-from pie-elements/packages/math-inline/configure/src/response.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 * as React from 'react';
+import PropTypes from 'prop-types';
+declare class Response extends React.Component {
+    static propTypes: {
+        defaultResponse: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<object>;
+        mode: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        index: PropTypes.Requireable<number>;
+        onResponseChange: PropTypes.Validator<(...args: any[]) => any>;
+        response: PropTypes.Validator<object>;
+        cIgnoreOrder: PropTypes.Validator<object>;
+        cAllowTrailingZeros: PropTypes.Validator<object>;
+    };
+    static defaultProps: {
+        defaultResponse: boolean;
+        mode: string;
+    };
+    constructor(props: any);
+    onChange: (name: any) => (evt: any) => void;
+    onConfigChanged: (name: any) => (evt: any) => void;
+    onLiteralOptionsChange: (name: any) => () => void;
+    onAnswerChange: any;
+    onAlternateAnswerChange: (alternateId: any) => (answer: any) => void;
+    onAddAlternate: any;
+    onRemoveAlternate: (alternateId: any) => () => void;
+    onDone: any;
+    onFocus: any;
+    onAlternateFocus: (alternateId: any) => () => void;
+    onAlternateDone: (alternateId: any) => () => void;
+    render(): React.JSX.Element;
+}
+export default Response;