@pie-element/inline-dropdown 10.1.1 → 10.1.2-next.1

package/configure/lib/main.js

@@ -1,603 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Main = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _editableHtmlTipTap = _interopRequireWildcard(require("@pie-lib/editable-html-tip-tap"));
-var _configUi = require("@pie-lib/config-ui");
-var _mathRendering = require("@pie-lib/math-rendering");
-var _renderUi = require("@pie-lib/render-ui");
-var _lodashEs = require("lodash-es");
-var _styles = require("@mui/material/styles");
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
-var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
-var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
-var _inlineDropdownToolbar = _interopRequireDefault(require("./inline-dropdown-toolbar"));
-var _utils = require("./utils");
-var _responseArea = _interopRequireDefault(require("./response-area"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const {
-  toggle,
-  Panel,
-  dropdown
-} = _configUi.settings;
-const PromptHolder = (0, _styles.styled)(_configUi.InputContainer)(({
-  theme
-}) => ({
-  width: '100%',
-  paddingTop: theme.spacing(2),
-  marginBottom: theme.spacing(2)
-}));
-const ChoiceRationaleHolder = (0, _styles.styled)(_configUi.InputContainer)(({
-  theme
-}) => ({
-  width: '100%',
-  paddingTop: theme.spacing(0.5),
-  marginBottom: theme.spacing(2)
-}));
-const StyledTypography = (0, _styles.styled)(_Typography.default)(({
-  theme
-}) => ({
-  fontSize: theme.typography.fontSize + 2,
-  marginRight: theme.spacing(1)
-}));
-const RationaleLabel = (0, _styles.styled)('span')(({
-  theme
-}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'break-spaces',
-  color: _renderUi.color.disabled(),
-  padding: 0,
-  fontSize: theme.typography.fontSize - 2,
-  lineHeight: 1
-}));
-const RationaleChoices = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  marginBottom: theme.spacing(2.5)
-}));
-const StyledAccordionDetails = (0, _styles.styled)(_AccordionDetails.default)({
-  display: 'block',
-  paddingTop: 0,
-  paddingBottom: 0
-});
-const FlexContainer = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: theme.spacing(1)
-}));
-const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
-  theme
-}) => ({
-  '& .MuiTooltip-tooltip': {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px'
-  }
-}));
-const ErrorText = (0, _styles.styled)('div')(({
-  theme
-}) => ({
-  fontSize: theme.typography.fontSize - 2,
-  color: theme.palette.error.main,
-  paddingTop: theme.spacing(1)
-}));
-const createElementFromHTML = htmlString => {
-  const div = document.createElement('div');
-  div.innerHTML = (htmlString || '').trim();
-  return div;
-};
-class Main extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
-    (0, _defineProperty2.default)(this, "state", {
-      warning: {
-        open: false
-      }
-    });
-    (0, _defineProperty2.default)(this, "onModelChange", newVal => {
-      this.props.onModelChanged({
-        ...this.props.model,
-        ...newVal
-      });
-    });
-    (0, _defineProperty2.default)(this, "onPromptChanged", prompt => {
-      this.onModelChange({
-        prompt
-      });
-    });
-    (0, _defineProperty2.default)(this, "onRationaleChanged", rationale => {
-      this.onModelChange({
-        rationale
-      });
-    });
-    (0, _defineProperty2.default)(this, "onChoiceRationaleChanged", (index, choice) => {
-      const {
-        model
-      } = this.props;
-      const indexOfChoice = model.choices && model.choices[index] && model.choices[index].findIndex(elem => elem.label === choice.label && elem.value === choice.value);
-      model.choices[index] && model.choices[index].splice(indexOfChoice, 1, choice);
-      this.onModelChange(model);
-    });
-    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
-      this.onModelChange({
-        teacherInstructions
-      });
-    });
-    (0, _defineProperty2.default)(this, "onMarkupChanged", slateMarkup => {
-      this.onModelChange({
-        slateMarkup
-      });
-    });
-    (0, _defineProperty2.default)(this, "onCheck", callback => {
-      this.setState({
-        warning: {
-          open: true,
-          text: 'Response areas with under 2 options or with no correct answers will be discarded.',
-          onClose: () => {
-            this.setState({
-              warning: {
-                open: false
-              }
-            });
-          },
-          onConfirm: () => {
-            this.setState({
-              warning: {
-                open: false
-              }
-            }, callback);
-          }
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "onChange", markup => {
-      const {
-        respAreaChoices
-      } = this.state;
-      const domMarkup = createElementFromHTML(markup);
-      const allRespAreas = domMarkup.querySelectorAll('[data-type="inline_dropdown"]');
-      const allChoices = {};
-      allRespAreas.forEach(el => {
-        allChoices[el.dataset.index] = el.dataset.value || '';
-      });
-      const existingRespAreaChoices = (0, _lodashEs.reduce)(respAreaChoices, (obj, choices, key) => {
-        if (!(0, _lodashEs.isUndefined)(allChoices[key])) {
-          obj[key] = respAreaChoices[key];
-        }
-        return obj;
-      }, {});
-      const newRespAreaChoices = {};
-      let shouldWarn = false;
-      allRespAreas.forEach((el, index) => {
-        const newChoices = existingRespAreaChoices[el.dataset.index] || [];
-        if (newChoices.length < 2 || !newChoices.find(c => c.correct)) {
-          el.remove();
-          shouldWarn = true;
-        } else {
-          newRespAreaChoices[index] = existingRespAreaChoices[el.dataset.index] || [];
-          el.dataset.index = index;
-        }
-      });
-      if (shouldWarn) {
-        this.onCheck(() => this.onModelChange({
-          choices: (0, _lodashEs.cloneDeep)(newRespAreaChoices),
-          slateMarkup: domMarkup.innerHTML
-        }));
-      } else {
-        this.onModelChange({
-          choices: (0, _lodashEs.cloneDeep)(newRespAreaChoices),
-          slateMarkup: domMarkup.innerHTML
-        });
-      }
-    });
-    (0, _defineProperty2.default)(this, "onAddChoice", (index, label, choiceIndex) => {
-      const {
-        respAreaChoices
-      } = this.state;
-      const {
-        maxResponseAreaChoices
-      } = this.props.configuration;
-      const showWarning = message => this.setState({
-        warning: {
-          open: true,
-          text: message,
-          onClose: undefined,
-          onConfirm: () => {
-            this.setState({
-              warning: {
-                open: false
-              }
-            });
-          }
-        }
-      });
-      if (respAreaChoices[index] && respAreaChoices[index].length >= maxResponseAreaChoices) {
-        showWarning(`There are only ${maxResponseAreaChoices} answers allowed per choice.`);
-        return;
-      }
-      if (!respAreaChoices[index]) {
-        respAreaChoices[index] = [];
-      }
-
-      // check for duplicate answer, but exclude the one that is currently edited
-      if ((respAreaChoices[index] || []).find((r, idx) => r.label === label && idx !== choiceIndex)) {
-        showWarning('Duplicate answers are not allowed.');
-        return;
-      }
-      if (choiceIndex >= 0 && respAreaChoices[index]?.[choiceIndex]) {
-        // we need to update the choice label with the new value
-        respAreaChoices[index][choiceIndex].label = label;
-      } else {
-        // add a new choice
-        const value = respAreaChoices[index] && (0, _lodashEs.max)(respAreaChoices[index].map(c => parseInt(c.value)).filter(val => !isNaN(val))) || 0;
-        respAreaChoices[index].push({
-          label,
-          value: `${value + 1}`,
-          correct: false
-        });
-      }
-      this.onModelChange({
-        choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
-      });
-    });
-    (0, _defineProperty2.default)(this, "onRemoveChoice", (respIndex, index) => {
-      const {
-        respAreaChoices
-      } = this.state;
-      respAreaChoices[respIndex].splice(index, 1);
-      this.onModelChange({
-        choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
-      });
-    });
-    (0, _defineProperty2.default)(this, "onSelectChoice", (respIndex, selectedIndex) => {
-      const {
-        respAreaChoices
-      } = this.state;
-      respAreaChoices[respIndex] = respAreaChoices[respIndex].map((choice, index) => ({
-        ...choice,
-        correct: index === selectedIndex
-      }));
-      this.onModelChange({
-        choices: (0, _lodashEs.cloneDeep)(respAreaChoices)
-      });
-    });
-  }
-  componentDidMount() {
-    const {
-      model: {
-        choices
-      }
-    } = this.props;
-    this.setState({
-      respAreaChoices: (0, _lodashEs.cloneDeep)(choices)
-    });
-  }
-  UNSAFE_componentWillReceiveProps(nProps) {
-    const newState = {};
-    if (!(0, _lodashEs.isEqual)(nProps.model.choices, this.props.model.choices) || !(0, _lodashEs.isEqual)(nProps.model.choices, this.state.respAreaChoices)) {
-      newState.respAreaChoices = (0, _lodashEs.cloneDeep)(nProps.model.choices);
-    }
-    if (!(0, _lodashEs.isEmpty)(newState)) {
-      this.setState(newState);
-    }
-  }
-  componentDidUpdate() {
-    //eslint-disable-next-line
-    const domNode = _reactDom.default.findDOMNode(this);
-    (0, _mathRendering.renderMath)(domNode);
-  }
-  render() {
-    const {
-      warning
-    } = this.state;
-    const {
-      model,
-      configuration,
-      onConfigurationChanged,
-      imageSupport,
-      uploadSoundSupport
-    } = this.props;
-    const {
-      baseInputConfiguration = {},
-      choiceRationale = {},
-      contentDimensions = {},
-      lockChoiceOrder = {},
-      maxResponseAreas,
-      maxImageWidth = {},
-      maxImageHeight = {},
-      partialScoring = {},
-      prompt = {},
-      rationale = {},
-      settingsPanelDisabled,
-      spellCheck = {},
-      teacherInstructions = {},
-      template = {},
-      withRubric = {},
-      mathMlOptions = {},
-      language = {},
-      languageChoices = {},
-      responseAreaInputConfiguration = {}
-    } = configuration || {};
-    const {
-      choiceRationaleEnabled,
-      choices,
-      errors,
-      extraCSSRules,
-      promptEnabled,
-      rationaleEnabled,
-      spellCheckEnabled,
-      teacherInstructionsEnabled,
-      toolbarEditorPosition
-    } = model || {};
-    const {
-      prompt: promptError,
-      rationale: rationaleError,
-      responseAreasError,
-      responseAreaChoicesError,
-      teacherInstructions: teacherInstructionsError
-    } = errors || {};
-    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-    const renderChoiceRationale = () => (Object.keys(choices) || []).map((key, index) => /*#__PURE__*/_react.default.createElement(RationaleChoices, {
-      key: key
-    }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-      slotProps: {
-        transition: {
-          timeout: {
-            enter: 225,
-            exit: 195
-          }
-        }
-      }
-    }, /*#__PURE__*/_react.default.createElement(_AccordionSummary.default, {
-      expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null)
-    }, /*#__PURE__*/_react.default.createElement(StyledTypography, {
-      component: 'div'
-    }, `Rationale for response area #${index + 1}`)), /*#__PURE__*/_react.default.createElement(StyledAccordionDetails, null, (choices[key] || []).map(choice => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: choice.label
-    }, /*#__PURE__*/_react.default.createElement(RationaleLabel, {
-      dangerouslySetInnerHTML: {
-        __html: `${rationale.label} for ${choice.label} (${choice.correct ? 'correct' : 'incorrect'})`
-      }
-    }), /*#__PURE__*/_react.default.createElement(ChoiceRationaleHolder, null, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
-      markup: choice.rationale || '',
-      spellCheck: spellCheckEnabled,
-      pluginProps: getPluginProps(rationale?.inputConfiguration),
-      onChange: c => this.onChoiceRationaleChanged(key, {
-        ...choice,
-        rationale: c
-      }),
-      imageSupport: imageSupport,
-      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions
-    }))))))));
-    const toolbarOpts = {
-      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-    };
-    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
-    const panelSettings = {
-      partialScoring: partialScoring.settings && toggle(partialScoring.label),
-      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.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),
-      rationaleEnabled: rationale.settings && toggle(rationale.label),
-      choiceRationaleEnabled: choiceRationale.settings && toggle(choiceRationale.label),
-      promptEnabled: prompt.settings && toggle(prompt.label),
-      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
-    };
-    const getPluginProps = (props = {}) => ({
-      ...baseInputConfiguration,
-      ...props
-    });
-    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
-      extraCSSRules: {
-        names: ['red', 'blue'],
-        rules: `
-      .red {
-        color: red !important;
-      }
-
-      .blue {
-        color: blue !important;
-      }
-    `
-      },
-      dimensions: contentDimensions,
-      hideSettings: settingsPanelDisabled,
-      settings: /*#__PURE__*/_react.default.createElement(Panel, {
-        model: model,
-        configuration: configuration,
-        onChangeModel: model => this.onModelChange(model),
-        onChangeConfiguration: configuration => onConfigurationChanged(configuration, true),
-        groups: {
-          Settings: panelSettings,
-          Properties: panelProperties
-        }
-      })
-    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
-      label: teacherInstructions.label
-    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
-      markup: model.teacherInstructions || '',
-      onChange: this.onTeacherInstructionsChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      error: teacherInstructionsError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(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(PromptHolder, {
-      label: prompt.label
-    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
-      markup: model.prompt,
-      onChange: this.onPromptChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      disableUnderline: true,
-      error: promptError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(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)), /*#__PURE__*/_react.default.createElement(FlexContainer, null, /*#__PURE__*/_react.default.createElement(StyledTypography, {
-      component: 'div'
-    }, "Define Template, Choices, and Correct Responses"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
-      disableFocusListener: true,
-      disableTouchListener: true,
-      placement: 'right',
-      title: validationMessage
-    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
-      fontSize: 'small',
-      color: 'primary'
-    }))), /*#__PURE__*/_react.default.createElement(_responseArea.default, {
-      responseAreasError: responseAreasError,
-      responseAreaChoicesError: responseAreaChoicesError,
-      editableHtmlProps: {
-        pluginProps: getPluginProps(template?.inputConfiguration),
-        activePlugins: _editableHtmlTipTap.ALL_PLUGINS,
-        toolbarOpts: {
-          position: 'top'
-        },
-        extraCSSRules: {
-          names: ['red', 'blue'],
-          rules: `
-      .red {
-        color: red !important;
-      }
-
-      .blue {
-        color: blue !important;
-      }
-    `
-        },
-        responseAreaProps: {
-          type: 'inline-dropdown',
-          options: {
-            duplicates: true
-          },
-          maxResponseAreas: maxResponseAreas,
-          respAreaToolbar: (nodeInfo, editor, onToolbarDone) => {
-            const [node, pos] = nodeInfo;
-            const {
-              respAreaChoices
-            } = this.state;
-            return props => /*#__PURE__*/_react.default.createElement(_inlineDropdownToolbar.default, (0, _extends2.default)({}, props, {
-              onAddChoice: this.onAddChoice,
-              onCheck: this.onCheck,
-              onRemoveChoice: index => this.onRemoveChoice(node.attrs.index, index),
-              onSelectChoice: index => this.onSelectChoice(node.attrs.index, index),
-              node: node,
-              pos: pos,
-              editor: editor,
-              onToolbarDone: onToolbarDone,
-              choices: respAreaChoices[node.attrs.index],
-              spellCheck: spellCheckEnabled,
-              uploadSoundSupport: uploadSoundSupport,
-              mathMlOptions: mathMlOptions,
-              baseInputConfiguration: baseInputConfiguration,
-              responseAreaInputConfiguration: responseAreaInputConfiguration
-            }));
-          }
-        },
-        spellCheck: spellCheckEnabled,
-        markup: model.slateMarkup || '',
-        onChange: this.onChange,
-        imageSupport: imageSupport,
-        disableImageAlignmentButtons: true,
-        disabled: false,
-        highlightShape: false,
-        error: responseAreasError,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }
-    }), choiceRationaleEnabled && renderChoiceRationale(), rationaleEnabled && /*#__PURE__*/_react.default.createElement(PromptHolder, {
-      label: rationale.label
-    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
-      markup: model.rationale || '',
-      onChange: this.onRationaleChanged,
-      imageSupport: imageSupport,
-      error: rationaleError,
-      toolbarOpts: toolbarOpts,
-      pluginProps: getPluginProps(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)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
-      open: warning.open,
-      title: "Warning",
-      text: warning.text,
-      onClose: warning.onClose,
-      onConfirm: warning.onConfirm,
-      disableAutoFocus: true,
-      disableEnforceFocus: true,
-      disableRestoreFocus: true
-    }));
-  }
-}
-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,
-  imageSupport: _propTypes.default.shape({
-    add: _propTypes.default.func.isRequired,
-    delete: _propTypes.default.func.isRequired
-  }),
-  uploadSoundSupport: _propTypes.default.shape({
-    add: _propTypes.default.func.isRequired,
-    delete: _propTypes.default.func.isRequired
-  })
-});
-var _default = exports.default = Main;
-//# sourceMappingURL=main.js.map