@pie-lib/editable-html 11.30.0-mui-update.0 → 11.31.0-mui-update.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.31.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.30.0-mui-update.0...@pie-lib/editable-html@11.31.0-mui-update.0) (2025-12-11)
+
+
+### Features
+
+* updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
+
+
+
+
+
 # [11.30.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.29.0-mui-update.0...@pie-lib/editable-html@11.30.0-mui-update.0) (2025-12-02)
 
 

package/lib/plugins/respArea/drag-in-the-blank/choice.js

@@ -12,14 +12,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _core = require("@dnd-kit/core");
-var _utilities = require("@dnd-kit/utilities");
 var _renderUi = require("@pie-lib/render-ui");
 var _mathRendering = require("@pie-lib/math-rendering");
 var _styles = require("@mui/material/styles");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("../icons");
+var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -51,7 +50,6 @@ function BlankContent(_ref2) {
     isOver = _ref2.isOver,
     dragItem = _ref2.dragItem,
     value = _ref2.value,
-    disabled = _ref2.disabled,
     externalStyle = _ref2.style;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -59,8 +57,11 @@ function BlankContent(_ref2) {
     setHoveredElementSize = _useState2[1];
   var elementRef = (0, _react.useRef)(null);
   var handleClick = function handleClick(event) {
-    if (elementRef.current) {
-      elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
+    if (!elementRef.current) return;
+    if (elementRef.current.contains(event.target)) {
+      elementRef.current.classList.add('selected');
+    } else {
+      elementRef.current.classList.remove('selected');
     }
   };
   (0, _react.useEffect)(function () {
@@ -85,7 +86,7 @@ function BlankContent(_ref2) {
       setHoveredElementSize(null);
     }
   }, [isOver, hoveredElementSize]);
-  var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
+  var label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || "\xA0";
   var finalLabel = isDragging ? "\xA0" : label;
   var hasGrip = finalLabel !== "\xA0";
   var isPreview = dragItem && isOver;
@@ -135,60 +136,100 @@ function DragDropChoice(_ref3) {
   var _dragItem$data;
   var value = _ref3.value,
     disabled = _ref3.disabled,
-    onChange = _ref3.onChange,
-    removeResponse = _ref3.removeResponse,
     instanceId = _ref3.instanceId,
-    targetId = _ref3.targetId,
-    duplicates = _ref3.duplicates,
+    children = _ref3.children,
     n = _ref3.n,
-    children = _ref3.children;
-  // Setup draggable functionality
+    nodeProps = _ref3.nodeProps,
+    opts = _ref3.opts;
   var _useDraggable = (0, _core.useDraggable)({
       id: "drag-".concat(n.key),
-      disabled: disabled || !value,
+      disabled: disabled || !(value !== null && value !== void 0 && value.value),
       data: {
-        id: targetId,
+        id: "drag-".concat(n.key),
         value: value,
         instanceId: instanceId,
-        fromChoice: true
+        nodeProps: nodeProps,
+        n: n,
+        opts: opts,
+        type: 'drag-in-the-blank-placed-choice',
+        fromChoice: !value,
+        onRemove: function onRemove(draggedData) {
+          return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
+        },
+        onDrop: function onDrop(draggedData, dropData) {
+          // check if we're dropping into a blank
+          var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
+          if (!isValidBlank) return;
+
+          // place into blank
+          (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
+          if (!opts.options.duplicates && draggedData.fromChoice) {
+            (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
+          }
+        }
       }
     }),
     dragAttributes = _useDraggable.attributes,
     dragListeners = _useDraggable.listeners,
     setDragNodeRef = _useDraggable.setNodeRef,
-    dragTransform = _useDraggable.transform,
     isDragging = _useDraggable.isDragging;
-
-  // Setup droppable functionality
   var _useDroppable = (0, _core.useDroppable)({
       id: "drop-".concat(n.key),
       data: {
-        accepts: ['drag-in-the-blank-choice'],
+        type: 'drag-in-the-blank-drop-choice',
+        accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
         instanceId: instanceId,
-        value: value
+        value: value,
+        id: "drop-".concat(n.key),
+        nodeProps: nodeProps,
+        n: n,
+        opts: opts,
+        onDrop: function onDrop(draggedData, dropData) {
+          // check if we're dropping into a blank
+          var isValidBlank = (dropData === null || dropData === void 0 ? void 0 : dropData.type) === "drag-in-the-blank-drop-choice";
+          if (!isValidBlank) return;
+
+          // if the dragged and dropped data are the same, do nothing
+          if (draggedData.value.id === dropData.value.id) return;
+          if (draggedData.type === 'drag-in-the-blank-choice') {
+            // place into blank
+            (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
+            if (!opts.options.duplicates && draggedData.fromChoice) {
+              (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
+            }
+            return;
+          }
+
+          // moving placed choice between blanks
+          if (draggedData.type === 'drag-in-the-blank-placed-choice') {
+            // clear target blank
+            (0, _utils.onRemoveResponse)(nodeProps, dropData.value);
+
+            // set new blank value
+            (0, _utils.onValueChange)(nodeProps, n, draggedData.value);
+
+            // clear original blank - slight delay to ensure state updates correctly
+            setTimeout(function () {
+              return (0, _utils.onRemoveResponse)(nodeProps, draggedData.value);
+            }, 10);
+          }
+        }
       }
     }),
     setDropNodeRef = _useDroppable.setNodeRef,
     isOver = _useDroppable.isOver,
     dragItem = _useDroppable.active;
-
-  // Combine refs for both drag and drop
   var setNodeRef = function setNodeRef(node) {
     setDragNodeRef(node);
     setDropNodeRef(node);
   };
-  var dragStyle = {
-    transform: _utilities.CSS.Translate.toString(dragTransform),
-    opacity: isDragging ? 0.5 : 1
-  };
   var dragContent = /*#__PURE__*/_react["default"].createElement(BlankContent, {
     n: n,
     isDragging: isDragging,
     isOver: isOver,
     dragItem: dragItem === null || dragItem === void 0 || (_dragItem$data = dragItem.data) === null || _dragItem$data === void 0 ? void 0 : _dragItem$data.current,
     value: value,
-    disabled: disabled,
-    style: dragStyle
+    disabled: disabled
   }, children);
   var dragEl = !value ? /*#__PURE__*/_react["default"].createElement("span", {
     ref: setDropNodeRef

package/lib/plugins/respArea/drag-in-the-blank/choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_isUndefined","_core","_utilities","_renderUi","_mathRendering","_styles","_classnames","_icons","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","StyledContent","styled","_ref","theme","border","concat","palette","primary","main","fontSize","minWidth","color","correct","error","primaryDark","BlankContent","_ref2","children","isDragging","isOver","dragItem","value","disabled","externalStyle","style","_useState","useState","_useState2","_slicedToArray2","hoveredElementSize","setHoveredElementSize","elementRef","useRef","handleClick","event","current","className","contains","target","useEffect","document","addEventListener","removeEventListener","renderMath","node","width","offsetWidth","height","offsetHeight","label","finalLabel","hasGrip","isPreview","createElement","ref","display","minHeight","background","defaults","BORDER_LIGHT","WHITE","BORDER_DARK","boxSizing","borderRadius","overflow","position","padding","undefined","key","contentEditable","GripIcon","top","left","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","func","bool","DragDropChoice","_ref3","_dragItem$data","onChange","removeResponse","instanceId","targetId","duplicates","_useDraggable","useDraggable","id","data","fromChoice","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","dragTransform","transform","_useDroppable","useDroppable","accepts","setDropNodeRef","active","dragStyle","CSS","Translate","toString","opacity","dragContent","dragEl","_extends2","content","classnames","string","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/choice.jsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport isUndefined from 'lodash/isUndefined';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\nimport classnames from 'classnames';\n\nimport { GripIcon } from '../icons';\n\nconst StyledContent = styled('span')(({ theme }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n  '&.chip': {\n    minWidth: '90px',\n  },\n  '&.correct': {\n    border: `solid 1px ${color.correct()}`,\n  },\n  '&.incorrect': {\n    border: `solid 1px ${theme.palette.error.main}`,\n  },\n  '&.selected': {\n    border: `2px solid ${color.primaryDark()} !important`,\n  },\n}));\n\nexport function BlankContent({ \n  n, \n  children, \n  isDragging, \n  isOver, \n  dragItem, \n  value,\n  disabled,\n  style: externalStyle\n}) {\n  const [hoveredElementSize, setHoveredElementSize] = useState(null);\n  const elementRef = useRef(null);\n\n  const handleClick = (event) => {\n    if (elementRef.current) {\n      elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (elementRef.current && typeof renderMath === 'function') {\n      renderMath(elementRef.current);\n    }\n  });\n\n  useEffect(() => {\n    if (isOver && elementRef.current && !hoveredElementSize) {\n      const node = elementRef.current;\n      setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });\n    } else if (!isOver && hoveredElementSize) {\n      setHoveredElementSize(null);\n    }\n  }, [isOver, hoveredElementSize]);\n\n  const label = dragItem && isOver ? dragItem.value.value : value.value || '\\u00A0';\n  const finalLabel = isDragging ? '\\u00A0' : label;\n  const hasGrip = finalLabel !== '\\u00A0';\n  const isPreview = dragItem && isOver;\n\n  return (\n    <div\n      ref={elementRef}\n      style={{\n        display: 'inline-flex',\n        minWidth: '178px',\n        minHeight: '36px',\n        background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,\n        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,\n        boxSizing: 'border-box',\n        borderRadius: '3px',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: '8px 8px 8px 35px',\n        width: hoveredElementSize ? hoveredElementSize.width : undefined,\n        height: hoveredElementSize ? hoveredElementSize.height : undefined,\n        ...externalStyle,\n      }}\n      data-key={n.key}\n      contentEditable={false}\n    >\n      {hasGrip && (\n        <GripIcon\n          style={{\n            position: 'absolute',\n            top: '6px',\n            left: '15px',\n            color: '#9B9B9B',\n          }}\n          contentEditable={false}\n        />\n      )}\n      <span\n        dangerouslySetInnerHTML={{\n          __html: finalLabel,\n        }}\n      />\n      {children}\n    </div>\n  );\n}\n\nBlankContent.propTypes = {\n  n: PropTypes.object,\n  children: PropTypes.func,\n  isDragging: PropTypes.bool,\n  isOver: PropTypes.bool,\n  dragItem: PropTypes.object,\n  value: PropTypes.object,\n  disabled: PropTypes.bool,\n  style: PropTypes.object,\n};\n\nfunction DragDropChoice({ \n  value, \n  disabled, \n  onChange, \n  removeResponse, \n  instanceId, \n  targetId, \n  duplicates,\n  n,\n  children \n}) {\n  // Setup draggable functionality\n  const {\n    attributes: dragAttributes,\n    listeners: dragListeners,\n    setNodeRef: setDragNodeRef,\n    transform: dragTransform,\n    isDragging,\n  } = useDraggable({\n    id: `drag-${n.key}`,\n    disabled: disabled || !value,\n    data: {\n      id: targetId,\n      value: value,\n      instanceId: instanceId,\n      fromChoice: true,\n    },\n  });\n\n  // Setup droppable functionality\n  const {\n    setNodeRef: setDropNodeRef,\n    isOver,\n    active: dragItem,\n  } = useDroppable({\n    id: `drop-${n.key}`,\n    data: {\n      accepts: ['drag-in-the-blank-choice'],\n      instanceId: instanceId,\n      value: value,\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 dragStyle = {\n    transform: CSS.Translate.toString(dragTransform),\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  const dragContent = (\n    <BlankContent\n      n={n}\n      isDragging={isDragging}\n      isOver={isOver}\n      dragItem={dragItem?.data?.current}\n      value={value}\n      disabled={disabled}\n      style={dragStyle}\n    >\n      {children}\n    </BlankContent>\n  );\n\n  const dragEl = !value ? (\n    <span ref={setDropNodeRef}>{dragContent}</span>\n  ) : (\n    <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>\n      {dragContent}\n    </span>\n  );\n\n  const content = (\n    <StyledContent className={classnames(isOver && 'over')}>\n      {dragEl}\n    </StyledContent>\n  );\n\n  return content;\n}\n\nDragDropChoice.propTypes = {\n  value: PropTypes.object,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  removeResponse: PropTypes.func,\n  instanceId: PropTypes.string,\n  targetId: PropTypes.string,\n  duplicates: PropTypes.bool,\n  n: PropTypes.object,\n  children: PropTypes.node,\n};\n\nexport default DragDropChoice;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_core","_renderUi","_mathRendering","_styles","_icons","_utils","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","StyledContent","styled","_ref","theme","border","concat","palette","primary","main","fontSize","minWidth","color","correct","error","primaryDark","BlankContent","_ref2","children","isDragging","isOver","dragItem","value","externalStyle","style","_useState","useState","_useState2","_slicedToArray2","hoveredElementSize","setHoveredElementSize","elementRef","useRef","handleClick","event","current","contains","target","classList","add","remove","useEffect","document","addEventListener","removeEventListener","renderMath","node","width","offsetWidth","height","offsetHeight","label","finalLabel","hasGrip","isPreview","createElement","ref","display","minHeight","background","defaults","BORDER_LIGHT","WHITE","BORDER_DARK","boxSizing","borderRadius","overflow","position","padding","undefined","key","contentEditable","GripIcon","top","left","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","func","bool","disabled","DragDropChoice","_ref3","_dragItem$data","instanceId","nodeProps","opts","_useDraggable","useDraggable","id","data","type","fromChoice","onRemove","draggedData","onRemoveResponse","onDrop","dropData","isValidBlank","onValueChange","options","duplicates","dragAttributes","attributes","dragListeners","listeners","setDragNodeRef","setNodeRef","_useDroppable","useDroppable","accepts","setTimeout","setDropNodeRef","active","dragContent","dragEl","_extends2","content","className","classnames","onChange","removeResponse","string","targetId","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/choice.jsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\n\nimport { GripIcon } from '../icons';\nimport { onValueChange, onRemoveResponse } from './utils';\n\nconst StyledContent = styled('span')(({ theme }) => ({\n  border: `solid 0px ${theme.palette.primary.main}`,\n  '& mjx-frac': {\n    fontSize: '120% !important',\n  },\n  '&.chip': {\n    minWidth: '90px',\n  },\n  '&.correct': {\n    border: `solid 1px ${color.correct()}`,\n  },\n  '&.incorrect': {\n    border: `solid 1px ${theme.palette.error.main}`,\n  },\n  '&.selected': {\n    border: `2px solid ${color.primaryDark()} !important`,\n  },\n}));\n\nexport function BlankContent({\n  n,\n  children,\n  isDragging,\n  isOver,\n  dragItem,\n  value,\n  style: externalStyle\n}) {\n  const [hoveredElementSize, setHoveredElementSize] = useState(null);\n  const elementRef = useRef(null);\n\n  const handleClick = (event) => {\n    if (!elementRef.current) return;\n\n    if (elementRef.current.contains(event.target)) {\n      elementRef.current.classList.add('selected');\n    } else {\n      elementRef.current.classList.remove('selected');\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('click', handleClick);\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (elementRef.current && typeof renderMath === 'function') {\n      renderMath(elementRef.current);\n    }\n  });\n\n  useEffect(() => {\n    if (isOver && elementRef.current && !hoveredElementSize) {\n      const node = elementRef.current;\n      setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });\n    } else if (!isOver && hoveredElementSize) {\n      setHoveredElementSize(null);\n    }\n  }, [isOver, hoveredElementSize]);\n\n  const label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || '\\u00A0';\n  const finalLabel = isDragging ? '\\u00A0' : label;\n  const hasGrip = finalLabel !== '\\u00A0';\n  const isPreview = dragItem && isOver;\n\n  return (\n    <div\n      ref={elementRef}\n      style={{\n        display: 'inline-flex',\n        minWidth: '178px',\n        minHeight: '36px',\n        background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,\n        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,\n        boxSizing: 'border-box',\n        borderRadius: '3px',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: '8px 8px 8px 35px',\n        width: hoveredElementSize ? hoveredElementSize.width : undefined,\n        height: hoveredElementSize ? hoveredElementSize.height : undefined,\n        ...externalStyle,\n      }}\n      data-key={n.key}\n      contentEditable={false}\n    >\n      {hasGrip && (\n        <GripIcon\n          style={{\n            position: 'absolute',\n            top: '6px',\n            left: '15px',\n            color: '#9B9B9B',\n          }}\n          contentEditable={false}\n        />\n      )}\n      <span\n        dangerouslySetInnerHTML={{\n          __html: finalLabel,\n        }}\n      />\n      {children}\n    </div>\n  );\n}\n\nBlankContent.propTypes = {\n  n: PropTypes.object,\n  children: PropTypes.func,\n  isDragging: PropTypes.bool,\n  isOver: PropTypes.bool,\n  dragItem: PropTypes.object,\n  value: PropTypes.object,\n  disabled: PropTypes.bool,\n  style: PropTypes.object,\n};\n\nfunction DragDropChoice({\n  value,\n  disabled,\n  instanceId,\n  children,\n  n,\n  nodeProps,\n  opts,\n}) {\n  const {\n    attributes: dragAttributes,\n    listeners: dragListeners,\n    setNodeRef: setDragNodeRef,\n    isDragging,\n  } = useDraggable({\n    id: `drag-${n.key}`,\n    disabled: disabled || !value?.value,\n    data: {\n      id: `drag-${n.key}`,\n      value,\n      instanceId,\n      nodeProps,\n      n,\n      opts,\n      type: 'drag-in-the-blank-placed-choice',\n      fromChoice: !value,\n      onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),\n      onDrop: (draggedData, dropData) => {\n        // check if we're dropping into a blank\n        const isValidBlank =\n          dropData?.type === \"drag-in-the-blank-drop-choice\";\n\n        if (!isValidBlank) return;\n\n        // place into blank\n        onValueChange(nodeProps, n, draggedData.value);\n\n        if (!opts.options.duplicates && draggedData.fromChoice) {\n          onRemoveResponse(nodeProps, draggedData.value);\n        }\n      }\n    }\n  });\n\n  const {\n    setNodeRef: setDropNodeRef,\n    isOver,\n    active: dragItem,\n  } = useDroppable({\n    id: `drop-${n.key}`,\n    data: {\n      type: 'drag-in-the-blank-drop-choice',\n      accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],\n      instanceId: instanceId,\n      value: value,\n      id: `drop-${n.key}`,\n      nodeProps,\n      n,\n      opts,\n      onDrop: (draggedData, dropData) => {\n        // check if we're dropping into a blank\n        const isValidBlank =\n          dropData?.type === \"drag-in-the-blank-drop-choice\";\n\n        if (!isValidBlank) return;\n\n        // if the dragged and dropped data are the same, do nothing\n        if (draggedData.value.id === dropData.value.id) return;\n\n        if (draggedData.type === 'drag-in-the-blank-choice') {\n          // place into blank\n          onValueChange(nodeProps, n, draggedData.value);\n\n          if (!opts.options.duplicates && draggedData.fromChoice) {\n            onRemoveResponse(nodeProps, draggedData.value);\n          }\n          return;\n        }\n\n        // moving placed choice between blanks\n        if (draggedData.type === 'drag-in-the-blank-placed-choice') {\n          // clear target blank\n          onRemoveResponse(nodeProps, dropData.value);\n\n          // set new blank value\n          onValueChange(nodeProps, n, draggedData.value);\n\n          // clear original blank - slight delay to ensure state updates correctly\n          setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);\n        }\n      }\n    }\n  });\n\n  const setNodeRef = (node) => {\n    setDragNodeRef(node);\n    setDropNodeRef(node);\n  };\n\n  const dragContent = (\n    <BlankContent\n      n={n}\n      isDragging={isDragging}\n      isOver={isOver}\n      dragItem={dragItem?.data?.current}\n      value={value}\n      disabled={disabled}\n    >\n      {children}\n    </BlankContent>\n  );\n\n  const dragEl = !value ? (\n    <span ref={setDropNodeRef}>{dragContent}</span>\n  ) : (\n    <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>\n      {dragContent}\n    </span>\n  );\n\n  const content = (\n    <StyledContent className={classnames(isOver && 'over')}>\n      {dragEl}\n    </StyledContent>\n  );\n\n  return content;\n}\n\nDragDropChoice.propTypes = {\n  value: PropTypes.object,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  removeResponse: PropTypes.func,\n  instanceId: PropTypes.string,\n  targetId: PropTypes.string,\n  duplicates: PropTypes.bool,\n  n: PropTypes.object,\n  children: PropTypes.node,\n};\n\nexport default DragDropChoice;\n"],"mappings":"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","ignoreList":[]}

package/lib/plugins/respArea/drag-in-the-blank/index.js

@@ -4,75 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.onValueChange = exports.onRemoveResponse = exports["default"] = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _drag = require("@pie-lib/drag");
 var _choice = _interopRequireDefault(require("./choice"));
-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; }
-var onValueChange = exports.onValueChange = function onValueChange(nodeProps, n, value) {
-  var val = nodeProps.editor.value;
-  var change = val.change();
-  change.setNodeByKey(n.key, {
-    data: _objectSpread(_objectSpread({}, value), {}, {
-      index: n.data.get('index')
-    })
-  });
-  nodeProps.editor.props.onChange(change, function () {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-var onRemoveResponse = exports.onRemoveResponse = function onRemoveResponse(nodeProps, value) {
-  var val = nodeProps.editor.value;
-  var change = val.change();
-  var dragInTheBlank = val.document.findDescendant(function (n) {
-    return n.data && n.data.get('index') === value.index;
-  });
-  change.setNodeByKey(dragInTheBlank.key, {
-    data: {
-      index: dragInTheBlank.data.get('index')
-    }
-  });
-  nodeProps.editor.props.onChange(change, function () {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-var DragDrop = function DragDrop(props) {
+var _utils = require("./utils");
+var DragDrop = function DragDrop(_ref) {
   var _nodeProps$editor;
-  var attributes = props.attributes,
-    data = props.data,
-    n = props.n,
-    nodeProps = props.nodeProps,
-    opts = props.opts;
+  var attributes = _ref.attributes,
+    data = _ref.data,
+    n = _ref.n,
+    nodeProps = _ref.nodeProps,
+    opts = _ref.opts;
   var inTable = data.inTable;
-  var handleDragEnd = function handleDragEnd(event) {
-    var active = event.active,
-      over = event.over;
-    if (!over || !active) return;
-    var draggedData = active.data.current;
-    var dropData = over.data.current;
-
-    // Check if this is a valid drop for drag-in-the-blank
-    if (draggedData && dropData && dropData.instanceId === draggedData.instanceId && over.id.startsWith('drop-')) {
-      var _draggedData$value;
-      // Handle the drop
-      var shouldDrop = !((_draggedData$value = draggedData.value) !== null && _draggedData$value !== void 0 && _draggedData$value.index) || !data.index || draggedData.value.index !== data.index;
-      if (shouldDrop) {
-        onValueChange(nodeProps, n, draggedData.value);
-      }
-
-      // Remove from source if not duplicates
-      if (!opts.options.duplicates && draggedData.fromChoice) {
-        onRemoveResponse(nodeProps, draggedData.value);
-      }
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(_drag.DragProvider, {
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
+  return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
     style: {
       display: 'inline-flex',
       minHeight: '50px',
@@ -84,17 +30,19 @@ var DragDrop = function DragDrop(props) {
   }), /*#__PURE__*/_react["default"].createElement(_choice["default"], {
     n: n,
     dragKey: n.key,
-    targetId: "0",
+    targetId: "drop-".concat(n.key),
     value: data,
     duplicates: opts.options.duplicates,
     onChange: function onChange(value) {
-      return onValueChange(nodeProps, n, value);
+      return (0, _utils.onValueChange)(nodeProps, n, value);
     },
     removeResponse: function removeResponse(value) {
-      return onRemoveResponse(nodeProps, value);
+      return (0, _utils.onRemoveResponse)(nodeProps, value);
     },
-    instanceId: ((_nodeProps$editor = nodeProps.editor) === null || _nodeProps$editor === void 0 || (_nodeProps$editor = _nodeProps$editor.props) === null || _nodeProps$editor === void 0 ? void 0 : _nodeProps$editor.instanceId) || 'default'
-  }, nodeProps.children)));
+    instanceId: ((_nodeProps$editor = nodeProps.editor) === null || _nodeProps$editor === void 0 || (_nodeProps$editor = _nodeProps$editor.props) === null || _nodeProps$editor === void 0 ? void 0 : _nodeProps$editor.instanceId) || 'default',
+    nodeProps: nodeProps,
+    opts: opts
+  }, nodeProps.children));
 };
 DragDrop.propTypes = {
   attributes: _propTypes["default"].object,

package/lib/plugins/respArea/drag-in-the-blank/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_drag","_choice","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","onValueChange","exports","nodeProps","n","value","val","editor","change","setNodeByKey","key","data","index","get","props","onChange","onEditingDone","onRemoveResponse","dragInTheBlank","document","findDescendant","DragDrop","_nodeProps$editor","attributes","opts","inTable","handleDragEnd","event","active","over","draggedData","current","dropData","instanceId","id","startsWith","_draggedData$value","shouldDrop","options","duplicates","fromChoice","createElement","DragProvider","onDragEnd","_extends2","style","display","minHeight","minWidth","position","margin","cursor","dragKey","targetId","removeResponse","children","propTypes","PropTypes","object","_default"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragProvider } from '@pie-lib/drag';\nimport DragDropTile from './choice';\n\nexport const onValueChange = (nodeProps, n, value) => {\n  const val = nodeProps.editor.value;\n  const change = val.change();\n\n  change.setNodeByKey(n.key, {\n    data: {\n      ...value,\n      index: n.data.get('index'),\n    },\n  });\n\n  nodeProps.editor.props.onChange(change, () => {\n    nodeProps.editor.props.onEditingDone();\n  });\n};\n\nexport const onRemoveResponse = (nodeProps, value) => {\n  const val = nodeProps.editor.value;\n  const change = val.change();\n  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);\n\n  change.setNodeByKey(dragInTheBlank.key, {\n    data: {\n      index: dragInTheBlank.data.get('index'),\n    },\n  });\n\n  nodeProps.editor.props.onChange(change, () => {\n    nodeProps.editor.props.onEditingDone();\n  });\n};\n\nconst DragDrop = (props) => {\n  const { attributes, data, n, nodeProps, opts } = props;\n  const { inTable } = data;\n\n  const handleDragEnd = (event) => {\n    const { active, over } = event;\n    \n    if (!over || !active) return;\n\n    const draggedData = active.data.current;\n    const dropData = over.data.current;\n\n    // Check if this is a valid drop for drag-in-the-blank\n    if (\n      draggedData &&\n      dropData &&\n      dropData.instanceId === draggedData.instanceId &&\n      over.id.startsWith('drop-')\n    ) {\n      // Handle the drop\n      const shouldDrop =\n        !draggedData.value?.index ||\n        !data.index ||\n        draggedData.value.index !== data.index;\n\n      if (shouldDrop) {\n        onValueChange(nodeProps, n, draggedData.value);\n      }\n\n      // Remove from source if not duplicates\n      if (!opts.options.duplicates && draggedData.fromChoice) {\n        onRemoveResponse(nodeProps, draggedData.value);\n      }\n    }\n  };\n\n  return (\n    <DragProvider onDragEnd={handleDragEnd}>\n      <span\n        {...attributes}\n        style={{\n          display: 'inline-flex',\n          minHeight: '50px',\n          minWidth: '178px',\n          position: 'relative',\n          margin: inTable ? '10px' : '0 10px',\n          cursor: 'pointer',\n        }}\n      >\n        <DragDropTile\n          n={n}\n          dragKey={n.key}\n          targetId=\"0\"\n          value={data}\n          duplicates={opts.options.duplicates}\n          onChange={(value) => onValueChange(nodeProps, n, value)}\n          removeResponse={(value) => onRemoveResponse(nodeProps, value)}\n          instanceId={nodeProps.editor?.props?.instanceId || 'default'}\n        >\n          {nodeProps.children}\n        </DragDropTile>\n      </span>\n    </DragProvider>\n  );\n};\n\nDragDrop.propTypes = {\n  attributes: PropTypes.object,\n  data: PropTypes.object,\n  n: PropTypes.object,\n  nodeProps: PropTypes.object,\n  opts: PropTypes.object,\n};\n\nexport default DragDrop;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_choice","_utils","DragDrop","_ref","_nodeProps$editor","attributes","data","n","nodeProps","opts","inTable","createElement","_extends2","style","display","minHeight","minWidth","position","margin","cursor","dragKey","key","targetId","concat","value","duplicates","options","onChange","onValueChange","removeResponse","onRemoveResponse","instanceId","editor","props","children","propTypes","PropTypes","object","_default","exports"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport DragDropTile from './choice';\nimport { onValueChange, onRemoveResponse } from './utils';\n\nconst DragDrop = ({ attributes, data, n, nodeProps, opts }) => {\n  const { inTable } = data;\n\n  return (\n      <span\n        {...attributes}\n        style={{\n          display: 'inline-flex',\n          minHeight: '50px',\n          minWidth: '178px',\n          position: 'relative',\n          margin: inTable ? '10px' : '0 10px',\n          cursor: 'pointer',\n        }}\n      >\n        <DragDropTile\n          n={n}\n          dragKey={n.key}\n          targetId={`drop-${n.key}`}\n          value={data}\n          duplicates={opts.options.duplicates}\n          onChange={(value) => onValueChange(nodeProps, n, value)}\n          removeResponse={(value) => onRemoveResponse(nodeProps, value)}\n          instanceId={nodeProps.editor?.props?.instanceId || 'default'}\n          nodeProps={nodeProps}\n          opts={opts}\n        >\n          {nodeProps.children}\n        </DragDropTile>\n      </span>\n  );\n};\n\nDragDrop.propTypes = {\n  attributes: PropTypes.object,\n  data: PropTypes.object,\n  n: PropTypes.object,\n  nodeProps: PropTypes.object,\n  opts: PropTypes.object,\n};\n\nexport default DragDrop;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAMI,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAAiD;EAAA,IAAAC,iBAAA;EAAA,IAA3CC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,CAAC,GAAAJ,IAAA,CAADI,CAAC;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,IAAI,GAAAN,IAAA,CAAJM,IAAI;EACtD,IAAQC,OAAO,GAAKJ,IAAI,CAAhBI,OAAO;EAEf,oBACId,MAAA,YAAAe,aAAA,aAAAC,SAAA,iBACMP,UAAU;IACdQ,KAAK,EAAE;MACLC,OAAO,EAAE,aAAa;MACtBC,SAAS,EAAE,MAAM;MACjBC,QAAQ,EAAE,OAAO;MACjBC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAER,OAAO,GAAG,MAAM,GAAG,QAAQ;MACnCS,MAAM,EAAE;IACV;EAAE,iBAEFvB,MAAA,YAAAe,aAAA,CAACX,OAAA,WAAY;IACXO,CAAC,EAAEA,CAAE;IACLa,OAAO,EAAEb,CAAC,CAACc,GAAI;IACfC,QAAQ,UAAAC,MAAA,CAAUhB,CAAC,CAACc,GAAG,CAAG;IAC1BG,KAAK,EAAElB,IAAK;IACZmB,UAAU,EAAEhB,IAAI,CAACiB,OAAO,CAACD,UAAW;IACpCE,QAAQ,EAAE,SAAVA,QAAQA,CAAGH,KAAK;MAAA,OAAK,IAAAI,oBAAa,EAACpB,SAAS,EAAED,CAAC,EAAEiB,KAAK,CAAC;IAAA,CAAC;IACxDK,cAAc,EAAE,SAAhBA,cAAcA,CAAGL,KAAK;MAAA,OAAK,IAAAM,uBAAgB,EAACtB,SAAS,EAAEgB,KAAK,CAAC;IAAA,CAAC;IAC9DO,UAAU,EAAE,EAAA3B,iBAAA,GAAAI,SAAS,CAACwB,MAAM,cAAA5B,iBAAA,gBAAAA,iBAAA,GAAhBA,iBAAA,CAAkB6B,KAAK,cAAA7B,iBAAA,uBAAvBA,iBAAA,CAAyB2B,UAAU,KAAI,SAAU;IAC7DvB,SAAS,EAAEA,SAAU;IACrBC,IAAI,EAAEA;EAAK,GAEVD,SAAS,CAAC0B,QACC,CACV,CAAC;AAEb,CAAC;AAEDhC,QAAQ,CAACiC,SAAS,GAAG;EACnB9B,UAAU,EAAE+B,qBAAS,CAACC,MAAM;EAC5B/B,IAAI,EAAE8B,qBAAS,CAACC,MAAM;EACtB9B,CAAC,EAAE6B,qBAAS,CAACC,MAAM;EACnB7B,SAAS,EAAE4B,qBAAS,CAACC,MAAM;EAC3B5B,IAAI,EAAE2B,qBAAS,CAACC;AAClB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEarC,QAAQ","ignoreList":[]}

package/lib/plugins/respArea/drag-in-the-blank/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onValueChange = exports.onRemoveResponse = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+var onRemoveResponse = exports.onRemoveResponse = function onRemoveResponse(nodeProps, value) {
+  var val = nodeProps.editor.value;
+  var change = val.change();
+  var dragInTheBlank = val.document.findDescendant(function (n) {
+    return n.data && n.data.get('index') === value.index;
+  });
+  change.setNodeByKey(dragInTheBlank.key, {
+    data: {
+      index: dragInTheBlank.data.get('index')
+    }
+  });
+  nodeProps.editor.props.onChange(change, function () {
+    nodeProps.editor.props.onEditingDone();
+  });
+};
+var onValueChange = exports.onValueChange = function onValueChange(nodeProps, n, value) {
+  var val = nodeProps.editor.value;
+  var change = val.change();
+  change.setNodeByKey(n.key, {
+    data: _objectSpread(_objectSpread({}, value), {}, {
+      index: n.data.get('index')
+    })
+  });
+  nodeProps.editor.props.onChange(change, function () {
+    nodeProps.editor.props.onEditingDone();
+  });
+};
+//# sourceMappingURL=utils.js.map

package/lib/plugins/respArea/drag-in-the-blank/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["onRemoveResponse","exports","nodeProps","value","val","editor","change","dragInTheBlank","document","findDescendant","n","data","get","index","setNodeByKey","key","props","onChange","onEditingDone","onValueChange","_objectSpread"],"sources":["../../../../src/plugins/respArea/drag-in-the-blank/utils.js"],"sourcesContent":["export const onRemoveResponse = (nodeProps, value) => {\n    const val = nodeProps.editor.value;\n    const change = val.change();\n    const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);\n    change.setNodeByKey(dragInTheBlank.key, { data: { index: dragInTheBlank.data.get('index'), }, });\n    nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });\n};\n\nexport const onValueChange = (nodeProps, n, value) => {\n    const val = nodeProps.editor.value;\n    const change = val.change();\n    change.setNodeByKey(n.key, { data: { ...value, index: n.data.get('index'), }, });\n    nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });\n};"],"mappings":";;;;;;;;;;AAAO,IAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAIE,SAAS,EAAEC,KAAK,EAAK;EAClD,IAAMC,GAAG,GAAGF,SAAS,CAACG,MAAM,CAACF,KAAK;EAClC,IAAMG,MAAM,GAAGF,GAAG,CAACE,MAAM,CAAC,CAAC;EAC3B,IAAMC,cAAc,GAAGH,GAAG,CAACI,QAAQ,CAACC,cAAc,CAAC,UAACC,CAAC;IAAA,OAAKA,CAAC,CAACC,IAAI,IAAID,CAAC,CAACC,IAAI,CAACC,GAAG,CAAC,OAAO,CAAC,KAAKT,KAAK,CAACU,KAAK;EAAA,EAAC;EACxGP,MAAM,CAACQ,YAAY,CAACP,cAAc,CAACQ,GAAG,EAAE;IAAEJ,IAAI,EAAE;MAAEE,KAAK,EAAEN,cAAc,CAACI,IAAI,CAACC,GAAG,CAAC,OAAO;IAAG;EAAG,CAAC,CAAC;EAChGV,SAAS,CAACG,MAAM,CAACW,KAAK,CAACC,QAAQ,CAACX,MAAM,EAAE,YAAM;IAAEJ,SAAS,CAACG,MAAM,CAACW,KAAK,CAACE,aAAa,CAAC,CAAC;EAAE,CAAC,CAAC;AAC9F,CAAC;AAEM,IAAMC,aAAa,GAAAlB,OAAA,CAAAkB,aAAA,GAAG,SAAhBA,aAAaA,CAAIjB,SAAS,EAAEQ,CAAC,EAAEP,KAAK,EAAK;EAClD,IAAMC,GAAG,GAAGF,SAAS,CAACG,MAAM,CAACF,KAAK;EAClC,IAAMG,MAAM,GAAGF,GAAG,CAACE,MAAM,CAAC,CAAC;EAC3BA,MAAM,CAACQ,YAAY,CAACJ,CAAC,CAACK,GAAG,EAAE;IAAEJ,IAAI,EAAAS,aAAA,CAAAA,aAAA,KAAOjB,KAAK;MAAEU,KAAK,EAAEH,CAAC,CAACC,IAAI,CAACC,GAAG,CAAC,OAAO;IAAC;EAAK,CAAC,CAAC;EAChFV,SAAS,CAACG,MAAM,CAACW,KAAK,CAACC,QAAQ,CAACX,MAAM,EAAE,YAAM;IAAEJ,SAAS,CAACG,MAAM,CAACW,KAAK,CAACE,aAAa,CAAC,CAAC;EAAE,CAAC,CAAC;AAC9F,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "11.30.0-mui-update.0",
+  "version": "11.31.0-mui-update.0",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -8,16 +8,17 @@
   "author": "pie-framework developers",
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/react": "^11.14.0",
     "@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/math-input": "6.40.0-mui-update.0",
-    "@pie-lib/math-rendering": "3.35.0-mui-update.0",
-    "@pie-lib/math-toolbar": "1.40.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/math-input": "6.41.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.36.0-mui-update.0",
+    "@pie-lib/math-toolbar": "1.41.0-mui-update.0",
+    "@pie-lib/render-ui": "4.45.0-mui-update.0",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -51,6 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "23a7cb8864b947778ac7e6dffdc6fa4a74af5927",
+  "gitHead": "56f71068deecd32adaab99fd03515f1133919d9d",
   "scripts": {}
 }

package/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -1,14 +1,13 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
+import classnames from 'classnames';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
 import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 import { styled } from '@mui/material/styles';
-import classnames from 'classnames';
 
 import { GripIcon } from '../icons';
+import { onValueChange, onRemoveResponse } from './utils';
 
 const StyledContent = styled('span')(({ theme }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
@@ -29,22 +28,25 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({ 
-  n, 
-  children, 
-  isDragging, 
-  isOver, 
-  dragItem, 
+export function BlankContent({
+  n,
+  children,
+  isDragging,
+  isOver,
+  dragItem,
   value,
-  disabled,
   style: externalStyle
 }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
   const handleClick = (event) => {
-    if (elementRef.current) {
-      elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
+    if (!elementRef.current) return;
+
+    if (elementRef.current.contains(event.target)) {
+      elementRef.current.classList.add('selected');
+    } else {
+      elementRef.current.classList.remove('selected');
     }
   };
 
@@ -70,7 +72,7 @@ export function BlankContent({
     }
   }, [isOver, hoveredElementSize]);
 
-  const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
+  const label = dragItem && dragItem.value && isOver ? dragItem.value.value : value.value || '\u00A0';
   const finalLabel = isDragging ? '\u00A0' : label;
   const hasGrip = finalLabel !== '\u00A0';
   const isPreview = dragItem && isOver;
@@ -128,36 +130,50 @@ BlankContent.propTypes = {
   style: PropTypes.object,
 };
 
-function DragDropChoice({ 
-  value, 
-  disabled, 
-  onChange, 
-  removeResponse, 
-  instanceId, 
-  targetId, 
-  duplicates,
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
   n,
-  children 
+  nodeProps,
+  opts,
 }) {
-  // Setup draggable functionality
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
     setNodeRef: setDragNodeRef,
-    transform: dragTransform,
     isDragging,
   } = useDraggable({
     id: `drag-${n.key}`,
-    disabled: disabled || !value,
+    disabled: disabled || !value?.value,
     data: {
-      id: targetId,
-      value: value,
-      instanceId: instanceId,
-      fromChoice: true,
-    },
+      id: `drag-${n.key}`,
+      value,
+      instanceId,
+      nodeProps,
+      n,
+      opts,
+      type: 'drag-in-the-blank-placed-choice',
+      fromChoice: !value,
+      onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank =
+          dropData?.type === "drag-in-the-blank-drop-choice";
+
+        if (!isValidBlank) return;
+
+        // place into blank
+        onValueChange(nodeProps, n, draggedData.value);
+
+        if (!opts.options.duplicates && draggedData.fromChoice) {
+          onRemoveResponse(nodeProps, draggedData.value);
+        }
+      }
+    }
   });
 
-  // Setup droppable functionality
   const {
     setNodeRef: setDropNodeRef,
     isOver,
@@ -165,23 +181,54 @@ function DragDropChoice({
   } = useDroppable({
     id: `drop-${n.key}`,
     data: {
-      accepts: ['drag-in-the-blank-choice'],
+      type: 'drag-in-the-blank-drop-choice',
+      accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
       instanceId: instanceId,
       value: value,
-    },
+      id: `drop-${n.key}`,
+      nodeProps,
+      n,
+      opts,
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank =
+          dropData?.type === "drag-in-the-blank-drop-choice";
+
+        if (!isValidBlank) return;
+
+        // if the dragged and dropped data are the same, do nothing
+        if (draggedData.value.id === dropData.value.id) return;
+
+        if (draggedData.type === 'drag-in-the-blank-choice') {
+          // place into blank
+          onValueChange(nodeProps, n, draggedData.value);
+
+          if (!opts.options.duplicates && draggedData.fromChoice) {
+            onRemoveResponse(nodeProps, draggedData.value);
+          }
+          return;
+        }
+
+        // moving placed choice between blanks
+        if (draggedData.type === 'drag-in-the-blank-placed-choice') {
+          // clear target blank
+          onRemoveResponse(nodeProps, dropData.value);
+
+          // set new blank value
+          onValueChange(nodeProps, n, draggedData.value);
+
+          // clear original blank - slight delay to ensure state updates correctly
+          setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);
+        }
+      }
+    }
   });
 
-  // Combine refs for both drag and drop
   const setNodeRef = (node) => {
     setDragNodeRef(node);
     setDropNodeRef(node);
   };
 
-  const dragStyle = {
-    transform: CSS.Translate.toString(dragTransform),
-    opacity: isDragging ? 0.5 : 1,
-  };
-
   const dragContent = (
     <BlankContent
       n={n}
@@ -190,7 +237,6 @@ function DragDropChoice({
       dragItem={dragItem?.data?.current}
       value={value}
       disabled={disabled}
-      style={dragStyle}
     >
       {children}
     </BlankContent>

package/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -1,78 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DragProvider } from '@pie-lib/drag';
 import DragDropTile from './choice';
+import { onValueChange, onRemoveResponse } from './utils';
 
-export const onValueChange = (nodeProps, n, value) => {
-  const val = nodeProps.editor.value;
-  const change = val.change();
-
-  change.setNodeByKey(n.key, {
-    data: {
-      ...value,
-      index: n.data.get('index'),
-    },
-  });
-
-  nodeProps.editor.props.onChange(change, () => {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-
-export const onRemoveResponse = (nodeProps, value) => {
-  const val = nodeProps.editor.value;
-  const change = val.change();
-  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
-
-  change.setNodeByKey(dragInTheBlank.key, {
-    data: {
-      index: dragInTheBlank.data.get('index'),
-    },
-  });
-
-  nodeProps.editor.props.onChange(change, () => {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-
-const DragDrop = (props) => {
-  const { attributes, data, n, nodeProps, opts } = props;
+const DragDrop = ({ attributes, data, n, nodeProps, opts }) => {
   const { inTable } = data;
 
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    
-    if (!over || !active) return;
-
-    const draggedData = active.data.current;
-    const dropData = over.data.current;
-
-    // Check if this is a valid drop for drag-in-the-blank
-    if (
-      draggedData &&
-      dropData &&
-      dropData.instanceId === draggedData.instanceId &&
-      over.id.startsWith('drop-')
-    ) {
-      // Handle the drop
-      const shouldDrop =
-        !draggedData.value?.index ||
-        !data.index ||
-        draggedData.value.index !== data.index;
-
-      if (shouldDrop) {
-        onValueChange(nodeProps, n, draggedData.value);
-      }
-
-      // Remove from source if not duplicates
-      if (!opts.options.duplicates && draggedData.fromChoice) {
-        onRemoveResponse(nodeProps, draggedData.value);
-      }
-    }
-  };
-
   return (
-    <DragProvider onDragEnd={handleDragEnd}>
       <span
         {...attributes}
         style={{
@@ -87,17 +21,18 @@ const DragDrop = (props) => {
         <DragDropTile
           n={n}
           dragKey={n.key}
-          targetId="0"
+          targetId={`drop-${n.key}`}
           value={data}
           duplicates={opts.options.duplicates}
           onChange={(value) => onValueChange(nodeProps, n, value)}
           removeResponse={(value) => onRemoveResponse(nodeProps, value)}
           instanceId={nodeProps.editor?.props?.instanceId || 'default'}
+          nodeProps={nodeProps}
+          opts={opts}
         >
           {nodeProps.children}
         </DragDropTile>
       </span>
-    </DragProvider>
   );
 };
 

package/src/plugins/respArea/drag-in-the-blank/utils.js

@@ -0,0 +1,14 @@
+export const onRemoveResponse = (nodeProps, value) => {
+    const val = nodeProps.editor.value;
+    const change = val.change();
+    const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
+    change.setNodeByKey(dragInTheBlank.key, { data: { index: dragInTheBlank.data.get('index'), }, });
+    nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });
+};
+
+export const onValueChange = (nodeProps, n, value) => {
+    const val = nodeProps.editor.value;
+    const change = val.change();
+    change.setNodeByKey(n.key, { data: { ...value, index: n.data.get('index'), }, });
+    nodeProps.editor.props.onChange(change, () => { nodeProps.editor.props.onEditingDone(); });
+};