@pie-element/select-text 13.2.2-beta.6 → 13.2.2-beta.7

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [13.2.2-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/select-text@13.2.2-beta.6...@pie-element/select-text@13.2.2-beta.7) (2026-09-24)
+
+**Note:** Version bump only for package @pie-element/select-text
+
 ## [13.2.2-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/select-text@13.2.2-beta.5...@pie-element/select-text@13.2.2-beta.6) (2026-09-24)
 
 **Note:** Version bump only for package @pie-element/select-text

package/configure/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.4.0-beta.13](https://github.com/pie-framework/pie-elements/compare/@pie-element/select-text-configure@11.4.0-beta.12...@pie-element/select-text-configure@11.4.0-beta.13) (2026-09-24)
+
+**Note:** Version bump only for package @pie-element/select-text-configure
+
 # [11.4.0-beta.12](https://github.com/pie-framework/pie-elements/compare/@pie-element/select-text-configure@11.4.0-beta.11...@pie-element/select-text-configure@11.4.0-beta.12) (2026-09-24)
 
 **Note:** Version bump only for package @pie-element/select-text-configure

package/configure/lib/defaultConfiguration.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  model: {
+    feedbackEnabled: false,
+    highlightChoices: false,
+    maxSelections: 0,
+    mode: 'sentence',
+    partialScoring: false,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    text: '',
+    tokens: [],
+    toolbarEditorPosition: 'bottom'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: {
+        disabled: true
+      },
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    selectionCount: {
+      settings: true,
+      label: 'Selection count'
+    },
+    correctAnswer: {
+      settings: true,
+      label: 'Correct Answers'
+    },
+    selections: {
+      settings: true,
+      label: 'Selections Available'
+    },
+    highlightChoices: {
+      settings: true,
+      label: 'Highlight choices'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    prompt: {
+      label: 'Prompt',
+      settings: true,
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    text: {
+      settings: true,
+      label: 'Content'
+    },
+    tokens: {
+      settings: true,
+      label: 'Tokens'
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    mode: {
+      settings: true,
+      label: 'Mode'
+    },
+    minTokens: 2,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+//# sourceMappingURL=defaultConfiguration.js.map

package/configure/lib/defaultConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultConfiguration.js","names":["model","feedbackEnabled","highlightChoices","maxSelections","mode","partialScoring","prompt","promptEnabled","rationale","rationaleEnabled","scoringType","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","text","tokens","toolbarEditorPosition","configuration","baseInputConfiguration","h3","disabled","audio","video","image","textAlign","showParagraphs","separateParagraphs","selectionCount","settings","label","correctAnswer","selections","inputConfiguration","required","studentInstructions","feedback","spellCheck","enabled","minTokens","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaultConfiguration.js"],"sourcesContent":["export default {\n  model: {\n    feedbackEnabled: false,\n    highlightChoices: false,\n    maxSelections: 0,\n    mode: 'sentence',\n    partialScoring: false,\n    prompt: '',\n    promptEnabled: true,\n    rationale: '',\n    rationaleEnabled: true,\n    scoringType: 'auto',\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n    text: '',\n    tokens: [],\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    baseInputConfiguration: {\n      h3: { disabled: true },\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    selectionCount: {\n      settings: true,\n      label: 'Selection count',\n    },\n    correctAnswer: {\n      settings: true,\n      label: 'Correct Answers',\n    },\n    selections: {\n      settings: true,\n      label: 'Selections Available',\n    },\n    highlightChoices: {\n      settings: true,\n      label: 'Highlight choices',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    scoringType: {\n      settings: false,\n      label: 'Scoring Type',\n    },\n    studentInstructions: {\n      settings: false,\n      label: 'Student Instructions',\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    prompt: {\n      label: 'Prompt',\n      settings: true,\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    text: {\n      settings: true,\n      label: 'Content',\n    },\n    tokens: {\n      settings: true,\n      label: 'Tokens',\n    },\n    feedback: {\n      settings: true,\n      label: 'Feedback',\n    },\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    mode: {\n      settings: true,\n      label: 'Mode',\n    },\n    minTokens: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/design.js

@@ -0,0 +1,406 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Design = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _styles = require("@mui/material/styles");
+var _lodashEs = require("lodash-es");
+var _textSelect = require("@pie-lib/text-select");
+var _configUi = require("@pie-lib/config-ui");
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _debug = _interopRequireDefault(require("debug"));
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _utils = require("./utils");
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = _configUi.settings;
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const StyledEditableHtml = (0, _styles.styled)(_editableHtmlTipTap.default)({
+  width: '100%'
+});
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const StyledTextField = (0, _styles.styled)(_TextField.default)({
+  width: '100%'
+});
+const TokenizerContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingRight: 0,
+  marginRight: 0,
+  position: 'relative',
+  '&:after': {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '1px',
+    content: '""',
+    backgroundColor: theme.palette.primary.main
+  },
+  marginBottom: theme.spacing(1)
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const StyledTokenizer = (0, _styles.styled)(_textSelect.Tokenizer)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2)
+}));
+const StyledChip = (0, _styles.styled)(_Chip.default)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(0.5),
+  marginRight: theme.spacing(2)
+}));
+const TokensDetails = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  marginBottom: theme.spacing(2.5)
+}));
+const StyledNumberTextField = (0, _styles.styled)(_configUi.NumberTextField)(({
+  theme
+}) => ({
+  width: '180px',
+  margin: `${theme.spacing(0.5)} auto 0`
+}));
+const log = (0, _debug.default)('@pie-element:select-text:configure');
+class Design extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "updateText", (0, _lodashEs.debounce)(val => {
+      this.apply(u => {
+        u.text = val;
+        u.tokens = [];
+      });
+    }, 200));
+    (0, _defineProperty2.default)(this, "changeText", event => this.updateText(event.target.value));
+    (0, _defineProperty2.default)(this, "changeTokens", (tokens, mode) => {
+      this.apply(u => {
+        u.tokens = tokens;
+        u.mode = mode;
+        const correctTokenCount = tokens.filter(t => t.correct).length;
+        const max = isFinite(u.maxSelections) ? u.maxSelections : 0;
+        u.maxSelections = Math.max(max, correctTokenCount);
+      });
+    });
+    (0, _defineProperty2.default)(this, "changeMaxSelections", (event, max) => {
+      this.apply(u => u.maxSelections = max);
+    });
+    (0, _defineProperty2.default)(this, "apply", fn => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      fn(update);
+      onModelChanged(update);
+    });
+    (0, _defineProperty2.default)(this, "changeFeedback", feedback => {
+      this.apply(u => u.feedback = feedback);
+    });
+    (0, _defineProperty2.default)(this, "changePartialScoring", partialScoring => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      update.partialScoring = partialScoring;
+      onModelChanged(update);
+    });
+    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      update.prompt = prompt;
+      onModelChanged(update);
+    });
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = (0, _lodashEs.cloneDeep)(model);
+      update.teacherInstructions = teacherInstructions;
+      onModelChanged(update);
+    });
+    (0, _defineProperty2.default)(this, "onRationaleChanged", rationale => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      onModelChanged({
+        ...model,
+        rationale
+      });
+    });
+    const {
+      model: _model
+    } = this.props;
+    this.state = {
+      text: _model && _model.text || ''
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nProps) {
+    const {
+      model
+    } = nProps;
+    if (model && model.text) {
+      this.setState({
+        text: model.text
+      });
+    }
+  }
+  render() {
+    const {
+      text: textValue
+    } = this.state;
+    const {
+      configuration,
+      imageSupport,
+      model,
+      onConfigurationChanged,
+      onModelChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      correctAnswer = {},
+      contentDimensions = {},
+      feedback = {},
+      highlightChoices = {},
+      mode = {},
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      selectionCount = {},
+      selections = {},
+      settingsPanelDisabled,
+      scoringType = {},
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      text = {},
+      tokens = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      feedbackEnabled,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      selectionsError,
+      teacherInstructions: teacherInstructionsError,
+      tokensError
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    let {
+      tokens: tokensModel
+    } = model;
+    tokensModel = tokensModel || [];
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    log('[render] maxSelections:', model.maxSelections);
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      highlightChoices: highlightChoices.settings && toggle(highlightChoices.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration?.teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt.label || ''
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.prompt,
+      onChange: this.onPromptChanged,
+      imageSupport: imageSupport,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration?.prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), text.settings && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: text.label || ''
+    }, /*#__PURE__*/_react.default.createElement(StyledTextField, {
+      variant: "standard",
+      multiline: true,
+      defaultValue: textValue,
+      onChange: this.changeText,
+      spellCheck: spellCheckEnabled
+    })), tokens.settings && /*#__PURE__*/_react.default.createElement(TokenizerContainer, {
+      label: tokens.label || ''
+    }, /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        position: 'absolute',
+        left: '48px',
+        top: '-3px'
+      }
+    })), /*#__PURE__*/_react.default.createElement(StyledTokenizer, {
+      text: model.text,
+      tokens: tokensModel,
+      onChange: this.changeTokens
+    })), tokensError && /*#__PURE__*/_react.default.createElement(ErrorText, null, tokensError), selectionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, selectionsError), /*#__PURE__*/_react.default.createElement(TokensDetails, null, mode.settings && /*#__PURE__*/_react.default.createElement(StyledChip, {
+      label: `${mode.label}: ${model.mode ? model.mode : 'None'}`
+    }), selections.settings && /*#__PURE__*/_react.default.createElement(StyledChip, {
+      label: `${selections.label}: ${tokensModel.length}`
+    }), correctAnswer.settings && /*#__PURE__*/_react.default.createElement(StyledChip, {
+      label: `${correctAnswer.label}: ${tokensModel.filter(t => t.correct).length}`
+    }), selectionCount.settings && /*#__PURE__*/_react.default.createElement(StyledNumberTextField, {
+      min: tokensModel.filter(t => t.correct).length || 0,
+      label: `${selectionCount.label} (0:any)`,
+      max: tokensModel.length,
+      value: model.maxSelections,
+      onChange: this.changeMaxSelections
+    })), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label || ''
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.rationale || '',
+      onChange: this.onRationaleChanged,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration?.rationale?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)), feedbackEnabled && /*#__PURE__*/_react.default.createElement(_configUi.FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.changeFeedback,
+      toolbarOpts: toolbarOpts
+    }));
+  }
+}
+exports.Design = Design;
+(0, _defineProperty2.default)(Design, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onModelChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  uploadSoundSupport: _propTypes.default.object
+});
+(0, _defineProperty2.default)(Design, "defaultProps", {});
+var _default = exports.default = Design;
+//# sourceMappingURL=design.js.map