@pie-element/drag-in-the-blank 10.2.0-beta.0 → 10.2.0-next.18

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/choice.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/choice.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 const BlankContent: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        choice: PropTypes.Validator<object>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveChoice: PropTypes.Validator<(...args: any[]) => any>;
+        error: PropTypes.Requireable<boolean>;
+        instanceId: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+    };
+};
+export default BlankContent;

package/dist/author/choice.js

@@ -0,0 +1,89 @@
+import { choiceIsEmpty as e } from "./markupUtils.js";
+import "react";
+import { color as t } from "@pie-lib/render-ui";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import { useDraggable as o } from "@dnd-kit/core";
+import s from "@mui/icons-material/MoreVert";
+import c from "@mui/icons-material/Delete";
+//#region src/author/choice.tsx
+var l = ({ style: e }) => /* @__PURE__ */ i("span", {
+	style: e,
+	children: [/* @__PURE__ */ r(s, { style: { margin: "0 -16px" } }), /* @__PURE__ */ r(s, {})]
+});
+l.propTypes = { style: n.object };
+var u = a("div", { shouldForwardProp: (e) => !["error", "isDragging"].includes(e) })(({ theme: e, error: n }) => ({
+	display: "inline-flex",
+	minWidth: "178px",
+	minHeight: "36px",
+	background: e.palette.common.white,
+	boxSizing: "border-box",
+	borderRadius: "3px",
+	overflow: "hidden",
+	position: "relative",
+	padding: "8px 35px 8px 35px",
+	cursor: "grab",
+	border: `1px solid ${n ? "#f44336" : t.border()}`,
+	"& img": { display: "flex" },
+	"& p": { margin: 0 },
+	"& mjx-frac": { fontSize: "120% !important" }
+})), d = a(c)(({ theme: e }) => ({
+	position: "absolute",
+	top: "6px",
+	right: "0",
+	color: t.text(),
+	zIndex: 2,
+	"&:hover": {
+		cursor: "pointer",
+		color: e.palette.common.black
+	}
+})), f = (n) => {
+	let { choice: a, onClick: s, onRemoveChoice: c, error: f, instanceId: p, disabled: m } = n, { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = o({
+		id: `choice-${a.id}-${p || "default"}`,
+		data: {
+			type: "drag-in-the-blank-choice",
+			id: a.id,
+			value: a,
+			instanceId: p
+		},
+		disabled: m || e(a)
+	}), y = (t) => {
+		if (e(a)) {
+			t.preventDefault(), alert("You need to define a value for an answer choice before it can be associated with a response area.");
+			return;
+		}
+	};
+	return /* @__PURE__ */ i(u, {
+		ref: _,
+		error: f,
+		isDragging: v,
+		onClick: s,
+		...h,
+		...g,
+		onDragStart: y,
+		children: [
+			/* @__PURE__ */ r(l, { style: {
+				position: "absolute",
+				top: "6px",
+				left: "15px",
+				color: t.borderGray(),
+				zIndex: 2
+			} }),
+			/* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: a.value } }),
+			/* @__PURE__ */ r(d, { onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), c(e);
+			} })
+		]
+	});
+};
+f.propTypes = {
+	choice: n.object.isRequired,
+	onClick: n.func,
+	onRemoveChoice: n.func.isRequired,
+	error: n.bool,
+	instanceId: n.string,
+	disabled: n.bool
+};
+//#endregion
+export { f as BlankContent, f as default };

package/dist/author/choices.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/choices.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 Choices extends React.Component {
+    static propTypes: {
+        duplicates: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<string>;
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        pluginProps: PropTypes.Requireable<object>;
+        maxChoices: PropTypes.Requireable<number>;
+        uploadSoundSupport: PropTypes.Requireable<object>;
+        maxImageWidth: PropTypes.Requireable<number>;
+        maxImageHeight: PropTypes.Requireable<number>;
+        maxLength: PropTypes.Requireable<number>;
+    };
+    state: {
+        warning: {
+            open: boolean;
+        };
+    };
+    preventDone: boolean;
+    wrapperRef: React.RefObject<unknown>;
+    componentDidUpdate(): void;
+    onChoiceChanged: any;
+    onChoiceDone: any;
+    onChoiceFocus: (id: any) => void;
+    onAddChoice: any;
+    onChoiceRemove: any;
+    getVisibleChoices: any;
+    render(): React.JSX.Element;
+}
+export default Choices;

package/dist/author/choices.js

@@ -0,0 +1,175 @@
+import { choiceIsEmpty as e } from "./markupUtils.js";
+import { BlankContent as t } from "./choice.js";
+import n from "react";
+import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { styled as s } from "@mui/material/styles";
+import c from "@pie-lib/editable-html-tip-tap";
+import { AlertDialog as l } from "@pie-lib/config-ui";
+import u from "@mui/material/Button";
+//#region src/author/choices.tsx
+var d = s("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	marginBottom: e.spacing(1.5)
+})), f = s(u)({ marginLeft: "auto" }), p = s("div")(({ theme: e }) => ({
+	alignItems: "flex-start",
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "space-evenly",
+	marginTop: e.spacing(1),
+	"& > *": { margin: e.spacing(1) }
+})), m = s("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingBottom: e.spacing(2)
+})), h = class extends n.Component {
+	static propTypes = {
+		duplicates: i.bool,
+		error: i.string,
+		model: i.object.isRequired,
+		onChange: i.func.isRequired,
+		toolbarOpts: i.object,
+		pluginProps: i.object,
+		maxChoices: i.number,
+		uploadSoundSupport: i.object,
+		maxImageWidth: i.number,
+		maxImageHeight: i.number,
+		maxLength: i.number
+	};
+	state = { warning: { open: !1 } };
+	preventDone = !1;
+	wrapperRef = n.createRef(null);
+	componentDidUpdate() {
+		this.focusedNodeRef && this.focusedNodeRef.focus("end"), r(this.wrapperRef.current);
+	}
+	onChoiceChanged = (t, n, r) => {
+		let { onChange: i, model: a } = this.props, { choices: o, correctResponse: s, alternateResponses: c } = a;
+		if (e({ value: t }) && e({ value: n })) return;
+		if ((o || []).find((e) => e.value === n && e.id !== r)) {
+			t === "" && i((o || []).filter((e) => e.id !== r)), this.setState({ warning: {
+				open: !0,
+				text: "Identical answer choices are not allowed and the changes will be discarded."
+			} });
+			return;
+		}
+		let l = o?.map((e) => e.id === r ? {
+			...e,
+			value: n
+		} : e) || [];
+		if (!e({ value: n })) {
+			i(l);
+			return;
+		}
+		let u = !1;
+		if (s && Object.keys(s).forEach((e) => {
+			s[e] === r && (u = !0);
+		}), c && !u && Object.values(c).forEach((e) => {
+			e.indexOf(r) >= 0 && (u = !0);
+		}), u) {
+			this.setState({ warning: {
+				open: !0,
+				text: "Answer choices cannot be blank and the changes will be discarded."
+			} });
+			return;
+		}
+		i(l);
+	};
+	onChoiceDone = (t, n) => {
+		let { onChange: r, model: i } = this.props, { choices: a } = i, o = (a || []).find((e) => e.id === t), s = n === void 0 ? o && o.value : n;
+		if (!o || !e({ value: s })) {
+			o && o.value !== s && r((a || []).map((e) => e.id === t ? {
+				...e,
+				value: s
+			} : e)), this.setState({ focusedEl: void 0 });
+			return;
+		}
+		r((a || []).filter((e) => e.id !== t)), this.setState({
+			focusedEl: void 0,
+			warning: {
+				open: !0,
+				text: "Answer choices cannot be blank."
+			}
+		});
+	};
+	onChoiceFocus = (e) => this.setState({ focusedEl: e });
+	onAddChoice = () => {
+		let { model: { choices: e }, onChange: t } = this.props, n = `${(e.length > 0 ? Math.max(...e.map((e) => parseInt(e.id, 10) || 0)) : -1) + 1}`;
+		this.setState({ focusedEl: n }, () => {
+			t([...e, {
+				id: n,
+				value: ""
+			}]);
+		});
+	};
+	onChoiceRemove = (e) => {
+		let { onChange: t, model: { choices: n } } = this.props;
+		t((n || []).filter((t) => t.id !== e));
+	};
+	getVisibleChoices = () => {
+		let { duplicates: e, model: { choices: t, correctResponse: n } } = this.props;
+		return t ? e ? t : t.filter((e) => !(n && Object.values(n).includes(e.id))) : [];
+	};
+	render() {
+		let { focusedEl: e, warning: n } = this.state, { duplicates: r, error: i, mathMlOptions: s = {}, maxChoices: u, model: { choices: h }, toolbarOpts: g, uploadSoundSupport: _, imageSupport: v = {}, pluginProps: y = {}, maxImageWidth: b, maxImageHeight: x, maxLength: S } = this.props, C = this.getVisibleChoices() || [];
+		return /* @__PURE__ */ o(d, {
+			ref: this.wrapperRef,
+			children: [
+				/* @__PURE__ */ a(f, {
+					variant: "contained",
+					color: "primary",
+					onClick: this.onAddChoice,
+					disabled: u && h && u === h.length,
+					children: "Add Choice"
+				}),
+				/* @__PURE__ */ a(p, { children: C.map((n, o) => !n || !n.id ? null : e === n.id ? /* @__PURE__ */ a("div", {
+					style: {
+						minWidth: "100%",
+						zIndex: "100"
+					},
+					children: /* @__PURE__ */ a(c, {
+						ref: (e) => this.focusedNodeRef = e,
+						autoFocus: !0,
+						imageSupport: v,
+						markup: n.value,
+						pluginProps: y,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						onChange: (e) => {
+							this.preventDone || this.onChoiceChanged(n.value, e, n.id);
+						},
+						onDone: (e) => {
+							this.preventDone || this.onChoiceDone(n.id, e);
+						},
+						onBlur: (e) => {
+							let t = e.relatedTarget && e.relatedTarget.closest(".insert-character-dialog");
+							this.preventDone = t;
+						},
+						disableUnderline: !0,
+						toolbarOpts: g,
+						uploadSoundSupport: _,
+						mathMlOptions: s,
+						maxImageHeight: x,
+						maxImageWidth: b,
+						charactersLimit: S
+					})
+				}, o) : /* @__PURE__ */ a(t, {
+					duplicates: r,
+					choice: n,
+					error: i,
+					onClick: () => this.onChoiceFocus(n.id),
+					onRemoveChoice: () => this.onChoiceRemove(n.id)
+				}, o)) }),
+				i && /* @__PURE__ */ a(m, { children: i }),
+				/* @__PURE__ */ a(l, {
+					open: n.open,
+					title: "Warning",
+					text: n.text,
+					onConfirm: () => this.setState({ warning: { open: !1 } })
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { h as Choices, h as default };

package/dist/author/defaults.d.ts

@@ -0,0 +1,171 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/defaults.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: {
+        choices: never[];
+        choicesPosition: string;
+        correctResponse: {};
+        disabled: boolean;
+        duplicates: boolean;
+        markup: string;
+        mode: string;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            h3: {
+                disabled: boolean;
+            };
+            blockquote: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        choicesPosition: {
+            settings: boolean;
+            label: string;
+        };
+        prompt: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        addChoice: {
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+        };
+        duplicates: {
+            settings: boolean;
+            label: string;
+        };
+        lockChoiceOrder: {
+            settings: boolean;
+            label: string;
+        };
+        partialScoring: {
+            settings: boolean;
+            label: string;
+        };
+        rationale: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        settingsPanelDisabled: boolean;
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        minChoices: number;
+        maxResponseAreas: number;
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            choice: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+            rationale: number;
+            choice: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+        maxLength: number;
+    };
+};
+export default _default;

package/dist/author/defaults.js

@@ -0,0 +1,123 @@
+//#region src/author/defaults.ts
+var e = {
+	model: {
+		choices: [],
+		choicesPosition: "below",
+		correctResponse: {},
+		disabled: !1,
+		duplicates: !0,
+		markup: "",
+		mode: "gather",
+		prompt: "",
+		promptEnabled: !0,
+		rationale: "",
+		rationaleEnabled: !0,
+		studentInstructionsEnabled: !0,
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		toolbarEditorPosition: "bottom"
+	},
+	configuration: {
+		baseInputConfiguration: {
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			h3: { disabled: !0 },
+			blockquote: { disabled: !0 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		choicesPosition: {
+			settings: !0,
+			label: "Choices Position"
+		},
+		prompt: {
+			settings: !0,
+			label: "Prompt",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		addChoice: { inputConfiguration: {
+			audio: { disabled: !0 },
+			video: { disabled: !0 },
+			image: { disabled: !1 }
+		} },
+		duplicates: {
+			settings: !0,
+			label: "Duplicates"
+		},
+		lockChoiceOrder: {
+			settings: !0,
+			label: "Lock Choice Order"
+		},
+		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,
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		minChoices: 2,
+		maxResponseAreas: 10,
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300,
+			choice: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300,
+			rationale: 300,
+			choice: 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: []
+		},
+		maxLength: 200
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/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 DragInTheBlank extends HTMLElement {
+    static prepareModel: (model?: {}) => {
+        slateMarkup: any;
+        markup: string;
+        correctResponse: any;
+        choices: never[];
+        choicesPosition: string;
+        disabled: boolean;
+        duplicates: boolean;
+        mode: string;
+        prompt: string;
+        promptEnabled: boolean;
+        rationale: string;
+        rationaleEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    constructor();
+    set model(m: 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;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}