@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/editable-html/src/plugins/media/media-wrapper.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-const useStyles = withStyles(() => ({
-  root: {
-    position: 'relative',
-  },
-  editor: {
-    display: 'inline-block',
-    overflow: 'hidden',
-  },
-}));
-
-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;
-
-    return (
-      <span
-        className={classNames(classes.root, {
-          [classes.editor]: editor,
-        })}
-        {...rest}
-        style={{
-          width: width || 300,
-        }}
-      >
-        {children}
-      </span>
-    );
-  }
-}
-
-export default useStyles(MediaWrapper);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/rendering/index.js

@@ -1,31 +0,0 @@
-import React from 'react';
-
-/**
- * Plugin to render the normal divs and spans with attributes (if they are provided)
- */
-export default () => {
-  return {
-    name: 'renderingPlugin',
-    renderNode: (props) => {
-      const { attributes, children, node } = props;
-
-      if (node.object !== 'block' && node.object !== 'inline') {
-        return;
-      }
-
-      const Tag = node.object === 'block' ? 'div' : 'span';
-      const style = { position: 'relative' };
-      const extraAttributes = node.data.get('attributes');
-
-      return React.createElement(
-        Tag,
-        {
-          ...attributes,
-          ...extraAttributes,
-          style: style,
-        },
-        children,
-      );
-    },
-  };
-};

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -1,215 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-import { DragSource, DropTarget } from '@pie-lib/drag';
-import { color } from '@pie-lib/render-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-import { withStyles } from '@material-ui/core/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',
-    },
-  },
-  chip: {
-    minWidth: '90px',
-  },
-  correct: {
-    border: `solid 1px ${color.correct()}`,
-  },
-  incorrect: {
-    border: `solid 1px ${theme.palette.error.main}`,
-  },
-  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 };
-    }
-    return null;
-  }
-
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.elementRef && typeof renderMath === 'function') {
-      renderMath(this.elementRef);
-    }
-
-    if (
-      snapshot &&
-      (!this.state.hoveredElementSize ||
-        this.state.hoveredElementSize.width !== snapshot.width ||
-        this.state.hoveredElementSize.height !== snapshot.height)
-    ) {
-      this.setState({ hoveredElementSize: snapshot });
-      return;
-    }
-
-    if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
-      this.setState({ hoveredElementSize: 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,
-          }}
-        />
-        {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;
-  },
-};
-
-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,
-      fromChoice: true,
-    };
-  },
-  endDrag(props, monitor) {
-    // this will be null if it did not drop
-    const dropResult = monitor.getDropResult();
-
-    if (!dropResult || (dropResult.dropped && !props.duplicates)) {
-      const draggedItem = monitor.getItem();
-
-      if (draggedItem.fromChoice) {
-        props.removeResponse(draggedItem.value);
-      }
-    }
-  },
-};
-
-export default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(DropTile);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DragDropTile from './choice';
-
-export const onValueChange = (nodeProps, n, value) => {
-  const val = nodeProps.editor.value;
-  const change = val.change();
-
-  change.setNodeByKey(n.key, {
-    data: {
-      ...value,
-      index: n.data.get('index'),
-    },
-  });
-
-  nodeProps.editor.props.onChange(change, () => {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-
-export const onRemoveResponse = (nodeProps, value) => {
-  const val = nodeProps.editor.value;
-  const change = val.change();
-  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
-
-  change.setNodeByKey(dragInTheBlank.key, {
-    data: {
-      index: dragInTheBlank.data.get('index'),
-    },
-  });
-
-  nodeProps.editor.props.onChange(change, () => {
-    nodeProps.editor.props.onEditingDone();
-  });
-};
-
-const DragDrop = (props) => {
-  const { attributes, data, n, nodeProps, opts } = props;
-  const { inTable } = data;
-
-  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)}
-      >
-        {nodeProps.children}
-      </DragDropTile>
-    </span>
-  );
-};
-
-DragDrop.propTypes = {
-  attributes: PropTypes.object,
-  data: PropTypes.object,
-  n: PropTypes.object,
-  nodeProps: PropTypes.object,
-  opts: PropTypes.object,
-};
-
-export default DragDrop;

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const ExplicitConstructedResponse = (props) => {
-  const { attributes, value, error } = props;
-
-  return (
-    <span
-      {...attributes}
-      style={{
-        display: 'inline-flex',
-        visibility: props.isFocused ? 'hidden' : 'visible',
-        minHeight: '55px',
-        minWidth: '178px',
-        position: 'relative',
-        cursor: 'pointer',
-      }}
-    >
-      <div
-        style={{
-          display: 'inline-flex',
-          width: '100%',
-          minHeight: '46px',
-          height: '46px',
-          backgroundColor: '#FFF',
-          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
-          boxSizing: 'border-box',
-          borderRadius: '4px',
-          overflow: 'hidden',
-          padding: '12px 21px',
-          marginLeft: '4px',
-        }}
-        dangerouslySetInnerHTML={{
-          __html: value || '<div>&nbsp;</div>',
-        }}
-      />
-    </span>
-  );
-};
-
-ExplicitConstructedResponse.propTypes = {
-  attributes: PropTypes.object,
-  error: PropTypes.any,
-  value: PropTypes.string,
-  isFocused: PropTypes.bool,
-};
-
-export default ExplicitConstructedResponse;

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/icons/index.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import MoreVert from '@material-ui/icons/MoreVert';
-import { withStyles } from '@material-ui/core/styles';
-
-const getRotate = (direction) => {
-  switch (direction) {
-    case 'down':
-      return 90;
-
-    case 'up':
-      return -90;
-
-    case 'left':
-      return 180;
-
-    default:
-      return 0;
-  }
-};
-
-export const Chevron = (props) => {
-  const { direction, style } = props;
-  const rotate = getRotate(direction);
-
-  return (
-    <ChevronRight
-      style={{
-        transform: `rotate(${rotate}deg)`,
-        ...style,
-      }}
-    />
-  );
-};
-
-Chevron.propTypes = {
-  direction: PropTypes.string,
-  style: PropTypes.object,
-};
-
-export const GripIcon = ({ style }) => {
-  return (
-    <span style={style}>
-      <MoreVert
-        style={{
-          margin: '0 -16px',
-        }}
-      />
-      <MoreVert />
-    </span>
-  );
-};
-
-GripIcon.propTypes = {
-  style: PropTypes.object,
-};
-
-export const ToolbarIcon = withStyles((theme) => ({
-  icon: {
-    fontFamily: 'Cerebri Sans !important',
-    fontSize: theme.typography.fontSize,
-    fontWeight: 'bold',
-    lineHeight: '14px',
-    position: 'relative',
-    top: '7px',
-    width: '110px',
-    height: '28px',
-    whiteSpace: 'nowrap',
-  },
-}))(({ classes }) => <div className={classes.icon}>+ Response Area</div>);