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

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
+import { DragProvider } from '@pie-lib/drag';
 import Choices from './choices';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
-// eslint-disable-next-line react/display-name
 const Masked = withMask('blank', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
+  const dataset = node.data?.dataset || {};
   if (dataset.component === 'blank') {
     // eslint-disable-next-line react/prop-types
     const {
@@ -18,6 +18,7 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       showCorrectAnswer,
       emptyResponseAreaWidth,
       emptyResponseAreaHeight,
+      instanceId,
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -33,7 +34,16 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         id={dataset.id}
         emptyResponseAreaWidth={emptyResponseAreaWidth}
         emptyResponseAreaHeight={emptyResponseAreaHeight}
-        onChange={onChange}
+        onChange={(id, choiceId) => {
+          const newData = { ...data };
+          if (choiceId === undefined) {
+            delete newData[id];
+          } else {
+            newData[id] = choiceId;
+          }
+          onChange(newData);
+        }}
+        instanceId={instanceId}
       />
     );
   }
@@ -44,7 +54,7 @@ export default class DragInTheBlank extends React.Component {
     markup: PropTypes.string,
     layout: PropTypes.object,
     choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    choices: PropTypes.array,
     value: PropTypes.object,
     onChange: PropTypes.func,
     duplicates: PropTypes.bool,
@@ -54,16 +64,63 @@ export default class DragInTheBlank extends React.Component {
     showCorrectAnswer: PropTypes.bool,
     emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    instanceId: PropTypes.string,
   };
 
-  UNSAFE_componentWillReceiveProps() {
-    if (this.rootRef) {
-      renderMath(this.rootRef);
+  static defaultProps = {
+    instanceId: 'drag-in-the-blank',
+  };
+
+  handleDragEnd = (event) => {
+    console.log('Drag End Event:', event);
+    const { active, over } = event;
+    const { onChange, value } = this.props;
+
+    if (!over || !active || !onChange) {
+      console.log('Early return - missing data:', { over: !!over, active: !!active, onChange: !!onChange });
+      return;
     }
-  }
+
+    const draggedData = active.data.current;
+    const dropData = over.data.current;
+
+    console.log('Drag data:', draggedData);
+    console.log('Drop data:', dropData);
+
+    // Handle drop from choice to blank or blank to blank
+    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {
+      console.log('Valid drag/drop types');
+      const draggedItem = draggedData;
+      const targetId = dropData.id;
+
+      if (draggedItem.instanceId === dropData.instanceId) {
+        console.log('Instance IDs match');
+
+        // Handle drop from choice to blank
+        if (draggedItem.fromChoice === true) {
+          console.log('Dropping from choice to blank:', targetId);
+          const newValue = { ...value };
+          newValue[targetId] = draggedItem.choice.id;
+          onChange(newValue);
+        }
+        // Handle drop from blank to blank
+        else if (draggedItem.id !== targetId) {
+          console.log('Moving from blank to blank:', draggedItem.id, '->', targetId);
+          const newValue = { ...value };
+          newValue[targetId] = draggedItem.choice.id;
+          delete newValue[draggedItem.id];
+          onChange(newValue);
+        }
+      } else {
+        console.log('Instance ID mismatch:', draggedItem.instanceId, 'vs', dropData.instanceId);
+      }
+    } else {
+      console.log('Invalid drag/drop types:', draggedData?.type, dropData?.accepts);
+    }
+  };
 
   componentDidUpdate() {
-    renderMath(this.rootRef);
+    if (this.rootRef) renderMath(this.rootRef);
   }
 
   getPositionDirection = (choicePosition) => {
@@ -97,7 +154,6 @@ export default class DragInTheBlank extends React.Component {
     const {
       markup,
       duplicates,
-      layout,
       value,
       onChange,
       choicesPosition,
@@ -108,40 +164,42 @@ export default class DragInTheBlank extends React.Component {
       showCorrectAnswer,
       emptyResponseAreaWidth,
       emptyResponseAreaHeight,
+      layout,
+      instanceId
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
-    const style = {
-      display: 'flex',
-      minWidth: '100px',
-      ...this.getPositionDirection(choicePosition),
-    };
+    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };
 
     return (
-      <div ref={(ref) => ref && (this.rootRef = ref)} style={style}>
-        <Choices
-          choicePosition={choicePosition}
-          duplicates={duplicates}
-          choices={choices}
-          value={value}
-          disabled={disabled}
-        />
-        <Masked
-          elementType={'drag-in-the-blank'}
-          markup={markup}
-          layout={layout}
-          value={value}
-          choices={choices}
-          onChange={onChange}
-          disabled={disabled}
-          duplicates={duplicates}
-          feedback={feedback}
-          correctResponse={correctResponse}
-          showCorrectAnswer={showCorrectAnswer}
-          emptyResponseAreaWidth={emptyResponseAreaWidth}
-          emptyResponseAreaHeight={emptyResponseAreaHeight}
-        />
-      </div>
+      <DragProvider onDragEnd={this.handleDragEnd}>
+        <div ref={(ref) => (this.rootRef = ref)} style={style}>
+          <Choices
+            choicePosition={choicePosition}
+            choices={choices}
+            value={value}
+            duplicates={duplicates}
+            disabled={disabled}
+            instanceId={instanceId}
+          />
+          <Masked
+            elementType="drag-in-the-blank"
+            markup={markup}
+            layout={layout}
+            value={value}
+            choices={choices}
+            onChange={onChange}
+            disabled={disabled}
+            duplicates={duplicates}
+            feedback={feedback}
+            correctResponse={correctResponse}
+            showCorrectAnswer={showCorrectAnswer}
+            emptyResponseAreaWidth={emptyResponseAreaWidth}
+            emptyResponseAreaHeight={emptyResponseAreaHeight}
+            instanceId={instanceId}
+          />
+        </div>
+      </DragProvider>
     );
   }
 }

package/src/mask.jsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { MARK_TAGS } from './serialization';
-import cx from 'classnames';
 
-const Paragraph = withStyles((theme) => ({
-  para: {
-    paddingTop: 2 * theme.spacing.unit,
-    paddingBottom: 2 * theme.spacing.unit,
-  },
-}))((props) => <div className={props.classes.para}>{props.children}</div>);
+const Paragraph = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+}));
 
-const Spacer = withStyles(() => ({
-  spacer: {
-    display: 'inline-block',
-    width: '.75em',
-  },
-}))((props) => <span className={props.classes.spacer} />);
+const Spacer = styled('span')(() => ({
+  display: 'inline-block',
+  width: '.75em',
+}));
 
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
@@ -120,21 +115,17 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
-const MaskContainer = withStyles(() => ({
-  main: {
-    display: 'initial',
+const MaskContainer = styled('div')(() => ({
+  display: 'initial',
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse',
   },
-  tableStyle: {
-    '&:not(.MathJax) table': {
-      borderCollapse: 'collapse',
-    },
-    // align table content to left as per STAR requirement PD-3687
-    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-      padding: '8px 12px',
-      textAlign: 'left',
-    },
+  // align table content to left as per STAR requirement PD-3687
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '8px 12px',
+    textAlign: 'left',
   },
-}))((props) => <div className={cx(props.classes.main, props.classes.tableStyle)}>{props.children}</div>);
+}));
 
 /**
  * Renders a layout that uses the slate.js Value model structure.