@pie-element/ebsr 9.12.2-next.28 → 9.12.2-next.30

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

@@ -1,185 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-import { DragSource, DropTarget } from '../../../../drag';
-import { color } from '../../../../render-ui';
-import { renderMath } from '../../../../math-rendering-accessible';
-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}`,
-  },
-  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);
-  }
-
-  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 : '';
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.elementRef) {
-      renderMath(this.elementRef);
-    }
-  }
-
-  render() {
-    const { n, children, isDragging, dragItem, isOver, value } = this.props;
-
-    const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
-    const finalLabel = isDragging ? '\u00A0' : label;
-    const hasGrip = finalLabel !== '\u00A0';
-
-    return (
-      <div
-        ref={(ref) => (this.elementRef = ref)}
-        style={{
-          display: 'inline-flex',
-          minWidth: '178px',
-          minHeight: '36px',
-          background: '#FFF',
-          border: '1px solid #C0C3CF',
-          boxSizing: 'border-box',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          position: 'relative',
-          padding: '8px 8px 8px 35px',
-        }}
-        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(),
-  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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/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-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/respArea/explicit-constructed-response/index.jsx

@@ -1,46 +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',
-        minHeight: '50px',
-        minWidth: '178px',
-        position: 'relative',
-        margin: '0 5px',
-        cursor: 'pointer',
-      }}
-    >
-      <div
-        style={{
-          display: 'inline-flex',
-          minWidth: '178px',
-          minHeight: '36px',
-          height: '36px',
-          background: '#FFF',
-          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
-          boxSizing: 'border-box',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          padding: '8px',
-        }}
-        dangerouslySetInnerHTML={{
-          __html: value || '<div>&nbsp;</div>',
-        }}
-      />
-    </span>
-  );
-};
-
-ExplicitConstructedResponse.propTypes = {
-  attributes: PropTypes.object,
-  error: PropTypes.any,
-  value: PropTypes.string,
-};
-
-export default ExplicitConstructedResponse;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/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>);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/respArea/index.jsx

@@ -1,253 +0,0 @@
-import React from 'react';
-import debug from 'debug';
-import isUndefined from 'lodash/isUndefined';
-
-import InlineDropdown from './inline-dropdown';
-import DragInTheBlank from './drag-in-the-blank';
-import ExplicitConstructedResponse from './explicit-constructed-response';
-import { getDefaultElement } from './utils';
-import { ToolbarIcon } from './icons';
-
-const log = debug('@pie-lib:editable-html:plugins:respArea');
-
-const lastIndexMap = {};
-const elTypesMap = {
-  'inline-dropdown': 'inline_dropdown',
-  'explicit-constructed-response': 'explicit_constructed_response',
-  'drag-in-the-blank': 'drag_in_the_blank',
-};
-const elTypesArray = Object.values(elTypesMap);
-
-export default function ResponseAreaPlugin(opts) {
-  const isOfCurrentType = (d) => d.type === opts.type || d.type === elTypesMap[opts.type];
-
-  const toolbar = {
-    icon: <ToolbarIcon />,
-    buttonStyles: {
-      margin: '0 20px 0 auto',
-    },
-    onClick: (value, onChange) => {
-      log('[toolbar] onClick');
-      const change = value.change();
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
-
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
-        return;
-      }
-
-      const type = opts.type.replace(/-/g, '_');
-      const prevIndex = lastIndexMap[type];
-      const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
-      const newInline = getDefaultElement(opts, newIndex);
-
-      lastIndexMap[type] += 1;
-
-      if (newInline) {
-        if (change.value.selection.startKey || change.value.selection.endKey) {
-          change.insertInline(newInline);
-        } else {
-          // If the markup is empty and there's no focus
-          const lastText = value.document.getLastText();
-
-          if (!lastText) {
-            return;
-          }
-          const parentNode = value.document.getParent(lastText.key);
-
-          if (parentNode) {
-            const index = parentNode.nodes.indexOf(lastText.key);
-
-            if (parentNode.isVoid) return;
-
-            change.insertNodeByKey(parentNode.key, index + 1, newInline);
-          }
-        }
-
-        if (newInline.type === 'drag_in_the_blank') {
-          const nextText = change.value.document.getNextText(newInline.key);
-
-          if (nextText) {
-            change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
-          }
-        }
-
-        onChange(change);
-      }
-    },
-    customToolbar: opts.respAreaToolbar,
-    supports: (node) => node.object === 'inline' && elTypesArray.indexOf(node.type) >= 0,
-    showDone: false,
-  };
-
-  return {
-    name: 'response_area',
-    toolbar,
-    filterPlugins: (node, plugins) => {
-      if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
-        return [];
-      }
-
-      return plugins.filter((p) => p.name !== 'response_area');
-    },
-    deleteNode: (e, node, value, onChange) => {
-      e.preventDefault();
-
-      const change = value.change().removeNodeByKey(node.key);
-
-      onChange(change);
-    },
-    renderNode(props) {
-      const { attributes, node: n } = props;
-
-      if (n.type === 'explicit_constructed_response') {
-        const data = n.data.toJSON();
-        let error;
-
-        if (opts.error) {
-          error = opts.error();
-        }
-
-        return (
-          <ExplicitConstructedResponse
-            attributes={attributes}
-            value={data.value}
-            error={error && error[data.index] && error[data.index][0]}
-          />
-        );
-      }
-
-      if (n.type === 'drag_in_the_blank') {
-        const data = n.data.toJSON();
-
-        return <DragInTheBlank attributes={attributes} data={data} n={n} nodeProps={props} opts={opts} />;
-      }
-
-      if (n.type === 'inline_dropdown') {
-        const data = n.data.toJSON();
-
-        return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
-      }
-    },
-    onChange(change, editor) {
-      const type = opts.type.replace(/-/g, '_');
-
-      if (isUndefined(lastIndexMap[type])) {
-        lastIndexMap[type] = 0;
-
-        change.value.document.forEachDescendant((d) => {
-          if (d.type === type) {
-            const newIndex = parseInt(d.data.get('index'), 10);
-
-            if (newIndex > lastIndexMap[type]) {
-              lastIndexMap[type] = newIndex;
-            }
-          }
-        });
-      }
-
-      if (!editor.value) {
-        return;
-      }
-
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
-      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
-
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
-        toolbar.disabled = true;
-      } else {
-        toolbar.disabled = false;
-      }
-
-      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
-      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
-
-      const elementsWithChangedStatus = arrayToFilter.filter(
-        (d) => !arrayToUseForFilter.find((e) => e.data.get('index') === d.data.get('index')),
-      );
-
-      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
-        opts.onHandleAreaChange(elementsWithChangedStatus);
-      }
-    },
-    onDrop(event, change, editor) {
-      const closestEl = event.target.closest('[data-key]');
-      const inline = editor.value.document.findDescendant((d) => d.key === closestEl.dataset.key);
-
-      if (inline.type === 'drag_in_the_blank') {
-        return false;
-      }
-    },
-  };
-}
-
-export const serialization = {
-  deserialize(el) {
-    const type = el.dataset && el.dataset.type;
-
-    switch (type) {
-      case 'inline_dropdown':
-        return {
-          object: 'inline',
-          type: 'inline_dropdown',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            value: el.dataset.value,
-          },
-        };
-      case 'explicit_constructed_response':
-        return {
-          object: 'inline',
-          type: 'explicit_constructed_response',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            value: el.dataset.value,
-          },
-        };
-      case 'drag_in_the_blank':
-        return {
-          object: 'inline',
-          type: 'drag_in_the_blank',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            id: el.dataset.id,
-            value: el.dataset.value,
-            inTable: el.dataset.inTable,
-          },
-        };
-    }
-  },
-  serialize(object) {
-    if (object.object !== 'inline') {
-      return;
-    }
-
-    switch (object.type) {
-      case 'inline_dropdown': {
-        const data = object.data.toJSON();
-
-        return <span data-type="inline_dropdown" data-index={data.index} data-value={data.value} />;
-      }
-      case 'explicit_constructed_response': {
-        const data = object.data.toJSON();
-
-        return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
-      }
-      case 'drag_in_the_blank': {
-        const data = object.data.toJSON();
-
-        return (
-          <span
-            data-type="drag_in_the_blank"
-            data-index={data.index}
-            data-id={data.id}
-            data-value={data.value}
-            data-in-table={data.inTable}
-          />
-        );
-      }
-    }
-  },
-};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/respArea/inline-dropdown/index.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Chevron } from '../icons';
-
-const InlineDropdown = ({ attributes, selectedItem }) => {
-  // TODO: Investigate
-  // Needed because items with values inside have different positioning for some reason
-  const html = selectedItem || '<div>&nbsp</div>';
-
-  return (
-    <span
-      {...attributes}
-      style={{
-        display: 'inline-flex',
-        height: '50px',
-        margin: '0 5px',
-        cursor: 'pointer',
-      }}
-    >
-      <div
-        style={{
-          display: 'inline-flex',
-          minWidth: '178px',
-          height: '36px',
-          background: '#FFF',
-          border: '1px solid #C0C3CF',
-          boxSizing: 'border-box',
-          borderRadius: '3px',
-          position: 'relative',
-        }}
-      >
-        <div
-          style={{
-            flex: 1,
-            overflow: 'hidden',
-            padding: '0 25px 0 8px',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            lineHeight: '35px',
-          }}
-          dangerouslySetInnerHTML={{
-            __html: html,
-          }}
-        />
-        <Chevron
-          direction="down"
-          style={{
-            position: 'absolute',
-            top: '5px',
-            right: '5px',
-          }}
-        />
-      </div>
-    </span>
-  );
-};
-
-InlineDropdown.propTypes = {
-  attributes: PropTypes.object,
-  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-export default InlineDropdown;