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

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

@@ -1,16 +1,28 @@
 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';
 
-// eslint-disable-next-line react/display-name
 const Masked = withMask('blank', (props) => (node, data, onChange) => {
-  const dataset = node.data ? node.data.dataset || {} : {};
+  const dataset = node.data?.dataset || {};
   if (dataset.component === 'blank') {
     // eslint-disable-next-line react/prop-types
-    const { disabled, duplicates, correctResponse, feedback, showCorrectAnswer } = props;
+    const {
+      disabled,
+      duplicates,
+      correctResponse,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+      instanceId,
+      isDragging
+    } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
     const choice = choiceId && props.choices.find((c) => c.id === choiceId);
@@ -23,18 +35,37 @@ 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,
@@ -42,27 +73,93 @@ export default class DragInTheBlank extends React.Component {
     feedback: PropTypes.object,
     correctResponse: PropTypes.object,
     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',
   };
 
-  UNSAFE_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;
+
+      // 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,
@@ -89,36 +185,52 @@ export default class DragInTheBlank extends React.Component {
       disabled,
       feedback,
       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,7 +1,16 @@
 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';
 
-export { withMask, buildLayoutFromMarkup, DragInTheBlank, ConstructedResponse, InlineDropdown, componentize };
+export {
+  withMask,
+  buildLayoutFromMarkup,
+  DragInTheBlank,
+  ConstructedResponse,
+  InlineDropdown,
+  componentize,
+  Customizable,
+};

package/src/inline-dropdown.jsx

@@ -17,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,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text } from 'slate';
-import { withStyles } from '@material-ui/core/styles';
+import get from 'lodash/get';
+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,24 +29,32 @@ const addText = (parentNode, text) => {
 };
 
 const getMark = (n) => {
-  const markTags = Object.values(MARK_TAGS);
+  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;
     }
@@ -51,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) {
@@ -72,14 +91,17 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         }
       } 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 (Tag !== 'source' && n.children && n.children.length > 0) {
+        if (n.nodes && n.nodes.length > 0) {
           children.push(
             <Tag key={key} {...n.data.attributes}>
               {subNodes}
@@ -94,32 +116,56 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
   return children;
 };
 
-const MaskContainer = withStyles(() => ({
-  main: {
-    display: 'initial',
+const MaskContainer = styled('div')(() => ({
+  display: 'initial',
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse',
   },
-}))((props) => <div className={props.classes.main}>{props.children}</div>);
+  // 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,
+    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>;
   }
 }

package/src/serialization.js

@@ -1,10 +1,7 @@
-import React from 'react';
-import { jsx } from 'slate-hyperscript';
+import Html from 'slate-html-serializer';
 import { object as toStyleObject } from 'to-style';
 import debug from 'debug';
 
-import Html from './test-serializer';
-
 const log = debug('@pie-lib:mask-markup:serialization');
 
 const INLINE = ['span'];
@@ -108,13 +105,13 @@ export const MARK_TAGS = {
 const marks = {
   deserialize(el, next) {
     const mark = MARK_TAGS[el.tagName.toLowerCase()];
-
-    if (!mark) {
-      return;
-    }
-
+    if (!mark) return;
     log('[deserialize] mark: ', mark);
-    return jsx('text', { type: mark }, next(el.childNodes));
+    return {
+      object: 'mark',
+      type: mark,
+      nodes: next(el.childNodes),
+    };
   },
 };
 
@@ -130,7 +127,10 @@ const rules = [
       }
 
       if (el.nodeType === TEXT_NODE) {
-        return jsx('text', el.textContent);
+        return {
+          object: 'text',
+          leaves: [{ text: el.textContent }],
+        };
       }
 
       const type = el.tagName.toLowerCase();
@@ -142,33 +142,21 @@ const rules = [
       }
 
       const allAttrs = attributes.reduce(attributesToMap(el), { ...normalAttrs });
+      const object = getObject(type);
 
       if (el.tagName.toLowerCase() === 'math') {
-        return jsx('element', {
-          type: 'mathml',
-          data: {
-            html: el.innerHTML,
-          },
-        });
-
-        // return {
-        //   isMath: true,
-        //   nodes: [el]
-        // };
-      }
-
-      if (el.tagName.toLowerCase() === 'br') {
-        return jsx('element', { type, data: {} });
+        return {
+          isMath: true,
+          nodes: [el],
+        };
       }
 
-      return jsx(
-        'element',
-        {
-          type,
-          data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },
-        },
-        next(el.childNodes),
-      );
+      return {
+        object,
+        type,
+        data: { dataset: { ...el.dataset }, attributes: { ...allAttrs } },
+        nodes: next(el.childNodes),
+      };
     },
   },
 ];

package/src/with-mask.jsx

@@ -7,7 +7,7 @@ import { deserialize } from './serialization';
 export const buildLayoutFromMarkup = (markup, type) => {
   const { markup: processed } = componentize(markup, type);
   const value = deserialize(processed);
-  return value;
+  return value.document;
 };
 
 export const withMask = (type, renderChildren) => {
@@ -23,13 +23,53 @@ export const withMask = (type, renderChildren) => {
       layout: PropTypes.object,
       value: PropTypes.object,
       onChange: PropTypes.func,
+      customMarkMarkupComponent: PropTypes.func,
+      elementType: PropTypes.string,
     };
 
+    constructor(props) {
+      super(props);
+      this.containerRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps) {
+      if (this.props.markup !== prevProps.markup) {
+        const domNode = this.containerRef.current;
+        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
+
+        // Clean up for fresh MathJax processing
+        (mathElements || []).forEach((el) => {
+          // Remove the MathJax container to allow for clean updates
+          const mjxContainer = el.querySelector('mjx-container');
+
+          if (mjxContainer) {
+            el.removeChild(mjxContainer);
+          }
+
+          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+          const latexCode = el.getAttribute('data-raw');
+          el.innerHTML = latexCode;
+
+          // Remove the attribute to signal that MathJax should reprocess this element
+          el.removeAttribute('data-math-handled');
+        });
+      }
+    }
+
     render() {
-      const { markup, layout, value, onChange } = this.props;
+      const { markup, layout, value, onChange, elementType } = this.props;
 
       const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-      return <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;
+      return (
+        <Mask
+          containerRef={this.containerRef}
+          elementType={elementType}
+          layout={maskLayout}
+          value={value}
+          onChange={onChange}
+          renderChildren={renderChildren(this.props)}
+        />
+      );
     }
   };
 };

package/README.md

@@ -1,14 +0,0 @@
-# mask-markup
-
-## issues
-
-- dnd
-  - simple approach loses context due to stepping out of react tree to run a ReactDOM.render().
-    - Would need to pass drag parts as props (no context)
-    - Or do the entire tree render in react - like a simple slate
-  - HTML5Backend - ? going to be a an issue w/ multiple items using dnd?
-
-* hey diddle sample
-* add feedback
-* check perf
-* more complex html