@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.36

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DragProvider } from '@pie-lib/drag';
+import { DragOverlay, rectIntersection } 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?.dataset || {};
+  if (dataset.component === 'blank') {
+    // 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];
+    // eslint-disable-next-line react/prop-types
+    const choice = choiceId && props.choices.find((c) => c.id === choiceId);
+
+    return (
+      <Blank
+        key={`${node.type}-${dataset.id}`}
+        correct={showCorrectAnswer || (feedback && feedback[dataset.id])}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        id={dataset.id}
+        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,
+      dropAnimation: undefined,
+    };
+  }
+
+  static propTypes = {
+    markup: PropTypes.string,
+    layout: PropTypes.object,
+    choicesPosition: 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,
+    emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    instanceId: PropTypes.string,
+  };
+
+  static defaultProps = {
+    instanceId: 'drag-in-the-blank',
+  };
+
+  handleDragStart = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        activeDragItem: active.data.current,
+        dropAnimation: undefined, // default during drag
+      });
+    }
+  };
+
+  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;
+
+    const draggedData = active?.data?.current;
+    const dropData = over?.data?.current;
+
+    const isValidDrop =
+      !!active && !!over && draggedData?.type === 'MaskBlank' && dropData?.accepts?.includes('MaskBlank');
+
+    // Only animate back when drop is invalid
+    this.setState({
+      activeDragItem: null,
+      dropAnimation: isValidDrop ? null : undefined,
+    });
+
+    if (!isValidDrop || !onChange) return;
+
+    const draggedItem = draggedData;
+    const targetId = dropData.id;
+
+    if (dropData.toChoiceBoard === true) {
+      if (!draggedItem.fromChoice && draggedItem.id) {
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+    } else if (draggedItem.fromChoice === true) {
+      if (targetId && targetId !== 'drag-in-the-blank-droppable') {
+        const newValue = { ...value };
+        newValue[targetId] = draggedItem.choice.id;
+        onChange(newValue);
+      }
+    } else if (draggedItem.id && draggedItem.id !== targetId) {
+      const newValue = { ...value };
+      newValue[targetId] = draggedItem.choice.id;
+      delete newValue[draggedItem.id];
+      onChange(newValue);
+    }
+  };
+
+  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';
+        break;
+      default:
+        // above
+        flexDirection = 'column';
+        break;
+    }
+
+    return { flexDirection, justifyContent, alignItems };
+  };
+
+  render() {
+    const {
+      markup,
+      duplicates,
+      value,
+      onChange,
+      choicesPosition,
+      choices,
+      correctResponse,
+      disabled,
+      feedback,
+      showCorrectAnswer,
+      emptyResponseAreaWidth,
+      emptyResponseAreaHeight,
+      layout,
+      instanceId,
+    } = this.props;
+
+    const choicePosition = choicesPosition || 'below';
+    const style = { display: 'flex', minWidth: '100px', ...this.getPositionDirection(choicePosition) };
+
+    return (
+      <DragProvider
+        onDragStart={this.handleDragStart}
+        onDragEnd={this.handleDragEnd}
+        collisionDetection={rectIntersection}
+      >
+        <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' }} dropAnimation={this.state.dropAnimation}>
+            {this.renderDragOverlay()}
+          </DragOverlay>
+        </div>
+      </DragProvider>
+    );
+  }
+}

package/src/index.js

@@ -0,0 +1,16 @@
+import { buildLayoutFromMarkup, withMask } 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,
+  Customizable,
+};

package/src/inline-dropdown.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Dropdown from './components/dropdown';
+import { withMask } from './with-mask';
+
+// 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 finalChoice = showCorrectAnswer ? correctAnswer && correctAnswer.value : data[dataset.id];
+
+    return (
+      <Dropdown
+        key={`${node.type}-dropdown-${dataset.id}`}
+        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

@@ -0,0 +1,172 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash-es';
+import { styled } from '@mui/material/styles';
+import { renderMath } from '@pie-lib/math-rendering';
+import { MARK_TAGS } from './serialization';
+
+const Paragraph = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+}));
+
+const Spacer = styled('span')(() => ({
+  display: 'inline-block',
+  width: '.75em',
+}));
+
+const restrictWhitespaceTypes = ['tbody', 'tr'];
+
+const addText = (parentNode, text) => {
+  const isWhitespace = text.trim() === '';
+  const parentType = parentNode && parentNode.type;
+
+  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
+    return undefined;
+  } else {
+    return text;
+  }
+};
+
+const getMark = (n) => {
+  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
+
+  if (mark) {
+    return mark.marks[0];
+  }
+
+  return null;
+};
+
+export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
+  if (!value) {
+    return null;
+  }
+
+  const children = [];
+
+  (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.nodes[0].innerHTML}</math>`,
+          }}
+        />,
+      );
+      return children;
+    }
+
+    if (rootRenderChildren) {
+      const c = rootRenderChildren(n, value, onChange);
+      if (c) {
+        const isDndComponent = n.data?.dataset?.component === 'blank';
+
+        if (isDndComponent) {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
+
+        children.push(c);
+
+        if (isDndComponent) {
+          children.push(<Spacer key={`spacer-${index}`} />);
+        }
+        return;
+      }
+    }
+
+    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) {
+        let markKey;
+
+        for (markKey in MARK_TAGS) {
+          if (MARK_TAGS[markKey] === mark.type) {
+            const Tag = markKey;
+
+            children.push(<Tag key={key}>{content}</Tag>);
+            break;
+          }
+        }
+      } else if (content.length > 0) {
+        children.push(content);
+      }
+    } else {
+      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.nodes && n.nodes.length > 0) {
+          children.push(
+            <Tag key={key} {...n.data.attributes}>
+              {subNodes}
+            </Tag>,
+          );
+        } else {
+          children.push(<Tag key={key} {...n.data.attributes} />);
+        }
+      }
+    }
+  });
+  return children;
+};
+
+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,
+    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, elementType, containerRef } = this.props;
+    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
+    const ref = containerRef || this.internalContainerRef;
+
+    return <MaskContainer ref={ref}>{children}</MaskContainer>;
+  }
+}

package/src/serialization.js

@@ -0,0 +1,260 @@
+import { object as toStyleObject } from 'to-style';
+import debug from 'debug';
+
+const log = debug('@pie-lib:mask-markup:serialization');
+
+const INLINE = ['span'];
+const MARK = ['em', 'strong', 'u'];
+const TEXT_NODE = 3;
+const COMMENT_NODE = 8;
+const ELEMENT_NODE = 1;
+
+const attr = (el) => {
+  if (!el.attributes || el.attributes.length <= 0) {
+    return undefined;
+  }
+
+  const out = {};
+  let i;
+
+  for (i = 0; i < el.attributes.length; i++) {
+    const a = el.attributes[i];
+
+    out[a.name] = a.value;
+  }
+
+  return out;
+};
+
+const getObject = (type) => {
+  if (INLINE.includes(type)) {
+    return 'inline';
+  } else if (MARK.includes(type)) {
+    return 'mark';
+  }
+  return 'block';
+};
+
+export const parseStyleString = (s) => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+  while ((match = regex.exec(s))) {
+    result[match[1]] = match[2].trim();
+  }
+  return result;
+};
+
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+
+const handleStyles = (el, attribute) => {
+  const styleString = el.getAttribute(attribute);
+
+  return reactAttributes(parseStyleString(styleString));
+};
+
+const handleClass = (el, acc, attribute) => {
+  const classNames = el.getAttribute(attribute);
+
+  delete acc.class;
+
+  return classNames;
+};
+
+const attributesToMap = (el) => (acc, attribute) => {
+  if (!el.getAttribute) {
+    return acc;
+  }
+
+  const value = el.getAttribute(attribute);
+
+  if (value) {
+    switch (attribute) {
+      case 'style':
+        acc.style = handleStyles(el, attribute);
+        break;
+      case 'class':
+        acc.className = handleClass(el, acc, attribute);
+        break;
+      default:
+        acc[attribute] = el.getAttribute(attribute);
+        break;
+    }
+  }
+
+  return acc;
+};
+
+const attributes = ['border', 'class', 'style'];
+
+/**
+ * Tags to marks.
+ *
+ * @type {Object}
+ */
+
+export const MARK_TAGS = {
+  b: 'bold',
+  em: 'italic',
+  u: 'underline',
+  s: 'strikethrough',
+  code: 'code',
+  strong: 'strong',
+};
+
+/**
+ * Recursively process DOM nodes and convert them to Slate JSON format
+ */
+const processNode = (node, marks = []) => {
+  // Skip comment nodes
+  if (node.nodeType === COMMENT_NODE) {
+    return null;
+  }
+
+  // Handle text nodes
+  if (node.nodeType === TEXT_NODE) {
+    const text = node.textContent;
+    const leaf = { text };
+
+    if (marks.length > 0) {
+      leaf.marks = marks.map((m) => ({ type: m, data: undefined }));
+    }
+
+    return {
+      object: 'text',
+      leaves: [leaf],
+    };
+  }
+
+  // Handle element nodes
+  if (node.nodeType === ELEMENT_NODE) {
+    const type = node.tagName.toLowerCase();
+
+    // Check if this is a mark tag
+    const markType = MARK_TAGS[type];
+    if (markType) {
+      log('[deserialize] mark: ', markType);
+      // Process children with this mark added and return them flattened
+      const childNodes = processNodes(node.childNodes, [...marks, markType]);
+      // Return an array indicator with the nodes (will be flattened by parent)
+      return { _flatten: true, nodes: childNodes };
+    }
+
+    // Handle math elements specially
+    if (type === 'math') {
+      return {
+        isMath: true,
+        nodes: [node],
+      };
+    }
+
+    // Process regular elements
+    const normalAttrs = attr(node) || {};
+
+    if (type === 'audio' && normalAttrs.controls === '') {
+      normalAttrs.controls = true;
+    }
+
+    const allAttrs = attributes.reduce(attributesToMap(node), { ...normalAttrs });
+    const object = getObject(type);
+
+    const childNodes = processNodes(node.childNodes, marks);
+
+    return {
+      object,
+      type,
+      data: { dataset: { ...node.dataset }, attributes: { ...allAttrs } },
+      nodes: childNodes,
+    };
+  }
+
+  return null;
+};
+
+/**
+ * Process a NodeList and convert to array of Slate nodes
+ */
+const processNodes = (nodeList, marks = []) => {
+  const nodes = [];
+  for (let i = 0; i < nodeList.length; i++) {
+    const result = processNode(nodeList[i], marks);
+    if (result !== null) {
+      // Handle flattening for mark nodes
+      if (result._flatten && result.nodes) {
+        nodes.push(...result.nodes);
+      } else {
+        nodes.push(result);
+      }
+    }
+  }
+  return nodes;
+};
+
+/**
+ * Deserialize HTML string to Slate JSON format
+ */
+export const deserialize = (htmlString) => {
+  // Handle empty or whitespace-only strings
+  if (!htmlString || !htmlString.trim()) {
+    return {
+      object: 'value',
+      document: {
+        object: 'document',
+        data: {},
+        nodes: [
+          {
+            object: 'block',
+            type: 'span',
+            data: {},
+            isVoid: false,
+            nodes: [],
+          },
+        ],
+      },
+    };
+  }
+
+  // Use DOMParser to parse the HTML
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlString, 'text/html');
+
+  // Process all nodes in the body
+  let nodes = processNodes(doc.body.childNodes);
+
+  // If we only have text nodes (no block elements), wrap in default span block
+  const hasBlockElements = nodes.some((node) => node.object === 'block' || node.object === 'inline');
+
+  if (!hasBlockElements && nodes.length > 0) {
+    nodes = [
+      {
+        object: 'block',
+        type: 'span',
+        data: {},
+        isVoid: false,
+        nodes: nodes,
+      },
+    ];
+  }
+
+  // If no nodes were produced, add a default span block
+  if (nodes.length === 0) {
+    nodes = [
+      {
+        object: 'block',
+        type: 'span',
+        data: {},
+        isVoid: false,
+        nodes: [],
+      },
+    ];
+  }
+
+  return {
+    object: 'value',
+    document: {
+      object: 'document',
+      data: {},
+      nodes,
+    },
+  };
+};