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

package/src/components/blank.jsx

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

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

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

package/src/mask.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { styled } from '@mui/material/styles';
+import { renderMath } from '@pie-lib/math-rendering';
 import { MARK_TAGS } from './serialization';
 
 const Paragraph = styled('div')(({ theme }) => ({
@@ -131,6 +132,11 @@ const MaskContainer = styled('div')(() => ({
  * Renders a layout that uses the slate.js Value model structure.
  */
 export default class Mask extends React.Component {
+  constructor(props) {
+    super(props);
+    this.containerRef = React.createRef();
+  }
+
   static propTypes = {
     renderChildren: PropTypes.func,
     layout: PropTypes.object,
@@ -139,6 +145,12 @@ export default class Mask extends React.Component {
     elementType: PropTypes.string,
   };
 
+  componentDidMount() {
+    if (this.containerRef.current && typeof renderMath === 'function') {
+      renderMath(this.containerRef.current);
+    }
+  }
+
   handleChange = (id, value) => {
     const data = { ...this.props.value, [id]: value };
     this.props.onChange(data);
@@ -148,6 +160,6 @@ export default class Mask extends React.Component {
     const { value, layout, elementType } = this.props;
     const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
 
-    return <MaskContainer>{children}</MaskContainer>;
+    return <MaskContainer ref={this.containerRef}>{children}</MaskContainer>;
   }
 }