@pie-lib/mask-markup 1.42.0-mui-update.0 → 1.45.0-mui-update.0

package/lib/drag-in-the-blank.js

@@ -13,9 +13,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _mathRendering = require("@pie-lib/math-rendering");
 var _drag = require("@pie-lib/drag");
+var _core = require("@dnd-kit/core");
 var _choices = _interopRequireDefault(require("./choices"));
+var _choice = _interopRequireDefault(require("./choices/choice"));
 var _blank = _interopRequireDefault(require("./components/blank"));
 var _withMask = require("./with-mask");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
@@ -35,7 +36,8 @@ var Masked = (0, _withMask.withMask)('blank', function (props) {
         showCorrectAnswer = props.showCorrectAnswer,
         emptyResponseAreaWidth = props.emptyResponseAreaWidth,
         emptyResponseAreaHeight = props.emptyResponseAreaHeight,
-        instanceId = props.instanceId;
+        instanceId = props.instanceId,
+        isDragging = props.isDragging;
       var choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
       // eslint-disable-next-line react/prop-types
       var choice = choiceId && props.choices.find(function (c) {
@@ -59,69 +61,76 @@ var Masked = (0, _withMask.withMask)('blank', function (props) {
           }
           _onChange(newData);
         },
-        instanceId: instanceId
+        instanceId: instanceId,
+        isDragging: isDragging
       });
     }
   };
 });
 var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Component) {
-  function DragInTheBlank() {
+  function DragInTheBlank(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, DragInTheBlank);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DragInTheBlank, [].concat(args));
+    _this = _callSuper(this, DragInTheBlank, [props]);
+    (0, _defineProperty2["default"])(_this, "handleDragStart", function (event) {
+      var _active$data;
+      var active = event.active;
+      if (active !== null && active !== void 0 && (_active$data = active.data) !== null && _active$data !== void 0 && _active$data.current) {
+        _this.setState({
+          activeDragItem: active.data.current
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "renderDragOverlay", function () {
+      var activeDragItem = _this.state.activeDragItem;
+      if (!activeDragItem) return null;
+      if (activeDragItem.type === 'MaskBlank') {
+        return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
+          disabled: activeDragItem.disabled,
+          choice: activeDragItem.choice,
+          instanceId: activeDragItem.instanceId
+        });
+      }
+      return null;
+    });
     (0, _defineProperty2["default"])(_this, "handleDragEnd", function (event) {
       var _dropData$accepts;
-      console.log('Drag End Event:', event);
       var active = event.active,
         over = event.over;
       var _this$props = _this.props,
         onChange = _this$props.onChange,
         value = _this$props.value;
       if (!over || !active || !onChange) {
-        console.log('Early return - missing data:', {
-          over: !!over,
-          active: !!active,
-          onChange: !!onChange
-        });
         return;
       }
       var draggedData = active.data.current;
       var dropData = over.data.current;
-      console.log('Drag data:', draggedData);
-      console.log('Drop data:', dropData);
-
-      // Handle drop from choice to blank or blank to blank
       if ((draggedData === null || draggedData === void 0 ? void 0 : draggedData.type) === 'MaskBlank' && dropData !== null && dropData !== void 0 && (_dropData$accepts = dropData.accepts) !== null && _dropData$accepts !== void 0 && _dropData$accepts.includes('MaskBlank')) {
-        console.log('Valid drag/drop types');
         var draggedItem = draggedData;
         var targetId = dropData.id;
-        if (draggedItem.instanceId === dropData.instanceId) {
-          console.log('Instance IDs match');
 
-          // Handle drop from choice to blank
-          if (draggedItem.fromChoice === true) {
-            console.log('Dropping from choice to blank:', targetId);
-            var newValue = _objectSpread({}, value);
-            newValue[targetId] = draggedItem.choice.id;
-            onChange(newValue);
-          }
-          // Handle drop from blank to blank
-          else if (draggedItem.id !== targetId) {
-            console.log('Moving from blank to blank:', draggedItem.id, '->', targetId);
-            var _newValue = _objectSpread({}, value);
-            _newValue[targetId] = draggedItem.choice.id;
-            delete _newValue[draggedItem.id];
-            onChange(_newValue);
-          }
-        } else {
-          console.log('Instance ID mismatch:', draggedItem.instanceId, 'vs', dropData.instanceId);
+        // drop from choice to blank (placing choice into response)
+        if (draggedItem.fromChoice === true) {
+          var newValue = _objectSpread({}, value);
+          newValue[targetId] = draggedItem.choice.id;
+          onChange(newValue);
+        } else if (dropData.toChoiceBoard === true) {
+          // handle drop from blank to choice board (removal from blank)
+          var _newValue = _objectSpread({}, value);
+          delete _newValue[draggedItem.id];
+          onChange(_newValue);
+        }
+        // handle drop from blank to blank (changing position)
+        else if (draggedItem.id !== targetId) {
+          var _newValue2 = _objectSpread({}, value);
+          _newValue2[targetId] = draggedItem.choice.id;
+          delete _newValue2[draggedItem.id];
+          onChange(_newValue2);
         }
-      } else {
-        console.log('Invalid drag/drop types:', draggedData === null || draggedData === void 0 ? void 0 : draggedData.type, dropData === null || dropData === void 0 ? void 0 : dropData.accepts);
       }
+      _this.setState({
+        activeDragItem: null
+      });
     });
     (0, _defineProperty2["default"])(_this, "getPositionDirection", function (choicePosition) {
       var flexDirection;
@@ -151,15 +160,13 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
         alignItems: alignItems
       };
     });
+    _this.state = {
+      activeDragItem: null
+    };
     return _this;
   }
   (0, _inherits2["default"])(DragInTheBlank, _React$Component);
   return (0, _createClass2["default"])(DragInTheBlank, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.rootRef) (0, _mathRendering.renderMath)(this.rootRef);
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -184,7 +191,9 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
         minWidth: '100px'
       }, this.getPositionDirection(choicePosition));
       return /*#__PURE__*/_react["default"].createElement(_drag.DragProvider, {
-        onDragEnd: this.handleDragEnd
+        onDragStart: this.handleDragStart,
+        onDragEnd: this.handleDragEnd,
+        collisionDetection: _core.closestCenter
       }, /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref) {
           return _this2.rootRef = _ref;
@@ -211,8 +220,13 @@ var DragInTheBlank = exports["default"] = /*#__PURE__*/function (_React$Componen
         showCorrectAnswer: showCorrectAnswer,
         emptyResponseAreaWidth: emptyResponseAreaWidth,
         emptyResponseAreaHeight: emptyResponseAreaHeight,
-        instanceId: instanceId
-      })));
+        instanceId: instanceId,
+        isDragging: !!this.state.activeDragItem
+      }), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, {
+        style: {
+          pointerEvents: "none"
+        }
+      }, this.renderDragOverlay())));
     }
   }]);
 }(_react["default"].Component);

package/lib/drag-in-the-blank.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-in-the-blank.js","names":["_react","_interopRequireDefault","require","_propTypes","_mathRendering","_drag","_choices","_blank","_withMask","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Masked","withMask","props","node","data","onChange","_node$data","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","instanceId","choiceId","id","choice","choices","find","c","createElement","key","concat","type","correct","newData","undefined","DragInTheBlank","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","event","_dropData$accepts","console","log","active","over","_this$props","value","draggedData","current","dropData","accepts","includes","draggedItem","targetId","fromChoice","newValue","choicePosition","flexDirection","justifyContent","alignItems","_inherits2","_createClass2","componentDidUpdate","rootRef","renderMath","render","_this2","_this$props2","markup","choicesPosition","layout","style","display","minWidth","getPositionDirection","DragProvider","onDragEnd","handleDragEnd","ref","elementType","React","Component","PropTypes","string","object","array","func","bool","oneOfType","number"],"sources":["../src/drag-in-the-blank.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { DragProvider } from '@pie-lib/drag';\nimport Choices from './choices';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data?.dataset || {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const {\n      disabled,\n      duplicates,\n      correctResponse,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      instanceId,\n    } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        onChange={(id, choiceId) => {\n          const newData = { ...data };\n          if (choiceId === undefined) {\n            delete newData[id];\n          } else {\n            newData[id] = choiceId;\n          }\n          onChange(newData);\n        }}\n        instanceId={instanceId}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.array,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    instanceId: PropTypes.string,\n  };\n\n  static defaultProps = {\n    instanceId: 'drag-in-the-blank',\n  };\n\n  handleDragEnd = (event) => {\n    console.log('Drag End Event:', event);\n    const { active, over } = event;\n    const { onChange, value } = this.props;\n\n    if (!over || !active || !onChange) {\n      console.log('Early return - missing data:', { over: !!over, active: !!active, onChange: !!onChange });\n      return;\n    }\n\n    const draggedData = active.data.current;\n    const dropData = over.data.current;\n\n    console.log('Drag data:', draggedData);\n    console.log('Drop data:', dropData);\n\n    // Handle drop from choice to blank or blank to blank\n    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {\n      console.log('Valid drag/drop types');\n      const draggedItem = draggedData;\n      const targetId = dropData.id;\n\n      if (draggedItem.instanceId === dropData.instanceId) {\n        console.log('Instance IDs match');\n\n        // Handle drop from choice to blank\n        if (draggedItem.fromChoice === true) {\n          console.log('Dropping from choice to blank:', targetId);\n          const newValue = { ...value };\n          newValue[targetId] = draggedItem.choice.id;\n          onChange(newValue);\n        }\n        // Handle drop from blank to blank\n        else if (draggedItem.id !== targetId) {\n          console.log('Moving from blank to blank:', draggedItem.id, '->', targetId);\n          const newValue = { ...value };\n          newValue[targetId] = draggedItem.choice.id;\n          delete newValue[draggedItem.id];\n          onChange(newValue);\n        }\n      } else {\n        console.log('Instance ID mismatch:', draggedItem.instanceId, 'vs', dropData.instanceId);\n      }\n    } else {\n      console.log('Invalid drag/drop types:', draggedData?.type, dropData?.accepts);\n    }\n  };\n\n  componentDidUpdate() {\n    if (this.rootRef) renderMath(this.rootRef);\n  }\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n    let justifyContent;\n    let alignItems;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        alignItems = 'center';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        justifyContent = 'flex-end';\n        alignItems = 'center';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return { flexDirection, justifyContent, alignItems };\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      layout,\n      instanceId\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };\n\n    return (\n      <DragProvider onDragEnd={this.handleDragEnd}>\n        <div ref={(ref) => (this.rootRef = ref)} style={style}>\n          <Choices\n            choicePosition={choicePosition}\n            choices={choices}\n            value={value}\n            duplicates={duplicates}\n            disabled={disabled}\n            instanceId={instanceId}\n          />\n          <Masked\n            elementType=\"drag-in-the-blank\"\n            markup={markup}\n            layout={layout}\n            value={value}\n            choices={choices}\n            onChange={onChange}\n            disabled={disabled}\n            duplicates={duplicates}\n            feedback={feedback}\n            correctResponse={correctResponse}\n            showCorrectAnswer={showCorrectAnswer}\n            emptyResponseAreaWidth={emptyResponseAreaWidth}\n            emptyResponseAreaHeight={emptyResponseAreaHeight}\n            instanceId={instanceId}\n          />\n        </div>\n      </DragProvider>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"drag-in-the-blank.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_core","_choices","_choice","_blank","_withMask","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","Masked","withMask","props","node","data","onChange","_node$data","dataset","component","disabled","duplicates","correctResponse","feedback","showCorrectAnswer","emptyResponseAreaWidth","emptyResponseAreaHeight","instanceId","isDragging","choiceId","id","choice","choices","find","c","createElement","key","concat","type","correct","newData","undefined","DragInTheBlank","exports","_React$Component","_this","_classCallCheck2","event","_active$data","active","current","setState","activeDragItem","state","_dropData$accepts","over","_this$props","value","draggedData","dropData","accepts","includes","draggedItem","targetId","fromChoice","newValue","toChoiceBoard","choicePosition","flexDirection","justifyContent","alignItems","_inherits2","_createClass2","render","_this2","_this$props2","markup","choicesPosition","layout","style","display","minWidth","getPositionDirection","DragProvider","onDragStart","handleDragStart","onDragEnd","handleDragEnd","collisionDetection","closestCenter","ref","rootRef","elementType","DragOverlay","pointerEvents","renderDragOverlay","React","Component","PropTypes","string","object","array","func","bool","oneOfType","number"],"sources":["../src/drag-in-the-blank.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragProvider } from '@pie-lib/drag';\nimport { DragOverlay, closestCenter } from '@dnd-kit/core';\n\nimport Choices from './choices';\nimport Choice from './choices/choice';\nimport Blank from './components/blank';\nimport { withMask } from './with-mask';\n\nconst Masked = withMask('blank', (props) => (node, data, onChange) => {\n  const dataset = node.data?.dataset || {};\n  if (dataset.component === 'blank') {\n    // eslint-disable-next-line react/prop-types\n    const {\n      disabled,\n      duplicates,\n      correctResponse,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      instanceId,\n      isDragging\n    } = props;\n    const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];\n    // eslint-disable-next-line react/prop-types\n    const choice = choiceId && props.choices.find((c) => c.id === choiceId);\n\n    return (\n      <Blank\n        key={`${node.type}-${dataset.id}`}\n        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        id={dataset.id}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        onChange={(id, choiceId) => {\n          const newData = { ...data };\n          if (choiceId === undefined) {\n            delete newData[id];\n          } else {\n            newData[id] = choiceId;\n          }\n          onChange(newData);\n        }}\n        instanceId={instanceId}\n        isDragging={isDragging}\n      />\n    );\n  }\n});\n\nexport default class DragInTheBlank extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeDragItem: null,\n    };\n  }\n\n  static propTypes = {\n    markup: PropTypes.string,\n    layout: PropTypes.object,\n    choicesPosition: PropTypes.string,\n    choices: PropTypes.array,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    duplicates: PropTypes.bool,\n    disabled: PropTypes.bool,\n    feedback: PropTypes.object,\n    correctResponse: PropTypes.object,\n    showCorrectAnswer: PropTypes.bool,\n    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    instanceId: PropTypes.string,\n  };\n\n  static defaultProps = {\n    instanceId: 'drag-in-the-blank',\n  };\n\n  handleDragStart = (event) => {\n    const { active } = event;\n\n    if (active?.data?.current) {\n      this.setState({\n        activeDragItem: active.data.current,\n      });\n    }\n  };\n\n  renderDragOverlay = () => {\n    const { activeDragItem } = this.state;\n    if (!activeDragItem) return null;\n\n    if (activeDragItem.type === 'MaskBlank') {\n      return (\n        <Choice\n          disabled={activeDragItem.disabled}\n          choice={activeDragItem.choice}\n          instanceId={activeDragItem.instanceId}\n        />\n      );\n    }\n\n    return null;\n  };\n\n  handleDragEnd = (event) => {\n    const { active, over } = event;\n    const { onChange, value } = this.props;\n\n    if (!over || !active || !onChange) {\n      return;\n    }\n\n    const draggedData = active.data.current;\n    const dropData = over.data.current;\n\n    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {\n      const draggedItem = draggedData;\n      const targetId = dropData.id;\n\n      // drop from choice to blank (placing choice into response)\n      if (draggedItem.fromChoice === true) {\n        const newValue = { ...value };\n        newValue[targetId] = draggedItem.choice.id;\n        onChange(newValue);\n      } else if (dropData.toChoiceBoard === true) {\n        // handle drop from blank to choice board (removal from blank)\n        const newValue = { ...value };\n        delete newValue[draggedItem.id];\n        onChange(newValue);\n      }\n      // handle drop from blank to blank (changing position)\n      else if (draggedItem.id !== targetId) {\n        const newValue = { ...value };\n        newValue[targetId] = draggedItem.choice.id;\n        delete newValue[draggedItem.id];\n        onChange(newValue);\n      }\n    }\n    this.setState({ activeDragItem: null });\n  };\n\n  getPositionDirection = (choicePosition) => {\n    let flexDirection;\n    let justifyContent;\n    let alignItems;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row';\n        alignItems = 'center';\n        break;\n      case 'right':\n        flexDirection = 'row-reverse';\n        justifyContent = 'flex-end';\n        alignItems = 'center';\n        break;\n      case 'below':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // above\n        flexDirection = 'column';\n        break;\n    }\n\n    return { flexDirection, justifyContent, alignItems };\n  };\n\n  render() {\n    const {\n      markup,\n      duplicates,\n      value,\n      onChange,\n      choicesPosition,\n      choices,\n      correctResponse,\n      disabled,\n      feedback,\n      showCorrectAnswer,\n      emptyResponseAreaWidth,\n      emptyResponseAreaHeight,\n      layout,\n      instanceId\n    } = this.props;\n\n    const choicePosition = choicesPosition || 'below';\n    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };\n\n    return (\n      <DragProvider\n        onDragStart={this.handleDragStart}\n        onDragEnd={this.handleDragEnd}\n        collisionDetection={closestCenter}\n      >\n        <div ref={(ref) => (this.rootRef = ref)} style={style}>\n          <Choices\n            choicePosition={choicePosition}\n            choices={choices}\n            value={value}\n            duplicates={duplicates}\n            disabled={disabled}\n            instanceId={instanceId}\n          />\n          <Masked\n            elementType=\"drag-in-the-blank\"\n            markup={markup}\n            layout={layout}\n            value={value}\n            choices={choices}\n            onChange={onChange}\n            disabled={disabled}\n            duplicates={duplicates}\n            feedback={feedback}\n            correctResponse={correctResponse}\n            showCorrectAnswer={showCorrectAnswer}\n            emptyResponseAreaWidth={emptyResponseAreaWidth}\n            emptyResponseAreaHeight={emptyResponseAreaHeight}\n            instanceId={instanceId}\n            isDragging={!!this.state.activeDragItem}\n          />\n          <DragOverlay style={{ pointerEvents: \"none\" }}>\n            {this.renderDragOverlay()}\n          </DragOverlay>\n        </div>\n      </DragProvider>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/mask.js

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _styles = require("@mui/material/styles");
+var _mathRendering = require("@pie-lib/math-rendering");
 var _serialization = require("./serialization");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -146,21 +147,26 @@ var MaskContainer = (0, _styles.styled)('div')(function () {
  * Renders a layout that uses the slate.js Value model structure.
  */
 var Mask = exports["default"] = /*#__PURE__*/function (_React$Component) {
-  function Mask() {
+  function Mask(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, Mask);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Mask, [].concat(args));
+    _this = _callSuper(this, Mask, [props]);
     (0, _defineProperty2["default"])(_this, "handleChange", function (id, value) {
       var data = _objectSpread(_objectSpread({}, _this.props.value), {}, (0, _defineProperty2["default"])({}, id, value));
       _this.props.onChange(data);
     });
+    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
   (0, _inherits2["default"])(Mask, _React$Component);
   return (0, _createClass2["default"])(Mask, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.containerRef.current && typeof _mathRendering.renderMath === 'function') {
+        (0, _mathRendering.renderMath)(this.containerRef.current);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -168,7 +174,9 @@ var Mask = exports["default"] = /*#__PURE__*/function (_React$Component) {
         layout = _this$props.layout,
         elementType = _this$props.elementType;
       var children = _renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
-      return /*#__PURE__*/_react["default"].createElement(MaskContainer, null, children);
+      return /*#__PURE__*/_react["default"].createElement(MaskContainer, {
+        ref: this.containerRef
+      }, children);
     }
   }]);
 }(_react["default"].Component);

package/lib/mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_get","_styles","_serialization","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Paragraph","styled","_ref","theme","paddingTop","spacing","paddingBottom","Spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","get","marks","renderChildren","exports","layout","value","onChange","rootRenderChildren","elementType","children","nodes","index","key","concat","isMath","createElement","dangerouslySetInnerHTML","__html","innerHTML","c","object","content","reduce","acc","l","extraText","markKey","MARK_TAGS","Tag","subNodes","_Tag","_extends2","data","attributes","MaskContainer","borderCollapse","padding","textAlign","Mask","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","id","props","_inherits2","_createClass2","render","_this$props","handleChange","React","Component","PropTypes","func","string"],"sources":["../src/mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { styled } from '@mui/material/styles';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = styled('div')(({ theme }) => ({\n  paddingTop: theme.spacing(2),\n  paddingBottom: theme.spacing(2),\n}));\n\nconst Spacer = styled('span')(() => ({\n  display: 'inline-block',\n  width: '.75em',\n}));\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = (n) => {\n  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag key={key}>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>,\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = styled('div')(() => ({\n  display: 'initial',\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '8px 12px',\n    textAlign: 'left',\n  },\n}));\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    elementType: PropTypes.string,\n  };\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout, elementType } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n\n    return <MaskContainer>{children}</MaskContainer>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_get","_styles","_mathRendering","_serialization","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Paragraph","styled","_ref","theme","paddingTop","spacing","paddingBottom","Spacer","display","width","restrictWhitespaceTypes","addText","parentNode","text","isWhitespace","trim","parentType","type","includes","undefined","getMark","n","mark","leaves","find","leave","get","marks","renderChildren","exports","layout","value","onChange","rootRenderChildren","elementType","children","nodes","index","key","concat","isMath","createElement","dangerouslySetInnerHTML","__html","innerHTML","c","object","content","reduce","acc","l","extraText","markKey","MARK_TAGS","Tag","subNodes","_Tag","_extends2","data","attributes","MaskContainer","borderCollapse","padding","textAlign","Mask","_React$Component","props","_this","_classCallCheck2","id","containerRef","React","createRef","_inherits2","_createClass2","componentDidMount","current","renderMath","render","_this$props","handleChange","ref","Component","PropTypes","func","string"],"sources":["../src/mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/get';\nimport { styled } from '@mui/material/styles';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { MARK_TAGS } from './serialization';\n\nconst Paragraph = styled('div')(({ theme }) => ({\n  paddingTop: theme.spacing(2),\n  paddingBottom: theme.spacing(2),\n}));\n\nconst Spacer = styled('span')(() => ({\n  display: 'inline-block',\n  width: '.75em',\n}));\n\nconst restrictWhitespaceTypes = ['tbody', 'tr'];\n\nconst addText = (parentNode, text) => {\n  const isWhitespace = text.trim() === '';\n  const parentType = parentNode && parentNode.type;\n\n  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {\n    return undefined;\n  } else {\n    return text;\n  }\n};\n\nconst getMark = (n) => {\n  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);\n\n  if (mark) {\n    return mark.marks[0];\n  }\n\n  return null;\n};\n\nexport const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {\n  if (!value) {\n    return null;\n  }\n\n  const children = [];\n\n  (layout.nodes || []).forEach((n, index) => {\n    const key = n.type ? `${n.type}-${index}` : `${index}`;\n\n    if (n.isMath) {\n      children.push(\n        <span\n          dangerouslySetInnerHTML={{\n            __html: `<math displaystyle=\"true\">${n.nodes[0].innerHTML}</math>`,\n          }}\n        />,\n      );\n      return children;\n    }\n\n    if (rootRenderChildren) {\n      const c = rootRenderChildren(n, value, onChange);\n      if (c) {\n        children.push(c);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n        return;\n      }\n    }\n\n    if (n.object === 'text') {\n      const content = n.leaves.reduce((acc, l) => {\n        const t = l.text;\n        const extraText = addText(parentNode, t);\n        return extraText ? acc + extraText : acc;\n      }, '');\n      const mark = getMark(n);\n\n      if (mark) {\n        let markKey;\n\n        for (markKey in MARK_TAGS) {\n          if (MARK_TAGS[markKey] === mark.type) {\n            const Tag = markKey;\n\n            children.push(<Tag key={key}>{content}</Tag>);\n            break;\n          }\n        }\n      } else if (content.length > 0) {\n        children.push(content);\n        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {\n          children.push(<Spacer key={`spacer-${index}`} />);\n        }\n      }\n    } else {\n      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);\n      if (n.type === 'p' || n.type === 'paragraph') {\n        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);\n      } else {\n        const Tag = n.type;\n        if (n.nodes && n.nodes.length > 0) {\n          children.push(\n            <Tag key={key} {...n.data.attributes}>\n              {subNodes}\n            </Tag>,\n          );\n        } else {\n          children.push(<Tag key={key} {...n.data.attributes} />);\n        }\n      }\n    }\n  });\n  return children;\n};\n\nconst MaskContainer = styled('div')(() => ({\n  display: 'initial',\n  '&:not(.MathJax) table': {\n    borderCollapse: 'collapse',\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table td, &:not(.MathJax) table th': {\n    padding: '8px 12px',\n    textAlign: 'left',\n  },\n}));\n\n/**\n * Renders a layout that uses the slate.js Value model structure.\n */\nexport default class Mask extends React.Component {\n  constructor(props) {\n    super(props);\n    this.containerRef = React.createRef();\n  }\n\n  static propTypes = {\n    renderChildren: PropTypes.func,\n    layout: PropTypes.object,\n    value: PropTypes.object,\n    onChange: PropTypes.func,\n    elementType: PropTypes.string,\n  };\n\n  componentDidMount() {\n    if (this.containerRef.current && typeof renderMath === 'function') {\n      renderMath(this.containerRef.current);\n    }\n  }\n\n  handleChange = (id, value) => {\n    const data = { ...this.props.value, [id]: value };\n    this.props.onChange(data);\n  };\n\n  render() {\n    const { value, layout, elementType } = this.props;\n    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);\n\n    return <MaskContainer ref={this.containerRef}>{children}</MaskContainer>;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.42.0-mui-update.0",
+  "version": "1.45.0-mui-update.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,10 +12,10 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "2.31.0-mui-update.0",
-    "@pie-lib/editable-html": "11.30.0-mui-update.0",
-    "@pie-lib/math-rendering": "3.35.0-mui-update.0",
-    "@pie-lib/render-ui": "4.44.0-mui-update.0",
+    "@pie-lib/drag": "2.34.0-mui-update.0",
+    "@pie-lib/editable-html": "11.33.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.38.0-mui-update.0",
+    "@pie-lib/render-ui": "4.47.0-mui-update.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": "^4.0.0-rc.12",
@@ -33,5 +33,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "23a7cb8864b947778ac7e6dffdc6fa4a74af5927"
+  "gitHead": "560ba0eac28ee29da28dd4d7ae4c053d8477daeb"
 }

package/src/choices/choice.jsx

@@ -30,32 +30,61 @@ const StyledChip = styled(Chip)(() => ({
   fontSize: 'inherit',
   whiteSpace: 'pre-wrap',
   maxWidth: '374px',
+  // Added for touch devices, for image content.
+  // This will prevent the context menu from appearing and not allowing other interactions with the image.
+  // If interactions with the image in the token will be requested we should handle only the context Menu.
   pointerEvents: 'none',
   borderRadius: '3px',
   paddingTop: '12px',
   paddingBottom: '12px',
 }));
 
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
+  },
+}));
+
 export default function Choice({ choice, disabled, instanceId }) {
   const rootRef = useRef(null);
 
-  const { attributes, listeners, setNodeRef } = useDraggable({
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: `choice-${choice.id}`,
     data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
     disabled,
   });
 
   useEffect(() => {
-    if (rootRef.current) renderMath(rootRef.current);
-  });
+    renderMath(rootRef.current);
+  }, [choice.value]);
 
   return (
-    <StyledChoice ref={setNodeRef} className={classnames({ disabled })} {...listeners} {...attributes}>
+    <StyledChoice
+      ref={setNodeRef}
+      style={
+        isDragging
+          ? {
+            width: rootRef.current?.offsetWidth,
+            height: rootRef.current?.offsetHeight,
+          }
+          : {}
+      }
+      className={classnames({ disabled })}
+      {...listeners}
+      {...attributes}
+    >
       <StyledChip
         clickable={false}
-        disabled
+        disabled={disabled}
         ref={rootRef}
-        label={choice.value}
+        label={
+          <StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />
+        }
       />
     </StyledChoice>
   );

package/src/choices/index.jsx

@@ -53,7 +53,7 @@ export default class Choices extends React.Component {
 
     return (
       <div style={elementStyle}>
-        <DragDroppablePlaceholder disabled={disabled}>
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
             <Choice 
               key={`${c.value}-${index}`}