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

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

@@ -1,143 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/**
- * @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

@@ -1,68 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/**
- * @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

@@ -1,134 +0,0 @@
-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 };