@pie-element/ebsr 9.12.1 → 9.12.2-next.18

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

@@ -0,0 +1,185 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,253 @@
+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

@@ -0,0 +1,63 @@
+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;