@pie-element/extended-text-entry 10.0.4-next.69 → 10.1.0-next.1

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","teacherInstructions","editor","borderRadius","srOnly","position","left","top","height","overflow","Main","props","onChange","model","classes","session","dimensions","disabled","feedback","mathInput","spanishInput","specialInput","animationsDisabled","playersToolbarPosition","spellCheckEnabled","value","maxHeight","toolbarOpts","teacherInstructionsDiv","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/pie-toolbox/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/pie-toolbox/render-ui';\nimport classnames from 'classnames';\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  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  editor: {\n    marginBottom: theme.spacing.unit * 2,\n    borderRadius: '4px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\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\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 = { position: playersToolbarPosition === 'top' ? 'top' : 'bottom' };\n\n    log('[render] disabled? ', disabled);\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />\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        <h2 className={classes.srOnly}>Constructed Response Question</h2>\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n                className={classes.collapsible}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        {model.prompt && (\n          <Typography component={'span'} className={classes.prompt}>\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </Typography>\n        )}\n\n        <EditableHTML\n          className={classnames(classes.editor, '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\n        {feedback && <Feedback correctness=\"correct\" feedback={feedback} />}\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","teacherInstructions","editor","borderRadius","srOnly","position","left","top","height","overflow","Main","props","onChange","model","classes","session","dimensions","disabled","feedback","mathInput","spanishInput","specialInput","animationsDisabled","playersToolbarPosition","spellCheckEnabled","value","maxHeight","toolbarOpts","teacherInstructionsDiv","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/pie-toolbox/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/pie-toolbox/render-ui';\nimport classnames from 'classnames';\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  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  editor: {\n    marginBottom: theme.spacing.unit * 2,\n    borderRadius: '4px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\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\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 = { position: playersToolbarPosition === 'top' ? 'top' : 'bottom' };\n\n    log('[render] disabled? ', disabled);\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />\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        <h2 className={classes.srOnly}>Constructed Response Question</h2>\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n                className={classes.collapsible}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        {model.prompt && (\n          <Typography component={'span'} className={classes.prompt}>\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </Typography>\n        )}\n\n        <EditableHtml\n          className={classnames(classes.editor, '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\n        {feedback && <Feedback correctness=\"correct\" feedback={feedback} />}\n      </div>\n    );\n  }\n}\n\nexport default withStyles(style)(Main);\n"],"file":"main.js"}

package/lib/print.js

@@ -119,4 +119,4 @@ var ExtendedTextEntryPrint = /*#__PURE__*/function (_HTMLElement) {
 }( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
 
 exports["default"] = ExtendedTextEntryPrint;
-//# sourceMappingURL=print.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9wcmludC5qcyJdLCJuYW1lcyI6WyJsb2ciLCJwcmVwYXJlUHJpbnRNb2RlbCIsIm1vZGVsIiwib3B0cyIsImluc3RyIiwicm9sZSIsInByb21wdCIsInByb21wdEVuYWJsZWQiLCJ1bmRlZmluZWQiLCJ0ZWFjaGVySW5zdHJ1Y3Rpb25zIiwidGVhY2hlckluc3RydWN0aW9uc0VuYWJsZWQiLCJzaG93VGVhY2hlckluc3RydWN0aW9ucyIsIm1vZGUiLCJkZWZhdWx0RGltZW5zaW9ucyIsImhlaWdodCIsIndpZHRoIiwiZGltZW5zaW9ucyIsImRpc2FibGVkIiwiZmVlZGJhY2siLCJhbmltYXRpb25zRGlzYWJsZWQiLCJFeHRlbmRlZFRleHRFbnRyeVByaW50IiwiX29wdGlvbnMiLCJfbW9kZWwiLCJfc2Vzc2lvbiIsIl9yZXJlbmRlciIsInByaW50TW9kZWwiLCJlbGVtZW50IiwiUmVhY3QiLCJjcmVhdGVFbGVtZW50IiwiTWFpbiIsInNlc3Npb24iLCJvbkNoYW5nZSIsIlJlYWN0RE9NIiwicmVuZGVyIiwibGVhZGluZyIsInRyYWlsaW5nIiwibyIsInMiLCJIVE1MRWxlbWVudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOztBQUNBOztBQUNBOztBQUNBOztBQUNBOztBQUVBOzs7Ozs7Ozs7O0FBRUEsSUFBTUEsR0FBRyxHQUFHLHVCQUFNLHVDQUFOLENBQVo7O0FBRUEsSUFBTUMsaUJBQWlCLEdBQUcsU0FBcEJBLGlCQUFvQixDQUFDQyxLQUFELEVBQVFDLElBQVIsRUFBaUI7QUFDekMsTUFBTUMsS0FBSyxHQUFHRCxJQUFJLENBQUNFLElBQUwsS0FBYyxZQUE1QjtBQUVBSCxFQUFBQSxLQUFLLENBQUNJLE1BQU4sR0FBZUosS0FBSyxDQUFDSyxhQUFOLEtBQXdCLEtBQXhCLEdBQWdDTCxLQUFLLENBQUNJLE1BQXRDLEdBQStDRSxTQUE5RDtBQUNBTixFQUFBQSxLQUFLLENBQUNPLG1CQUFOLEdBQ0VMLEtBQUssSUFBSUYsS0FBSyxDQUFDUSwwQkFBTixLQUFxQyxLQUE5QyxHQUFzRFIsS0FBSyxDQUFDTyxtQkFBNUQsR0FBa0ZELFNBRHBGO0FBRUFOLEVBQUFBLEtBQUssQ0FBQ1MsdUJBQU4sR0FBZ0NQLEtBQWhDO0FBQ0FGLEVBQUFBLEtBQUssQ0FBQ1UsSUFBTixHQUFhUixLQUFLLEdBQUcsVUFBSCxHQUFnQkYsS0FBSyxDQUFDVSxJQUF4QztBQUVBLE1BQU1DLGlCQUFpQixHQUFHO0FBQUVDLElBQUFBLE1BQU0sRUFBRSxHQUFWO0FBQWVDLElBQUFBLEtBQUssRUFBRTtBQUF0QixHQUExQjtBQUVBYixFQUFBQSxLQUFLLENBQUNjLFVBQU4sbUNBQ0tILGlCQURMLEdBRUtYLEtBQUssQ0FBQ2MsVUFGWDtBQUtBZCxFQUFBQSxLQUFLLENBQUNlLFFBQU4sR0FBaUIsSUFBakI7QUFDQWYsRUFBQUEsS0FBSyxDQUFDZ0IsUUFBTixHQUFpQlYsU0FBakI7QUFDQU4sRUFBQUEsS0FBSyxDQUFDaUIsa0JBQU4sR0FBMkIsSUFBM0I7QUFFQSxTQUFPakIsS0FBUDtBQUNELENBckJEOztJQXVCcUJrQixzQjs7Ozs7QUFDbkIsb0NBQWM7QUFBQTs7QUFBQTtBQUNaO0FBQ0EsVUFBS0MsUUFBTCxHQUFnQixJQUFoQjtBQUNBLFVBQUtDLE1BQUwsR0FBYyxJQUFkO0FBQ0EsVUFBS0MsUUFBTCxHQUFnQixFQUFoQjtBQUNBLFVBQUtDLFNBQUwsR0FBaUIsMEJBQ2YsWUFBTTtBQUNKLFVBQUksTUFBS0YsTUFBTCxJQUFlLE1BQUtDLFFBQXhCLEVBQWtDO0FBQ2hDLFlBQU1FLFVBQVUsR0FBR3hCLGlCQUFpQixDQUFDLE1BQUtxQixNQUFOLEVBQWMsTUFBS0QsUUFBbkIsQ0FBcEM7O0FBRUEsWUFBTUssT0FBTyxHQUNYLE1BQUtMLFFBQUwsaUJBQ0FNLGtCQUFNQyxhQUFOLENBQW9CQyxnQkFBcEIsRUFBMEI7QUFDeEIzQixVQUFBQSxLQUFLLEVBQUV1QixVQURpQjtBQUV4QkssVUFBQUEsT0FBTyxFQUFFLEVBRmU7QUFHeEJDLFVBQUFBLFFBQVEsRUFBRSxvQkFBTSxDQUFFO0FBSE0sU0FBMUIsQ0FGRjs7QUFRQUMsNkJBQVNDLE1BQVQsQ0FBZ0JQLE9BQWhCLGtEQUErQixZQUFNO0FBQ25DMUIsVUFBQUEsR0FBRyxDQUFDLCtCQUFELENBQUg7QUFDQTtBQUNELFNBSEQ7QUFJRCxPQWZELE1BZU87QUFDTEEsUUFBQUEsR0FBRyxDQUFDLE1BQUQsQ0FBSDtBQUNEO0FBQ0YsS0FwQmMsRUFxQmYsRUFyQmUsRUFzQmY7QUFBRWtDLE1BQUFBLE9BQU8sRUFBRSxLQUFYO0FBQWtCQyxNQUFBQSxRQUFRLEVBQUU7QUFBNUIsS0F0QmUsQ0FBakI7QUFMWTtBQTZCYjs7OztTQUNELGFBQVlDLENBQVosRUFBZTtBQUNiLFdBQUtmLFFBQUwsR0FBZ0JlLENBQWhCO0FBQ0Q7OztTQUVELGFBQVVDLENBQVYsRUFBYTtBQUNYLFdBQUtmLE1BQUwsR0FBY2UsQ0FBZDs7QUFDQSxXQUFLYixTQUFMO0FBQ0Q7OztXQUVELDZCQUFvQixDQUFFOzs7a0RBeEM0QmMsVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJztcbmltcG9ydCBkZWJvdW5jZSBmcm9tICdsb2Rhc2gvZGVib3VuY2UnO1xuaW1wb3J0IE1haW4gZnJvbSAnLi9tYWluJztcbmltcG9ydCB7IHJlbmRlck1hdGggfSBmcm9tICdAcGllLWxpYi9waWUtdG9vbGJveC9tYXRoLXJlbmRlcmluZyc7XG5cbmltcG9ydCBkZWJ1ZyBmcm9tICdkZWJ1Zyc7XG5cbmNvbnN0IGxvZyA9IGRlYnVnKCdwaWUtZWxlbWVudDpleHRlbmRlZC10ZXh0LWVudHJ5OnByaW50Jyk7XG5cbmNvbnN0IHByZXBhcmVQcmludE1vZGVsID0gKG1vZGVsLCBvcHRzKSA9PiB7XG4gIGNvbnN0IGluc3RyID0gb3B0cy5yb2xlID09PSAnaW5zdHJ1Y3Rvcic7XG5cbiAgbW9kZWwucHJvbXB0ID0gbW9kZWwucHJvbXB0RW5hYmxlZCAhPT0gZmFsc2UgPyBtb2RlbC5wcm9tcHQgOiB1bmRlZmluZWQ7XG4gIG1vZGVsLnRlYWNoZXJJbnN0cnVjdGlvbnMgPVxuICAgIGluc3RyICYmIG1vZGVsLnRlYWNoZXJJbnN0cnVjdGlvbnNFbmFibGVkICE9PSBmYWxzZSA/IG1vZGVsLnRlYWNoZXJJbnN0cnVjdGlvbnMgOiB1bmRlZmluZWQ7XG4gIG1vZGVsLnNob3dUZWFjaGVySW5zdHJ1Y3Rpb25zID0gaW5zdHI7XG4gIG1vZGVsLm1vZGUgPSBpbnN0ciA/ICdldmFsdWF0ZScgOiBtb2RlbC5tb2RlO1xuXG4gIGNvbnN0IGRlZmF1bHREaW1lbnNpb25zID0geyBoZWlnaHQ6IDEwMCwgd2lkdGg6IDUwMCB9O1xuXG4gIG1vZGVsLmRpbWVuc2lvbnMgPSB7XG4gICAgLi4uZGVmYXVsdERpbWVuc2lvbnMsXG4gICAgLi4ubW9kZWwuZGltZW5zaW9ucyxcbiAgfTtcblxuICBtb2RlbC5kaXNhYmxlZCA9IHRydWU7XG4gIG1vZGVsLmZlZWRiYWNrID0gdW5kZWZpbmVkO1xuICBtb2RlbC5hbmltYXRpb25zRGlzYWJsZWQgPSB0cnVlO1xuXG4gIHJldHVybiBtb2RlbDtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIEV4dGVuZGVkVGV4dEVudHJ5UHJpbnQgZXh0ZW5kcyBIVE1MRWxlbWVudCB7XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5fb3B0aW9ucyA9IG51bGw7XG4gICAgdGhpcy5fbW9kZWwgPSBudWxsO1xuICAgIHRoaXMuX3Nlc3Npb24gPSBbXTtcbiAgICB0aGlzLl9yZXJlbmRlciA9IGRlYm91bmNlKFxuICAgICAgKCkgPT4ge1xuICAgICAgICBpZiAodGhpcy5fbW9kZWwgJiYgdGhpcy5fc2Vzc2lvbikge1xuICAgICAgICAgIGNvbnN0IHByaW50TW9kZWwgPSBwcmVwYXJlUHJpbnRNb2RlbCh0aGlzLl9tb2RlbCwgdGhpcy5fb3B0aW9ucyk7XG5cbiAgICAgICAgICBjb25zdCBlbGVtZW50ID1cbiAgICAgICAgICAgIHRoaXMuX29wdGlvbnMgJiZcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoTWFpbiwge1xuICAgICAgICAgICAgICBtb2RlbDogcHJpbnRNb2RlbCxcbiAgICAgICAgICAgICAgc2Vzc2lvbjoge30sXG4gICAgICAgICAgICAgIG9uQ2hhbmdlOiAoKSA9PiB7fSxcbiAgICAgICAgICAgIH0pO1xuXG4gICAgICAgICAgUmVhY3RET00ucmVuZGVyKGVsZW1lbnQsIHRoaXMsICgpID0+IHtcbiAgICAgICAgICAgIGxvZygncmVuZGVyIGNvbXBsZXRlIC0gcmVuZGVyIG1hdGgnKTtcbiAgICAgICAgICAgIHJlbmRlck1hdGgodGhpcyk7XG4gICAgICAgICAgfSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgbG9nKCdza2lwJyk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgICA1MCxcbiAgICAgIHsgbGVhZGluZzogZmFsc2UsIHRyYWlsaW5nOiB0cnVlIH0sXG4gICAgKTtcbiAgfVxuICBzZXQgb3B0aW9ucyhvKSB7XG4gICAgdGhpcy5fb3B0aW9ucyA9IG87XG4gIH1cblxuICBzZXQgbW9kZWwocykge1xuICAgIHRoaXMuX21vZGVsID0gcztcbiAgICB0aGlzLl9yZXJlbmRlcigpO1xuICB9XG5cbiAgY29ubmVjdGVkQ2FsbGJhY2soKSB7fVxufVxuIl19

package/module/demo.js

@@ -0,0 +1,37 @@
+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,
+});
+
+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,289 @@
+import {_dll_react, _dll_pie_lib__pie_toolbox_editable_html, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_debug, _dll_lodash, _dll_pie_lib__pie_toolbox_render_ui, _dll_classnames, _dll_react_dom, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-module@1.3.3/module/index.js";
+const React$1 = _dll_react;
+const {EditableHtml: EditableHtml} = _dll_pie_lib__pie_toolbox_editable_html;
+const PropTypes = _dll_prop_types;
+const {Typography: Typography} = _dll_material_ui__core;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const debug$1 = _dll_debug;
+const {debounce: debounce} = _dll_lodash;
+const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
+const {Feedback: Feedback} = _dll_pie_lib__pie_toolbox_render_ui;
+const {Collapsible: Collapsible} = _dll_pie_lib__pie_toolbox_render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__pie_toolbox_render_ui;
+const classnames = _dll_classnames;
+const _jsxFileName = "/Users/andreeapescar/WORK/pie/pie-elements/packages/extended-text-entry/src/main.jsx";
+const log$1 = debug$1('@pie-ui:extended-text-entry');
+const style = theme => ({
+  main: {
+    backgroundColor: color.background(),
+    color: color.text()
+  },
+  prompt: {
+    width: '100%',
+    color: color.text(),
+    marginBottom: theme.spacing.unit * 2,
+    fontSize: 'inherit'
+  },
+  teacherInstructions: {
+    marginBottom: theme.spacing.unit * 2
+  },
+  editor: {
+    marginBottom: theme.spacing.unit * 2,
+    borderRadius: '4px'
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
+  }
+});
+class Main extends React$1.Component {
+  constructor(...args) {
+    super(...args);
+    Main.prototype.__init.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      onChange: PropTypes.func.isRequired,
+      model: PropTypes.object,
+      classes: PropTypes.object.isRequired,
+      session: PropTypes.shape({
+        value: PropTypes.string
+      }).isRequired
+    };
+  }
+  __init() {
+    this.changeSession = debounce(this.props.onChange, 1500);
+  }
+  render() {
+    const {model, classes, session} = this.props;
+    const {dimensions, disabled, feedback, teacherInstructions, mathInput, spanishInput, specialInput, animationsDisabled, playersToolbarPosition, spellCheckEnabled} = model;
+    const {value} = session;
+    const {width, height} = dimensions || ({});
+    const maxHeight = '40vh';
+    const toolbarOpts = {
+      position: playersToolbarPosition === 'top' ? 'top' : 'bottom'
+    };
+    log$1('[render] disabled? ', disabled);
+    const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 76
+      }
+    });
+    const languageCharactersProps = [];
+    if (spanishInput) {
+      languageCharactersProps.push({
+        language: 'spanish'
+      });
+    }
+    if (specialInput) {
+      languageCharactersProps.push({
+        language: 'special'
+      });
+    }
+    return React$1.createElement('div', {
+      className: classes.main,
+      ref: ref => {
+        this.containerRef = ref;
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 90
+      }
+    }, React$1.createElement('h2', {
+      className: classes.srOnly,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 96
+      }
+    }, "Constructed Response Question"), teacherInstructions && React$1.createElement('div', {
+      className: classes.teacherInstructions,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 99
+      }
+    }, !animationsDisabled ? React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      className: classes.collapsible,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 101
+      }
+    }, teacherInstructionsDiv) : teacherInstructionsDiv), model.prompt && React$1.createElement(Typography, {
+      component: 'span',
+      className: classes.prompt,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 114
+      }
+    }, React$1.createElement(PreviewPrompt, {
+      defaultClassName: "prompt",
+      prompt: model.prompt,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 115
+      }
+    })), React$1.createElement(EditableHtml, {
+      className: classnames(classes.editor, 'response-area-editor'),
+      onChange: this.changeSession,
+      markup: value || '',
+      width: width && width.toString(),
+      minHeight: height && height.toString(),
+      maxHeight: maxHeight,
+      disabled: disabled,
+      highlightShape: true,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      pluginProps: {
+        math: {
+          disabled: !mathInput,
+          customKeys: this.props.model.customKeys,
+          keypadMode: this.props.model.equationEditor,
+          controlledKeypadMode: false
+        },
+        video: {
+          disabled: true
+        },
+        audio: {
+          disabled: true
+        }
+      },
+      languageCharactersProps: languageCharactersProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 119
+      }
+    }), feedback && React$1.createElement(Feedback, {
+      correctness: "correct",
+      feedback: feedback,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 147
+      }
+    }));
+  }
+}
+Main.__initStatic();
+var Main$1 = withStyles(style)(Main);
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelSetEvent extends CustomEvent {
+  constructor(component, complete, hasModel) {
+    super(ModelSetEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component,
+        hasModel
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+ModelSetEvent.TYPE = 'model-set';
+var ModelSetEvent_1 = lib.ModelSetEvent = ModelSetEvent;
+class SessionChangedEvent extends CustomEvent {
+  constructor(component, complete) {
+    super(SessionChangedEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+SessionChangedEvent.TYPE = 'session-changed';
+var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering;
+const debug = _dll_debug;
+const log = debug('@pie-ui:extended-text-entry');
+const domParser = typeof window !== undefined ? new DOMParser() : {
+  parseFromString: v => v
+};
+function textContent(value) {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  try {
+    const document = domParser.parseFromString(value, 'text/html');
+    const textContent = document.body.textContent;
+    return textContent;
+  } catch (err) {
+    log('tried to parse as dom and failed', value);
+    return value;
+  }
+}
+function isComplete(value) {
+  const tc = textContent(value);
+  const out = tc !== undefined && tc.length > 0;
+  return out;
+}
+class RootExtendedTextEntry extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), false, !!this._model));
+    this.render();
+  }
+  set session(s) {
+    this._session = s;
+    this.render();
+  }
+  get session() {
+    return this._session;
+  }
+  handleChange(value) {
+    this._session.value = value;
+    this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(value)));
+  }
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Written Response Question');
+    this.setAttribute('role', 'region');
+    this.render();
+  }
+  render() {
+    if (this._model && this._session) {
+      let elem = React.createElement(Main$1, {
+        model: this._model,
+        session: this._session,
+        onChange: this.handleChange.bind(this)
+      });
+      ReactDOM.render(elem, this, () => {
+        renderMath(this);
+      });
+    }
+  }
+}
+export {RootExtendedTextEntry as default, isComplete, textContent};

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/extended-text-entry@10.1.0</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,10 @@
+{
+  "name": "@pie-element/extended-text-entry",
+  "version": "10.1.0",
+  "modules": [
+    {
+      "name": "@pie-lib/pie-toolbox-module",
+      "version": "1.3.3"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,75 @@
+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,
+});
+
+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@10.1.0</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>