@pie-element/select-text 13.4.0-beta.6 → 14.0.0-next.20261002094057

package/README.md

@@ -1,5 +1,31 @@
-# select-text
+# @pie-element/select-text
 
-TODO...
+A PIE element where students select words, sentences or other tokens in a passage. Content
+authoring tools often call this item type "Hot Text".
 
-> Don't release until 1.0.0-beta.46 is fixed and I can remove @babel/runtime
+One package serves every mode: delivery, authoring, the controller and print.
+
+## Entry points
+
+| Import | What it is |
+| --- | --- |
+| `@pie-element/select-text` | The delivery element |
+| `@pie-element/select-text/author` (or `/configure`) | The authoring element |
+| `@pie-element/select-text/controller` | The controller: `model()`, `outcome()`, `createCorrectResponseSession()` |
+| `@pie-element/select-text/print` | The print element |
+| `@pie-element/select-text/browser/*` | Browser builds of the above, for loading straight from a CDN |
+
+## Printing
+
+The print element renders the item read-only, with a dashed box around every token. For the
+`instructor` role the correct answers are outlined, and teacher instructions and rationale are
+shown.
+
+Two builds of it are published:
+
+- `print` (and `browser/print`) for players in this repository, such as
+  `<pie-element-player view="print">`.
+- `module/print.js` for the legacy `pie-print` player used by PIEOneer and other content
+  systems. Math in the item (LaTeX or MathML) is typeset through `pie-print`'s own renderer.
+
+See [Print Support](../../../docs/PRINT_SUPPORT.md) for how the two print players differ.

package/author.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/configure.js

@@ -0,0 +1,2 @@
+export { default } from './dist/author/index.js';
+export * from './dist/author/index.js';

package/controller.js

@@ -0,0 +1 @@
+export * from './dist/controller/index.js';

package/dist/author/defaultConfiguration.d.ts

@@ -0,0 +1,179 @@
+/**
+ * @synced-from pie-elements/packages/select-text/configure/src/defaultConfiguration.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 _default: {
+    model: {
+        feedbackEnabled: boolean;
+        highlightChoices: boolean;
+        maxSelections: number;
+        mode: string;
+        partialScoring: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        scoringType: string;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        text: string;
+        tokens: never[];
+        toolbarEditorPosition: string;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        selectionCount: {
+            settings: boolean;
+            label: string;
+        };
+        correctAnswer: {
+            settings: boolean;
+            label: string;
+        };
+        selections: {
+            settings: boolean;
+            label: string;
+        };
+        highlightChoices: {
+            settings: boolean;
+            label: string;
+        };
+        rationale: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        scoringType: {
+            settings: boolean;
+            label: string;
+        };
+        studentInstructions: {
+            settings: boolean;
+            label: string;
+        };
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        prompt: {
+            label: string;
+            settings: boolean;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        text: {
+            settings: boolean;
+            label: string;
+        };
+        tokens: {
+            settings: boolean;
+            label: string;
+        };
+        feedback: {
+            settings: boolean;
+            label: string;
+        };
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        partialScoring: {
+            settings: boolean;
+            label: string;
+        };
+        mode: {
+            settings: boolean;
+            label: string;
+        };
+        minTokens: number;
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+    };
+};
+export default _default;

package/dist/author/defaultConfiguration.js

@@ -0,0 +1,141 @@
+//#region src/author/defaultConfiguration.ts
+var e = {
+	model: {
+		feedbackEnabled: !1,
+		highlightChoices: !1,
+		maxSelections: 0,
+		mode: "sentence",
+		partialScoring: !1,
+		prompt: "",
+		promptEnabled: !0,
+		rationale: "",
+		rationaleEnabled: !0,
+		scoringType: "auto",
+		studentInstructionsEnabled: !0,
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		text: "",
+		tokens: [],
+		toolbarEditorPosition: "bottom"
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		selectionCount: {
+			settings: !0,
+			label: "Selection count"
+		},
+		correctAnswer: {
+			settings: !0,
+			label: "Correct Answers"
+		},
+		selections: {
+			settings: !0,
+			label: "Selections Available"
+		},
+		highlightChoices: {
+			settings: !0,
+			label: "Highlight choices"
+		},
+		rationale: {
+			settings: !0,
+			label: "Rationale",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		scoringType: {
+			settings: !1,
+			label: "Scoring Type"
+		},
+		studentInstructions: {
+			settings: !1,
+			label: "Student Instructions"
+		},
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		prompt: {
+			label: "Prompt",
+			settings: !0,
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		text: {
+			settings: !0,
+			label: "Content"
+		},
+		tokens: {
+			settings: !0,
+			label: "Tokens"
+		},
+		feedback: {
+			settings: !0,
+			label: "Feedback"
+		},
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		partialScoring: {
+			settings: !1,
+			label: "Allow Partial Scoring"
+		},
+		mode: {
+			settings: !0,
+			label: "Mode"
+		},
+		minTokens: 2,
+		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: []
+		}
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/design.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @synced-from pie-elements/packages/select-text/configure/src/design.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 Design extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        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>;
+    };
+    static defaultProps: {};
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nProps: any): void;
+    updateText: import("@pie-element/shared-lodash").CancelableFunction<(val: any) => void>;
+    changeText: (event: any) => void | undefined;
+    changeTokens: any;
+    changeMaxSelections: any;
+    apply: any;
+    changeFeedback: any;
+    changePartialScoring: any;
+    onPromptChanged: any;
+    onTeacherInstructionsChanged: any;
+    onRationaleChanged: any;
+    render(): React.JSX.Element;
+}
+export default Design;

package/dist/author/design.js

@@ -0,0 +1,263 @@
+import { generateValidationMessage as e } from "./utils.js";
+import t from "react";
+import n from "prop-types";
+import { Tokenizer as r } from "@pie-lib/text-select";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+import s from "debug";
+import { cloneDeep as c, debounce as l } from "@pie-element/shared-lodash";
+import u from "@mui/material/TextField";
+import { FeedbackConfig as ee, InputContainer as d, NumberTextField as f, layout as p, settings as m } from "@pie-lib/config-ui";
+import h from "@mui/material/Chip";
+import te from "@mui/icons-material/Info";
+import g from "@pie-lib/editable-html-tip-tap";
+import _ from "@mui/material/Tooltip";
+//#region src/author/design.tsx
+var { Panel: ne, toggle: v, radio: y, dropdown: re } = m, b = o(d)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), x = o(g)({ width: "100%" }), S = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), ie = o(u)({ width: "100%" }), ae = o(d)(({ theme: e }) => ({
+	paddingRight: 0,
+	marginRight: 0,
+	position: "relative",
+	"&:after": {
+		position: "absolute",
+		bottom: 0,
+		left: 0,
+		right: 0,
+		height: "1px",
+		content: "\"\"",
+		backgroundColor: e.palette.primary.main
+	},
+	marginBottom: e.spacing(1)
+})), C = o(_)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), oe = o(r)(({ theme: e }) => ({ marginTop: e.spacing(2) })), w = o(h)(({ theme: e }) => ({
+	marginTop: e.spacing(.5),
+	marginRight: e.spacing(2)
+})), se = o("div")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	marginBottom: e.spacing(2.5)
+})), ce = o(f)(({ theme: e }) => ({
+	width: "180px",
+	margin: `${e.spacing(.5)} auto 0`
+})), le = s("@pie-element:select-text:configure"), T = class extends t.Component {
+	static propTypes = {
+		model: n.object.isRequired,
+		configuration: n.object.isRequired,
+		onModelChanged: n.func.isRequired,
+		onConfigurationChanged: n.func.isRequired,
+		imageSupport: n.shape({
+			add: n.func.isRequired,
+			delete: n.func.isRequired
+		}),
+		uploadSoundSupport: n.object
+	};
+	static defaultProps = {};
+	constructor(e) {
+		super(e);
+		let { model: t } = this.props;
+		this.state = { text: t && t.text || "" };
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t } = e;
+		t && t.text && this.setState({ text: t.text });
+	}
+	updateText = l((e) => {
+		this.apply((t) => {
+			t.text = e, t.tokens = [];
+		});
+	}, 200);
+	changeText = (e) => this.updateText(e.target.value);
+	changeTokens = (e, t) => {
+		this.apply((n) => {
+			n.tokens = e, n.mode = t;
+			let r = e.filter((e) => e.correct).length, i = isFinite(n.maxSelections) ? n.maxSelections : 0;
+			n.maxSelections = Math.max(i, r);
+		});
+	};
+	changeMaxSelections = (e, t) => {
+		this.apply((e) => e.maxSelections = t);
+	};
+	apply = (e) => {
+		let { onModelChanged: t, model: n } = this.props, r = c(n);
+		e(r), t(r);
+	};
+	changeFeedback = (e) => {
+		this.apply((t) => t.feedback = e);
+	};
+	changePartialScoring = (e) => {
+		let { onModelChanged: t, model: n } = this.props, r = c(n);
+		r.partialScoring = e, t(r);
+	};
+	onPromptChanged = (e) => {
+		let { onModelChanged: t, model: n } = this.props, r = c(n);
+		r.prompt = e, t(r);
+	};
+	onTeacherInstructionsChanged = (e) => {
+		let { onModelChanged: t, model: n } = this.props, r = c(n);
+		r.teacherInstructions = e, t(r);
+	};
+	onRationaleChanged = (e) => {
+		let { onModelChanged: t, model: n } = this.props;
+		t({
+			...n,
+			rationale: e
+		});
+	};
+	render() {
+		let { text: t } = this.state, { configuration: n, imageSupport: r, model: o, onConfigurationChanged: s, onModelChanged: c, uploadSoundSupport: l } = this.props, { baseInputConfiguration: u = {}, correctAnswer: d = {}, contentDimensions: f = {}, feedback: m = {}, highlightChoices: h = {}, mode: g = {}, partialScoring: _ = {}, prompt: T = {}, rationale: E = {}, selectionCount: D = {}, selections: O = {}, settingsPanelDisabled: ue, scoringType: k = {}, spellCheck: A = {}, studentInstructions: j = {}, teacherInstructions: M = {}, text: N = {}, tokens: P = {}, maxImageWidth: F = {}, maxImageHeight: I = {}, withRubric: L = {}, mathMlOptions: R = {}, language: z = {}, languageChoices: B = {} } = n || {}, { errors: V, extraCSSRules: H, feedbackEnabled: de, promptEnabled: fe, rationaleEnabled: pe, spellCheckEnabled: U, teacherInstructionsEnabled: me, toolbarEditorPosition: he } = o || {}, { prompt: W, rationale: G, selectionsError: K, teacherInstructions: q, tokensError: J } = V || {}, ge = e(n), Y = F && F.prompt, X = I && I.prompt, { tokens: Z } = o;
+		Z ||= [];
+		let Q = { position: he === "top" ? "top" : "bottom" };
+		le("[render] maxSelections:", o.maxSelections);
+		let _e = {
+			partialScoring: _.settings && v(_.label),
+			highlightChoices: h.settings && v(h.label),
+			feedbackEnabled: m.settings && v(m.label),
+			"language.enabled": z.settings && v(z.label, !0),
+			language: z.settings && z.enabled && re(B.label, B.options)
+		}, ve = {
+			teacherInstructionsEnabled: M.settings && v(M.label),
+			studentInstructionsEnabled: j.settings && v(j.label),
+			promptEnabled: T.settings && v(T.label),
+			rationaleEnabled: E.settings && v(E.label),
+			spellCheckEnabled: A.settings && v(A.label),
+			scoringType: k.settings && y(k.label, ["auto", "rubric"]),
+			rubricEnabled: L?.settings && v(L?.label)
+		}, $ = (e = {}) => ({
+			...u,
+			...e
+		});
+		return /* @__PURE__ */ a(p.ConfigLayout, {
+			extraCSSRules: H,
+			dimensions: f,
+			hideSettings: ue,
+			settings: /* @__PURE__ */ i(ne, {
+				model: o,
+				configuration: n,
+				onChangeModel: (e) => c(e),
+				onChangeConfiguration: s,
+				groups: {
+					Settings: _e,
+					Properties: ve
+				}
+			}),
+			children: [
+				me && /* @__PURE__ */ a(b, {
+					label: M.label,
+					children: [/* @__PURE__ */ i(x, {
+						markup: o.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: r,
+						nonEmpty: !1,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(n?.teacherInstructions?.inputConfiguration),
+						spellCheck: U,
+						maxImageWidth: F && F.teacherInstructions || Y,
+						maxImageHeight: I && I.teacherInstructions || X,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), q && /* @__PURE__ */ i(S, { children: q })]
+				}),
+				fe && /* @__PURE__ */ a(b, {
+					label: T.label || "",
+					children: [/* @__PURE__ */ i(x, {
+						markup: o.prompt,
+						onChange: this.onPromptChanged,
+						imageSupport: r,
+						error: W,
+						toolbarOpts: Q,
+						pluginProps: $(n?.prompt?.inputConfiguration),
+						spellCheck: U,
+						maxImageWidth: Y,
+						maxImageHeight: X,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), W && /* @__PURE__ */ i(S, { children: W })]
+				}),
+				N.settings && /* @__PURE__ */ i(b, {
+					label: N.label || "",
+					children: /* @__PURE__ */ i(ie, {
+						variant: "standard",
+						multiline: !0,
+						defaultValue: t,
+						onChange: this.changeText,
+						spellCheck: U
+					})
+				}),
+				P.settings && /* @__PURE__ */ a(ae, {
+					label: P.label || "",
+					children: [/* @__PURE__ */ i(C, {
+						disableFocusListener: !0,
+						disableTouchListener: !0,
+						placement: "right",
+						title: ge,
+						children: /* @__PURE__ */ i(te, {
+							fontSize: "small",
+							color: "primary",
+							style: {
+								position: "absolute",
+								left: "48px",
+								top: "-3px"
+							}
+						})
+					}), /* @__PURE__ */ i(oe, {
+						text: o.text,
+						tokens: Z,
+						onChange: this.changeTokens
+					})]
+				}),
+				J && /* @__PURE__ */ i(S, { children: J }),
+				K && /* @__PURE__ */ i(S, { children: K }),
+				/* @__PURE__ */ a(se, { children: [
+					g.settings && /* @__PURE__ */ i(w, { label: `${g.label}: ${o.mode ? o.mode : "None"}` }),
+					O.settings && /* @__PURE__ */ i(w, { label: `${O.label}: ${Z.length}` }),
+					d.settings && /* @__PURE__ */ i(w, { label: `${d.label}: ${Z.filter((e) => e.correct).length}` }),
+					D.settings && /* @__PURE__ */ i(ce, {
+						min: Z.filter((e) => e.correct).length || 0,
+						label: `${D.label} (0:any)`,
+						max: Z.length,
+						value: o.maxSelections,
+						onChange: this.changeMaxSelections
+					})
+				] }),
+				pe && /* @__PURE__ */ a(b, {
+					label: E.label || "",
+					children: [/* @__PURE__ */ i(x, {
+						markup: o.rationale || "",
+						onChange: this.onRationaleChanged,
+						imageSupport: r,
+						error: G,
+						toolbarOpts: Q,
+						pluginProps: $(n?.rationale?.inputConfiguration),
+						spellCheck: U,
+						maxImageWidth: F && F.rationale || Y,
+						maxImageHeight: I && I.rationale || X,
+						uploadSoundSupport: l,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: R
+					}), G && /* @__PURE__ */ i(S, { children: G })]
+				}),
+				de && /* @__PURE__ */ i(ee, {
+					feedback: o.feedback,
+					onChange: this.changeFeedback,
+					toolbarOpts: Q
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { T as Design, T as default };

package/dist/author/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/select-text/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 SelectTextConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => any;
+    constructor();
+    set model(m: any);
+    set configuration(c: any);
+    connectedCallback(): void;
+    modelChanged(m: 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;
+}