@pie-element/extended-text-entry 15.1.1 → 15.1.2-next.1

package/dist/delivery/annotation/freeform-editor.js

@@ -0,0 +1,143 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Popover as a, TextField as o } from "@mui/material";
+//#region src/delivery/annotation/freeform-editor.tsx
+var s = n(a)(({ theme: e, annotationType: t }) => ({ "& .MuiPaper-root": {
+	overflowX: "unset",
+	overflowY: "unset",
+	marginLeft: "16px",
+	"&::before": {
+		position: "absolute",
+		right: "100%",
+		top: "13px",
+		border: "solid transparent",
+		content: "\"\"",
+		height: 0,
+		width: 0,
+		pointerEvents: "none",
+		borderWidth: "7px",
+		borderRightColor: e.palette.grey[100]
+	},
+	...t === "negative" && { "&::before": { borderRightColor: "rgb(255, 204, 238) !important" } },
+	...t === "positive" && { "&::before": { borderRightColor: "rgb(153, 255, 153) !important" } }
+} })), c = n("div")(({ theme: e, annotationType: t }) => ({
+	width: "200px",
+	overflow: "hidden",
+	borderRadius: "4px",
+	backgroundColor: "#ffffff",
+	border: `4px solid ${e.palette.grey[100]}`,
+	...t === "negative" && { borderColor: "rgb(255, 204, 238) !important" },
+	...t === "positive" && { borderColor: "rgb(153, 255, 153) !important" }
+})), l = n("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	borderTop: `2px solid ${e.palette.grey[100]}`
+})), u = n("div")(({ theme: e, variant: t, annotationType: n }) => ({
+	flexGrow: 1,
+	width: "28%",
+	textAlign: "center",
+	padding: "4px",
+	cursor: "pointer",
+	"&:not(:nth-child(3n))": { borderRight: `1px solid ${e.palette.grey[100]}` },
+	"&:hover": { backgroundColor: e.palette.grey[100] },
+	...t === "positive" && {
+		backgroundColor: "rgb(153, 255, 153) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	},
+	...t === "negative" && {
+		backgroundColor: "rgb(255, 204, 238) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	},
+	...t === "typeChange" && n === "negative" && { "&:hover": { backgroundColor: "rgb(153, 255, 153) !important" } },
+	...t === "typeChange" && n === "positive" && { "&:hover": { backgroundColor: "rgb(255, 204, 238) !important" } }
+})), d = class extends e.Component {
+	static propTypes = {
+		anchorEl: t.object,
+		open: t.bool,
+		offset: t.number,
+		value: t.string,
+		type: t.string,
+		onClose: t.func,
+		onDelete: t.func,
+		onSave: t.func,
+		onTypeChange: t.func
+	};
+	constructor(e) {
+		super(e), this.state = { value: e.value };
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { value: t } = e, { value: n } = this.props;
+		t !== n && this.setState({ value: t });
+	}
+	onValueChange = (e) => this.setState({ value: e.target.value });
+	handleSave = () => {
+		let { value: e, onSave: t, onClose: n, onDelete: r } = this.props, { value: i } = this.state;
+		i === "" && r(), e !== i && t(e, i), this.setState({ value: "" }), n();
+	};
+	handleTypeChange = () => {
+		let { onTypeChange: e, onDelete: t } = this.props, { value: n } = this.state;
+		n === "" ? t() : e(n), this.setState({ value: "" });
+	};
+	render() {
+		let { anchorEl: e, offset: t, onDelete: n, open: a, type: d } = this.props, { value: f } = this.state;
+		return /* @__PURE__ */ r(s, {
+			anchorEl: e,
+			elevation: 2,
+			open: a,
+			onClose: this.handleSave,
+			annotationType: d,
+			style: {
+				marginTop: `${t}px`,
+				transition: "margin-top 2s ease-out"
+			},
+			transitionDuration: {
+				enter: 225,
+				exit: 195
+			},
+			anchorOrigin: {
+				vertical: "top",
+				horizontal: "right"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "left"
+			},
+			children: /* @__PURE__ */ i(c, {
+				annotationType: d,
+				children: [/* @__PURE__ */ r(o, {
+					id: "annotation-editor",
+					style: {
+						padding: "2px 5px",
+						width: "95%"
+					},
+					autoFocus: !0,
+					multiline: !0,
+					rows: 1,
+					maxRows: 4,
+					value: f,
+					onChange: this.onValueChange,
+					InputProps: { disableUnderline: !0 }
+				}), /* @__PURE__ */ i(l, { children: [
+					/* @__PURE__ */ r(u, {
+						onClick: n,
+						children: "Delete"
+					}),
+					/* @__PURE__ */ r(u, {
+						variant: "typeChange",
+						annotationType: d,
+						onClick: this.handleTypeChange,
+						children: d === "negative" ? "Green" : "Pink"
+					}),
+					/* @__PURE__ */ r(u, {
+						onClick: this.handleSave,
+						children: "Save"
+					})
+				] })]
+			})
+		});
+	}
+};
+//#endregion
+export { d as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/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 declare function textContent(value: any): any;
+export declare function isComplete(value: any): boolean;
+export default class RootExtendedTextEntry extends HTMLElement {
+    constructor();
+    setLangAttribute(): void;
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    valueChange(value: any): void;
+    annotationsChange(annotations: any): void;
+    commentChange(comment: any): void;
+    connectedCallback(): void;
+    render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,68 @@
+import e from "./main.js";
+import t from "react";
+import n from "debug";
+import { createRoot as r } from "react-dom/client";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+import { ModelSetEvent as a, SessionChangedEvent as o } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+var s = n("@pie-elements:extended-text-entry"), c = new DOMParser();
+function l(e) {
+	if (typeof e == "string") try {
+		return c.parseFromString(e, "text/html").body.textContent;
+	} catch {
+		return s("tried to parse as dom and failed", e), e;
+	}
+}
+function u(e) {
+	let t = l(e);
+	return t !== void 0 && t.length > 0;
+}
+var d = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._session = null, this._root = null;
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new a(this.tagName.toLowerCase(), !1, !!this._model)), this.render();
+	}
+	set session(e) {
+		this._session = e, this.render();
+	}
+	get session() {
+		return this._session;
+	}
+	valueChange(e) {
+		this._session.value = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), u(e))), this.render();
+	}
+	annotationsChange(e) {
+		this._session.annotations = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), !0)), this.render();
+	}
+	commentChange(e) {
+		this._session.comment = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), u(e))), this.render();
+	}
+	connectedCallback() {
+		this.setAttribute("aria-label", "Written Response Question"), this.setAttribute("role", "region"), this.render();
+	}
+	render() {
+		if (this._model && this._session) {
+			let n = t.createElement(e, {
+				model: this._model,
+				session: this._session,
+				onValueChange: this.valueChange.bind(this),
+				onAnnotationsChange: this.annotationsChange.bind(this),
+				onCommentChange: this.commentChange.bind(this)
+			});
+			this.setLangAttribute(), this._root ||= r(this), this._root.render(n), queueMicrotask(() => {
+				i(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { d as default, u as isComplete, l as textContent };

package/dist/delivery/main.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/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: {
+        onValueChange: PropTypes.Validator<(...args: any[]) => any>;
+        onAnnotationsChange: PropTypes.Validator<(...args: any[]) => any>;
+        onCommentChange: PropTypes.Validator<(...args: any[]) => any>;
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            annotations: PropTypes.Requireable<any[]>;
+            comment: PropTypes.Requireable<string>;
+        }>>>;
+    };
+    changeSessionValue: import("@pie-element/shared-lodash").CancelableFunction<any>;
+    changeSessionComment: import("@pie-element/shared-lodash").CancelableFunction<any>;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,134 @@
+import e from "./annotation/annotation-editor.js";
+import t from "react";
+import n from "prop-types";
+import { debounce as r } from "@pie-element/shared-lodash";
+import i from "debug";
+import a from "@mui/material/Typography";
+import { styled as o } from "@mui/material/styles";
+import s from "@pie-lib/editable-html-tip-tap";
+import * as c from "@pie-lib/render-ui";
+import { Collapsible as l, Feedback as u, PreviewPrompt as d, UiLayout as f, color as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/delivery/main.tsx
+function g(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
+}
+var v = _(f, "UiLayout") || _(w.UiLayout, "UiLayout"), y = _(d, "PreviewPrompt") || _(w.PreviewPrompt, "PreviewPrompt"), b = _(l, "Collapsible") || _(w.Collapsible, "Collapsible"), x = _(u, "Feedback") || _(w.Feedback, "Feedback"), S = c, C = S.default, w = C && typeof C == "object" ? C : S, T = i("@pie-ui:extended-text-entry"), E = o(v)({
+	backgroundColor: p.background(),
+	color: p.text()
+}), D = o(a)(({ theme: e }) => ({
+	width: "100%",
+	color: p.text(),
+	marginBottom: e.spacing(2),
+	fontSize: "inherit"
+})), O = o("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), k = o(s)(({ theme: e }) => ({
+	marginBottom: e.spacing(2),
+	borderRadius: "4px"
+})), A = o("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), j = class extends t.Component {
+	static propTypes = {
+		onValueChange: n.func.isRequired,
+		onAnnotationsChange: n.func.isRequired,
+		onCommentChange: n.func.isRequired,
+		model: n.object,
+		session: n.shape({
+			value: n.string,
+			annotations: n.array,
+			comment: n.string
+		}).isRequired
+	};
+	changeSessionValue = r(this.props.onValueChange, 1500);
+	changeSessionComment = r(this.props.onCommentChange, 1500);
+	render() {
+		let { model: t, session: n, onAnnotationsChange: r } = this.props, { animationsDisabled: i, annotatorMode: a, customKeys: o, dimensions: s, disabled: c, disabledAnnotator: l, equationEditor: u, extraCSSRules: d, feedback: f, mathInput: p, playersToolbarPosition: g, predefinedAnnotations: _, prompt: v, spanishInput: S, specialInput: C, spellCheckEnabled: w, teacherInstructions: j } = t, { annotations: M, comment: N, value: P } = n, { width: F, height: I } = s || {}, L = "40vh", R = { position: g === "top" ? "top" : "bottom" };
+		T("[render] disabled? ", c);
+		let z = /* @__PURE__ */ m(y, {
+			defaultClassName: "teacher-instructions",
+			prompt: j
+		}), B = [];
+		return S && B.push({ language: "spanish" }), C && B.push({ language: "special" }), /* @__PURE__ */ h(E, {
+			extraCSSRules: d,
+			ref: (e) => {
+				this.containerRef = e;
+			},
+			children: [
+				/* @__PURE__ */ m(A, { children: "Constructed Response Question" }),
+				j && /* @__PURE__ */ m(O, { children: i ? z : /* @__PURE__ */ m(b, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: z
+				}) }),
+				v && /* @__PURE__ */ m(D, {
+					component: "span",
+					children: /* @__PURE__ */ m(y, {
+						defaultClassName: "prompt",
+						prompt: t.prompt
+					})
+				}),
+				a ? /* @__PURE__ */ m(e, {
+					text: P || "",
+					annotations: M || [],
+					comment: N || "",
+					predefinedAnnotations: _ || [],
+					onChange: r,
+					onCommentChange: this.changeSessionComment,
+					width: F,
+					height: I,
+					maxHeight: L,
+					disabled: l,
+					disabledMath: !p,
+					customKeys: o,
+					keypadMode: u
+				}) : /* @__PURE__ */ m(k, {
+					className: "response-area-editor",
+					onChange: this.changeSessionValue,
+					markup: P || "",
+					maxWidth: F && F.toString(),
+					minWidth: "100px",
+					minHeight: I && I.toString(),
+					maxHeight: L,
+					disabled: c,
+					highlightShape: !0,
+					toolbarOpts: R,
+					spellCheck: w,
+					charactersLimit: 5e4,
+					autoWidthToolbar: !0,
+					pluginProps: {
+						math: {
+							disabled: !p,
+							customKeys: this.props.model.customKeys,
+							keypadMode: this.props.model.equationEditor,
+							controlledKeypadMode: !1
+						},
+						video: { disabled: !0 },
+						audio: { disabled: !0 },
+						table: { disabled: !0 },
+						textAlign: { disabled: !0 },
+						h3: { disabled: !0 },
+						separateParagraphs: { disabled: !1 },
+						ul_list: { disabled: !0 },
+						ol_list: { disabled: !0 }
+					},
+					languageCharactersProps: B
+				}),
+				f && /* @__PURE__ */ m(x, {
+					correctness: "correct",
+					feedback: f
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { j as default };