@pie-lib/mask-markup 2.0.0-beta.1 → 2.0.0-next.0

package/src/customizable.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+// import Input from './components/input';
+import { withMask } from './with-mask';
+
+// eslint-disable-next-line react/display-name
+export default withMask('input', (props) => (node, data, onChange) => {
+  const dataset = node.data ? node.data.dataset || {} : {};
+  if (dataset.component === 'input') {
+    // eslint-disable-next-line react/prop-types
+    // const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck } = props;
+
+    // the first answer is the correct one
+    // eslint-disable-next-line react/prop-types
+    // const correctAnswer = ((props.choices && dataset && props.choices[dataset.id]) || [])[0];
+    // const finalValue = showCorrectAnswer ? correctAnswer && correctAnswer.label : data[dataset.id] || '';
+    // const width = maxLength && maxLength[dataset.id];
+
+    return props.customMarkMarkupComponent(dataset.id);
+    // return (
+    //   <Input
+    //     key={`${node.type}-input-${dataset.id}`}
+    //     correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
+    //     disabled={showCorrectAnswer || disabled}
+    //     value={finalValue}
+    //     id={dataset.id}
+    //     onChange={onChange}
+    //     showCorrectAnswer={showCorrectAnswer}
+    //     width={width}
+    //     charactersLimit={adjustedLimit ? width : 25}
+    //     isConstructedResponse={true}
+    //     spellCheck={spellCheck}
+    //   />
+    // );
+  }
+});

package/src/drag-in-the-blank.jsx

@@ -1,17 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { renderMath } from '@pie-lib/math-rendering';
+import { DragProvider } from '@pie-lib/drag';
+import { DragOverlay, closestCenter } from '@dnd-kit/core';
+
 import Choices from './choices';
+import Choice from './choices/choice';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
 
-const Masked = withMask('blank', props => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
-
+const Masked = withMask('blank', (props) => (node, data, onChange) => {
+  const dataset = node.data?.dataset || {};
   if (dataset.component === 'blank') {
-    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
+    // eslint-disable-next-line react/prop-types
+    const {
+      disabled,
+      duplicates,
+      correctResponse,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+      instanceId,
+      isDragging
+    } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
-    const choice = choiceId && props.choices.find(c => c.id === choiceId);
+    // eslint-disable-next-line react/prop-types
+    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
 
     return (
       <Blank
@@ -21,48 +35,131 @@ const Masked = withMask('blank', props => (node, data, onChange) => {
         duplicates={duplicates}
         choice={choice}
         id={dataset.id}
-        onChange={onChange}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
+        onChange={(id, choiceId) => {
+          const newData = { ...data };
+          if (choiceId === undefined) {
+            delete newData[id];
+          } else {
+            newData[id] = choiceId;
+          }
+          onChange(newData);
+        }}
+        instanceId={instanceId}
+        isDragging={isDragging}
       />
     );
   }
 });
 
 export default class DragInTheBlank extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeDragItem: null,
+    };
+  }
+
   static propTypes = {
     markup: PropTypes.string,
     layout: PropTypes.object,
     choicesPosition: PropTypes.string,
-    choices: PropTypes.arrayOf(
-      PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })
-    ),
+    choices: PropTypes.array,
     value: PropTypes.object,
     onChange: PropTypes.func,
     duplicates: PropTypes.bool,
     disabled: PropTypes.bool,
     feedback: PropTypes.object,
     correctResponse: PropTypes.object,
-    showCorrectAnswer: PropTypes.bool
+    showCorrectAnswer: PropTypes.bool,
+    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    instanceId: PropTypes.string,
+  };
+
+  static defaultProps = {
+    instanceId: 'drag-in-the-blank',
   };
 
-  componentWillReceiveProps() {
-    if (this.rootRef) {
-      renderMath(this.rootRef);
+  handleDragStart = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        activeDragItem: active.data.current,
+      });
     }
-  }
+  };
 
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
+  renderDragOverlay = () => {
+    const { activeDragItem } = this.state;
+    if (!activeDragItem) return null;
+
+    if (activeDragItem.type === 'MaskBlank') {
+      return (
+        <Choice
+          disabled={activeDragItem.disabled}
+          choice={activeDragItem.choice}
+          instanceId={activeDragItem.instanceId}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  handleDragEnd = (event) => {
+    const { active, over } = event;
+    const { onChange, value } = this.props;
+
+    if (!over || !active || !onChange) {
+      return;
+    }
+
+    const draggedData = active.data.current;
+    const dropData = over.data.current;
+
+    if (draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank')) {
+      const draggedItem = draggedData;
+      const targetId = dropData.id;
 
-  getPositionDirection = choicePosition => {
+      // drop from choice to blank (placing choice into response)
+      if (draggedItem.fromChoice === true) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      } else if (dropData.toChoiceBoard === true) {
+        // handle drop from blank to choice board (removal from blank)
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+      // handle drop from blank to blank (changing position)
+      else if (draggedItem.id !== targetId) {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+    }
+    this.setState({ activeDragItem: null });
+  };
+
+  getPositionDirection = (choicePosition) => {
     let flexDirection;
+    let justifyContent;
+    let alignItems;
 
     switch (choicePosition) {
       case 'left':
         flexDirection = 'row';
+        alignItems = 'center';
         break;
       case 'right':
         flexDirection = 'row-reverse';
+        justifyContent = 'flex-end';
+        alignItems = 'center';
         break;
       case 'below':
         flexDirection = 'column-reverse';
@@ -73,14 +170,13 @@ export default class DragInTheBlank extends React.Component {
         break;
     }
 
-    return flexDirection;
+    return { flexDirection, justifyContent, alignItems };
   };
 
   render() {
     const {
       markup,
       duplicates,
-      layout,
       value,
       onChange,
       choicesPosition,
@@ -88,37 +184,53 @@ export default class DragInTheBlank extends React.Component {
       correctResponse,
       disabled,
       feedback,
-      showCorrectAnswer
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+      layout,
+      instanceId
     } = this.props;
 
     const choicePosition = choicesPosition || 'below';
-    const style = {
-      display: 'flex',
-      flexDirection: this.getPositionDirection(choicePosition)
-    };
+    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };
 
     return (
-      <div ref={ref => ref && (this.rootRef = ref)} style={style}>
-        <Choices
-          choicePosition={choicePosition}
-          duplicates={duplicates}
-          choices={choices}
-          value={value}
-          disabled={disabled}
-        />
-        <Masked
-          markup={markup}
-          layout={layout}
-          value={value}
-          choices={choices}
-          onChange={onChange}
-          disabled={disabled}
-          duplicates={duplicates}
-          feedback={feedback}
-          correctResponse={correctResponse}
-          showCorrectAnswer={showCorrectAnswer}
-        />
-      </div>
+      <DragProvider
+        onDragStart={this.handleDragStart}
+        onDragEnd={this.handleDragEnd}
+        collisionDetection={closestCenter}
+      >
+        <div ref={(ref) => (this.rootRef = ref)} style={style}>
+          <Choices
+            choicePosition={choicePosition}
+            choices={choices}
+            value={value}
+            duplicates={duplicates}
+            disabled={disabled}
+            instanceId={instanceId}
+          />
+          <Masked
+            elementType="drag-in-the-blank"
+            markup={markup}
+            layout={layout}
+            value={value}
+            choices={choices}
+            onChange={onChange}
+            disabled={disabled}
+            duplicates={duplicates}
+            feedback={feedback}
+            correctResponse={correctResponse}
+            showCorrectAnswer={showCorrectAnswer}
+            emptyResponseAreaWidth={emptyResponseAreaWidth}
+            emptyResponseAreaHeight={emptyResponseAreaHeight}
+            instanceId={instanceId}
+            isDragging={!!this.state.activeDragItem}
+          />
+          <DragOverlay style={{ pointerEvents: "none" }}>
+            {this.renderDragOverlay()}
+          </DragOverlay>
+        </div>
+      </DragProvider>
     );
   }
 }

package/src/index.js

@@ -1,6 +1,7 @@
 import { withMask, buildLayoutFromMarkup } from './with-mask';
 import DragInTheBlank from './drag-in-the-blank';
 import ConstructedResponse from './constructed-response';
+import Customizable from './customizable';
 import InlineDropdown from './inline-dropdown';
 import componentize from './componentize';
 
@@ -10,5 +11,6 @@ export {
   DragInTheBlank,
   ConstructedResponse,
   InlineDropdown,
-  componentize
+  componentize,
+  Customizable,
 };

package/src/inline-dropdown.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 import Dropdown from './components/dropdown';
 import { withMask } from './with-mask';
 
-export default withMask('dropdown', props => (node, data, onChange) => {
+// eslint-disable-next-line react/display-name
+export default withMask('dropdown', (props) => (node, data, onChange) => {
   const dataset = node.data ? node.data.dataset || {} : {};
   if (dataset.component === 'dropdown') {
+    // eslint-disable-next-line react/prop-types
     const { choices, disabled, feedback, showCorrectAnswer } = props;
-    const correctAnswer =
-      choices && choices[dataset.id] && choices[dataset.id].find(c => c.correct);
+    const correctAnswer = choices && choices[dataset.id] && choices[dataset.id].find((c) => c.correct);
     const finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
 
     return (
@@ -16,10 +17,12 @@ export default withMask('dropdown', props => (node, data, onChange) => {
         correct={feedback && feedback[dataset.id] && feedback[dataset.id] === 'correct'}
         disabled={disabled || showCorrectAnswer}
         value={finalChoice}
+        correctValue={showCorrectAnswer ? correctAnswer && correctAnswer.label : undefined}
         id={dataset.id}
         onChange={onChange}
         choices={choices[dataset.id]}
         showCorrectAnswer={showCorrectAnswer}
+        singleQuery={Object.keys(choices).length == 1}
       />
     );
   }

package/src/mask.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { Text } from 'slate';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
+import { renderMath } from '@pie-lib/math-rendering';
 import { MARK_TAGS } from './serialization';
 
-const Paragraph = withStyles(theme => ({
-  para: {
-    paddingTop: 2 * theme.spacing.unit,
-    paddingBottom: 2 * theme.spacing.unit
-  }
-}))(props => <div className={props.classes.para}>{props.children}</div>);
+const Paragraph = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+  paddingBottom: theme.spacing(2),
+}));
+
+const Spacer = styled('span')(() => ({
+  display: 'inline-block',
+  width: '.75em',
+}));
 
 const restrictWhitespaceTypes = ['tbody', 'tr'];
 
@@ -25,25 +28,33 @@ const addText = (parentNode, text) => {
   }
 };
 
-const getMark = n => {
-  const markTags = Object.values(MARK_TAGS);
+const getMark = (n) => {
+  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
+
+  if (mark) {
+    return mark.marks[0];
+  }
 
-  return markTags.includes(n.type);
+  return null;
 };
 
-export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode) => {
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
   if (!value) {
     return null;
   }
 
   const children = [];
 
-  (layout.children || []).forEach((n, index) => {
-    const key = `${n.type}-${index}`;
+  (layout.nodes || []).forEach((n, index) => {
+    const key = n.type ? `${n.type}-${index}` : `${index}`;
 
     if (n.isMath) {
       children.push(
-        <span dangerouslySetInnerHTML={{ __html: `<math displaystyle="true">${n.children[0].innerHTML}</math>` }} />
+        <span
+          dangerouslySetInnerHTML={{
+            __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`,
+          }}
+        />,
       );
       return children;
     }
@@ -52,12 +63,19 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
       const c = rootRenderChildren(n, value, onChange);
       if (c) {
         children.push(c);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
         return;
       }
     }
 
-    if (Text.isText(n)) {
-      const content = n.text;
+    if (n.object === 'text') {
+      const content = n.leaves.reduce((acc, l) => {
+        const t = l.text;
+        const extraText = addText(parentNode, t);
+        return extraText ? acc + extraText : acc;
+      }, '');
       const mark = getMark(n);
 
       if (mark) {
@@ -67,24 +85,27 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
           if (MARK_TAGS[markKey] === mark.type) {
             const Tag = markKey;
 
-            children.push(<Tag>{content}</Tag>);
+            children.push(<Tag key={key}>{content}</Tag>);
             break;
           }
         }
       } else if (content.length > 0) {
         children.push(content);
+        if (parentNode?.type !== 'td' && elementType === 'drag-in-the-blank') {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
       }
     } else {
-      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
       if (n.type === 'p' || n.type === 'paragraph') {
         children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
       } else {
         const Tag = n.type;
-        if (n.children && n.children.length > 0) {
+        if (n.nodes && n.nodes.length > 0) {
           children.push(
             <Tag key={key} {...n.data.attributes}>
               {subNodes}
-            </Tag>
+            </Tag>,
           );
         } else {
           children.push(<Tag key={key} {...n.data.attributes} />);
@@ -95,32 +116,56 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
-const MaskContainer = withStyles(() => ({
-  main: {
-    display: 'initial'
-  }
-}))(props => <div className={props.classes.main}>{props.children}</div>);
+const MaskContainer = styled('div')(() => ({
+  display: 'initial',
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse',
+  },
+  // align table content to left as per STAR requirement PD-3687
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '8px 12px',
+    textAlign: 'left',
+  },
+}));
 
 /**
  * Renders a layout that uses the slate.js Value model structure.
  */
 export default class Mask extends React.Component {
+  constructor(props) {
+    super(props);
+       this.internalContainerRef = React.createRef();
+  }
+
   static propTypes = {
     renderChildren: PropTypes.func,
     layout: PropTypes.object,
     value: PropTypes.object,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    elementType: PropTypes.string,
+    containerRef: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
   };
 
+  componentDidMount() {
+    const containerRef = this.props.containerRef || this.internalContainerRef;
+    if (containerRef.current && typeof renderMath === 'function') {
+      renderMath(containerRef.current);
+    }
+  }
+
   handleChange = (id, value) => {
     const data = { ...this.props.value, [id]: value };
     this.props.onChange(data);
   };
 
   render() {
-    const { value, layout } = this.props;
-    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+    const { value, layout, elementType, containerRef } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
+    const ref = containerRef || this.internalContainerRef;
 
-    return <MaskContainer>{children}</MaskContainer>;
+    return <MaskContainer ref={ref}>{children}</MaskContainer>;
   }
 }