@pie-lib/mask-markup 2.0.0-beta.2 → 2.0.0-next.0

package/src/components/blank.jsx

@@ -1,249 +1,361 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
 import debug from 'debug';
-import { DragSource, DropTarget } from '@pie-lib/drag';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
 import classnames from 'classnames';
 import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
 const log = debug('pie-lib:mask-markup:blank');
-export const DRAG_TYPE = 'MaskBlank';
 
-const useStyles = withStyles(() => ({
-  content: {
-    border: `solid 0px ${color.primary()}`,
-    minWidth: '200px',
-    touchAction: 'none',
+const StyledContent = styled('span')(({ dragged, over }) => ({
+  border: `solid 0px ${color.primary()}`,
+  minWidth: '200px',
+  touchAction: 'none',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  opacity: 1,
+  ...(over && {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  }),
+  ...(dragged && {
+    opacity: 0.5,
+  }),
+}));
+
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.background(),
+  border: `2px dashed ${color.text()}`,
+  color: color.text(),
+  fontSize: 'inherit',
+  maxWidth: '374px',
+  position: 'relative',
+  borderRadius: '3px',
+  '&.over': {
+    whiteSpace: 'nowrap',
     overflow: 'hidden',
   },
-  chip: {
-    backgroundColor: color.background(),
-    border: `1px solid ${color.text()}`,
-    color: color.text(),
-    minWidth: '90px',
-    fontSize: 'inherit',
-    minHeight: '32px',
-    height: 'auto',
-    maxWidth: '374px',
-    position: 'relative',
+  '&.parentOver': {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
   },
-  chipLabel: {
-    whiteSpace: 'pre-wrap',
-    // 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',
-    '& img': {
-      display: 'block',
-      padding: '2px 0',
-    },
+  '&.correct': {
+    border: `solid 1px ${color.correct()}`,
   },
-  hidden: {
-    color: 'transparent',
-    opacity: 0,
+  '&.incorrect': {
+    border: `solid 1px ${color.incorrect()}`,
   },
-  dragged: {
-    position: 'absolute',
-    left: 16,
-    maxWidth: '60px',
+  '&.Mui-disabled': {
+    opacity: 1,
   },
-  correct: {
-    border: `solid 1px ${color.correct()}`,
+}));
+
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  // 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',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
   },
-  incorrect: {
-    border: `solid 1px ${color.incorrect()}`,
+  // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
+  // Padding for top and bottom will instead be controlled by the container for consistent layout
+  // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
+  '& p': {
+    marginTop: '0',
+    marginBottom: '0',
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
   },
-  over: {
+  '&.over': {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   },
+  '&.hidden': {
+    color: 'transparent',
+    opacity: 0,
+  },
+  '&.dragged': {
+    position: 'absolute',
+    left: 16,
+    maxWidth: '60px',
+  },
 }));
 
-export class BlankContent extends React.Component {
-  static propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool,
-    duplicates: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    isOver: PropTypes.bool,
-    dragItem: PropTypes.object,
-    correct: PropTypes.bool,
-    onChange: PropTypes.func,
+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 = () => {
+    updateDimensions();
   };
 
-  constructor() {
-    super();
-    this.state = {
-      height: 0,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    renderMath(this.rootRef);
-    const { choice: currentChoice } = this.props;
-    const { choice: prevChoice } = prevProps;
-
-    if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
-      if (!currentChoice) {
-        this.setState({
-          height: 0,
-        });
-        return;
-      }
+  const handleElements = () => {
+    const imageElement = spanRef.current?.querySelector('img');
+    if (imageElement) {
+      imageElement.onload = handleImageLoad;
+    } else {
       setTimeout(() => {
-        this.setState({
-          height: this.spanRef.offsetHeight,
-        });
+        updateDimensions();
       }, 300);
     }
-  }
+  };
 
-  addDraggableFalseAttributes(parent) {
-    parent.childNodes.forEach((elem) => {
-      if (elem instanceof Element || elem instanceof HTMLDocument) {
-        elem.setAttribute('draggable', false);
-      }
-    });
-  }
-
-  render() {
-    const { disabled, choice, classes, isOver, dragItem, correct } = this.props;
-    const draggedLabel = dragItem && isOver && dragItem.choice.value;
-    const label = choice && choice.value;
-
-    return (
-      // 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.
-      <Chip
-        clickable={false}
-        disabled={true}
-        ref={(ref) => {
-          //eslint-disable-next-line
-          this.rootRef = ReactDOM.findDOMNode(ref);
-        }}
-        component="span"
-        label={
-          <React.Fragment>
-            <span
-              className={classnames(classes.chipLabel, isOver && classes.over, {
-                [classes.hidden]: draggedLabel,
-              })}
-              ref={(ref) => {
-                if (ref) {
-                  //eslint-disable-next-line
-                  this.spanRef = ReactDOM.findDOMNode(ref);
-                  ref.innerHTML = label || '';
-                  this.addDraggableFalseAttributes(ref);
-                }
-              }}
-            >
-              {' '}
-            </span>
-            {draggedLabel && (
-              <span
-                className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}
-                ref={(ref) => {
-                  if (ref) {
-                    //eslint-disable-next-line
-                    this.spanRef = ReactDOM.findDOMNode(ref);
-                    ref.innerHTML = draggedLabel || '';
-                    this.addDraggableFalseAttributes(ref);
-                  }
-                }}
-              >
-                {' '}
-              </span>
-            )}
-          </React.Fragment>
-        }
-        className={classnames(classes.chip, isOver && classes.over, {
-          [classes.correct]: correct !== undefined && correct,
-          [classes.incorrect]: correct !== undefined && !correct,
-        })}
-        variant={disabled ? 'outlined' : undefined}
-        style={{
-          ...(this.state.height ? { height: this.state.height } : {}),
-        }}
-        classes={{
-          label: isOver && classes.over,
-        }}
-      />
-    );
-  }
-}
+  const updateDimensions = () => {
+    if (spanRef.current && rootRef.current) {
+      // Temporarily set rootRef width to 'auto' for natural measurement
+      rootRef.current.style.width = 'auto';
 
-const StyledBlankContent = useStyles(BlankContent);
+      // Get the natural dimensions of the content
+      const width = spanRef.current.offsetWidth || 0;
+      const height = spanRef.current.offsetHeight || 0;
 
-const connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {
-  const { classes, isOver } = props;
+      const widthWithPadding = width + 24; // 12px padding on each side
+      const heightWithPadding = height + 24; // 12px padding on top and bottom
 
-  return connectDropTarget(
-    connectDragSource(
-      <span className={classnames(classes.content, isOver && classes.over)}>
-        <StyledBlankContent {...props} />
-      </span>,
-    ),
-  );
-});
+      const responseAreaWidth = parseFloat(emptyResponseAreaWidth) || 0;
+      const responseAreaHeight = parseFloat(emptyResponseAreaHeight) || 0;
 
-const tileTarget = {
-  drop(props, monitor) {
-    const draggedItem = monitor.getItem();
+      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
+      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
 
-    log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
+      setDimensions((prevState) => ({
+        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
+        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,
+      }));
 
-    if (draggedItem.id !== props.id) {
-      props.onChange(props.id, draggedItem.choice.id);
+      rootRef.current.style.width = `${adjustedWidth}px`;
+      rootRef.current.style.height = `${adjustedHeight}px`;
     }
+  };
+
+  const getRootDimensions = () => {
+    // Handle potential non-numeric values
+    const responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth)) ? parseFloat(emptyResponseAreaWidth) : 0;
+    const responseAreaHeight = !isNaN(parseFloat(emptyResponseAreaHeight)) ? parseFloat(emptyResponseAreaHeight) : 0;
 
+    const rootStyle = {
+      height: dimensions.height || responseAreaHeight,
+      width: dimensions.width || responseAreaWidth,
+    };
+
+    // add minWidth, minHeight if width and height are not defined
     return {
-      dropped: draggedItem.id !== props.id,
+      ...rootStyle,
+      ...(responseAreaWidth ? {} : { minWidth: 90 }),
+      ...(responseAreaHeight ? {} : { minHeight: 32 }),
     };
-  },
-  canDrop(props, monitor) {
-    const draggedItem = monitor.getItem();
+  };
 
-    return draggedItem.instanceId === props.instanceId;
-  },
-};
+  useEffect(() => {
+    handleElements();
+  }, []);
 
-const DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  dragItem: monitor.getItem(),
-}))(connectedBlankContent);
+  // Render math for the placeholder/preview when dragging over
+  useEffect(() => {
+    if (rootRef.current) {
+      renderMath(rootRef.current);
+    }
+  }, [isOver, dragItem?.choice?.value]);
 
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled && !!props.choice;
-  },
-  beginDrag(props) {
-    return {
-      id: props.id,
-      choice: props.choice,
-      instanceId: props.instanceId,
-      fromChoice: true,
-    };
-  },
-  endDrag(props, monitor) {
-    // this will be null if it did not drop
-    const dropResult = monitor.getDropResult();
+  useEffect(() => {
+    if (!choice) {
+      setDimensions({ height: 0, width: 0 });
+      return;
+    }
+    handleElements();
+  }, [choice]);
 
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
-      const draggedItem = monitor.getItem();
+  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();
 
-      if (draggedItem.fromChoice) {
-        props.onChange(props.id, undefined);
+  return (
+    <StyledChip
+      clickable={false}
+      disabled={disabled}
+      ref={rootRef}
+      component="span"
+      label={
+        <React.Fragment>
+          <StyledChipLabel
+            ref={spanRef}
+            draggable={true}
+            className={classnames({
+              over: isOver,
+              hidden: draggedLabel,
+            })}
+            dangerouslySetInnerHTML={{ __html: label || '' }}
+          />
+          {draggedLabel && (
+            <StyledChipLabel
+              draggable={true}
+              className={classnames({
+                over: isOver,
+                dragged: true,
+              })}
+              dangerouslySetInnerHTML={{ __html: draggedLabel || '' }}
+            />
+          )}
+        </React.Fragment>
       }
-    }
-  },
+      className={classnames({
+        over: isOver,
+        parentOver: isOver,
+        correct: correct !== undefined && correct,
+        incorrect: correct !== undefined && !correct,
+      })}
+      variant={disabled ? 'outlined' : undefined}
+      style={style}
+    />
+  );
+}
+
+BlankContent.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0,
 };
 
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(DropTile);
+BlankContent.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceId: PropTypes.string,
+};
+
+// New functional component using @dnd-kit hooks
+function DragDropBlank({
+  id,
+  disabled,
+  duplicates,
+  choice,
+  correct,
+  onChange,
+  emptyResponseAreaWidth,
+  emptyResponseAreaHeight,
+  instanceId,
+}) {
+  // Setup draggable functionality
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: `mask-blank-drag-${id}`,
+    disabled: disabled || !choice,
+    data: {
+      id: id,
+      choice: choice,
+      instanceId: instanceId,
+      fromChoice: false, // This is from a blank, not from choices
+      type: 'MaskBlank',
+    },
+  });
+
+  // Setup droppable functionality
+  const { setNodeRef: setDropNodeRef, isOver, active: dragItem } = useDroppable({
+    id: `mask-blank-drop-${id}`,
+    data: {
+      id: id,
+      accepts: ['MaskBlank'],
+      instanceId: instanceId,
+    },
+  });
+
+  // Combine refs for both drag and drop
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <StyledContent
+      ref={setNodeRef}
+      style={style}
+      dragged={isDragging}
+      over={isOver}
+      {...dragAttributes}
+      {...dragListeners}
+    >
+      <BlankContent
+        id={id}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        isOver={isOver}
+        dragItem={dragItem?.data?.current}
+        correct={correct}
+        onChange={onChange}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
+        instanceId={instanceId}
+      />
+    </StyledContent>
+  );
+}
+
+DragDropBlank.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0,
+};
+
+DragDropBlank.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceId: PropTypes.string,
+};
 
-export default DragDropTile;
+export default DragDropBlank;

package/src/components/correct-input.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
+import OutlinedInput from '@mui/material/OutlinedInput';
 import classnames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 
-const correctStyle = (color) => ({
-  borderColor: `${color} !important`,
-});
-
-export default withStyles(() => ({
-  input: {
+const StyledOutlinedInput = styled(OutlinedInput)(() => ({
+  padding: '2px',
+  borderRadius: '4px',
+  fontSize: 'inherit',
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  '& fieldset': {
+    border: 0,
+  },
+  '& .MuiOutlinedInput-input': {
     color: color.text(),
     backgroundColor: color.background(),
     borderRadius: '4px !important',
@@ -26,33 +30,25 @@ export default withStyles(() => ({
         borderColor: 'initial',
       },
     },
-    '&:focus': {
+    '&.Mui-focused': {
       borderColor: color.primaryDark(),
     },
-  },
-  crInput: {
-    padding: '8px !important',
-  },
-  correct: correctStyle(color.correct()),
-  incorrect: correctStyle(color.incorrect()),
-  box: {
-    fontSize: 'inherit',
-  },
-  outlinedInput: {
-    padding: '2px',
-    borderRadius: '4px',
-    '& fieldset': {
-      border: 0,
+    '&.crInput': {
+      padding: '8px !important',
+    },
+    '&.correct': {
+      borderColor: `${color.correct()} !important`,
+    },
+    '&.incorrect': {
+      borderColor: `${color.incorrect()} !important`,
     },
   },
-  notchedOutline: {
-    borderColor: color.correct(),
-  },
-}))((props) => {
+}));
+
+const CorrectInput = (props) => {
   const {
     correct,
     charactersLimit,
-    classes,
     disabled,
     isBox,
     isConstructedResponse,
@@ -60,8 +56,11 @@ export default withStyles(() => ({
     spellCheck,
     ...rest
   } = props;
+
   const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
-  const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};
+  const inputProps = charactersLimit
+    ? { maxLength: charactersLimit, 'aria-label': 'Enter answer' }
+    : { 'aria-label': 'Enter answer' };
 
   if (width) {
     inputProps.style = {
@@ -70,24 +69,24 @@ export default withStyles(() => ({
   }
 
   return (
-    <OutlinedInput
+    <StyledOutlinedInput
       className={classnames({
-        [classes.disabledInput]: disabled,
-        [classes.box]: isBox,
-        [classes.outlinedInput]: true,
+        disabledInput: disabled,
+        box: isBox,
       })}
       classes={{
         input: classnames({
-          [classes.input]: true,
-          [classes[label]]: label,
-          [classes.crInput]: isConstructedResponse,
+          [label]: label,
+          crInput: isConstructedResponse,
         }),
       }}
       inputProps={inputProps}
-      labelWidth={0}
       disabled={disabled}
       spellCheck={spellCheck}
       {...rest}
     />
   );
-});
+};
+
+export default CorrectInput;
+