@pie-element/extended-text-entry 6.8.4-annotations.0 → 6.8.5

package/docs/pie-schema.json

@@ -98,6 +98,11 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -116,41 +121,6 @@
       "type": "string",
       "title": "toolbarEditorPosition"
     },
-    "predefinedAnnotations": {
-      "description": "Indicates the predefined annotations for the annotation menu",
-      "type": "array",
-      "items": {
-        "title": "PredefinedAnnotation",
-        "type": "object",
-        "properties": {
-          "label": {
-            "description": "Indicates the value displayed in the annotation button",
-            "type": "string",
-            "title": "label"
-          },
-          "text": {
-            "description": "Indicates the annotation value",
-            "type": "string",
-            "title": "text"
-          },
-          "type": {
-            "description": "Indicates the type of the annotation",
-            "enum": [
-              "negative",
-              "positive"
-            ],
-            "type": "string",
-            "title": "type"
-          }
-        },
-        "required": [
-          "label",
-          "text",
-          "type"
-        ]
-      },
-      "title": "predefinedAnnotations"
-    },
     "playersToolbarPosition": {
       "description": "Indicates the editor's toolbar position for the player, which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -178,6 +148,7 @@
     "feedbackEnabled",
     "id",
     "rationaleEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -257,37 +228,7 @@
       "required": [
         "type"
       ]
-    },
-    "PredefinedAnnotation": {
-      "title": "PredefinedAnnotation",
-      "type": "object",
-      "properties": {
-        "label": {
-          "description": "Indicates the value displayed in the annotation button",
-          "type": "string",
-          "title": "label"
-        },
-        "text": {
-          "description": "Indicates the annotation value",
-          "type": "string",
-          "title": "text"
-        },
-        "type": {
-          "description": "Indicates the type of the annotation",
-          "enum": [
-            "negative",
-            "positive"
-          ],
-          "type": "string",
-          "title": "type"
-        }
-      },
-      "required": [
-        "label",
-        "text",
-        "type"
-      ]
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"
-}
+}

package/docs/pie-schema.json.md

@@ -80,6 +80,10 @@ Indicates if Feedback is enabled
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -95,31 +99,6 @@ This element must be one of the following enum values:
 * `bottom`
 * `top`
 
-# `predefinedAnnotations` (array)
-
-Indicates the predefined annotations for the annotation menu
-
-The object is an array with all elements of the type `object`.
-
-The array object has the following properties:
-
-## `label` (string, required)
-
-Indicates the value displayed in the annotation button
-
-## `text` (string, required)
-
-Indicates the annotation value
-
-## `type` (string, enum, required)
-
-Indicates the type of the annotation
-
-This element must be one of the following enum values:
-
-* `negative`
-* `positive`
-
 # `playersToolbarPosition` (string, enum)
 
 Indicates the editor's toolbar position for the player, which can be 'bottom' or 'top'
@@ -201,25 +180,4 @@ This element must be one of the following enum values:
 
 ### `default` (string)
 
-Indicates the feedback value
-
-## `PredefinedAnnotation` (object)
-
-Properties of the `PredefinedAnnotation` object:
-
-### `label` (string, required)
-
-Indicates the value displayed in the annotation button
-
-### `text` (string, required)
-
-Indicates the annotation value
-
-### `type` (string, enum, required)
-
-Indicates the type of the annotation
-
-This element must be one of the following enum values:
-
-* `negative`
-* `positive`
+Indicates the feedback value

package/lib/index.js

@@ -31,8 +31,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
 
-var _mathRendering = require("@pie-lib/math-rendering");
-
 var _debug = _interopRequireDefault(require("debug"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -96,25 +94,10 @@ var RootExtendedTextEntry = /*#__PURE__*/function (_HTMLElement) {
       this.render();
     }
   }, {
-    key: "valueChange",
-    value: function valueChange(value) {
+    key: "handleChange",
+    value: function handleChange(value) {
       this._session.value = value;
       this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value)));
-      this.render();
-    }
-  }, {
-    key: "annotationsChange",
-    value: function annotationsChange(annotations) {
-      this._session.annotations = annotations;
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), true));
-      this.render();
-    }
-  }, {
-    key: "commentChange",
-    value: function commentChange(comment) {
-      this._session.comment = comment;
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(comment)));
-      this.render();
     }
   }, {
     key: "connectedCallback",
@@ -124,20 +107,14 @@ var RootExtendedTextEntry = /*#__PURE__*/function (_HTMLElement) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       if (this._model && this._session) {
         var elem = /*#__PURE__*/_react["default"].createElement(_main["default"], {
           model: this._model,
           session: this._session,
-          onValueChange: this.valueChange.bind(this),
-          onAnnotationsChange: this.annotationsChange.bind(this),
-          onCommentChange: this.commentChange.bind(this)
+          onChange: this.handleChange.bind(this)
         });
 
-        _reactDom["default"].render(elem, this, function () {
-          (0, _mathRendering.renderMath)(_this2);
-        });
+        _reactDom["default"].render(elem, this);
       }
     }
   }]);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","domParser","window","undefined","DOMParser","parseFromString","v","textContent","value","document","body","err","isComplete","tc","out","length","RootExtendedTextEntry","_model","_session","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","render","s","SessionChangedEvent","annotations","comment","elem","React","createElement","Main","model","session","onValueChange","valueChange","bind","onAnnotationsChange","annotationsChange","onCommentChange","commentChange","ReactDOM","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst domParser =\n  typeof window !== undefined ? new DOMParser() : { parseFromString: v => v };\n\nexport function textContent(value) {\n  if (typeof value !== 'string') {\n    return undefined;\n  }\n\n  try {\n    const document = domParser.parseFromString(value, 'text/html');\n    const textContent = document.body.textContent;\n\n    return textContent;\n  } catch (err) {\n    log('tried to parse as dom and failed', value);\n    return value;\n  }\n}\n\nexport function isComplete(value) {\n  const tc = textContent(value);\n  const out = tc !== undefined && tc.length > 0;\n\n  return out;\n}\n\nexport default class RootExtendedTextEntry extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), false, !!this._model)\n    );\n\n    this.render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this.render();\n  }\n\n  valueChange(value) {\n    this._session.value = value;\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value))\n    );\n\n    this.render();\n  }\n\n  annotationsChange(annotations) {\n    this._session.annotations = annotations;\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), true)\n    );\n\n    this.render();\n  }\n\n  commentChange(comment) {\n    this._session.comment = comment;\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(comment))\n    );\n\n    this.render();\n  }\n\n  connectedCallback() {\n    this.render();\n  }\n\n  render() {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        session: this._session,\n        onValueChange: this.valueChange.bind(this),\n        onAnnotationsChange: this.annotationsChange.bind(this),\n        onCommentChange: this.commentChange.bind(this),\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","domParser","window","undefined","DOMParser","parseFromString","v","textContent","value","document","body","err","isComplete","tc","out","length","RootExtendedTextEntry","_model","_session","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","render","s","SessionChangedEvent","elem","React","createElement","Main","model","session","onChange","handleChange","bind","ReactDOM","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,6BAAN,CAAZ;AAEA,IAAMC,SAAS,GACb,QAAOC,MAAP,0DAAOA,MAAP,OAAkBC,SAAlB,GAA8B,IAAIC,SAAJ,EAA9B,GAAgD;AAAEC,EAAAA,eAAe,EAAE,yBAAAC,CAAC;AAAA,WAAIA,CAAJ;AAAA;AAApB,CADlD;;AAGO,SAASC,WAAT,CAAqBC,KAArB,EAA4B;AACjC,MAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC7B,WAAOL,SAAP;AACD;;AACD,MAAI;AACF,QAAMM,QAAQ,GAAGR,SAAS,CAACI,eAAV,CAA0BG,KAA1B,EAAiC,WAAjC,CAAjB;AACA,QAAMD,YAAW,GAAGE,QAAQ,CAACC,IAAT,CAAcH,WAAlC;AACA,WAAOA,YAAP;AACD,GAJD,CAIE,OAAOI,GAAP,EAAY;AACZX,IAAAA,GAAG,CAAC,kCAAD,EAAqCQ,KAArC,CAAH;AACA,WAAOA,KAAP;AACD;AACF;;AAEM,SAASI,UAAT,CAAoBJ,KAApB,EAA2B;AAChC,MAAMK,EAAE,GAAGN,WAAW,CAACC,KAAD,CAAtB;AACA,MAAMM,GAAG,GAAGD,EAAE,KAAKV,SAAP,IAAoBU,EAAE,CAACE,MAAH,GAAY,CAA5C;AACA,SAAOD,GAAP;AACD;;IAEoBE,qB;;;;;AACnB,mCAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKF,MAAL,GAAcE,CAAd;AACA,WAAKC,aAAL,CACE,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAA9C,EAAqD,CAAC,CAAC,KAAKN,MAA5D,CADF;AAIA,WAAKO,MAAL;AACD;;;SAED,aAAYC,CAAZ,EAAe;AACb,WAAKP,QAAL,GAAgBO,CAAhB;AACA,WAAKD,MAAL;AACD;;;WAED,sBAAahB,KAAb,EAAoB;AAClB,WAAKU,QAAL,CAAcV,KAAd,GAAsBA,KAAtB;AAEA,WAAKY,aAAL,CACE,IAAIM,oCAAJ,CAAwB,KAAKJ,OAAL,CAAaC,WAAb,EAAxB,EAAoDX,UAAU,CAACJ,KAAD,CAA9D,CADF;AAGD;;;WAED,6BAAoB;AAClB,WAAKgB,MAAL;AACD;;;WAED,kBAAS;AACP,UAAI,KAAKP,MAAL,IAAe,KAAKC,QAAxB,EAAkC;AAChC,YAAIS,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,UAAAA,KAAK,EAAE,KAAKd,MADuB;AAEnCe,UAAAA,OAAO,EAAE,KAAKd,QAFqB;AAGnCe,UAAAA,QAAQ,EAAE,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB;AAHyB,SAA1B,CAAX;;AAKAC,6BAASZ,MAAT,CAAgBG,IAAhB,EAAsB,IAAtB;AACD;AACF;;;kDA1CgDU,W","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst domParser =\n  typeof window !== undefined ? new DOMParser() : { parseFromString: v => v };\n\nexport function textContent(value) {\n  if (typeof value !== 'string') {\n    return undefined;\n  }\n  try {\n    const document = domParser.parseFromString(value, 'text/html');\n    const textContent = document.body.textContent;\n    return textContent;\n  } catch (err) {\n    log('tried to parse as dom and failed', value);\n    return value;\n  }\n}\n\nexport function isComplete(value) {\n  const tc = textContent(value);\n  const out = tc !== undefined && tc.length > 0;\n  return out;\n}\n\nexport default class RootExtendedTextEntry extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), false, !!this._model)\n    );\n\n    this.render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this.render();\n  }\n\n  handleChange(value) {\n    this._session.value = value;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value))\n    );\n  }\n\n  connectedCallback() {\n    this.render();\n  }\n\n  render() {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        session: this._session,\n        onChange: this.handleChange.bind(this)\n      });\n      ReactDOM.render(elem, this);\n    }\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -39,8 +39,6 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _mathRendering = require("@pie-lib/math-rendering");
 
-var _annotationEditor = _interopRequireDefault(require("./annotation/annotation-editor"));
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -77,8 +75,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSessionValue", (0, _debounce["default"])(_this.props.onValueChange, 1500));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSessionComment", (0, _debounce["default"])(_this.props.onCommentChange, 1500));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSession", (0, _debounce["default"])(_this.props.onChange, 1500));
     return _this;
   }
 
@@ -97,24 +94,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           model = _this$props.model,
           classes = _this$props.classes,
-          session = _this$props.session,
-          onAnnotationsChange = _this$props.onAnnotationsChange;
-      var animationsDisabled = model.animationsDisabled,
-          annotatorMode = model.annotatorMode,
-          customKeys = model.customKeys,
-          dimensions = model.dimensions,
+          session = _this$props.session;
+      var dimensions = model.dimensions,
           disabled = model.disabled,
-          disabledAnnotator = model.disabledAnnotator,
-          equationEditor = model.equationEditor,
           feedback = model.feedback,
-          mathInput = model.mathInput,
-          predefinedAnnotations = model.predefinedAnnotations,
-          prompt = model.prompt,
           teacherInstructions = model.teacherInstructions,
-          playersToolbarPosition = model.playersToolbarPosition;
-      var annotations = session.annotations,
-          comment = session.comment,
-          value = session.value;
+          mathInput = model.mathInput,
+          animationsDisabled = model.animationsDisabled,
+          playersToolbarPosition = model.playersToolbarPosition,
+          spellCheckEnabled = model.spellCheckEnabled;
+      var value = session.value;
 
       var _ref = dimensions || {},
           width = _ref.width,
@@ -122,6 +111,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
       var maxHeight = '40vh';
       var toolbarOpts = {};
+      console.log(spellCheckEnabled, "spellcheck");
       log('[render] disabled? ', disabled);
 
       var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
@@ -150,28 +140,14 @@ var Main = /*#__PURE__*/function (_React$Component) {
           visible: 'Hide Teacher Instructions'
         },
         className: classes.collapsible
-      }, teacherInstructionsDiv) : teacherInstructionsDiv, /*#__PURE__*/_react["default"].createElement("br", null)), prompt && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      }, teacherInstructionsDiv) : teacherInstructionsDiv, /*#__PURE__*/_react["default"].createElement("br", null)), model.prompt && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.prompt
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         defaultClassName: "prompt",
-        prompt: prompt
-      })), annotatorMode ? /*#__PURE__*/_react["default"].createElement(_annotationEditor["default"], {
-        text: value || '',
-        annotations: annotations || [],
-        comment: comment || '',
-        predefinedAnnotations: predefinedAnnotations || [],
-        onChange: onAnnotationsChange,
-        onCommentChange: this.changeSessionComment,
-        width: width,
-        height: height,
-        maxHeight: maxHeight,
-        disabled: disabledAnnotator,
-        disabledMath: !mathInput,
-        customKeys: customKeys,
-        keypadMode: equationEditor
-      }) : /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        prompt: model.prompt
+      })), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: "response-area-editor",
-        onChange: this.changeSessionValue,
+        onChange: this.changeSession,
         markup: value || '',
         width: width && width.toString(),
         minHeight: height && height.toString(),
@@ -179,11 +155,12 @@ var Main = /*#__PURE__*/function (_React$Component) {
         disabled: disabled,
         highlightShape: true,
         toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
         pluginProps: {
           math: {
             disabled: !mathInput,
-            customKeys: customKeys,
-            keypadMode: equationEditor,
+            customKeys: this.props.model.customKeys,
+            keypadMode: this.props.model.equationEditor,
             controlledKeypadMode: false
           },
           video: {
@@ -204,15 +181,11 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
 exports.Main = Main;
 (0, _defineProperty2["default"])(Main, "propTypes", {
-  onValueChange: _propTypes["default"].func.isRequired,
-  onAnnotationsChange: _propTypes["default"].func.isRequired,
-  onCommentChange: _propTypes["default"].func.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
   model: _propTypes["default"].object,
   classes: _propTypes["default"].object.isRequired,
   session: _propTypes["default"].shape({
-    value: _propTypes["default"].string,
-    annotations: _propTypes["default"].array,
-    comment: _propTypes["default"].string
+    value: _propTypes["default"].string
   }).isRequired
 });
 

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","onValueChange","onCommentChange","containerRef","model","classes","session","onAnnotationsChange","animationsDisabled","annotatorMode","customKeys","dimensions","disabled","disabledAnnotator","equationEditor","feedback","mathInput","predefinedAnnotations","teacherInstructions","playersToolbarPosition","annotations","comment","value","height","maxHeight","toolbarOpts","teacherInstructionsDiv","position","ref","hidden","visible","collapsible","changeSessionComment","changeSessionValue","toString","math","keypadMode","controlledKeypadMode","video","audio","React","Component","PropTypes","func","isRequired","object","shape","string","array"],"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';\nimport AnnotationEditor from './annotation/annotation-editor';\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    onValueChange: PropTypes.func.isRequired,\n    onAnnotationsChange: PropTypes.func.isRequired,\n    onCommentChange: PropTypes.func.isRequired,\n    model: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    session: PropTypes.shape({\n      value: PropTypes.string,\n      annotations: PropTypes.array,\n      comment: PropTypes.string\n    }).isRequired\n  };\n\n  componentDidUpdate() {\n    if (this.containerRef) {\n      renderMath(this.containerRef);\n    }\n  }\n\n  changeSessionValue = debounce(this.props.onValueChange, 1500);\n\n  changeSessionComment = debounce(this.props.onCommentChange, 1500);\n\n  render() {\n    const { model, classes, session, onAnnotationsChange } = this.props;\n    const {\n      animationsDisabled,\n      annotatorMode,\n      customKeys,\n      dimensions,\n      disabled,\n      disabledAnnotator,\n      equationEditor,\n      feedback,\n      mathInput,\n      predefinedAnnotations,\n      prompt,\n      teacherInstructions,\n      playersToolbarPosition\n    } = model;\n    const { annotations, comment, 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        {prompt && (\n          <Typography className={classes.prompt} >\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={prompt} />\n          </Typography>\n        )}\n        {annotatorMode ? (\n          <AnnotationEditor\n            text={value || ''}\n            annotations={annotations || []}\n            comment={comment || ''}\n            predefinedAnnotations={predefinedAnnotations || []}\n            onChange={onAnnotationsChange}\n            onCommentChange={this.changeSessionComment}\n            width={width}\n            height={height}\n            maxHeight={maxHeight}\n            disabled={disabledAnnotator}\n            disabledMath={!mathInput}\n            customKeys={customKeys}\n            keypadMode={equationEditor}\n          />\n        ) : (\n          <EditableHTML\n            className=\"response-area-editor\"\n            onChange={this.changeSessionValue}\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            pluginProps={{\n              math: {\n                disabled: !mathInput,\n                customKeys: customKeys,\n                keypadMode: equationEditor,\n                controlledKeypadMode: false\n              },\n              video: {\n                disabled: true\n              },\n              audio: {\n                disabled: true\n              }\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","containerRef","model","classes","session","dimensions","disabled","feedback","teacherInstructions","mathInput","animationsDisabled","playersToolbarPosition","spellCheckEnabled","value","height","maxHeight","toolbarOpts","console","teacherInstructionsDiv","position","ref","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  componentDidUpdate() {\n    if (this.containerRef) {\n      renderMath(this.containerRef);\n    }\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    console.log(spellCheckEnabled, \"spellcheck\")\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            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"}