@pie-element/math-templated 0.1.0

package/dist/author/design.js

@@ -0,0 +1,494 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/pick.js";
+import n from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/throttle.js";
+import r from "./response.js";
+import { createSlateMarkup as i, processMarkup as a } from "./markupUtils.js";
+import { generateValidationMessage as o } from "./utils.js";
+import s from "react";
+import c from "prop-types";
+import { styled as l } from "@mui/material/styles";
+import u from "@mui/material/Tooltip";
+import { jsxDEV as d } from "react/jsx-dev-runtime";
+import f from "@mui/material/Typography";
+import p from "@mui/material/Select";
+import m from "@mui/material/MenuItem";
+import ee from "@mui/icons-material/Info";
+import { InputContainer as h, layout as te, settings as g } from "@pie-lib/config-ui";
+import _, { ALL_PLUGINS as ne } from "@pie-lib/editable-html-tip-tap";
+//#region src/author/design.tsx
+var v = "/Users/eelco.hillenius/dev/prj/pie/pie-elements-ng/packages/elements-react/math-templated/src/author/design.tsx", { dropdown: y } = g, { Panel: re, toggle: b } = g, x = l(h)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), S = l(_)({ width: "100%" }), C = l("div")(({ theme: e }) => ({
+	color: e.palette.error.main,
+	fontSize: "0.75rem",
+	marginTop: e.spacing(1)
+})), ie = l("div")(({ theme: e }) => ({
+	color: e.palette.error.main,
+	fontSize: "0.75rem",
+	marginBottom: e.spacing(1)
+})), ae = l(_)(({ theme: e }) => ({
+	width: "100%",
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(3)
+})), oe = l(h)(({ theme: e }) => ({
+	width: "100%",
+	marginTop: e.spacing(2),
+	"& > *:not(label)": { marginTop: e.spacing(1) },
+	marginBottom: e.spacing(2)
+})), se = l(p)({ width: "100%" }), w = l(f)(({ theme: e }) => ({
+	fontSize: e.typography.fontSize * 1.25,
+	fontWeight: "bold"
+})), T = l("div")({
+	display: "flex",
+	alignItems: "center",
+	gap: "8px"
+}), E = l(u)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), D = (e) => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, O = class extends s.Component {
+	static propTypes = {
+		model: c.object.isRequired,
+		configuration: c.object.isRequired,
+		onModelChanged: c.func.isRequired,
+		onConfigurationChanged: c.func.isRequired,
+		imageSupport: c.shape({
+			add: c.func.isRequired,
+			delete: c.func.isRequired
+		}),
+		uploadSoundSupport: c.object
+	};
+	state = {};
+	componentDidMount() {
+		let { model: { slateMarkup: e } } = this.props;
+		this.setState({ markup: e });
+	}
+	handleChange = (t, n) => {
+		let { onModelChanged: r, model: i } = this.props, a = e(i);
+		a[t] = n, r(a);
+	};
+	onResponseChange = (e, t) => {
+		let { model: n, onModelChanged: r } = this.props, i = { ...n };
+		i.responses[t] = e, r(i);
+	};
+	onResponseDone = () => {
+		let { model: e, onModelChanged: t } = this.props;
+		t({
+			...e,
+			slateMarkup: i(e.markup, e.responses)
+		});
+	};
+	onChangeResponse = (e, t) => {
+		let { model: n, onModelChanged: r } = this.props, { responses: i } = n;
+		i[e] ? i[e][0].answer = t || "" : i[e] = [{
+			answer: t || "",
+			id: "response" + e,
+			allowSpaces: !0
+		}], r({
+			...n,
+			responses: i
+		});
+	};
+	onResponsesChanged = (e) => {
+		this.props.onModelChanged({
+			...this.props.model,
+			responses: e
+		});
+	};
+	onChange = (e) => {
+		let { model: { responses: t, validationDefault: n, allowTrailingZerosDefault: r, ignoreOrderDefault: i }, onModelChanged: o } = this.props, s = {}, c = D(e);
+		c.querySelectorAll("[data-type=\"math_templated\"]").forEach((e, a) => {
+			let { value: o, index: c } = e.dataset;
+			o || (e.dataset.value = ""), s[a] = t[c] || {
+				allowSpaces: !0,
+				validation: n || "symbolic",
+				allowTrailingZeros: r || !1,
+				ignoreOrder: i || !1,
+				answer: "",
+				alternates: {}
+			}, e.dataset.index = a.toString();
+		});
+		let l = a(e);
+		this.setState({ cachedResponses: void 0 }, () => o({
+			...this.props.model,
+			slateMarkup: c.innerHTML,
+			responses: s,
+			markup: l
+		}));
+	};
+	onHandleAreaChange = n((n) => {
+		let { model: { responses: r }, onModelChanged: i } = this.props, { cachedResponses: a } = this.state;
+		if (!n) return;
+		let o = r ? e(r) : {}, s = a ? e(a) : {};
+		n.forEach((e) => {
+			let n = e.data.get("index");
+			!o[n] && s[n] ? (Object.assign(o, t(s, n)), Object.prototype.hasOwnProperty.call(s, n) && delete s[n]) : (Object.assign(s, t(o, n)), Object.prototype.hasOwnProperty.call(o, n) && delete o[n]);
+		}), this.setState({ cachedResponses: s }, () => i({
+			...this.props.model,
+			responses: o
+		}));
+	}, 500, {
+		trailing: !1,
+		leading: !0
+	});
+	onBlur = (e) => {
+		let { relatedTarget: t, currentTarget: n } = e || {};
+		function r(e, t = 0) {
+			if (!e || t >= 16) return null;
+			let n = e.offsetParent;
+			return n ? n.getAttribute("role") === "tooltip" ? n : r(n, t + 1) : null;
+		}
+		function i(e, t = 0) {
+			if (!e || t >= 4) return null;
+			let n = e?.children?.[0];
+			return n ? n.attributes && n.attributes["data-keypad"] ? n : i(n, t + 1) : null;
+		}
+		let a = r(t), o = a ? i(a) : null;
+		(!t || !n || !o?.attributes["data-keypad"]) && this.setState({ activeAnswerBlock: "" });
+	};
+	render() {
+		let { configuration: e, imageSupport: t, model: n, onConfigurationChanged: i, onModelChanged: a, uploadSoundSupport: s } = this.props, { baseInputConfiguration: c = {}, contentDimensions: l = {}, prompt: u = {}, rationale: f = {}, settingsPanelDisabled: p, teacherInstructions: h = {}, language: g = {}, languageChoices: _ = {}, spellCheck: D = {}, playerSpellCheck: O = {}, maxImageWidth: k = {}, maxImageHeight: A = {}, mathMlOptions: j = {}, template: ce = {}, editSource: M = {}, ignoreOrder: le = {}, allowTrailingZeros: ue = {}, partialScoring: N = {}, maxResponseAreas: P } = e || {}, { errors: F, extraCSSRules: I, promptEnabled: L, rationaleEnabled: R, spellCheckEnabled: z, teacherInstructionsEnabled: B, toolbarEditorPosition: V, responses: H, equationEditor: U } = n || {}, { prompt: W, rationale: G, responseAreas: K, teacherInstructions: q, responses: J = {} } = F || {}, Y = o(e), de = {
+			"language.enabled": g.settings && b(g.label, !0),
+			language: g.settings && g.enabled && y(_.label, _.options)
+		}, fe = {
+			teacherInstructionsEnabled: h.settings && b(h.label),
+			rationaleEnabled: f.settings && b(f.label),
+			promptEnabled: u.settings && b(u.label),
+			spellCheckEnabled: D.settings && b(D.label),
+			playerSpellCheckEnabled: O.settings && b(O.label),
+			"editSource.enabled": M?.settings && b(M.label, !0),
+			partialScoring: N.settings && b(N.label)
+		}, X = k && k.prompt, Z = A && A.prompt, Q = { position: V === "top" ? "top" : "bottom" }, $ = (e = {}, t = {}) => ({
+			...t,
+			...e
+		});
+		return /* @__PURE__ */ d(te.ConfigLayout, {
+			extraCSSRules: I,
+			dimensions: l,
+			hideSettings: p,
+			settings: /* @__PURE__ */ d(re, {
+				model: n,
+				configuration: e,
+				onChangeModel: (e) => a(e),
+				onChangeConfiguration: i,
+				groups: {
+					Settings: de,
+					Properties: fe
+				}
+			}, void 0, !1, {
+				fileName: v,
+				lineNumber: 364,
+				columnNumber: 11
+			}, this),
+			children: [
+				B && /* @__PURE__ */ d(x, {
+					label: h.label,
+					children: [/* @__PURE__ */ d(S, {
+						markup: n.teacherInstructions || "",
+						onChange: (e) => this.handleChange("teacherInstructions", e),
+						imageSupport: t,
+						nonEmpty: !1,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(h?.inputConfiguration, c),
+						spellCheck: z,
+						maxImageWidth: k && k.teacherInstructions || X,
+						maxImageHeight: A && A.teacherInstructions || Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j
+					}, void 0, !1, {
+						fileName: v,
+						lineNumber: 378,
+						columnNumber: 13
+					}, this), q && /* @__PURE__ */ d(C, { children: q }, void 0, !1, {
+						fileName: v,
+						lineNumber: 393,
+						columnNumber: 42
+					}, this)]
+				}, void 0, !0, {
+					fileName: v,
+					lineNumber: 377,
+					columnNumber: 11
+				}, this),
+				L && /* @__PURE__ */ d(x, {
+					label: u.label,
+					children: [/* @__PURE__ */ d(S, {
+						markup: n.prompt,
+						onChange: (e) => this.handleChange("prompt", e),
+						imageSupport: t,
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: W,
+						toolbarOpts: Q,
+						pluginProps: $(h?.inputConfiguration, c),
+						spellCheck: z,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j
+					}, void 0, !1, {
+						fileName: v,
+						lineNumber: 399,
+						columnNumber: 13
+					}, this), W && /* @__PURE__ */ d(C, { children: W }, void 0, !1, {
+						fileName: v,
+						lineNumber: 415,
+						columnNumber: 29
+					}, this)]
+				}, void 0, !0, {
+					fileName: v,
+					lineNumber: 398,
+					columnNumber: 11
+				}, this),
+				/* @__PURE__ */ d(T, { children: [/* @__PURE__ */ d(w, {
+					component: "div",
+					children: "Response Template"
+				}, void 0, !1, {
+					fileName: v,
+					lineNumber: 419,
+					columnNumber: 11
+				}, this), /* @__PURE__ */ d(E, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "right",
+					title: Y,
+					children: /* @__PURE__ */ d(ee, {
+						fontSize: "small",
+						color: "primary"
+					}, void 0, !1, {
+						fileName: v,
+						lineNumber: 421,
+						columnNumber: 13
+					}, this)
+				}, void 0, !1, {
+					fileName: v,
+					lineNumber: 420,
+					columnNumber: 11
+				}, this)] }, void 0, !0, {
+					fileName: v,
+					lineNumber: 418,
+					columnNumber: 9
+				}, this),
+				/* @__PURE__ */ d(ae, {
+					activePlugins: ne,
+					toolbarOpts: { position: "top" },
+					spellCheck: z,
+					pluginProps: $(ce?.inputConfiguration, c),
+					responseAreaProps: {
+						type: "math-templated",
+						respAreaToolbar: null,
+						error: () => J,
+						onHandleAreaChange: this.onHandleAreaChange,
+						maxResponseAreas: P
+					},
+					markup: n.slateMarkup,
+					onChange: this.onChange,
+					imageSupport: t,
+					disableImageAlignmentButtons: !0,
+					onBlur: this.onBlur,
+					disabled: !1,
+					highlightShape: !1,
+					error: K,
+					uploadSoundSupport: s,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: j
+				}, void 0, !1, {
+					fileName: v,
+					lineNumber: 424,
+					columnNumber: 9
+				}, this),
+				K && /* @__PURE__ */ d(ie, { children: K }, void 0, !1, {
+					fileName: v,
+					lineNumber: 448,
+					columnNumber: 32
+				}, this),
+				/* @__PURE__ */ d(w, { children: "Define Response" }, void 0, !1, {
+					fileName: v,
+					lineNumber: 450,
+					columnNumber: 9
+				}, this),
+				/* @__PURE__ */ d(oe, {
+					label: "Response Template Equation Editor",
+					children: /* @__PURE__ */ d(se, {
+						MenuProps: { transitionDuration: {
+							enter: 225,
+							exit: 195
+						} },
+						onChange: (e) => this.handleChange("equationEditor", e.target.value),
+						value: U,
+						children: [
+							/* @__PURE__ */ d(m, {
+								value: "non-negative-integers",
+								children: "Numeric - Non-Negative Integers"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 458,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "integers",
+								children: "Numeric - Integers"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 459,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "decimals",
+								children: "Numeric - Decimals"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 460,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "fractions",
+								children: "Numeric - Fractions"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 461,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: 1,
+								children: "Grade 1 - 2"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 462,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: 3,
+								children: "Grade 3 - 5"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 463,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: 6,
+								children: "Grade 6 - 7"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 464,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: 8,
+								children: "Grade 8 - HS"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 465,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "geometry",
+								children: "Geometry"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 466,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "advanced-algebra",
+								children: "Advanced Algebra"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 467,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "statistics",
+								children: "Statistics"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 468,
+								columnNumber: 13
+							}, this),
+							/* @__PURE__ */ d(m, {
+								value: "item-authoring",
+								children: "Item Authoring"
+							}, void 0, !1, {
+								fileName: v,
+								lineNumber: 469,
+								columnNumber: 13
+							}, this)
+						]
+					}, void 0, !0, {
+						fileName: v,
+						lineNumber: 453,
+						columnNumber: 11
+					}, this)
+				}, void 0, !1, {
+					fileName: v,
+					lineNumber: 452,
+					columnNumber: 9
+				}, this),
+				Object.keys(H || {}).map((e, t) => {
+					let n = H[t];
+					return n ? /* @__PURE__ */ d(r, {
+						responseKey: t,
+						mode: U,
+						response: n,
+						onResponseChange: this.onResponseChange,
+						onResponseDone: this.onResponseDone,
+						index: t,
+						cIgnoreOrder: le,
+						cAllowTrailingZeros: ue,
+						error: J && J[t]
+					}, t, !1, {
+						fileName: v,
+						lineNumber: 478,
+						columnNumber: 15
+					}, this) : null;
+				}),
+				R && /* @__PURE__ */ d(x, {
+					label: f.label,
+					children: [/* @__PURE__ */ d(S, {
+						markup: n.rationale || "",
+						onChange: (e) => this.handleChange("rationale", e),
+						imageSupport: t,
+						nonEmpty: !1,
+						error: G,
+						toolbarOpts: Q,
+						pluginProps: $(f?.inputConfiguration, {
+							...c,
+							math: { controlledKeypadMode: !1 }
+						}),
+						spellCheck: z,
+						maxImageWidth: k && k.rationale || X,
+						maxImageHeight: A && A.rationale || Z,
+						uploadSoundSupport: s,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: j
+					}, void 0, !1, {
+						fileName: v,
+						lineNumber: 498,
+						columnNumber: 13
+					}, this), G && /* @__PURE__ */ d(C, { children: G }, void 0, !1, {
+						fileName: v,
+						lineNumber: 518,
+						columnNumber: 32
+					}, this)]
+				}, void 0, !0, {
+					fileName: v,
+					lineNumber: 497,
+					columnNumber: 11
+				}, this)
+			]
+		}, void 0, !0, {
+			fileName: v,
+			lineNumber: 359,
+			columnNumber: 7
+		}, this);
+	}
+};
+//#endregion
+export { O as default };

package/dist/author/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/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 MathTemplateConfigure extends HTMLElement {
+    static prepareModel: (model?: {}) => {
+        slateMarkup: any;
+        markup: string;
+        responses: {};
+        allowTrailingZerosDefault: boolean;
+        equationEditor: string;
+        ignoreOrderDefault: boolean;
+        playerSpellCheckEnabled: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        spellCheckEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        validationDefault: string;
+    };
+    constructor();
+    set model(s: any);
+    set configuration(c: any);
+    set disableSidePanel(s: any);
+    dispatchModelUpdated(reset: any): void;
+    onModelChanged(m: any, reset: 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;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/author/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/author/index.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAqBH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,WAAW;IAC5D,MAAM,CAAC,YAAY,GAAI,UAAU;;;;;;;;;;;;;;;;;MA8C/B;;IAWF,IAAI,KAAK,CAAC,CAAC,KAAA,EAGV;IAED,IAAI,aAAa,CAAC,CAAC,KAAA,EA+BlB;IAED,IAAI,gBAAgB,CAAC,CAAC,KAAA,EAGrB;IAED,oBAAoB,CAAC,KAAK,KAAA;IAM1B,cAAc,CAAC,CAAC,KAAA,EAAE,KAAK,KAAA;IAMvB,sBAAsB,CAAC,CAAC,KAAA;IAKxB,4CAA4C;IAC5C,WAAW,CAAC,OAAO,KAAA;IAInB,aAAa,CAAC,GAAG,KAAA,EAAE,IAAI,KAAA;IAIvB,WAAW,CAAC,OAAO,KAAA;IAInB,aAAa,CAAC,GAAG,KAAA,EAAE,IAAI,KAAA;IAIvB,OAAO;IAyBP,oBAAoB;CAKrB"}

package/dist/author/index.js

@@ -0,0 +1,98 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isArray.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/defaults.js";
+import { createSlateMarkup as n, processMarkup as r } from "./markupUtils.js";
+import i from "./design.js";
+import a from "./defaults.js";
+import o from "react";
+import { createRoot as s } from "react-dom/client";
+import c from "debug";
+import { DeleteImageEvent as l, DeleteSoundEvent as u, InsertImageEvent as d, InsertSoundEvent as f, ModelUpdatedEvent as p } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var m = c("math-templated:configure"), h = class c extends HTMLElement {
+	static prepareModel = (t = {}) => {
+		let { validationDefault: i, allowTrailingZerosDefault: o, ignoreOrderDefault: s, responses: c = {} } = t, l = Object.keys(c).reduce((e, t) => {
+			let n = c[t];
+			return e[t] = {
+				...n,
+				validation: n.validation || i,
+				allowTrailingZeros: n.allowTrailingZeros || o,
+				ignoreOrder: n.ignoreOrder || s
+			}, e;
+		}, {}), u = {
+			...a.model,
+			...t,
+			responses: l
+		}, d = u.slateMarkup || n(u.markup, u.responses), f = r(d);
+		return u.responses && Object.keys(u.responses).forEach((t) => {
+			e(u.responses[t]) && (u.responses[t] = (u.responses[t] || []).map((e, t) => e.answer ? e : (m("Choice does not contain \"answer\" property, which is required.", e), {
+				answer: `${t}`,
+				...e
+			})));
+		}), {
+			...u,
+			slateMarkup: d,
+			markup: f
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = c.prepareModel(), this._configuration = a.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+	}
+	set model(e) {
+		this._model = c.prepareModel(e), this._render();
+	}
+	set configuration(e) {
+		this._configuration = t(e, a.configuration), e.language?.enabled ? e.languageChoices?.options?.length && (this._model.language = e.languageChoices.options[0].value) : e.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();
+	}
+	set disableSidePanel(e) {
+		this._disableSidePanel = e, this._render();
+	}
+	dispatchModelUpdated(e) {
+		let t = !!e;
+		this.dispatchEvent(new p(this._model, t));
+	}
+	onModelChanged(e, t) {
+		this._model = c.prepareModel(e), this._render(), this.dispatchModelUpdated(t);
+	}
+	onConfigurationChanged(e) {
+		this._configuration = e, this._render();
+	}
+	insertImage(e) {
+		this.dispatchEvent(new d(e));
+	}
+	onDeleteImage(e, t) {
+		this.dispatchEvent(new l(e, t));
+	}
+	insertSound(e) {
+		this.dispatchEvent(new f(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new u(e, t));
+	}
+	_render() {
+		m("_render");
+		let e = o.createElement(i, {
+			model: this._model,
+			configuration: this._configuration,
+			onModelChanged: this.onModelChanged,
+			onConfigurationChanged: this.onConfigurationChanged,
+			disableSidePanel: this._disableSidePanel,
+			imageSupport: {
+				add: this.insertImage.bind(this),
+				delete: this.onDeleteImage.bind(this)
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			}
+		});
+		this._root ||= s(this), this._root.render(e);
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { h as default };

package/dist/author/markupUtils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/src/markupUtils.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 declare const removeUnwantedCharacters: (markup: any) => any;
+export declare const processMarkup: (markup: any) => string;
+export declare const createSlateMarkup: (markup: any, responses: any) => any;
+//# sourceMappingURL=markupUtils.d.ts.map

package/dist/author/markupUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markupUtils.d.ts","sourceRoot":"","sources":["../../src/author/markupUtils.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAYH,eAAO,MAAM,wBAAwB,GAAI,WAAM,QACoC,CAAC;AAUpF,eAAO,MAAM,aAAa,GAAI,WAAM,WAQnC,CAAC;AAIF,eAAO,MAAM,iBAAiB,GAAI,WAAM,EAAE,cAAS,QAWlD,CAAC"}

package/dist/author/markupUtils.js

@@ -0,0 +1,10 @@
+//#region src/author/markupUtils.tsx
+var e = "imes|riangle|an|heta|herefore", t = "throot|parallel|cong|approx|eq|e|sim", n = RegExp(`(\\t(?!${e}))|(\\n(?!${t}))|(\\\\t(?!${e}))|(\\\\n(?!${t}))`, "g"), r = (e) => e.replace(n, "").replace(/\\"/g, "\"").replace(/\\\//g, "/"), i = (e = "") => {
+	let t = document.createElement("div");
+	return t.innerHTML = e.trim(), t;
+}, a = (e) => {
+	let t = i(r(e || "") || "");
+	return t.querySelectorAll("[data-type=\"math_templated\"]").forEach((e) => e.replaceWith(`{{${e.dataset.index}}}`)), t.innerHTML;
+}, o = /\{\{(\d+)\}\}/g, s = (e, t) => e ? r(e).replace(o, (e, n) => `<span data-type="math_templated" data-index="${n}" data-value="${t[n]?.answer || ""}"></span>`) : "";
+//#endregion
+export { s as createSlateMarkup, a as processMarkup };