@pie-element/extended-text-entry 14.0.0-beta.1 → 14.0.0-next.43

package/configure/package.json

@@ -13,8 +13,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.0-next.5",
-    "@pie-lib/editable-html-tip-tap": "1.1.0-next.5",
+    "@pie-lib/config-ui": "12.1.1-next.0",
+    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "react": "18.2.0",

package/controller/package.json

@@ -6,7 +6,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/feedback": "1.1.0-next.4"
+    "@pie-lib/feedback": "1.1.1-next.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/module/configure.js

@@ -0,0 +1 @@
+import{_dll_react_dom as e,_dll_react as t,_dll_prop_types as n,_dll_mui__material as i,_dll_mui__material_styles as a}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__config_ui as s}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";var l={};Object.defineProperty(l,"__esModule",{value:!0});class r extends CustomEvent{constructor(e,t=!1){super(r.TYPE,{bubbles:!0,detail:{update:e,reset:t}}),this.update=e,this.reset=t}}r.TYPE="model.updated";var d=l.ModelUpdatedEvent=r;class c extends CustomEvent{constructor(e,t){super(c.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}c.TYPE="delete.image";var p=l.DeleteImageEvent=c;class u extends CustomEvent{constructor(e){super(u.TYPE,{bubbles:!0,detail:e}),this.handler=e}}u.TYPE="insert.image";var h=l.InsertImageEvent=u;class g extends CustomEvent{constructor(e,t){super(g.TYPE,{bubbles:!0,detail:{src:e,done:t}}),this.src=e,this.done=t}}g.TYPE="delete.sound";var b=l.DeleteSoundEvent=g;class m extends CustomEvent{constructor(e){super(m.TYPE,{bubbles:!0,detail:e}),this.handler=e}}m.TYPE="insert.sound";var _,E=l.InsertSoundEvent=m,f=e;_=f.createRoot,f.hydrateRoot;const C=t,I=n,{Typography:v}=i,{styled:S}=a,{FeedbackSelector:x}=s,{InputContainer:y}=s,{settings:k}=s,{layout:P}=s,w=o,{ALL_PLUGINS:M}=o;function T(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}const{Panel:A,toggle:D,numberFields:R,dropdown:q}=k,Y={type:"default",default:"Your answer has been submitted"},O=S(v)(({theme:e})=>({paddingBottom:e.spacing(1)})),j=S(y)(({theme:e})=>({paddingTop:e.spacing(1),marginTop:e.spacing(2),marginBottom:e.spacing(2),width:"100%"})),H=S("div")(({theme:e})=>({fontSize:e.typography.fontSize-2,color:e.palette.error.main,paddingTop:e.spacing(1)}));class F extends C.Component{static __initStatic(){this.propTypes={onModelChanged:I.func.isRequired,onConfigurationChanged:I.func,model:I.object.isRequired,configuration:I.object.isRequired,imageSupport:I.object.isRequired,uploadSoundSupport:I.object.isRequired}}constructor(e){super(e),F.prototype.__init.call(this),F.prototype.__init2.call(this),F.prototype.__init3.call(this),this.state={setDimensions:!0}}__init(){this.onPromptChange=e=>{const{onModelChanged:t,model:n}=this.props;t({...n,prompt:e})}}__init2(){this.changeFeedback=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,feedback:e})}}__init3(){this.changeTeacherInstructions=e=>{const{model:t,onModelChanged:n}=this.props;n({...t,teacherInstructions:e})}}render(){const{model:e,configuration:t,imageSupport:n,onConfigurationChanged:i,onModelChanged:a,uploadSoundSupport:s}=this.props,{annotations:o={},contentDimensions:l={},dimensions:r={},equationEditor:d={},feedback:c={},playerSpellCheck:p={},prompt:u={},settingsPanelDisabled:h,spanishInput:g={},specialInput:b={},spellCheck:m={},studentInstructions:_={},teacherInstructions:E={},mathInput:f={},maxImageWidth:I={},maxImageHeight:v={},multiple:S={},withRubric:y={},mathMlOptions:k={},baseInputConfiguration:F={}}=t||{},{errors:G={},extraCSSRules:W,feedbackEnabled:L,promptEnabled:z,spellCheckEnabled:N,teacherInstructionsEnabled:B,toolbarEditorPosition:U}=e||{},{prompt:J,teacherInstructions:K}=G,Q=I&&I.prompt,V=v&&v.prompt,X={position:"top"===U?"top":"bottom"},Z={mathInput:f.settings&&D(f.label),equationEditor:d.enabled&&e.mathInput&&q(d.label,["non-negative-integers","integers","decimals","fractions","Grade 1 - 2","Grade 3 - 5","Grade 6 - 7","Grade 8 - HS","geometry","advanced-algebra","statistics","item-authoring"]),spanishInput:g.settings&&D(g.label),specialInput:b.settings&&D(b.label),dimensions:r.settings&&R(r.label,{width:{label:"Width (px)",suffix:"px",min:100,max:1200},height:{label:"Height (px)",suffix:"px",min:100,max:500}}),"multiple.enabled":S.settings&&D(S.label,!0),promptEnabled:u.settings&&D(u.label),feedbackEnabled:c.settings&&D(c.label),annotationsEnabled:o.settings&&D(o.label),spellCheckEnabled:m.settings&&D(m.label),playerSpellCheckDisabled:p.settings&&D(p.label)},$={teacherInstructionsEnabled:E.settings&&D(E.label),studentInstructionsEnabled:_.settings&&D(_.label),rubricEnabled:T([y,"optionalAccess",e=>e.settings])&&D(T([y,"optionalAccess",e=>e.label]))},ee=e=>Object.assign({...F},e||{});return C.createElement(P.ConfigLayout,{extraCSSRules:W,dimensions:l,hideSettings:h,settings:C.createElement(A,{model:e,configuration:t,onChangeModel:e=>a(e),onChangeConfiguration:e=>i(e),groups:{Settings:Z,Properties:$}})},B&&C.createElement(j,{label:E.label},C.createElement(w,{className:"prompt",markup:e.teacherInstructions||"",onChange:this.changeTeacherInstructions,imageSupport:n,nonEmpty:!1,error:K,toolbarOpts:X,spellCheck:N,maxImageWidth:I&&I.teacherInstructions||Q,maxImageHeight:v&&v.teacherInstructions||V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:k,pluginProps:ee(T([E,"optionalAccess",e=>e.inputConfiguration]))}),K&&C.createElement(H,null,K)),z&&C.createElement(j,{label:u.label},C.createElement(w,{activePlugins:M,className:"prompt",markup:e.prompt||"",onChange:this.onPromptChange,imageSupport:n,nonEmpty:!1,error:J,toolbarOpts:X,spellCheck:N,maxImageWidth:Q,maxImageHeight:V,uploadSoundSupport:s,languageCharactersProps:[{language:"spanish"},{language:"special"}],mathMlOptions:k,pluginProps:ee(T([u,"optionalAccess",e=>e.inputConfiguration]))}),J&&C.createElement(H,null,J)),L&&C.createElement(C.Fragment,null,C.createElement(O,{variant:"h6"},"Feedback"),C.createElement(x,{label:"When submitted, show",feedback:e.feedback||Y,onChange:this.changeFeedback,toolbarOpts:X})))}}F.__initStatic();var G={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,spanishInput:!1,specialInput:!1,spellCheckEnabled:!0,studentInstructionsEnabled:!0,teacherInstructions:"",teacherInstructionsEnabled:!0,toolbarEditorPosition:"bottom"},W={annotations:{settings:!1,label:"Annotations"},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}},dimensions:{settings:!0,label:"Text-Entry Display Size"},spellCheck:{label:"Spellcheck",settings:!1,enabled:!0},playerSpellCheck:{label:"Disable Student Spellcheck",settings:!0,enabled:!0},equationEditor:{settings:!1,label:"Equation Editor",enabled:!0},feedback:{settings:!0,label:"Feedback"},mathInput:{settings:!0,label:"Student response can include math notation",enabled:!1},settingsPanelDisabled:!1,spanishInput:{settings:!0,label:"Students can insert Spanish",enabled:!1},specialInput:{settings:!0,label:"Students can insert Special Characters",enabled:!1},multiple:{settings:!1,label:"Multiple Parts",enabled:!1},studentInstructions:{settings:!1,label:"Student Instructions"},prompt:{settings:!0,label:"Prompt",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},teacherInstructions:{settings:!0,label:"Teacher Instructions",inputConfiguration:{audio:{disabled:!1},video:{disabled:!1},image:{disabled:!1}},required:!1},maxImageWidth:{teacherInstructions:300,prompt:300},maxImageHeight:{teacherInstructions:300,prompt:300},withRubric:{settings:!1,label:"Add Rubric"},mathMlOptions:{mmlOutput:!1,mmlEditing:!1}};const L=t;function z(e){let t,n=e[0],i=1;for(;i<e.length;){const a=e[i],s=e[i+1];if(i+=2,("optionalAccess"===a||"optionalCall"===a)&&null==n)return;"access"===a||"optionalAccess"===a?(t=n,n=s(n)):"call"!==a&&"optionalCall"!==a||(n=s((...e)=>n.call(t,...e)),t=void 0)}return n}class N extends HTMLElement{static __initStatic(){this.createDefaultModel=(e={},t)=>{const n={...G,...e};return z([t,"optionalAccess",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&!n.rubricEnabled&&(n.rubricEnabled=!0),n}}constructor(){super(),this._root=null,this._configuration=W,z([this,"access",e=>e._configuration,"access",e=>e.withRubric,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1),this._model=N.createDefaultModel({},this._configuration)}set model(e){this._model=N.createDefaultModel(e,this._configuration),this.render()}set configuration(e){this._configuration={...W,...e};const{withRubric:t={}}=e||{};z([t,"optionalAccess",e=>e.forceEnabled])&&(this._configuration.withRubric.settings=!1,this._model.rubricEnabled||(this._model.rubricEnabled=!0)),this.render()}onModelChanged(e){this._model=e,this.render(),this.dispatchEvent(new d(this._model,!1))}onConfigurationChanged(e){this._configuration={...W,...e},this._model&&this.onModelChanged(this._model),this.render()}insertImage(e){this.dispatchEvent(new h(e))}onDeleteImage(e,t){this.dispatchEvent(new p(e,t))}insertSound(e){this.dispatchEvent(new E(e))}onDeleteSound(e,t){this.dispatchEvent(new b(e,t))}render(){if(this._model){const e=L.createElement(F,{model:this._model,configuration:this._configuration,onModelChanged:this.onModelChanged.bind(this),onConfigurationChanged:this.onConfigurationChanged.bind(this),imageSupport:{add:this.insertImage.bind(this),delete:this.onDeleteImage.bind(this)},uploadSoundSupport:{add:this.insertSound.bind(this),delete:this.onDeleteSound.bind(this)}});this._root||(this._root=_(this)),this._root.render(e)}}disconnectedCallback(){this._root&&this._root.unmount()}}N.__initStatic();export{N as default};

package/module/controller.js

@@ -0,0 +1,139 @@
+/**
+ * Get the feedback from a {FeedbackConfig}
+ *
+ * @param {FeedbackConfig} feedback
+ * @param {string} fallback
+ */
+const getFeedback = (feedback, fallback) =>
+  new Promise((resolve) => {
+    if (!feedback || feedback.type === 'none') {
+      resolve(undefined);
+      return;
+    }
+    feedback = feedback || {};
+    const out = feedback[feedback.type] || fallback;
+    resolve(out);
+  });
+
+var defaults = {
+  annotationsEnabled: false,
+  dimensions: { height: 100, width: 500 },
+  equationEditor: 'Grade 8 - HS',
+  feedbackEnabled: false,
+  mathInput: false,
+  playerSpellCheckDisabled: true,
+  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: true,
+  rationale: '',
+  rationaleEnabled: true,
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+};
+
+async function createDefaultModel(model = {}) {
+
+  return { ...defaults, ...model };
+}
+
+const normalize = (question) => ({ ...defaults, ...question });
+
+async function model(question, session, env) {
+  const normalizedQuestion = normalize(question);
+
+  const fb =
+    env.mode === 'evaluate' && normalizedQuestion.feedbackEnabled
+      ? getFeedback(normalizedQuestion.feedback, 'Your answer has been submitted')
+      : Promise.resolve(undefined);
+
+  let teacherInstructions = null;
+  if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+    teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+  } else {
+    teacherInstructions = null;
+  }
+
+  let equationEditor = normalizedQuestion.equationEditor || 'miscellaneous';
+
+  switch (normalizedQuestion.equationEditor) {
+    case 'Grade 1 - 2':
+      equationEditor = 1;
+      break;
+    case 'Grade 3 - 5':
+      equationEditor = 3;
+      break;
+    case 'Grade 6 - 7':
+      equationEditor = 6;
+      break;
+    case 'Grade 8 - HS':
+      equationEditor = 8;
+      break;
+  }
+
+  const annotatorMode = normalizedQuestion.annotationsEnabled && (env.role === 'instructor' || env.mode === 'evaluate');
+
+  return fb.then((feedback) => ({
+    prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
+    dimensions: normalizedQuestion.dimensions,
+    customKeys: normalizedQuestion.customKeys || [],
+    id: normalizedQuestion.id,
+    disabled: env.mode !== 'gather',
+    feedback,
+    teacherInstructions,
+    language: normalizedQuestion.language,
+    mathInput: normalizedQuestion.mathInput,
+    spanishInput: normalizedQuestion.spanishInput,
+    specialInput: normalizedQuestion.specialInput,
+    equationEditor,
+    spellCheckEnabled: !normalizedQuestion.playerSpellCheckDisabled,
+    playersToolbarPosition: normalizedQuestion.playersToolbarPosition || 'bottom',
+    annotatorMode,
+    disabledAnnotator: normalizedQuestion.annotationsEnabled ? env.role !== 'instructor' : true,
+    predefinedAnnotations: normalizedQuestion.annotationsEnabled ? normalizedQuestion.predefinedAnnotations : [],
+    extraCSSRules: normalizedQuestion.extraCSSRules,
+  }));
+}
+
+async function outcome(/*question, session, env*/) {
+  return {
+    score: 0,
+    completed: 'n/a',
+    note: 'Requires manual scoring',
+  };
+}
+
+// remove all html tags except img, iframe and source tag for audio
+const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
+
+const validate = (model = {}, config = {}) => {
+  const errors = {};
+
+  ['teacherInstructions', 'prompt'].forEach((field) => {
+    if (config[field]?.required && !getContent(model[field])) {
+      errors[field] = 'This field is required.';
+    }
+  });
+
+  return errors;
+};
+
+export { createDefaultModel, model, normalize, outcome, validate };

package/module/demo.js

@@ -0,0 +1,38 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  customKeys: ['\\square'],
+  feedback: { type: 'default', default: 'this is default feedback' },
+  prompt: 'This is the question prompt',
+  promptEnabled: true,
+  mathInput: true,
+  playersToolbarPosition: 'bottom',
+  toolbarEditorPosition: 'bottom',
+  spellCheckEnabled: true,
+  rubricEnabled: false,
+  annotationsEnabled: false,
+});
+
+const { model } = generate;
+var config = {
+  elements: {
+    'extended-text-entry': '../..',
+  },
+  models: [model('1', 'extended-text-entry')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

package/module/element.js

@@ -0,0 +1 @@
+import{_dll_react as e,_dll_prop_types as t,_dll_mui__material as n,_dll_mui__material_styles as o,_dll_lodash as i,_dll_debug as s,_dll_pie_lib__render_ui as a,_dll_react_dom as r}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__math_rendering as l}from"../../../@pie-lib/math-rendering-module@^4.0.5/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as d}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";import{_dll_pie_lib__config_ui as c}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";const h=(e,t,n)=>{const o=n||[],i=o.reduce((e,t)=>e+t.textContent.length,0);let s=!0;if(i>t)return!1;for(e&&(3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&o.push(e),e=e.firstChild);e&&s;)s=h(e,t,o),e=e.nextSibling;return o},p=e=>{const{commonAncestorContainer:t,startContainer:n,endContainer:o,startOffset:i,endOffset:s}=e,a=[];let r=!1,l=!1,d="";const c=e=>{const{nodeValue:t,childNodes:h}=e;e===n&&e===o?(t&&(d+=t.substring(i,s)),r=l=!0):e===n?(t&&(d+=t.substring(i)),r=!0):e===o?(t&&(d+=t.substring(0,s)),l=!0):e&&3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&t&&r&&!l&&(d+=t,a.push(e)),h.forEach(e=>{l||c(e)})};return c(t),[a,d]},m=e=>{const t=document.createElement("SPAN");return e.surroundContents(t),t},u=e=>{if(e.startContainer===e.endContainer)return[m(e)];const[t]=p(e),n=document.createRange();n.selectNodeContents(e.startContainer),n.setStart(e.startContainer,e.startOffset);const o=m(n),i=document.createRange();i.selectNode(e.endContainer),i.setEnd(e.endContainer,e.endOffset);const s=m(i);return[o,...t.map(e=>{const t=document.createElement("SPAN");return e.parentNode.insertBefore(t,e),t.appendChild(e),t}),s]},g=(e,t)=>{(e||[]).forEach(e=>{const t=e.parentNode,n=e.childNodes,o=n.length;if(o>0)for(let i=0;i<o;i++)t.insertBefore(n[0],e);else t.insertBefore(document.createTextNode(e.textContent),e);t.removeChild(e)}),t.normalize()},b=()=>{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()},f=e=>e.length>=20||-1!==e.search(/\n|\r|\r\n/),y=e=>Array.from(document.querySelectorAll(`[data-id='${e}']`)),v=e=>document.querySelector(`[data-ann-id='${e}']`),C=e,x=t,{Popover:_}=n,{TextField:E}=n,{styled:w}=o,S=w(_)(({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]},..."negative"===t&&{"&::before":{borderRightColor:"rgb(255, 204, 238) !important"}},..."positive"===t&&{"&::before":{borderRightColor:"rgb(153, 255, 153) !important"}}}})),A=w("div")(({theme:e,annotationType:t})=>({width:"200px",overflow:"hidden",borderRadius:"4px",backgroundColor:"#ffffff",border:`4px solid ${e.palette.grey[100]}`,..."negative"===t&&{borderColor:"rgb(255, 204, 238) !important"},..."positive"===t&&{borderColor:"rgb(153, 255, 153) !important"}})),k=w("div")(({theme:e})=>({display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`})),R=w("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]},..."positive"===t&&{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},..."negative"===t&&{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}},..."typeChange"===t&&"negative"===n&&{"&:hover":{backgroundColor:"rgb(153, 255, 153) !important"}},..."typeChange"===t&&"positive"===n&&{"&:hover":{backgroundColor:"rgb(255, 204, 238) !important"}}}));class T extends C.Component{static __initStatic(){this.propTypes={anchorEl:x.object,open:x.bool,offset:x.number,value:x.string,type:x.string,onClose:x.func,onDelete:x.func,onSave:x.func,onTypeChange:x.func}}constructor(e){super(e),T.prototype.__init.call(this),T.prototype.__init2.call(this),T.prototype.__init3.call(this),this.state={value:e.value}}UNSAFE_componentWillReceiveProps(e){const{value:t}=e,{value:n}=this.props;t!==n&&this.setState({value:t})}__init(){this.onValueChange=e=>this.setState({value:e.target.value})}__init2(){this.handleSave=()=>{const{value:e,onSave:t,onClose:n,onDelete:o}=this.props,{value:i}=this.state;""===i&&o(),e!==i&&t(e,i),this.setState({value:""}),n()}}__init3(){this.handleTypeChange=()=>{const{onTypeChange:e,onDelete:t}=this.props,{value:n}=this.state;""===n?t():e(n),this.setState({value:""})}}render(){const{anchorEl:e,offset:t,onDelete:n,open:o,type:i}=this.props,{value:s}=this.state;return C.createElement(S,{anchorEl:e,elevation:2,open:o,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"}},C.createElement(A,{annotationType:i},C.createElement(E,{id:"annotation-editor",style:{padding:"2px 5px",width:"95%"},autoFocus:!0,multiline:!0,rows:1,maxRows:4,value:s,onChange:this.onValueChange,InputProps:{disableUnderline:!0}}),C.createElement(k,null,C.createElement(R,{onClick:n},"Delete"),C.createElement(R,{variant:"typeChange",annotationType:i,onClick:this.handleTypeChange},"negative"===i?"Green":"Pink"),C.createElement(R,{onClick:this.handleSave},"Save"))))}}T.__initStatic();const L=e,M=t,{styled:P}=o,{Popover:I}=n,N=P(I)({"& .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:"black"}}}),D=P("div")(({theme:e})=>({width:"300px",overflow:"hidden",borderRadius:"4px",backgroundColor:e.palette.common.white,border:`2px solid ${e.palette.grey[100]}`})),W=P("div")({display:"flex",flexWrap:"wrap"}),H=P("div")(({theme:e})=>({display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`})),z=P("div")(({theme:e,variant:t})=>({width:"22%",textAlign:"center",padding:"4px",cursor:"pointer",borderBottom:`1px solid ${e.palette.grey[100]}`,"&:not(:nth-child(4n))":{borderRight:`1px solid ${e.palette.grey[100]}`},"&:nth-child(4n)":{flexGrow:1},"&:hover":{backgroundColor:e.palette.grey[100]},..."positive"===t&&{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},..."negative"===t&&{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}}}));class $ extends L.Component{static __initStatic(){this.propTypes={anchorEl:M.object,open:M.bool,annotations:M.array,isNewAnnotation:M.bool,onClose:M.func,onDelete:M.func,onEdit:M.func,onWrite:M.func,onAnnotate:M.func}}render(){const{anchorEl:e,annotations:t,isNewAnnotation:n,onAnnotate:o,onClose:i,onEdit:s,onDelete:a,onWrite:r,open:l}=this.props;return L.createElement(N,{anchorEl:e,open:l,onClose:i,elevation:5,transitionDuration:{enter:225,exit:195},anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"}},L.createElement(D,null,L.createElement(W,null,t.map((e,t)=>L.createElement(z,{key:`annotation-${t}`,variant:e.type,onClick:()=>o(e)},e.label))),L.createElement(H,null,L.createElement(z,{onClick:i},"Cancel"),L.createElement(z,{style:{pointerEvents:"none"}}),n?L.createElement(L.Fragment,null,L.createElement(z,{variant:"positive",onClick:()=>r("positive")},"Write"),L.createElement(z,{variant:"negative",onClick:()=>r("negative")},"Write")):L.createElement(L.Fragment,null,L.createElement(z,{onClick:a},"Delete"),L.createElement(z,{onClick:s},"Edit")))))}}$.__initStatic();const O=e,{styled:j}=o,q=t,B=d,{InputContainer:K}=c,F=j("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"}}),U=j("div")({width:"230px"}),V=j("div")({position:"relative",overflowX:"hidden",display:"flex"}),Y=j(K)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2),marginTop:e.spacing(2),width:"100%"}));if(!document.getElementById("annotation-editor-styles")){const e=document.createElement("style");e.id="annotation-editor-styles",e.textContent='\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',document.head.appendChild(e)}class G extends O.Component{static __initStatic(){this.propTypes={text:q.string,comment:q.string,annotations:q.array,predefinedAnnotations:q.array,onChange:q.func.isRequired,onCommentChange:q.func.isRequired,width:q.number,height:q.number,maxHeight:q.string,disabled:q.bool,disabledMath:q.bool,customKeys:q.array,keypadMode:q.string}}constructor(e){super(e),G.prototype.__init.call(this),G.prototype.__init2.call(this),G.prototype.__init3.call(this),G.prototype.__init4.call(this),G.prototype.__init5.call(this),G.prototype.__init6.call(this),G.prototype.__init7.call(this),G.prototype.__init8.call(this),G.prototype.__init9.call(this),G.prototype.__init10.call(this),G.prototype.__init11.call(this),G.prototype.__init12.call(this),G.prototype.__init13.call(this),G.prototype.__init14.call(this),G.prototype.__init15.call(this),this.state={anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotation:null,annotationIndex:null}}componentDidMount(){const{annotations:e,text:t}=this.props;t&&e.forEach(e=>{const[t,n]=((e,t,n)=>{const o=h(n,t),i=[];let s=0;return o.forEach(n=>{const o=s+n.textContent.length;[e,t].forEach(e=>{s<=e&&e<o&&i.push({node:n,offset:e-s})}),s=o}),i})(e.start,e.end,this.textRef);if(t&&n){const o=document.createRange();o.setStart(t.node,t.offset),o.setEnd(n.node,n.offset);const i=u(o);this.createDOMAnnotation(i,e)}}),this.textRef&&(this.adjustAnnotationsPosition(),this.textRef.addEventListener("scroll",this.adjustAnnotationsPosition))}__init(){this.adjustAnnotationsPosition=()=>{if(this.textRef&&this.labelsRef){const e=this.textRef.offsetLeft+this.textRef.offsetWidth+8;Array.from(this.labelsRef.children).forEach(t=>{const n=y(t.dataset.annId),o=(n[0].offsetTop?n[0].offsetTop:n[0].offsetParent.offsetTop)-this.textRef.scrollTop-6;t.style.top=`${o}px`,t.style.left=`${e}px`})}}}__init2(){this.handleClick=e=>{const{annotations:t}=this.props,{selectionDetails:n}=this.state;if(n)return;const{id:o,annId:i}=e.target.dataset,s=o||i,a=y(s),r=v(s),l=t.findIndex(e=>e.id===s),d=r.hasAttribute("data-freeform");d&&(r.style.zIndex="10"),this.setState({anchorEl:a[0],openedMenu:!!o||!!i&&!d,openedEditor:!!i&&d,selectedElems:a,labelElem:r,annotationIndex:l,annotation:t[l],selectionDetails:null})}}__init3(){this.handleHover=e=>{const{id:t,annId:n}=e.target.dataset,o=t||n,i=y(o),s=v(o),a=s.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)")}),a?(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)"))}}__init4(){this.handleCancelHover=e=>{const{id:t,annId:n}=e.target.dataset,o=t||n,i=y(o),s=v(o),a=s.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)")}),a?(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)"))}}__init5(){this.handleClose=e=>{const{selectedElems:t,labelElem:n}=this.state;t.length&&!t[0].hasAttribute("data-id")&&g(t,this.textRef),n&&(n.style.zIndex=""),this.setState({anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotationIndex:null,annotation:null}),b()}}__init6(){this.handleSelection=e=>{const t=window.getSelection();if(e.detail>2)b();else if(t&&t.rangeCount>0){const e=t.getRangeAt(0),n=e.toString(),o=this.textRef.contains(e.commonAncestorContainer);if(!t.isCollapsed&&""!==n&&o){const t=((e,t)=>{const n=document.createRange();n.setStart(t,0),n.setEnd(e.startContainer,e.startOffset);const[,o]=p(n),[,i]=p(e),s=o.length;return{quote:i,start:s,end:s+i.length}})(e,this.textRef),n=u(e);this.setState({anchorEl:n[0],openedMenu:!0,selectedElems:n,selectionDetails:t})}}}}__init7(){this.deleteAnnotation=()=>{const{annotations:e,onChange:t}=this.props,{selectedElems:n,labelElem:o,annotationIndex:i,annotation:s}=this.state;(f(s.label)?this.labelsRef:n[0]).removeChild(o),g(n,this.textRef),e.splice(i,1),t(e),this.handleClose()}}__init8(){this.createDOMAnnotation=(e,t)=>{const{disabled:n}=this.props,{id:o,label:i,type:s}=t;(e||[]).forEach(e=>{e.dataset.id=o,e.className=`annotation ${s}`,e.style.position="relative",e.style.cursor="pointer","positive"===s?e.style.backgroundColor="rgb(51, 255, 51, 0.5)":"negative"===s&&(e.style.backgroundColor="rgba(255, 102, 204, 0.4)"),e.onclick=!n&&this.handleClick,e.onmouseover=this.handleHover,e.onmouseout=this.handleCancelHover});const a=e&&e[0]||{},r=document.createElement("SPAN");if(r.dataset.annId=o,r.innerHTML=i,r.onclick=!n&&this.handleClick,r.onmouseover=this.handleHover,r.onmouseout=this.handleCancelHover,f(i)){const e=(a.offsetTop?a.offsetTop:a.offsetParent.offsetTop)-this.textRef.scrollTop,t=this.textRef.offsetLeft+this.textRef.offsetWidth+8;r.dataset.freeform=!0,r.className=`sideAnnotation ${s}`,r.style.position="absolute",r.style.padding="4px",r.style.borderRadius="4px",r.style.marginLeft="8px",r.style.width="180px",r.style.whiteSpace="pre-wrap",r.style.wordBreak="break-word",r.style.border="2px solid #ffffff",r.style.fontSize="14px",r.style.fontStyle="normal",r.style.fontWeight="normal",r.style.top=`${e}px`,r.style.left=`${t}px`,"negative"===s?r.style.backgroundColor="rgb(255, 204, 238)":"positive"===s&&(r.style.backgroundColor="rgb(153, 255, 153)"),r.style.setProperty("--before-border-width","7px"),r.style.setProperty("--before-top","5px"),r.style.setProperty("--before-right","100%"),"negative"===s?r.style.setProperty("--before-border-color","rgb(255, 204, 238)"):"positive"===s&&r.style.setProperty("--before-border-color","rgb(153, 255, 153)"),this.labelsRef.appendChild(r)}else r.className=`annotationLabel ${s}`,r.style.backgroundColor="rgb(242, 242, 242)",r.style.padding="2px",r.style.position="absolute",r.style.userSelect="none",r.style.whiteSpace="nowrap",r.style.top="-10px",r.style.left="-2px",r.style.fontSize="12px",r.style.fontStyle="normal",r.style.fontWeight="normal",r.style.lineHeight="6px",r.style.webkitUserSelect="none",r.style.mozUserSelect="none",r.style.msUserSelect="none","positive"===s?r.style.color="rgb(0, 128, 0)":"negative"===s&&(r.style.color="rgb(204, 0, 136)"),a.appendChild(r)}}__init9(){this.createNewAnnotation=(e,t)=>{const{selectedElems:n,selectionDetails:o}=this.state,i={id:[o.start,o.end,(new Date).getTime()].join("-"),label:e,type:t,...o};return this.createDOMAnnotation(n,i),i}}__init10(){this.handleMenuClick=e=>{const{annotations:t,onChange:n}=this.props,{annotation:o,annotationIndex:i}=this.state,{type:s,text:a}=e;if(o){const e={...o,label:a,type:s},{type:n,label:r}=o;this.updateLabel(r,e,s!==n&&n),t.splice(i,1,e)}else{const e=this.createNewAnnotation(a,s);t.push(e)}n(t),this.handleClose()}}__init11(){this.editAnnotation=()=>{this.setState({openedMenu:!1,openedEditor:!0})}}__init12(){this.addAnnotation=e=>{const{annotations:t,onChange:n}=this.props,o=this.createNewAnnotation("",e),i=v(o.id);t.push(o),this.setState({openedMenu:!1,openedEditor:!0,annotationIndex:t.length-1,annotation:o,labelElem:i}),n(t)}}__init13(){this.updateLabel=(e,t,n)=>{const{selectedElems:o,labelElem:i}=this.state,{label:s,type:a}=t;f(s)&&f(e)||!f(s)&&!f(e)?(i.innerHTML=s,n&&(i.classList.remove(n),i.classList.add(a),o.forEach(e=>{e.classList.remove(n),e.classList.add(a)}))):f(s)&&!f(e)?(o[0].removeChild(i),this.createDOMAnnotation(o,t)):!f(s)&&f(e)&&(this.labelsRef.removeChild(i),this.createDOMAnnotation(o,t))}}__init14(){this.changeAnnotationType=e=>{const{annotations:t,onChange:n}=this.props,{annotationIndex:o,selectedElems:i}=this.state,{type:s,label:a}=t[o],r="positive"===s?"negative":"positive",l={...t[o],type:r,label:e};i.forEach(e=>{e.classList.remove(s),e.classList.add(r)}),this.updateLabel(a,l,s),t.splice(o,1,l),n(t),this.handleClose()}}__init15(){this.updateAnnotation=(e,t)=>{const{annotations:n,onChange:o}=this.props,{annotationIndex:i}=this.state,s={...n[i],label:t};this.updateLabel(e,s),n.splice(i,1,s),o(n)}}componentWillUnmount(){this.textRef.removeEventListener("scroll",this.adjustAnnotationsPosition)}render(){const{comment:e,customKeys:t,disabled:n,disabledMath:o,keypadMode:i,height:s,width:a,maxHeight:r,onCommentChange:l,predefinedAnnotations:d,text:c}=this.props,{anchorEl:h,annotation:p,openedMenu:m,openedEditor:u,selectionDetails:g}=this.state,f=h&&(h.offsetTop?h.offsetTop:h.offsetParent.offsetTop),y=this.textRef&&f?f-this.textRef.scrollTop-8:0;return O.createElement("div",null,O.createElement(V,null,O.createElement(F,{style:{width:a-34,minHeight:s,maxHeight:r},ref:e=>this.textRef=e,onMouseDown:n?()=>{}:b,onMouseUp:n?()=>{}:this.handleSelection,dangerouslySetInnerHTML:{__html:c}}),O.createElement(U,{ref:e=>this.labelsRef=e})),O.createElement(Y,{label:"Comment"},O.createElement(B,{className:"prompt",markup:e||"",onChange:l,width:a&&(a+104).toString(),disabled:n,pluginProps:{math:{disabled:o,customKeys:t,keypadMode:i,controlledKeypadMode:!1},video:{disabled:!0},audio:{disabled:!0},textAlign:{disabled:!0}}})),O.createElement($,{anchorEl:h,open:m&&!n,annotations:d,isNewAnnotation:!!g,onClose:this.handleClose,onDelete:this.deleteAnnotation,onEdit:this.editAnnotation,onWrite:this.addAnnotation,onAnnotate:this.handleMenuClick}),O.createElement(T,{anchorEl:this.textRef,open:u&&!n,offset:y,value:p&&p.label||"",type:p&&p.type,onClose:this.handleClose,onDelete:this.deleteAnnotation,onSave:this.updateAnnotation,onTypeChange:this.changeAnnotationType}))}}G.__initStatic();const X=e,Q=t,{debounce:J}=i,Z=s,{Typography:ee}=n,{styled:te}=o,{color:ne}=a,{Feedback:oe}=a,{Collapsible:ie}=a,{PreviewPrompt:se}=a,{UiLayout:ae}=a,re=d,le=Z("@pie-ui:extended-text-entry"),de=te(ae)({backgroundColor:ne.background(),color:ne.text()}),ce=te(ee)(({theme:e})=>({width:"100%",color:ne.text(),marginBottom:e.spacing(2),fontSize:"inherit"})),he=te("div")(({theme:e})=>({marginBottom:e.spacing(2)})),pe=te(re)(({theme:e})=>({marginBottom:e.spacing(2),borderRadius:"4px"})),me=te("h2")({position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"});class ue extends X.Component{constructor(...e){super(...e),ue.prototype.__init.call(this),ue.prototype.__init2.call(this)}static __initStatic(){this.propTypes={onValueChange:Q.func.isRequired,onAnnotationsChange:Q.func.isRequired,onCommentChange:Q.func.isRequired,model:Q.object,session:Q.shape({value:Q.string,annotations:Q.array,comment:Q.string}).isRequired}}__init(){this.changeSessionValue=J(this.props.onValueChange,1500)}__init2(){this.changeSessionComment=J(this.props.onCommentChange,1500)}render(){const{model:e,session:t,onAnnotationsChange:n}=this.props,{animationsDisabled:o,annotatorMode:i,customKeys:s,dimensions:a,disabled:r,disabledAnnotator:l,equationEditor:d,extraCSSRules:c,feedback:h,mathInput:p,playersToolbarPosition:m,predefinedAnnotations:u,prompt:g,spanishInput:b,specialInput:f,spellCheckEnabled:y,teacherInstructions:v}=e,{annotations:C,comment:x,value:_}=t,{width:E,height:w}=a||{},S="40vh",A={position:"top"===m?"top":"bottom"};le("[render] disabled? ",r);const k=X.createElement(se,{defaultClassName:"teacher-instructions",prompt:v}),R=[];return b&&R.push({language:"spanish"}),f&&R.push({language:"special"}),X.createElement(de,{extraCSSRules:c,ref:e=>{this.containerRef=e}},X.createElement(me,null,"Constructed Response Question"),v&&X.createElement(he,null,o?k:X.createElement(ie,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},k)),g&&X.createElement(ce,{component:"span"},X.createElement(se,{defaultClassName:"prompt",prompt:e.prompt})),i?X.createElement(G,{text:_||"",annotations:C||[],comment:x||"",predefinedAnnotations:u||[],onChange:n,onCommentChange:this.changeSessionComment,width:E,height:w,maxHeight:S,disabled:l,disabledMath:!p,customKeys:s,keypadMode:d}):X.createElement(pe,{className:"response-area-editor",onChange:this.changeSessionValue,markup:_||"",maxWidth:E&&E.toString(),minWidth:"100px",minHeight:w&&w.toString(),maxHeight:S,disabled:r,highlightShape:!0,toolbarOpts:A,spellCheck:y,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},separateParagraphs:{disabled:!1},ul_list:{disabled:!0},ol_list:{disabled:!0}},languageCharactersProps:R}),h&&X.createElement(oe,{correctness:"correct",feedback:h}))}}ue.__initStatic();var ge,be=r;ge=be.createRoot,be.hydrateRoot;var fe={};Object.defineProperty(fe,"__esModule",{value:!0});class ye extends CustomEvent{constructor(e,t,n){super(ye.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e,hasModel:n}}),this.component=e,this.complete=t}}ye.TYPE="model-set";var ve=fe.ModelSetEvent=ye;class Ce extends CustomEvent{constructor(e,t){super(Ce.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e}}),this.component=e,this.complete=t}}Ce.TYPE="session-changed";var xe=fe.SessionChangedEvent=Ce;const _e=e,Ee=s,{renderMath:we}=l,Se=Ee("@pie-elements:extended-text-entry"),Ae=void 0!==typeof window?new DOMParser:{parseFromString:e=>e};function ke(e){if("string"==typeof e)try{const t=Ae.parseFromString(e,"text/html");return t.body.textContent}catch(t){return Se("tried to parse as dom and failed",e),e}}function Re(e){const t=ke(e);return void 0!==t&&t.length>0}class Te extends HTMLElement{constructor(){super(),this._model=null,this._session=null,this._root=null}setLangAttribute(){const e=this._model&&(this._model.language,1)?this._model.language:"",t=e?e.slice(0,2):"en";this.setAttribute("lang",t)}set model(e){this._model=e,this.dispatchEvent(new ve(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 xe(this.tagName.toLowerCase(),Re(e))),this.render()}annotationsChange(e){this._session.annotations=e,this.dispatchEvent(new xe(this.tagName.toLowerCase(),!0)),this.render()}commentChange(e){this._session.comment=e,this.dispatchEvent(new xe(this.tagName.toLowerCase(),Re(e))),this.render()}connectedCallback(){this.setAttribute("aria-label","Written Response Question"),this.setAttribute("role","region"),this.render()}render(){if(this._model&&this._session){let e=_e.createElement(ue,{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||(this._root=ge(this)),this._root.render(e),queueMicrotask(()=>{we(this)})}}disconnectedCallback(){this._root&&this._root.unmount()}}export{Te as default,Re as isComplete,ke as textContent};

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/extended-text-entry@14.0.0-beta.1</title>
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
+     
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./demo.js"></script> 
+    </head>
+  </html>

package/module/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "@pie-element/extended-text-entry",
+  "version": "14.0.0-beta.1",
+  "modules": [
+    {
+      "name": "@pie-lib/shared-module",
+      "version": "^3.0.5"
+    },
+    {
+      "name": "@pie-lib/math-rendering-module",
+      "version": "^4.0.5"
+    },
+    {
+      "name": "@pie-lib/editable-html-module",
+      "version": "^6.0.5"
+    },
+    {
+      "name": "@pie-lib/config-module",
+      "version": "^3.0.0"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,76 @@
+import PrintElement from './print.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  customKeys: ['\\square'],
+  feedback: { type: 'default', default: 'this is default feedback' },
+  prompt: 'This is the question prompt',
+  promptEnabled: true,
+  mathInput: true,
+  playersToolbarPosition: 'bottom',
+  toolbarEditorPosition: 'bottom',
+  spellCheckEnabled: true,
+  rubricEnabled: false,
+  annotationsEnabled: false,
+});
+
+const { model } = generate;
+var config = {
+  elements: {
+    'extended-text-entry': '../..',
+  },
+  models: [model('1', 'extended-text-entry')],
+};
+
+// new init - just shows off print!
+
+const init = async () => {
+  console.log('define the element...');
+  await Promise.all(
+    config.models.map(async (m) => {
+      try {
+        const printTag = `${m.element}-print`;
+        if (customElements.get(printTag)) {
+          return true;
+        } else {
+          customElements.define(printTag, PrintElement);
+          await customElements.whenDefined(printTag);
+          return true;
+        }
+      } catch (e) {
+        return false;
+      }
+    })
+  );
+
+  console.log('now apply the model...');
+  config.models.forEach((m) => {
+    const printTag = `${m.element}-print`;
+    const h3s = document.createElement('h3');
+    h3s.textContent = 'student mode';
+    document.body.appendChild(h3s);
+    const de = document.createElement(printTag);
+    document.body.appendChild(de);
+    de.options = {};
+    de.model = m;
+
+    const h3 = document.createElement('h3');
+    h3.textContent = 'instructor mode';
+    document.body.appendChild(h3);
+    const instr = document.createElement(printTag);
+    document.body.appendChild(instr);
+    instr.options = { mode: 'instructor' };
+    instr.model = JSON.parse(JSON.stringify(m));
+  });
+};
+
+init()
+  .then(() => {
+    console.log('ready');
+  })
+  .catch((e) => {
+    console.error(e);
+  });

package/module/print.html

@@ -0,0 +1,18 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/extended-text-entry@14.0.0-beta.1</title>
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./print-demo.js"></script> 
+    </head>
+    <body></body>
+  </html>

package/module/print.js

@@ -0,0 +1 @@
+import{_dll_react_dom as e,_dll_react as t,_dll_prop_types as n,_dll_mui__material as o,_dll_mui__material_styles as i,_dll_lodash as s,_dll_debug as a,_dll_pie_lib__render_ui as r}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";import{_dll_pie_lib__math_rendering as l}from"../../../@pie-lib/math-rendering-module@^4.0.5/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as d}from"../../../@pie-lib/editable-html-module@^6.0.5/module/index.js";import{_dll_pie_lib__config_ui as c}from"../../../@pie-lib/config-module@^3.0.0/module/index.js";var p,h=e;p=h.createRoot,h.hydrateRoot;const m=(e,t,n)=>{const o=n||[],i=o.reduce((e,t)=>e+t.textContent.length,0);let s=!0;if(i>t)return!1;for(e&&(3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&o.push(e),e=e.firstChild);e&&s;)s=m(e,t,o),e=e.nextSibling;return o},u=e=>{const{commonAncestorContainer:t,startContainer:n,endContainer:o,startOffset:i,endOffset:s}=e,a=[];let r=!1,l=!1,d="";const c=e=>{const{nodeValue:t,childNodes:p}=e;e===n&&e===o?(t&&(d+=t.substring(i,s)),r=l=!0):e===n?(t&&(d+=t.substring(i)),r=!0):e===o?(t&&(d+=t.substring(0,s)),l=!0):e&&3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&t&&r&&!l&&(d+=t,a.push(e)),p.forEach(e=>{l||c(e)})};return c(t),[a,d]},g=e=>{const t=document.createElement("SPAN");return e.surroundContents(t),t},b=e=>{if(e.startContainer===e.endContainer)return[g(e)];const[t]=u(e),n=document.createRange();n.selectNodeContents(e.startContainer),n.setStart(e.startContainer,e.startOffset);const o=g(n),i=document.createRange();i.selectNode(e.endContainer),i.setEnd(e.endContainer,e.endOffset);const s=g(i);return[o,...t.map(e=>{const t=document.createElement("SPAN");return e.parentNode.insertBefore(t,e),t.appendChild(e),t}),s]},f=(e,t)=>{(e||[]).forEach(e=>{const t=e.parentNode,n=e.childNodes,o=n.length;if(o>0)for(let i=0;i<o;i++)t.insertBefore(n[0],e);else t.insertBefore(document.createTextNode(e.textContent),e);t.removeChild(e)}),t.normalize()},y=()=>{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()},v=e=>e.length>=20||-1!==e.search(/\n|\r|\r\n/),C=e=>Array.from(document.querySelectorAll(`[data-id='${e}']`)),x=e=>document.querySelector(`[data-ann-id='${e}']`),_=t,E=n,{Popover:w}=o,{TextField:S}=o,{styled:k}=i,A=k(w)(({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]},..."negative"===t&&{"&::before":{borderRightColor:"rgb(255, 204, 238) !important"}},..."positive"===t&&{"&::before":{borderRightColor:"rgb(153, 255, 153) !important"}}}})),R=k("div")(({theme:e,annotationType:t})=>({width:"200px",overflow:"hidden",borderRadius:"4px",backgroundColor:"#ffffff",border:`4px solid ${e.palette.grey[100]}`,..."negative"===t&&{borderColor:"rgb(255, 204, 238) !important"},..."positive"===t&&{borderColor:"rgb(153, 255, 153) !important"}})),T=k("div")(({theme:e})=>({display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`})),I=k("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]},..."positive"===t&&{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},..."negative"===t&&{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}},..."typeChange"===t&&"negative"===n&&{"&:hover":{backgroundColor:"rgb(153, 255, 153) !important"}},..."typeChange"===t&&"positive"===n&&{"&:hover":{backgroundColor:"rgb(255, 204, 238) !important"}}}));class M extends _.Component{static __initStatic(){this.propTypes={anchorEl:E.object,open:E.bool,offset:E.number,value:E.string,type:E.string,onClose:E.func,onDelete:E.func,onSave:E.func,onTypeChange:E.func}}constructor(e){super(e),M.prototype.__init.call(this),M.prototype.__init2.call(this),M.prototype.__init3.call(this),this.state={value:e.value}}UNSAFE_componentWillReceiveProps(e){const{value:t}=e,{value:n}=this.props;t!==n&&this.setState({value:t})}__init(){this.onValueChange=e=>this.setState({value:e.target.value})}__init2(){this.handleSave=()=>{const{value:e,onSave:t,onClose:n,onDelete:o}=this.props,{value:i}=this.state;""===i&&o(),e!==i&&t(e,i),this.setState({value:""}),n()}}__init3(){this.handleTypeChange=()=>{const{onTypeChange:e,onDelete:t}=this.props,{value:n}=this.state;""===n?t():e(n),this.setState({value:""})}}render(){const{anchorEl:e,offset:t,onDelete:n,open:o,type:i}=this.props,{value:s}=this.state;return _.createElement(A,{anchorEl:e,elevation:2,open:o,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"}},_.createElement(R,{annotationType:i},_.createElement(S,{id:"annotation-editor",style:{padding:"2px 5px",width:"95%"},autoFocus:!0,multiline:!0,rows:1,maxRows:4,value:s,onChange:this.onValueChange,InputProps:{disableUnderline:!0}}),_.createElement(T,null,_.createElement(I,{onClick:n},"Delete"),_.createElement(I,{variant:"typeChange",annotationType:i,onClick:this.handleTypeChange},"negative"===i?"Green":"Pink"),_.createElement(I,{onClick:this.handleSave},"Save"))))}}M.__initStatic();const L=t,P=n,{styled:D}=i,{Popover:N}=o,H=D(N)({"& .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:"black"}}}),W=D("div")(({theme:e})=>({width:"300px",overflow:"hidden",borderRadius:"4px",backgroundColor:e.palette.common.white,border:`2px solid ${e.palette.grey[100]}`})),z=D("div")({display:"flex",flexWrap:"wrap"}),$=D("div")(({theme:e})=>({display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`})),O=D("div")(({theme:e,variant:t})=>({width:"22%",textAlign:"center",padding:"4px",cursor:"pointer",borderBottom:`1px solid ${e.palette.grey[100]}`,"&:not(:nth-child(4n))":{borderRight:`1px solid ${e.palette.grey[100]}`},"&:nth-child(4n)":{flexGrow:1},"&:hover":{backgroundColor:e.palette.grey[100]},..."positive"===t&&{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},..."negative"===t&&{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}}}));class j extends L.Component{static __initStatic(){this.propTypes={anchorEl:P.object,open:P.bool,annotations:P.array,isNewAnnotation:P.bool,onClose:P.func,onDelete:P.func,onEdit:P.func,onWrite:P.func,onAnnotate:P.func}}render(){const{anchorEl:e,annotations:t,isNewAnnotation:n,onAnnotate:o,onClose:i,onEdit:s,onDelete:a,onWrite:r,open:l}=this.props;return L.createElement(H,{anchorEl:e,open:l,onClose:i,elevation:5,transitionDuration:{enter:225,exit:195},anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"}},L.createElement(W,null,L.createElement(z,null,t.map((e,t)=>L.createElement(O,{key:`annotation-${t}`,variant:e.type,onClick:()=>o(e)},e.label))),L.createElement($,null,L.createElement(O,{onClick:i},"Cancel"),L.createElement(O,{style:{pointerEvents:"none"}}),n?L.createElement(L.Fragment,null,L.createElement(O,{variant:"positive",onClick:()=>r("positive")},"Write"),L.createElement(O,{variant:"negative",onClick:()=>r("negative")},"Write")):L.createElement(L.Fragment,null,L.createElement(O,{onClick:a},"Delete"),L.createElement(O,{onClick:s},"Edit")))))}}j.__initStatic();const q=t,{styled:B}=i,K=n,U=d,{InputContainer:V}=c,F=B("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"}}),G=B("div")({width:"230px"}),X=B("div")({position:"relative",overflowX:"hidden",display:"flex"}),Y=B(V)(({theme:e})=>({paddingTop:e.spacing(2),marginBottom:e.spacing(2),marginTop:e.spacing(2),width:"100%"}));if(!document.getElementById("annotation-editor-styles")){const e=document.createElement("style");e.id="annotation-editor-styles",e.textContent='\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',document.head.appendChild(e)}class Q extends q.Component{static __initStatic(){this.propTypes={text:K.string,comment:K.string,annotations:K.array,predefinedAnnotations:K.array,onChange:K.func.isRequired,onCommentChange:K.func.isRequired,width:K.number,height:K.number,maxHeight:K.string,disabled:K.bool,disabledMath:K.bool,customKeys:K.array,keypadMode:K.string}}constructor(e){super(e),Q.prototype.__init.call(this),Q.prototype.__init2.call(this),Q.prototype.__init3.call(this),Q.prototype.__init4.call(this),Q.prototype.__init5.call(this),Q.prototype.__init6.call(this),Q.prototype.__init7.call(this),Q.prototype.__init8.call(this),Q.prototype.__init9.call(this),Q.prototype.__init10.call(this),Q.prototype.__init11.call(this),Q.prototype.__init12.call(this),Q.prototype.__init13.call(this),Q.prototype.__init14.call(this),Q.prototype.__init15.call(this),this.state={anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotation:null,annotationIndex:null}}componentDidMount(){const{annotations:e,text:t}=this.props;t&&e.forEach(e=>{const[t,n]=((e,t,n)=>{const o=m(n,t),i=[];let s=0;return o.forEach(n=>{const o=s+n.textContent.length;[e,t].forEach(e=>{s<=e&&e<o&&i.push({node:n,offset:e-s})}),s=o}),i})(e.start,e.end,this.textRef);if(t&&n){const o=document.createRange();o.setStart(t.node,t.offset),o.setEnd(n.node,n.offset);const i=b(o);this.createDOMAnnotation(i,e)}}),this.textRef&&(this.adjustAnnotationsPosition(),this.textRef.addEventListener("scroll",this.adjustAnnotationsPosition))}__init(){this.adjustAnnotationsPosition=()=>{if(this.textRef&&this.labelsRef){const e=this.textRef.offsetLeft+this.textRef.offsetWidth+8;Array.from(this.labelsRef.children).forEach(t=>{const n=C(t.dataset.annId),o=(n[0].offsetTop?n[0].offsetTop:n[0].offsetParent.offsetTop)-this.textRef.scrollTop-6;t.style.top=`${o}px`,t.style.left=`${e}px`})}}}__init2(){this.handleClick=e=>{const{annotations:t}=this.props,{selectionDetails:n}=this.state;if(n)return;const{id:o,annId:i}=e.target.dataset,s=o||i,a=C(s),r=x(s),l=t.findIndex(e=>e.id===s),d=r.hasAttribute("data-freeform");d&&(r.style.zIndex="10"),this.setState({anchorEl:a[0],openedMenu:!!o||!!i&&!d,openedEditor:!!i&&d,selectedElems:a,labelElem:r,annotationIndex:l,annotation:t[l],selectionDetails:null})}}__init3(){this.handleHover=e=>{const{id:t,annId:n}=e.target.dataset,o=t||n,i=C(o),s=x(o),a=s.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)")}),a?(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)"))}}__init4(){this.handleCancelHover=e=>{const{id:t,annId:n}=e.target.dataset,o=t||n,i=C(o),s=x(o),a=s.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)")}),a?(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)"))}}__init5(){this.handleClose=e=>{const{selectedElems:t,labelElem:n}=this.state;t.length&&!t[0].hasAttribute("data-id")&&f(t,this.textRef),n&&(n.style.zIndex=""),this.setState({anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotationIndex:null,annotation:null}),y()}}__init6(){this.handleSelection=e=>{const t=window.getSelection();if(e.detail>2)y();else if(t&&t.rangeCount>0){const e=t.getRangeAt(0),n=e.toString(),o=this.textRef.contains(e.commonAncestorContainer);if(!t.isCollapsed&&""!==n&&o){const t=((e,t)=>{const n=document.createRange();n.setStart(t,0),n.setEnd(e.startContainer,e.startOffset);const[,o]=u(n),[,i]=u(e),s=o.length;return{quote:i,start:s,end:s+i.length}})(e,this.textRef),n=b(e);this.setState({anchorEl:n[0],openedMenu:!0,selectedElems:n,selectionDetails:t})}}}}__init7(){this.deleteAnnotation=()=>{const{annotations:e,onChange:t}=this.props,{selectedElems:n,labelElem:o,annotationIndex:i,annotation:s}=this.state;(v(s.label)?this.labelsRef:n[0]).removeChild(o),f(n,this.textRef),e.splice(i,1),t(e),this.handleClose()}}__init8(){this.createDOMAnnotation=(e,t)=>{const{disabled:n}=this.props,{id:o,label:i,type:s}=t;(e||[]).forEach(e=>{e.dataset.id=o,e.className=`annotation ${s}`,e.style.position="relative",e.style.cursor="pointer","positive"===s?e.style.backgroundColor="rgb(51, 255, 51, 0.5)":"negative"===s&&(e.style.backgroundColor="rgba(255, 102, 204, 0.4)"),e.onclick=!n&&this.handleClick,e.onmouseover=this.handleHover,e.onmouseout=this.handleCancelHover});const a=e&&e[0]||{},r=document.createElement("SPAN");if(r.dataset.annId=o,r.innerHTML=i,r.onclick=!n&&this.handleClick,r.onmouseover=this.handleHover,r.onmouseout=this.handleCancelHover,v(i)){const e=(a.offsetTop?a.offsetTop:a.offsetParent.offsetTop)-this.textRef.scrollTop,t=this.textRef.offsetLeft+this.textRef.offsetWidth+8;r.dataset.freeform=!0,r.className=`sideAnnotation ${s}`,r.style.position="absolute",r.style.padding="4px",r.style.borderRadius="4px",r.style.marginLeft="8px",r.style.width="180px",r.style.whiteSpace="pre-wrap",r.style.wordBreak="break-word",r.style.border="2px solid #ffffff",r.style.fontSize="14px",r.style.fontStyle="normal",r.style.fontWeight="normal",r.style.top=`${e}px`,r.style.left=`${t}px`,"negative"===s?r.style.backgroundColor="rgb(255, 204, 238)":"positive"===s&&(r.style.backgroundColor="rgb(153, 255, 153)"),r.style.setProperty("--before-border-width","7px"),r.style.setProperty("--before-top","5px"),r.style.setProperty("--before-right","100%"),"negative"===s?r.style.setProperty("--before-border-color","rgb(255, 204, 238)"):"positive"===s&&r.style.setProperty("--before-border-color","rgb(153, 255, 153)"),this.labelsRef.appendChild(r)}else r.className=`annotationLabel ${s}`,r.style.backgroundColor="rgb(242, 242, 242)",r.style.padding="2px",r.style.position="absolute",r.style.userSelect="none",r.style.whiteSpace="nowrap",r.style.top="-10px",r.style.left="-2px",r.style.fontSize="12px",r.style.fontStyle="normal",r.style.fontWeight="normal",r.style.lineHeight="6px",r.style.webkitUserSelect="none",r.style.mozUserSelect="none",r.style.msUserSelect="none","positive"===s?r.style.color="rgb(0, 128, 0)":"negative"===s&&(r.style.color="rgb(204, 0, 136)"),a.appendChild(r)}}__init9(){this.createNewAnnotation=(e,t)=>{const{selectedElems:n,selectionDetails:o}=this.state,i={id:[o.start,o.end,(new Date).getTime()].join("-"),label:e,type:t,...o};return this.createDOMAnnotation(n,i),i}}__init10(){this.handleMenuClick=e=>{const{annotations:t,onChange:n}=this.props,{annotation:o,annotationIndex:i}=this.state,{type:s,text:a}=e;if(o){const e={...o,label:a,type:s},{type:n,label:r}=o;this.updateLabel(r,e,s!==n&&n),t.splice(i,1,e)}else{const e=this.createNewAnnotation(a,s);t.push(e)}n(t),this.handleClose()}}__init11(){this.editAnnotation=()=>{this.setState({openedMenu:!1,openedEditor:!0})}}__init12(){this.addAnnotation=e=>{const{annotations:t,onChange:n}=this.props,o=this.createNewAnnotation("",e),i=x(o.id);t.push(o),this.setState({openedMenu:!1,openedEditor:!0,annotationIndex:t.length-1,annotation:o,labelElem:i}),n(t)}}__init13(){this.updateLabel=(e,t,n)=>{const{selectedElems:o,labelElem:i}=this.state,{label:s,type:a}=t;v(s)&&v(e)||!v(s)&&!v(e)?(i.innerHTML=s,n&&(i.classList.remove(n),i.classList.add(a),o.forEach(e=>{e.classList.remove(n),e.classList.add(a)}))):v(s)&&!v(e)?(o[0].removeChild(i),this.createDOMAnnotation(o,t)):!v(s)&&v(e)&&(this.labelsRef.removeChild(i),this.createDOMAnnotation(o,t))}}__init14(){this.changeAnnotationType=e=>{const{annotations:t,onChange:n}=this.props,{annotationIndex:o,selectedElems:i}=this.state,{type:s,label:a}=t[o],r="positive"===s?"negative":"positive",l={...t[o],type:r,label:e};i.forEach(e=>{e.classList.remove(s),e.classList.add(r)}),this.updateLabel(a,l,s),t.splice(o,1,l),n(t),this.handleClose()}}__init15(){this.updateAnnotation=(e,t)=>{const{annotations:n,onChange:o}=this.props,{annotationIndex:i}=this.state,s={...n[i],label:t};this.updateLabel(e,s),n.splice(i,1,s),o(n)}}componentWillUnmount(){this.textRef.removeEventListener("scroll",this.adjustAnnotationsPosition)}render(){const{comment:e,customKeys:t,disabled:n,disabledMath:o,keypadMode:i,height:s,width:a,maxHeight:r,onCommentChange:l,predefinedAnnotations:d,text:c}=this.props,{anchorEl:p,annotation:h,openedMenu:m,openedEditor:u,selectionDetails:g}=this.state,b=p&&(p.offsetTop?p.offsetTop:p.offsetParent.offsetTop),f=this.textRef&&b?b-this.textRef.scrollTop-8:0;return q.createElement("div",null,q.createElement(X,null,q.createElement(F,{style:{width:a-34,minHeight:s,maxHeight:r},ref:e=>this.textRef=e,onMouseDown:n?()=>{}:y,onMouseUp:n?()=>{}:this.handleSelection,dangerouslySetInnerHTML:{__html:c}}),q.createElement(G,{ref:e=>this.labelsRef=e})),q.createElement(Y,{label:"Comment"},q.createElement(U,{className:"prompt",markup:e||"",onChange:l,width:a&&(a+104).toString(),disabled:n,pluginProps:{math:{disabled:o,customKeys:t,keypadMode:i,controlledKeypadMode:!1},video:{disabled:!0},audio:{disabled:!0},textAlign:{disabled:!0}}})),q.createElement(j,{anchorEl:p,open:m&&!n,annotations:d,isNewAnnotation:!!g,onClose:this.handleClose,onDelete:this.deleteAnnotation,onEdit:this.editAnnotation,onWrite:this.addAnnotation,onAnnotate:this.handleMenuClick}),q.createElement(M,{anchorEl:this.textRef,open:u&&!n,offset:f,value:h&&h.label||"",type:h&&h.type,onClose:this.handleClose,onDelete:this.deleteAnnotation,onSave:this.updateAnnotation,onTypeChange:this.changeAnnotationType}))}}Q.__initStatic();const J=t,Z=n,{debounce:ee}=s,te=a,{Typography:ne}=o,{styled:oe}=i,{color:ie}=r,{Feedback:se}=r,{Collapsible:ae}=r,{PreviewPrompt:re}=r,{UiLayout:le}=r,de=d,ce=te("@pie-ui:extended-text-entry"),pe=oe(le)({backgroundColor:ie.background(),color:ie.text()}),he=oe(ne)(({theme:e})=>({width:"100%",color:ie.text(),marginBottom:e.spacing(2),fontSize:"inherit"})),me=oe("div")(({theme:e})=>({marginBottom:e.spacing(2)})),ue=oe(de)(({theme:e})=>({marginBottom:e.spacing(2),borderRadius:"4px"})),ge=oe("h2")({position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"});class be extends J.Component{constructor(...e){super(...e),be.prototype.__init.call(this),be.prototype.__init2.call(this)}static __initStatic(){this.propTypes={onValueChange:Z.func.isRequired,onAnnotationsChange:Z.func.isRequired,onCommentChange:Z.func.isRequired,model:Z.object,session:Z.shape({value:Z.string,annotations:Z.array,comment:Z.string}).isRequired}}__init(){this.changeSessionValue=ee(this.props.onValueChange,1500)}__init2(){this.changeSessionComment=ee(this.props.onCommentChange,1500)}render(){const{model:e,session:t,onAnnotationsChange:n}=this.props,{animationsDisabled:o,annotatorMode:i,customKeys:s,dimensions:a,disabled:r,disabledAnnotator:l,equationEditor:d,extraCSSRules:c,feedback:p,mathInput:h,playersToolbarPosition:m,predefinedAnnotations:u,prompt:g,spanishInput:b,specialInput:f,spellCheckEnabled:y,teacherInstructions:v}=e,{annotations:C,comment:x,value:_}=t,{width:E,height:w}=a||{},S="40vh",k={position:"top"===m?"top":"bottom"};ce("[render] disabled? ",r);const A=J.createElement(re,{defaultClassName:"teacher-instructions",prompt:v}),R=[];return b&&R.push({language:"spanish"}),f&&R.push({language:"special"}),J.createElement(pe,{extraCSSRules:c,ref:e=>{this.containerRef=e}},J.createElement(ge,null,"Constructed Response Question"),v&&J.createElement(me,null,o?A:J.createElement(ae,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},A)),g&&J.createElement(he,{component:"span"},J.createElement(re,{defaultClassName:"prompt",prompt:e.prompt})),i?J.createElement(Q,{text:_||"",annotations:C||[],comment:x||"",predefinedAnnotations:u||[],onChange:n,onCommentChange:this.changeSessionComment,width:E,height:w,maxHeight:S,disabled:l,disabledMath:!h,customKeys:s,keypadMode:d}):J.createElement(ue,{className:"response-area-editor",onChange:this.changeSessionValue,markup:_||"",maxWidth:E&&E.toString(),minWidth:"100px",minHeight:w&&w.toString(),maxHeight:S,disabled:r,highlightShape:!0,toolbarOpts:k,spellCheck:y,charactersLimit:5e4,autoWidthToolbar:!0,pluginProps:{math:{disabled:!h,customKeys:this.props.model.customKeys,keypadMode:this.props.model.equationEditor,controlledKeypadMode:!1},video:{disabled:!0},audio:{disabled:!0},table:{disabled:!0},textAlign:{disabled:!0},separateParagraphs:{disabled:!1},ul_list:{disabled:!0},ol_list:{disabled:!0}},languageCharactersProps:R}),p&&J.createElement(se,{correctness:"correct",feedback:p}))}}be.__initStatic();const fe=t,{debounce:ye}=s,ve=a,{renderMath:Ce}=l,xe=ve("pie-element:extended-text-entry:print");class _e extends HTMLElement{constructor(){super(),this._options=null,this._model=null,this._session=[],this._root=null,this._rerender=ye(()=>{if(this._model&&this._session){const e=((e,t)=>{const n="instructor"===t.role;return e.prompt=!1!==e.promptEnabled?e.prompt:void 0,e.teacherInstructions=n&&!1!==e.teacherInstructionsEnabled?e.teacherInstructions:void 0,e.showTeacherInstructions=n,e.mode=n?"evaluate":e.mode,e.dimensions={height:100,width:500,...e.dimensions},e.disabled=!0,e.feedback=void 0,e.animationsDisabled=!0,e})(this._model,this._options),t=this._options&&fe.createElement(be,{model:e,session:{},onChange:()=>{},onValueChange:()=>{},onAnnotationsChange:()=>{},onCommentChange:()=>{}});this._root||(this._root=p(this)),this._root.render(t),queueMicrotask(()=>{xe("render complete - render math"),Ce(this)})}else xe("skip")},50,{leading:!1,trailing:!0})}set options(e){this._options=e}set model(e){this._model=e,this._rerender()}connectedCallback(){}disconnectedCallback(){this._root&&this._root.unmount()}}export{_e as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/extended-text-entry",
-  "version": "14.0.0-beta.1",
+  "version": "14.0.0-next.43+4249fa78f",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -14,21 +14,25 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/config-ui": "12.1.0-next.5",
-    "@pie-lib/editable-html-tip-tap": "1.1.0-next.5",
-    "@pie-lib/math-rendering": "4.1.0-next.4",
-    "@pie-lib/render-ui": "5.1.0-next.5",
+    "@pie-lib/config-ui": "12.1.1-next.0",
+    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
+    "@pie-lib/math-rendering": "4.1.1-next.0",
+    "@pie-lib/render-ui": "5.1.1-next.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
-  "gitHead": "f7801e8a2cd1bdc01ef1da55f9157f0989714bdc",
+  "gitHead": "4249fa78fc423ef0a8c89002b8f937c42b3478ea",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },
   "main": "lib/index.js",
-  "module": "src/index.js"
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./print": "./src/print.js"
+  }
 }