@pie-element/extended-text-entry 15.1.0-next.28 → 15.1.1-next.0

package/dist/controller/defaults.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/controller/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: {
+    annotationsEnabled: boolean;
+    dimensions: {
+        height: number;
+        width: number;
+    };
+    equationEditor: string;
+    feedbackEnabled: boolean;
+    mathInput: boolean;
+    playerSpellCheckDisabled: boolean;
+    predefinedAnnotations: {
+        label: string;
+        text: string;
+        type: string;
+    }[];
+    prompt: string;
+    promptEnabled: boolean;
+    rationale: string;
+    rationaleEnabled: boolean;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,104 @@
+//#region src/controller/defaults.ts
+var e = {
+	annotationsEnabled: !1,
+	dimensions: {
+		height: 100,
+		width: 500
+	},
+	equationEditor: "Grade 8 - HS",
+	feedbackEnabled: !1,
+	mathInput: !1,
+	playerSpellCheckDisabled: !0,
+	predefinedAnnotations: [
+		{
+			label: "good",
+			text: "good",
+			type: "positive"
+		},
+		{
+			label: "★",
+			text: "★",
+			type: "positive"
+		},
+		{
+			label: ":-)",
+			text: ":-)",
+			type: "positive"
+		},
+		{
+			label: "creative",
+			text: "creative",
+			type: "positive"
+		},
+		{
+			label: "run-on",
+			text: "run-on",
+			type: "negative"
+		},
+		{
+			label: "frag",
+			text: "fragment",
+			type: "negative"
+		},
+		{
+			label: "tran",
+			text: "transition",
+			type: "negative"
+		},
+		{
+			label: "supp",
+			text: "support needed",
+			type: "negative"
+		},
+		{
+			label: "punc",
+			text: "punctuation",
+			type: "negative"
+		},
+		{
+			label: "agr",
+			text: "agreement wrong",
+			type: "negative"
+		},
+		{
+			label: "unclear",
+			text: "unclear",
+			type: "negative"
+		},
+		{
+			label: "cut",
+			text: "cut",
+			type: "negative"
+		},
+		{
+			label: "sp",
+			text: "spelling",
+			type: "negative"
+		},
+		{
+			label: "cap",
+			text: "capitalization",
+			type: "negative"
+		},
+		{
+			label: "inf",
+			text: "informal",
+			type: "negative"
+		},
+		{
+			label: "awk",
+			text: "awkward",
+			type: "negative"
+		}
+	],
+	prompt: "",
+	promptEnabled: !0,
+	rationale: "",
+	rationaleEnabled: !0,
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	toolbarEditorPosition: "bottom"
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/controller/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 createDefaultModel(model?: {}): Promise<{
+    annotationsEnabled: boolean;
+    dimensions: {
+        height: number;
+        width: number;
+    };
+    equationEditor: string;
+    feedbackEnabled: boolean;
+    mathInput: boolean;
+    playerSpellCheckDisabled: boolean;
+    predefinedAnnotations: {
+        label: string;
+        text: string;
+        type: string;
+    }[];
+    prompt: string;
+    promptEnabled: boolean;
+    rationale: string;
+    rationaleEnabled: boolean;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+}>;
+export declare const normalize: (question: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<{
+    prompt: any;
+    dimensions: any;
+    customKeys: any;
+    id: any;
+    disabled: boolean;
+    feedback: string | undefined;
+    teacherInstructions: any;
+    language: any;
+    mathInput: any;
+    spanishInput: any;
+    specialInput: any;
+    equationEditor: any;
+    spellCheckEnabled: boolean;
+    playersToolbarPosition: any;
+    annotatorMode: any;
+    disabledAnnotator: boolean;
+    predefinedAnnotations: any;
+    extraCSSRules: any;
+}>;
+export declare function outcome(): Promise<{
+    score: number;
+    completed: string;
+    note: string;
+}>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,72 @@
+import e from "./defaults.js";
+import t from "debug";
+import { getFeedback as n } from "@pie-element/shared-feedback";
+//#region src/controller/index.ts
+var r = t("@pie-element:extended-text-entry:controller");
+async function i(t = {}) {
+	return r("[createDefaultModel]", t), {
+		...e,
+		...t
+	};
+}
+var a = (t) => ({
+	...e,
+	...t
+});
+async function o(e, t, i) {
+	r("[question]", e);
+	let o = a(e), s = i.mode === "evaluate" && o.feedbackEnabled ? n(o.feedback, "Your answer has been submitted") : Promise.resolve(void 0), c = null;
+	c = i.role === "instructor" && (i.mode === "view" || i.mode === "evaluate") && o.teacherInstructionsEnabled ? o.teacherInstructions : null;
+	let l = o.equationEditor || "miscellaneous";
+	switch (o.equationEditor) {
+		case "Grade 1 - 2":
+			l = 1;
+			break;
+		case "Grade 3 - 5":
+			l = 3;
+			break;
+		case "Grade 6 - 7":
+			l = 6;
+			break;
+		case "Grade 8 - HS":
+			l = 8;
+			break;
+		default: break;
+	}
+	let u = o.annotationsEnabled && (i.role === "instructor" || i.mode === "evaluate");
+	return s.then((e) => ({
+		prompt: o.promptEnabled ? o.prompt : null,
+		dimensions: o.dimensions,
+		customKeys: o.customKeys || [],
+		id: o.id,
+		disabled: i.mode !== "gather",
+		feedback: e,
+		teacherInstructions: c,
+		language: o.language,
+		mathInput: o.mathInput,
+		spanishInput: o.spanishInput,
+		specialInput: o.specialInput,
+		equationEditor: l,
+		spellCheckEnabled: !o.playerSpellCheckDisabled,
+		playersToolbarPosition: o.playersToolbarPosition || "bottom",
+		annotatorMode: u,
+		disabledAnnotator: o.annotationsEnabled ? i.role !== "instructor" : !0,
+		predefinedAnnotations: o.annotationsEnabled ? o.predefinedAnnotations : [],
+		extraCSSRules: o.extraCSSRules
+	}));
+}
+async function s() {
+	return {
+		score: 0,
+		completed: "n/a",
+		note: "Requires manual scoring"
+	};
+}
+var c = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), l = (e = {}, t = {}) => {
+	let n = {};
+	return ["teacherInstructions", "prompt"].forEach((r) => {
+		t[r]?.required && !c(e[r]) && (n[r] = "This field is required.");
+	}), n;
+};
+//#endregion
+export { i as createDefaultModel, o as model, a as normalize, s as outcome, l as validate };

package/dist/delivery/annotation/annotation-editor.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/src/annotation/annotation-editor.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 AnnotationEditor extends React.Component {
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        comment: PropTypes.Requireable<string>;
+        annotations: PropTypes.Requireable<any[]>;
+        predefinedAnnotations: PropTypes.Requireable<any[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onCommentChange: PropTypes.Validator<(...args: any[]) => any>;
+        width: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<number>;
+        maxHeight: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        disabledMath: PropTypes.Requireable<boolean>;
+        customKeys: PropTypes.Requireable<any[]>;
+        keypadMode: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    adjustAnnotationsPosition: any;
+    handleClick: any;
+    handleHover: any;
+    handleCancelHover: any;
+    handleClose: any;
+    handleSelection: any;
+    deleteAnnotation: any;
+    createDOMAnnotation: any;
+    createNewAnnotation: any;
+    handleMenuClick: any;
+    editAnnotation: any;
+    addAnnotation: any;
+    updateLabel: any;
+    changeAnnotationType: any;
+    updateAnnotation: any;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export default AnnotationEditor;

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

@@ -0,0 +1,296 @@
+import { clearSelection as e, getAnnotationElements as t, getDOMNodes as n, getLabelElement as r, getRangeDetails as i, isSideLabel as a, removeElemsWrapping as o, wrapRange as s } from "./annotation-utils.js";
+import c from "./freeform-editor.js";
+import l from "./annotation-menu.js";
+import u from "react";
+import d from "prop-types";
+import { styled as f } from "@mui/material/styles";
+import p from "@pie-lib/editable-html-tip-tap";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { InputContainer as g } from "@pie-lib/config-ui";
+//#region src/delivery/annotation/annotation-editor.tsx
+var _ = f("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"
+	}
+}), v = f("div")({ width: "230px" }), y = f("div")({
+	position: "relative",
+	overflowX: "hidden",
+	display: "flex"
+}), b = f(g)(({ theme: e }) => ({
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	marginTop: e.spacing(2),
+	width: "100%"
+})), x = "\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 = x, document.head.appendChild(e);
+}
+var S = class extends u.Component {
+	static propTypes = {
+		text: d.string,
+		comment: d.string,
+		annotations: d.array,
+		predefinedAnnotations: d.array,
+		onChange: d.func.isRequired,
+		onCommentChange: d.func.isRequired,
+		width: d.number,
+		height: d.number,
+		maxHeight: d.string,
+		disabled: d.bool,
+		disabledMath: d.bool,
+		customKeys: d.array,
+		keypadMode: d.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, r] = n(e.start, e.end, this.textRef);
+			if (t && r) {
+				let n = document.createRange();
+				n.setStart(t.node, t.offset), n.setEnd(r.node, r.offset);
+				let i = s(n);
+				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((n) => {
+				let r = t(n.dataset.annId), i = (r[0].offsetTop ? r[0].offsetTop : r[0].offsetParent.offsetTop) - this.textRef.scrollTop - 6;
+				n.style.top = `${i}px`, n.style.left = `${e}px`;
+			});
+		}
+	};
+	handleClick = (e) => {
+		let { annotations: n } = this.props, { selectionDetails: i } = this.state;
+		if (i) return;
+		let { id: a, annId: o } = e.target.dataset, s = a || o, c = t(s), l = r(s), u = n.findIndex((e) => e.id === s), d = l.hasAttribute("data-freeform");
+		d && (l.style.zIndex = "10"), this.setState({
+			anchorEl: c[0],
+			openedMenu: !!a || !!o && !d,
+			openedEditor: !!o && d,
+			selectedElems: c,
+			labelElem: l,
+			annotationIndex: u,
+			annotation: n[u],
+			selectionDetails: null
+		});
+	};
+	handleHover = (e) => {
+		let { id: n, annId: i } = e.target.dataset, a = n || i, o = t(a), s = r(a), c = s.hasAttribute("data-freeform");
+		o.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)");
+		}), c ? (s.style.zIndex = "20", s.classList.contains("positive") ? (s.style.backgroundColor = "rgb(128, 255, 128)", s.style.setProperty("--before-border-color", "rgb(153, 255, 153)")) : s.classList.contains("negative") && (s.style.backgroundColor = "rgb(255, 179, 230)", s.style.setProperty("--before-border-color", "rgb(255, 179, 230)"))) : (s.style.zIndex = "20", s.classList.contains("positive") ? s.style.color = "rgb(0, 77, 0)" : s.classList.contains("negative") && (s.style.color = "rgb(153, 0, 102)"));
+	};
+	handleCancelHover = (e) => {
+		let { id: n, annId: i } = e.target.dataset, a = n || i, o = t(a), s = r(a), c = s.hasAttribute("data-freeform");
+		o.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)");
+		}), c ? (s.style.zIndex = "", s.classList.contains("positive") ? (s.style.backgroundColor = "rgb(153, 255, 153)", s.style.removeProperty("--before-border-color")) : s.classList.contains("negative") && (s.style.backgroundColor = "rgb(255, 204, 238)", s.style.removeProperty("--before-border-color"))) : (s.style.zIndex = "", s.classList.contains("positive") ? s.style.color = "rgb(0, 128, 0)" : s.classList.contains("negative") && (s.style.color = "rgb(204, 0, 136)"));
+	};
+	handleClose = (t) => {
+		let { selectedElems: n, labelElem: r } = this.state;
+		n.length && !n[0].hasAttribute("data-id") && o(n, this.textRef), r && (r.style.zIndex = ""), this.setState({
+			anchorEl: null,
+			openedMenu: !1,
+			openedEditor: !1,
+			selectedElems: [],
+			labelElem: null,
+			selectionDetails: null,
+			annotationIndex: null,
+			annotation: null
+		}), e();
+	};
+	handleSelection = (t) => {
+		let n = window.getSelection();
+		if (t.detail > 2) {
+			e();
+			return;
+		}
+		if (n && n.rangeCount > 0) {
+			let e = n.getRangeAt(0), t = e.toString(), r = this.textRef.contains(e.commonAncestorContainer);
+			if (!n.isCollapsed && t !== "" && r) {
+				let t = i(e, this.textRef), n = s(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: s } = this.state;
+		(a(s.label) ? this.labelsRef : n[0]).removeChild(r), o(n, this.textRef), e.splice(i, 1), t(e), this.handleClose();
+	};
+	createDOMAnnotation = (e, t) => {
+		let { disabled: n } = this.props, { id: r, label: i, type: o } = t;
+		(e || []).forEach((e) => {
+			e.dataset.id = r, e.className = `annotation ${o}`, e.style.position = "relative", e.style.cursor = "pointer", o === "positive" ? e.style.backgroundColor = "rgb(51, 255, 51, 0.5)" : o === "negative" && (e.style.backgroundColor = "rgba(255, 102, 204, 0.4)"), e.onclick = !n && this.handleClick, e.onmouseover = this.handleHover, e.onmouseout = this.handleCancelHover;
+		});
+		let s = e && e[0] || {}, c = document.createElement("SPAN");
+		if (c.dataset.annId = r, c.innerHTML = i, c.onclick = !n && this.handleClick, c.onmouseover = this.handleHover, c.onmouseout = this.handleCancelHover, a(i)) {
+			let e = (s.offsetTop ? s.offsetTop : s.offsetParent.offsetTop) - this.textRef.scrollTop, t = this.textRef.offsetLeft + this.textRef.offsetWidth + 8;
+			c.dataset.freeform = !0, c.className = `sideAnnotation ${o}`, c.style.position = "absolute", c.style.padding = "4px", c.style.borderRadius = "4px", c.style.marginLeft = "8px", c.style.width = "180px", c.style.whiteSpace = "pre-wrap", c.style.wordBreak = "break-word", c.style.border = "2px solid #ffffff", c.style.fontSize = "14px", c.style.fontStyle = "normal", c.style.fontWeight = "normal", c.style.top = `${e}px`, c.style.left = `${t}px`, o === "negative" ? c.style.backgroundColor = "rgb(255, 204, 238)" : o === "positive" && (c.style.backgroundColor = "rgb(153, 255, 153)"), c.style.setProperty("--before-border-width", "7px"), c.style.setProperty("--before-top", "5px"), c.style.setProperty("--before-right", "100%"), o === "negative" ? c.style.setProperty("--before-border-color", "rgb(255, 204, 238)") : o === "positive" && c.style.setProperty("--before-border-color", "rgb(153, 255, 153)"), this.labelsRef.appendChild(c);
+		} else c.className = `annotationLabel ${o}`, c.style.backgroundColor = "rgb(242, 242, 242)", c.style.padding = "2px", c.style.position = "absolute", c.style.userSelect = "none", c.style.whiteSpace = "nowrap", c.style.top = "-10px", c.style.left = "-2px", c.style.fontSize = "12px", c.style.fontStyle = "normal", c.style.fontWeight = "normal", c.style.lineHeight = "6px", c.style.webkitUserSelect = "none", c.style.mozUserSelect = "none", c.style.msUserSelect = "none", o === "positive" ? c.style.color = "rgb(0, 128, 0)" : o === "negative" && (c.style.color = "rgb(204, 0, 136)"), s.appendChild(c);
+	};
+	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, i = this.createNewAnnotation("", e), a = r(i.id);
+		t.push(i), this.setState({
+			openedMenu: !1,
+			openedEditor: !0,
+			annotationIndex: t.length - 1,
+			annotation: i,
+			labelElem: a
+		}), n(t);
+	};
+	updateLabel = (e, t, n) => {
+		let { selectedElems: r, labelElem: i } = this.state, { label: o, type: s } = t;
+		a(o) && a(e) || !a(o) && !a(e) ? (i.innerHTML = o, n && (i.classList.remove(n), i.classList.add(s), r.forEach((e) => {
+			e.classList.remove(n), e.classList.add(s);
+		}))) : a(o) && !a(e) ? (r[0].removeChild(i), this.createDOMAnnotation(r, t)) : !a(o) && a(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: t, customKeys: n, disabled: r, disabledMath: i, keypadMode: a, height: o, width: s, maxHeight: u, onCommentChange: d, predefinedAnnotations: f, text: g } = this.props, { anchorEl: x, annotation: S, openedMenu: C, openedEditor: w, selectionDetails: T } = this.state, E = x && (x.offsetTop ? x.offsetTop : x.offsetParent.offsetTop), D = this.textRef && E ? E - this.textRef.scrollTop - 8 : 0;
+		return /* @__PURE__ */ h("div", { children: [
+			/* @__PURE__ */ h(y, { children: [/* @__PURE__ */ m(_, {
+				style: {
+					width: s - 34,
+					minHeight: o,
+					maxHeight: u
+				},
+				ref: (e) => this.textRef = e,
+				onMouseDown: r ? () => {} : e,
+				onMouseUp: r ? () => {} : this.handleSelection,
+				dangerouslySetInnerHTML: { __html: g }
+			}), /* @__PURE__ */ m(v, { ref: (e) => this.labelsRef = e })] }),
+			/* @__PURE__ */ m(b, {
+				label: "Comment",
+				children: /* @__PURE__ */ m(p, {
+					className: "prompt",
+					markup: t || "",
+					onChange: d,
+					width: s && (s + 104).toString(),
+					disabled: r,
+					pluginProps: {
+						math: {
+							disabled: i,
+							customKeys: n,
+							keypadMode: a,
+							controlledKeypadMode: !1
+						},
+						video: { disabled: !0 },
+						audio: { disabled: !0 },
+						textAlign: { disabled: !0 },
+						h3: { disabled: !0 }
+					}
+				})
+			}),
+			/* @__PURE__ */ m(l, {
+				anchorEl: x,
+				open: C && !r,
+				annotations: f,
+				isNewAnnotation: !!T,
+				onClose: this.handleClose,
+				onDelete: this.deleteAnnotation,
+				onEdit: this.editAnnotation,
+				onWrite: this.addAnnotation,
+				onAnnotate: this.handleMenuClick
+			}),
+			/* @__PURE__ */ m(c, {
+				anchorEl: this.textRef,
+				open: w && !r,
+				offset: D,
+				value: S && S.label || "",
+				type: S && S.type,
+				onClose: this.handleClose,
+				onDelete: this.deleteAnnotation,
+				onSave: this.updateAnnotation,
+				onTypeChange: this.changeAnnotationType
+			})
+		] });
+	}
+};
+//#endregion
+export { S as default };

package/dist/delivery/annotation/annotation-menu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-elements/packages/extended-text-entry/src/annotation/annotation-menu.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 AnnotationMenu extends React.Component {
+    static propTypes: {
+        anchorEl: PropTypes.Requireable<object>;
+        open: PropTypes.Requireable<boolean>;
+        annotations: PropTypes.Requireable<any[]>;
+        isNewAnnotation: PropTypes.Requireable<boolean>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        onEdit: PropTypes.Requireable<(...args: any[]) => any>;
+        onWrite: PropTypes.Requireable<(...args: any[]) => any>;
+        onAnnotate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    render(): React.JSX.Element;
+}
+export default AnnotationMenu;