@pie-lib/drag 2.2.1 → 2.2.2-next.19

package/lib/droppable-placeholder.js

@@ -29,6 +29,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var preventInteractionStyle = {
+  flex: 1,
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  KhtmlUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  UserSelect: 'none'
+};
+
 var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DroppablePlaceholder, _React$Component);
 
@@ -49,9 +59,7 @@ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           classes = _this$props.classes;
       return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          flex: 1
-        }
+        style: preventInteractionStyle
       }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
         disabled: disabled,
         isOver: isOver,

package/lib/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","flex","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEaA,oB;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAE;AAAEI,UAAAA,IAAI,EAAE;AAAR;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEF,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAnBuCM,kBAAMC,S;;;iCAAnCT,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEI,sBAAUC,MADF;AAEjBR,EAAAA,iBAAiB,EAAEO,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBT,EAAAA,MAAM,EAAEM,sBAAUI,IAHD;AAIjBZ,EAAAA,QAAQ,EAAEQ,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBR,EAAAA,QAAQ,EAAEK,sBAAUI;AALH,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    disabled: PropTypes.bool,\n  };\n\n  render() {\n    const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n    return connectDropTarget(\n      <div style={{ flex: 1 }}>\n        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n"],"file":"droppable-placeholder.js"}
+{"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["preventInteractionStyle","flex","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","UserSelect","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,IAAMA,uBAAuB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,CADwB;AAE9BC,EAAAA,kBAAkB,EAAE,MAFU;AAG9BC,EAAAA,gBAAgB,EAAE,MAHY;AAI9BC,EAAAA,eAAe,EAAE,MAJa;AAK9BC,EAAAA,aAAa,EAAE,MALe;AAM9BC,EAAAA,YAAY,EAAE,MANgB;AAO9BC,EAAAA,UAAU,EAAE;AAPkB,CAAhC;;IAUaC,oB;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAEX;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEa,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAnBuCK,kBAAMC,S;;;iCAAnCR,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEG,sBAAUC,MADF;AAEjBP,EAAAA,iBAAiB,EAAEM,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBR,EAAAA,MAAM,EAAEK,sBAAUI,IAHD;AAIjBX,EAAAA,QAAQ,EAAEO,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBP,EAAAA,QAAQ,EAAEI,sBAAUI;AALH,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nconst preventInteractionStyle = {\n  flex: 1,\n  WebkitTouchCallout: 'none',\n  WebkitUserSelect: 'none',\n  KhtmlUserSelect: 'none',\n  MozUserSelect: 'none',\n  MsUserSelect: 'none',\n  UserSelect: 'none',\n};\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    disabled: PropTypes.bool,\n  };\n\n  render() {\n    const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n    return connectDropTarget(\n      <div style={preventInteractionStyle}>\n        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n"],"file":"droppable-placeholder.js"}

package/lib/preview-component.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDndMultiBackend = require("react-dnd-multi-backend");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _mathRendering = require("@pie-lib/math-rendering");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var MaskBlankStyle = {
+  border: '1px solid black',
+  color: 'black',
+  minWidth: '90px',
+  minHeight: '32px',
+  height: 'auto',
+  maxWidth: '374px',
+  display: 'flex',
+  padding: '4px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '16px'
+};
+var ICAStyle = {
+  backgroundColor: _renderUi.color.background(),
+  border: "1px solid ".concat(_renderUi.color.text()),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '28px',
+  padding: '0 3px',
+  marginLeft: 2,
+  marginTop: 2,
+  width: 'fit-content'
+};
+
+var getPrompt = function getPrompt(itemType, item) {
+  var _item$choice;
+
+  switch (itemType) {
+    // DRAG-IN-THE-BLANK
+    case 'MaskBlank':
+      return item === null || item === void 0 ? void 0 : (_item$choice = item.choice) === null || _item$choice === void 0 ? void 0 : _item$choice.value;
+    // IMAGE-CLOZE-ASSOCIATION
+
+    case 'react-dnd-response':
+      return item === null || item === void 0 ? void 0 : item.value;
+
+    default:
+      return undefined;
+  }
+};
+
+var PreviewComponent = function PreviewComponent() {
+  var _item$choice2;
+
+  var preview = (0, _reactDndMultiBackend.usePreview)();
+  var itemType = preview.itemType,
+      item = preview.item,
+      style = preview.style,
+      display = preview.display;
+  var root = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (display && root.current) {
+      (0, _mathRendering.renderMath)(root.current);
+    }
+  }, [display, item === null || item === void 0 ? void 0 : (_item$choice2 = item.choice) === null || _item$choice2 === void 0 ? void 0 : _item$choice2.value, item === null || item === void 0 ? void 0 : item.value, itemType, item]);
+
+  if (!display) {
+    return null;
+  }
+
+  var customStyle = _objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? MaskBlankStyle : {});
+
+  var prompt = getPrompt(itemType, item);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: root,
+    style: customStyle
+  }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+    className: "label",
+    prompt: prompt,
+    tagName: "span"
+  }));
+};
+
+var _default = PreviewComponent;
+exports["default"] = _default;
+//# sourceMappingURL=preview-component.js.map

package/lib/preview-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preview-component.jsx"],"names":["MaskBlankStyle","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ICAStyle","backgroundColor","background","text","marginLeft","marginTop","width","getPrompt","itemType","item","choice","value","undefined","PreviewComponent","preview","style","root","current","customStyle","prompt"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAGA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,MAAM,EAAE,iBADa;AAErBC,EAAAA,KAAK,EAAE,OAFc;AAGrBC,EAAAA,QAAQ,EAAE,MAHW;AAIrBC,EAAAA,SAAS,EAAE,MAJU;AAKrBC,EAAAA,MAAM,EAAE,MALa;AAMrBC,EAAAA,QAAQ,EAAE,OANW;AAOrBC,EAAAA,OAAO,EAAE,MAPY;AAQrBC,EAAAA,OAAO,EAAE,KARY;AASrBC,EAAAA,UAAU,EAAE,QATS;AAUrBC,EAAAA,cAAc,EAAE,QAVK;AAWrBC,EAAAA,YAAY,EAAE;AAXO,CAAvB;AAcA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,eAAe,EAAEX,gBAAMY,UAAN,EADF;AAEfb,EAAAA,MAAM,sBAAeC,gBAAMa,IAAN,EAAf,CAFS;AAGfR,EAAAA,OAAO,EAAE,MAHM;AAIfE,EAAAA,UAAU,EAAE,QAJG;AAKfC,EAAAA,cAAc,EAAE,QALD;AAMfN,EAAAA,SAAS,EAAE,MANI;AAOfI,EAAAA,OAAO,EAAE,OAPM;AAQfQ,EAAAA,UAAU,EAAE,CARG;AASfC,EAAAA,SAAS,EAAE,CATI;AAUfC,EAAAA,KAAK,EAAE;AAVQ,CAAjB;;AAaA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,QAAD,EAAWC,IAAX,EAAoB;AAAA;;AACpC,UAAQD,QAAR;AACE;AACA,SAAK,WAAL;AACE,aAAOC,IAAP,aAAOA,IAAP,uCAAOA,IAAI,CAAEC,MAAb,iDAAO,aAAcC,KAArB;AACF;;AACA,SAAK,oBAAL;AACE,aAAOF,IAAP,aAAOA,IAAP,uBAAOA,IAAI,CAAEE,KAAb;;AACF;AACE,aAAOC,SAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAAA;;AAC7B,MAAMC,OAAO,GAAG,uCAAhB;AACA,MAAQN,QAAR,GAA2CM,OAA3C,CAAQN,QAAR;AAAA,MAAkBC,IAAlB,GAA2CK,OAA3C,CAAkBL,IAAlB;AAAA,MAAwBM,KAAxB,GAA2CD,OAA3C,CAAwBC,KAAxB;AAAA,MAA+BpB,OAA/B,GAA2CmB,OAA3C,CAA+BnB,OAA/B;AAEA,MAAIqB,IAAI,GAAG,mBAAO,IAAP,CAAX;AAEA,wBAAU,YAAM;AACd,QAAIrB,OAAO,IAAIqB,IAAI,CAACC,OAApB,EAA6B;AAC3B,qCAAWD,IAAI,CAACC,OAAhB;AACD;AACF,GAJD,EAIG,CAACtB,OAAD,EAAUc,IAAV,aAAUA,IAAV,wCAAUA,IAAI,CAAEC,MAAhB,kDAAU,cAAcC,KAAxB,EAA+BF,IAA/B,aAA+BA,IAA/B,uBAA+BA,IAAI,CAAEE,KAArC,EAA4CH,QAA5C,EAAsDC,IAAtD,CAJH;;AAMA,MAAI,CAACd,OAAL,EAAc;AACZ,WAAO,IAAP;AACD;;AAED,MAAMuB,WAAW,mCACZH,KADY,GAEXP,QAAQ,KAAK,WAAb,GAA2BpB,cAA3B,GAA4C,EAFjC,CAAjB;;AAOA,MAAM+B,MAAM,GAAGZ,SAAS,CAACC,QAAD,EAAWC,IAAX,CAAxB;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEO,IAAV;AAAgB,IAAA,KAAK,EAAEE;AAAvB,kBACE,gCAAC,uBAAD;AAAe,IAAA,SAAS,EAAC,OAAzB;AAAiC,IAAA,MAAM,EAAEC,MAAzC;AAAiD,IAAA,OAAO,EAAC;AAAzD,IADF,CADF;AAKD,CA9BD;;eAgCeN,gB","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst MaskBlankStyle = {\n  border: '1px solid black',\n  color: 'black',\n  minWidth: '90px',\n  minHeight: '32px',\n  height: 'auto',\n  maxWidth: '374px',\n  display: 'flex',\n  padding: '4px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: '16px',\n};\n\nconst ICAStyle = {\n  backgroundColor: color.background(),\n  border: `1px solid ${color.text()}`,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: '28px',\n  padding: '0 3px',\n  marginLeft: 2,\n  marginTop: 2,\n  width: 'fit-content',\n};\n\nconst getPrompt = (itemType, item) => {\n  switch (itemType) {\n    // DRAG-IN-THE-BLANK\n    case 'MaskBlank':\n      return item?.choice?.value;\n    // IMAGE-CLOZE-ASSOCIATION\n    case 'react-dnd-response':\n      return item?.value;\n    default:\n      return undefined;\n  }\n};\n\nconst PreviewComponent = () => {\n  const preview = usePreview();\n  const { itemType, item, style, display } = preview;\n\n  let root = useRef(null);\n\n  useEffect(() => {\n    if (display && root.current) {\n      renderMath(root.current);\n    }\n  }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n  if (!display) {\n    return null;\n  }\n\n  const customStyle = {\n    ...style,\n    ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),\n    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.\n    //...(itemType === 'react-dnd-response' ? ICAStyle : {}),\n  };\n\n  const prompt = getPrompt(itemType, item);\n\n  return (\n    <div ref={root} style={customStyle}>\n      <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n    </div>\n  );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}

package/lib/with-drag-context.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,19 +11,42 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDndMultiBackend = _interopRequireDefault(require("react-dnd-multi-backend"));
+var _reactDndMultiBackend = _interopRequireWildcard(require("react-dnd-multi-backend"));
 
 var _reactDnd = require("react-dnd");
 
-var _HTML5toTouch = _interopRequireDefault(require("react-dnd-multi-backend/dist/cjs/HTML5toTouch"));
+var _reactDndTouchBackend = require("react-dnd-touch-backend");
+
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+
+var _previewComponent = _interopRequireDefault(require("./preview-component"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var backends = [{
+  backend: _reactDndHtml5Backend.HTML5Backend
+}, {
+  backend: _reactDndTouchBackend.TouchBackend,
+  options: {
+    enableMouseEvents: true,
+    enableTouchEvents: true
+  },
+  preview: true,
+  transition: _reactDndMultiBackend.TouchTransition,
+  skipDispatchOnTransition: true
+}];
 
 var _default = function _default(Component) {
   return function (props) {
     return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, {
       backend: _reactDndMultiBackend["default"],
-      options: _HTML5toTouch["default"],
+      options: {
+        backends: backends
+      },
       context: window
-    }, /*#__PURE__*/_react["default"].createElement(Component, props));
+    }, /*#__PURE__*/_react["default"].createElement(Component, props), /*#__PURE__*/_react["default"].createElement(_previewComponent["default"], null));
   };
 };
 

package/lib/with-drag-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/with-drag-context.js"],"names":["Component","props","MultiBackend","HTML5toTouch","window"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;eAEe,kBAACA,SAAD;AAAA,SAAe,UAACC,KAAD;AAAA,wBAC5B,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAEC,wBAA7C;AAA2D,MAAA,OAAO,EAAEC;AAApE,oBACE,gCAAC,SAAD,EAAeH,KAAf,CADF,CAD4B;AAAA,GAAf;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';\n\nexport default (Component) => (props) => (\n  <DndProvider backend={MultiBackend} options={HTML5toTouch} context={window}>\n    <Component {...props} />\n  </DndProvider>\n);\n"],"file":"with-drag-context.js"}
+{"version":3,"sources":["../src/with-drag-context.js"],"names":["backends","backend","HTML5Backend","TouchBackend","options","enableMouseEvents","enableTouchEvents","preview","transition","TouchTransition","skipDispatchOnTransition","Component","props","MultiBackend","window"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,QAAQ,GAAG,CACf;AAAEC,EAAAA,OAAO,EAAEC;AAAX,CADe,EAEf;AACED,EAAAA,OAAO,EAAEE,kCADX;AAEEC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,iBAAiB,EAAE,IAArB;AAA2BC,IAAAA,iBAAiB,EAAE;AAA9C,GAFX;AAGEC,EAAAA,OAAO,EAAE,IAHX;AAIEC,EAAAA,UAAU,EAAEC,qCAJd;AAKEC,EAAAA,wBAAwB,EAAE;AAL5B,CAFe,CAAjB;;eAWe,kBAACC,SAAD;AAAA,SAAe,UAACC,KAAD;AAAA,wBAC5B,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAE;AAAEb,QAAAA,QAAQ,EAARA;AAAF,OAA7C;AAA2D,MAAA,OAAO,EAAEc;AAApE,oBACE,gCAAC,SAAD,EAAeF,KAAf,CADF,eAEE,gCAAC,4BAAD,OAFF,CAD4B;AAAA,GAAf;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport PreviewComponent from './preview-component';\n\nconst backends = [\n  { backend: HTML5Backend },\n  {\n    backend: TouchBackend,\n    options: { enableMouseEvents: true, enableTouchEvents: true },\n    preview: true,\n    transition: TouchTransition,\n    skipDispatchOnTransition: true,\n  },\n];\n\nexport default (Component) => (props) => (\n  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>\n    <Component {...props} />\n    <PreviewComponent />\n  </DndProvider>\n);\n"],"file":"with-drag-context.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/drag",
-  "version": "2.2.1",
+  "version": "2.2.2-next.19+e5eca8f5",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -11,7 +11,7 @@
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dnd-multi-backend": "^6.0.2",
-    "react-dnd-touch-backend": "^14.1.0"
+    "react-dnd-touch-backend": "^12.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -19,5 +19,5 @@
   "scripts": {},
   "author": "",
   "license": "ISC",
-  "gitHead": "4043c98430c000ce3a25357d92845175b076ea21"
+  "gitHead": "e5eca8f590ebc528f72f6f38bc4b5fca0949919f"
 }

package/src/droppable-placeholder.jsx

@@ -2,6 +2,16 @@ import React from 'react';
 import PlaceHolder from './placeholder';
 import PropTypes from 'prop-types';
 
+const preventInteractionStyle = {
+  flex: 1,
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  KhtmlUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  UserSelect: 'none',
+};
+
 export class DroppablePlaceholder extends React.Component {
   static propTypes = {
     classes: PropTypes.object,
@@ -15,7 +25,7 @@ export class DroppablePlaceholder extends React.Component {
     const { children, connectDropTarget, isOver, disabled, classes } = this.props;
 
     return connectDropTarget(
-      <div style={{ flex: 1 }}>
+      <div style={preventInteractionStyle}>
         <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
           {children}
         </PlaceHolder>

package/src/preview-component.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+import { usePreview } from 'react-dnd-multi-backend';
+import { PreviewPrompt } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+import { color } from '@pie-lib/render-ui';
+
+const MaskBlankStyle = {
+  border: '1px solid black',
+  color: 'black',
+  minWidth: '90px',
+  minHeight: '32px',
+  height: 'auto',
+  maxWidth: '374px',
+  display: 'flex',
+  padding: '4px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '16px',
+};
+
+const ICAStyle = {
+  backgroundColor: color.background(),
+  border: `1px solid ${color.text()}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '28px',
+  padding: '0 3px',
+  marginLeft: 2,
+  marginTop: 2,
+  width: 'fit-content',
+};
+
+const getPrompt = (itemType, item) => {
+  switch (itemType) {
+    // DRAG-IN-THE-BLANK
+    case 'MaskBlank':
+      return item?.choice?.value;
+    // IMAGE-CLOZE-ASSOCIATION
+    case 'react-dnd-response':
+      return item?.value;
+    default:
+      return undefined;
+  }
+};
+
+const PreviewComponent = () => {
+  const preview = usePreview();
+  const { itemType, item, style, display } = preview;
+
+  let root = useRef(null);
+
+  useEffect(() => {
+    if (display && root.current) {
+      renderMath(root.current);
+    }
+  }, [display, item?.choice?.value, item?.value, itemType, item]);
+
+  if (!display) {
+    return null;
+  }
+
+  const customStyle = {
+    ...style,
+    ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),
+    // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.
+    //...(itemType === 'react-dnd-response' ? ICAStyle : {}),
+  };
+
+  const prompt = getPrompt(itemType, item);
+
+  return (
+    <div ref={root} style={customStyle}>
+      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+    </div>
+  );
+};
+
+export default PreviewComponent;

package/src/with-drag-context.js

@@ -1,10 +1,25 @@
 import React from 'react';
-import MultiBackend from 'react-dnd-multi-backend';
+import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
 import { DndProvider } from 'react-dnd';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
+import { TouchBackend } from 'react-dnd-touch-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import PreviewComponent from './preview-component';
+
+const backends = [
+  { backend: HTML5Backend },
+  {
+    backend: TouchBackend,
+    options: { enableMouseEvents: true, enableTouchEvents: true },
+    preview: true,
+    transition: TouchTransition,
+    skipDispatchOnTransition: true,
+  },
+];
 
 export default (Component) => (props) => (
-  <DndProvider backend={MultiBackend} options={HTML5toTouch} context={window}>
+  <DndProvider backend={MultiBackend} options={{ backends }} context={window}>
     <Component {...props} />
+    <PreviewComponent />
   </DndProvider>
 );