@pie-lib/editable-html-tip-tap 1.0.0

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

@@ -0,0 +1,43 @@
+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/src/plugins/rendering/index.js

@@ -0,0 +1,31 @@
+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/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -0,0 +1,215 @@
+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/src/plugins/respArea/drag-in-the-blank/index.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import DragDropTile from './choice';
+import omit from 'lodash/omit';
+
+export const onValueChange = (editor, node, pos, choice) => {
+  const { tr } = editor.state;
+
+  // Merge old and new attributes
+  tr.setNodeMarkup(pos, undefined, {
+    ...node.attrs,
+    ...choice,
+  });
+  tr.isDone = true;
+  editor.view.dispatch(tr);
+};
+
+export const onRemoveResponse = (editor, node, pos) => {
+  const { tr } = editor.state;
+
+  // Merge old and new attributes
+  tr.setNodeMarkup(pos, undefined, omit(node.attrs, ['value', 'id']));
+  tr.isDone = true;
+  editor.view.dispatch(tr);
+};
+
+const DragDrop = (props) => {
+  const { editor, node, getPos, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { inTable } = attributes;
+  const pos = getPos();
+
+  // console.log({nodeProps.children})
+  return (
+    <NodeViewWrapper className="drag-in-the-blank" data-selected={selected}>
+      <span
+        {...attributes}
+        style={{
+          display: 'inline-flex',
+          minHeight: '50px',
+          minWidth: '178px',
+          position: 'relative',
+          margin: inTable ? '10px' : '0 10px',
+          cursor: 'pointer',
+        }}
+      >
+        <DragDropTile
+          n={attributes}
+          dragKey={attributes.id}
+          targetId="0"
+          value={attributes}
+          duplicates={options.duplicates}
+          onChange={(choice) => onValueChange(editor, node, pos, choice)}
+          removeResponse={() => onRemoveResponse(editor, node, pos)}
+        ></DragDropTile>
+      </span>
+    </NodeViewWrapper>
+  );
+};
+
+DragDrop.propTypes = {
+  attributes: PropTypes.object,
+  data: PropTypes.object,
+  n: PropTypes.object,
+  nodeProps: PropTypes.object,
+  opts: PropTypes.object,
+};
+
+export default DragDrop;

package/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { NodeViewWrapper } from '@tiptap/react';
+import PropTypes from 'prop-types';
+
+const ExplicitConstructedResponse = (props) => {
+  const { editor, node, getPos, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { value, error } = attributes;
+  const pos = getPos();
+  const [showToolbar, setShowToolbar] = useState(false);
+  const EcrToolbar = options.respAreaToolbar(node, editor, () => {});
+  const toolbarRef = useRef(null);
+
+  const handleDone = (newLatex) => {
+    updateAttributes({ latex: newLatex });
+    setShowToolbar(false);
+    editor.commands.focus();
+  };
+
+  useEffect(() => {
+    setShowToolbar(selected);
+  }, [selected]);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        toolbarRef.current &&
+        !toolbarRef.current.contains(event.target) &&
+        !event.target.closest('[data-inline-node]')
+      ) {
+        setShowToolbar(false);
+      }
+    };
+
+    if (showToolbar) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showToolbar]);
+
+  return (
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        minHeight: '55px',
+        position: 'relative',
+        cursor: 'pointer',
+      }}
+    >
+      <div
+        {...attributes}
+        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',
+          margin: '0 4px',
+          visibility: showToolbar ? 'hidden' : 'visible',
+        }}
+        onClick={() => setShowToolbar(true)}
+        dangerouslySetInnerHTML={{
+          __html: value || '<div>&nbsp;</div>',
+        }}
+      />
+      {showToolbar && (
+        <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
+          <EcrToolbar />
+        </div>
+      )}
+    </NodeViewWrapper>
+  );
+};
+
+ExplicitConstructedResponse.propTypes = {
+  attributes: PropTypes.object,
+  error: PropTypes.any,
+  value: PropTypes.string,
+  isFocused: PropTypes.bool,
+};
+
+export default ExplicitConstructedResponse;

package/src/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>);