@pie-element/select-text 11.0.1-next.0 → 11.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,831 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+import cloneDeep from 'lodash/cloneDeep';
+import debounce from 'lodash/debounce';
+import { Tokenizer } from '@pie-lib/text-select';
+import { layout, InputContainer, NumberTextField, FeedbackConfig, settings } from '@pie-lib/config-ui';
+import Chip from '@material-ui/core/Chip';
+import Info from '@material-ui/icons/Info';
+import debug from 'debug';
+import EditableHtml from '@pie-lib/editable-html';
+import Tooltip from '@material-ui/core/Tooltip';
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+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 parseParagraph = function parseParagraph(paragraph, end) {
+  if (end) {
+    return paragraph.innerHTML;
+  }
+
+  return ''.concat(paragraph.innerHTML, '\n\n');
+};
+
+var parseParagraphs = function parseParagraphs(dom) {
+  var paragraphs = dom.querySelectorAll('div[separator=true]'); // separate variable for easily debugging, if needed
+
+  var str = '';
+  paragraphs.forEach(function (par, index) {
+    str += parseParagraph(par, index === paragraphs.length - 1);
+  });
+  return str || null;
+};
+
+var prepareText = function prepareText(text) {
+  var txtDom = createElementFromHTML(text);
+  var div = document.createElement('div');
+  div.innerHTML = "<div separator='true'>".concat(txtDom.innerHTML, '</div>');
+  txtDom = div;
+  var allDomElements = Array.from(txtDom.querySelectorAll('*'));
+
+  if (allDomElements.length === 0) {
+    return text;
+  }
+
+  return parseParagraphs(txtDom);
+};
+
+const generateModel = model => {
+  if (!model) return model; // parsing
+
+  const modelText = prepareText(model.text || '');
+  const newTokens = (model.tokens || []).reduce((acc, token = {}) => {
+    const tokenText = prepareText((model.text || '').slice(token.start, token.end));
+
+    if (!tokenText) {
+      return [...acc, token];
+    }
+
+    const getStartIndex = start => {
+      let length = start;
+
+      while (length >= 0) {
+        let newStartIndex = modelText.slice(length).indexOf(tokenText);
+
+        if (newStartIndex >= 0) {
+          return newStartIndex + length;
+        }
+
+        length--;
+      }
+
+      return 0;
+    };
+
+    const lastToken = acc[acc.length - 1];
+    const newStart = getStartIndex(lastToken ? lastToken.end : token.start);
+    const newEnd = newStart + tokenText.length;
+    return [...acc, _extends({}, token, {
+      text: tokenText,
+      start: newStart,
+      end: newEnd,
+      // needed for getScore when tokens position is recalculated
+      oldStart: token.start,
+      oldEnd: token.end
+    })];
+  }, []);
+  return _extends({}, model, {
+    tokens: newTokens,
+    text: modelText
+  });
+};
+const generateValidationMessage = config => {
+  const {
+    minTokens,
+    maxTokens,
+    maxSelections
+  } = config;
+  const tokensMessage = `\nThere should be at least ${minTokens} ` + (maxTokens ? `and at most ${maxTokens} ` : '') + 'tokens defined.';
+  const selectionsMessage = '\nThere should be at least 1 ' + (maxSelections ? `and at most ${maxSelections} ` : '') + 'token' + (maxSelections ? 's' : '') + ' selected.';
+  const message = 'Validation requirements:' + tokensMessage + selectionsMessage;
+  return message;
+};
+
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = settings;
+const log = debug('@pie-element:select-text:configure');
+class Design extends React.Component {
+  constructor(props) {
+    super(props);
+    this.updateText = debounce(val => {
+      this.apply(u => {
+        u.text = val;
+        u.tokens = [];
+      });
+    }, 200);
+
+    this.changeText = event => this.updateText(event.target.value);
+
+    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);
+      });
+    };
+
+    this.changeMaxSelections = (event, max) => {
+      this.apply(u => u.maxSelections = max);
+    };
+
+    this.apply = fn => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = cloneDeep(model);
+      fn(update);
+      onModelChanged(update);
+    };
+
+    this.changeFeedback = feedback => {
+      this.apply(u => u.feedback = feedback);
+    };
+
+    this.changePartialScoring = partialScoring => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = cloneDeep(model);
+      update.partialScoring = partialScoring;
+      onModelChanged(update);
+    };
+
+    this.onPromptChanged = prompt => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = cloneDeep(model);
+      update.prompt = prompt;
+      onModelChanged(update);
+    };
+
+    this.onTeacherInstructionsChanged = teacherInstructions => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const update = cloneDeep(model);
+      update.teacherInstructions = teacherInstructions;
+      onModelChanged(update);
+    };
+
+    this.onRationaleChanged = rationale => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      onModelChanged(_extends({}, 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() {
+    var _configuration$teache, _configuration$prompt, _configuration$ration;
+
+    const {
+      text: textValue
+    } = this.state;
+    const {
+      classes,
+      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 = 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 == null ? void 0 : withRubric.settings) && toggle(withRubric == null ? void 0 : withRubric.label)
+    };
+
+    const getPluginProps = (props = {}) => _extends({}, baseInputConfiguration, props);
+
+    return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/React.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: teacherInstructions.label,
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$teache = configuration.teacherInstructions) == null ? void 0 : _configuration$teache.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.createElement("div", {
+      className: classes.errorText
+    }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: prompt.label || '',
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: model.prompt,
+      onChange: this.onPromptChanged,
+      imageSupport: imageSupport,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$prompt = configuration.prompt) == null ? void 0 : _configuration$prompt.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, promptError)), text.settings && /*#__PURE__*/React.createElement(InputContainer, {
+      label: text.label || '',
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(TextField, {
+      className: classes.input,
+      multiline: true,
+      defaultValue: textValue,
+      onChange: this.changeText,
+      spellCheck: spellCheckEnabled
+    })), tokens.settings && /*#__PURE__*/React.createElement(InputContainer, {
+      label: tokens.label || '',
+      className: classes.tokenizerContainer
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      classes: {
+        tooltip: classes.tooltip
+      },
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/React.createElement(Info, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        position: 'absolute',
+        left: '48px',
+        top: '-3px'
+      }
+    })), /*#__PURE__*/React.createElement(Tokenizer, {
+      className: classes.tokenizer,
+      text: model.text,
+      tokens: tokensModel,
+      onChange: this.changeTokens
+    })), tokensError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, tokensError), selectionsError && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, selectionsError), /*#__PURE__*/React.createElement("div", {
+      className: classes.tokensDetails
+    }, mode.settings && /*#__PURE__*/React.createElement(Chip, {
+      label: `${mode.label}: ${model.mode ? model.mode : 'None'}`,
+      className: classes.chip
+    }), selections.settings && /*#__PURE__*/React.createElement(Chip, {
+      label: `${selections.label}: ${tokensModel.length}`,
+      className: classes.chip
+    }), correctAnswer.settings && /*#__PURE__*/React.createElement(Chip, {
+      label: `${correctAnswer.label}: ${tokensModel.filter(t => t.correct).length}`,
+      className: classes.chip
+    }), selectionCount.settings && /*#__PURE__*/React.createElement(NumberTextField, {
+      min: tokensModel.filter(t => t.correct).length || 0,
+      label: `${selectionCount.label} (0:any)`,
+      max: tokensModel.length,
+      value: model.maxSelections,
+      onChange: this.changeMaxSelections,
+      className: classes.numberField
+    })), rationaleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      label: rationale.label || '',
+      className: classes.promptHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.prompt,
+      markup: model.rationale || '',
+      onChange: this.onRationaleChanged,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$ration = configuration.rationale) == null ? void 0 : _configuration$ration.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.createElement("div", {
+      className: classes.errorText
+    }, rationaleError)), feedbackEnabled && /*#__PURE__*/React.createElement(FeedbackConfig, {
+      feedback: model.feedback,
+      onChange: this.changeFeedback,
+      toolbarOpts: toolbarOpts
+    }));
+  }
+
+}
+Design.propTypes = {
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
+  onModelChanged: PropTypes.func.isRequired,
+  onConfigurationChanged: PropTypes.func.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  }),
+  uploadSoundSupport: PropTypes.object
+};
+Design.defaultProps = {};
+var Main = withStyles(theme => ({
+  tokenizerContainer: {
+    paddingRight: 0,
+    marginRight: 0,
+    '&:after': {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: '1px',
+      content: '""',
+      backgroundColor: theme.palette.primary.main
+    },
+    marginBottom: theme.spacing.unit
+  },
+  chip: {
+    marginTop: theme.spacing.unit / 2,
+    marginRight: theme.spacing.unit * 2
+  },
+  input: {
+    width: '100%'
+  },
+  tokenizer: {
+    marginTop: theme.spacing.unit * 2
+  },
+  mainOpts: {
+    width: '100%',
+    justifyContent: 'space-between',
+    display: 'flex',
+    alignItems: 'baseline'
+  },
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  tokensDetails: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    marginBottom: theme.spacing.unit * 2.5
+  },
+  numberField: {
+    width: '180px',
+    margin: `${theme.spacing.unit / 2}px auto 0`
+  },
+  tooltip: {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+}))(Design);
+
+var defaultValues = {
+  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: {
+      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: []
+    }
+  }
+};
+
+class SelectTextConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._model = SelectTextConfigure.createDefaultModel();
+    this._configuration = defaultValues.configuration;
+  }
+
+  set model(m) {
+    this._model = SelectTextConfigure.createDefaultModel(m);
+    this.render();
+  }
+
+  set configuration(c) {
+    var _newConfiguration$lan;
+
+    const newConfiguration = _extends({}, defaultValues.configuration, c);
+
+    this._configuration = newConfiguration; // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+
+    if (newConfiguration != null && (_newConfiguration$lan = newConfiguration.language) != null && _newConfiguration$lan.enabled) {
+      var _newConfiguration$lan2, _newConfiguration$lan3;
+
+      if (newConfiguration != null && (_newConfiguration$lan2 = newConfiguration.languageChoices) != null && (_newConfiguration$lan3 = _newConfiguration$lan2.options) != null && _newConfiguration$lan3.length) {
+        this._model.language = newConfiguration == null ? void 0 : newConfiguration.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      } // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+
+
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  modelChanged(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelUpdatedEvent(this._model), true);
+    this.render();
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+
+    if (this._model) {
+      this.dispatchEvent(new ModelUpdatedEvent(this._model), false);
+    }
+
+    this.render();
+  }
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  render() {
+    if (this._model) {
+      const el = /*#__PURE__*/React.createElement(Main, {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.modelChanged.bind(this),
+        onConfigurationChanged: this.onConfigurationChanged.bind(this),
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this)
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          delete: this.onDeleteSound.bind(this)
+        }
+      });
+      ReactDOM.render(el, this);
+    }
+  }
+
+}
+
+SelectTextConfigure.createDefaultModel = (model = {}) => {
+  const newModel = _extends({}, defaultValues.model, model);
+
+  return generateModel(newModel);
+};
+
+export { SelectTextConfigure as default };
+//# sourceMappingURL=configure.js.map