@pie-element/inline-dropdown 10.1.2-next.1 → 10.1.2

package/dist/author/defaults.js

@@ -1,130 +0,0 @@
-//#region src/author/defaults.ts
-var e = {
-	model: {
-		alternateResponse: {},
-		choiceRationaleEnabled: !0,
-		choices: {},
-		disabled: !1,
-		displayType: "block",
-		markup: "",
-		mode: "gather",
-		prompt: "",
-		promptEnabled: !0,
-		rationale: "",
-		rationaleEnabled: !0,
-		shuffle: !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 }
-		},
-		prompt: {
-			settings: !0,
-			label: "Prompt",
-			required: !1,
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 }
-			}
-		},
-		responseAreaInputConfiguration: { inputConfiguration: {
-			audio: { disabled: !0 },
-			video: { disabled: !0 },
-			image: { disabled: !0 },
-			table: { disabled: !0 },
-			ul_list: { disabled: !0 },
-			ol_list: { disabled: !0 }
-		} },
-		settingsPanelDisabled: !1,
-		spellCheck: {
-			label: "Spellcheck",
-			settings: !1,
-			enabled: !0
-		},
-		lockChoiceOrder: {
-			settings: !0,
-			label: "Lock Choice Order"
-		},
-		partialScoring: {
-			settings: !1,
-			label: "Allow Partial Scoring"
-		},
-		rationale: {
-			settings: !0,
-			label: "Rationale",
-			required: !1,
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 },
-				textAlign: { disabled: !0 }
-			}
-		},
-		teacherInstructions: {
-			settings: !0,
-			label: "Teacher Instructions",
-			required: !1,
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 }
-			}
-		},
-		template: { inputConfiguration: {
-			audio: { disabled: !1 },
-			video: { disabled: !1 },
-			image: { disabled: !1 }
-		} },
-		choiceRationale: {
-			settings: !0,
-			label: "Choice Rationale"
-		},
-		toolbarEditorPosition: {
-			settings: !1,
-			label: "Toolbar Editor Position"
-		},
-		maxResponseAreas: 10,
-		maxResponseAreaChoices: 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: []
-		}
-	}
-};
-//#endregion
-export { e as default };

package/dist/author/index.d.ts

@@ -1,43 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/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 InlineDropdown extends HTMLElement {
-    static prepareModel: (model?: {}) => {
-        slateMarkup: any;
-        markup: string;
-        alternateResponse: {};
-        choiceRationaleEnabled: boolean;
-        choices: {};
-        disabled: boolean;
-        displayType: string;
-        mode: string;
-        prompt: string;
-        promptEnabled: boolean;
-        rationale: string;
-        rationaleEnabled: boolean;
-        shuffle: boolean;
-        studentInstructionsEnabled: boolean;
-        teacherInstructions: string;
-        teacherInstructionsEnabled: boolean;
-        toolbarEditorPosition: 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;
-}

package/dist/author/index.js

@@ -1,83 +0,0 @@
-import e from "./main.js";
-import t from "./defaults.js";
-import { createSlateMarkup as n, processMarkup as r } from "./markupUtils.js";
-import i from "react";
-import { createRoot as a } from "react-dom/client";
-import { defaults as o } from "@pie-element/shared-lodash";
-import { DeleteImageEvent as s, DeleteSoundEvent as c, InsertImageEvent as l, InsertSoundEvent as u, ModelUpdatedEvent as d } from "@pie-element/shared-configure-events";
-import f from "debug";
-//#region src/author/index.ts
-var p = f("multiple-choice:configure"), m = class f extends HTMLElement {
-	static prepareModel = (e = {}) => {
-		let i = {
-			...t.model,
-			...e
-		}, a = e.slateMarkup || n(i.markup, i.choices), o = r(a);
-		return {
-			...i,
-			slateMarkup: a,
-			markup: o
-		};
-	};
-	constructor() {
-		super(), this._root = null, this._model = f.prepareModel(), this._configuration = t.configuration, this.onModelChanged = this.onModelChanged.bind(this), this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
-	}
-	set model(e) {
-		this._model = f.prepareModel(e), this._render();
-	}
-	set configuration(e) {
-		this._configuration = o(e, t.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 d(this._model, t));
-	}
-	onModelChanged(e, t) {
-		this._model = f.prepareModel(e), this._render(), this.dispatchModelUpdated(t);
-	}
-	onConfigurationChanged(e) {
-		this._configuration = e, this._render();
-	}
-	insertImage(e) {
-		this.dispatchEvent(new l(e));
-	}
-	onDeleteImage(e, t) {
-		this.dispatchEvent(new s(e, t));
-	}
-	insertSound(e) {
-		this.dispatchEvent(new u(e));
-	}
-	onDeleteSound(e, t) {
-		this.dispatchEvent(new c(e, t));
-	}
-	_render() {
-		p("_render");
-		let t = i.createElement(e, {
-			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(t);
-	}
-	disconnectedCallback() {
-		this._root && this._root.unmount();
-	}
-};
-//#endregion
-export { m as default };

package/dist/author/inline-dropdown-toolbar.d.ts

@@ -1,48 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/configure/src/inline-dropdown-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';
-declare class RespAreaToolbar extends React.Component {
-    static propTypes: {
-        node: PropTypes.Requireable<object>;
-        pos: PropTypes.Requireable<number>;
-        uploadSoundSupport: PropTypes.Requireable<object>;
-        onDone: PropTypes.Requireable<(...args: any[]) => any>;
-        choices: PropTypes.Requireable<any[]>;
-        onAddChoice: PropTypes.Validator<(...args: any[]) => any>;
-        editorCallback: PropTypes.Requireable<(...args: any[]) => any>;
-        onRemoveChoice: PropTypes.Validator<(...args: any[]) => any>;
-        onSelectChoice: PropTypes.Validator<(...args: any[]) => any>;
-        onToolbarDone: PropTypes.Validator<(...args: any[]) => any>;
-        editor: PropTypes.Requireable<object>;
-        spellCheck: PropTypes.Requireable<boolean>;
-    };
-    clickedInside: boolean;
-    preventDone: boolean;
-    state: {
-        respAreaMarkup: string;
-        editedChoiceIndex: number;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    commitPendingEdit: any;
-    onRespAreaChange: any;
-    onAddChoice: any;
-    onDone: any;
-    onSelectChoice: any;
-    onRemoveChoice: any;
-    onEditChoice: any;
-    onKeyDown: any;
-    onBlur: any;
-    onClickInside: any;
-    render(): React.JSX.Element | null;
-}
-declare const StyledRespAreaToolbar: typeof RespAreaToolbar;
-export default StyledRespAreaToolbar;

package/dist/author/inline-dropdown-toolbar.js

@@ -1,268 +0,0 @@
-import { getPluginProps as e } from "./utils.js";
-import t from "react";
-import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
-import r from "react-dom";
-import i from "prop-types";
-import { isEmpty as a, isEqual as o } from "@pie-element/shared-lodash";
-import { color as s } from "@pie-lib/render-ui";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { styled as u } from "@mui/material/styles";
-import d from "@pie-lib/editable-html-tip-tap";
-import f from "@mui/icons-material/Add";
-import p from "@mui/icons-material/Check";
-import m from "@mui/icons-material/Close";
-import h from "@mui/icons-material/Edit";
-import g from "@mui/material/IconButton";
-//#region src/author/inline-dropdown-toolbar.tsx
-var _ = u("div")(({ theme: e }) => ({
-	display: "flex",
-	alignItems: "flex-start",
-	position: "relative",
-	background: e.palette.common.white,
-	borderBottom: `1px solid ${e.palette.grey[400]}`,
-	"&:last-child": { borderRadius: "0 0 4px 4px" }
-})), v = u("div")(({ theme: e }) => ({
-	display: "flex",
-	justifyContent: "center",
-	color: e.palette.common.white,
-	fontSize: e.typography.fontSize,
-	fontStyle: "normal",
-	position: "absolute",
-	transform: "translate(0, -50%)",
-	backgroundColor: s.correct(),
-	borderRadius: "50%",
-	top: e.spacing(2),
-	left: e.spacing(1),
-	zIndex: 3
-})), y = u("div")(({ theme: e, correct: t }) => ({
-	flex: 1,
-	padding: e.spacing(.75),
-	paddingLeft: e.spacing(3.5),
-	...t && { background: s.correctSecondary() },
-	"& p": { margin: 0 }
-})), b = u("div")(({ theme: e }) => ({
-	margin: e.spacing(.5),
-	display: "flex"
-})), x = u(g)(({ theme: e }) => ({
-	fontSize: e.typography.fontSize,
-	padding: e.spacing(.5),
-	color: e.palette.common.black
-})), S = class extends t.Component {
-	static propTypes = {
-		correct: i.bool.isRequired,
-		onClick: i.func.isRequired,
-		onRemoveChoice: i.func.isRequired,
-		onEditChoice: i.func.isRequired,
-		value: i.string.isRequired
-	};
-	onRemoveClick = (e) => {
-		let { onRemoveChoice: t } = this.props;
-		e.preventDefault(), e.stopPropagation(), t();
-	};
-	onEditClick = (e) => {
-		let { onEditChoice: t } = this.props;
-		e.preventDefault(), e.stopPropagation(), t();
-	};
-	render() {
-		let { correct: e, onClick: t, value: n } = this.props;
-		return /* @__PURE__ */ l(_, { children: [
-			e && /* @__PURE__ */ c(v, {
-				onClick: t,
-				children: /* @__PURE__ */ c(p, { fontSize: "inherit" })
-			}),
-			/* @__PURE__ */ c(y, {
-				correct: e,
-				onClick: t,
-				dangerouslySetInnerHTML: { __html: n }
-			}),
-			/* @__PURE__ */ l(b, { children: [/* @__PURE__ */ c(x, {
-				onClick: this.onEditClick,
-				size: "small",
-				"aria-label": "Edit",
-				children: /* @__PURE__ */ c(h, { fontSize: "inherit" })
-			}), /* @__PURE__ */ c(x, {
-				onClick: this.onRemoveClick,
-				size: "small",
-				"aria-label": "Remove",
-				children: /* @__PURE__ */ c(m, { fontSize: "inherit" })
-			})] })
-		] });
-	}
-}, C = (e) => {
-	let t = document.createElement("div");
-	return t.innerHTML = (e || "").trim(), t;
-}, w = u("div")(({ theme: e }) => ({
-	boxShadow: e.shadows[2],
-	borderRadius: "4px",
-	width: "400px"
-})), T = u(d)(({ theme: e }) => ({
-	borderRadius: "4px",
-	backgroundColor: e.palette.common.white,
-	"& [data-slate-editor=\"true\"]": { minHeight: "initial !important" }
-})), E = u(g)(({ theme: e }) => ({
-	fontSize: e.typography.fontSize + 2,
-	padding: e.spacing(.5),
-	color: e.palette.common.black,
-	position: "absolute",
-	top: "50%",
-	right: e.spacing(2),
-	transform: "translate(0, -50%)"
-})), D = u("div")({
-	display: "flex",
-	flexDirection: "column",
-	"& > div:last-child": { border: "none" }
-}), O = u("div")(({ theme: e }) => ({
-	padding: e.spacing(.5),
-	position: "relative"
-})), k = class extends t.Component {
-	static propTypes = {
-		node: i.object,
-		pos: i.number,
-		uploadSoundSupport: i.object,
-		onDone: i.func,
-		choices: i.array,
-		onAddChoice: i.func.isRequired,
-		editorCallback: i.func,
-		onRemoveChoice: i.func.isRequired,
-		onSelectChoice: i.func.isRequired,
-		onToolbarDone: i.func.isRequired,
-		editor: i.object,
-		spellCheck: i.bool
-	};
-	clickedInside = !1;
-	preventDone = !1;
-	state = {
-		respAreaMarkup: "",
-		editedChoiceIndex: -1
-	};
-	componentDidMount() {
-		let { editor: e } = this.props, t = e.view.nodeDOM(e.state.selection.from);
-		if (t?.nodeType === 1) {
-			let e = t.getBoundingClientRect(), n = t.closest(".tiptap").getBoundingClientRect(), r = e.top - e.height, i = e.left - n.left;
-			this.setState({ toolbarStyle: {
-				position: "absolute",
-				top: `${r + e.height + 40}px`,
-				left: `${i + 25}px`
-			} });
-		}
-	}
-	componentDidUpdate() {
-		n(r.findDOMNode(this));
-	}
-	componentWillUnmount() {
-		this.commitPendingEdit();
-	}
-	commitPendingEdit = () => {
-		let { editedChoiceIndex: e } = this.state;
-		e < 0 || !this.editorRef?.getHTML || (this.preventDone = !1, this.onDone(this.editorRef.getHTML() || ""));
-	};
-	onRespAreaChange = (e) => {
-		this.setState({ respAreaMarkup: e });
-	};
-	onAddChoice = () => {
-		let { editor: e } = this.props, { tr: t } = e.state;
-		t.isDone = !0, e.view.dispatch(t);
-	};
-	onDone = (e) => {
-		let { choices: t, node: n, editor: r, onAddChoice: i, onToolbarDone: o } = this.props, { editedChoiceIndex: s } = this.state, c = C(e).textContent.trim();
-		s >= 0 && t?.[s]?.correct && r.commands.updateAttributes("inline_dropdown", { value: e }), a(c) || (i(n.attrs.index, e, s), r.commands.refreshResponseArea()), this.setState({ editedChoiceIndex: -1 });
-	};
-	onSelectChoice = (e, t) => {
-		let { node: n, editor: r, onToolbarDone: i, onSelectChoice: a } = this.props;
-		r.commands.updateAttributes("inline_dropdown", { value: e }), a(t), r.commands.refreshResponseArea();
-	};
-	onRemoveChoice = (e, t) => {
-		let { node: n, editor: r, onToolbarDone: i, onRemoveChoice: a } = this.props;
-		o(e, n.attrs.value) && r.commands.updateAttributes("inline_dropdown", { value: null }), a(t), r.commands.refreshResponseArea();
-	};
-	onEditChoice = (e, t) => {
-		let { editedChoiceIndex: n } = this.state;
-		if (this.clickedInside = !0, this.preventDone = !0, n >= 0) {
-			let e = this.editorRef.getHTML() || "";
-			this.onDone(e);
-		}
-		this.onRespAreaChange(e), this.setState({ editedChoiceIndex: t });
-	};
-	onKeyDown = (e) => {
-		if (e.key === "Enter") {
-			let e = this.editorRef.getHTML() || "";
-			return this.onDone(e), this.preventDone = !0, !0;
-		}
-		return !1;
-	};
-	onBlur = () => {
-		if (this.clickedInside) {
-			this.clickedInside = !1;
-			return;
-		}
-		let { editedChoiceIndex: e } = this.state;
-		if (e >= 0) {
-			this.commitPendingEdit();
-			return;
-		}
-		this.onAddChoice();
-	};
-	onClickInside = () => {
-		this.clickedInside = !0;
-	};
-	render() {
-		let { choices: t, spellCheck: n, uploadSoundSupport: r, mathMlOptions: i = {}, baseInputConfiguration: a = {}, responseAreaInputConfiguration: o = {} } = this.props, { respAreaMarkup: s, toolbarStyle: u } = this.state;
-		return u ? /* @__PURE__ */ l(w, {
-			"data-inline-dropdown-toolbar": "",
-			style: {
-				...u,
-				backgroundColor: "#E0E1E6",
-				zIndex: 1
-			},
-			onMouseDown: this.onClickInside,
-			children: [/* @__PURE__ */ l(O, { children: [/* @__PURE__ */ c(T, {
-				editorRef: (e) => {
-					e && (this.editorRef = e, this.props.editorCallback?.(e));
-				},
-				autoFocus: !0,
-				autoSave: !0,
-				toolbarOpts: {
-					position: "top",
-					alwaysVisible: !1,
-					showDone: !1,
-					doneOn: "blur"
-				},
-				markup: s,
-				onKeyDown: this.onKeyDown,
-				languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
-				onChange: (e) => {
-					this.preventDone || this.onRespAreaChange(e);
-				},
-				onDone: (e) => {
-					if (this.preventDone) {
-						this.preventDone = !1;
-						return;
-					}
-					this.onDone(e);
-				},
-				onBlur: (e) => {
-					let t = !!(e.relatedTarget && e.relatedTarget.closest(".insert-character-dialog")), n = !!(e.relatedTarget && e.relatedTarget.closest("[aria-label=\"Done\"]"));
-					e.relatedTarget && (this.preventDone = t || n, (t || n) && (this.clickedInside = !0)), this.onBlur();
-				},
-				placeholder: "Add Choice",
-				pluginProps: e(o?.inputConfiguration, a),
-				spellCheck: n,
-				uploadSoundSupport: r,
-				mathMlOptions: i
-			}), /* @__PURE__ */ c(E, {
-				onClick: () => this.onAddChoice(),
-				size: "small",
-				"aria-label": "Add",
-				children: /* @__PURE__ */ c(f, { fontSize: "inherit" })
-			})] }), t && /* @__PURE__ */ c(D, { children: t.map(({ label: e, correct: t }, n) => /* @__PURE__ */ c(S, {
-				onClick: () => this.onSelectChoice(e, n),
-				onRemoveChoice: () => this.onRemoveChoice(e, n),
-				onEditChoice: () => this.onEditChoice(e, n),
-				value: e,
-				correct: t
-			}, n)) })]
-		}) : null;
-	}
-};
-//#endregion
-export { k as default };

package/dist/author/main.d.ts

@@ -1,49 +0,0 @@
-/**
- * @synced-from pie-elements/packages/inline-dropdown/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<PropTypes.InferProps<{
-            add: PropTypes.Validator<(...args: any[]) => any>;
-            delete: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-    };
-    state: {
-        warning: {
-            open: boolean;
-        };
-    };
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nProps: any): void;
-    componentDidUpdate(): void;
-    onModelChange: any;
-    onPromptChanged: any;
-    onRationaleChanged: any;
-    onChoiceRationaleChanged: any;
-    onTeacherInstructionsChanged: any;
-    onMarkupChanged: any;
-    onCheck: any;
-    validateResponseAreaClose: any;
-    onChange: any;
-    onAddChoice: any;
-    onRemoveChoice: any;
-    onSelectChoice: any;
-    render(): React.JSX.Element;
-}
-export default Main;