@pie-lib/editable-html-tip-tap 1.0.20 → 1.0.21-next.6057

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -1,215 +1,221 @@
-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 { 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/RespArea';
 
-const useStyles = withStyles((theme) => ({
-  content: {
-    border: `solid 0px ${theme.palette.primary.main}`,
-    '& mjx-frac': {
-      fontSize: '120% !important',
-    },
-  },
-  chip: {
-    minWidth: '90px',
-  },
-  correct: {
-    border: `solid 1px ${color.correct()}`,
-  },
-  incorrect: {
-    border: `solid 1px ${theme.palette.error.main}`,
-  },
-  selected: {
-    border: `2px solid ${color.primaryDark()} !important`,
+const StyledContent = styled('span')(({ theme }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  '& mjx-frac': {
+    fontSize: '120% !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);
-  }
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value }) {
+  const [hoveredElementSize, setHoveredElementSize] = useState(null);
+  const elementRef = useRef(null);
 
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleClick);
-  }
+  const handleClick = (event) => {
+    if (!elementRef.current) return;
 
-  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 };
+    if (elementRef.current.contains(event.target)) {
+      elementRef.current.classList.add('selected');
+    } else {
+      elementRef.current.classList.remove('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 });
+  }, [value?.value, isOver, dragItem?.value?.value]);
+
+  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,
+      }}
+      data-key={n.index}
+      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;
+BlankContent.propTypes = {
+  n: PropTypes.object,
+  children: PropTypes.node,
+  isDragging: PropTypes.bool,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  value: PropTypes.object,
+};
 
-    if (shouldDrop) {
-      props.onChange(draggedItem.value);
-    }
+function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
+  const { attributes: dragAttributes, listeners: dragListeners, setNodeRef: setDragNodeRef, isDragging } = useDraggable(
+    {
+      id: `drag-${n.index}`,
+      disabled: disabled || !value?.value,
+      data: {
+        id: `drag-${n.index}`,
+        value,
+        instanceId,
+        n,
+        pos,
+        opts: { duplicates },
+        type: 'drag-in-the-blank-placed-choice',
+        fromChoice: !value,
+        onRemove: (draggedData) => removeResponse(draggedData),
+        onDrop: (draggedData, dropData) => {
+          // check if we're dropping into a blank
+          const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
+
+          if (!isValidBlank) return;
+
+          // place into blank
+          onChange(draggedData);
+
+          if (!duplicates && draggedData.fromChoice) {
+            removeResponse(draggedData);
+          }
+        },
+      },
+    },
+  );
+
+  const { setNodeRef: setDropNodeRef, isOver, active: dragItem } = useDroppable({
+    id: `drop-${n.index}`,
+    data: {
+      type: 'drag-in-the-blank-drop-choice',
+      accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
+      instanceId: instanceId,
+      value: value,
+      id: `drop-${n.index}`,
+      pos,
+      n,
+      opts: { duplicates },
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
+
+        if (!isValidBlank) return;
+
+        // if the dragged and dropped data are the same, do nothing
+        if (draggedData.value.id === dropData.value.id) return;
+
+        if (draggedData.type === 'drag-in-the-blank-choice') {
+          // place into blank
+          onChange(draggedData);
+
+          if (!duplicates && draggedData.fromChoice) {
+            removeResponse(draggedData);
+          }
+          return;
+        }
+
+        // moving placed choice between blanks
+        if (draggedData.type === 'drag-in-the-blank-placed-choice') {
+          // clear target blank
+          removeResponse(dropData);
+
+          // set new blank value
+          onChange(draggedData);
+
+          // clear original blank - slight delay to ensure state updates correctly
+          setTimeout(() => removeResponse(draggedData), 10);
+        }
+      },
+    },
+  });
 
-    return {
-      dropped: shouldDrop,
-    };
-  },
-  canDrop(props, monitor) {
-    const draggedItem = monitor.getItem();
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
 
-    return draggedItem.instanceId === props.instanceId;
-  },
-};
+  const dragContent = (
+    <BlankContent n={n} isDragging={isDragging} isOver={isOver} dragItem={dragItem?.data?.current} value={value}>
+      {children}
+    </BlankContent>
+  );
 
-const DropTile = DropTarget('drag-in-the-blank-choice', tileTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver({ shallow: true }),
-  dragItem: monitor.getItem(),
-}))(connectedBlankContent);
+  const dragEl = !value ? (
+    <span ref={setDropNodeRef}>{dragContent}</span>
+  ) : (
+    <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>
+      {dragContent}
+    </span>
+  );
 
-export const tileSource = {
-  canDrag(props) {
-    return !props.disabled && !!props.value;
-  },
-  beginDrag(props) {
-    return {
-      id: props.targetId,
-      value: props.value,
-      instanceId: props.instanceId,
-      fromChoice: true,
-    };
-  },
-  endDrag(props, monitor) {
-    // this will be null if it did not drop
-    const dropResult = monitor.getDropResult();
+  const content = <StyledContent className={classnames(isOver && 'over')}>{dragEl}</StyledContent>;
 
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
-      const draggedItem = monitor.getItem();
+  return content;
+}
 
-      if (draggedItem.fromChoice) {
-        props.removeResponse(draggedItem.value);
-      }
-    }
-  },
+DragDropChoice.propTypes = {
+  value: PropTypes.object,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.string,
+  children: PropTypes.node,
+  n: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  removeResponse: PropTypes.func.isRequired,
+  duplicates: PropTypes.bool,
 };
 
-export default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(DropTile);
+export default DragDropChoice;

package/src/components/respArea/ToolbarIcon.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
 export const Chevron = (props) => {
   const { direction, style } = props;
@@ -51,18 +51,16 @@ export const GripIcon = ({ style }) => (
   </span>
 );
 
-const styles = (theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans !important',
-    fontSize: theme.typography.fontSize,
-    fontWeight: 'bold',
-    lineHeight: '14px',
-    position: 'relative',
-    top: '7px',
-    width: '110px',
-    height: '28px',
-    whiteSpace: 'nowrap',
-  },
-});
+const StyledToolbarIcon = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri Sans !important',
+  fontSize: theme.typography.fontSize,
+  fontWeight: 'bold',
+  lineHeight: '14px',
+  position: 'relative',
+  top: '7px',
+  width: '110px',
+  height: '28px',
+  whiteSpace: 'nowrap',
+}));
 
-export const ToolbarIcon = withStyles(styles)(({ classes }) => <div className={classes.icon}>+ Response Area</div>);
+export const ToolbarIcon = () => <StyledToolbarIcon>+ Response Area</StyledToolbarIcon>;

package/src/extensions/component.jsx

@@ -1,10 +1,9 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
 import debug from 'debug';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import { withStyles } from '@material-ui/core/styles';
+import LinearProgress from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
 import { NodeViewWrapper } from '@tiptap/react';
 import InsertImageHandler from '../components/image/InsertImageHandler';
 import ImageToolbar from '../components/image/ImageToolbar';
@@ -12,13 +11,61 @@ import CustomToolbarWrapper from './custom-toolbar-wrapper';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');
 
+const StyledProgress = styled(LinearProgress, {
+  shouldForwardProp: (prop) => prop !== 'hideProgress',
+})(({ hideProgress }) => ({
+  position: 'absolute',
+  left: '0',
+  width: 'fit-content',
+  top: '0%',
+  transition: 'opacity 200ms linear',
+  ...(hideProgress && {
+    opacity: 0,
+  }),
+}));
+
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),
+})(({ theme, active, loading, pendingDelete }) => ({
+  position: 'relative',
+  border: active ? `solid 1px ${theme.palette.primary.main}` : `solid 1px ${theme.palette.common.white}`,
+  display: 'flex',
+  transition: 'opacity 200ms linear',
+  ...(loading && {
+    opacity: 0.3,
+  }),
+  ...(pendingDelete && {
+    opacity: 0.3,
+  }),
+}));
+
+const StyledImageContainer = styled('div')(({ theme }) => ({
+  position: 'relative',
+  width: 'fit-content',
+  display: 'flex',
+  alignItems: 'center',
+  '&&:hover > .resize': {
+    display: 'block',
+  },
+}));
+
+const StyledResize = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  cursor: 'col-resize',
+  height: '35px',
+  width: '5px',
+  borderRadius: 8,
+  marginLeft: '5px',
+  marginRight: '10px',
+  display: 'none',
+}));
+
 const sizePx = (s) => (s ? `${s}px` : 'calc(20px)');
 
 function ImageComponent(props) {
   const {
     node,
     editor,
-    classes,
     attributes,
     onFocus,
     selected,
@@ -165,34 +212,27 @@ function ImageComponent(props) {
 
   return (
     <NodeViewWrapper>
-      <div
+      <StyledRoot
         onFocus={onFocus}
-        className={classNames(
-          classes.root,
-          !node.attrs.loaded && classes.loading,
-          node.attrs.deleteStatus === 'pending' && classes.pendingDelete,
-        )}
+        active={selected}
+        loading={!node.attrs.loaded}
+        pendingDelete={node.attrs.deleteStatus === 'pending'}
         style={{ justifyContent: flexAlign }}
       >
-        <LinearProgress
-          mode="determinate"
-          value={node.attrs.percent || 0}
-          className={classNames(classes.progress, node.attrs.loaded && classes.hideProgress)}
-        />
+        <StyledProgress mode="determinate" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />
 
-        <div className={classes.imageContainer}>
+        <StyledImageContainer>
           <img
             {...attributes}
             ref={imgRef}
             src={node.attrs.src}
-            className={classNames(classes.image, selected && classes.active)}
             style={style}
             onLoad={loadImage}
             alt={node.attrs.alt}
           />
-          <div ref={resizeRef} className={classNames(classes.resize, 'resize')} />
-        </div>
-      </div>
+          <StyledResize ref={resizeRef} className="resize" />
+        </StyledImageContainer>
+      </StyledRoot>
 
       {showToolbar && (
         <div
@@ -234,78 +274,10 @@ function ImageComponent(props) {
 ImageComponent.propTypes = {
   node: PropTypes.object.isRequired,
   editor: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
   attributes: PropTypes.object,
   onFocus: PropTypes.func,
   maxImageWidth: PropTypes.number,
   maxImageHeight: PropTypes.number,
 };
 
-export default withStyles((theme) => ({
-  portal: {
-    position: 'absolute',
-    opacity: 0,
-    transition: 'opacity 200ms linear',
-  },
-  floatingButtonRow: {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '1px',
-    display: 'flex',
-    padding: '10px',
-    border: `solid 1px ${theme.palette.grey[200]}`,
-    boxShadow:
-      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-  },
-  progress: {
-    position: 'absolute',
-    left: '0',
-    width: 'fit-content',
-    top: '0%',
-    transition: 'opacity 200ms linear',
-  },
-  hideProgress: {
-    opacity: 0,
-  },
-  loading: {
-    opacity: 0.3,
-  },
-  pendingDelete: {
-    opacity: 0.3,
-  },
-  root: {
-    position: 'relative',
-    border: `solid 1px ${theme.palette.common.white}`,
-    display: 'flex',
-    transition: 'opacity 200ms linear',
-  },
-  delete: {
-    position: 'absolute',
-    right: 0,
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-    display: 'flex',
-    alignItems: 'center',
-
-    '&&:hover > .resize': {
-      display: 'block',
-    },
-  },
-  active: {
-    border: `solid 1px ${theme.palette.primary.main}`,
-  },
-  resize: {
-    backgroundColor: theme.palette.primary.main,
-    cursor: 'col-resize',
-    height: '35px',
-    width: '5px',
-    borderRadius: 8,
-    marginLeft: '5px',
-    marginRight: '10px',
-    display: 'none',
-  },
-  drawableHeight: {
-    minHeight: 350,
-  },
-}))(ImageComponent);
+export default ImageComponent;

package/src/extensions/css.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Mark, mergeAttributes } from '@tiptap/core';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 
 export const removeDialogs = () => {
   const prevDialogs = document.querySelectorAll('.insert-css-dialog');
@@ -74,9 +74,10 @@ const insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {
         tag = 'div';
       }
 
-      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(0, selection.$anchor.textOffset)}${html}${parentNode.text.slice(
-        selection.$head.textOffset,
-      )}</${tag}>`;
+      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(
+        0,
+        selection.$anchor.textOffset,
+      )}${html}${parentNode.text.slice(selection.$head.textOffset)}</${tag}>`;
     }
 
     return html;