@pie-element/placement-ordering 14.1.2-next.5 → 14.1.3

package/configure/lib/choice-editor.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _debug = _interopRequireDefault(require("debug"));
+var _lodashEs = require("lodash-es");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _configUi = require("@pie-lib/config-ui");
+var _choiceTile = _interopRequireDefault(require("./choice-tile"));
+function findFreeChoiceSlot(choices) {
+  let slot = 1;
+  const ids = choices.map(c => c.id);
+  while (ids.includes(`c${slot}`)) {
+    slot++;
+  }
+  return slot;
+}
+const log = (0, _debug.default)('@pie-element:placement-ordering:configure:choice-editor');
+const StyledControls = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const StyledAddButton = (0, _styles.styled)(_Button.default)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2.5),
+  paddingLeft: theme.spacing(1.5),
+  paddingRight: theme.spacing(1.5),
+  '& .MuiButton-label': {
+    transition: 'opacity 200ms linear',
+    '&:hover': {
+      opacity: 0.3
+    }
+  }
+}));
+const StyledVTiler = (0, _styles.styled)('div')({
+  gridAutoFlow: 'column',
+  display: 'grid',
+  gridGap: '10px',
+  alignItems: 'center'
+});
+const StyledColumnLabel = (0, _styles.styled)(_renderUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class ChoiceEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "state", {
+      warning: {
+        open: false
+      }
+    });
+    this.onChoiceChange = choice => {
+      const {
+        choices,
+        onChange,
+        correctResponse
+      } = this.props;
+      const index = choices.findIndex(c => c.id === choice.id);
+      choices.splice(index, 1, {
+        ...choices[index],
+        label: choice.label
+      });
+      onChange(choices, correctResponse);
+    };
+    this.onDelete = choice => {
+      const {
+        choices,
+        onChange,
+        correctResponse,
+        choicesLabel
+      } = this.props;
+      if (choices && choices.length === 3) {
+        this.setState({
+          warning: {
+            open: true,
+            text: `There have to be at least 3 ${choicesLabel}.`
+          }
+        });
+      } else {
+        const updatedChoices = choices.filter(c => c.id !== choice.id);
+        const updatedCorrectResponse = correctResponse.filter(v => v.id !== choice.id);
+        onChange(updatedChoices, updatedCorrectResponse);
+      }
+    };
+    this.addChoice = () => {
+      const {
+        choices,
+        correctResponse,
+        onChange,
+        choicesLabel
+      } = this.props;
+      if (choices && choices.length === 10) {
+        this.setState({
+          warning: {
+            open: true,
+            text: `There can be maximum 10 ${choicesLabel}.`
+          }
+        });
+      } else {
+        const freeId = findFreeChoiceSlot(choices);
+        const id = `c${freeId}`;
+        const newChoice = {
+          id,
+          label: ''
+        };
+        const newCorrectResponse = {
+          id,
+          /**
+           * Note: weights are not configurable in the existing component
+           * so we'll want do disable this in the controller and ignore it for now.
+           */
+          weight: 0
+        };
+        const updatedChoices = choices.concat([newChoice]);
+        const updatedCorrectResponse = correctResponse.concat([newCorrectResponse]);
+        onChange(updatedChoices, updatedCorrectResponse);
+      }
+    };
+    this.shuffleChoices = () => {
+      const {
+        onChange,
+        choices,
+        correctResponse,
+        placementArea
+      } = this.props;
+      let shuffled = (0, _lodashEs.shuffle)(choices);
+
+      // if placementArea is disabled, make sure we don't shuffle choices in the correct order
+      const shuffledCorrect = !placementArea && (0, _lodashEs.isEqual)(shuffled.map(item => item.id), correctResponse.map(item => item.id));
+      if (shuffledCorrect) {
+        const shuffledTwice = (0, _lodashEs.shuffle)(shuffled);
+        onChange(shuffledTwice, correctResponse);
+      } else {
+        onChange(shuffled, correctResponse);
+      }
+    };
+  }
+  render() {
+    const {
+      correctResponse,
+      choices,
+      imageSupport,
+      toolbarOpts,
+      pluginProps,
+      singularChoiceLabel,
+      pluralChoiceLabel,
+      choicesLabel,
+      spellCheck,
+      maxImageWidth,
+      maxImageHeight,
+      errors,
+      mathMlOptions = {},
+      ordering
+    } = this.props;
+    const {
+      warning
+    } = this.state;
+    const {
+      choicesErrors,
+      orderError
+    } = errors || {};
+    const vTilerStyle = {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gridTemplateRows: `repeat(${choices.length}, 1fr)`
+    };
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(StyledVTiler, {
+      style: {
+        gridTemplateColumns: 'repeat(2, 1fr)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(StyledColumnLabel, {
+      label: `Student ${choicesLabel || 'Choices'}`
+    }), /*#__PURE__*/_react.default.createElement(StyledColumnLabel, {
+      label: "Correct Order"
+    })), /*#__PURE__*/_react.default.createElement(StyledVTiler, {
+      style: vTilerStyle
+    }, ordering.tiles.map((choice, index) => /*#__PURE__*/_react.default.createElement(_choiceTile.default, {
+      key: `${choice.type}-${choice.id}`,
+      choice: choice,
+      index: index,
+      imageSupport: imageSupport,
+      onDelete: this.onDelete.bind(this, choice),
+      onChoiceChange: this.onChoiceChange,
+      toolbarOpts: toolbarOpts,
+      pluginProps: pluginProps,
+      choices: choices,
+      choicesLabel: choicesLabel,
+      spellCheck: spellCheck,
+      maxImageWidth: maxImageWidth,
+      maxImageHeight: maxImageHeight,
+      error: choicesErrors?.[choice.id] || orderError && ' ' || null,
+      mathMlOptions: mathMlOptions
+    }))), orderError && /*#__PURE__*/_react.default.createElement(ErrorText, null, orderError), /*#__PURE__*/_react.default.createElement(StyledControls, null, /*#__PURE__*/_react.default.createElement(StyledAddButton, {
+      onClick: this.shuffleChoices,
+      size: "small",
+      variant: "contained"
+    }, `SHUFFLE ${pluralChoiceLabel}`.toUpperCase()), /*#__PURE__*/_react.default.createElement(StyledAddButton, {
+      onClick: this.addChoice,
+      size: "small",
+      variant: "contained"
+    }, `ADD ${singularChoiceLabel}`.toUpperCase())), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: warning.open,
+      title: "Warning",
+      text: warning.text,
+      onConfirm: () => this.setState({
+        warning: {
+          open: false
+        }
+      })
+    }));
+  }
+}
+(0, _defineProperty2.default)(ChoiceEditor, "propTypes", {
+  correctResponse: _propTypes.default.array.isRequired,
+  choices: _propTypes.default.array.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  maxImageHeight: _propTypes.default.object,
+  maxImageWidth: _propTypes.default.object,
+  toolbarOpts: _propTypes.default.object,
+  pluginProps: _propTypes.default.object,
+  placementArea: _propTypes.default.bool,
+  singularChoiceLabel: _propTypes.default.string,
+  pluralChoiceLabel: _propTypes.default.string,
+  choicesLabel: _propTypes.default.string,
+  errors: _propTypes.default.object,
+  spellCheck: _propTypes.default.bool
+});
+var _default = exports.default = ChoiceEditor;
+//# sourceMappingURL=choice-editor.js.map

package/configure/lib/choice-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-editor.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_lodashEs","_Button","_styles","_renderUi","_configUi","_choiceTile","findFreeChoiceSlot","choices","slot","ids","map","c","id","includes","log","debug","StyledControls","styled","display","alignItems","justifyContent","StyledAddButton","Button","theme","marginTop","spacing","paddingLeft","paddingRight","transition","opacity","StyledVTiler","gridAutoFlow","gridGap","StyledColumnLabel","InputContainer","width","paddingTop","ErrorText","fontSize","typography","color","palette","error","main","ChoiceEditor","React","Component","constructor","props","_defineProperty2","default","warning","open","onChoiceChange","choice","onChange","correctResponse","index","findIndex","splice","label","onDelete","choicesLabel","length","setState","text","updatedChoices","filter","updatedCorrectResponse","v","addChoice","freeId","newChoice","newCorrectResponse","weight","concat","shuffleChoices","placementArea","shuffled","shuffle","shuffledCorrect","isEqual","item","shuffledTwice","render","imageSupport","toolbarOpts","pluginProps","singularChoiceLabel","pluralChoiceLabel","spellCheck","maxImageWidth","maxImageHeight","errors","mathMlOptions","ordering","state","choicesErrors","orderError","vTilerStyle","gridTemplateColumns","gridTemplateRows","createElement","style","tiles","key","type","bind","onClick","size","variant","toUpperCase","AlertDialog","title","onConfirm","PropTypes","array","isRequired","func","shape","add","delete","object","bool","string","_default","exports"],"sources":["../src/choice-editor.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { isEqual, shuffle } from 'lodash-es';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport { AlertDialog } from '@pie-lib/config-ui';\n\nimport ChoiceTile from './choice-tile';\n\nfunction findFreeChoiceSlot(choices) {\n  let slot = 1;\n  const ids = choices.map((c) => c.id);\n\n  while (ids.includes(`c${slot}`)) {\n    slot++;\n  }\n\n  return slot;\n}\n\nconst log = debug('@pie-element:placement-ordering:configure:choice-editor');\n\nconst StyledControls = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nconst StyledAddButton = styled(Button)(({ theme }) => ({\n  marginTop: theme.spacing(2.5),\n  paddingLeft: theme.spacing(1.5),\n  paddingRight: theme.spacing(1.5),\n  '& .MuiButton-label': {\n    transition: 'opacity 200ms linear',\n    '&:hover': {\n      opacity: 0.3,\n    },\n  },\n}));\n\nconst StyledVTiler = styled('div')({\n  gridAutoFlow: 'column',\n  display: 'grid',\n  gridGap: '10px',\n  alignItems: 'center',\n});\n\nconst StyledColumnLabel = styled(InputContainer)(({ theme }) => ({\n  width: '100%',\n  paddingTop: theme.spacing(2),\n}));\n\nconst ErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  paddingTop: theme.spacing(1),\n}));\n\nclass ChoiceEditor extends React.Component {\n  static propTypes = {\n    correctResponse: PropTypes.array.isRequired,\n    choices: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    imageSupport: PropTypes.shape({\n      add: PropTypes.func.isRequired,\n      delete: PropTypes.func.isRequired,\n    }),\n    maxImageHeight: PropTypes.object,\n    maxImageWidth: PropTypes.object,\n    toolbarOpts: PropTypes.object,\n    pluginProps: PropTypes.object,\n    placementArea: PropTypes.bool,\n    singularChoiceLabel: PropTypes.string,\n    pluralChoiceLabel: PropTypes.string,\n    choicesLabel: PropTypes.string,\n    errors: PropTypes.object,\n    spellCheck: PropTypes.bool,\n  };\n\n  state = { warning: { open: false } };\n\n  constructor(props) {\n    super(props);\n\n    this.onChoiceChange = (choice) => {\n      const { choices, onChange, correctResponse } = this.props;\n      const index = choices.findIndex((c) => c.id === choice.id);\n\n      choices.splice(index, 1, { ...choices[index], label: choice.label });\n      onChange(choices, correctResponse);\n    };\n\n    this.onDelete = (choice) => {\n      const { choices, onChange, correctResponse, choicesLabel } = this.props;\n\n      if (choices && choices.length === 3) {\n        this.setState({\n          warning: {\n            open: true,\n            text: `There have to be at least 3 ${choicesLabel}.`,\n          },\n        });\n      } else {\n        const updatedChoices = choices.filter((c) => c.id !== choice.id);\n        const updatedCorrectResponse = correctResponse.filter((v) => v.id !== choice.id);\n\n        onChange(updatedChoices, updatedCorrectResponse);\n      }\n    };\n\n    this.addChoice = () => {\n      const { choices, correctResponse, onChange, choicesLabel } = this.props;\n\n      if (choices && choices.length === 10) {\n        this.setState({\n          warning: {\n            open: true,\n            text: `There can be maximum 10 ${choicesLabel}.`,\n          },\n        });\n      } else {\n        const freeId = findFreeChoiceSlot(choices);\n        const id = `c${freeId}`;\n        const newChoice = { id, label: '' };\n\n        const newCorrectResponse = {\n          id,\n          /**\n           * Note: weights are not configurable in the existing component\n           * so we'll want do disable this in the controller and ignore it for now.\n           */\n          weight: 0,\n        };\n\n        const updatedChoices = choices.concat([newChoice]);\n        const updatedCorrectResponse = correctResponse.concat([newCorrectResponse]);\n\n        onChange(updatedChoices, updatedCorrectResponse);\n      }\n    };\n\n    this.shuffleChoices = () => {\n      const { onChange, choices, correctResponse, placementArea } = this.props;\n      let shuffled = shuffle(choices);\n\n      // if placementArea is disabled, make sure we don't shuffle choices in the correct order\n      const shuffledCorrect =\n        !placementArea &&\n        isEqual(\n          shuffled.map((item) => item.id),\n          correctResponse.map((item) => item.id),\n        );\n\n      if (shuffledCorrect) {\n        const shuffledTwice = shuffle(shuffled);\n\n        onChange(shuffledTwice, correctResponse);\n      } else {\n        onChange(shuffled, correctResponse);\n      }\n    };\n  }\n\n  render() {\n    const {\n      correctResponse,\n      choices,\n      imageSupport,\n      toolbarOpts,\n      pluginProps,\n      singularChoiceLabel,\n      pluralChoiceLabel,\n      choicesLabel,\n      spellCheck,\n      maxImageWidth,\n      maxImageHeight,\n      errors,\n      mathMlOptions = {},\n      ordering,\n    } = this.props;\n    const { warning } = this.state;\n    const { choicesErrors, orderError } = errors || {};\n\n    const vTilerStyle = {\n      gridTemplateColumns: 'repeat(2, 1fr)',\n      gridTemplateRows: `repeat(${choices.length}, 1fr)`,\n    };\n\n    return (\n      <div>\n        <StyledVTiler style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>\n          <StyledColumnLabel label={`Student ${choicesLabel || 'Choices'}`} />\n          <StyledColumnLabel label=\"Correct Order\" />\n        </StyledVTiler>\n        <StyledVTiler style={vTilerStyle}>\n          {ordering.tiles.map((choice, index) => (\n            <ChoiceTile\n              key={`${choice.type}-${choice.id}`}\n              choice={choice}\n              index={index}\n              imageSupport={imageSupport}\n              onDelete={this.onDelete.bind(this, choice)}\n              onChoiceChange={this.onChoiceChange}\n              toolbarOpts={toolbarOpts}\n              pluginProps={pluginProps}\n              choices={choices}\n              choicesLabel={choicesLabel}\n              spellCheck={spellCheck}\n              maxImageWidth={maxImageWidth}\n              maxImageHeight={maxImageHeight}\n              error={choicesErrors?.[choice.id] || (orderError && ' ') || null}\n              mathMlOptions={mathMlOptions}\n            />\n          ))}\n        </StyledVTiler>\n        {orderError && <ErrorText>{orderError}</ErrorText>}\n        <StyledControls>\n          <StyledAddButton onClick={this.shuffleChoices} size=\"small\" variant=\"contained\">\n            {`SHUFFLE ${pluralChoiceLabel}`.toUpperCase()}\n          </StyledAddButton>\n\n          <StyledAddButton onClick={this.addChoice} size=\"small\" variant=\"contained\">\n            {`ADD ${singularChoiceLabel}`.toUpperCase()}\n          </StyledAddButton>\n        </StyledControls>\n        <AlertDialog\n          open={warning.open}\n          title=\"Warning\"\n          text={warning.text}\n          onConfirm={() => this.setState({ warning: { open: false } })}\n        />\n      </div>\n    );\n  }\n}\n\nexport default ChoiceEditor;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/choice-tile.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChoiceTile = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _debug = _interopRequireDefault(require("debug"));
+var _core = require("@dnd-kit/core");
+var _CardActions = _interopRequireDefault(require("@mui/material/CardActions"));
+var _DragHandle = _interopRequireDefault(require("@mui/icons-material/DragHandle"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _RemoveCircle = _interopRequireDefault(require("@mui/icons-material/RemoveCircle"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _editableHtmlTipTap = _interopRequireWildcard(require("@pie-lib/editable-html-tip-tap"));
+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 log = (0, _debug.default)('@pie-element:placement-ordering:configure:choice-tile');
+const StyledChoiceTile = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: `${theme.spacing(1)} 0`,
+  backgroundColor: theme.palette.background.paper,
+  display: 'flex',
+  flexDirection: 'column',
+  cursor: 'move',
+  touchAction: 'none'
+}));
+const StyledEditableHtml = (0, _styles.styled)(_editableHtmlTipTap.default)(({
+  theme,
+  isTargetPrompt
+}) => ({
+  width: '80%',
+  borderRadius: '4px',
+  ...(isTargetPrompt && {
+    backgroundColor: theme.palette.error.light
+  })
+}));
+const StyledControls = (0, _styles.styled)('div')(() => ({
+  display: 'flex',
+  justifyContent: 'flex-end'
+}));
+const StyledActions = (0, _styles.styled)(_DragHandle.default)(({
+  theme
+}) => ({
+  color: theme.palette.error[400]
+}));
+const StyledErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  marginLeft: theme.spacing(5),
+  marginTop: theme.spacing(1)
+}));
+const StyledRemoveCircle = (0, _styles.styled)(_RemoveCircle.default)(({
+  theme
+}) => ({
+  fill: theme.palette.error[500]
+}));
+const StyledIconButton = (0, _styles.styled)(_IconButton.default)({
+  color: `${_renderUi.color.tertiary()} !important`
+});
+const ChoiceTile = props => {
+  const {
+    choice,
+    index,
+    onChoiceChange,
+    onDelete,
+    imageSupport,
+    spellCheck,
+    toolbarOpts,
+    pluginProps,
+    maxImageWidth,
+    maxImageHeight,
+    error,
+    mathMlOptions = {}
+  } = props;
+  const {
+    label,
+    editable,
+    type
+  } = choice;
+  const draggableId = `${type}-${choice.id}`;
+  const droppableId = `${type}-drop-${choice.id}`;
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: draggableId,
+    data: {
+      id: choice.id,
+      index,
+      type
+    }
+  });
+  const {
+    setNodeRef: setDropRef
+  } = (0, _core.useDroppable)({
+    id: droppableId,
+    data: {
+      id: choice.id,
+      index,
+      type
+    }
+  });
+  const onLabelChange = label => {
+    choice.label = label;
+    onChoiceChange(choice);
+  };
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    opacity: isDragging ? 0.5 : 1,
+    width: '100%'
+  };
+  const filteredDefaultPlugins = (_editableHtmlTipTap.DEFAULT_PLUGINS || []).filter(p => p !== 'bulleted-list' && p !== 'numbered-list');
+  const isEditableElement = target => target.closest('[contenteditable]') || target.closest('input') || target.closest('textarea') || target.isContentEditable;
+
+  // edit listeners to prevent dragging when interacting with editable-html element
+  const filteredListeners = {
+    ...listeners,
+    onKeyDown: e => {
+      if (isEditableElement(e.target)) {
+        return;
+      }
+      listeners?.onKeyDown?.(e);
+    },
+    onPointerDown: e => {
+      if (isEditableElement(e.target)) {
+        return;
+      }
+      listeners?.onPointerDown?.(e);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setDropRef
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setDragRef
+  }, filteredListeners, attributes), /*#__PURE__*/_react.default.createElement(StyledChoiceTile, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CardActions.default, null, /*#__PURE__*/_react.default.createElement(StyledActions, null)), /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+    disabled: !editable,
+    placeholder: type !== 'target' && !label.includes('data-latex') ? 'Enter a choice' : '',
+    markup: label,
+    imageSupport: imageSupport || undefined,
+    onChange: onLabelChange,
+    pluginProps: pluginProps,
+    toolbarOpts: toolbarOpts,
+    activePlugins: filteredDefaultPlugins,
+    spellCheck: spellCheck,
+    autoWidthToolbar: true,
+    maxImageWidth: maxImageWidth,
+    maxImageHeight: maxImageHeight,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }],
+    error: editable && error,
+    mathMlOptions: mathMlOptions
+  }), editable && /*#__PURE__*/_react.default.createElement(StyledControls, null, /*#__PURE__*/_react.default.createElement(StyledIconButton, {
+    onClick: onDelete,
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(StyledRemoveCircle, null)))), editable && error && /*#__PURE__*/_react.default.createElement(StyledErrorText, null, error))));
+};
+exports.ChoiceTile = ChoiceTile;
+ChoiceTile.propTypes = {
+  id: _propTypes.default.any,
+  maxImageHeight: _propTypes.default.object,
+  maxImageWidth: _propTypes.default.object,
+  label: _propTypes.default.string,
+  isOver: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  empty: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  outcome: _propTypes.default.object,
+  index: _propTypes.default.number,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
+  }),
+  choice: _propTypes.default.object,
+  choices: _propTypes.default.array.isRequired,
+  onChoiceChange: _propTypes.default.func.isRequired,
+  onDelete: _propTypes.default.func.isRequired,
+  toolbarOpts: _propTypes.default.object,
+  pluginProps: _propTypes.default.object,
+  choicesLabel: _propTypes.default.string,
+  error: _propTypes.default.string,
+  spellCheck: _propTypes.default.bool,
+  mathMlOptions: _propTypes.default.object
+};
+var _default = exports.default = ChoiceTile;
+//# sourceMappingURL=choice-tile.js.map

package/configure/lib/choice-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_CardActions","_DragHandle","_IconButton","_RemoveCircle","_styles","_renderUi","_editableHtmlTipTap","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","log","debug","StyledChoiceTile","styled","theme","margin","spacing","backgroundColor","palette","background","paper","display","flexDirection","cursor","touchAction","StyledEditableHtml","EditableHtml","isTargetPrompt","width","borderRadius","error","light","StyledControls","justifyContent","StyledActions","DragHandle","color","StyledErrorText","fontSize","typography","main","marginLeft","marginTop","StyledRemoveCircle","RemoveCircle","fill","StyledIconButton","IconButton","tertiary","ChoiceTile","props","choice","index","onChoiceChange","onDelete","imageSupport","spellCheck","toolbarOpts","pluginProps","maxImageWidth","maxImageHeight","mathMlOptions","label","editable","type","draggableId","id","droppableId","attributes","listeners","setNodeRef","setDragRef","transform","isDragging","useDraggable","data","setDropRef","useDroppable","onLabelChange","style","x","y","undefined","opacity","filteredDefaultPlugins","DEFAULT_PLUGINS","filter","p","isEditableElement","target","closest","isContentEditable","filteredListeners","onKeyDown","onPointerDown","createElement","ref","_extends2","disabled","placeholder","includes","markup","onChange","activePlugins","autoWidthToolbar","languageCharactersProps","language","onClick","size","exports","propTypes","PropTypes","any","object","string","isOver","bool","empty","outcome","number","shape","add","func","isRequired","delete","choices","array","choicesLabel","_default"],"sources":["../src/choice-tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport CardActions from '@mui/material/CardActions';\nimport DragHandle from '@mui/icons-material/DragHandle';\nimport IconButton from '@mui/material/IconButton';\nimport RemoveCircle from '@mui/icons-material/RemoveCircle';\nimport { styled } from '@mui/material/styles';\n\nimport { color } from '@pie-lib/render-ui';\nimport EditableHtml, { DEFAULT_PLUGINS } from '@pie-lib/editable-html-tip-tap';\n\nconst log = debug('@pie-element:placement-ordering:configure:choice-tile');\n\nconst StyledChoiceTile = styled('div')(({ theme }) => ({\n  margin: `${theme.spacing(1)} 0`,\n  backgroundColor: theme.palette.background.paper,\n  display: 'flex',\n  flexDirection: 'column',\n  cursor: 'move',\n  touchAction: 'none',\n}));\n\nconst StyledEditableHtml = styled(EditableHtml)(({ theme, isTargetPrompt }) => ({\n  width: '80%',\n  borderRadius: '4px',\n  ...(isTargetPrompt && {\n    backgroundColor: theme.palette.error.light,\n  }),\n}));\n\nconst StyledControls = styled('div')(() => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n}));\n\nconst StyledActions = styled(DragHandle)(({ theme }) => ({\n  color: theme.palette.error[400],\n}));\n\nconst StyledErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  marginLeft: theme.spacing(5),\n  marginTop: theme.spacing(1),\n}));\n\nconst StyledRemoveCircle = styled(RemoveCircle)(({ theme }) => ({\n  fill: theme.palette.error[500],\n}));\n\nconst StyledIconButton = styled(IconButton)({\n  color: `${color.tertiary()} !important`,\n});\n\nexport const ChoiceTile = (props) => {\n  const {\n    choice,\n    index,\n    onChoiceChange,\n    onDelete,\n    imageSupport,\n    spellCheck,\n    toolbarOpts,\n    pluginProps,\n    maxImageWidth,\n    maxImageHeight,\n    error,\n    mathMlOptions = {},\n  } = props;\n  const { label, editable, type } = choice;\n  const draggableId = `${type}-${choice.id}`;\n  const droppableId = `${type}-drop-${choice.id}`;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: draggableId,\n    data: {\n      id: choice.id,\n      index,\n      type,\n    },\n  });\n\n  const { setNodeRef: setDropRef } = useDroppable({\n    id: droppableId,\n    data: {\n      id: choice.id,\n      index,\n      type,\n    },\n  });\n\n  const onLabelChange = (label) => {\n    choice.label = label;\n    onChoiceChange(choice);\n  };\n\n  const style = {\n    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n    opacity: isDragging ? 0.5 : 1,\n    width: '100%',\n  };\n\n  const filteredDefaultPlugins = (DEFAULT_PLUGINS || []).filter((p) => p !== 'bulleted-list' && p !== 'numbered-list');\n\n  const isEditableElement = (target) =>\n    target.closest('[contenteditable]') ||\n    target.closest('input') ||\n    target.closest('textarea') ||\n    target.isContentEditable;\n\n  // edit listeners to prevent dragging when interacting with editable-html element\n  const filteredListeners = {\n    ...listeners,\n    onKeyDown: (e) => {\n      if (isEditableElement(e.target)) {\n        return;\n      }\n\n      listeners?.onKeyDown?.(e);\n    },\n    onPointerDown: (e) => {\n      if (isEditableElement(e.target)) {\n        return;\n      }\n\n      listeners?.onPointerDown?.(e);\n    },\n  };\n\n  return (\n    <div ref={setDropRef}>\n      <div ref={setDragRef} {...filteredListeners} {...attributes}>\n        <StyledChoiceTile style={style}>\n          <div style={{ width: '100%', display: 'flex' }}>\n            <CardActions>\n              <StyledActions />\n            </CardActions>\n\n            <StyledEditableHtml\n              disabled={!editable}\n              placeholder={type !== 'target' && !label.includes('data-latex') ? 'Enter a choice' : ''}\n              markup={label}\n              imageSupport={imageSupport || undefined}\n              onChange={onLabelChange}\n              pluginProps={pluginProps}\n              toolbarOpts={toolbarOpts}\n              activePlugins={filteredDefaultPlugins}\n              spellCheck={spellCheck}\n              autoWidthToolbar\n              maxImageWidth={maxImageWidth}\n              maxImageHeight={maxImageHeight}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              error={editable && error}\n              mathMlOptions={mathMlOptions}\n            />\n\n            {editable && (\n              <StyledControls>\n                <StyledIconButton onClick={onDelete} size=\"large\">\n                  <StyledRemoveCircle />\n                </StyledIconButton>\n              </StyledControls>\n            )}\n          </div>\n\n          {editable && error && <StyledErrorText>{error}</StyledErrorText>}\n        </StyledChoiceTile>\n      </div>\n    </div>\n  );\n};\n\nChoiceTile.propTypes = {\n  id: PropTypes.any,\n  maxImageHeight: PropTypes.object,\n  maxImageWidth: PropTypes.object,\n  label: PropTypes.string,\n  isOver: PropTypes.bool,\n  type: PropTypes.string,\n  empty: PropTypes.bool,\n  disabled: PropTypes.bool,\n  outcome: PropTypes.object,\n  index: PropTypes.number,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func.isRequired,\n    delete: PropTypes.func.isRequired,\n  }),\n  choice: PropTypes.object,\n  choices: PropTypes.array.isRequired,\n  onChoiceChange: PropTypes.func.isRequired,\n  onDelete: PropTypes.func.isRequired,\n  toolbarOpts: PropTypes.object,\n  pluginProps: PropTypes.object,\n  choicesLabel: PropTypes.string,\n  error: PropTypes.string,\n  spellCheck: PropTypes.bool,\n  mathMlOptions: PropTypes.object,\n};\n\nexport default ChoiceTile;\n"],"mappings":"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","ignoreList":[]}