@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

package/src/plugins/media/media-toolbar.jsx

@@ -1,56 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const useStyles = withStyles((theme) => ({
-  root: {
-    position: 'relative',
-    bottom: '5px',
-    left: 0,
-    width: '100%',
-    background: theme.palette.common.white,
-    display: 'inline-flex',
-    padding: '5px',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-  },
-  editContainer: {
-    cursor: 'pointer',
-    flex: 3,
-    border: `solid ${theme.palette.common.black}`,
-    textAlign: 'right',
-    borderWidth: '0 2px 0 0',
-    marginRight: '5px',
-    paddingRight: '5px',
-  },
-  removeContainer: {
-    cursor: 'pointer',
-  },
+const StyledMediaToolbar = styled('span')(({ theme }) => ({
+  position: 'relative',
+  bottom: '5px',
+  left: 0,
+  width: '100%',
+  background: theme.palette.common.white,
+  display: 'inline-flex',
+  padding: '5px',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+}));
+
+const StyledEditContainer = styled('span')(({ theme }) => ({
+  cursor: 'pointer',
+  flex: 3,
+  border: `solid ${theme.palette.common.black}`,
+  textAlign: 'right',
+  borderWidth: '0 2px 0 0',
+  marginRight: '5px',
+  paddingRight: '5px',
+}));
+
+const StyledRemoveContainer = styled('span')(() => ({
+  cursor: 'pointer',
 }));
 
 class MediaToolbar extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     onEdit: PropTypes.func,
     hideEdit: PropTypes.bool,
     onRemove: PropTypes.func,
   };
 
   render() {
-    const { classes, hideEdit, onEdit, onRemove } = this.props;
+    const { hideEdit, onEdit, onRemove } = this.props;
 
     return (
-      <span className={classes.root}>
+      <StyledMediaToolbar>
         {hideEdit ? null : (
-          <span className={classes.editContainer} onClick={onEdit}>
+          <StyledEditContainer onClick={onEdit}>
             Edit Settings
-          </span>
+          </StyledEditContainer>
         )}
-        <span className={classes.removeContainer} onClick={onRemove}>
+        <StyledRemoveContainer onClick={onRemove}>
           Remove
-        </span>
-      </span>
+        </StyledRemoveContainer>
+      </StyledMediaToolbar>
     );
   }
 }
 
-export default useStyles(MediaToolbar);
+export default MediaToolbar;

package/src/plugins/media/media-wrapper.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const useStyles = withStyles(() => ({
-  root: {
-    position: 'relative',
-  },
-  editor: {
+const StyledMediaWrapper = styled('span')(() => ({
+  position: 'relative',
+  '&.editor': {
     display: 'inline-block',
     overflow: 'hidden',
   },
@@ -15,19 +13,18 @@ const useStyles = withStyles(() => ({
 
 class MediaWrapper extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     children: PropTypes.array,
     editor: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
   render() {
-    const { editor, classes, children, width, ...rest } = this.props;
+    const { editor, children, width, ...rest } = this.props;
 
     return (
-      <span
-        className={classNames(classes.root, {
-          [classes.editor]: editor,
+      <StyledMediaWrapper
+        className={classNames({
+          editor: editor,
         })}
         {...rest}
         style={{
@@ -35,9 +32,9 @@ class MediaWrapper extends React.Component {
         }}
       >
         {children}
-      </span>
+      </StyledMediaWrapper>
     );
   }
 }
 
-export default useStyles(MediaWrapper);
+export default MediaWrapper;

package/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -1,215 +1,228 @@
-import React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
-import { DragSource, DropTarget } from '@pie-lib/drag';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import classnames from 'classnames';
 
 import { GripIcon } from '../icons';
 
-const useStyles = withStyles((theme) => ({
-  content: {
-    border: `solid 0px ${theme.palette.primary.main}`,
-    '& mjx-frac': {
-      fontSize: '120% !important',
-    },
+const StyledContent = styled('span')(({ theme }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  '& mjx-frac': {
+    fontSize: '120% !important',
   },
-  chip: {
+  '&.chip': {
     minWidth: '90px',
   },
-  correct: {
+  '&.correct': {
     border: `solid 1px ${color.correct()}`,
   },
-  incorrect: {
+  '&.incorrect': {
     border: `solid 1px ${theme.palette.error.main}`,
   },
-  selected: {
+  '&.selected': {
     border: `2px solid ${color.primaryDark()} !important`,
   },
 }));
 
-export class BlankContent extends React.Component {
-  static propTypes = {
-    n: PropTypes.object,
-    children: PropTypes.func,
-    isDragging: PropTypes.bool,
-    isOver: PropTypes.bool,
-    dragItem: PropTypes.object,
-    value: PropTypes.object,
-    classes: PropTypes.object,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = this.handleClick.bind(this);
-    this.state = { hoveredElementSize: null };
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleClick);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleClick);
-  }
-
-  handleClick(event) {
-    const { classes } = this.props;
-
-    if (this.elementRef) {
-      this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
-    }
-  }
-
-  getSnapshotBeforeUpdate(prevProps) {
-    if (!prevProps.isOver && this.props.isOver && this.elementRef) {
-      const node = this.elementRef;
-      return { width: node.offsetWidth, height: node.offsetHeight };
+export function BlankContent({ 
+  n, 
+  children, 
+  isDragging, 
+  isOver, 
+  dragItem, 
+  value,
+  disabled,
+  style: externalStyle
+}) {
+  const [hoveredElementSize, setHoveredElementSize] = useState(null);
+  const elementRef = useRef(null);
+
+  const handleClick = (event) => {
+    if (elementRef.current) {
+      elementRef.current.className = elementRef.current.contains(event.target) ? 'selected' : '';
     }
-    return null;
-  }
+  };
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.elementRef && typeof renderMath === 'function') {
-      renderMath(this.elementRef);
-    }
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
 
-    if (
-      snapshot &&
-      (!this.state.hoveredElementSize ||
-        this.state.hoveredElementSize.width !== snapshot.width ||
-        this.state.hoveredElementSize.height !== snapshot.height)
-    ) {
-      this.setState({ hoveredElementSize: snapshot });
-      return;
+  useEffect(() => {
+    if (elementRef.current && typeof renderMath === 'function') {
+      renderMath(elementRef.current);
     }
-
-    if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
-      this.setState({ hoveredElementSize: null });
+  });
+
+  useEffect(() => {
+    if (isOver && elementRef.current && !hoveredElementSize) {
+      const node = elementRef.current;
+      setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });
+    } else if (!isOver && hoveredElementSize) {
+      setHoveredElementSize(null);
     }
-  }
-
-  render() {
-    const { n, children, isDragging, dragItem, isOver, value } = this.props;
-    const { hoveredElementSize } = this.state;
-
-    const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
-    const finalLabel = isDragging ? '\u00A0' : label;
-    const hasGrip = finalLabel !== '\u00A0';
-    const isPreview = dragItem && isOver;
-
-    return (
-      <div
-        ref={(ref) => (this.elementRef = ref)}
-        style={{
-          display: 'inline-flex',
-          minWidth: '178px',
-          minHeight: '36px',
-          background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
-          border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
-          boxSizing: 'border-box',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          position: 'relative',
-          padding: '8px 8px 8px 35px',
-          width: hoveredElementSize ? hoveredElementSize.width : undefined,
-          height: hoveredElementSize ? hoveredElementSize.height : undefined,
-        }}
-        data-key={n.key}
-        contentEditable={false}
-      >
-        {hasGrip && (
-          <GripIcon
-            style={{
-              position: 'absolute',
-              top: '6px',
-              left: '15px',
-              color: '#9B9B9B',
-            }}
-            contentEditable={false}
-          />
-        )}
-        <span
-          dangerouslySetInnerHTML={{
-            __html: finalLabel,
+  }, [isOver, hoveredElementSize]);
+
+  const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
+  const finalLabel = isDragging ? '\u00A0' : label;
+  const hasGrip = finalLabel !== '\u00A0';
+  const isPreview = dragItem && isOver;
+
+  return (
+    <div
+      ref={elementRef}
+      style={{
+        display: 'inline-flex',
+        minWidth: '178px',
+        minHeight: '36px',
+        background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
+        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
+        boxSizing: 'border-box',
+        borderRadius: '3px',
+        overflow: 'hidden',
+        position: 'relative',
+        padding: '8px 8px 8px 35px',
+        width: hoveredElementSize ? hoveredElementSize.width : undefined,
+        height: hoveredElementSize ? hoveredElementSize.height : undefined,
+        ...externalStyle,
+      }}
+      data-key={n.key}
+      contentEditable={false}
+    >
+      {hasGrip && (
+        <GripIcon
+          style={{
+            position: 'absolute',
+            top: '6px',
+            left: '15px',
+            color: '#9B9B9B',
           }}
+          contentEditable={false}
         />
-        {children}
-      </div>
-    );
-  }
+      )}
+      <span
+        dangerouslySetInnerHTML={{
+          __html: finalLabel,
+        }}
+      />
+      {children}
+    </div>
+  );
 }
 
-const StyledBlankContent = useStyles(BlankContent);
-
-const connectedBlankContent = useStyles(({ connectDropTarget, connectDragSource, ...props }) => {
-  const { classes, isOver, value } = props;
-  const dragContent = <StyledBlankContent {...props} />;
-  const dragEl = !value ? dragContent : connectDragSource(<span>{dragContent}</span>);
-  const content = <span className={classnames(classes.content, isOver && classes.over)}>{dragEl}</span>;
-
-  return connectDropTarget ? connectDropTarget(content) : content;
-});
-
-export const tileTarget = {
-  drop(props, monitor) {
-    const draggedItem = monitor.getItem();
-    const shouldDrop =
-      isUndefined(draggedItem.value.index) ||
-      isUndefined(props.value.index) ||
-      draggedItem.value.index !== props.value.index;
-
-    if (shouldDrop) {
-      props.onChange(draggedItem.value);
-    }
-
-    return {
-      dropped: shouldDrop,
-    };
-  },
-  canDrop(props, monitor) {
-    const draggedItem = monitor.getItem();
-
-    return draggedItem.instanceId === props.instanceId;
-  },
+BlankContent.propTypes = {
+  n: PropTypes.object,
+  children: PropTypes.func,
+  isDragging: PropTypes.bool,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  value: PropTypes.object,
+  disabled: PropTypes.bool,
+  style: PropTypes.object,
 };
 
-const DropTile = DropTarget('drag-in-the-blank-choice', tileTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver({ shallow: true }),
-  dragItem: monitor.getItem(),
-}))(connectedBlankContent);
-
-export const tileSource = {
-  canDrag(props) {
-    return !props.disabled && !!props.value;
-  },
-  beginDrag(props) {
-    return {
-      id: props.targetId,
-      value: props.value,
-      instanceId: props.instanceId,
+function DragDropChoice({ 
+  value, 
+  disabled, 
+  onChange, 
+  removeResponse, 
+  instanceId, 
+  targetId, 
+  duplicates,
+  n,
+  children 
+}) {
+  // Setup draggable functionality
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    transform: dragTransform,
+    isDragging,
+  } = useDraggable({
+    id: `drag-${n.key}`,
+    disabled: disabled || !value,
+    data: {
+      id: targetId,
+      value: value,
+      instanceId: instanceId,
       fromChoice: true,
-    };
-  },
-  endDrag(props, monitor) {
-    // this will be null if it did not drop
-    const dropResult = monitor.getDropResult();
+    },
+  });
+
+  // Setup droppable functionality
+  const {
+    setNodeRef: setDropNodeRef,
+    isOver,
+    active: dragItem,
+  } = useDroppable({
+    id: `drop-${n.key}`,
+    data: {
+      accepts: ['drag-in-the-blank-choice'],
+      instanceId: instanceId,
+      value: value,
+    },
+  });
 
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
-      const draggedItem = monitor.getItem();
+  // Combine refs for both drag and drop
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
 
-      if (draggedItem.fromChoice) {
-        props.removeResponse(draggedItem.value);
-      }
-    }
-  },
+  const dragStyle = {
+    transform: CSS.Translate.toString(dragTransform),
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const dragContent = (
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      disabled={disabled}
+      style={dragStyle}
+    >
+      {children}
+    </BlankContent>
+  );
+
+  const dragEl = !value ? (
+    <span ref={setDropNodeRef}>{dragContent}</span>
+  ) : (
+    <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>
+      {dragContent}
+    </span>
+  );
+
+  const content = (
+    <StyledContent className={classnames(isOver && 'over')}>
+      {dragEl}
+    </StyledContent>
+  );
+
+  return content;
+}
+
+DragDropChoice.propTypes = {
+  value: PropTypes.object,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  removeResponse: PropTypes.func,
+  instanceId: PropTypes.string,
+  targetId: PropTypes.string,
+  duplicates: PropTypes.bool,
+  n: PropTypes.object,
+  children: PropTypes.node,
 };
 
-export default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(DropTile);
+export default DragDropChoice;

package/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { DragProvider } from '@pie-lib/drag';
 import DragDropTile from './choice';
 
 export const onValueChange = (nodeProps, n, value) => {
@@ -38,30 +39,65 @@ const DragDrop = (props) => {
   const { attributes, data, n, nodeProps, opts } = props;
   const { inTable } = data;
 
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    
+    if (!over || !active) return;
+
+    const draggedData = active.data.current;
+    const dropData = over.data.current;
+
+    // Check if this is a valid drop for drag-in-the-blank
+    if (
+      draggedData &&
+      dropData &&
+      dropData.instanceId === draggedData.instanceId &&
+      over.id.startsWith('drop-')
+    ) {
+      // Handle the drop
+      const shouldDrop =
+        !draggedData.value?.index ||
+        !data.index ||
+        draggedData.value.index !== data.index;
+
+      if (shouldDrop) {
+        onValueChange(nodeProps, n, draggedData.value);
+      }
+
+      // Remove from source if not duplicates
+      if (!opts.options.duplicates && draggedData.fromChoice) {
+        onRemoveResponse(nodeProps, draggedData.value);
+      }
+    }
+  };
+
   return (
-    <span
-      {...attributes}
-      style={{
-        display: 'inline-flex',
-        minHeight: '50px',
-        minWidth: '178px',
-        position: 'relative',
-        margin: inTable ? '10px' : '0 10px',
-        cursor: 'pointer',
-      }}
-    >
-      <DragDropTile
-        n={n}
-        dragKey={n.key}
-        targetId="0"
-        value={data}
-        duplicates={opts.options.duplicates}
-        onChange={(value) => onValueChange(nodeProps, n, value)}
-        removeResponse={(value) => onRemoveResponse(nodeProps, value)}
+    <DragProvider onDragEnd={handleDragEnd}>
+      <span
+        {...attributes}
+        style={{
+          display: 'inline-flex',
+          minHeight: '50px',
+          minWidth: '178px',
+          position: 'relative',
+          margin: inTable ? '10px' : '0 10px',
+          cursor: 'pointer',
+        }}
       >
-        {nodeProps.children}
-      </DragDropTile>
-    </span>
+        <DragDropTile
+          n={n}
+          dragKey={n.key}
+          targetId="0"
+          value={data}
+          duplicates={opts.options.duplicates}
+          onChange={(value) => onValueChange(nodeProps, n, value)}
+          removeResponse={(value) => onRemoveResponse(nodeProps, value)}
+          instanceId={nodeProps.editor?.props?.instanceId || 'default'}
+        >
+          {nodeProps.children}
+        </DragDropTile>
+      </span>
+    </DragProvider>
   );
 };