@pie-element/extended-text-entry 15.1.2-next.2 → 15.1.2

package/lib/annotation/freeform-editor.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+const StyledPopover = (0, _styles.styled)(_material.Popover)(({
+  theme,
+  annotationType
+}) => ({
+  '& .MuiPaper-root': {
+    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]
+    },
+    ...(annotationType === 'negative' && {
+      '&::before': {
+        borderRightColor: 'rgb(255, 204, 238) !important'
+      }
+    }),
+    ...(annotationType === 'positive' && {
+      '&::before': {
+        borderRightColor: 'rgb(153, 255, 153) !important'
+      }
+    })
+  }
+}));
+const Wrapper = (0, _styles.styled)('div')(({
+  theme,
+  annotationType
+}) => ({
+  width: '200px',
+  overflow: 'hidden',
+  borderRadius: '4px',
+  backgroundColor: '#ffffff',
+  border: `4px solid ${theme.palette.grey[100]}`,
+  ...(annotationType === 'negative' && {
+    borderColor: 'rgb(255, 204, 238) !important'
+  }),
+  ...(annotationType === 'positive' && {
+    borderColor: 'rgb(153, 255, 153) !important'
+  })
+}));
+const Holder = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  borderTop: `2px solid ${theme.palette.grey[100]}`
+}));
+const Button = (0, _styles.styled)('div')(({
+  theme,
+  variant,
+  annotationType
+}) => ({
+  flexGrow: 1,
+  width: '28%',
+  textAlign: 'center',
+  padding: '4px',
+  cursor: 'pointer',
+  '&:not(:nth-child(3n))': {
+    borderRight: `1px solid ${theme.palette.grey[100]}`
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.grey[100]
+  },
+  ...(variant === 'positive' && {
+    backgroundColor: 'rgb(153, 255, 153) !important',
+    '&:hover': {
+      filter: 'brightness(85%)'
+    }
+  }),
+  ...(variant === 'negative' && {
+    backgroundColor: 'rgb(255, 204, 238) !important',
+    '&:hover': {
+      filter: 'brightness(85%)'
+    }
+  }),
+  ...(variant === 'typeChange' && annotationType === 'negative' && {
+    '&:hover': {
+      backgroundColor: 'rgb(153, 255, 153) !important'
+    }
+  }),
+  ...(variant === 'typeChange' && annotationType === 'positive' && {
+    '&:hover': {
+      backgroundColor: 'rgb(255, 204, 238) !important'
+    }
+  })
+}));
+class FreeformEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onValueChange", event => this.setState({
+      value: event.target.value
+    }));
+    (0, _defineProperty2.default)(this, "handleSave", () => {
+      const {
+        value: oldValue,
+        onSave,
+        onClose,
+        onDelete
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      if (value === '') {
+        onDelete();
+      }
+      if (oldValue !== value) {
+        onSave(oldValue, value);
+      }
+      this.setState({
+        value: ''
+      });
+      onClose();
+    });
+    (0, _defineProperty2.default)(this, "handleTypeChange", () => {
+      const {
+        onTypeChange,
+        onDelete
+      } = this.props;
+      const {
+        value
+      } = this.state;
+      if (value === '') {
+        onDelete();
+      } else {
+        onTypeChange(value);
+      }
+      this.setState({
+        value: ''
+      });
+    });
+    this.state = {
+      value: props.value
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value
+    } = nextProps;
+    const {
+      value: propsValue
+    } = this.props;
+    if (value !== propsValue) {
+      this.setState({
+        value
+      });
+    }
+  }
+  render() {
+    const {
+      anchorEl,
+      offset,
+      onDelete,
+      open,
+      type
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(StyledPopover, {
+      anchorEl: anchorEl,
+      elevation: 2,
+      open: open,
+      onClose: this.handleSave,
+      annotationType: type,
+      style: {
+        marginTop: `${offset}px`,
+        transition: 'margin-top 2s ease-out'
+      },
+      transitionDuration: {
+        enter: 225,
+        exit: 195
+      },
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    }, /*#__PURE__*/_react.default.createElement(Wrapper, {
+      annotationType: type
+    }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
+      id: "annotation-editor",
+      style: {
+        padding: '2px 5px',
+        width: '95%'
+      },
+      autoFocus: true,
+      multiline: true,
+      rows: 1,
+      maxRows: 4,
+      value: value,
+      onChange: this.onValueChange,
+      InputProps: {
+        disableUnderline: true
+      }
+    }), /*#__PURE__*/_react.default.createElement(Holder, null, /*#__PURE__*/_react.default.createElement(Button, {
+      onClick: onDelete
+    }, "Delete"), /*#__PURE__*/_react.default.createElement(Button, {
+      variant: "typeChange",
+      annotationType: type,
+      onClick: this.handleTypeChange
+    }, type === 'negative' ? 'Green' : 'Pink'), /*#__PURE__*/_react.default.createElement(Button, {
+      onClick: this.handleSave
+    }, "Save"))));
+  }
+}
+(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 = exports.default = FreeformEditor;
+//# sourceMappingURL=freeform-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"freeform-editor.js","names":["_react","_interopRequireDefault","require","_propTypes","_material","_styles","StyledPopover","styled","Popover","theme","annotationType","overflowX","overflowY","marginLeft","position","right","top","border","content","height","width","pointerEvents","borderWidth","borderRightColor","palette","grey","Wrapper","overflow","borderRadius","backgroundColor","borderColor","Holder","display","flexWrap","borderTop","Button","variant","flexGrow","textAlign","padding","cursor","borderRight","filter","FreeformEditor","React","Component","constructor","props","_defineProperty2","default","event","setState","value","target","oldValue","onSave","onClose","onDelete","state","onTypeChange","UNSAFE_componentWillReceiveProps","nextProps","propsValue","render","anchorEl","offset","open","type","createElement","elevation","handleSave","style","marginTop","transition","transitionDuration","enter","exit","anchorOrigin","vertical","horizontal","transformOrigin","TextField","id","autoFocus","multiline","rows","maxRows","onChange","onValueChange","InputProps","disableUnderline","onClick","handleTypeChange","PropTypes","object","bool","number","string","func","_default","exports"],"sources":["../../src/annotation/freeform-editor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\nconst StyledPopover = styled(Popover)(({ theme, annotationType }) => ({\n  '& .MuiPaper-root': {\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    ...(annotationType === 'negative' && {\n      '&::before': {\n        borderRightColor: 'rgb(255, 204, 238) !important',\n      },\n    }),\n    ...(annotationType === 'positive' && {\n      '&::before': {\n        borderRightColor: 'rgb(153, 255, 153) !important',\n      },\n    }),\n  },\n}));\n\nconst Wrapper = styled('div')(({ theme, annotationType }) => ({\n  width: '200px',\n  overflow: 'hidden',\n  borderRadius: '4px',\n  backgroundColor: '#ffffff',\n  border: `4px solid ${theme.palette.grey[100]}`,\n  ...(annotationType === 'negative' && {\n    borderColor: 'rgb(255, 204, 238) !important',\n  }),\n  ...(annotationType === 'positive' && {\n    borderColor: 'rgb(153, 255, 153) !important',\n  }),\n}));\n\nconst Holder = styled('div')(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  borderTop: `2px solid ${theme.palette.grey[100]}`,\n}));\n\nconst Button = styled('div')(({ theme, variant, annotationType }) => ({\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  ...(variant === 'positive' && {\n    backgroundColor: 'rgb(153, 255, 153) !important',\n    '&:hover': {\n      filter: 'brightness(85%)',\n    },\n  }),\n  ...(variant === 'negative' && {\n    backgroundColor: 'rgb(255, 204, 238) !important',\n    '&:hover': {\n      filter: 'brightness(85%)',\n    },\n  }),\n  ...(variant === 'typeChange' && annotationType === 'negative' && {\n    '&:hover': {\n      backgroundColor: 'rgb(153, 255, 153) !important',\n    },\n  }),\n  ...(variant === 'typeChange' && annotationType === 'positive' && {\n    '&:hover': {\n      backgroundColor: 'rgb(255, 204, 238) !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, offset, onDelete, open, type } = this.props;\n    const { value } = this.state;\n\n    return (\n      <StyledPopover\n        anchorEl={anchorEl}\n        elevation={2}\n        open={open}\n        onClose={this.handleSave}\n        annotationType={type}\n        style={{ marginTop: `${offset}px`, transition: 'margin-top 2s ease-out' }}\n        transitionDuration={{ enter: 225, exit: 195 }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n      >\n        <Wrapper annotationType={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            maxRows={4}\n            value={value}\n            onChange={this.onValueChange}\n            InputProps={{ disableUnderline: true }}\n          />\n          <Holder>\n            <Button onClick={onDelete}>\n              Delete\n            </Button>\n            <Button variant=\"typeChange\" annotationType={type} onClick={this.handleTypeChange}>\n              {type === 'negative' ? 'Green' : 'Pink'}\n            </Button>\n            <Button onClick={this.handleSave}>\n              Save\n            </Button>\n          </Holder>\n        </Wrapper>\n      </StyledPopover>\n    );\n  }\n}\n\nexport default FreeformEditor;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.isComplete = isComplete;
+exports.textContent = textContent;
+var _main = _interopRequireDefault(require("./main"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _debug = _interopRequireDefault(require("debug"));
+var _mathRendering = require("@pie-lib/math-rendering");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+const log = (0, _debug.default)('@pie-elements: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;
+    this._root = null;
+  }
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang);
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), false, !!this._model));
+    this.render();
+  }
+  set session(s) {
+    this._session = s;
+    this.render();
+  }
+  get session() {
+    return this._session;
+  }
+  valueChange(value) {
+    this._session.value = value;
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(value)));
+    this.render();
+  }
+  annotationsChange(annotations) {
+    this._session.annotations = annotations;
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), true));
+    this.render();
+  }
+  commentChange(comment) {
+    this._session.comment = comment;
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(comment)));
+    this.render();
+  }
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Written Response Question');
+    this.setAttribute('role', 'region');
+    this.render();
+  }
+  render() {
+    if (this._model && this._session) {
+      let 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)
+      });
+      this.setLangAttribute();
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(elem);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = RootExtendedTextEntry;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_main","_interopRequireDefault","require","_react","_client","_debug","_mathRendering","_piePlayerEvents","log","debug","domParser","window","undefined","DOMParser","parseFromString","v","textContent","value","document","body","err","isComplete","tc","out","length","RootExtendedTextEntry","HTMLElement","constructor","_model","_session","_root","setLangAttribute","language","lang","slice","setAttribute","model","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","render","session","s","valueChange","SessionChangedEvent","annotationsChange","annotations","commentChange","comment","connectedCallback","elem","React","createElement","Main","onValueChange","bind","onAnnotationsChange","onCommentChange","createRoot","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import Main from './main';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\n\nimport { renderMath } from '@pie-lib/math-rendering';\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    this._root = null;\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\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      this.setLangAttribute();\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(elem);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _debug = _interopRequireDefault(require("debug"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _styles = require("@mui/material/styles");
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _renderUi = require("@pie-lib/render-ui");
+var _annotationEditor = _interopRequireDefault(require("./annotation/annotation-editor"));
+const log = (0, _debug.default)('@pie-ui:extended-text-entry');
+const MainContainer = (0, _styles.styled)(_renderUi.UiLayout)({
+  backgroundColor: _renderUi.color.background(),
+  color: _renderUi.color.text()
+});
+const StyledPrompt = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  width: '100%',
+  color: _renderUi.color.text(),
+  marginBottom: theme.spacing(2),
+  fontSize: 'inherit'
+}));
+const TeacherInstructions = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const Editor = (0, _styles.styled)(_editableHtmlTipTap.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2),
+  borderRadius: '4px'
+}));
+const SrOnly = (0, _styles.styled)('h2')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "changeSessionValue", (0, _lodashEs.debounce)(this.props.onValueChange, 1500));
+    (0, _defineProperty2.default)(this, "changeSessionComment", (0, _lodashEs.debounce)(this.props.onCommentChange, 1500));
+  }
+  render() {
+    const {
+      model,
+      session,
+      onAnnotationsChange
+    } = this.props;
+    const {
+      animationsDisabled,
+      annotatorMode,
+      customKeys,
+      dimensions,
+      disabled,
+      disabledAnnotator,
+      equationEditor,
+      extraCSSRules,
+      feedback,
+      mathInput,
+      playersToolbarPosition,
+      predefinedAnnotations,
+      prompt,
+      spanishInput,
+      specialInput,
+      spellCheckEnabled,
+      teacherInstructions
+    } = model;
+    const {
+      annotations,
+      comment,
+      value
+    } = session;
+    const {
+      width,
+      height
+    } = dimensions || {};
+    const maxHeight = '40vh';
+    const toolbarOpts = {
+      position: playersToolbarPosition === 'top' ? 'top' : 'bottom'
+    };
+    log('[render] disabled? ', disabled);
+    const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions
+    });
+    const languageCharactersProps = [];
+    if (spanishInput) {
+      languageCharactersProps.push({
+        language: 'spanish'
+      });
+    }
+    if (specialInput) {
+      languageCharactersProps.push({
+        language: 'special'
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(MainContainer, {
+      extraCSSRules: extraCSSRules,
+      ref: ref => {
+        this.containerRef = ref;
+      }
+    }, /*#__PURE__*/_react.default.createElement(SrOnly, null, "Constructed Response Question"), teacherInstructions && /*#__PURE__*/_react.default.createElement(TeacherInstructions, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, teacherInstructionsDiv) : teacherInstructionsDiv), prompt && /*#__PURE__*/_react.default.createElement(StyledPrompt, {
+      component: 'span'
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      defaultClassName: "prompt",
+      prompt: model.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(Editor, {
+      className: "response-area-editor",
+      onChange: this.changeSessionValue,
+      markup: value || '',
+      maxWidth: width && width.toString(),
+      minWidth: '100px',
+      minHeight: height && height.toString(),
+      maxHeight: maxHeight,
+      disabled: disabled,
+      highlightShape: true,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      charactersLimit: 50000,
+      autoWidthToolbar: true,
+      pluginProps: {
+        math: {
+          disabled: !mathInput,
+          customKeys: this.props.model.customKeys,
+          keypadMode: this.props.model.equationEditor,
+          controlledKeypadMode: false
+        },
+        video: {
+          disabled: true
+        },
+        audio: {
+          disabled: true
+        },
+        table: {
+          disabled: true
+        },
+        textAlign: {
+          disabled: true
+        },
+        h3: {
+          disabled: true
+        },
+        separateParagraphs: {
+          disabled: false
+        },
+        ul_list: {
+          disabled: true
+        },
+        ol_list: {
+          disabled: true
+        }
+      },
+      languageCharactersProps: languageCharactersProps
+    }), feedback && /*#__PURE__*/_react.default.createElement(_renderUi.Feedback, {
+      correctness: "correct",
+      feedback: feedback
+    }));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  onValueChange: _propTypes.default.func.isRequired,
+  onAnnotationsChange: _propTypes.default.func.isRequired,
+  onCommentChange: _propTypes.default.func.isRequired,
+  model: _propTypes.default.object,
+  session: _propTypes.default.shape({
+    value: _propTypes.default.string,
+    annotations: _propTypes.default.array,
+    comment: _propTypes.default.string
+  }).isRequired
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_debug","_Typography","_styles","_editableHtmlTipTap","_renderUi","_annotationEditor","log","debug","MainContainer","styled","UiLayout","backgroundColor","color","background","text","StyledPrompt","Typography","theme","width","marginBottom","spacing","fontSize","TeacherInstructions","Editor","EditableHtml","borderRadius","SrOnly","position","left","top","height","overflow","Main","React","Component","constructor","args","_defineProperty2","default","debounce","props","onValueChange","onCommentChange","render","model","session","onAnnotationsChange","animationsDisabled","annotatorMode","customKeys","dimensions","disabled","disabledAnnotator","equationEditor","extraCSSRules","feedback","mathInput","playersToolbarPosition","predefinedAnnotations","prompt","spanishInput","specialInput","spellCheckEnabled","teacherInstructions","annotations","comment","value","maxHeight","toolbarOpts","teacherInstructionsDiv","createElement","PreviewPrompt","defaultClassName","languageCharactersProps","push","language","ref","containerRef","Collapsible","labels","hidden","visible","component","onChange","changeSessionComment","disabledMath","keypadMode","className","changeSessionValue","markup","maxWidth","toString","minWidth","minHeight","highlightShape","spellCheck","charactersLimit","autoWidthToolbar","pluginProps","math","controlledKeypadMode","video","audio","table","textAlign","h3","separateParagraphs","ul_list","ol_list","Feedback","correctness","exports","PropTypes","func","isRequired","object","shape","string","array","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'lodash-es';\nimport debug from 'debug';\n\nimport Typography from '@mui/material/Typography';\nimport { styled } from '@mui/material/styles';\n\nimport EditableHtml from '@pie-lib/editable-html-tip-tap';\nimport { color, Feedback, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\n\nimport AnnotationEditor from './annotation/annotation-editor';\n\nconst log = debug('@pie-ui:extended-text-entry');\n\nconst MainContainer = styled(UiLayout)({\n  backgroundColor: color.background(),\n  color: color.text(),\n});\n\nconst StyledPrompt = styled(Typography)(({ theme }) => ({\n  width: '100%',\n  color: color.text(),\n  marginBottom: theme.spacing(2),\n  fontSize: 'inherit',\n}));\n\nconst TeacherInstructions = styled('div')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst Editor = styled(EditableHtml)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n  borderRadius: '4px',\n}));\n\nconst SrOnly = styled('h2')({\n  position: 'absolute',\n  left: '-10000px',\n  top: 'auto',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\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    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, session, onAnnotationsChange } = this.props;\n    const {\n      animationsDisabled,\n      annotatorMode,\n      customKeys,\n      dimensions,\n      disabled,\n      disabledAnnotator,\n      equationEditor,\n      extraCSSRules,\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      <MainContainer\n        extraCSSRules={extraCSSRules}\n        ref={(ref) => {\n          this.containerRef = ref;\n        }}\n      >\n        <SrOnly>Constructed Response Question</SrOnly>\n\n        {teacherInstructions && (\n          <TeacherInstructions>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </TeacherInstructions>\n        )}\n\n        {prompt && (\n          <StyledPrompt component={'span'}>\n            <PreviewPrompt defaultClassName=\"prompt\" prompt={model.prompt} />\n          </StyledPrompt>\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          <Editor\n            className=\"response-area-editor\"\n            onChange={this.changeSessionValue}\n            markup={value || ''}\n            maxWidth={width && width.toString()}\n            minWidth={'100px'}\n            minHeight={height && height.toString()}\n            maxHeight={maxHeight}\n            disabled={disabled}\n            highlightShape={true}\n            toolbarOpts={toolbarOpts}\n            spellCheck={spellCheckEnabled}\n            charactersLimit={50000}\n            autoWidthToolbar\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              table: {\n                disabled: true,\n              },\n              textAlign: {\n                disabled: true,\n              },\n              h3: {\n                disabled: true,\n              },\n              separateParagraphs: { disabled: false },\n              ul_list: { disabled: true },\n              ol_list: { disabled: true },\n            }}\n            languageCharactersProps={languageCharactersProps}\n          />\n        )}\n\n        {feedback && <Feedback correctness=\"correct\" feedback={feedback} />}\n      </MainContainer>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}