@pie-lib/mask-markup 1.31.0 → 1.33.0-mui-update.0

package/lib/with-mask.js

@@ -1,85 +1,60 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withMask = exports.buildLayoutFromMarkup = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _mask = _interopRequireDefault(require("./mask"));
-
 var _componentize2 = _interopRequireDefault(require("./componentize"));
-
 var _serialization = require("./serialization");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-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 buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
+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)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var buildLayoutFromMarkup = exports.buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
   var _componentize = (0, _componentize2["default"])(markup, type),
-      processed = _componentize.markup;
-
+    processed = _componentize.markup;
   var value = (0, _serialization.deserialize)(processed);
   return value.document;
 };
-
-exports.buildLayoutFromMarkup = buildLayoutFromMarkup;
-
-var withMask = function withMask(type, renderChildren) {
-  var _class;
-
-  return _class = /*#__PURE__*/function (_React$Component) {
-    (0, _inherits2["default"])(WithMask, _React$Component);
-
-    var _super = _createSuper(WithMask);
-
+var withMask = exports.withMask = function withMask(type, renderChildren) {
+  var _WithMask;
+  return _WithMask = /*#__PURE__*/function (_React$Component) {
     function WithMask() {
       (0, _classCallCheck2["default"])(this, WithMask);
-      return _super.apply(this, arguments);
+      return _callSuper(this, WithMask, arguments);
     }
-
-    (0, _createClass2["default"])(WithMask, [{
+    (0, _inherits2["default"])(WithMask, _React$Component);
+    return (0, _createClass2["default"])(WithMask, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
         if (this.props.markup !== prevProps.markup) {
           // eslint-disable-next-line
-          var domNode = _reactDom["default"].findDOMNode(this); // Query all elements that may contain outdated MathJax renderings
-
-
-          var mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]'); // Clean up for fresh MathJax processing
+          var domNode = _reactDom["default"].findDOMNode(this);
+          // Query all elements that may contain outdated MathJax renderings
+          var mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
 
+          // Clean up for fresh MathJax processing
           (mathElements || []).forEach(function (el) {
             // Remove the MathJax container to allow for clean updates
             var mjxContainer = el.querySelector('mjx-container');
-
             if (mjxContainer) {
               el.removeChild(mjxContainer);
-            } // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
-
+            }
 
+            // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
             var latexCode = el.getAttribute('data-raw');
-            el.innerHTML = latexCode; // Remove the attribute to signal that MathJax should reprocess this element
+            el.innerHTML = latexCode;
 
+            // Remove the attribute to signal that MathJax should reprocess this element
             el.removeAttribute('data-math-handled');
           });
         }
@@ -88,11 +63,11 @@ var withMask = function withMask(type, renderChildren) {
       key: "render",
       value: function render() {
         var _this$props = this.props,
-            markup = _this$props.markup,
-            layout = _this$props.layout,
-            value = _this$props.value,
-            onChange = _this$props.onChange,
-            elementType = _this$props.elementType;
+          markup = _this$props.markup,
+          layout = _this$props.layout,
+          value = _this$props.value,
+          onChange = _this$props.onChange,
+          elementType = _this$props.elementType;
         var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
         return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
           elementType: elementType,
@@ -103,13 +78,11 @@ var withMask = function withMask(type, renderChildren) {
         });
       }
     }]);
-    return WithMask;
-  }(_react["default"].Component), (0, _defineProperty2["default"])(_class, "propTypes", {
+  }(_react["default"].Component), (0, _defineProperty2["default"])(_WithMask, "propTypes", {
     /**
      * At the start we'll probably work with markup
      */
     markup: _propTypes["default"].string,
-
     /**
      * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.
      */
@@ -118,8 +91,6 @@ var withMask = function withMask(type, renderChildren) {
     onChange: _propTypes["default"].func,
     customMarkMarkupComponent: _propTypes["default"].func,
     elementType: _propTypes["default"].string
-  }), _class;
+  }), _WithMask;
 };
-
-exports.withMask = withMask;
 //# sourceMappingURL=with-mask.js.map

package/lib/with-mask.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/with-mask.jsx"],"names":["buildLayoutFromMarkup","markup","type","processed","value","document","withMask","renderChildren","prevProps","props","domNode","ReactDOM","findDOMNode","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","layout","onChange","elementType","maskLayout","React","Component","PropTypes","string","object","func","customMarkMarkupComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,MAAD,EAASC,IAAT,EAAkB;AACrD,sBAA8B,+BAAaD,MAAb,EAAqBC,IAArB,CAA9B;AAAA,MAAgBC,SAAhB,iBAAQF,MAAR;;AACA,MAAMG,KAAK,GAAG,gCAAYD,SAAZ,CAAd;AACA,SAAOC,KAAK,CAACC,QAAb;AACD,CAJM;;;;AAMA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACJ,IAAD,EAAOK,cAAP,EAA0B;AAAA;;AAChD;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,aAgBE,4BAAmBC,SAAnB,EAA8B;AAC5B,YAAI,KAAKC,KAAL,CAAWR,MAAX,KAAsBO,SAAS,CAACP,MAApC,EAA4C;AAC1C;AACA,cAAMS,OAAO,GAAGC,qBAASC,WAAT,CAAqB,IAArB,CAAhB,CAF0C,CAG1C;;;AACA,cAAMC,YAAY,GAAGH,OAAO,IAAIA,OAAO,CAACI,gBAAR,CAAyB,wCAAzB,CAAhC,CAJ0C,CAM1C;;AACA,WAACD,YAAY,IAAI,EAAjB,EAAqBE,OAArB,CAA6B,UAACC,EAAD,EAAQ;AACnC;AACA,gBAAMC,YAAY,GAAGD,EAAE,CAACE,aAAH,CAAiB,eAAjB,CAArB;;AAEA,gBAAID,YAAJ,EAAkB;AAChBD,cAAAA,EAAE,CAACG,WAAH,CAAeF,YAAf;AACD,aANkC,CAQnC;;;AACA,gBAAMG,SAAS,GAAGJ,EAAE,CAACK,YAAH,CAAgB,UAAhB,CAAlB;AACAL,YAAAA,EAAE,CAACM,SAAH,GAAeF,SAAf,CAVmC,CAYnC;;AACAJ,YAAAA,EAAE,CAACO,eAAH,CAAmB,mBAAnB;AACD,WAdD;AAeD;AACF;AAxCH;AAAA;AAAA,aA0CE,kBAAS;AACP,0BAAyD,KAAKd,KAA9D;AAAA,YAAQR,MAAR,eAAQA,MAAR;AAAA,YAAgBuB,MAAhB,eAAgBA,MAAhB;AAAA,YAAwBpB,KAAxB,eAAwBA,KAAxB;AAAA,YAA+BqB,QAA/B,eAA+BA,QAA/B;AAAA,YAAyCC,WAAzC,eAAyCA,WAAzC;AAEA,YAAMC,UAAU,GAAGH,MAAM,GAAGA,MAAH,GAAYxB,qBAAqB,CAACC,MAAD,EAASC,IAAT,CAA1D;AACA,4BACE,gCAAC,gBAAD;AACE,UAAA,WAAW,EAAEwB,WADf;AAEE,UAAA,MAAM,EAAEC,UAFV;AAGE,UAAA,KAAK,EAAEvB,KAHT;AAIE,UAAA,QAAQ,EAAEqB,QAJZ;AAKE,UAAA,cAAc,EAAElB,cAAc,CAAC,KAAKE,KAAN;AALhC,UADF;AASD;AAvDH;AAAA;AAAA,IAA8BmB,kBAAMC,SAApC,yDACqB;AACjB;AACN;AACA;AACM5B,IAAAA,MAAM,EAAE6B,sBAAUC,MAJD;;AAKjB;AACN;AACA;AACMP,IAAAA,MAAM,EAAEM,sBAAUE,MARD;AASjB5B,IAAAA,KAAK,EAAE0B,sBAAUE,MATA;AAUjBP,IAAAA,QAAQ,EAAEK,sBAAUG,IAVH;AAWjBC,IAAAA,yBAAyB,EAAEJ,sBAAUG,IAXpB;AAYjBP,IAAAA,WAAW,EAAEI,sBAAUC;AAZN,GADrB;AAyDD,CA1DM","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        // eslint-disable-next-line\n        const domNode = ReactDOM.findDOMNode(this);\n        // Query all elements that may contain outdated MathJax renderings\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"file":"with-mask.js"}
+{"version":3,"file":"with-mask.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_mask","_componentize2","_serialization","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","buildLayoutFromMarkup","exports","markup","type","_componentize","componentize","processed","value","deserialize","document","withMask","renderChildren","_WithMask","_React$Component","WithMask","_classCallCheck2","arguments","_inherits2","_createClass2","key","componentDidUpdate","prevProps","props","domNode","ReactDOM","findDOMNode","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","render","_this$props","layout","onChange","elementType","maskLayout","createElement","React","Component","_defineProperty2","PropTypes","string","object","func","customMarkMarkupComponent"],"sources":["../src/with-mask.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        // eslint-disable-next-line\n        const domNode = ReactDOM.findDOMNode(this);\n        // Query all elements that may contain outdated MathJax renderings\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAA8C,SAAAM,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAEvC,IAAMc,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,SAAxBA,qBAAqBA,CAAIE,MAAM,EAAEC,IAAI,EAAK;EACrD,IAAAC,aAAA,GAA8B,IAAAC,yBAAY,EAACH,MAAM,EAAEC,IAAI,CAAC;IAAxCG,SAAS,GAAAF,aAAA,CAAjBF,MAAM;EACd,IAAMK,KAAK,GAAG,IAAAC,0BAAW,EAACF,SAAS,CAAC;EACpC,OAAOC,KAAK,CAACE,QAAQ;AACvB,CAAC;AAEM,IAAMC,QAAQ,GAAAT,OAAA,CAAAS,QAAA,GAAG,SAAXA,QAAQA,CAAIP,IAAI,EAAEQ,cAAc,EAAK;EAAA,IAAAC,SAAA;EAChD,OAAAA,SAAA,0BAAAC,gBAAA;IAAA,SAAAC,SAAA;MAAA,IAAAC,gBAAA,mBAAAD,QAAA;MAAA,OAAA7B,UAAA,OAAA6B,QAAA,EAAAE,SAAA;IAAA;IAAA,IAAAC,UAAA,aAAAH,QAAA,EAAAD,gBAAA;IAAA,WAAAK,aAAA,aAAAJ,QAAA;MAAAK,GAAA;MAAAZ,KAAA,EAgBE,SAAAa,kBAAkBA,CAACC,SAAS,EAAE;QAC5B,IAAI,IAAI,CAACC,KAAK,CAACpB,MAAM,KAAKmB,SAAS,CAACnB,MAAM,EAAE;UAC1C;UACA,IAAMqB,OAAO,GAAGC,oBAAQ,CAACC,WAAW,CAAC,IAAI,CAAC;UAC1C;UACA,IAAMC,YAAY,GAAGH,OAAO,IAAIA,OAAO,CAACI,gBAAgB,CAAC,wCAAwC,CAAC;;UAElG;UACA,CAACD,YAAY,IAAI,EAAE,EAAEE,OAAO,CAAC,UAACC,EAAE,EAAK;YACnC;YACA,IAAMC,YAAY,GAAGD,EAAE,CAACE,aAAa,CAAC,eAAe,CAAC;YAEtD,IAAID,YAAY,EAAE;cAChBD,EAAE,CAACG,WAAW,CAACF,YAAY,CAAC;YAC9B;;YAEA;YACA,IAAMG,SAAS,GAAGJ,EAAE,CAACK,YAAY,CAAC,UAAU,CAAC;YAC7CL,EAAE,CAACM,SAAS,GAAGF,SAAS;;YAExB;YACAJ,EAAE,CAACO,eAAe,CAAC,mBAAmB,CAAC;UACzC,CAAC,CAAC;QACJ;MACF;IAAC;MAAAjB,GAAA;MAAAZ,KAAA,EAED,SAAA8B,MAAMA,CAAA,EAAG;QACP,IAAAC,WAAA,GAAyD,IAAI,CAAChB,KAAK;UAA3DpB,MAAM,GAAAoC,WAAA,CAANpC,MAAM;UAAEqC,MAAM,GAAAD,WAAA,CAANC,MAAM;UAAEhC,KAAK,GAAA+B,WAAA,CAAL/B,KAAK;UAAEiC,QAAQ,GAAAF,WAAA,CAARE,QAAQ;UAAEC,WAAW,GAAAH,WAAA,CAAXG,WAAW;QAEpD,IAAMC,UAAU,GAAGH,MAAM,GAAGA,MAAM,GAAGvC,qBAAqB,CAACE,MAAM,EAAEC,IAAI,CAAC;QACxE,oBACE1B,MAAA,YAAAkE,aAAA,CAAC7D,KAAA,WAAI;UACH2D,WAAW,EAAEA,WAAY;UACzBF,MAAM,EAAEG,UAAW;UACnBnC,KAAK,EAAEA,KAAM;UACbiC,QAAQ,EAAEA,QAAS;UACnB7B,cAAc,EAAEA,cAAc,CAAC,IAAI,CAACW,KAAK;QAAE,CAC5C,CAAC;MAEN;IAAC;EAAA,EAvD2BsB,iBAAK,CAACC,SAAS,OAAAC,gBAAA,aAAAlC,SAAA,eACxB;IACjB;AACN;AACA;IACMV,MAAM,EAAE6C,qBAAS,CAACC,MAAM;IACxB;AACN;AACA;IACMT,MAAM,EAAEQ,qBAAS,CAACE,MAAM;IACxB1C,KAAK,EAAEwC,qBAAS,CAACE,MAAM;IACvBT,QAAQ,EAAEO,qBAAS,CAACG,IAAI;IACxBC,yBAAyB,EAAEJ,qBAAS,CAACG,IAAI;IACzCT,WAAW,EAAEM,qBAAS,CAACC;EACzB,CAAC,GAAApC,SAAA;AA2CL,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "1.31.0",
+  "version": "1.33.0-mui-update.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -8,20 +8,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/drag": "^2.20.0",
-    "@pie-lib/editable-html": "^11.19.0",
-    "@pie-lib/math-rendering": "^3.21.0",
-    "@pie-lib/render-ui": "^4.33.0",
+    "@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.22.0-mui-update.0",
+    "@pie-lib/editable-html": "^11.21.0-mui-update.0",
+    "@pie-lib/math-rendering": "^3.26.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.35.0-mui-update.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "immutable": "^4.0.0-rc.12",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
+    "react": "^18.2.0",
     "react-dnd-html5-backend": "^14.0.2",
-    "react-dom": "^16.9.0",
+    "react-dom": "^18.2.0",
     "slate": "^0.36.2",
     "slate-html-serializer": "^0.6.12",
     "slate-prop-types": "^0.4.38",
@@ -31,5 +33,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "gitHead": "e65a495136968b1a07642bde2efd887f46548d25"
+  "gitHead": "622d5627dc85e393cdf13e3362970299cc485cc5"
 }

package/src/choices/choice.jsx

@@ -1,164 +1,68 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+// choices/Choice.js
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
 import classnames from 'classnames';
-
 import { renderMath } from '@pie-lib/math-rendering';
 import { color } from '@pie-lib/render-ui';
-import { DragSource } from '@pie-lib/drag';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-class BlankContentComp extends React.Component {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    connectDragSource: PropTypes.func,
-  };
-
-  startDrag = () => {
-    const { connectDragSource, disabled } = this.props;
-    if (!disabled) {
-      connectDragSource(this.dragContainerRef);
-    }
-  };
-
-  // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices PD-4888
-  handleTouchStart = (e) => {
-    e.preventDefault();
-    this.longPressTimer = setTimeout(() => {
-      this.startDrag(e);
-    }, 500);
-  };
-
-  handleTouchEnd = () => {
-    clearTimeout(this.longPressTimer);
-  };
-
-  handleTouchMove = () => {
-    clearTimeout(this.longPressTimer);
-  };
-
-  componentDidMount() {
-    if (this.dragContainerRef) {
-      this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });
-      this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
-      this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.dragContainerRef) {
-      this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
-      this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
-      this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
-    }
-  }
-
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
-
-  render() {
-    const { connectDragSource, choice, classes, disabled } = this.props;
-
-    // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-
-    return connectDragSource(
-      <span
-        className={classnames(classes.choice, disabled && classes.disabled)}
-        ref={(ref) => {
-          //eslint-disable-next-line
-          this.dragContainerRef = ReactDOM.findDOMNode(ref);
-        }}
-      >
-        <Chip
-          clickable={false}
-          disabled={true}
-          ref={(ref) => {
-            //eslint-disable-next-line
-            this.rootRef = ReactDOM.findDOMNode(ref);
-          }}
-          className={classes.chip}
-          label={
-            <span
-              className={classes.chipLabel}
-              ref={(ref) => {
-                if (ref) {
-                  ref.innerHTML = choice.value || ' ';
-                }
-              }}
-            >
-              {' '}
-            </span>
-          }
-          variant={disabled ? 'outlined' : undefined}
-        />
-      </span>,
-      {},
-    );
-  }
+const StyledChoice = styled('span')(({ theme }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
+  margin: theme.spacing(0.5),
+  transform: 'translate(0, 0)',
+  display: 'inline-flex',
+  '&.disabled': { opacity: 0.6 },
+}));
+
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.white(),
+  border: `1px solid ${color.text()}`,
+  color: color.text(),
+  alignItems: 'center',
+  display: 'inline-flex',
+  height: 'initial',
+  minHeight: '32px',
+  fontSize: 'inherit',
+  whiteSpace: 'pre-wrap',
+  maxWidth: '374px',
+  pointerEvents: 'none',
+  borderRadius: '3px',
+  paddingTop: '12px',
+  paddingBottom: '12px',
+}));
+
+export default function Choice({ choice, disabled, instanceId }) {
+  const rootRef = useRef(null);
+
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
+    disabled,
+  });
+
+  useEffect(() => {
+    if (rootRef.current) renderMath(rootRef.current);
+  });
+
+  return (
+    <StyledChoice ref={setNodeRef} className={classnames({ disabled })} {...listeners} {...attributes}>
+      <StyledChip
+        clickable={false}
+        disabled
+        ref={rootRef}
+        label={choice.value}
+      />
+    </StyledChoice>
+  );
 }
 
-export const BlankContent = withStyles((theme) => ({
-  choice: {
-    border: `solid 0px ${theme.palette.primary.main}`,
-    borderRadius: theme.spacing.unit * 2,
-    margin: theme.spacing.unit / 2,
-    transform: 'translate(0, 0)',
-  },
-  chip: {
-    backgroundColor: color.white(),
-    border: `1px solid ${color.text()}`,
-    color: color.text(),
-    alignItems: 'center',
-    display: 'inline-flex',
-    height: 'initial',
-    minHeight: '32px',
-    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',
-  },
-  chipLabel: {
-    whiteSpace: 'normal',
-    '& img': {
-      display: 'block',
-      padding: '2px 0',
-    },
-    '& mjx-frac': {
-      fontSize: '120% !important',
-    },
-  },
-  disabled: {
-    opacity: 0.6,
-  },
-}))(BlankContentComp);
-
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled;
-  },
-  beginDrag(props) {
-    return {
-      choice: props.choice,
-      instanceId: props.instanceId,
-    };
-  },
+Choice.propTypes = {
+  choice: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
-
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(BlankContent);
-
-export default DragDropTile;

package/src/choices/index.jsx

@@ -11,6 +11,7 @@ export default class Choices extends React.Component {
     choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
     value: PropTypes.object,
     choicePosition: PropTypes.string.isRequired,
+    instanceId: PropTypes.string, // Added for drag isolation
   };
 
   getStyleForWrapper = () => {
@@ -40,7 +41,7 @@ export default class Choices extends React.Component {
   };
 
   render() {
-    const { disabled, duplicates, choices, value } = this.props;
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
     const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
@@ -54,7 +55,12 @@ export default class Choices extends React.Component {
       <div style={elementStyle}>
         <DragDroppablePlaceholder disabled={disabled}>
           {filteredChoices.map((c, index) => (
-            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />
+            <Choice 
+              key={`${c.value}-${index}`} 
+              disabled={disabled} 
+              choice={c} 
+              instanceId={instanceId}
+            />
           ))}
         </DragDroppablePlaceholder>
       </div>