@pie-element/extended-text-entry 14.2.0-next.3 → 14.2.0-next.5

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.2.0-next.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@14.2.0-next.4...@pie-element/extended-text-entry@14.2.0-next.5) (2026-04-13)
+
+### Bug Fixes
+
+- bump libs PIE-34 ([9f8b35a](https://github.com/pie-framework/pie-elements/commit/9f8b35a856ca1eba67d5630a358b96226cfca984))
+
+# [14.2.0-next.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@14.2.0-next.3...@pie-element/extended-text-entry@14.2.0-next.4) (2026-04-10)
+
+### Features
+
+- **math-inline:** replace @pie-framework/mathquill with math-input helpers PIE-56, bump libs PIE-34, PIE-57, PIE-36, PIE-38, PIE-18 ([abd205e](https://github.com/pie-framework/pie-elements/commit/abd205e9c8335957b9fc2548822e4125bf1a7edb))
+
 # [14.2.0-next.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry@14.2.0-next.2...@pie-element/extended-text-entry@14.2.0-next.3) (2026-04-08)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.2.0-next.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@12.2.0-next.4...@pie-element/extended-text-entry-configure@12.2.0-next.5) (2026-04-13)
+
+### Bug Fixes
+
+- bump libs PIE-34 ([9f8b35a](https://github.com/pie-framework/pie-elements/commit/9f8b35a856ca1eba67d5630a358b96226cfca984))
+
+# [12.2.0-next.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@12.2.0-next.3...@pie-element/extended-text-entry-configure@12.2.0-next.4) (2026-04-10)
+
+### Features
+
+- **math-inline:** replace @pie-framework/mathquill with math-input helpers PIE-56, bump libs PIE-34, PIE-57, PIE-36, PIE-38, PIE-18 ([abd205e](https://github.com/pie-framework/pie-elements/commit/abd205e9c8335957b9fc2548822e4125bf1a7edb))
+
 # [12.2.0-next.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/extended-text-entry-configure@12.2.0-next.2...@pie-element/extended-text-entry-configure@12.2.0-next.3) (2026-04-08)
 
 ### Bug Fixes

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/extended-text-entry-configure",
   "private": true,
-  "version": "12.2.0-next.3",
+  "version": "12.2.0-next.5",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -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.2.0-next.26",
-    "@pie-lib/editable-html-tip-tap": "1.2.0-next.25",
+    "@pie-lib/config-ui": "12.2.0-next.29",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.28",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.6.2",
     "react": "18.3.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@^4.1.0/module/index.js";import{_dll_pie_lib__config_ui as s}from"../../../@pie-lib/config-module@^3.1.0/module/index.js";import{_dll_pie_lib__editable_html_tip_tap as o}from"../../../@pie-lib/editable-html-module@^6.2.0/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;
+    });
+  });