@pie-element/extended-text-entry 10.12.4 → 10.13.0

package/lib/annotation/freeform-editor.js

@@ -0,0 +1,266 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _styles = require("@material-ui/core/styles");
+
+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; } }
+
+var styles = function styles(theme) {
+  return {
+    wrapper: {
+      width: '200px',
+      overflow: 'hidden',
+      borderRadius: '4px',
+      backgroundColor: '#ffffff',
+      border: "4px solid ".concat(theme.palette.grey[100]),
+      '&.negative': {
+        borderColor: 'rgb(255, 204, 238) !important'
+      },
+      '&.positive': {
+        borderColor: 'rgb(153, 255, 153) !important'
+      }
+    },
+    holder: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      borderTop: "2px solid ".concat(theme.palette.grey[100])
+    },
+    positive: {
+      backgroundColor: 'rgb(153, 255, 153) !important',
+      '&:hover': {
+        filter: 'brightness(85%)'
+      }
+    },
+    negative: {
+      backgroundColor: 'rgb(255, 204, 238) !important',
+      '&:hover': {
+        filter: 'brightness(85%)'
+      }
+    },
+    button: {
+      flexGrow: 1,
+      width: '28%',
+      textAlign: 'center',
+      padding: '4px',
+      cursor: 'pointer',
+      '&:not(:nth-child(3n))': {
+        borderRight: "1px solid ".concat(theme.palette.grey[100])
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.grey[100]
+      },
+      '&.negative:hover': {
+        backgroundColor: 'rgb(153, 255, 153) !important'
+      },
+      '&.positive:hover': {
+        backgroundColor: 'rgb(255, 204, 238) !important'
+      }
+    },
+    arrow: {
+      overflowX: 'unset',
+      overflowY: 'unset',
+      marginLeft: '16px',
+      '&::before': {
+        position: 'absolute',
+        right: '100%',
+        top: '13px',
+        border: 'solid transparent',
+        content: '""',
+        height: 0,
+        width: 0,
+        pointerEvents: 'none',
+        borderWidth: '7px',
+        borderRightColor: theme.palette.grey[100]
+      },
+      '&.negative::before': {
+        borderRightColor: 'rgb(255, 204, 238) !important'
+      },
+      '&.positive::before': {
+        borderRightColor: 'rgb(153, 255, 153) !important'
+      }
+    }
+  };
+};
+
+var FreeformEditor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(FreeformEditor, _React$Component);
+
+  var _super = _createSuper(FreeformEditor);
+
+  function FreeformEditor(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, FreeformEditor);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onValueChange", function (event) {
+      return _this.setState({
+        value: event.target.value
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSave", function () {
+      var _this$props = _this.props,
+          oldValue = _this$props.value,
+          onSave = _this$props.onSave,
+          onClose = _this$props.onClose,
+          onDelete = _this$props.onDelete;
+      var value = _this.state.value;
+
+      if (value === '') {
+        onDelete();
+      }
+
+      if (oldValue !== value) {
+        onSave(oldValue, value);
+      }
+
+      _this.setState({
+        value: ''
+      });
+
+      onClose();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTypeChange", function () {
+      var _this$props2 = _this.props,
+          onTypeChange = _this$props2.onTypeChange,
+          onDelete = _this$props2.onDelete;
+      var value = _this.state.value;
+
+      if (value === '') {
+        onDelete();
+      } else {
+        onTypeChange(value);
+      }
+
+      _this.setState({
+        value: ''
+      });
+    });
+    _this.state = {
+      value: props.value
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(FreeformEditor, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var value = nextProps.value;
+      var propsValue = this.props.value;
+
+      if (value !== propsValue) {
+        this.setState({
+          value: value
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          anchorEl = _this$props3.anchorEl,
+          classes = _this$props3.classes,
+          offset = _this$props3.offset,
+          onDelete = _this$props3.onDelete,
+          open = _this$props3.open,
+          type = _this$props3.type;
+      var value = this.state.value;
+      return /*#__PURE__*/_react["default"].createElement(_core.Popover, {
+        anchorEl: anchorEl,
+        elevation: 2,
+        open: open,
+        onClose: this.handleSave,
+        classes: {
+          paper: (0, _classnames["default"])(classes.arrow, type)
+        },
+        style: {
+          marginTop: "".concat(offset, "px"),
+          transition: 'margin-top 2s ease-out'
+        },
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.wrapper, type)
+      }, /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+        id: "annotation-editor",
+        style: {
+          padding: '2px 5px',
+          width: '95%'
+        },
+        autoFocus: true,
+        multiline: true,
+        rows: 1,
+        rowsMax: 4,
+        value: value,
+        onChange: this.onValueChange,
+        InputProps: {
+          disableUnderline: true
+        }
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.holder
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.button,
+        onClick: onDelete
+      }, "Delete"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.button, type),
+        onClick: this.handleTypeChange
+      }, type === 'negative' ? 'Green' : 'Pink'), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.button,
+        onClick: this.handleSave
+      }, "Save"))));
+    }
+  }]);
+  return FreeformEditor;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(FreeformEditor, "propTypes", {
+  anchorEl: _propTypes["default"].object,
+  open: _propTypes["default"].bool,
+  offset: _propTypes["default"].number,
+  value: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onDelete: _propTypes["default"].func,
+  onSave: _propTypes["default"].func,
+  onTypeChange: _propTypes["default"].func
+});
+
+var _default = (0, _styles.withStyles)(styles)(FreeformEditor);
+
+exports["default"] = _default;
+//# sourceMappingURL=freeform-editor.js.map

package/lib/annotation/freeform-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/annotation/freeform-editor.jsx"],"names":["styles","theme","wrapper","width","overflow","borderRadius","backgroundColor","border","palette","grey","borderColor","holder","display","flexWrap","borderTop","positive","filter","negative","button","flexGrow","textAlign","padding","cursor","borderRight","arrow","overflowX","overflowY","marginLeft","position","right","top","content","height","pointerEvents","borderWidth","borderRightColor","FreeformEditor","props","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","nextProps","propsValue","anchorEl","classes","offset","open","type","handleSave","paper","marginTop","transition","vertical","horizontal","onValueChange","disableUnderline","handleTypeChange","React","Component","PropTypes","object","bool","number","string","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@material-ui/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst styles = theme =>({\n  wrapper: {\n    width: '200px',\n    overflow: 'hidden',\n    borderRadius: '4px',\n    backgroundColor: '#ffffff',\n    border: `4px solid ${theme.palette.grey[100]}`,\n    '&.negative': {\n      borderColor: 'rgb(255, 204, 238) !important',\n    },\n    '&.positive': {\n      borderColor: 'rgb(153, 255, 153) !important',\n    },\n  },\n  holder: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    borderTop: `2px solid ${theme.palette.grey[100]}`,\n  },\n  positive: {\n    backgroundColor: 'rgb(153, 255, 153) !important',\n    '&:hover': {\n      filter: 'brightness(85%)',\n    },\n  },\n  negative: {\n    backgroundColor: 'rgb(255, 204, 238) !important',\n    '&:hover': {\n      filter: 'brightness(85%)',\n    },\n  },\n  button: {\n    flexGrow: 1,\n    width: '28%',\n    textAlign: 'center',\n    padding: '4px',\n    cursor: 'pointer',\n    '&:not(:nth-child(3n))': {\n      borderRight: `1px solid ${theme.palette.grey[100]}`,\n    },\n    '&:hover': {\n      backgroundColor: theme.palette.grey[100],\n    },\n    '&.negative:hover': {\n      backgroundColor: 'rgb(153, 255, 153) !important',\n    },\n    '&.positive:hover': {\n      backgroundColor: 'rgb(255, 204, 238) !important',\n    },\n  },\n  arrow: {\n    overflowX: 'unset',\n    overflowY: 'unset',\n    marginLeft: '16px',\n    '&::before': {\n      position: 'absolute',\n      right: '100%',\n      top: '13px',\n      border: 'solid transparent',\n      content: '\"\"',\n      height: 0,\n      width: 0,\n      pointerEvents: 'none',\n      borderWidth: '7px',\n      borderRightColor: theme.palette.grey[100],\n    },\n    '&.negative::before': {\n      borderRightColor: 'rgb(255, 204, 238) !important',\n    },\n    '&.positive::before': {\n      borderRightColor: 'rgb(153, 255, 153) !important',\n    },\n  },\n});\n\nclass FreeformEditor extends React.Component {\n  static propTypes = {\n    anchorEl: PropTypes.object,\n    open: PropTypes.bool,\n    offset: PropTypes.number,\n    value: PropTypes.string,\n    type: PropTypes.string,\n    onClose: PropTypes.func,\n    onDelete: PropTypes.func,\n    onSave: PropTypes.func,\n    onTypeChange: PropTypes.func,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { value: props.value };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { value } = nextProps;\n    const { value: propsValue } = this.props;\n\n    if (value !== propsValue) {\n      this.setState({ value });\n    }\n  }\n\n  onValueChange = (event) => this.setState({ value: event.target.value });\n\n  handleSave = () => {\n    const { value: oldValue, onSave, onClose, onDelete } = this.props;\n    const { value } = this.state;\n\n    if (value === '') {\n      onDelete();\n    }\n\n    if (oldValue !== value) {\n      onSave(oldValue, value);\n    }\n\n    this.setState({ value: '' });\n    onClose();\n  };\n\n  handleTypeChange = () => {\n    const { onTypeChange, onDelete } = this.props;\n    const { value } = this.state;\n\n    if (value === '') {\n      onDelete();\n    } else {\n      onTypeChange(value);\n    }\n\n    this.setState({ value: '' });\n  };\n\n  render() {\n    const { anchorEl, classes, offset, onDelete, open, type } = this.props;\n    const { value } = this.state;\n\n    return (\n      <Popover\n        anchorEl={anchorEl}\n        elevation={2}\n        open={open}\n        onClose={this.handleSave}\n        classes={{ paper: classNames(classes.arrow, type) }}\n        style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        <div className={classNames(classes.wrapper, type)}>\n          <TextField\n            id=\"annotation-editor\"\n            style={{\n              padding: '2px 5px',\n              width: '95%',\n            }}\n            autoFocus\n            multiline\n            rows={1}\n            rowsMax={4}\n            value={value}\n            onChange={this.onValueChange}\n            InputProps={{ disableUnderline: true }}\n          />\n          <div className={classes.holder}>\n            <div className={classes.button} onClick={onDelete}>\n              Delete\n            </div>\n            <div className={classNames(classes.button, type)} onClick={this.handleTypeChange}>\n              {type === 'negative' ? 'Green' : 'Pink'}\n            </div>\n            <div className={classes.button} onClick={this.handleSave}>\n              Save\n            </div>\n          </div>\n        </div>\n      </Popover>\n    );\n  }\n}\n\nexport default withStyles(styles)(FreeformEditor);\n"],"file":"freeform-editor.js"}

package/lib/index.js

@@ -29,17 +29,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _debug = _interopRequireDefault(require("debug"));
+
 var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
 
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
 
-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); }; }
 
 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; } }
 
-var log = (0, _debug["default"])('@pie-ui:extended-text-entry');
+var log = (0, _debug["default"])('@pie-elements:extended-text-entry');
 var domParser = (typeof window === "undefined" ? "undefined" : (0, _typeof2["default"])(window)) !== undefined ? new DOMParser() : {
   parseFromString: function parseFromString(v) {
     return v;
@@ -99,10 +99,25 @@ var RootExtendedTextEntry = /*#__PURE__*/function (_HTMLElement) {
       this.render();
     }
   }, {
-    key: "handleChange",
-    value: function handleChange(value) {
+    key: "valueChange",
+    value: function valueChange(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",
@@ -120,7 +135,9 @@ var RootExtendedTextEntry = /*#__PURE__*/function (_HTMLElement) {
         var elem = /*#__PURE__*/_react["default"].createElement(_main["default"], {
           model: this._model,
           session: this._session,
-          onChange: this.handleChange.bind(this)
+          onValueChange: this.valueChange.bind(this),
+          onAnnotationsChange: this.annotationsChange.bind(this),
+          onCommentChange: this.commentChange.bind(this)
         });
 
         _reactDom["default"].render(elem, this, function () {

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","setAttribute","elem","React","createElement","Main","model","session","onChange","handleChange","bind","ReactDOM","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,6BAAN,CAAZ;AAEA,IAAMC,SAAS,GAAG,QAAOC,MAAP,0DAAOA,MAAP,OAAkBC,SAAlB,GAA8B,IAAIC,SAAJ,EAA9B,GAAgD;AAAEC,EAAAA,eAAe,EAAE,yBAACC,CAAD;AAAA,WAAOA,CAAP;AAAA;AAAnB,CAAlE;;AAEO,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,CAAmB,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAA9C,EAAqD,CAAC,CAAC,KAAKN,MAA5D,CAAnB;AAEA,WAAKO,MAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKN,QAAZ;AACD,K;SAPD,aAAYO,CAAZ,EAAe;AACb,WAAKP,QAAL,GAAgBO,CAAhB;AACA,WAAKD,MAAL;AACD;;;WAMD,sBAAahB,KAAb,EAAoB;AAClB,WAAKU,QAAL,CAAcV,KAAd,GAAsBA,KAAtB;AAEA,WAAKY,aAAL,CAAmB,IAAIM,oCAAJ,CAAwB,KAAKJ,OAAL,CAAaC,WAAb,EAAxB,EAAoDX,UAAU,CAACJ,KAAD,CAA9D,CAAnB;AACD;;;WAED,6BAAoB;AAClB,WAAKmB,YAAL,CAAkB,YAAlB,EAAgC,2BAAhC;AACA,WAAKA,YAAL,CAAkB,MAAlB,EAA0B,QAA1B;AAEA,WAAKH,MAAL;AACD;;;WAED,kBAAS;AAAA;;AACP,UAAI,KAAKP,MAAL,IAAe,KAAKC,QAAxB,EAAkC;AAChC,YAAIU,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,UAAAA,KAAK,EAAE,KAAKf,MADuB;AAEnCgB,UAAAA,OAAO,EAAE,KAAKf,QAFqB;AAGnCgB,UAAAA,QAAQ,EAAE,KAAKC,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB;AAHyB,SAA1B,CAAX;;AAMAC,6BAASb,MAAT,CAAgBI,IAAhB,EAAsB,IAAtB,EAA4B,YAAM;AAChC,mDAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAhDgDU,W","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\n\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport debug from 'debug';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst domParser = 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(new ModelSetEvent(this.tagName.toLowerCase(), false, !!this._model));\n\n    this.render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this.render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  handleChange(value) {\n    this._session.value = value;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value)));\n  }\n\n  connectedCallback() {\n    this.setAttribute('aria-label', 'Written Response Question');\n    this.setAttribute('role', 'region');\n\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\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","annotations","comment","setAttribute","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 debug from 'debug';\n\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nconst log = debug('@pie-elements:extended-text-entry');\n\nconst domParser = 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(new ModelSetEvent(this.tagName.toLowerCase(), false, !!this._model));\n\n    this.render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this.render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  valueChange(value) {\n    this._session.value = value;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value)));\n\n    this.render();\n  }\n\n  annotationsChange(annotations) {\n    this._session.annotations = annotations;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), true));\n\n    this.render();\n  }\n\n  commentChange(comment) {\n    this._session.comment = comment;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(comment)));\n\n    this.render();\n  }\n\n  connectedCallback() {\n    this.setAttribute('aria-label', 'Written Response Question');\n    this.setAttribute('role', 'region');\n\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"}

package/lib/main.js

@@ -23,21 +23,23 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _debug = _interopRequireDefault(require("debug"));
 
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
 
 var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+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); }; }
 
@@ -90,7 +92,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSession", (0, _debounce["default"])(_this.props.onChange, 1500));
+    (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));
     return _this;
   }
 
@@ -102,18 +105,27 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           model = _this$props.model,
           classes = _this$props.classes,
-          session = _this$props.session;
-      var dimensions = model.dimensions,
+          session = _this$props.session,
+          onAnnotationsChange = _this$props.onAnnotationsChange;
+      var animationsDisabled = model.animationsDisabled,
+          annotatorMode = model.annotatorMode,
+          customKeys = model.customKeys,
+          dimensions = model.dimensions,
           disabled = model.disabled,
+          disabledAnnotator = model.disabledAnnotator,
+          equationEditor = model.equationEditor,
           feedback = model.feedback,
-          teacherInstructions = model.teacherInstructions,
           mathInput = model.mathInput,
+          playersToolbarPosition = model.playersToolbarPosition,
+          predefinedAnnotations = model.predefinedAnnotations,
+          prompt = model.prompt,
           spanishInput = model.spanishInput,
           specialInput = model.specialInput,
-          animationsDisabled = model.animationsDisabled,
-          playersToolbarPosition = model.playersToolbarPosition,
-          spellCheckEnabled = model.spellCheckEnabled;
-      var value = session.value;
+          spellCheckEnabled = model.spellCheckEnabled,
+          teacherInstructions = model.teacherInstructions;
+      var annotations = session.annotations,
+          comment = session.comment,
+          value = session.value;
 
       var _ref = dimensions || {},
           width = _ref.width,
@@ -159,15 +171,29 @@ var Main = /*#__PURE__*/function (_React$Component) {
           visible: 'Hide Teacher Instructions'
         },
         className: classes.collapsible
-      }, teacherInstructionsDiv) : teacherInstructionsDiv), model.prompt && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      }, teacherInstructionsDiv) : teacherInstructionsDiv), prompt && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         component: 'span',
         className: classes.prompt
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         defaultClassName: "prompt",
         prompt: model.prompt
-      })), /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      })), 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.EditableHtml, {
         className: (0, _classnames["default"])(classes.editor, 'response-area-editor'),
-        onChange: this.changeSession,
+        onChange: this.changeSessionValue,
         markup: value || '',
         width: width && width.toString(),
         minHeight: height && height.toString(),
@@ -203,11 +229,15 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
 exports.Main = Main;
 (0, _defineProperty2["default"])(Main, "propTypes", {
-  onChange: _propTypes["default"].func.isRequired,
+  onValueChange: _propTypes["default"].func.isRequired,
+  onAnnotationsChange: _propTypes["default"].func.isRequired,
+  onCommentChange: _propTypes["default"].func.isRequired,
   model: _propTypes["default"].object,
   classes: _propTypes["default"].object.isRequired,
   session: _propTypes["default"].shape({
-    value: _propTypes["default"].string
+    value: _propTypes["default"].string,
+    annotations: _propTypes["default"].array,
+    comment: _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","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          charactersLimit={50000}\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","onValueChange","onCommentChange","model","classes","session","onAnnotationsChange","animationsDisabled","annotatorMode","customKeys","dimensions","disabled","disabledAnnotator","equationEditor","feedback","mathInput","playersToolbarPosition","predefinedAnnotations","spanishInput","specialInput","spellCheckEnabled","annotations","comment","value","maxHeight","toolbarOpts","teacherInstructionsDiv","languageCharactersProps","push","language","ref","containerRef","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 PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\n\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport { color, Feedback, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\n\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  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    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  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      playersToolbarPosition,\n      predefinedAnnotations,\n      prompt,\n      spanishInput,\n      specialInput,\n      spellCheckEnabled,\n      teacherInstructions,\n    } = model;\n    const { annotations, comment, 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        {prompt && (\n          <Typography component={'span'} className={classes.prompt}>\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </Typography>\n        )}\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={classnames(classes.editor, '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            spellCheck={spellCheckEnabled}\n            charactersLimit={50000}\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\n        {feedback && <Feedback correctness=\"correct\" feedback={feedback} />}\n      </div>\n    );\n  }\n}\n\nexport default withStyles(style)(Main);\n"],"file":"main.js"}