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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.43.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.42.0-mui-update.0...@pie-lib/mask-markup@1.43.0-mui-update.0) (2025-12-11)
+
+
+### Features
+
+* drag changes for ditb ([fc79ecd](https://github.com/pie-framework/pie-lib/commit/fc79ecdacb5693f1b5dcf19c7114f9cd4bed83ba))
+* updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
+
+
+
+
+
 # [1.42.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.41.0-mui-update.0...@pie-lib/mask-markup@1.42.0-mui-update.0) (2025-12-02)
 
 

package/lib/choices/choice.js

@@ -45,13 +45,29 @@ var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
     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'
   };
 });
+var StyledChipLabel = (0, _styles.styled)('span')(function () {
+  return {
+    whiteSpace: 'normal',
+    '& img': {
+      display: 'block',
+      padding: '2px 0'
+    },
+    '& mjx-frac': {
+      fontSize: '120% !important'
+    }
+  };
+});
 function Choice(_ref2) {
+  var _rootRef$current, _rootRef$current2;
   var choice = _ref2.choice,
     disabled = _ref2.disabled,
     instanceId = _ref2.instanceId;
@@ -68,20 +84,29 @@ function Choice(_ref2) {
     }),
     attributes = _useDraggable.attributes,
     listeners = _useDraggable.listeners,
-    setNodeRef = _useDraggable.setNodeRef;
+    setNodeRef = _useDraggable.setNodeRef,
+    isDragging = _useDraggable.isDragging;
   (0, _react.useEffect)(function () {
-    if (rootRef.current) (0, _mathRendering.renderMath)(rootRef.current);
-  });
+    (0, _mathRendering.renderMath)(rootRef.current);
+  }, [choice.value]);
   return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
     ref: setNodeRef,
+    style: isDragging ? {
+      width: (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.offsetWidth,
+      height: (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.offsetHeight
+    } : {},
     className: (0, _classnames["default"])({
       disabled: disabled
     })
   }, listeners, attributes), /*#__PURE__*/_react["default"].createElement(StyledChip, {
     clickable: false,
-    disabled: true,
+    disabled: disabled,
     ref: rootRef,
-    label: choice.value
+    label: /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      dangerouslySetInnerHTML: {
+        __html: choice.value
+      }
+    })
   }));
 }
 Choice.propTypes = {

package/lib/choices/choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_Chip","_classnames","_mathRendering","_renderUi","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","border","concat","palette","primary","main","borderRadius","spacing","margin","transform","display","opacity","StyledChip","Chip","backgroundColor","color","white","text","alignItems","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","paddingTop","paddingBottom","Choice","_ref2","choice","disabled","instanceId","rootRef","useRef","_useDraggable","useDraggable","id","data","fromChoice","type","attributes","listeners","setNodeRef","useEffect","current","renderMath","createElement","_extends2","ref","className","classnames","clickable","label","value","propTypes","PropTypes","object","isRequired","bool","oneOfType","string","number"],"sources":["../../src/choices/choice.jsx"],"sourcesContent":["// choices/Choice.js\nimport React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDraggable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport classnames from 'classnames';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst StyledChoice = styled('span')(({ theme }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  borderRadius: theme.spacing(2),\n  margin: theme.spacing(0.5),\n  transform: 'translate(0, 0)',\n  display: 'inline-flex',\n  '&.disabled': { opacity: 0.6 },\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n  backgroundColor: color.white(),\n  border: `1px solid ${color.text()}`,\n  color: color.text(),\n  alignItems: 'center',\n  display: 'inline-flex',\n  height: 'initial',\n  minHeight: '32px',\n  fontSize: 'inherit',\n  whiteSpace: 'pre-wrap',\n  maxWidth: '374px',\n  pointerEvents: 'none',\n  borderRadius: '3px',\n  paddingTop: '12px',\n  paddingBottom: '12px',\n}));\n\nexport default function Choice({ choice, disabled, instanceId }) {\n  const rootRef = useRef(null);\n\n  const { attributes, listeners, setNodeRef } = useDraggable({\n    id: `choice-${choice.id}`,\n    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },\n    disabled,\n  });\n\n  useEffect(() => {\n    if (rootRef.current) renderMath(rootRef.current);\n  });\n\n  return (\n    <StyledChoice ref={setNodeRef} className={classnames({ disabled })} {...listeners} {...attributes}>\n      <StyledChip\n        clickable={false}\n        disabled\n        ref={rootRef}\n        label={choice.value}\n      />\n    </StyledChoice>\n  );\n}\n\nChoice.propTypes = {\n  choice: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_Chip","_classnames","_mathRendering","_renderUi","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","border","concat","palette","primary","main","borderRadius","spacing","margin","transform","display","opacity","StyledChip","Chip","backgroundColor","color","white","text","alignItems","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","paddingTop","paddingBottom","StyledChipLabel","padding","Choice","_ref2","_rootRef$current","_rootRef$current2","choice","disabled","instanceId","rootRef","useRef","_useDraggable","useDraggable","id","data","fromChoice","type","attributes","listeners","setNodeRef","isDragging","useEffect","renderMath","current","value","createElement","_extends2","ref","style","width","offsetWidth","offsetHeight","className","classnames","clickable","label","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","isRequired","bool","oneOfType","string","number"],"sources":["../../src/choices/choice.jsx"],"sourcesContent":["// choices/Choice.js\nimport React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDraggable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport classnames from 'classnames';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst StyledChoice = styled('span')(({ theme }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  borderRadius: theme.spacing(2),\n  margin: theme.spacing(0.5),\n  transform: 'translate(0, 0)',\n  display: 'inline-flex',\n  '&.disabled': { opacity: 0.6 },\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n  backgroundColor: color.white(),\n  border: `1px solid ${color.text()}`,\n  color: color.text(),\n  alignItems: 'center',\n  display: 'inline-flex',\n  height: 'initial',\n  minHeight: '32px',\n  fontSize: 'inherit',\n  whiteSpace: 'pre-wrap',\n  maxWidth: '374px',\n  // Added for touch devices, for image content.\n  // This will prevent the context menu from appearing and not allowing other interactions with the image.\n  // If interactions with the image in the token will be requested we should handle only the context Menu.\n  pointerEvents: 'none',\n  borderRadius: '3px',\n  paddingTop: '12px',\n  paddingBottom: '12px',\n}));\n\nconst StyledChipLabel = styled('span')(() => ({\n  whiteSpace: 'normal',\n  '& img': {\n    display: 'block',\n    padding: '2px 0',\n  },\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n}));\n\nexport default function Choice({ choice, disabled, instanceId }) {\n  const rootRef = useRef(null);\n\n  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n    id: `choice-${choice.id}`,\n    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },\n    disabled,\n  });\n\n  useEffect(() => {\n    renderMath(rootRef.current);\n  }, [choice.value]);\n\n  return (\n    <StyledChoice\n      ref={setNodeRef}\n      style={\n        isDragging\n          ? {\n            width: rootRef.current?.offsetWidth,\n            height: rootRef.current?.offsetHeight,\n          }\n          : {}\n      }\n      className={classnames({ disabled })}\n      {...listeners}\n      {...attributes}\n    >\n      <StyledChip\n        clickable={false}\n        disabled={disabled}\n        ref={rootRef}\n        label={\n          <StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />\n        }\n      />\n    </StyledChoice>\n  );\n}\n\nChoice.propTypes = {\n  choice: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/choices/index.js

@@ -76,7 +76,8 @@ var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         style: elementStyle
       }, /*#__PURE__*/_react["default"].createElement(_drag.DragDroppablePlaceholder, {
-        disabled: disabled
+        disabled: disabled,
+        instanceId: instanceId
       }, filteredChoices.map(function (c, index) {
         return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
           key: "".concat(c.value, "-").concat(index),

package/lib/choices/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_findKey","_choice","_drag","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","Choices","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","choicePosition","props","margin","_inherits2","_createClass2","key","value","render","_this$props","disabled","duplicates","choices","instanceId","filteredChoices","c","foundChoice","findKey","v","id","undefined","elementStyle","getStyleForWrapper","minWidth","createElement","style","DragDroppablePlaceholder","map","index","choice","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"sources":["../../src/choices/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport findKey from 'lodash/findKey';\nimport Choice from './choice';\nimport { DragDroppablePlaceholder } from '@pie-lib/drag';\n\nexport default class Choices extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    duplicates: PropTypes.bool,\n    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n    value: PropTypes.object,\n    choicePosition: PropTypes.string.isRequired,\n    instanceId: PropTypes.string, // Added for drag isolation\n  };\n\n  getStyleForWrapper = () => {\n    const { choicePosition } = this.props;\n\n    switch (choicePosition) {\n      case 'above':\n        return {\n          margin: '0 0 40px 0',\n        };\n\n      case 'below':\n        return {\n          margin: '40px 0 0 0',\n        };\n\n      case 'right':\n        return {\n          margin: '0 0 0 40px',\n        };\n\n      default:\n        return {\n          margin: '0 40px 0 0',\n        };\n    }\n  };\n\n  render() {\n    const { disabled, duplicates, choices, value, instanceId } = this.props;\n    const filteredChoices = choices.filter((c) => {\n      if (duplicates === true) {\n        return true;\n      }\n      const foundChoice = findKey(value, (v) => v === c.id);\n      return foundChoice === undefined;\n    });\n    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };\n\n    return (\n      <div style={elementStyle}>\n        <DragDroppablePlaceholder disabled={disabled}>\n          {filteredChoices.map((c, index) => (\n            <Choice \n              key={`${c.value}-${index}`} \n              disabled={disabled} \n              choice={c} \n              instanceId={instanceId}\n            />\n          ))}\n        </DragDroppablePlaceholder>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_findKey","_choice","_drag","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","Choices","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","choicePosition","props","margin","_inherits2","_createClass2","key","value","render","_this$props","disabled","duplicates","choices","instanceId","filteredChoices","c","foundChoice","findKey","v","id","undefined","elementStyle","getStyleForWrapper","minWidth","createElement","style","DragDroppablePlaceholder","map","index","choice","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"sources":["../../src/choices/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport findKey from 'lodash/findKey';\nimport Choice from './choice';\nimport { DragDroppablePlaceholder } from '@pie-lib/drag';\n\nexport default class Choices extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    duplicates: PropTypes.bool,\n    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n    value: PropTypes.object,\n    choicePosition: PropTypes.string.isRequired,\n    instanceId: PropTypes.string, // Added for drag isolation\n  };\n\n  getStyleForWrapper = () => {\n    const { choicePosition } = this.props;\n\n    switch (choicePosition) {\n      case 'above':\n        return {\n          margin: '0 0 40px 0',\n        };\n\n      case 'below':\n        return {\n          margin: '40px 0 0 0',\n        };\n\n      case 'right':\n        return {\n          margin: '0 0 0 40px',\n        };\n\n      default:\n        return {\n          margin: '0 40px 0 0',\n        };\n    }\n  };\n\n  render() {\n    const { disabled, duplicates, choices, value, instanceId } = this.props;\n    const filteredChoices = choices.filter((c) => {\n      if (duplicates === true) {\n        return true;\n      }\n      const foundChoice = findKey(value, (v) => v === c.id);\n      return foundChoice === undefined;\n    });\n    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };\n\n    return (\n      <div style={elementStyle}>\n        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>\n          {filteredChoices.map((c, index) => (\n            <Choice \n              key={`${c.value}-${index}`} \n              disabled={disabled} \n              choice={c} \n              instanceId={instanceId}\n            />\n          ))}\n        </DragDroppablePlaceholder>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/blank.js

@@ -32,7 +32,6 @@ var StyledContent = (0, _styles.styled)('span')(function () {
     touchAction: 'none',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
-    // Prevent line wrapping
     '&.over': {
       whiteSpace: 'nowrap',
       overflow: 'hidden'
@@ -101,15 +100,18 @@ var StyledChipLabel = (0, _styles.styled)('span')(function () {
   };
 });
 function BlankContent(_ref) {
+  var _frozenRef$current, _frozenRef$current2;
   var disabled = _ref.disabled,
     choice = _ref.choice,
     isOver = _ref.isOver,
+    isDragging = _ref.isDragging,
     dragItem = _ref.dragItem,
     correct = _ref.correct,
     emptyResponseAreaWidth = _ref.emptyResponseAreaWidth,
     emptyResponseAreaHeight = _ref.emptyResponseAreaHeight;
   var rootRef = (0, _react.useRef)(null);
   var spanRef = (0, _react.useRef)(null);
+  var frozenRef = (0, _react.useRef)(null); // to use during dragging to prevent flickering
   var _useState = (0, _react.useState)({
       height: 0,
       width: 0
@@ -156,15 +158,6 @@ function BlankContent(_ref) {
       rootRef.current.style.height = "".concat(adjustedHeight, "px");
     }
   };
-  var addDraggableFalseAttributes = function addDraggableFalseAttributes(parent) {
-    if (parent && parent.childNodes) {
-      parent.childNodes.forEach(function (elem) {
-        if (elem instanceof Element || elem instanceof HTMLDocument) {
-          elem.setAttribute('draggable', false);
-        }
-      });
-    }
-  };
   var getRootDimensions = function getRootDimensions() {
     // Handle potential non-numeric values
     var responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth)) ? parseFloat(emptyResponseAreaWidth) : 0;
@@ -190,48 +183,54 @@ function BlankContent(_ref) {
     }
   });
   (0, _react.useEffect)(function () {
-    if (JSON.stringify(choice) !== JSON.stringify(choice)) {
-      if (!choice) {
-        setDimensions({
-          height: 0,
-          width: 0
-        });
-        return;
-      }
-      handleElements();
+    if (!choice) {
+      setDimensions({
+        height: 0,
+        width: 0
+      });
+      return;
     }
+    handleElements();
   }, [choice]);
+  (0, _react.useEffect)(function () {
+    if (!isOver && !isDragging) {
+      frozenRef.current = {
+        width: rootRef.current.offsetWidth,
+        height: rootRef.current.offsetHeight
+      };
+    }
+  }, [choice, isOver, isDragging]);
   var draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;
   var label = choice && choice.value;
+  var style = isOver || isDragging ? {
+    width: (_frozenRef$current = frozenRef.current) === null || _frozenRef$current === void 0 ? void 0 : _frozenRef$current.width,
+    height: (_frozenRef$current2 = frozenRef.current) === null || _frozenRef$current2 === void 0 ? void 0 : _frozenRef$current2.height
+  } : getRootDimensions();
   return /*#__PURE__*/_react["default"].createElement(StyledChip, {
     clickable: false,
-    disabled: true,
+    disabled: disabled,
     ref: rootRef,
     component: "span",
     label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      ref: spanRef,
+      draggable: true,
       className: (0, _classnames["default"])({
         over: isOver,
         hidden: draggedLabel
       }),
-      ref: function ref(_ref2) {
-        if (_ref2) {
-          spanRef.current = _ref2;
-          _ref2.innerHTML = label || '';
-          addDraggableFalseAttributes(_ref2);
-        }
+      dangerouslySetInnerHTML: {
+        __html: label || ''
       }
-    }, ' '), draggedLabel && /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+    }), draggedLabel && /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
+      draggable: true,
       className: (0, _classnames["default"])({
         over: isOver,
         dragged: true
       }),
-      ref: function ref(_ref3) {
-        if (_ref3) {
-          _ref3.innerHTML = draggedLabel || '';
-          addDraggableFalseAttributes(_ref3);
-        }
+      dangerouslySetInnerHTML: {
+        __html: draggedLabel || ''
       }
-    }, ' ')),
+    })),
     className: (0, _classnames["default"])({
       over: isOver,
       parentOver: isOver,
@@ -239,7 +238,7 @@ function BlankContent(_ref) {
       incorrect: correct !== undefined && !correct
     }),
     variant: disabled ? 'outlined' : undefined,
-    style: _objectSpread({}, getRootDimensions())
+    style: style
   });
 }
 BlankContent.defaultProps = {
@@ -261,17 +260,17 @@ BlankContent.propTypes = {
 };
 
 // New functional component using @dnd-kit hooks
-function DragDropBlank(_ref4) {
+function DragDropBlank(_ref2) {
   var _dragItem$data;
-  var id = _ref4.id,
-    disabled = _ref4.disabled,
-    duplicates = _ref4.duplicates,
-    choice = _ref4.choice,
-    correct = _ref4.correct,
-    onChange = _ref4.onChange,
-    emptyResponseAreaWidth = _ref4.emptyResponseAreaWidth,
-    emptyResponseAreaHeight = _ref4.emptyResponseAreaHeight,
-    instanceId = _ref4.instanceId;
+  var id = _ref2.id,
+    disabled = _ref2.disabled,
+    duplicates = _ref2.duplicates,
+    choice = _ref2.choice,
+    correct = _ref2.correct,
+    onChange = _ref2.onChange,
+    emptyResponseAreaWidth = _ref2.emptyResponseAreaWidth,
+    emptyResponseAreaHeight = _ref2.emptyResponseAreaHeight,
+    instanceId = _ref2.instanceId;
   // Setup draggable functionality
   var _useDraggable = (0, _core.useDraggable)({
       id: "mask-blank-drag-".concat(id),

package/lib/components/blank.js.map

@@ -1 +1 @@
-{"version":3,"file":"blank.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_mathRendering","_debug","_core","_utilities","_styles","_Chip","_classnames","_renderUi","_colors","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledContent","styled","border","concat","color","primary","minWidth","touchAction","overflow","whiteSpace","StyledChip","Chip","backgroundColor","background","text","fontSize","maxWidth","position","borderRadius","grey","correct","incorrect","StyledChipLabel","pointerEvents","display","padding","marginTop","marginBottom","opacity","left","BlankContent","_ref","disabled","choice","isOver","dragItem","emptyResponseAreaWidth","emptyResponseAreaHeight","rootRef","useRef","spanRef","_useState","useState","height","width","_useState2","_slicedToArray2","dimensions","setDimensions","handleImageLoad","updateDimensions","handleElements","_spanRef$current","imageElement","current","querySelector","onload","setTimeout","style","offsetWidth","offsetHeight","widthWithPadding","heightWithPadding","responseAreaWidth","parseFloat","responseAreaHeight","adjustedWidth","adjustedHeight","prevState","addDraggableFalseAttributes","parent","childNodes","elem","Element","HTMLDocument","setAttribute","getRootDimensions","isNaN","rootStyle","minHeight","useEffect","renderMath","JSON","stringify","draggedLabel","value","label","createElement","clickable","ref","component","Fragment","className","classnames","over","hidden","innerHTML","dragged","parentOver","undefined","variant","defaultProps","propTypes","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","instanceId","DragDropBlank","_ref4","_dragItem$data","_useDraggable","useDraggable","data","fromChoice","type","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","transform","isDragging","_useDroppable","useDroppable","accepts","setDropNodeRef","active","node","CSS","Translate","toString","_extends2","_default","exports"],"sources":["../../src/components/blank.jsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst log = debug('pie-lib:mask-markup:blank');\n\nconst StyledContent = styled('span')(() => ({\n  border: `solid 0px ${color.primary()}`,\n  minWidth: '200px',\n  touchAction: 'none',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap', // Prevent line wrapping\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n  backgroundColor: color.background(),\n  border: `2px dashed ${color.text()}`,\n  color: color.text(),\n  fontSize: 'inherit',\n  maxWidth: '374px',\n  position: 'relative',\n  borderRadius: '3px',\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  '&.parentOver': {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  '&.correct': {\n    border: `solid 1px ${color.correct()}`,\n  },\n  '&.incorrect': {\n    border: `solid 1px ${color.incorrect()}`,\n  },\n}));\n\nconst StyledChipLabel = styled('span')(() => ({\n  whiteSpace: 'normal',\n  // Added for touch devices, for image content.\n  // This will prevent the context menu from appearing and not allowing other interactions with the image.\n  // If interactions with the image in the token will be requested we should handle only the context Menu.\n  pointerEvents: 'none',\n  '& img': {\n    display: 'block',\n    padding: '2px 0',\n  },\n  // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)\n  // Padding for top and bottom will instead be controlled by the container for consistent layout\n  // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet\n  '& p': {\n    marginTop: '0',\n    marginBottom: '0',\n  },\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  '&.hidden': {\n    color: 'transparent',\n    opacity: 0,\n  },\n  '&.dragged': {\n    position: 'absolute',\n    left: 16,\n    maxWidth: '60px',\n  },\n}));\n\nfunction BlankContent({ \n  disabled, \n  choice, \n  isOver, \n  dragItem, \n  correct,\n  emptyResponseAreaWidth,\n  emptyResponseAreaHeight,\n}) {\n  const rootRef = useRef(null);\n  const spanRef = useRef(null);\n  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n  const handleImageLoad = () => {\n    updateDimensions();\n  };\n\n  const handleElements = () => {\n    const imageElement = spanRef.current?.querySelector('img');\n    if (imageElement) {\n      imageElement.onload = handleImageLoad;\n    } else {\n      setTimeout(() => {\n        updateDimensions();\n      }, 300);\n    }\n  };\n\n  const updateDimensions = () => {\n    if (spanRef.current && rootRef.current) {\n      // Temporarily set rootRef width to 'auto' for natural measurement\n      rootRef.current.style.width = 'auto';\n\n      // Get the natural dimensions of the content\n      const width = spanRef.current.offsetWidth || 0;\n      const height = spanRef.current.offsetHeight || 0;\n\n      const widthWithPadding = width + 24; // 12px padding on each side\n      const heightWithPadding = height + 24; // 12px padding on top and bottom\n\n      const responseAreaWidth = parseFloat(emptyResponseAreaWidth) || 0;\n      const responseAreaHeight = parseFloat(emptyResponseAreaHeight) || 0;\n\n      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;\n      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;\n\n      setDimensions(prevState => ({\n        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,\n        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,\n      }));\n\n      rootRef.current.style.width = `${adjustedWidth}px`;\n      rootRef.current.style.height = `${adjustedHeight}px`;\n    }\n  };\n\n  const addDraggableFalseAttributes = (parent) => {\n    if (parent && parent.childNodes) {\n      parent.childNodes.forEach((elem) => {\n        if (elem instanceof Element || elem instanceof HTMLDocument) {\n          elem.setAttribute('draggable', false);\n        }\n      });\n    }\n  };\n\n  const getRootDimensions = () => {\n    // Handle potential non-numeric values\n    const responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth))\n      ? parseFloat(emptyResponseAreaWidth)\n      : 0;\n    const responseAreaHeight = !isNaN(parseFloat(emptyResponseAreaHeight))\n      ? parseFloat(emptyResponseAreaHeight)\n      : 0;\n\n    const rootStyle = {\n      height: dimensions.height || responseAreaHeight,\n      width: dimensions.width || responseAreaWidth,\n    };\n\n    // add minWidth, minHeight if width and height are not defined\n    return {\n      ...rootStyle,\n      ...(responseAreaWidth ? {} : { minWidth: 90 }),\n      ...(responseAreaHeight ? {} : { minHeight: 32 }),\n    };\n  };\n\n  useEffect(() => {\n    handleElements();\n  }, []);\n\n  useEffect(() => {\n    if (rootRef.current) {\n      renderMath(rootRef.current);\n    }\n  });\n\n  useEffect(() => {\n    if (JSON.stringify(choice) !== JSON.stringify(choice)) {\n      if (!choice) {\n        setDimensions({ height: 0, width: 0 });\n        return;\n      }\n      handleElements();\n    }\n  }, [choice]);\n\n  const draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;\n  const label = choice && choice.value;\n\n  return (\n    <StyledChip\n      clickable={false}\n      disabled={true}\n      ref={rootRef}\n      component=\"span\"\n      label={\n        <React.Fragment>\n          <StyledChipLabel\n            className={classnames({\n              over: isOver,\n              hidden: draggedLabel,\n            })}\n            ref={(ref) => {\n              if (ref) {\n                spanRef.current = ref;\n                ref.innerHTML = label || '';\n                addDraggableFalseAttributes(ref);\n              }\n            }}\n          >\n            {' '}\n          </StyledChipLabel>\n          {draggedLabel && (\n            <StyledChipLabel\n              className={classnames({\n                over: isOver,\n                dragged: true,\n              })}\n              ref={(ref) => {\n                if (ref) {\n                  ref.innerHTML = draggedLabel || '';\n                  addDraggableFalseAttributes(ref);\n                }\n              }}\n            >\n              {' '}\n            </StyledChipLabel>\n          )}\n        </React.Fragment>\n      }\n      className={classnames({\n        over: isOver,\n        parentOver: isOver,\n        correct: correct !== undefined && correct,\n        incorrect: correct !== undefined && !correct,\n      })}\n      variant={disabled ? 'outlined' : undefined}\n      style={{\n        ...getRootDimensions(),\n      }}\n    />\n  );\n}\n\nBlankContent.defaultProps = {\n  emptyResponseAreaWidth: 0,\n  emptyResponseAreaHeight: 0,\n};\n\nBlankContent.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  disabled: PropTypes.bool,\n  duplicates: PropTypes.bool,\n  choice: PropTypes.object,\n  isOver: PropTypes.bool,\n  dragItem: PropTypes.object,\n  correct: PropTypes.bool,\n  onChange: PropTypes.func,\n  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  instanceId: PropTypes.string,\n};\n\n// New functional component using @dnd-kit hooks\nfunction DragDropBlank({ \n  id, \n  disabled, \n  duplicates, \n  choice, \n  correct, \n  onChange, \n  emptyResponseAreaWidth, \n  emptyResponseAreaHeight,\n  instanceId \n}) {\n  // Setup draggable functionality\n  const {\n    attributes: dragAttributes,\n    listeners: dragListeners,\n    setNodeRef: setDragNodeRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: `mask-blank-drag-${id}`,\n    disabled: disabled || !choice,\n    data: {\n      id: id,\n      choice: choice,\n      instanceId: instanceId,\n      fromChoice: false, // This is from a blank, not from choices\n      type: 'MaskBlank',\n    },\n  });\n\n  // Setup droppable functionality\n  const {\n    setNodeRef: setDropNodeRef,\n    isOver,\n    active: dragItem,\n  } = useDroppable({\n    id: `mask-blank-drop-${id}`,\n    data: {\n      id: id,\n      accepts: ['MaskBlank'],\n      instanceId: instanceId,\n    },\n  });\n\n  // Combine refs for both drag and drop\n  const setNodeRef = (node) => {\n    setDragNodeRef(node);\n    setDropNodeRef(node);\n  };\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  return (\n    <StyledContent \n      ref={setNodeRef}\n      style={style}\n      className={isOver ? 'over' : ''}\n      {...dragAttributes}\n      {...dragListeners}\n    >\n      <BlankContent\n        id={id}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        isOver={isOver}\n        dragItem={dragItem?.data?.current}\n        correct={correct}\n        onChange={onChange}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        instanceId={instanceId}\n      />\n    </StyledContent>\n  );\n}\n\nDragDropBlank.defaultProps = {\n  emptyResponseAreaWidth: 0,\n  emptyResponseAreaHeight: 0,\n};\n\nDragDropBlank.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  disabled: PropTypes.bool,\n  duplicates: PropTypes.bool,\n  choice: PropTypes.object,\n  correct: PropTypes.bool,\n  onChange: PropTypes.func,\n  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  instanceId: PropTypes.string,\n};\n\nexport default DragDropBlank;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"blank.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_mathRendering","_debug","_core","_utilities","_styles","_Chip","_classnames","_renderUi","_colors","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledContent","styled","border","concat","color","primary","minWidth","touchAction","overflow","whiteSpace","StyledChip","Chip","backgroundColor","background","text","fontSize","maxWidth","position","borderRadius","grey","correct","incorrect","StyledChipLabel","pointerEvents","display","padding","marginTop","marginBottom","opacity","left","BlankContent","_ref","_frozenRef$current","_frozenRef$current2","disabled","choice","isOver","isDragging","dragItem","emptyResponseAreaWidth","emptyResponseAreaHeight","rootRef","useRef","spanRef","frozenRef","_useState","useState","height","width","_useState2","_slicedToArray2","dimensions","setDimensions","handleImageLoad","updateDimensions","handleElements","_spanRef$current","imageElement","current","querySelector","onload","setTimeout","style","offsetWidth","offsetHeight","widthWithPadding","heightWithPadding","responseAreaWidth","parseFloat","responseAreaHeight","adjustedWidth","adjustedHeight","prevState","getRootDimensions","isNaN","rootStyle","minHeight","useEffect","renderMath","draggedLabel","value","label","createElement","clickable","ref","component","Fragment","draggable","className","classnames","over","hidden","dangerouslySetInnerHTML","__html","dragged","parentOver","undefined","variant","defaultProps","propTypes","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","instanceId","DragDropBlank","_ref2","_dragItem$data","_useDraggable","useDraggable","data","fromChoice","type","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","transform","_useDroppable","useDroppable","accepts","setDropNodeRef","active","node","CSS","Translate","toString","_extends2","_default","exports"],"sources":["../../src/components/blank.jsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst log = debug('pie-lib:mask-markup:blank');\n\nconst StyledContent = styled('span')(() => ({\n  border: `solid 0px ${color.primary()}`,\n  minWidth: '200px',\n  touchAction: 'none',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n  backgroundColor: color.background(),\n  border: `2px dashed ${color.text()}`,\n  color: color.text(),\n  fontSize: 'inherit',\n  maxWidth: '374px',\n  position: 'relative',\n  borderRadius: '3px',\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  '&.parentOver': {\n    border: `1px solid ${grey[500]}`,\n    backgroundColor: `${grey[300]}`,\n  },\n  '&.correct': {\n    border: `solid 1px ${color.correct()}`,\n  },\n  '&.incorrect': {\n    border: `solid 1px ${color.incorrect()}`,\n  },\n}));\n\nconst StyledChipLabel = styled('span')(() => ({\n  whiteSpace: 'normal',\n  // Added for touch devices, for image content.\n  // This will prevent the context menu from appearing and not allowing other interactions with the image.\n  // If interactions with the image in the token will be requested we should handle only the context Menu.\n  pointerEvents: 'none',\n  '& img': {\n    display: 'block',\n    padding: '2px 0',\n  },\n  // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)\n  // Padding for top and bottom will instead be controlled by the container for consistent layout\n  // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet\n  '& p': {\n    marginTop: '0',\n    marginBottom: '0',\n  },\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n  '&.over': {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n  },\n  '&.hidden': {\n    color: 'transparent',\n    opacity: 0,\n  },\n  '&.dragged': {\n    position: 'absolute',\n    left: 16,\n    maxWidth: '60px',\n  },\n}));\n\nfunction BlankContent({\n  disabled,\n  choice,\n  isOver,\n  isDragging,\n  dragItem,\n  correct,\n  emptyResponseAreaWidth,\n  emptyResponseAreaHeight,\n}) {\n  const rootRef = useRef(null);\n  const spanRef = useRef(null);\n  const frozenRef = useRef(null); // to use during dragging to prevent flickering\n  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });\n\n  const handleImageLoad = () => {\n    updateDimensions();\n  };\n\n  const handleElements = () => {\n    const imageElement = spanRef.current?.querySelector('img');\n    if (imageElement) {\n      imageElement.onload = handleImageLoad;\n    } else {\n      setTimeout(() => {\n        updateDimensions();\n      }, 300);\n    }\n  };\n\n  const updateDimensions = () => {\n    if (spanRef.current && rootRef.current) {\n      // Temporarily set rootRef width to 'auto' for natural measurement\n      rootRef.current.style.width = 'auto';\n\n      // Get the natural dimensions of the content\n      const width = spanRef.current.offsetWidth || 0;\n      const height = spanRef.current.offsetHeight || 0;\n\n      const widthWithPadding = width + 24; // 12px padding on each side\n      const heightWithPadding = height + 24; // 12px padding on top and bottom\n\n      const responseAreaWidth = parseFloat(emptyResponseAreaWidth) || 0;\n      const responseAreaHeight = parseFloat(emptyResponseAreaHeight) || 0;\n\n      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;\n      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;\n\n      setDimensions(prevState => ({\n        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,\n        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,\n      }));\n\n      rootRef.current.style.width = `${adjustedWidth}px`;\n      rootRef.current.style.height = `${adjustedHeight}px`;\n    }\n  };\n\n  const getRootDimensions = () => {\n    // Handle potential non-numeric values\n    const responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth))\n      ? parseFloat(emptyResponseAreaWidth)\n      : 0;\n    const responseAreaHeight = !isNaN(parseFloat(emptyResponseAreaHeight))\n      ? parseFloat(emptyResponseAreaHeight)\n      : 0;\n\n    const rootStyle = {\n      height: dimensions.height || responseAreaHeight,\n      width: dimensions.width || responseAreaWidth,\n    };\n\n    // add minWidth, minHeight if width and height are not defined\n    return {\n      ...rootStyle,\n      ...(responseAreaWidth ? {} : { minWidth: 90 }),\n      ...(responseAreaHeight ? {} : { minHeight: 32 }),\n    };\n  };\n\n  useEffect(() => {\n    handleElements();\n  }, []);\n\n  useEffect(() => {\n    if (rootRef.current) {\n      renderMath(rootRef.current);\n    }\n  });\n\n  useEffect(() => {\n    if (!choice) {\n      setDimensions({ height: 0, width: 0 });\n      return;\n    }\n    handleElements();\n  }, [choice]);\n\n  useEffect(() => {\n    if (!isOver && !isDragging) {\n      frozenRef.current = {\n        width: rootRef.current.offsetWidth,\n        height: rootRef.current.offsetHeight,\n      };\n    }\n  }, [choice, isOver, isDragging]);\n\n  const draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;\n  const label = choice && choice.value;\n  const style = (isOver || isDragging)\n    ? {\n      width: frozenRef.current?.width,\n      height: frozenRef.current?.height,\n    }\n    : getRootDimensions();\n\n  return (\n    <StyledChip\n      clickable={false}\n      disabled={disabled}\n      ref={rootRef}\n      component=\"span\"\n      label={\n        <React.Fragment>\n          <StyledChipLabel\n              ref={spanRef}\n              draggable={true}\n              className={classnames({\n              over: isOver,\n              hidden: draggedLabel,\n            })}\n            dangerouslySetInnerHTML={{ __html: label || '' }}\n          />\n          {draggedLabel && (\n            <StyledChipLabel\n              draggable={true}\n              className={classnames({\n                over: isOver,\n                dragged: true,\n              })}\n              dangerouslySetInnerHTML={{ __html: draggedLabel || '' }}\n            />\n          )}\n        </React.Fragment>\n      }\n      className={classnames({\n        over: isOver,\n        parentOver: isOver,\n        correct: correct !== undefined && correct,\n        incorrect: correct !== undefined && !correct,\n      })}\n      variant={disabled ? 'outlined' : undefined}\n      style={style}\n    />\n  );\n}\n\nBlankContent.defaultProps = {\n  emptyResponseAreaWidth: 0,\n  emptyResponseAreaHeight: 0,\n};\n\nBlankContent.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  disabled: PropTypes.bool,\n  duplicates: PropTypes.bool,\n  choice: PropTypes.object,\n  isOver: PropTypes.bool,\n  dragItem: PropTypes.object,\n  correct: PropTypes.bool,\n  onChange: PropTypes.func,\n  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  instanceId: PropTypes.string,\n};\n\n// New functional component using @dnd-kit hooks\nfunction DragDropBlank({\n  id,\n  disabled,\n  duplicates,\n  choice,\n  correct,\n  onChange,\n  emptyResponseAreaWidth,\n  emptyResponseAreaHeight,\n  instanceId\n}) {\n  // Setup draggable functionality\n  const {\n    attributes: dragAttributes,\n    listeners: dragListeners,\n    setNodeRef: setDragNodeRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: `mask-blank-drag-${id}`,\n    disabled: disabled || !choice,\n    data: {\n      id: id,\n      choice: choice,\n      instanceId: instanceId,\n      fromChoice: false, // This is from a blank, not from choices\n      type: 'MaskBlank',\n    },\n  });\n\n  // Setup droppable functionality\n  const {\n    setNodeRef: setDropNodeRef,\n    isOver,\n    active: dragItem,\n  } = useDroppable({\n    id: `mask-blank-drop-${id}`,\n    data: {\n      id: id,\n      accepts: ['MaskBlank'],\n      instanceId: instanceId,\n    },\n  });\n\n  // Combine refs for both drag and drop\n  const setNodeRef = (node) => {\n    setDragNodeRef(node);\n    setDropNodeRef(node);\n  };\n\n  const style = {\n    transform: CSS.Translate.toString(transform),\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  return (\n    <StyledContent\n      ref={setNodeRef}\n      style={style}\n      className={isOver ? 'over' : ''}\n      {...dragAttributes}\n      {...dragListeners}\n    >\n      <BlankContent\n        id={id}\n        disabled={disabled}\n        duplicates={duplicates}\n        choice={choice}\n        isOver={isOver}\n        dragItem={dragItem?.data?.current}\n        correct={correct}\n        onChange={onChange}\n        emptyResponseAreaWidth={emptyResponseAreaWidth}\n        emptyResponseAreaHeight={emptyResponseAreaHeight}\n        instanceId={instanceId}\n      />\n    </StyledContent>\n  );\n}\n\nDragDropBlank.defaultProps = {\n  emptyResponseAreaWidth: 0,\n  emptyResponseAreaHeight: 0,\n};\n\nDragDropBlank.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  disabled: PropTypes.bool,\n  duplicates: PropTypes.bool,\n  choice: PropTypes.object,\n  correct: PropTypes.bool,\n  onChange: PropTypes.func,\n  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  instanceId: PropTypes.string,\n};\n\nexport default DragDropBlank;\n"],"mappings":"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","ignoreList":[]}

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

@@ -15,7 +15,9 @@ 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 +37,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 +62,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,10 +161,18 @@ 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: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.rootRef) (0, _mathRendering.renderMath)(this.rootRef);
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       if (this.rootRef) (0, _mathRendering.renderMath)(this.rootRef);
@@ -184,7 +202,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 +231,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","_mathRendering","_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","componentDidMount","rootRef","renderMath","componentDidUpdate","render","_this2","_this$props2","markup","choicesPosition","layout","style","display","minWidth","getPositionDirection","DragProvider","onDragStart","handleDragStart","onDragEnd","handleDragEnd","collisionDetection","closestCenter","ref","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 { renderMath } from '@pie-lib/math-rendering';\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  componentDidMount() {\n    if (this.rootRef) renderMath(this.rootRef);\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\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.42.0-mui-update.0",
+  "version": "1.43.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.32.0-mui-update.0",
+    "@pie-lib/editable-html": "11.31.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.36.0-mui-update.0",
+    "@pie-lib/render-ui": "4.45.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": "56f71068deecd32adaab99fd03515f1133919d9d"
 }

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}`} 

package/src/components/blank.jsx

@@ -18,7 +18,7 @@ const StyledContent = styled('span')(() => ({
   minWidth: '200px',
   touchAction: 'none',
   overflow: 'hidden',
-  whiteSpace: 'nowrap', // Prevent line wrapping
+  whiteSpace: 'nowrap',
   '&.over': {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -84,17 +84,19 @@ const StyledChipLabel = styled('span')(() => ({
   },
 }));
 
-function BlankContent({ 
-  disabled, 
-  choice, 
-  isOver, 
-  dragItem, 
+function BlankContent({
+  disabled,
+  choice,
+  isOver,
+  isDragging,
+  dragItem,
   correct,
   emptyResponseAreaWidth,
   emptyResponseAreaHeight,
 }) {
   const rootRef = useRef(null);
   const spanRef = useRef(null);
+  const frozenRef = useRef(null); // to use during dragging to prevent flickering
   const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
 
   const handleImageLoad = () => {
@@ -140,16 +142,6 @@ function BlankContent({
     }
   };
 
-  const addDraggableFalseAttributes = (parent) => {
-    if (parent && parent.childNodes) {
-      parent.childNodes.forEach((elem) => {
-        if (elem instanceof Element || elem instanceof HTMLDocument) {
-          elem.setAttribute('draggable', false);
-        }
-      });
-    }
-  };
-
   const getRootDimensions = () => {
     // Handle potential non-numeric values
     const responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth))
@@ -183,56 +175,57 @@ function BlankContent({
   });
 
   useEffect(() => {
-    if (JSON.stringify(choice) !== JSON.stringify(choice)) {
-      if (!choice) {
-        setDimensions({ height: 0, width: 0 });
-        return;
-      }
-      handleElements();
+    if (!choice) {
+      setDimensions({ height: 0, width: 0 });
+      return;
     }
+    handleElements();
   }, [choice]);
 
+  useEffect(() => {
+    if (!isOver && !isDragging) {
+      frozenRef.current = {
+        width: rootRef.current.offsetWidth,
+        height: rootRef.current.offsetHeight,
+      };
+    }
+  }, [choice, isOver, isDragging]);
+
   const draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;
   const label = choice && choice.value;
+  const style = (isOver || isDragging)
+    ? {
+      width: frozenRef.current?.width,
+      height: frozenRef.current?.height,
+    }
+    : getRootDimensions();
 
   return (
     <StyledChip
       clickable={false}
-      disabled={true}
+      disabled={disabled}
       ref={rootRef}
       component="span"
       label={
         <React.Fragment>
           <StyledChipLabel
-            className={classnames({
+              ref={spanRef}
+              draggable={true}
+              className={classnames({
               over: isOver,
               hidden: draggedLabel,
             })}
-            ref={(ref) => {
-              if (ref) {
-                spanRef.current = ref;
-                ref.innerHTML = label || '';
-                addDraggableFalseAttributes(ref);
-              }
-            }}
-          >
-            {' '}
-          </StyledChipLabel>
+            dangerouslySetInnerHTML={{ __html: label || '' }}
+          />
           {draggedLabel && (
             <StyledChipLabel
+              draggable={true}
               className={classnames({
                 over: isOver,
                 dragged: true,
               })}
-              ref={(ref) => {
-                if (ref) {
-                  ref.innerHTML = draggedLabel || '';
-                  addDraggableFalseAttributes(ref);
-                }
-              }}
-            >
-              {' '}
-            </StyledChipLabel>
+              dangerouslySetInnerHTML={{ __html: draggedLabel || '' }}
+            />
           )}
         </React.Fragment>
       }
@@ -243,9 +236,7 @@ function BlankContent({
         incorrect: correct !== undefined && !correct,
       })}
       variant={disabled ? 'outlined' : undefined}
-      style={{
-        ...getRootDimensions(),
-      }}
+      style={style}
     />
   );
 }
@@ -270,16 +261,16 @@ BlankContent.propTypes = {
 };
 
 // New functional component using @dnd-kit hooks
-function DragDropBlank({ 
-  id, 
-  disabled, 
-  duplicates, 
-  choice, 
-  correct, 
-  onChange, 
-  emptyResponseAreaWidth, 
+function DragDropBlank({
+  id,
+  disabled,
+  duplicates,
+  choice,
+  correct,
+  onChange,
+  emptyResponseAreaWidth,
   emptyResponseAreaHeight,
-  instanceId 
+  instanceId
 }) {
   // Setup draggable functionality
   const {
@@ -326,7 +317,7 @@ function DragDropBlank({
   };
 
   return (
-    <StyledContent 
+    <StyledContent
       ref={setNodeRef}
       style={style}
       className={isOver ? 'over' : ''}

package/src/drag-in-the-blank.jsx

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
 import { DragProvider } from '@pie-lib/drag';
+import { DragOverlay, closestCenter } from '@dnd-kit/core';
+
 import Choices from './choices';
+import Choice from './choices/choice';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
@@ -19,6 +22,7 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       emptyResponseAreaWidth,
       emptyResponseAreaHeight,
       instanceId,
+      isDragging
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -44,12 +48,20 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
           onChange(newData);
         }}
         instanceId={instanceId}
+        isDragging={isDragging}
       />
     );
   }
 });
 
 export default class DragInTheBlank extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeDragItem: null,
+    };
+  }
+
   static propTypes = {
     markup: PropTypes.string,
     layout: PropTypes.object,
@@ -71,54 +83,74 @@ export default class DragInTheBlank extends React.Component {
     instanceId: 'drag-in-the-blank',
   };
 
+  handleDragStart = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        activeDragItem: active.data.current,
+      });
+    }
+  };
+
+  renderDragOverlay = () => {
+    const { activeDragItem } = this.state;
+    if (!activeDragItem) return null;
+
+    if (activeDragItem.type === 'MaskBlank') {
+      return (
+        <Choice
+          disabled={activeDragItem.disabled}
+          choice={activeDragItem.choice}
+          instanceId={activeDragItem.instanceId}
+        />
+      );
+    }
+
+    return null;
+  };
+
   handleDragEnd = (event) => {
-    console.log('Drag End Event:', event);
     const { active, over } = event;
     const { onChange, value } = this.props;
 
     if (!over || !active || !onChange) {
-      console.log('Early return - missing data:', { over: !!over, active: !!active, onChange: !!onChange });
       return;
     }
 
     const draggedData = active.data.current;
     const 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?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {
-      console.log('Valid drag/drop types');
       const draggedItem = draggedData;
       const 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);
-          const newValue = { ...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);
-          const newValue = { ...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) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      } else if (dropData.toChoiceBoard === true) {
+        // handle drop from blank to choice board (removal from blank)
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+      // handle drop from blank to blank (changing position)
+      else if (draggedItem.id !== targetId) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        delete newValue[draggedItem.id];
+        onChange(newValue);
       }
-    } else {
-      console.log('Invalid drag/drop types:', draggedData?.type, dropData?.accepts);
     }
+    this.setState({ activeDragItem: null });
   };
 
+  componentDidMount() {
+    if (this.rootRef) renderMath(this.rootRef);
+  }
+
   componentDidUpdate() {
     if (this.rootRef) renderMath(this.rootRef);
   }
@@ -172,7 +204,11 @@ export default class DragInTheBlank extends React.Component {
     const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };
 
     return (
-      <DragProvider onDragEnd={this.handleDragEnd}>
+      <DragProvider
+        onDragStart={this.handleDragStart}
+        onDragEnd={this.handleDragEnd}
+        collisionDetection={closestCenter}
+      >
         <div ref={(ref) => (this.rootRef = ref)} style={style}>
           <Choices
             choicePosition={choicePosition}
@@ -197,7 +233,11 @@ export default class DragInTheBlank extends React.Component {
             emptyResponseAreaWidth={emptyResponseAreaWidth}
             emptyResponseAreaHeight={emptyResponseAreaHeight}
             instanceId={instanceId}
+            isDragging={!!this.state.activeDragItem}
           />
+          <DragOverlay style={{ pointerEvents: "none" }}>
+            {this.renderDragOverlay()}
+          </DragOverlay>
         </div>
       </DragProvider>
     );