@pie-element/explicit-constructed-response 3.9.3-next.319 → 3.10.0-ps.4

package/module/configure.js

@@ -0,0 +1,1647 @@
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__icons, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.2.9/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.0.10/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.10/module/index.js";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+var lib$1 = {};
+function _interopRequireDefault$1(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+var interopRequireDefault = _interopRequireDefault$1;
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+var classCallCheck = _classCallCheck;
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if (("value" in descriptor)) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+var createClass = _createClass;
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+var assertThisInitialized$1 = _assertThisInitialized;
+function _setPrototypeOf(o, p) {
+  setPrototypeOf$3 = _setPrototypeOf = Object.setPrototypeOf || (function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  });
+  return _setPrototypeOf(o, p);
+}
+var setPrototypeOf$3 = _setPrototypeOf;
+var setPrototypeOf$2 = setPrototypeOf$3;
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) setPrototypeOf$2(subClass, superClass);
+}
+var inherits = _inherits;
+function _typeof$2(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof_1 = _typeof$2 = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof_1 = _typeof$2 = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+  return _typeof$2(obj);
+}
+var _typeof_1 = _typeof$2;
+var _typeof$1 = _typeof_1;
+var assertThisInitialized = assertThisInitialized$1;
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof$1(call) === "object" || typeof call === "function")) {
+    return call;
+  }
+  return assertThisInitialized(self);
+}
+var possibleConstructorReturn = _possibleConstructorReturn;
+function _getPrototypeOf(o) {
+  getPrototypeOf$1 = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+var getPrototypeOf$1 = _getPrototypeOf;
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+var isNativeFunction$1 = _isNativeFunction;
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+  try {
+    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+var isNativeReflectConstruct$1 = _isNativeReflectConstruct;
+var setPrototypeOf$1 = setPrototypeOf$3;
+var isNativeReflectConstruct = isNativeReflectConstruct$1;
+function _construct(Parent, args, Class) {
+  if (isNativeReflectConstruct()) {
+    construct$1 = _construct = Reflect.construct;
+  } else {
+    construct$1 = _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) setPrototypeOf$1(instance, Class.prototype);
+      return instance;
+    };
+  }
+  return _construct.apply(null, arguments);
+}
+var construct$1 = _construct;
+var getPrototypeOf = getPrototypeOf$1;
+var setPrototypeOf = setPrototypeOf$3;
+var isNativeFunction = isNativeFunction$1;
+var construct = construct$1;
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : undefined;
+  wrapNativeSuper = _wrapNativeSuper = function _wrapNativeSuper(Class) {
+    if (Class === null || !isNativeFunction(Class)) return Class;
+    if (typeof Class !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class)) return _cache.get(Class);
+      _cache.set(Class, Wrapper);
+    }
+    function Wrapper() {
+      return construct(Class, arguments, getPrototypeOf(this).constructor);
+    }
+    Wrapper.prototype = Object.create(Class.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return setPrototypeOf(Wrapper, Class);
+  };
+  return _wrapNativeSuper(Class);
+}
+var wrapNativeSuper = _wrapNativeSuper;
+function _defineProperty(obj, key, value) {
+  if ((key in obj)) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var defineProperty = _defineProperty;
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelUpdatedEvent extends CustomEvent {
+  constructor(update, reset = false) {
+    super(ModelUpdatedEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        update,
+        reset
+      }
+    });
+    this.update = update;
+    this.reset = reset;
+  }
+}
+ModelUpdatedEvent.TYPE = 'model.updated';
+lib.ModelUpdatedEvent = ModelUpdatedEvent;
+class DeleteImageEvent extends CustomEvent {
+  constructor(src, done) {
+    super(DeleteImageEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        src,
+        done
+      }
+    });
+    this.src = src;
+    this.done = done;
+  }
+}
+DeleteImageEvent.TYPE = 'delete.image';
+lib.DeleteImageEvent = DeleteImageEvent;
+class InsertImageEvent extends CustomEvent {
+  constructor(handler) {
+    super(InsertImageEvent.TYPE, {
+      bubbles: true,
+      detail: handler
+    });
+    this.handler = handler;
+  }
+}
+InsertImageEvent.TYPE = 'insert.image';
+lib.InsertImageEvent = InsertImageEvent;
+var main = {};
+var _typeof = _typeof_1;
+function _getRequireWildcardCache() {
+  if (typeof WeakMap !== "function") return null;
+  var cache = new WeakMap();
+  _getRequireWildcardCache = function _getRequireWildcardCache() {
+    return cache;
+  };
+  return cache;
+}
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  }
+  if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") {
+    return {
+      "default": obj
+    };
+  }
+  var cache = _getRequireWildcardCache();
+  if (cache && cache.has(obj)) {
+    return cache.get(obj);
+  }
+  var newObj = {};
+  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc);
+      } else {
+        newObj[key] = obj[key];
+      }
+    }
+  }
+  newObj["default"] = obj;
+  if (cache) {
+    cache.set(obj, newObj);
+  }
+  return newObj;
+}
+var interopRequireWildcard = _interopRequireWildcard;
+var ecrToolbar = {};
+const require$$8 = _dll_react;
+const require$$9$4 = _dll_prop_types;
+const require$$10$4 = _dll_material_ui__core_styles;
+const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
+(function (exports) {
+  var _interopRequireDefault = interopRequireDefault;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = exports.ECRToolbar = void 0;
+  var _classCallCheck2 = _interopRequireDefault(classCallCheck);
+  var _createClass2 = _interopRequireDefault(createClass);
+  var _assertThisInitialized2 = _interopRequireDefault(assertThisInitialized$1);
+  var _inherits2 = _interopRequireDefault(inherits);
+  var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn);
+  var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$1);
+  var _defineProperty2 = _interopRequireDefault(defineProperty);
+  var _react = _interopRequireDefault(require$$8);
+  var _propTypes = _interopRequireDefault(require$$9$4);
+  var _styles = require$$10$4;
+  var _OutlinedInput = _interopRequireDefault(require$$11$4);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          (0, _defineProperty2["default"])(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  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 {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  var findSlateNode = function findSlateNode(key) {
+    return window.document.querySelector('[data-key="' + key + '"]');
+  };
+  var ECRToolbar = (function (_React$Component) {
+    (0, _inherits2["default"])(ECRToolbar, _React$Component);
+    var _super = _createSuper(ECRToolbar);
+    function ECRToolbar() {
+      var _this;
+      (0, _classCallCheck2["default"])(this, ECRToolbar);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {
+        var newValue = _this.state.markup;
+        var _this$props = _this.props, node = _this$props.node, value = _this$props.value, onToolbarDone = _this$props.onToolbarDone, onChangeResponse = _this$props.onChangeResponse;
+        var update = _objectSpread(_objectSpread({}, node.data.toJSON()), {}, {
+          value: newValue
+        });
+        var change = value.change().setNodeByKey(node.key, {
+          data: update
+        });
+        var nextText = value.document.getNextText(node.key);
+        change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
+        onToolbarDone(change, false);
+        onChangeResponse(newValue);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (e) {
+        return _this.setState({
+          markup: e.target.value
+        });
+      });
+      return _this;
+    }
+    (0, _createClass2["default"])(ECRToolbar, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var _this$props2 = this.props, correctChoice = _this$props2.correctChoice, node = _this$props2.node;
+        var choice = correctChoice || ({});
+        var domNode = findSlateNode(node.key);
+        if (domNode) {
+          var domNodeRect = domNode.getBoundingClientRect();
+          var editor = domNode.closest('[data-slate-editor]');
+          var editorRect = editor.getBoundingClientRect();
+          var top = domNodeRect.top - editorRect.top;
+          var left = domNodeRect.left - editorRect.left;
+          this.setState({
+            markup: choice.label,
+            toolbarStyle: {
+              position: 'absolute',
+              top: ("").concat(top + domNodeRect.height + 20, "px"),
+              left: ("").concat(left + 20, "px"),
+              width: domNodeRect.width
+            }
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var classes = this.props.classes;
+        var _this$state = this.state, markup = _this$state.markup, toolbarStyle = _this$state.toolbarStyle;
+        return _react["default"].createElement("div", {
+          style: _objectSpread(_objectSpread({}, toolbarStyle), {}, {
+            backgroundColor: '#E0E1E6'
+          })
+        }, _react["default"].createElement(_OutlinedInput["default"], {
+          autoFocus: true,
+          labelWidth: 0,
+          classes: {
+            input: classes.input
+          },
+          onChange: this.onChange,
+          onBlur: this.onDone,
+          value: markup
+        }));
+      }
+    }]);
+    return ECRToolbar;
+  })(_react["default"].Component);
+  exports.ECRToolbar = ECRToolbar;
+  (0, _defineProperty2["default"])(ECRToolbar, "propTypes", {
+    correctChoice: _propTypes["default"].object,
+    classes: _propTypes["default"].object,
+    node: _propTypes["default"].object,
+    onDone: _propTypes["default"].func,
+    onChangeResponse: _propTypes["default"].func.isRequired,
+    onToolbarDone: _propTypes["default"].func.isRequired,
+    value: _propTypes["default"].shape({
+      change: _propTypes["default"].func.isRequired,
+      document: _propTypes["default"].shape({
+        getNextText: _propTypes["default"].func.isRequired
+      })
+    })
+  });
+  var StyledECRToolbar = (0, _styles.withStyles)({
+    respArea: {
+      backgroundColor: '#fff'
+    },
+    input: {
+      backgroundColor: '#fff',
+      padding: '10px 20px 10px 10px'
+    }
+  })(ECRToolbar);
+  var _default = StyledECRToolbar;
+  exports["default"] = _default;
+})(ecrToolbar);
+getDefaultExportFromCjs(ecrToolbar);
+var alternateResponses = {};
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+var arrayLikeToArray$2 = _arrayLikeToArray;
+var arrayLikeToArray$1 = arrayLikeToArray$2;
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return arrayLikeToArray$1(arr);
+}
+var arrayWithoutHoles$1 = _arrayWithoutHoles;
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && (Symbol.iterator in Object(iter))) return Array.from(iter);
+}
+var iterableToArray$1 = _iterableToArray;
+var arrayLikeToArray = arrayLikeToArray$2;
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || (/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/).test(n)) return arrayLikeToArray(o, minLen);
+}
+var unsupportedIterableToArray$1 = _unsupportedIterableToArray;
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+var nonIterableSpread$1 = _nonIterableSpread;
+var arrayWithoutHoles = arrayWithoutHoles$1;
+var iterableToArray = iterableToArray$1;
+var unsupportedIterableToArray = unsupportedIterableToArray$1;
+var nonIterableSpread = nonIterableSpread$1;
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
+}
+var toConsumableArray = _toConsumableArray;
+var alternateSection = {};
+const require$$9$3 = _dll_react;
+const require$$10$3 = _dll_prop_types;
+const {debounce: require$$11$3} = _dll_lodash;
+const {isEqual: require$$12$3} = _dll_lodash;
+const {max: require$$20} = _dll_lodash;
+const {OutlinedInput: require$$13$3} = _dll_material_ui__core;
+const {Button: require$$14$1} = _dll_material_ui__core;
+const {IconButton: require$$16$1} = _dll_material_ui__core;
+const {MenuItem: require$$17} = _dll_material_ui__core;
+const {Select: require$$18} = _dll_material_ui__core;
+const {Delete: require$$15$1} = _dll_material_ui__icons;
+const require$$19 = _dll_material_ui__core_styles;
+(function (exports) {
+  var _interopRequireDefault = interopRequireDefault;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = exports.AlternateSection = exports.Choice = void 0;
+  var _toConsumableArray2 = _interopRequireDefault(toConsumableArray);
+  var _classCallCheck2 = _interopRequireDefault(classCallCheck);
+  var _createClass2 = _interopRequireDefault(createClass);
+  var _assertThisInitialized2 = _interopRequireDefault(assertThisInitialized$1);
+  var _inherits2 = _interopRequireDefault(inherits);
+  var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn);
+  var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$1);
+  var _defineProperty2 = _interopRequireDefault(defineProperty);
+  var _react = _interopRequireDefault(require$$9$3);
+  var _propTypes = _interopRequireDefault(require$$10$3);
+  var _debounce = _interopRequireDefault(require$$11$3);
+  var _isEqual = _interopRequireDefault(require$$12$3);
+  var _OutlinedInput = _interopRequireDefault(require$$13$3);
+  var _Button = _interopRequireDefault(require$$14$1);
+  var _Delete = _interopRequireDefault(require$$15$1);
+  var _IconButton = _interopRequireDefault(require$$16$1);
+  var _MenuItem = _interopRequireDefault(require$$17);
+  var _Select = _interopRequireDefault(require$$18);
+  var _styles = require$$19;
+  var _max = _interopRequireDefault(require$$20);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          (0, _defineProperty2["default"])(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  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 {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  var styles = function styles() {
+    return {
+      altChoices: {
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        display: 'flex',
+        padding: '20px 0 0 0',
+        '& > *': {
+          marginBottom: '20px',
+          width: '100%'
+        }
+      },
+      choice: {
+        flex: '1',
+        marginRight: '20px'
+      },
+      deleteBtn: {
+        fill: 'gray'
+      },
+      selectContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%'
+      }
+    };
+  };
+  var Choice = (function (_React$Component) {
+    (0, _inherits2["default"])(Choice, _React$Component);
+    var _super = _createSuper(Choice);
+    function Choice() {
+      var _this;
+      (0, _classCallCheck2["default"])(this, Choice);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+        value: _this.props.markup
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateText", (0, _debounce["default"])(_this.props.onChange, 300));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (e) {
+        var value = e.target.value;
+        _this.setState({
+          value: value
+        });
+        _this.updateText(value);
+      });
+      return _this;
+    }
+    (0, _createClass2["default"])(Choice, [{
+      key: "render",
+      value: function render() {
+        var value = this.state.value;
+        var _this$props = this.props, classes = _this$props.classes, onDelete = _this$props.onDelete;
+        return _react["default"].createElement("div", {
+          style: {
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between'
+          }
+        }, _react["default"].createElement(_OutlinedInput["default"], {
+          className: classes.choice,
+          value: value,
+          onChange: this.onChange,
+          labelWidth: 0,
+          disableUnderline: true
+        }), _react["default"].createElement(_IconButton["default"], {
+          "aria-label": "delete",
+          className: classes.deleteBtn,
+          onClick: onDelete
+        }, _react["default"].createElement(_Delete["default"], null)));
+      }
+    }]);
+    return Choice;
+  })(_react["default"].Component);
+  exports.Choice = Choice;
+  (0, _defineProperty2["default"])(Choice, "propTypes", {
+    classes: _propTypes["default"].object,
+    markup: _propTypes["default"].string,
+    onChange: _propTypes["default"].func.isRequired,
+    onDelete: _propTypes["default"].func.isRequired,
+    value: _propTypes["default"].string
+  });
+  var AlternateSection = (function (_React$Component2) {
+    (0, _inherits2["default"])(AlternateSection, _React$Component2);
+    var _super2 = _createSuper(AlternateSection);
+    function AlternateSection() {
+      var _this2;
+      (0, _classCallCheck2["default"])(this, AlternateSection);
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      _this2 = _super2.call.apply(_super2, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {});
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "updateChoicesIfNeeded", function (props) {
+        if (!_this2.state.choices || !(0, _isEqual["default"])(props.choices, _this2.state.choices) || !(0, _isEqual["default"])(props.choices, _this2.props.choices)) {
+          _this2.setState({
+            choices: props.choices
+          });
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleSelect", function (e) {
+        var _this2$props = _this2.props, onSelect = _this2$props.onSelect, selectChoices = _this2$props.selectChoices;
+        var value = e.target.value;
+        onSelect(selectChoices.find(function (c) {
+          return c.value === value;
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onAddChoice", function () {
+        var choices = _this2.state.choices;
+        if (choices.length && choices[choices.length - 1].label !== '') {
+          var value = (0, _max["default"])(choices.map(function (c) {
+            return parseInt(c.value);
+          }).filter(function (id) {
+            return !isNaN(id);
+          })) || 0;
+          _this2.setState({
+            choices: [].concat((0, _toConsumableArray2["default"])(choices), [{
+              value: ("").concat(value + 1),
+              label: ''
+            }])
+          });
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onChoiceChanged", function (choice, value) {
+        var choiceChanged = _this2.props.choiceChanged;
+        choiceChanged(_objectSpread(_objectSpread({}, choice), {}, {
+          label: value
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "onRemoveChoice", function (choice) {
+        var choiceRemoved = _this2.props.choiceRemoved;
+        choiceRemoved(choice.value);
+      });
+      return _this2;
+    }
+    (0, _createClass2["default"])(AlternateSection, [{
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
+        this.updateChoicesIfNeeded(nextProps);
+      }
+    }, {
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.updateChoicesIfNeeded(this.props);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this3 = this;
+        var _this$props2 = this.props, classes = _this$props2.classes, selectChoices = _this$props2.selectChoices, value = _this$props2.value;
+        var choices = this.state.choices;
+        return _react["default"].createElement("div", {
+          className: classes.design
+        }, _react["default"].createElement("div", {
+          className: classes.selectContainer
+        }, _react["default"].createElement(_Select["default"], {
+          className: classes.select,
+          displayEmpty: true,
+          onChange: this.handleSelect,
+          value: value || ''
+        }, _react["default"].createElement(_MenuItem["default"], {
+          value: ""
+        }, _react["default"].createElement("em", null, value ? 'Remove selection' : 'Select a response')), selectChoices.map(function (c, index) {
+          return _react["default"].createElement(_MenuItem["default"], {
+            key: index,
+            value: c.value
+          }, c.label);
+        })), choices && choices.length > 0 && _react["default"].createElement(_Button["default"], {
+          className: classes.addButton,
+          variant: "contained",
+          color: "primary",
+          onClick: this.onAddChoice
+        }, "Add")), _react["default"].createElement("div", {
+          className: classes.altChoices
+        }, choices && choices.map(function (c, index) {
+          return index > 0 && _react["default"].createElement(Choice, {
+            key: index,
+            classes: classes,
+            markup: c.label,
+            onChange: function onChange(val) {
+              return _this3.onChoiceChanged(c, val);
+            },
+            onDelete: function onDelete() {
+              return _this3.onRemoveChoice(c);
+            }
+          });
+        })));
+      }
+    }]);
+    return AlternateSection;
+  })(_react["default"].Component);
+  exports.AlternateSection = AlternateSection;
+  (0, _defineProperty2["default"])(AlternateSection, "propTypes", {
+    choices: _propTypes["default"].array,
+    selectChoices: _propTypes["default"].array.isRequired,
+    classes: _propTypes["default"].object.isRequired,
+    onSelect: _propTypes["default"].func.isRequired,
+    choiceChanged: _propTypes["default"].func.isRequired,
+    choiceRemoved: _propTypes["default"].func.isRequired,
+    value: _propTypes["default"].string
+  });
+  var Styled = (0, _styles.withStyles)(styles)(AlternateSection);
+  var _default = Styled;
+  exports["default"] = _default;
+})(alternateSection);
+getDefaultExportFromCjs(alternateSection);
+const require$$9$2 = _dll_react;
+const require$$10$2 = _dll_prop_types;
+const {isEqual: require$$11$2} = _dll_lodash;
+const {map: require$$12$2} = _dll_lodash;
+const {reduce: require$$13$2} = _dll_lodash;
+(function (exports) {
+  var _interopRequireDefault = interopRequireDefault;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = exports.AlternateResponses = void 0;
+  var _toConsumableArray2 = _interopRequireDefault(toConsumableArray);
+  var _classCallCheck2 = _interopRequireDefault(classCallCheck);
+  var _createClass2 = _interopRequireDefault(createClass);
+  var _assertThisInitialized2 = _interopRequireDefault(assertThisInitialized$1);
+  var _inherits2 = _interopRequireDefault(inherits);
+  var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn);
+  var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$1);
+  var _defineProperty2 = _interopRequireDefault(defineProperty);
+  var _react = _interopRequireDefault(require$$9$2);
+  var _propTypes = _interopRequireDefault(require$$10$2);
+  var _isEqual = _interopRequireDefault(require$$11$2);
+  var _map = _interopRequireDefault(require$$12$2);
+  var _reduce = _interopRequireDefault(require$$13$2);
+  var _alternateSection = _interopRequireDefault(alternateSection);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          (0, _defineProperty2["default"])(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  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 {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  var AlternateResponses = (function (_React$Component) {
+    (0, _inherits2["default"])(AlternateResponses, _React$Component);
+    var _super = _createSuper(AlternateResponses);
+    function AlternateResponses() {
+      var _this;
+      (0, _classCallCheck2["default"])(this, AlternateResponses);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateChoicesIfNeeded", function (props) {
+        if (!_this.state.choices || !(0, _isEqual["default"])(_this.state.choices, props.model.choices) || !(0, _isEqual["default"])(props.model.choices, _this.props.model.choices)) {
+          var choices = props.model.choices;
+          var selectedValues = (0, _reduce["default"])(choices, function (obj, c, key) {
+            if (c && c.length > 1) {
+              obj[key] = c[0];
+            }
+            return obj;
+          }, {});
+          _this.setState({
+            choices: props.model.choices,
+            values: selectedValues
+          });
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getRemainingChoices", function (valueKey) {
+        var choices = _this.state.choices;
+        return (0, _reduce["default"])(choices, function (arr, c, key) {
+          if (c && c.length === 1 && !valueKey) {
+            arr.push({
+              label: c[0].label,
+              value: key
+            });
+          }
+          return arr;
+        }, []);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceChanged", function (choice, key) {
+        var onChange = _this.props.onChange;
+        var choices = _this.state.choices;
+        var sectionChoices = choices[key] || [];
+        var isNew = !sectionChoices.find(function (c) {
+          return c.value === choice.value;
+        });
+        var newChoices = sectionChoices.reduce(function (arr, c) {
+          var newVal = c.value === choice.value ? choice : c;
+          arr.push(newVal);
+          return arr;
+        }, []);
+        if (isNew) {
+          newChoices.push(choice);
+        }
+        onChange(_objectSpread(_objectSpread({}, choices), {}, (0, _defineProperty2["default"])({}, key, newChoices)));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceRemoved", function (value, section) {
+        var onChange = _this.props.onChange;
+        var choices = _this.state.choices;
+        var sectionChoices = choices[section] || [];
+        var newChoices = sectionChoices.reduce(function (arr, c) {
+          if (c.value === value) {
+            return arr;
+          }
+          arr.push(c);
+          return arr;
+        }, []);
+        onChange(_objectSpread(_objectSpread({}, choices), {}, (0, _defineProperty2["default"])({}, section, newChoices)));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSectionSelect", function (choice, key) {
+        var onChange = _this.props.onChange;
+        var _this$state = _this.state, choices = _this$state.choices, values = _this$state.values;
+        if (choices[key] && choices[key].length > 1) {
+          if (!choice) {
+            onChange(_objectSpread(_objectSpread({}, choices), {}, (0, _defineProperty2["default"])({}, key, [choices[key][0]])));
+          }
+        } else {
+          _this.setState({
+            choices: _objectSpread(_objectSpread({}, choices), {}, (0, _defineProperty2["default"])({}, key, [].concat((0, _toConsumableArray2["default"])(choices[key]), [{
+              label: '',
+              value: '1'
+            }]))),
+            values: _objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2["default"])({}, key, choices[key][0]))
+          });
+        }
+      });
+      return _this;
+    }
+    (0, _createClass2["default"])(AlternateResponses, [{
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
+        this.updateChoicesIfNeeded(nextProps);
+      }
+    }, {
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.updateChoicesIfNeeded(this.props);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this2 = this;
+        var choices = this.state.choices;
+        return _react["default"].createElement("div", null, (0, _map["default"])(choices, function (c, key) {
+          if (c && c.length > 1) {
+            var selected = _this2.state.values[key];
+            return _react["default"].createElement(_alternateSection["default"], {
+              key: key,
+              value: selected && selected.value,
+              onSelect: function onSelect(choice) {
+                return _this2.onSectionSelect(choice, key);
+              },
+              choiceChanged: function choiceChanged(choice) {
+                return _this2.onChoiceChanged(choice, key);
+              },
+              choiceRemoved: function choiceRemoved(value) {
+                return _this2.onChoiceRemoved(value, key);
+              },
+              selectChoices: [selected],
+              choices: c
+            });
+          }
+        }), choices && Object.keys(this.state.values).length !== Object.keys(choices).length && _react["default"].createElement(_alternateSection["default"], {
+          value: "",
+          onSelect: function onSelect(choice) {
+            return _this2.onSectionSelect(choice, choice.value);
+          },
+          choiceChanged: function choiceChanged(choice) {
+            return _this2.onChoiceChanged(choice);
+          },
+          choiceRemoved: function choiceRemoved(value) {
+            return _this2.onChoiceRemoved(value);
+          },
+          selectChoices: this.getRemainingChoices()
+        }));
+      }
+    }]);
+    return AlternateResponses;
+  })(_react["default"].Component);
+  exports.AlternateResponses = AlternateResponses;
+  (0, _defineProperty2["default"])(AlternateResponses, "propTypes", {
+    model: _propTypes["default"].object.isRequired,
+    onChange: _propTypes["default"].func.isRequired
+  });
+  var _default = AlternateResponses;
+  exports["default"] = _default;
+})(alternateResponses);
+getDefaultExportFromCjs(alternateResponses);
+const require$$9$1 = _dll_react;
+const require$$10$1 = _dll_prop_types;
+const {cloneDeep: require$$11$1} = _dll_lodash;
+const {isEmpty: require$$12$1} = _dll_lodash;
+const require$$15 = _dll_material_ui__core_styles;
+const {Typography: require$$16} = _dll_material_ui__core;
+const require$$13$1 = _dll_pie_lib__editable_html;
+const require$$14 = _dll_pie_lib__config_ui;
+(function (exports) {
+  var _interopRequireWildcard = interopRequireWildcard;
+  var _interopRequireDefault = interopRequireDefault;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = exports.Main = void 0;
+  var _classCallCheck2 = _interopRequireDefault(classCallCheck);
+  var _createClass2 = _interopRequireDefault(createClass);
+  var _assertThisInitialized2 = _interopRequireDefault(assertThisInitialized$1);
+  var _inherits2 = _interopRequireDefault(inherits);
+  var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn);
+  var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$1);
+  var _defineProperty2 = _interopRequireDefault(defineProperty);
+  var _react = _interopRequireDefault(require$$9$1);
+  var _propTypes = _interopRequireDefault(require$$10$1);
+  var _cloneDeep = _interopRequireDefault(require$$11$1);
+  var _isEmpty = _interopRequireDefault(require$$12$1);
+  var _editableHtml = _interopRequireWildcard(require$$13$1);
+  var _configUi = require$$14;
+  var _styles = require$$15;
+  var _Typography = _interopRequireDefault(require$$16);
+  var _ecrToolbar = _interopRequireDefault(ecrToolbar);
+  var _alternateResponses = _interopRequireDefault(alternateResponses);
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          (0, _defineProperty2["default"])(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  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 {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  var toggle = _configUi.settings.toggle, Panel = _configUi.settings.Panel;
+  var styles = function styles(theme) {
+    return {
+      promptHolder: {
+        width: '100%',
+        paddingBottom: theme.spacing.unit * 2,
+        marginBottom: theme.spacing.unit * 2
+      },
+      prompt: {
+        paddingTop: theme.spacing.unit * 2,
+        width: '100%'
+      },
+      markup: {
+        minHeight: '100px',
+        paddingTop: theme.spacing.unit * 2,
+        width: '100%',
+        '& [data-slate-editor="true"]': {
+          minHeight: '100px'
+        }
+      },
+      design: {
+        paddingTop: theme.spacing.unit * 3
+      },
+      choiceConfiguration: {
+        paddingTop: theme.spacing.unit * 2,
+        paddingBottom: theme.spacing.unit * 2
+      },
+      switchElement: {
+        justifyContent: 'space-between',
+        margin: 0
+      },
+      addButton: {
+        "float": 'right'
+      },
+      text: {
+        color: '#495B8F',
+        fontFamily: 'Cerebri Sans',
+        fontSize: '16px',
+        lineHeight: '19px',
+        marginTop: theme.spacing.unit * 4
+      }
+    };
+  };
+  var createElementFromHTML = function createElementFromHTML(htmlString) {
+    var div = document.createElement('div');
+    div.innerHTML = htmlString.trim();
+    return div;
+  };
+  var Main = (function (_React$Component) {
+    (0, _inherits2["default"])(Main, _React$Component);
+    var _super = _createSuper(Main);
+    function Main() {
+      var _this;
+      (0, _classCallCheck2["default"])(this, Main);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChange", function (newVal) {
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), newVal));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          prompt: prompt
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRationaleChanged", function (rationale) {
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          rationale: rationale
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
+        var _this$props = _this.props, model = _this$props.model, onModelChanged = _this$props.onModelChanged;
+        onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+          teacherInstructions: teacherInstructions
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMarkupChanged", function (slateMarkup) {
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          slateMarkup: slateMarkup
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponsesChanged", function (choices) {
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: choices
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
+        var choices = _this.props.model.choices;
+        if (!choices[index]) {
+          choices[index] = [{
+            label: '',
+            value: '0'
+          }];
+        }
+        choices[index][0].label = newVal || '';
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: choices
+        }));
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
+        var choices = _this.props.model.choices;
+        var domMarkup = createElementFromHTML(markup);
+        var allRespAreas = domMarkup.querySelectorAll('[data-type="explicit_constructed_response"]');
+        var allChoices = {};
+        allRespAreas.forEach(function (el, index) {
+          el.dataset.index = index;
+        });
+        allRespAreas.forEach(function (el, index) {
+          var newChoices = (0, _cloneDeep["default"])(Object.values(choices)[index]);
+          if (newChoices) {
+            newChoices[0] = {
+              label: el.dataset.value || '',
+              value: '0'
+            };
+          }
+          allChoices[el.dataset.index] = newChoices;
+        });
+        _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
+          choices: allChoices,
+          slateMarkup: domMarkup.innerHTML
+        }));
+      });
+      return _this;
+    }
+    (0, _createClass2["default"])(Main, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var slateMarkup = this.props.model.slateMarkup;
+        this.setState({
+          markup: slateMarkup
+        });
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this2 = this;
+        var _this$props2 = this.props, classes = _this$props2.classes, model = _this$props2.model, configuration = _this$props2.configuration, onConfigurationChanged = _this$props2.onConfigurationChanged, imageSupport = _this$props2.imageSupport;
+        var _ref = configuration || ({}), _ref$prompt = _ref.prompt, prompt = _ref$prompt === void 0 ? {} : _ref$prompt, _ref$partialScoring = _ref.partialScoring, partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring, _ref$rationale = _ref.rationale, rationale = _ref$rationale === void 0 ? {} : _ref$rationale, _ref$teacherInstructi = _ref.teacherInstructions, teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi;
+        var _ref2 = model || ({}), teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled, promptEnabled = _ref2.promptEnabled, rationaleEnabled = _ref2.rationaleEnabled;
+        return _react["default"].createElement("div", {
+          className: classes.design
+        }, _react["default"].createElement(_configUi.layout.ConfigLayout, {
+          settings: _react["default"].createElement(Panel, {
+            model: model,
+            configuration: configuration,
+            onChangeModel: function onChangeModel(model) {
+              return _this2.onModelChange(model);
+            },
+            onChangeConfiguration: function onChangeConfiguration(configuration) {
+              return onConfigurationChanged(configuration, true);
+            },
+            groups: {
+              Settings: {
+                partialScoring: partialScoring.settings && toggle(partialScoring.label)
+              },
+              Properties: {
+                teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+                rationaleEnabled: rationale.settings && toggle(rationale.label),
+                promptEnabled: prompt.settings && toggle(prompt.label)
+              }
+            }
+          })
+        }, _react["default"].createElement("div", null, teacherInstructionsEnabled && _react["default"].createElement(_configUi.InputContainer, {
+          label: teacherInstructions.label,
+          className: classes.promptHolder
+        }, _react["default"].createElement(_editableHtml["default"], {
+          className: classes.prompt,
+          markup: model.teacherInstructions || '',
+          onChange: this.onTeacherInstructionsChanged,
+          imageSupport: imageSupport,
+          nonEmpty: false
+        })), promptEnabled && _react["default"].createElement(_configUi.InputContainer, {
+          label: prompt.label,
+          className: classes.promptHolder
+        }, _react["default"].createElement(_editableHtml["default"], {
+          className: classes.prompt,
+          markup: model.prompt,
+          onChange: this.onPromptChanged,
+          imageSupport: imageSupport,
+          nonEmpty: false,
+          disableUnderline: true
+        })), _react["default"].createElement(_Typography["default"], {
+          className: classes.text
+        }, "Define Template, Choices, and Correct Responses"), _react["default"].createElement(_editableHtml["default"], {
+          activePlugins: _editableHtml.ALL_PLUGINS,
+          toolbarOpts: {
+            position: 'top'
+          },
+          responseAreaProps: {
+            type: 'explicit-constructed-response',
+            options: {
+              duplicates: true
+            },
+            respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
+              var model = _this2.props.model;
+              var correctChoice = (model.choices[node.data.get('index')] || [])[0];
+              return function () {
+                return _react["default"].createElement(_ecrToolbar["default"], {
+                  onChangeResponse: function onChangeResponse(newVal) {
+                    return _this2.onChangeResponse(node.data.get('index'), newVal);
+                  },
+                  node: node,
+                  value: value,
+                  onToolbarDone: onToolbarDone,
+                  correctChoice: correctChoice
+                });
+              };
+            }
+          },
+          className: classes.markup,
+          markup: model.slateMarkup,
+          onChange: this.onChange,
+          imageSupport: imageSupport,
+          onBlur: this.onBlur,
+          disabled: false,
+          highlightShape: false
+        }), !(0, _isEmpty["default"])(model.choices) && _react["default"].createElement(_Typography["default"], {
+          className: classes.text
+        }, "Define Alternates"), _react["default"].createElement(_alternateResponses["default"], {
+          model: model,
+          onChange: this.onResponsesChanged
+        }), rationaleEnabled && _react["default"].createElement(_configUi.InputContainer, {
+          label: rationale.label,
+          className: classes.promptHolder
+        }, _react["default"].createElement(_editableHtml["default"], {
+          className: classes.prompt,
+          markup: model.rationale || '',
+          onChange: this.onRationaleChanged,
+          imageSupport: imageSupport
+        })))));
+      }
+    }]);
+    return Main;
+  })(_react["default"].Component);
+  exports.Main = Main;
+  (0, _defineProperty2["default"])(Main, "propTypes", {
+    configuration: _propTypes["default"].object.isRequired,
+    model: _propTypes["default"].object.isRequired,
+    disableSidePanel: _propTypes["default"].bool,
+    onModelChanged: _propTypes["default"].func.isRequired,
+    onConfigurationChanged: _propTypes["default"].func.isRequired,
+    classes: _propTypes["default"].object.isRequired,
+    imageSupport: _propTypes["default"].shape({
+      add: _propTypes["default"].func.isRequired,
+      "delete": _propTypes["default"].func.isRequired
+    })
+  });
+  var Styled = (0, _styles.withStyles)(styles)(Main);
+  var _default = Styled;
+  exports["default"] = _default;
+})(main);
+getDefaultExportFromCjs(main);
+var defaults = {};
+(function (exports) {
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = void 0;
+  var _default = {
+    model: {
+      disabled: false,
+      mode: 'gather',
+      prompt: 'Use the inputs to complete the sentence',
+      shuffle: true,
+      markup: '<p>The {{0}} jumped {{1}} the {{2}}</p>',
+      choices: {
+        0: [{
+          label: 'cow',
+          value: '0'
+        }, {
+          label: 'cattle',
+          value: '1'
+        }, {
+          label: 'calf',
+          value: '2',
+          correct: false
+        }],
+        1: [{
+          label: 'over',
+          value: '0'
+        }, {
+          label: 'past',
+          value: '1'
+        }, {
+          label: 'beyond',
+          value: '2'
+        }],
+        2: [{
+          label: 'moon',
+          value: '0'
+        }, {
+          label: 'satellite',
+          value: '2'
+        }, {
+          label: 'house ',
+          value: '3'
+        }]
+      },
+      rationaleEnabled: true,
+      promptEnabled: true,
+      teacherInstructionsEnabled: true,
+      studentInstructionsEnabled: true
+    },
+    configuration: {
+      prompt: {
+        settings: true,
+        label: 'Prompt'
+      },
+      partialScoring: {
+        settings: false,
+        label: 'Allow Partial Scoring'
+      },
+      rationale: {
+        settings: true,
+        label: 'Rationale'
+      },
+      teacherInstructions: {
+        settings: true,
+        label: 'Teacher Instructions'
+      }
+    }
+  };
+  exports["default"] = _default;
+})(defaults);
+getDefaultExportFromCjs(defaults);
+var markupUtils = {};
+const {escape: require$$1} = _dll_lodash;
+var _interopRequireDefault = interopRequireDefault;
+Object.defineProperty(markupUtils, "__esModule", {
+  value: true
+});
+markupUtils.createSlateMarkup = markupUtils.processMarkup = markupUtils.removeUnwantedCharacters = void 0;
+var _escape = _interopRequireDefault(require$$1);
+var removeUnwantedCharacters = function removeUnwantedCharacters(markup) {
+  return markup.replace(/(\t+(?!imes))|(\n)|(\\t+(?!imes))|(\\n)/g, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
+};
+markupUtils.removeUnwantedCharacters = removeUnwantedCharacters;
+var createElementFromHTML = function createElementFromHTML() {
+  var htmlString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+  return div;
+};
+var processMarkup = function processMarkup(markup) {
+  var newMarkup = removeUnwantedCharacters(markup || '');
+  var slateMarkup = createElementFromHTML(newMarkup || '');
+  var index = 0;
+  slateMarkup.querySelectorAll('[data-type="explicit_constructed_response"]').forEach(function (s) {
+    s.replaceWith(("{{").concat(index++, "}}"));
+  });
+  return slateMarkup.innerHTML;
+};
+markupUtils.processMarkup = processMarkup;
+var REGEX = /\{\{(\d+)\}\}/g;
+var createSlateMarkup = function createSlateMarkup(markup, choices) {
+  if (!markup) {
+    return '';
+  }
+  var newMarkup = removeUnwantedCharacters(markup);
+  return newMarkup.replace(REGEX, function (match, g) {
+    var label = choices[g][0].label || '';
+    return ("<span data-type=\"explicit_constructed_response\" data-index=\"").concat(g, "\" data-value=\"").concat((0, _escape["default"])(label), "\"></span>");
+  });
+};
+markupUtils.createSlateMarkup = createSlateMarkup;
+const require$$9 = _dll_react;
+const require$$10 = _dll_react_dom;
+const require$$11 = _dll_debug;
+const {defaults: require$$12} = _dll_lodash;
+const {isArray: require$$13} = _dll_lodash;
+(function (exports) {
+  var _interopRequireDefault = interopRequireDefault;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = void 0;
+  var _classCallCheck2 = _interopRequireDefault(classCallCheck);
+  var _createClass2 = _interopRequireDefault(createClass);
+  var _assertThisInitialized2 = _interopRequireDefault(assertThisInitialized$1);
+  var _inherits2 = _interopRequireDefault(inherits);
+  var _possibleConstructorReturn2 = _interopRequireDefault(possibleConstructorReturn);
+  var _getPrototypeOf2 = _interopRequireDefault(getPrototypeOf$1);
+  var _wrapNativeSuper2 = _interopRequireDefault(wrapNativeSuper);
+  var _defineProperty2 = _interopRequireDefault(defineProperty);
+  var _react = _interopRequireDefault(require$$9);
+  var _reactDom = _interopRequireDefault(require$$10);
+  var _debug = _interopRequireDefault(require$$11);
+  var _defaults = _interopRequireDefault(require$$12);
+  var _isArray = _interopRequireDefault(require$$13);
+  var _pieConfigureEvents = lib;
+  var _main = _interopRequireDefault(main);
+  var _defaults2 = _interopRequireDefault(defaults);
+  var _markupUtils = markupUtils;
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+    return keys;
+  }
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          (0, _defineProperty2["default"])(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+    return target;
+  }
+  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 {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  var log = (0, _debug["default"])('explicit-constructed-response:configure');
+  var ExplicitConstructedResponse = (function (_HTMLElement) {
+    (0, _inherits2["default"])(ExplicitConstructedResponse, _HTMLElement);
+    var _super = _createSuper(ExplicitConstructedResponse);
+    function ExplicitConstructedResponse() {
+      var _this;
+      (0, _classCallCheck2["default"])(this, ExplicitConstructedResponse);
+      _this = _super.call(this);
+      _this._model = ExplicitConstructedResponse.prepareModel();
+      _this._configuration = _defaults2["default"].configuration;
+      _this.onModelChanged = _this.onModelChanged.bind((0, _assertThisInitialized2["default"])(_this));
+      _this.onConfigurationChanged = _this.onConfigurationChanged.bind((0, _assertThisInitialized2["default"])(_this));
+      return _this;
+    }
+    (0, _createClass2["default"])(ExplicitConstructedResponse, [{
+      key: "model",
+      set: function set(s) {
+        this._model = ExplicitConstructedResponse.prepareModel(s);
+        this._render();
+      }
+    }, {
+      key: "configuration",
+      set: function set(c) {
+        this._configuration = (0, _defaults["default"])(c, _defaults2["default"].configuration);
+        this._render();
+      }
+    }, {
+      key: "disableSidePanel",
+      set: function set(s) {
+        this._disableSidePanel = s;
+        this._render();
+      }
+    }, {
+      key: "dispatchModelUpdated",
+      value: function dispatchModelUpdated(reset) {
+        var resetValue = !!reset;
+        this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+      }
+    }, {
+      key: "onModelChanged",
+      value: function onModelChanged(m, reset) {
+        this._model = ExplicitConstructedResponse.prepareModel(m);
+        this._render();
+        this.dispatchModelUpdated(reset);
+      }
+    }, {
+      key: "onConfigurationChanged",
+      value: function onConfigurationChanged(c) {
+        this._configuration = c;
+        this._render();
+      }
+    }, {
+      key: "insertImage",
+      value: function insertImage(handler) {
+        this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+      }
+    }, {
+      key: "onDeleteImage",
+      value: function onDeleteImage(src, done) {
+        this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+      }
+    }, {
+      key: "_render",
+      value: function _render() {
+        log('_render');
+        var element = _react["default"].createElement(_main["default"], {
+          model: this._model,
+          configuration: this._configuration,
+          onModelChanged: this.onModelChanged,
+          onConfigurationChanged: this.onConfigurationChanged,
+          disableSidePanel: this._disableSidePanel,
+          imageSupport: {
+            add: this.insertImage.bind(this),
+            "delete": this.onDeleteImage.bind(this)
+          }
+        });
+        _reactDom["default"].render(element, this);
+      }
+    }]);
+    return ExplicitConstructedResponse;
+  })((0, _wrapNativeSuper2["default"])(HTMLElement));
+  exports["default"] = ExplicitConstructedResponse;
+  (0, _defineProperty2["default"])(ExplicitConstructedResponse, "prepareModel", function () {
+    var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var joinedObj = _objectSpread(_objectSpread({}, _defaults2["default"].model), model);
+    var slateMarkup = joinedObj.slateMarkup || (0, _markupUtils.createSlateMarkup)(joinedObj.markup, joinedObj.choices);
+    var processedMarkup = (0, _markupUtils.processMarkup)(slateMarkup);
+    if (joinedObj.choices) {
+      Object.keys(joinedObj.choices).forEach(function (key) {
+        if ((0, _isArray["default"])(joinedObj.choices[key])) {
+          joinedObj.choices[key] = (joinedObj.choices[key] || []).map(function (item, index) {
+            if (!item.value) {
+              log('Choice does not contain "value" property, which is required.', item);
+              return _objectSpread({
+                value: ("").concat(index)
+              }, item);
+            }
+            return item;
+          });
+        }
+      });
+    }
+    return _objectSpread(_objectSpread({}, joinedObj), {}, {
+      slateMarkup: slateMarkup,
+      markup: processedMarkup
+    });
+  });
+})(lib$1);
+var index = getDefaultExportFromCjs(lib$1);
+export {index as default};