@pie-element/explicit-constructed-response 11.4.0-beta.6 → 12.0.0-next.20261002094057

package/dist/author/defaults.js

@@ -0,0 +1,128 @@
+//#region src/author/defaults.ts
+var e = {
+	model: {
+		choices: {},
+		displayType: "block",
+		markup: "",
+		maxLengthPerChoiceEnabled: !0,
+		playerSpellCheckEnabled: !1,
+		prompt: "",
+		promptEnabled: !0,
+		rationale: "",
+		rationaleEnabled: !0,
+		spellCheckEnabled: !0,
+		studentInstructionsEnabled: !0,
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		toolbarEditorPosition: "bottom",
+		responseAreaInputConfiguration: {}
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			html: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		prompt: {
+			settings: !0,
+			label: "Prompt",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		partialScoring: {
+			settings: !1,
+			label: "Allow Partial Scoring"
+		},
+		rationale: {
+			settings: !0,
+			label: "Rationale",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		settingsPanelDisabled: !1,
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		editSource: {
+			label: "Edit Source",
+			settings: !1,
+			enabled: !1
+		},
+		playerSpellCheck: {
+			label: "Student Spellcheck",
+			settings: !0,
+			enabled: !0
+		},
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		template: { inputConfiguration: {
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			h3: { disabled: !0 },
+			blockquote: { disabled: !0 }
+		} },
+		maxLengthPerChoice: {
+			settings: !0,
+			label: "Maximum Length Per Choice"
+		},
+		maxResponseAreas: 10,
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300
+		},
+		withRubric: {
+			settings: !1,
+			label: "Add Rubric"
+		},
+		mathMlOptions: {
+			mmlOutput: !1,
+			mmlEditing: !1
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		},
+		responseAreaInputConfiguration: { inputConfiguration: { characters: { disabled: !0 } } },
+		spanishButton: {
+			settings: !0,
+			label: "Disable Spanish Characters"
+		}
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/ecr-toolbar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/ecr-toolbar.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 declare class ECRToolbar extends React.Component {
+    static propTypes: {
+        correctChoice: PropTypes.Requireable<object>;
+        node: PropTypes.Requireable<object>;
+        pos: PropTypes.Requireable<number>;
+        onDone: PropTypes.Requireable<(...args: any[]) => any>;
+        onChangeResponse: PropTypes.Validator<(...args: any[]) => any>;
+        onToolbarDone: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Requireable<PropTypes.InferProps<{
+            change: PropTypes.Validator<(...args: any[]) => any>;
+            document: PropTypes.Requireable<PropTypes.InferProps<{
+                getNextText: PropTypes.Validator<(...args: any[]) => any>;
+            }>>;
+        }>>;
+        editor: PropTypes.Requireable<object>;
+        maxLengthPerChoiceEnabled: PropTypes.Requireable<boolean>;
+        pluginProps: PropTypes.Requireable<object>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    state: {
+        markup: string;
+        toolbarStyle: {};
+    };
+    componentDidMount(): void;
+    onDone: any;
+    onRespAreaChange: any;
+    onKeyDown: any;
+    onBlur: any;
+    render(): React.JSX.Element;
+}
+export default ECRToolbar;

package/dist/author/ecr-toolbar.js

@@ -0,0 +1,100 @@
+import { stripHtmlTags as e } from "./markupUtils.js";
+import t from "react";
+import n from "prop-types";
+import { jsx as r } from "react/jsx-runtime";
+import { styled as i } from "@mui/material/styles";
+import a from "@pie-lib/editable-html-tip-tap";
+//#region src/author/ecr-toolbar.tsx
+var o = i(a)(({ theme: e }) => ({
+	backgroundColor: e.palette.common.white,
+	outline: "none",
+	lineHeight: "15px"
+})), s = class extends t.Component {
+	static propTypes = {
+		correctChoice: n.object,
+		node: n.object,
+		pos: n.number,
+		onDone: n.func,
+		onChangeResponse: n.func.isRequired,
+		onToolbarDone: n.func.isRequired,
+		value: n.shape({
+			change: n.func.isRequired,
+			document: n.shape({ getNextText: n.func.isRequired })
+		}),
+		editor: n.object,
+		maxLengthPerChoiceEnabled: n.bool,
+		pluginProps: n.object,
+		spellCheck: n.bool
+	};
+	state = {
+		markup: "",
+		toolbarStyle: {}
+	};
+	componentDidMount() {
+		let { correctChoice: e, node: t, editor: n } = this.props, r = e || {}, i = n.view.nodeDOM(n.state.selection.from);
+		if (i?.nodeType === 1) {
+			let e = i.getBoundingClientRect(), t = i.closest(".tiptap").getBoundingClientRect();
+			e.top - t.top, e.left - t.left, this.setState({
+				markup: r.label,
+				toolbarStyle: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: `${e.width - 4}px`
+				}
+			});
+		}
+	}
+	onDone = (t) => {
+		let { editor: n, node: r, onToolbarDone: i, onChangeResponse: a, pos: o } = this.props, s = e(t);
+		this.setState({ markup: s });
+		let { tr: c } = n.state, l = c.doc.nodeAt(o);
+		if (!l || l.isText || !l.isAtom || !l.isInline) return !1;
+		c.setNodeMarkup(o, void 0, {
+			...r.attrs,
+			value: s
+		}), n.view.dispatch(c), i(!0), a(s);
+	};
+	onRespAreaChange = (e) => {
+		this.setState({ respAreaMarkup: e });
+	};
+	onKeyDown = (e) => e.key === "Enter";
+	onBlur = () => {
+		this.clickedInside &&= !1;
+	};
+	render() {
+		let { maxLengthPerChoiceEnabled: e, pluginProps: t, spellCheck: n } = this.props, { markup: i, toolbarStyle: a } = this.state, s = e ? {} : { maxLength: 25 };
+		return /* @__PURE__ */ r("div", {
+			style: a,
+			children: /* @__PURE__ */ r(o, {
+				autoFocus: !0,
+				disableUnderline: !0,
+				onChange: (e) => {
+					this.preventDone || this.onRespAreaChange(e);
+				},
+				onDone: (e) => {
+					this.preventDone || this.onDone(e);
+				},
+				onBlur: (e) => {
+					this.preventDone = e.relatedTarget && e.relatedTarget.closest(".insert-character-dialog"), this.onBlur(e);
+				},
+				onKeyDown: this.onKeyDown,
+				markup: i || "",
+				activePlugins: ["languageCharacters"],
+				pluginProps: t,
+				languageCharactersProps: [{ language: "spanish" }],
+				minHeight: "15px",
+				maxHeight: "15px",
+				spellCheck: n,
+				autoWidthToolbar: !0,
+				toolbarOpts: {
+					minWidth: "auto",
+					isHidden: !!t?.characters?.disabled
+				},
+				...s
+			})
+		});
+	}
+};
+//#endregion
+export { s as ECRToolbar, s as default };

package/dist/author/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/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 ExplicitConstructedResponse extends HTMLElement {
+    static prepareModel: (model?: {}) => {
+        slateMarkup: any;
+        markup: string;
+        choices: {};
+        displayType: string;
+        maxLengthPerChoiceEnabled: boolean;
+        playerSpellCheckEnabled: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        spellCheckEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+        responseAreaInputConfiguration: {};
+    };
+    constructor();
+    set model(s: any);
+    set configuration(c: any);
+    set disableSidePanel(s: any);
+    dispatchModelUpdated(reset: any): void;
+    onModelChanged: any;
+    onConfigurationChanged: any;
+    /** @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,99 @@
+import { createSlateMarkup as e, processMarkup as t } from "./markupUtils.js";
+import { Main as n } from "./main.js";
+import r from "./defaults.js";
+import i from "react";
+import { createRoot as a } from "react-dom/client";
+import { defaults as o, isArray as s } from "@pie-element/shared-lodash";
+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("explicit-constructed-response:configure"), h = class c extends HTMLElement {
+	static prepareModel = (n = {}) => {
+		let i = {
+			...r.model,
+			...n
+		}, a = i.slateMarkup || e(i.markup, i.choices), o = t(a);
+		return i.choices && Object.keys(i.choices).forEach((e) => {
+			s(i.choices[e]) && (i.choices[e] = (i.choices[e] || []).map((e, t) => e.value ? e : (m("Choice does not contain \"value\" property, which is required.", e), {
+				value: `${t}`,
+				...e
+			})));
+		}), {
+			...i,
+			slateMarkup: a,
+			markup: o
+		};
+	};
+	constructor() {
+		super(), this._root = null, this._model = c.prepareModel(), this._configuration = r.configuration;
+	}
+	set model(e) {
+		this._model = c.prepareModel(e), this._model.responseAreaInputConfiguration && (this._model.responseAreaInputConfiguration = this._configuration.responseAreaInputConfiguration?.inputConfiguration), this._render();
+	}
+	set configuration(e) {
+		this._configuration = o(e, r.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({
+			...this._model,
+			...e
+		}), this._render(), this.dispatchModelUpdated(t);
+	};
+	onConfigurationChanged = (e) => {
+		this._configuration = e;
+		let t = this._configuration?.responseAreaInputConfiguration?.inputConfiguration;
+		this._model = {
+			...this._model,
+			responseAreaInputConfiguration: t
+		}, this.onModelChanged(this._model);
+	};
+	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 = i.createElement(n, {
+			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 ||= a(this), this._root.render(e);
+	}
+	connectedCallback() {
+		this._render();
+	}
+	disconnectedCallback() {
+		this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { h as default };

package/dist/author/main.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @synced-from pie-elements/packages/explicit-constructed-response/configure/src/main.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 declare class Main extends React.Component {
+    static propTypes: {
+        configuration: PropTypes.Validator<object>;
+        model: PropTypes.Validator<object>;
+        disableSidePanel: PropTypes.Requireable<boolean>;
+        onModelChanged: PropTypes.Validator<(...args: any[]) => any>;
+        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<object>;
+    };
+    state: {};
+    componentDidMount(): void;
+    onModelChange: any;
+    onPromptChanged: any;
+    onRationaleChanged: any;
+    onTeacherInstructionsChanged: any;
+    onMarkupChanged: any;
+    onResponsesChanged: any;
+    onLengthChanged: any;
+    onChangeResponse: any;
+    onChange: any;
+    onHandleAreaChange: import("@pie-element/shared-lodash").CancelableFunction<(nodes: any) => void>;
+    render(): React.JSX.Element;
+}
+export default Main;