@pie-element/drawing-response 10.3.4-next.3 → 11.0.0-beta.1

package/configure/src/image-container.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 import Button from './button';
 
@@ -9,6 +9,61 @@ const isImage = (file) => {
   return file.type.match(imageType);
 };
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const Box = styled('div')(({ active }) => ({
+  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',
+  borderRadius: '5px',
+}));
+
+const CenteredDiv = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+const DrawableHeight = styled('div')({
+  minHeight: 350,
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const ResizeHandle = styled('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px',
+});
+
+const HiddenInput = styled('input')({
+  display: 'none',
+});
+
+const Toolbar = styled('div')({
+  backgroundColor: '#ECEDF1',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  padding: '12px 8px',
+});
+
 export class ImageContainer extends Component {
 
   static propTypes = {
@@ -176,14 +231,11 @@ export class ImageContainer extends Component {
   };
 
   renderUploadControl(label) {
-    const { classes } = this.props;
-
     return (
       <div>
         <Button label={label} onClick={this.handleInputClick} />
-        <input
+        <HiddenInput
           accept="image/*"
-          className={classes.input}
           onChange={this.handleUploadImage}
           ref={(ref) => {
             this.input = ref;
@@ -195,13 +247,13 @@ export class ImageContainer extends Component {
   }
 
   render() {
-    const { classes, imageUrl, imageDimensions } = this.props;
+    const { imageUrl, imageDimensions } = this.props;
     const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;
 
     return (
-      <div className={classes.base}>
-        <div
-          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
+      <BaseContainer>
+        <Box
+          active={dropzoneActive}
           {...(dragEnabled
             ? {
                 onDragExit: this.handleOnDragExit,
@@ -211,18 +263,16 @@ export class ImageContainer extends Component {
               }
             : {})}
         >
-          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>
+          <Toolbar>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</Toolbar>
 
-          <div
+          <DrawableHeight
             ref={(ref) => {
               this.imageSection = ref;
             }}
-            className={classes.drawableHeight}
           >
             {imageUrl ? (
-              <div className={classes.imageContainer}>
-                <img
-                  className={classes.image}
+              <StyledImageContainer>
+                <Image
                   height="auto"
                   onLoad={this.handleOnImageLoad}
                   ref={(ref) => {
@@ -236,85 +286,31 @@ export class ImageContainer extends Component {
                   }}
                   alt=""
                 />
-                <div
+                <ResizeHandle
                   ref={(ref) => {
                     this.resize = ref;
                   }}
-                  className={classes.resize}
                 />
-              </div>
+              </StyledImageContainer>
             ) : (
-              <div className={`${classes.drawableHeight} ${classes.centered}`}>
+              <DrawableHeight as={CenteredDiv}>
                 <label>Drag and drop or upload image from computer</label>
                 <br />
                 {this.renderUploadControl('Upload Image')}
-              </div>
+              </DrawableHeight>
             )}
-          </div>
-        </div>
-      </div>
+          </DrawableHeight>
+        </Box>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit,
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px',
-  },
-  boxActive: {
-    border: '1px solid #0032C2',
-  },
-  centered: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-  drawableHeight: {
-    minHeight: 350,
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-  resize: {
-    borderBottom: '1px solid #727272',
-    borderRight: '1px solid #727272',
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px',
-  },
-  input: {
-    display: 'none',
-  },
-  toolbar: {
-    backgroundColor: '#ECEDF1',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    padding: '12px 8px',
-  },
-});
-
 ImageContainer.propTypes = {
-  classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   onImageUpload: PropTypes.func.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,
   insertImage: PropTypes.func,
 };
 
-export default withStyles(styles)(ImageContainer);
+export default ImageContainer;

package/configure/src/index.js

@@ -7,7 +7,7 @@ import {
 } from '@pie-framework/pie-configure-events';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debug from 'debug';
 
 import Root from './root';
@@ -33,6 +33,7 @@ export default class DrawableResponseConfigure extends HTMLElement {
 
   constructor() {
     super();
+    this._root = null;
     this._configuration = sensibleDefaults.configuration;
 
     // if configuration.withRubric.forceEnabled is true, then we
@@ -152,6 +153,15 @@ export default class DrawableResponseConfigure extends HTMLElement {
         delete: this.onDeleteSound.bind(this),
       },
     });
-    ReactDOM.render(element, this);
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
   }
 }

package/configure/src/root.jsx

@@ -1,15 +1,28 @@
 import React from 'react';
 import { settings, layout, InputContainer } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
-import EditableHtml from '@pie-lib/editable-html';
-import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 
 import ImageContainer from './image-container';
 import cloneDeep from 'lodash/cloneDeep';
 
 const { Panel, toggle, dropdown } = settings;
 
+const PromptHolder = styled(InputContainer)(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(1),
+  width: '100%',
+}));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
 export class Root extends React.Component {
   onPromptChanged = (prompt) => {
     const { model, onModelChanged } = this.props;
@@ -37,7 +50,7 @@ export class Root extends React.Component {
   };
 
   render() {
-    const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
+    const { configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
       this.props;
     const {
       baseInputConfiguration = {},
@@ -109,7 +122,7 @@ export class Root extends React.Component {
         }
       >
         {teacherInstructionsEnabled && (
-          <InputContainer label={teacherInstructions.label} className={classes.promptHolder}>
+          <PromptHolder label={teacherInstructions.label}>
             <EditableHtml
               markup={model.teacherInstructions || ''}
               onChange={this.onTeacherInstructionsChanged}
@@ -125,12 +138,12 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}
-          </InputContainer>
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </PromptHolder>
         )}
 
         {promptEnabled && (
-          <InputContainer label="Item Stem" className={classes.promptHolder}>
+          <PromptHolder label="Item Stem">
             <EditableHtml
               markup={model.prompt}
               onChange={this.onPromptChanged}
@@ -145,13 +158,13 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {promptError && <div className={classes.errorText}>{promptError}</div>}
-          </InputContainer>
+            {promptError && <ErrorText>{promptError}</ErrorText>}
+          </PromptHolder>
         )}
 
         {backgroundImageEnabled && (
           <React.Fragment>
-            <Typography variant="subheading">Define Background Image</Typography>
+            <Typography variant="h6">Define Background Image</Typography>
 
             <ImageContainer
               imageUrl={model.imageUrl}
@@ -167,21 +180,7 @@ export class Root extends React.Component {
   }
 }
 
-const styles = (theme) => ({
-  promptHolder: {
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    width: '100%',
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit,
-  },
-});
-
 Root.propTypes = {
-  classes: PropTypes.object.isRequired,
   configuration: PropTypes.object,
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
@@ -196,4 +195,4 @@ Root.propTypes = {
   onConfigurationChanged: PropTypes.func.isRequired,
 };
 
-export default withStyles(styles)(Root);
+export default Root;

package/controller/lib/defaults.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _default = {
+exports.default = void 0;
+var _default = exports.default = {
   backgroundImageEnabled: true,
   imageDimensions: {
     height: 0,
@@ -19,5 +19,4 @@ var _default = {
   teacherInstructionsEnabled: true,
   toolbarEditorPosition: 'bottom'
 };
-exports["default"] = _default;
 //# sourceMappingURL=defaults.js.map

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["backgroundImageEnabled","imageDimensions","height","width","imageUrl","prompt","promptEnabled","spellCheckEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition"],"mappings":";;;;;;eAAe;AACbA,EAAAA,sBAAsB,EAAE,IADX;AAEbC,EAAAA,eAAe,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAV;AAAaC,IAAAA,KAAK,EAAE;AAApB,GAFJ;AAGbC,EAAAA,QAAQ,EAAE,EAHG;AAIbC,EAAAA,MAAM,EAAE,EAJK;AAKbC,EAAAA,aAAa,EAAE,IALF;AAMbC,EAAAA,iBAAiB,EAAE,IANN;AAObC,EAAAA,0BAA0B,EAAE,IAPf;AAQbC,EAAAA,mBAAmB,EAAE,EARR;AASbC,EAAAA,0BAA0B,EAAE,IATf;AAUbC,EAAAA,qBAAqB,EAAE;AAVV,C","sourcesContent":["export default {\n  backgroundImageEnabled: true,\n  imageDimensions: { height: 0, width: 0 },\n  imageUrl: '',\n  prompt: '',\n  promptEnabled: true,\n  spellCheckEnabled: true,\n  studentInstructionsEnabled: true,\n  teacherInstructions: '',\n  teacherInstructionsEnabled: true,\n  toolbarEditorPosition: 'bottom',\n};\n"],"file":"defaults.js"}
+{"version":3,"file":"defaults.js","names":["backgroundImageEnabled","imageDimensions","height","width","imageUrl","prompt","promptEnabled","spellCheckEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  backgroundImageEnabled: true,\n  imageDimensions: { height: 0, width: 0 },\n  imageUrl: '',\n  prompt: '',\n  promptEnabled: true,\n  spellCheckEnabled: true,\n  studentInstructionsEnabled: true,\n  teacherInstructions: '',\n  teacherInstructionsEnabled: true,\n  toolbarEditorPosition: 'bottom',\n};\n"],"mappings":";;;;;;iCAAe;EACbA,sBAAsB,EAAE,IAAI;EAC5BC,eAAe,EAAE;IAAEC,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC;EACxCC,QAAQ,EAAE,EAAE;EACZC,MAAM,EAAE,EAAE;EACVC,aAAa,EAAE,IAAI;EACnBC,iBAAiB,EAAE,IAAI;EACvBC,0BAA0B,EAAE,IAAI;EAChCC,mBAAmB,EAAE,EAAE;EACvBC,0BAA0B,EAAE,IAAI;EAChCC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}

package/controller/lib/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,69 +9,54 @@ exports.model = model;
 exports.normalize = void 0;
 exports.outcome = outcome;
 exports.validate = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _debug = _interopRequireDefault(require("debug"));
-
 var _defaults = _interopRequireDefault(require("./defaults"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var log = (0, _debug["default"])('pie-elements:drawing-response:controller');
-
-var normalize = function normalize(question) {
-  return _objectSpread(_objectSpread({}, _defaults["default"]), question);
-};
-
+const log = (0, _debug.default)('pie-elements:drawing-response:controller');
+const normalize = question => ({
+  ..._defaults.default,
+  ...question
+});
 exports.normalize = normalize;
-
 function model(question, session, env) {
-  var normalizedQuestion = normalize(question);
-  var extraCSSRules = normalizedQuestion.extraCSSRules,
-      imageUrl = normalizedQuestion.imageUrl,
-      imageDimensions = normalizedQuestion.imageDimensions,
-      prompt = normalizedQuestion.prompt,
-      promptEnabled = normalizedQuestion.promptEnabled,
-      backgroundImageEnabled = normalizedQuestion.backgroundImageEnabled,
-      language = normalizedQuestion.language;
-  return new Promise(function (resolve) {
-    var out = {
+  const normalizedQuestion = normalize(question);
+  const {
+    extraCSSRules,
+    imageUrl,
+    imageDimensions,
+    prompt,
+    promptEnabled,
+    backgroundImageEnabled,
+    language
+  } = normalizedQuestion;
+  return new Promise(resolve => {
+    const out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
-      imageDimensions: imageDimensions,
-      imageUrl: imageUrl,
+      imageDimensions,
+      imageUrl,
       prompt: promptEnabled ? prompt : null,
-      backgroundImageEnabled: backgroundImageEnabled,
-      language: language,
-      extraCSSRules: extraCSSRules
+      backgroundImageEnabled,
+      language,
+      extraCSSRules
     };
-
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
       out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
     } else {
       out.teacherInstructions = null;
     }
-
     resolve(out);
   });
 }
-
-var createDefaultModel = function createDefaultModel() {
-  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return new Promise(function (resolve) {
-    resolve(_objectSpread(_objectSpread({}, _defaults["default"]), model));
+const createDefaultModel = (model = {}) => new Promise(resolve => {
+  resolve({
+    ..._defaults.default,
+    ...model
   });
-};
-
+});
 exports.createDefaultModel = createDefaultModel;
-
-function
-  /*config, session*/
-outcome() {
-  return new Promise(function (resolve) {
+function outcome(/*config, session*/
+) {
+  return new Promise(resolve => {
     log('outcome...');
     resolve({
       score: 0,
@@ -80,31 +64,21 @@ outcome() {
       note: 'Requires manual scoring'
     });
   });
-} // remove all html tags
-
-
-var getInnerText = function getInnerText(html) {
-  return (html || '').replaceAll(/<[^>]*>/g, '');
-}; // remove all html tags except img, iframe and source tag for audio
-
-
-var getContent = function getContent(html) {
-  return (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
-};
+}
 
-var validate = function validate() {
-  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var errors = {};
-  ['teacherInstructions', 'prompt'].forEach(function (field) {
-    var _config$field;
+// remove all html tags
+const getInnerText = html => (html || '').replaceAll(/<[^>]*>/g, '');
 
-    if ((_config$field = config[field]) !== null && _config$field !== void 0 && _config$field.required && !getContent(model[field])) {
+// 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;
 };
-
 exports.validate = validate;
 //# sourceMappingURL=index.js.map

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","defaults","model","session","env","normalizedQuestion","extraCSSRules","imageUrl","imageDimensions","prompt","promptEnabled","backgroundImageEnabled","language","Promise","resolve","out","disabled","mode","role","teacherInstructions","teacherInstructionsEnabled","createDefaultModel","outcome","score","completed","note","getInnerText","html","replaceAll","getContent","replace","validate","config","errors","forEach","field","required"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = (question) => ({ ...defaults, ...question });\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const { extraCSSRules, imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled,\n      language,\n      extraCSSRules,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise((resolve) => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring',\n    });\n  });\n}\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img, iframe and source tag for audio\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const errors = {};\n\n  ['teacherInstructions', 'prompt'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  return errors;\n};\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_debug","_interopRequireDefault","require","_defaults","log","debug","normalize","question","defaults","exports","model","session","env","normalizedQuestion","extraCSSRules","imageUrl","imageDimensions","prompt","promptEnabled","backgroundImageEnabled","language","Promise","resolve","out","disabled","mode","role","teacherInstructions","teacherInstructionsEnabled","createDefaultModel","outcome","score","completed","note","getInnerText","html","replaceAll","getContent","replace","validate","config","errors","forEach","field","required"],"sources":["../src/index.js"],"sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = (question) => ({ ...defaults, ...question });\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const { extraCSSRules, imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled,\n      language,\n      extraCSSRules,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise((resolve) => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring',\n    });\n  });\n}\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img, iframe and source tag for audio\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const errors = {};\n\n  ['teacherInstructions', 'prompt'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  return errors;\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,MAAME,GAAG,GAAG,IAAAC,cAAK,EAAC,0CAA0C,CAAC;AAEtD,MAAMC,SAAS,GAAIC,QAAQ,KAAM;EAAE,GAAGC,iBAAQ;EAAE,GAAGD;AAAS,CAAC,CAAC;AAACE,OAAA,CAAAH,SAAA,GAAAA,SAAA;AAE/D,SAASI,KAAKA,CAACH,QAAQ,EAAEI,OAAO,EAAEC,GAAG,EAAE;EAC5C,MAAMC,kBAAkB,GAAGP,SAAS,CAACC,QAAQ,CAAC;EAC9C,MAAM;IAAEO,aAAa;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,MAAM;IAAEC,aAAa;IAAEC,sBAAsB;IAAEC;EAAS,CAAC,GAAGP,kBAAkB;EAEhI,OAAO,IAAIQ,OAAO,CAAEC,OAAO,IAAK;IAC9B,MAAMC,GAAG,GAAG;MACVC,QAAQ,EAAEZ,GAAG,CAACa,IAAI,KAAK,QAAQ;MAC/BA,IAAI,EAAEb,GAAG,CAACa,IAAI;MACdT,eAAe;MACfD,QAAQ;MACRE,MAAM,EAAEC,aAAa,GAAGD,MAAM,GAAG,IAAI;MACrCE,sBAAsB;MACtBC,QAAQ;MACRN;IACF,CAAC;IAED,IAAIF,GAAG,CAACc,IAAI,KAAK,YAAY,KAAKd,GAAG,CAACa,IAAI,KAAK,MAAM,IAAIb,GAAG,CAACa,IAAI,KAAK,UAAU,CAAC,EAAE;MACjFF,GAAG,CAACI,mBAAmB,GAAGd,kBAAkB,CAACe,0BAA0B,GACnEf,kBAAkB,CAACc,mBAAmB,GACtC,IAAI;IACV,CAAC,MAAM;MACLJ,GAAG,CAACI,mBAAmB,GAAG,IAAI;IAChC;IAEAL,OAAO,CAACC,GAAG,CAAC;EACd,CAAC,CAAC;AACJ;AAEO,MAAMM,kBAAkB,GAAGA,CAACnB,KAAK,GAAG,CAAC,CAAC,KAC3C,IAAIW,OAAO,CAAEC,OAAO,IAAK;EACvBA,OAAO,CAAC;IACN,GAAGd,iBAAQ;IACX,GAAGE;EACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAACD,OAAA,CAAAoB,kBAAA,GAAAA,kBAAA;AAEE,SAASC,OAAOA,CAAC;AAAA,EAAqB;EAC3C,OAAO,IAAIT,OAAO,CAAEC,OAAO,IAAK;IAC9BlB,GAAG,CAAC,YAAY,CAAC;IACjBkB,OAAO,CAAC;MACNS,KAAK,EAAE,CAAC;MACRC,SAAS,EAAE,KAAK;MAChBC,IAAI,EAAE;IACR,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ;;AAEA;AACA,MAAMC,YAAY,GAAIC,IAAI,IAAK,CAACA,IAAI,IAAI,EAAE,EAAEC,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC;;AAEtE;AACA,MAAMC,UAAU,GAAIF,IAAI,IAAK,CAACA,IAAI,IAAI,EAAE,EAAEG,OAAO,CAAC,oCAAoC,EAAE,EAAE,CAAC;AAEpF,MAAMC,QAAQ,GAAGA,CAAC7B,KAAK,GAAG,CAAC,CAAC,EAAE8B,MAAM,GAAG,CAAC,CAAC,KAAK;EACnD,MAAMC,MAAM,GAAG,CAAC,CAAC;EAEjB,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAACC,OAAO,CAAEC,KAAK,IAAK;IACnD,IAAIH,MAAM,CAACG,KAAK,CAAC,EAAEC,QAAQ,IAAI,CAACP,UAAU,CAAC3B,KAAK,CAACiC,KAAK,CAAC,CAAC,EAAE;MACxDF,MAAM,CAACE,KAAK,CAAC,GAAG,yBAAyB;IAC3C;EACF,CAAC,CAAC;EAEF,OAAOF,MAAM;AACf,CAAC;AAAChC,OAAA,CAAA8B,QAAA,GAAAA,QAAA","ignoreList":[]}

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response-controller",
   "private": true,
-  "version": "4.2.1",
+  "version": "5.0.0-beta.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"