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

package/dist/browser/editor-runtime/main-Cjb3jy0r.js

@@ -0,0 +1,713 @@
+import { o as e, t } from "./browser-jJGxjKdp.js";
+import { B as n, F as r, S as i, Y as a, _ as o, a as s, g as c, l, n as u, t as d, u as f, x as p, y as m } from "./dist-DM8p9IhX.js";
+import h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/delivery/annotation/annotation-utils.ts
+var v = /* @__PURE__ */ e(a(), 1), y = /* @__PURE__ */ e(t(), 1), b = (e, t, n) => {
+	let r = n || [], i = r.reduce((e, t) => e + t.textContent.length, 0), a = !0;
+	if (i > t) return !1;
+	for (e &&= (e.nodeType === 3 && e.parentNode && !e.parentNode.hasAttribute("data-ann-id") && r.push(e), e.firstChild); e && a;) a = b(e, t, r), e = e.nextSibling;
+	return r;
+}, x = (e, t, n) => {
+	let r = b(n, t), i = [], a = 0;
+	return r.forEach((n) => {
+		let r = a + n.textContent.length;
+		[e, t].forEach((e) => {
+			a <= e && e < r && i.push({
+				node: n,
+				offset: e - a
+			});
+		}), a = r;
+	}), i;
+}, S = (e) => {
+	let { commonAncestorContainer: t, startContainer: n, endContainer: r, startOffset: i, endOffset: a } = e, o = [], s = !1, c = !1, l = "", u = (e) => {
+		let { nodeValue: t, childNodes: d } = e;
+		e === n && e === r ? (t && (l += t.substring(i, a)), s = c = !0) : e === n ? (t && (l += t.substring(i)), s = !0) : e === r ? (t && (l += t.substring(0, a)), c = !0) : e && e.nodeType === 3 && e.parentNode && !e.parentNode.hasAttribute("data-ann-id") && t && s && !c && (l += t, o.push(e)), d.forEach((e) => {
+			if (!c) u(e);
+			else return;
+		});
+	};
+	return u(t), [o, l];
+}, C = (e) => {
+	let t = document.createElement("SPAN");
+	return e.surroundContents(t), t;
+}, w = (e) => {
+	if (e.startContainer === e.endContainer) return [C(e)];
+	let [t] = S(e), n = document.createRange();
+	n.selectNodeContents(e.startContainer), n.setStart(e.startContainer, e.startOffset);
+	let r = C(n), i = document.createRange();
+	i.selectNode(e.endContainer), i.setEnd(e.endContainer, e.endOffset);
+	let a = C(i);
+	return [
+		r,
+		...t.map((e) => {
+			let t = document.createElement("SPAN");
+			return e.parentNode.insertBefore(t, e), t.appendChild(e), t;
+		}),
+		a
+	];
+}, T = (e, t) => {
+	let n = document.createRange();
+	n.setStart(t, 0), n.setEnd(e.startContainer, e.startOffset);
+	let [, r] = S(n), [, i] = S(e), a = r.length;
+	return {
+		quote: i,
+		start: a,
+		end: a + i.length
+	};
+}, E = (e, t) => {
+	(e || []).forEach((e) => {
+		let t = e.parentNode, n = e.childNodes, r = n.length;
+		if (r > 0) for (let i = 0; i < r; i++) t.insertBefore(n[0], e);
+		else t.insertBefore(document.createTextNode(e.textContent), e);
+		t.removeChild(e);
+	}), t.normalize();
+}, D = () => {
+	document.getSelection ? (document.getSelection().removeAllRanges(), document.getSelection().addRange(document.createRange())) : window.getSelection ? window.getSelection().removeAllRanges ? (window.getSelection().removeAllRanges(), window.getSelection().addRange(document.createRange())) : window.getSelection().empty && window.getSelection().empty() : document.selection && document.selection.empty();
+}, O = (e) => e.length >= 20 || e.search(/\n|\r|\r\n/) !== -1, k = (e) => Array.from(document.querySelectorAll(`[data-id='${e}']`)), A = (e) => document.querySelector(`[data-ann-id='${e}']`), j = n(m)(({ annotationType: e }) => ({ "& .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: i.border()
+	},
+	...e === "negative" && { "&::before": { borderRightColor: "rgb(255, 204, 238) !important" } },
+	...e === "positive" && { "&::before": { borderRightColor: "rgb(153, 255, 153) !important" } }
+} })), M = n("div")(({ annotationType: e }) => ({
+	width: "200px",
+	overflow: "hidden",
+	borderRadius: "4px",
+	backgroundColor: i.white(),
+	border: `4px solid ${i.border()}`,
+	...e === "negative" && { borderColor: "rgb(255, 204, 238) !important" },
+	...e === "positive" && { borderColor: "rgb(153, 255, 153) !important" }
+})), ee = n("div")(() => ({
+	display: "flex",
+	flexWrap: "wrap",
+	borderTop: `2px solid ${i.border()}`
+})), N = n("div")(({ variant: e, annotationType: t }) => ({
+	flexGrow: 1,
+	width: "28%",
+	textAlign: "center",
+	padding: "4px",
+	cursor: "pointer",
+	"&:not(:nth-child(3n))": { borderRight: `1px solid ${i.border()}` },
+	"&:hover": { backgroundColor: i.backgroundDark() },
+	...e === "positive" && {
+		backgroundColor: "rgb(153, 255, 153) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	},
+	...e === "negative" && {
+		backgroundColor: "rgb(255, 204, 238) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	},
+	...e === "typeChange" && t === "negative" && { "&:hover": { backgroundColor: "rgb(153, 255, 153) !important" } },
+	...e === "typeChange" && t === "positive" && { "&:hover": { backgroundColor: "rgb(255, 204, 238) !important" } }
+})), P = class extends h.Component {
+	static propTypes = {
+		anchorEl: v.default.object,
+		open: v.default.bool,
+		offset: v.default.number,
+		value: v.default.string,
+		type: v.default.string,
+		onClose: v.default.func,
+		onDelete: v.default.func,
+		onSave: v.default.func,
+		onTypeChange: v.default.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: r, type: i } = this.props, { value: a } = this.state;
+		return /* @__PURE__ */ g(j, {
+			anchorEl: e,
+			elevation: 2,
+			open: r,
+			onClose: this.handleSave,
+			annotationType: i,
+			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__ */ _(M, {
+				annotationType: i,
+				children: [/* @__PURE__ */ g(s, {
+					id: "annotation-editor",
+					style: {
+						padding: "2px 5px",
+						width: "95%"
+					},
+					autoFocus: !0,
+					multiline: !0,
+					rows: 1,
+					maxRows: 4,
+					value: a,
+					onChange: this.onValueChange,
+					InputProps: { disableUnderline: !0 }
+				}), /* @__PURE__ */ _(ee, { children: [
+					/* @__PURE__ */ g(N, {
+						onClick: n,
+						children: "Delete"
+					}),
+					/* @__PURE__ */ g(N, {
+						variant: "typeChange",
+						annotationType: i,
+						onClick: this.handleTypeChange,
+						children: i === "negative" ? "Green" : "Pink"
+					}),
+					/* @__PURE__ */ g(N, {
+						onClick: this.handleSave,
+						children: "Save"
+					})
+				] })]
+			})
+		});
+	}
+}, F = n(m)({ "& .MuiPaper-root": {
+	overflowX: "unset",
+	overflowY: "unset",
+	marginTop: "-16px",
+	"&::after": {
+		position: "absolute",
+		left: "calc(50% - 7px)",
+		border: "solid transparent",
+		content: "\"\"",
+		height: 0,
+		width: 0,
+		pointerEvents: "none",
+		borderWidth: "7px",
+		borderTopColor: i.border()
+	}
+} }), I = n("div")(() => ({
+	width: "300px",
+	overflow: "hidden",
+	borderRadius: "4px",
+	backgroundColor: i.white(),
+	border: `2px solid ${i.border()}`
+})), te = n("div")({
+	display: "flex",
+	flexWrap: "wrap"
+}), ne = n("div")(() => ({
+	display: "flex",
+	flexWrap: "wrap",
+	borderTop: `2px solid ${i.border()}`
+})), L = n("div")(({ variant: e }) => ({
+	width: "22%",
+	textAlign: "center",
+	padding: "4px",
+	cursor: "pointer",
+	borderBottom: `1px solid ${i.border()}`,
+	"&:not(:nth-child(4n))": { borderRight: `1px solid ${i.border()}` },
+	"&:nth-child(4n)": { flexGrow: 1 },
+	"&:hover": { backgroundColor: i.backgroundDark() },
+	...e === "positive" && {
+		backgroundColor: "rgb(153, 255, 153) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	},
+	...e === "negative" && {
+		backgroundColor: "rgb(255, 204, 238) !important",
+		"&:hover": { filter: "brightness(85%)" }
+	}
+})), re = class extends h.Component {
+	static propTypes = {
+		anchorEl: v.default.object,
+		open: v.default.bool,
+		annotations: v.default.array,
+		isNewAnnotation: v.default.bool,
+		onClose: v.default.func,
+		onDelete: v.default.func,
+		onEdit: v.default.func,
+		onWrite: v.default.func,
+		onAnnotate: v.default.func
+	};
+	render() {
+		let { anchorEl: e, annotations: t, isNewAnnotation: n, onAnnotate: r, onClose: i, onEdit: a, onDelete: o, onWrite: s, open: c } = this.props;
+		return /* @__PURE__ */ g(F, {
+			anchorEl: e,
+			open: c,
+			onClose: i,
+			elevation: 5,
+			transitionDuration: {
+				enter: 225,
+				exit: 195
+			},
+			anchorOrigin: {
+				vertical: "top",
+				horizontal: "center"
+			},
+			transformOrigin: {
+				vertical: "bottom",
+				horizontal: "center"
+			},
+			children: /* @__PURE__ */ _(I, { children: [/* @__PURE__ */ g(te, { children: t.map((e, t) => /* @__PURE__ */ g(L, {
+				variant: e.type,
+				onClick: () => r(e),
+				children: e.label
+			}, `annotation-${t}`)) }), /* @__PURE__ */ _(ne, { children: [
+				/* @__PURE__ */ g(L, {
+					onClick: i,
+					children: "Cancel"
+				}),
+				/* @__PURE__ */ g(L, { style: { pointerEvents: "none" } }),
+				n ? /* @__PURE__ */ _(h.Fragment, { children: [/* @__PURE__ */ g(L, {
+					variant: "positive",
+					onClick: () => s("positive"),
+					children: "Write"
+				}), /* @__PURE__ */ g(L, {
+					variant: "negative",
+					onClick: () => s("negative"),
+					children: "Write"
+				})] }) : /* @__PURE__ */ _(h.Fragment, { children: [/* @__PURE__ */ g(L, {
+					onClick: o,
+					children: "Delete"
+				}), /* @__PURE__ */ g(L, {
+					onClick: a,
+					children: "Edit"
+				})] })
+			] })] })
+		});
+	}
+}, R = n("div")({
+	padding: "10px 120px 10px 16px",
+	backgroundColor: "rgba(0, 0, 0, 0.06)",
+	border: "1px solid #ccc",
+	borderRadius: "4px",
+	overflowY: "scroll",
+	lineHeight: "36px",
+	whiteSpace: "pre-wrap",
+	overflowWrap: "break-word",
+	"& p": { margin: 0 },
+	"& span[data-latex]": {
+		userSelect: "none",
+		"-webkit-user-select": "none",
+		"-moz-user-select": "none",
+		"-ms-user-select": "none"
+	}
+}), z = n("div")({ width: "230px" }), B = n("div")({
+	position: "relative",
+	overflowX: "hidden",
+	display: "flex"
+}), V = n(d)(({ theme: e }) => ({
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	marginTop: e.spacing(2),
+	width: "100%"
+})), H = "\n  .sideAnnotation:before {\n    position: absolute;\n    right: var(--before-right, 100%);\n    top: var(--before-top, 5px);\n    border: solid transparent;\n    content: \"\";\n    height: 0;\n    width: 0;\n    pointer-events: none;\n    border-width: var(--before-border-width, 7px);\n    border-right-color: var(--before-border-color, rgb(153, 255, 153));\n  }\n";
+if (!document.getElementById("annotation-editor-styles")) {
+	let e = document.createElement("style");
+	e.id = "annotation-editor-styles", e.textContent = H, document.head.appendChild(e);
+}
+var U = class extends h.Component {
+	static propTypes = {
+		text: v.default.string,
+		comment: v.default.string,
+		annotations: v.default.array,
+		predefinedAnnotations: v.default.array,
+		onChange: v.default.func.isRequired,
+		onCommentChange: v.default.func.isRequired,
+		width: v.default.number,
+		height: v.default.number,
+		maxHeight: v.default.string,
+		disabled: v.default.bool,
+		disabledMath: v.default.bool,
+		customKeys: v.default.array,
+		keypadMode: v.default.string
+	};
+	constructor(e) {
+		super(e), this.state = {
+			anchorEl: null,
+			openedMenu: !1,
+			openedEditor: !1,
+			selectedElems: [],
+			labelElem: null,
+			selectionDetails: null,
+			annotation: null,
+			annotationIndex: null
+		};
+	}
+	componentDidMount() {
+		let { annotations: e, text: t } = this.props;
+		t && e.forEach((e) => {
+			let [t, n] = x(e.start, e.end, this.textRef);
+			if (t && n) {
+				let r = document.createRange();
+				r.setStart(t.node, t.offset), r.setEnd(n.node, n.offset);
+				let i = w(r);
+				this.createDOMAnnotation(i, e);
+			}
+		}), this.textRef && (this.adjustAnnotationsPosition(), this.textRef.addEventListener("scroll", this.adjustAnnotationsPosition));
+	}
+	adjustAnnotationsPosition = () => {
+		if (this.textRef && this.labelsRef) {
+			let e = this.textRef.offsetLeft + this.textRef.offsetWidth + 8;
+			Array.from(this.labelsRef.children).forEach((t) => {
+				let n = k(t.dataset.annId), r = (n[0].offsetTop ? n[0].offsetTop : n[0].offsetParent.offsetTop) - this.textRef.scrollTop - 6;
+				t.style.top = `${r}px`, t.style.left = `${e}px`;
+			});
+		}
+	};
+	handleClick = (e) => {
+		let { annotations: t } = this.props, { selectionDetails: n } = this.state;
+		if (n) return;
+		let { id: r, annId: i } = e.target.dataset, a = r || i, o = k(a), s = A(a), c = t.findIndex((e) => e.id === a), l = s.hasAttribute("data-freeform");
+		l && (s.style.zIndex = "10"), this.setState({
+			anchorEl: o[0],
+			openedMenu: !!r || !!i && !l,
+			openedEditor: !!i && l,
+			selectedElems: o,
+			labelElem: s,
+			annotationIndex: c,
+			annotation: t[c],
+			selectionDetails: null
+		});
+	};
+	handleHover = (e) => {
+		let { id: t, annId: n } = e.target.dataset, r = t || n, i = k(r), a = A(r), o = a.hasAttribute("data-freeform");
+		i.forEach((e) => {
+			e.style.zIndex = "20", e.classList.contains("positive") ? e.style.backgroundColor = "rgb(51, 255, 51, 0.7)" : e.classList.contains("negative") && (e.style.backgroundColor = "rgba(255, 102, 204, 0.55)");
+		}), o ? (a.style.zIndex = "20", a.classList.contains("positive") ? (a.style.backgroundColor = "rgb(128, 255, 128)", a.style.setProperty("--before-border-color", "rgb(153, 255, 153)")) : a.classList.contains("negative") && (a.style.backgroundColor = "rgb(255, 179, 230)", a.style.setProperty("--before-border-color", "rgb(255, 179, 230)"))) : (a.style.zIndex = "20", a.classList.contains("positive") ? a.style.color = "rgb(0, 77, 0)" : a.classList.contains("negative") && (a.style.color = "rgb(153, 0, 102)"));
+	};
+	handleCancelHover = (e) => {
+		let { id: t, annId: n } = e.target.dataset, r = t || n, i = k(r), a = A(r), o = a.hasAttribute("data-freeform");
+		i.forEach((e) => {
+			e.style.zIndex = "", e.classList.contains("positive") ? e.style.backgroundColor = "rgb(51, 255, 51, 0.5)" : e.classList.contains("negative") && (e.style.backgroundColor = "rgba(255, 102, 204, 0.4)");
+		}), o ? (a.style.zIndex = "", a.classList.contains("positive") ? (a.style.backgroundColor = "rgb(153, 255, 153)", a.style.removeProperty("--before-border-color")) : a.classList.contains("negative") && (a.style.backgroundColor = "rgb(255, 204, 238)", a.style.removeProperty("--before-border-color"))) : (a.style.zIndex = "", a.classList.contains("positive") ? a.style.color = "rgb(0, 128, 0)" : a.classList.contains("negative") && (a.style.color = "rgb(204, 0, 136)"));
+	};
+	handleClose = (e) => {
+		let { selectedElems: t, labelElem: n } = this.state;
+		t.length && !t[0].hasAttribute("data-id") && E(t, this.textRef), n && (n.style.zIndex = ""), this.setState({
+			anchorEl: null,
+			openedMenu: !1,
+			openedEditor: !1,
+			selectedElems: [],
+			labelElem: null,
+			selectionDetails: null,
+			annotationIndex: null,
+			annotation: null
+		}), D();
+	};
+	handleSelection = (e) => {
+		let t = window.getSelection();
+		if (e.detail > 2) {
+			D();
+			return;
+		}
+		if (t && t.rangeCount > 0) {
+			let e = t.getRangeAt(0), n = e.toString(), r = this.textRef.contains(e.commonAncestorContainer);
+			if (!t.isCollapsed && n !== "" && r) {
+				let t = T(e, this.textRef), n = w(e);
+				this.setState({
+					anchorEl: n[0],
+					openedMenu: !0,
+					selectedElems: n,
+					selectionDetails: t
+				});
+			}
+		}
+	};
+	deleteAnnotation = () => {
+		let { annotations: e, onChange: t } = this.props, { selectedElems: n, labelElem: r, annotationIndex: i, annotation: a } = this.state;
+		(O(a.label) ? this.labelsRef : n[0]).removeChild(r), E(n, this.textRef), e.splice(i, 1), t(e), this.handleClose();
+	};
+	createDOMAnnotation = (e, t) => {
+		let { disabled: n } = this.props, { id: r, label: i, type: a } = t;
+		(e || []).forEach((e) => {
+			e.dataset.id = r, e.className = `annotation ${a}`, e.style.position = "relative", e.style.cursor = "pointer", a === "positive" ? e.style.backgroundColor = "rgb(51, 255, 51, 0.5)" : a === "negative" && (e.style.backgroundColor = "rgba(255, 102, 204, 0.4)"), e.onclick = !n && this.handleClick, e.onmouseover = this.handleHover, e.onmouseout = this.handleCancelHover;
+		});
+		let o = e && e[0] || {}, s = document.createElement("SPAN");
+		if (s.dataset.annId = r, s.innerHTML = i, s.onclick = !n && this.handleClick, s.onmouseover = this.handleHover, s.onmouseout = this.handleCancelHover, O(i)) {
+			let e = (o.offsetTop ? o.offsetTop : o.offsetParent.offsetTop) - this.textRef.scrollTop, t = this.textRef.offsetLeft + this.textRef.offsetWidth + 8;
+			s.dataset.freeform = !0, s.className = `sideAnnotation ${a}`, s.style.position = "absolute", s.style.padding = "4px", s.style.borderRadius = "4px", s.style.marginLeft = "8px", s.style.width = "180px", s.style.whiteSpace = "pre-wrap", s.style.wordBreak = "break-word", s.style.border = "2px solid #ffffff", s.style.fontSize = "14px", s.style.fontStyle = "normal", s.style.fontWeight = "normal", s.style.top = `${e}px`, s.style.left = `${t}px`, a === "negative" ? s.style.backgroundColor = "rgb(255, 204, 238)" : a === "positive" && (s.style.backgroundColor = "rgb(153, 255, 153)"), s.style.setProperty("--before-border-width", "7px"), s.style.setProperty("--before-top", "5px"), s.style.setProperty("--before-right", "100%"), a === "negative" ? s.style.setProperty("--before-border-color", "rgb(255, 204, 238)") : a === "positive" && s.style.setProperty("--before-border-color", "rgb(153, 255, 153)"), this.labelsRef.appendChild(s);
+		} else s.className = `annotationLabel ${a}`, s.style.backgroundColor = "rgb(242, 242, 242)", s.style.padding = "2px", s.style.position = "absolute", s.style.userSelect = "none", s.style.whiteSpace = "nowrap", s.style.top = "-10px", s.style.left = "-2px", s.style.fontSize = "12px", s.style.fontStyle = "normal", s.style.fontWeight = "normal", s.style.lineHeight = "6px", s.style.webkitUserSelect = "none", s.style.mozUserSelect = "none", s.style.msUserSelect = "none", a === "positive" ? s.style.color = "rgb(0, 128, 0)" : a === "negative" && (s.style.color = "rgb(204, 0, 136)"), o.appendChild(s);
+	};
+	createNewAnnotation = (e, t) => {
+		let { selectedElems: n, selectionDetails: r } = this.state, i = {
+			id: [
+				r.start,
+				r.end,
+				(/* @__PURE__ */ new Date()).getTime()
+			].join("-"),
+			label: e,
+			type: t,
+			...r
+		};
+		return this.createDOMAnnotation(n, i), i;
+	};
+	handleMenuClick = (e) => {
+		let { annotations: t, onChange: n } = this.props, { annotation: r, annotationIndex: i } = this.state, { type: a, text: o } = e;
+		if (r) {
+			let e = {
+				...r,
+				label: o,
+				type: a
+			}, { type: n, label: s } = r;
+			this.updateLabel(s, e, a !== n && n), t.splice(i, 1, e);
+		} else {
+			let e = this.createNewAnnotation(o, a);
+			t.push(e);
+		}
+		n(t), this.handleClose();
+	};
+	editAnnotation = () => {
+		this.setState({
+			openedMenu: !1,
+			openedEditor: !0
+		});
+	};
+	addAnnotation = (e) => {
+		let { annotations: t, onChange: n } = this.props, r = this.createNewAnnotation("", e), i = A(r.id);
+		t.push(r), this.setState({
+			openedMenu: !1,
+			openedEditor: !0,
+			annotationIndex: t.length - 1,
+			annotation: r,
+			labelElem: i
+		}), n(t);
+	};
+	updateLabel = (e, t, n) => {
+		let { selectedElems: r, labelElem: i } = this.state, { label: a, type: o } = t;
+		O(a) && O(e) || !O(a) && !O(e) ? (i.innerHTML = a, n && (i.classList.remove(n), i.classList.add(o), r.forEach((e) => {
+			e.classList.remove(n), e.classList.add(o);
+		}))) : O(a) && !O(e) ? (r[0].removeChild(i), this.createDOMAnnotation(r, t)) : !O(a) && O(e) && (this.labelsRef.removeChild(i), this.createDOMAnnotation(r, t));
+	};
+	changeAnnotationType = (e) => {
+		let { annotations: t, onChange: n } = this.props, { annotationIndex: r, selectedElems: i } = this.state, { type: a, label: o } = t[r], s = a === "positive" ? "negative" : "positive", c = {
+			...t[r],
+			type: s,
+			label: e
+		};
+		i.forEach((e) => {
+			e.classList.remove(a), e.classList.add(s);
+		}), this.updateLabel(o, c, a), t.splice(r, 1, c), n(t), this.handleClose();
+	};
+	updateAnnotation = (e, t) => {
+		let { annotations: n, onChange: r } = this.props, { annotationIndex: i } = this.state, a = {
+			...n[i],
+			label: t
+		};
+		this.updateLabel(e, a), n.splice(i, 1, a), r(n);
+	};
+	componentWillUnmount() {
+		this.textRef.removeEventListener("scroll", this.adjustAnnotationsPosition);
+	}
+	render() {
+		let { comment: e, customKeys: t, disabled: n, disabledMath: r, keypadMode: i, height: a, width: o, maxHeight: s, onCommentChange: c, predefinedAnnotations: l, text: d } = this.props, { anchorEl: f, annotation: p, openedMenu: m, openedEditor: h, selectionDetails: v } = this.state, y = f && (f.offsetTop ? f.offsetTop : f.offsetParent.offsetTop), b = this.textRef && y ? y - this.textRef.scrollTop - 8 : 0;
+		return /* @__PURE__ */ _("div", { children: [
+			/* @__PURE__ */ _(B, { children: [/* @__PURE__ */ g(R, {
+				style: {
+					width: o - 34,
+					minHeight: a,
+					maxHeight: s
+				},
+				ref: (e) => this.textRef = e,
+				onMouseDown: n ? () => {} : D,
+				onMouseUp: n ? () => {} : this.handleSelection,
+				dangerouslySetInnerHTML: { __html: d }
+			}), /* @__PURE__ */ g(z, { ref: (e) => this.labelsRef = e })] }),
+			/* @__PURE__ */ g(V, {
+				label: "Comment",
+				children: /* @__PURE__ */ g(u, {
+					className: "prompt",
+					markup: e || "",
+					onChange: c,
+					width: o && (o + 104).toString(),
+					disabled: n,
+					pluginProps: {
+						math: {
+							disabled: r,
+							customKeys: t,
+							keypadMode: i,
+							controlledKeypadMode: !1
+						},
+						video: { disabled: !0 },
+						audio: { disabled: !0 },
+						textAlign: { disabled: !0 },
+						h3: { disabled: !0 }
+					}
+				})
+			}),
+			/* @__PURE__ */ g(re, {
+				anchorEl: f,
+				open: m && !n,
+				annotations: l,
+				isNewAnnotation: !!v,
+				onClose: this.handleClose,
+				onDelete: this.deleteAnnotation,
+				onEdit: this.editAnnotation,
+				onWrite: this.addAnnotation,
+				onAnnotate: this.handleMenuClick
+			}),
+			/* @__PURE__ */ g(P, {
+				anchorEl: this.textRef,
+				open: h && !n,
+				offset: b,
+				value: p && p.label || "",
+				type: p && p.type,
+				onClose: this.handleClose,
+				onDelete: this.deleteAnnotation,
+				onSave: this.updateAnnotation,
+				onTypeChange: this.changeAnnotationType
+			})
+		] });
+	}
+};
+//#endregion
+//#region src/delivery/main.tsx
+function W(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function G(e, t) {
+	return !e || W(e) ? e : W(e.default) ? e.default : t && W(e[t]) ? e[t] : t && W(e[t]?.default) ? e[t].default : e;
+}
+var K = G(c, "UiLayout") || G(Q.UiLayout, "UiLayout"), q = G(f, "PreviewPrompt") || G(Q.PreviewPrompt, "PreviewPrompt"), J = G(o, "Collapsible") || G(Q.Collapsible, "Collapsible"), Y = G(p, "Feedback") || G(Q.Feedback, "Feedback"), X = l, Z = X.default, Q = Z && typeof Z == "object" ? Z : X, ie = (0, y.default)("@pie-ui:extended-text-entry"), ae = n(K)({
+	backgroundColor: i.background(),
+	color: i.text()
+}), oe = n(r)(({ theme: e }) => ({
+	width: "100%",
+	color: i.text(),
+	marginBottom: e.spacing(2),
+	fontSize: "inherit",
+	display: "block"
+})), se = n("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), ce = n(u)(({ theme: e }) => ({
+	marginBottom: e.spacing(2),
+	borderRadius: "4px"
+})), le = n("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), $ = class extends h.Component {
+	static propTypes = {
+		onValueChange: v.default.func.isRequired,
+		onAnnotationsChange: v.default.func.isRequired,
+		onCommentChange: v.default.func.isRequired,
+		model: v.default.object,
+		session: v.default.shape({
+			value: v.default.string,
+			annotations: v.default.array,
+			comment: v.default.string
+		}).isRequired
+	};
+	render() {
+		let { model: e, session: t, onAnnotationsChange: n, onCommentChange: r, onValueChange: i } = this.props, { animationsDisabled: a, annotatorMode: o, customKeys: s, dimensions: c, disabled: l, disabledAnnotator: u, equationEditor: d, extraCSSRules: f, feedback: p, mathInput: m, playersToolbarPosition: h, predefinedAnnotations: v, prompt: y, spanishInput: b, specialInput: x, spellCheckEnabled: S, teacherInstructions: C } = e, { annotations: w, comment: T, value: E } = t, { width: D, height: O } = c || {}, k = "40vh", A = { position: h === "top" ? "top" : "bottom" };
+		ie("[render] disabled? ", l);
+		let j = /* @__PURE__ */ g(q, {
+			defaultClassName: "teacher-instructions",
+			prompt: C
+		}), M = [];
+		return b && M.push({ language: "spanish" }), x && M.push({ language: "special" }), /* @__PURE__ */ _(ae, {
+			extraCSSRules: f,
+			ref: (e) => {
+				this.containerRef = e;
+			},
+			children: [
+				/* @__PURE__ */ g(le, { children: "Constructed Response Question" }),
+				C && /* @__PURE__ */ g(se, { children: a ? j : /* @__PURE__ */ g(J, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: j
+				}) }),
+				y && /* @__PURE__ */ g(oe, {
+					component: "span",
+					children: /* @__PURE__ */ g(q, {
+						defaultClassName: "prompt",
+						prompt: e.prompt
+					})
+				}),
+				o ? /* @__PURE__ */ g(U, {
+					text: E || "",
+					annotations: w || [],
+					comment: T || "",
+					predefinedAnnotations: v || [],
+					onChange: n,
+					onCommentChange: r,
+					width: D,
+					height: O,
+					maxHeight: k,
+					disabled: u,
+					disabledMath: !m,
+					customKeys: s,
+					keypadMode: d
+				}) : /* @__PURE__ */ g(ce, {
+					className: "response-area-editor",
+					onChange: i,
+					markup: E || "",
+					maxWidth: D && D.toString(),
+					minWidth: "100px",
+					minHeight: O && O.toString(),
+					maxHeight: k,
+					disabled: l,
+					highlightShape: !0,
+					toolbarOpts: A,
+					spellCheck: S,
+					charactersLimit: 5e4,
+					autoWidthToolbar: !0,
+					pluginProps: {
+						math: {
+							disabled: !m,
+							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: M
+				}),
+				p && /* @__PURE__ */ g(Y, {
+					correctness: "correct",
+					feedback: p
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { $ as t };
+
+//# sourceMappingURL=main-Cjb3jy0r.js.map