@pie-element/extended-text-entry 6.8.12 → 7.1.0

package/docs/pie-schema.json.md

@@ -52,6 +52,18 @@ Whether a control to allow insertion of math forumulas should be displayed
 
 Default: `false`
 
+# `spanishInput` (boolean)
+
+Whether a control to allow insertion of spanish characters should be displayed
+
+Default: `false`
+
+# `specialInput` (boolean)
+
+Whether a control to allow insertion of special characters should be displayed
+
+Default: `false`
+
 # `multiple` (boolean)
 
 Indicates if multiple parts are enabled
@@ -157,6 +169,22 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 Indicates the value of the item if it affects config-ui
 (eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
 
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
 ## `Dimensions` (object)
 
 Properties of the `Dimensions` object:

package/lib/main.js

@@ -93,6 +93,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
           feedback = model.feedback,
           teacherInstructions = model.teacherInstructions,
           mathInput = model.mathInput,
+          spanishInput = model.spanishInput,
+          specialInput = model.specialInput,
           animationsDisabled = model.animationsDisabled,
           playersToolbarPosition = model.playersToolbarPosition,
           spellCheckEnabled = model.spellCheckEnabled;
@@ -121,6 +123,20 @@ var Main = /*#__PURE__*/function (_React$Component) {
           break;
       }
 
+      var languageCharactersProps = [];
+
+      if (spanishInput) {
+        languageCharactersProps.push({
+          language: 'spanish'
+        });
+      }
+
+      if (specialInput) {
+        languageCharactersProps.push({
+          language: 'special'
+        });
+      }
+
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.main,
         ref: function ref(_ref2) {
@@ -162,7 +178,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
           audio: {
             disabled: true
           }
-        }
+        },
+        languageCharactersProps: languageCharactersProps
       }), feedback && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
         correctness: "correct",
         feedback: feedback

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["log","style","theme","main","backgroundColor","color","background","text","prompt","width","marginBottom","spacing","unit","fontSize","Main","props","onChange","model","classes","session","dimensions","disabled","feedback","teacherInstructions","mathInput","animationsDisabled","playersToolbarPosition","spellCheckEnabled","value","height","maxHeight","toolbarOpts","teacherInstructionsDiv","position","ref","containerRef","hidden","visible","collapsible","changeSession","toString","math","customKeys","keypadMode","equationEditor","controlledKeypadMode","video","audio","React","Component","PropTypes","func","isRequired","object","shape","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditableHTML from '@pie-lib/editable-html';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport debug from 'debug';\nimport debounce from 'lodash/debounce';\nimport {color, Feedback, Collapsible, PreviewPrompt} from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst style = theme => ({\n  main: {\n    backgroundColor: color.background(),\n    color: color.text()\n  },\n  prompt: {\n    width: '100%',\n    color: color.text(),\n    marginBottom: theme.spacing.unit * 2,\n    fontSize: 'inherit'\n  }\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    model: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    session: PropTypes.shape({\n      value: PropTypes.string\n    }).isRequired\n  };\n\n  changeSession = debounce(this.props.onChange, 1500);\n\n  render() {\n    const { model, classes, session } = this.props;\n    const { dimensions, disabled, feedback, teacherInstructions, mathInput, animationsDisabled, playersToolbarPosition, spellCheckEnabled } = model;\n    const { value } = session;\n    const { width, height } = dimensions || {};\n    const maxHeight = '40vh';\n    const toolbarOpts = {};\n\n    log('[render] disabled? ', disabled);\n\n    const teacherInstructionsDiv = <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />;\n\n    switch (playersToolbarPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div\n        className={classes.main}\n        ref={ref => {\n          this.containerRef = ref;\n        }}\n      >\n        {\n          teacherInstructions && (\n            <div>\n              {!animationsDisabled ? (\n                <Collapsible\n                  labels={{hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions'}}\n                  className={classes.collapsible}\n                >\n                  {teacherInstructionsDiv}\n                </Collapsible>\n              ) : teacherInstructionsDiv }\n              <br/>\n            </div>\n          )\n        }\n        {model.prompt && (\n          <Typography\n            component={'span'}\n            className={classes.prompt}\n          >\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </Typography>\n        )}\n        <EditableHTML\n          className=\"response-area-editor\"\n          onChange={this.changeSession}\n          markup={value || ''}\n          width={width && width.toString()}\n          minHeight={height && height.toString()}\n          maxHeight={maxHeight}\n          disabled={disabled}\n          highlightShape={true}\n          toolbarOpts={toolbarOpts}\n          spellCheck={spellCheckEnabled}\n          pluginProps={{\n            math: {\n              disabled: !mathInput,\n              customKeys: this.props.model.customKeys,\n              keypadMode: this.props.model.equationEditor,\n              controlledKeypadMode: false\n            },\n            video: {\n              disabled: true\n            },\n             audio: {\n              disabled: true\n            }\n          }}\n        />\n        {feedback && (\n          <div>\n            <br />\n            <Feedback correctness=\"correct\" feedback={feedback}/>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default withStyles(style)(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["log","style","theme","main","backgroundColor","color","background","text","prompt","width","marginBottom","spacing","unit","fontSize","Main","props","onChange","model","classes","session","dimensions","disabled","feedback","teacherInstructions","mathInput","spanishInput","specialInput","animationsDisabled","playersToolbarPosition","spellCheckEnabled","value","height","maxHeight","toolbarOpts","teacherInstructionsDiv","position","languageCharactersProps","push","language","ref","containerRef","hidden","visible","collapsible","changeSession","toString","math","customKeys","keypadMode","equationEditor","controlledKeypadMode","video","audio","React","Component","PropTypes","func","isRequired","object","shape","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditableHTML from '@pie-lib/editable-html';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport debug from 'debug';\nimport debounce from 'lodash/debounce';\nimport {color, Feedback, Collapsible, PreviewPrompt} from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst style = theme => ({\n  main: {\n    backgroundColor: color.background(),\n    color: color.text()\n  },\n  prompt: {\n    width: '100%',\n    color: color.text(),\n    marginBottom: theme.spacing.unit * 2,\n    fontSize: 'inherit'\n  }\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    model: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    session: PropTypes.shape({\n      value: PropTypes.string\n    }).isRequired\n  };\n\n  changeSession = debounce(this.props.onChange, 1500);\n\n  render() {\n    const { model, classes, session } = this.props;\n    const {\n      dimensions,\n      disabled,\n      feedback,\n      teacherInstructions,\n      mathInput,\n      spanishInput,\n      specialInput,\n      animationsDisabled,\n      playersToolbarPosition,\n      spellCheckEnabled\n    } = model;\n    const { value } = session;\n    const { width, height } = dimensions || {};\n    const maxHeight = '40vh';\n    const toolbarOpts = {};\n\n    log('[render] disabled? ', disabled);\n\n    const teacherInstructionsDiv = <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />;\n\n    switch (playersToolbarPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    const languageCharactersProps = [];\n\n    if (spanishInput) {\n      languageCharactersProps.push({ language: 'spanish' });\n    }\n\n    if (specialInput) {\n      languageCharactersProps.push({ language: 'special' });\n    }\n\n    return (\n      <div\n        className={classes.main}\n        ref={ref => {\n          this.containerRef = ref;\n        }}\n      >\n        {\n          teacherInstructions && (\n            <div>\n              {!animationsDisabled ? (\n                <Collapsible\n                  labels={{hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions'}}\n                  className={classes.collapsible}\n                >\n                  {teacherInstructionsDiv}\n                </Collapsible>\n              ) : teacherInstructionsDiv }\n              <br/>\n            </div>\n          )\n        }\n        {model.prompt && (\n          <Typography\n            component={'span'}\n            className={classes.prompt}\n          >\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </Typography>\n        )}\n        <EditableHTML\n          className=\"response-area-editor\"\n          onChange={this.changeSession}\n          markup={value || ''}\n          width={width && width.toString()}\n          minHeight={height && height.toString()}\n          maxHeight={maxHeight}\n          disabled={disabled}\n          highlightShape={true}\n          toolbarOpts={toolbarOpts}\n          spellCheck={spellCheckEnabled}\n          pluginProps={{\n            math: {\n              disabled: !mathInput,\n              customKeys: this.props.model.customKeys,\n              keypadMode: this.props.model.equationEditor,\n              controlledKeypadMode: false\n            },\n            video: {\n              disabled: true\n            },\n             audio: {\n              disabled: true\n            }\n          }}\n          languageCharactersProps={languageCharactersProps}\n        />\n        {feedback && (\n          <div>\n            <br />\n            <Feedback correctness=\"correct\" feedback={feedback}/>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default withStyles(style)(Main);\n"],"file":"main.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/extended-text-entry",
-  "version": "6.8.12",
+  "version": "7.1.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -12,9 +12,9 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/editable-html": "^7.22.5",
-    "@pie-lib/math-rendering": "^2.4.2",
-    "@pie-lib/render-ui": "^4.12.8",
+    "@pie-lib/editable-html": "^8.1.2",
+    "@pie-lib/math-rendering": "^2.4.3",
+    "@pie-lib/render-ui": "^4.12.9",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash.throttle": "^4.1.1",
@@ -22,7 +22,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "3f3d6edc68890098821978ebd5a8b90da31ab222",
+  "gitHead": "9b55e36b358084c7a96a08bad969f4856d6802da",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/module/configure.js

@@ -1,402 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.19/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.3.1/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.6/module/index.js";
-var lib = {};
-Object.defineProperty(lib, "__esModule", {
-  value: true
-});
-class ModelUpdatedEvent extends CustomEvent {
-  constructor(update, reset = false) {
-    super(ModelUpdatedEvent.TYPE, {
-      bubbles: true,
-      detail: {
-        update,
-        reset
-      }
-    });
-    this.update = update;
-    this.reset = reset;
-  }
-}
-ModelUpdatedEvent.TYPE = 'model.updated';
-var ModelUpdatedEvent_1 = lib.ModelUpdatedEvent = ModelUpdatedEvent;
-class DeleteImageEvent extends CustomEvent {
-  constructor(src, done) {
-    super(DeleteImageEvent.TYPE, {
-      bubbles: true,
-      detail: {
-        src,
-        done
-      }
-    });
-    this.src = src;
-    this.done = done;
-  }
-}
-DeleteImageEvent.TYPE = 'delete.image';
-var DeleteImageEvent_1 = lib.DeleteImageEvent = DeleteImageEvent;
-class InsertImageEvent extends CustomEvent {
-  constructor(handler) {
-    super(InsertImageEvent.TYPE, {
-      bubbles: true,
-      detail: handler
-    });
-    this.handler = handler;
-  }
-}
-InsertImageEvent.TYPE = 'insert.image';
-var InsertImageEvent_1 = lib.InsertImageEvent = InsertImageEvent;
-const React$1 = _dll_react;
-const PropTypes = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {FeedbackSelector: FeedbackSelector} = _dll_pie_lib__config_ui;
-const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
-const {settings: settings} = _dll_pie_lib__config_ui;
-const {layout: layout} = _dll_pie_lib__config_ui;
-const EditableHtml = _dll_pie_lib__editable_html;
-const {ALL_PLUGINS: ALL_PLUGINS} = _dll_pie_lib__editable_html;
-const _jsxFileName = "/home/circleci/repo/packages/extended-text-entry/configure/src/main.jsx";
-const {Panel, toggle, numberFields, dropdown} = settings;
-const defaultFeedback = {
-  type: 'default',
-  default: 'Your answer has been submitted'
-};
-class Main extends React$1.Component {
-  static __initStatic() {
-    this.propTypes = {
-      onModelChanged: PropTypes.func.isRequired,
-      onConfigurationChanged: PropTypes.func,
-      model: PropTypes.object.isRequired,
-      configuration: PropTypes.object.isRequired,
-      imageSupport: PropTypes.object.isRequired,
-      classes: PropTypes.object.isRequired
-    };
-  }
-  constructor(props) {
-    super(props);
-    Main.prototype.__init.call(this);
-    Main.prototype.__init2.call(this);
-    Main.prototype.__init3.call(this);
-    this.state = {
-      setDimensions: true
-    };
-  }
-  __init() {
-    this.onPromptChange = markup => {
-      const {onModelChanged, model} = this.props;
-      onModelChanged({
-        ...model,
-        prompt: markup
-      });
-    };
-  }
-  __init2() {
-    this.changeFeedback = feedback => {
-      const {model, onModelChanged} = this.props;
-      const update = {
-        ...model,
-        feedback
-      };
-      onModelChanged(update);
-    };
-  }
-  __init3() {
-    this.changeTeacherInstructions = teacherInstructions => {
-      const {model, onModelChanged} = this.props;
-      const update = {
-        ...model,
-        teacherInstructions
-      };
-      onModelChanged(update);
-    };
-  }
-  render() {
-    const {model, classes, onModelChanged, configuration, onConfigurationChanged, imageSupport} = this.props;
-    const {multiple = {}, feedback = {}, teacherInstructions = {}, prompt = {}, studentInstructions = {}, mathInput = {}, dimensions = {}, equationEditor = {}, spellCheck = {}, playerSpellCheck = {}} = configuration || ({});
-    const {teacherInstructionsEnabled, promptEnabled, feedbackEnabled, spellCheckEnabled} = model || ({});
-    const toolbarOpts = {};
-    switch (model.toolbarEditorPosition) {
-      case 'top':
-        toolbarOpts.position = 'top';
-        break;
-      default:
-        toolbarOpts.position = 'bottom';
-        break;
-    }
-    return React$1.createElement(layout.ConfigLayout, {
-      settings: React$1.createElement(Panel, {
-        model: model,
-        configuration: configuration,
-        onChangeModel: model => onModelChanged(model),
-        onChangeConfiguration: config => onConfigurationChanged(config),
-        groups: {
-          Settings: {
-            mathInput: mathInput.settings && toggle(mathInput.label),
-            equationEditor: equationEditor.enabled && model.mathInput && dropdown(equationEditor.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']),
-            dimensions: numberFields(dimensions.label, {
-              width: {
-                label: 'Width (px)',
-                suffix: 'px',
-                min: 100,
-                max: 500
-              },
-              height: {
-                label: 'Height (px)',
-                suffix: 'px',
-                min: 100,
-                max: 500
-              }
-            }),
-            'multiple.enabled': multiple.settings && toggle(multiple.label, true),
-            promptEnabled: prompt.settings && toggle(prompt.label),
-            feedbackEnabled: feedback.settings && toggle(feedback.label),
-            spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-            playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label)
-          },
-          Properties: {
-            teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-            studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label)
-          }
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 94
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 92
-      }
-    }, React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 154
-      }
-    }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.promptContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 156
-      }
-    }, React$1.createElement(EditableHtml, {
-      className: classes.prompt,
-      markup: model.teacherInstructions || '',
-      onChange: this.changeTeacherInstructions,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 160
-      }
-    })), React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 172
-      }
-    }), promptEnabled && React$1.createElement(InputContainer, {
-      label: prompt.label,
-      className: classes.promptContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 175
-      }
-    }, React$1.createElement(EditableHtml, {
-      activePlugins: ALL_PLUGINS,
-      className: classes.prompt,
-      markup: model.prompt || '',
-      onChange: this.onPromptChange,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      toolbarOpts: toolbarOpts,
-      spellCheck: spellCheckEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 179
-      }
-    })), feedbackEnabled && React$1.createElement(React$1.Fragment, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 193
-      }
-    }, React$1.createElement(Typography, {
-      className: classes.header,
-      variant: "subheading",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 194
-      }
-    }, "Feedback"), React$1.createElement(FeedbackSelector, {
-      label: "When submitted, show",
-      feedback: model.feedback || defaultFeedback,
-      onChange: this.changeFeedback,
-      toolbarOpts: toolbarOpts,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 198
-      }
-    }))));
-  }
-}
-Main.__initStatic();
-var Main$1 = withStyles(theme => ({
-  header: {
-    paddingBottom: theme.spacing.unit
-  },
-  promptContainer: {
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    width: '100%'
-  },
-  promptInput: {
-    width: '100%',
-    marginBottom: theme.spacing.unit
-  },
-  field: {
-    width: '200px'
-  }
-}))(Main);
-var defaults = {
-  model: {
-    dimensions: {
-      height: 100,
-      width: 500
-    },
-    prompt: 'This is the question prompt',
-    mathInput: false,
-    equationEditor: 'Grade 8 - HS',
-    feedbackEnabled: true,
-    rationaleEnabled: true,
-    promptEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true,
-    spellCheckEnabled: true,
-    playerSpellCheckEnabled: true,
-    toolbarEditorPosition: 'bottom'
-  },
-  configuration: {
-    dimensions: {
-      settings: true,
-      label: 'Text-Entry Display Size'
-    },
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    playerSpellCheck: {
-      label: 'Student Spellcheck',
-      settings: true,
-      enabled: true
-    },
-    equationEditor: {
-      settings: false,
-      label: 'Equation Editor',
-      enabled: true
-    },
-    feedback: {
-      settings: true,
-      label: 'Feedback'
-    },
-    mathInput: {
-      settings: true,
-      label: 'Student response can include math notation',
-      enabled: false
-    },
-    multiple: {
-      settings: false,
-      label: 'Multiple Parts',
-      enabled: false
-    },
-    studentInstructions: {
-      settings: false,
-      label: 'Student Instructions'
-    },
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    }
-  }
-};
-const React = _dll_react;
-const ReactDOM = _dll_react_dom;
-class ExtendedTextEntry extends HTMLElement {
-  static __initStatic() {
-    this.createDefaultModel = (model = {}) => ({
-      ...defaults.model,
-      ...model
-    });
-  }
-  constructor() {
-    super();
-    this._model = ExtendedTextEntry.createDefaultModel();
-    this._configuration = defaults.configuration;
-  }
-  set model(m) {
-    this._model = ExtendedTextEntry.createDefaultModel(m);
-    this.render();
-  }
-  set configuration(c) {
-    this._configuration = {
-      ...defaults.configuration,
-      ...c
-    };
-    this.render();
-  }
-  onModelChanged(m) {
-    this._model = m;
-    this.render();
-    this.dispatchEvent(new ModelUpdatedEvent_1(this._model, false));
-  }
-  onConfigurationChanged(c) {
-    this._configuration = {
-      ...defaults.configuration,
-      ...c
-    };
-    if (this._model) {
-      this.onModelChanged(this._model);
-    }
-    this.render();
-  }
-  insertImage(handler) {
-    this.dispatchEvent(new InsertImageEvent_1(handler));
-  }
-  onDeleteImage(src, done) {
-    this.dispatchEvent(new DeleteImageEvent_1(src, done));
-  }
-  render() {
-    if (this._model) {
-      const element = React.createElement(Main$1, {
-        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)
-        }
-      });
-      ReactDOM.render(element, this);
-    }
-  }
-}
-ExtendedTextEntry.__initStatic();
-export {ExtendedTextEntry as default};

package/module/controller.js

@@ -1,99 +0,0 @@
-/**
- * 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 = {
-  dimensions: {
-    height: 100,
-    width: 500,
-  }
-};
-
-async function createDefaultModel(model = {}) {
-
-  return {
-    ...defaults,
-    ...model,
-  };
-}
-
-const normalize = question => ({
-  ...defaults,
-  feedbackEnabled: true,
-  rationaleEnabled: true,
-  promptEnabled: true,
-  teacherInstructionsEnabled: true,
-  studentInstructionsEnabled: true,
-  playerSpellCheckEnabled: true,
-  ...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;
-  }
-
-  return fb.then(feedback => ({
-    prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
-    dimensions: normalizedQuestion.dimensions,
-    customKeys: normalizedQuestion.customKeys || [],
-    disabled: env.mode !== 'gather',
-    feedback,
-    teacherInstructions,
-    mathInput: normalizedQuestion.mathInput,
-    equationEditor, 
-    spellCheckEnabled: normalizedQuestion.playerSpellCheckEnabled,
-    playersToolbarPosition: normalizedQuestion.playersToolbarPosition || 'bottom'
-  }));
-}
-
-async function outcome(/*question, session, env*/) {
-  return {
-    score: 0,
-    completed: 'n/a',
-    note: 'Requires manual scoring'
-  };
-}
-
-export { createDefaultModel, model, normalize, outcome };