@pie-lib/mask-markup 3.1.0-beta.6 → 3.1.0

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

@@ -6,6 +6,13 @@ import Choices from './choices';
 import Choice from './choices/choice';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
+import { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';
+
+// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
+// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
+// click-to-select/click-to-place handlers below, or it would immediately reopen or
+// re-trigger a selection for a drag that just completed.
+const CLICK_AFTER_DRAG_GUARD_MS = 250;
 
 const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data?.dataset || {};
@@ -21,6 +28,9 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       emptyResponseAreaHeight,
       instanceId,
       isDragging,
+      selectedItem,
+      onSelectClick,
+      onPlacementClick,
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -47,6 +57,9 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         }}
         instanceId={instanceId}
         isDragging={isDragging}
+        selectedItem={selectedItem}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
       />
     );
   }
@@ -58,7 +71,9 @@ export default class DragInTheBlank extends React.Component {
     this.state = {
       activeDragItem: null,
       dropAnimation: undefined,
+      selectedItem: null,
     };
+    this.lastDragEndAt = 0;
   }
 
   static propTypes = {
@@ -89,6 +104,7 @@ export default class DragInTheBlank extends React.Component {
       this.setState({
         activeDragItem: active.data.current,
         dropAnimation: undefined, // default during drag
+        selectedItem: active.data.current,
       });
     }
   };
@@ -110,9 +126,40 @@ export default class DragInTheBlank extends React.Component {
     return null;
   };
 
+  // Shared placement logic for both the drag-end path and the click-to-place path, so
+  // neither reimplements the other's mutation rules.
+  //
+  // `targetId === undefined` means "the choice board" — placing there removes the item
+  // from wherever it currently is (mirroring image-cloze-association's
+  // `containerIndex === undefined` convention for its own choices pool).
+  commitPlacement = (draggedItem, targetId) => {
+    const { onChange, value } = this.props;
+
+    if (!onChange) return;
+
+    if (targetId === undefined) {
+      if (!draggedItem.fromChoice && draggedItem.id) {
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+      return;
+    }
+
+    if (draggedItem.fromChoice === true) {
+      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);
+    }
+  };
+
   handleDragEnd = (event) => {
     const { active, over } = event;
-    const { onChange, value } = this.props;
 
     const draggedData = active?.data?.current;
     const dropData = over?.data?.current;
@@ -126,29 +173,83 @@ export default class DragInTheBlank extends React.Component {
       dropAnimation: isValidDrop ? null : undefined,
     });
 
-    if (!isValidDrop || !onChange) return;
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
 
-    const draggedItem = draggedData;
-    const targetId = dropData.id;
+    if (!isValidDrop) return;
 
-    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);
-    }
+    const targetId = dropData.toChoiceBoard === true ? undefined : dropData.id;
+
+    this.commitPlacement(draggedData, targetId);
+  };
+
+  onDragCancel = () => {
+    this.setState({ activeDragItem: null, dropAnimation: undefined });
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
+  };
+
+  isSameItem = (a, b) => {
+    if (!a || !b || a.fromChoice !== b.fromChoice) return false;
+    return a.fromChoice ? a.choice.id === b.choice.id : a.id === b.id;
+  };
+
+  // Click-to-select semantics: selecting the currently-selected item again clears the
+  // selection instead of re-selecting it.
+  toggleItemSelection = (data) => {
+    this.setState((state) => ({
+      selectedItem: this.isSameItem(state.selectedItem, data) ? null : data,
+    }));
+  };
+
+  cancelSelection = () => {
+    this.setState({ selectedItem: null });
+  };
+
+  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
+  // click completes the placement below, it needs to be cleanly ended — otherwise
+  // dnd-kit would still think a drag is in progress. Escape is already configured as
+  // this sensor's cancel key (see the keyboardCodes passed to DragProvider below), and
+  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
+  // listener is reached from outside its sensor.
+  //
+  // Only dispatch when a drag is actually live — this is a synthetic Escape keydown on
+  // `document`, so an unconditional dispatch would also be observed by any other
+  // document-level Escape listener (host player modals/dialogs, or another mounted
+  // instance of this same component) even when nothing here actually needed cancelling.
+  endAnyLiveKeyboardDrag = () => {
+    if (!this.state.activeDragItem) return;
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));
+  };
+
+  placeSelectedItem = (targetId) => {
+    const { selectedItem } = this.state;
+
+    if (!selectedItem) return;
+
+    this.commitPlacement(selectedItem, targetId);
+    this.cancelSelection();
+    this.endAnyLiveKeyboardDrag();
+  };
+
+  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;
+
+  onItemClick = (data) => {
+    if (this.isClickSoonAfterDragEnd()) return;
+
+    // End any still-live keyboard drag BEFORE toggling the new selection: ending it
+    // also cancels the current selection as a side effect (see onDragCancel above), so
+    // doing it before — not after — lets this click's own selection be the one that
+    // sticks.
+    this.endAnyLiveKeyboardDrag();
+    this.toggleItemSelection(data);
+  };
+
+  onPlacementClick = (targetId) => {
+    if (this.isClickSoonAfterDragEnd()) return;
+
+    this.placeSelectedItem(targetId);
   };
 
   getPositionDirection = (choicePosition) => {
@@ -203,7 +304,10 @@ export default class DragInTheBlank extends React.Component {
       <DragProvider
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
+        onDragCancel={this.onDragCancel}
         collisionDetection={rectIntersection}
+        keyboardCoordinateGetter={closestDroppableKeyboardCoordinates}
+        keyboardCodes={{ start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'] }}
       >
         <div ref={(ref) => (this.rootRef = ref)} style={style}>
           <Choices
@@ -213,6 +317,9 @@ export default class DragInTheBlank extends React.Component {
             duplicates={duplicates}
             disabled={disabled}
             instanceId={instanceId}
+            selectedItem={this.state.selectedItem}
+            onSelectClick={this.onItemClick}
+            onPlacementClick={this.onPlacementClick}
           />
           <Masked
             elementType="drag-in-the-blank"
@@ -230,6 +337,9 @@ export default class DragInTheBlank extends React.Component {
             emptyResponseAreaHeight={emptyResponseAreaHeight}
             instanceId={instanceId}
             isDragging={!!this.state.activeDragItem}
+            selectedItem={this.state.selectedItem}
+            onSelectClick={this.onItemClick}
+            onPlacementClick={this.onPlacementClick}
           />
           <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>
             {this.renderDragOverlay()}

package/src/keyboard-coordinates.js

@@ -0,0 +1,147 @@
+import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';
+
+// Matches the id `drag-in-the-blank-dp.jsx` registers for the choice board's droppable.
+const CHOICE_BOARD_ID = 'drag-in-the-blank-droppable';
+
+/**
+ * Custom keyboard coordinate getter for drag-in-the-blank's Tab-based placement.
+ *
+ * Tab/Shift+Tab cycle the dragged item directly onto the next/previous enabled
+ * droppable — a blank (`mask-blank-drop-{id}`), sorted by on-screen position
+ * (top-to-bottom, then left-to-right, since blanks sit inline in flowing text rather
+ * than a simple list) — followed by the choice board as a fixed last stop (see below
+ * for why the board isn't sorted alongside the blanks).
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
+ * the existing free-form arrow-key dragging behavior completely unchanged.
+ */
+export const closestDroppableKeyboardCoordinates = (event, { active, context, currentCoordinates }) => {
+  const { code } = event;
+  const isTab = code === KeyboardCode.Tab;
+  const isArrow =
+    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;
+
+  if (!isTab && !isArrow) {
+    return undefined;
+  }
+
+  if (isArrow) {
+    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });
+  }
+
+  event.preventDefault();
+
+  const { droppableRects, droppableContainers, collisionRect } = context;
+
+  if (!droppableRects || droppableRects.size === 0) {
+    return currentCoordinates;
+  }
+
+  // A blank is itself a droppable for its own slot ("mask-blank-drop-{id}"), and
+  // simultaneously draggable from that same slot — the same shape as match-list's
+  // placed "target" tiles. That self drop-zone must never be treated as a navigable
+  // target: exclude it outright rather than relying on a distance threshold.
+  const draggedData = active?.data?.current;
+  const ownDropId =
+    draggedData && draggedData.fromChoice === false && draggedData.id != null
+      ? `mask-blank-drop-${draggedData.id}`
+      : undefined;
+
+  const targets = [];
+  let boardTarget;
+
+  for (const [id, container] of droppableContainers) {
+    if (container?.disabled) continue;
+    if (id === ownDropId) continue;
+
+    const rect = droppableRects.get(id);
+    if (!rect) continue;
+
+    const center = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+    // Land the dragged item's own top-left corner at the target's center-left point,
+    // rather than at the target's own top-left corner (avoids overshooting into a
+    // neighboring droppable when the target is much wider than the dragged item).
+    const dropPosition = {
+      x: rect.left,
+      y: rect.top + rect.height / 2,
+    };
+
+    const target = { id, rect, dropPosition, center };
+
+    if (id === CHOICE_BOARD_ID) {
+      boardTarget = target;
+    } else {
+      targets.push(target);
+    }
+  }
+
+  if (targets.length === 0 && !boardTarget) {
+    return currentCoordinates;
+  }
+
+  const reverse = event.shiftKey;
+
+  targets.sort((a, b) => {
+    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
+    return a.center.x - b.center.x;
+  });
+
+  // The choice board can be an arbitrarily large container — e.g. several choices
+  // stacked beside the markup (`choicePosition: 'right'`/`'left'`) — so its own center
+  // can land anywhere relative to the blanks it sits beside, including numerically
+  // between two of them. Sorting it by position the same way as a blank would then
+  // interleave it into the middle of the cycle, making a single Tab press jump over
+  // more than one blank (confirmed live: with 3 stacked choices beside wrapped text,
+  // the board's center fell between blank 2 and blank 3, so the very first Tab press
+  // from the pool landed on blank 3, skipping blanks 1 and 2 entirely). Anchor it as a
+  // fixed stop after every blank, in every layout, instead of trusting its own bounds.
+  if (boardTarget) {
+    targets.push(boardTarget);
+  }
+
+  // Find the current target: whichever target's rect actually contains the dragged
+  // item's own center. This holds regardless of how the dragged item's size compares
+  // to the target's — a compact chip landed (per `dropPosition` above) at a much wider
+  // target's left edge is still contained within that target's rect. Comparing
+  // distances between reconstructed centers instead breaks down for exactly that shape
+  // (a small item in a much wider target): the reconstructed center can end up closer
+  // to a completely different droppable than to the one the item is actually sitting
+  // on, so the *next* press re-matches the wrong target and looks like it does nothing.
+  const draggedCenter = collisionRect
+    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }
+    : currentCoordinates;
+
+  let currentIndex = targets.findIndex(
+    (t) =>
+      draggedCenter.x >= t.rect.left &&
+      draggedCenter.x <= t.rect.right &&
+      draggedCenter.y >= t.rect.top &&
+      draggedCenter.y <= t.rect.bottom,
+  );
+
+  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly
+  // inside any target (e.g. mid-flight after a free arrow-key move).
+  if (currentIndex === -1) {
+    let minDist = Infinity;
+
+    for (let i = 0; i < targets.length; i++) {
+      const dist = distance(currentCoordinates, targets[i].dropPosition);
+
+      if (dist < minDist) {
+        minDist = dist;
+        currentIndex = i;
+      }
+    }
+  }
+
+  const nextIndex = reverse
+    ? (currentIndex - 1 + targets.length) % targets.length
+    : (currentIndex + 1) % targets.length;
+
+  return targets[nextIndex].dropPosition;
+};
+
+const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);

package/src/mask.jsx

@@ -32,7 +32,7 @@ const getMark = (n) => {
   const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
 
   if (mark) {
-    return mark.marks[0];
+    return mark.marks;
   }
 
   return null;
@@ -83,18 +83,20 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         const extraText = addText(parentNode, t);
         return extraText ? acc + extraText : acc;
       }, '');
-      const mark = getMark(n);
+      const marks = getMark(n);
 
-      if (mark) {
-        let markKey;
+      if (marks?.length > 0) {
+        const tagsToWrap = marks
+          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))
+          .filter(Boolean);
 
-        for (markKey in MARK_TAGS) {
-          if (MARK_TAGS[markKey] === mark.type) {
-            const Tag = markKey;
-
-            children.push(<Tag key={key}>{content}</Tag>);
-            break;
-          }
+        if (tagsToWrap.length > 0) {
+          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>
+          children.push(
+            tagsToWrap.reduceRight((acc, Tag, tagIndex) => <Tag key={`${key}-${Tag}-${tagIndex}`}>{acc}</Tag>, content),
+          );
+        } else {
+          children.push(content);
         }
       } else if (content.length > 0) {
         children.push(content);

package/lib/__tests__/drag-in-the-blank.test.js

@@ -1,129 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _react2 = require("@testing-library/react");
-var _dragInTheBlank = _interopRequireDefault(require("../drag-in-the-blank"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var markup = "<div>\n  <img src=\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\"></img>\n   <h5>Hey Diddle Diddle <i>by ?</i></h5>\n <p>1: Hey, diddle, diddle,</p>\n <p>2: The cat and the fiddle,</p>\n <p>3: The cow {{0}} over the moon;</p>\n <p>4: The little dog {{1}},</p>\n <p>5: To see such sport,</p>\n <p>6: And the dish ran away with the {{2}}.</p>\n</div>";
-var choice = function choice(v, id) {
-  return {
-    value: v,
-    id: id
-  };
-};
-
-// Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement
-jest.mock('@pie-lib/drag', function () {
-  return {
-    DragProvider: function DragProvider(_ref) {
-      var children = _ref.children,
-        onDragStart = _ref.onDragStart,
-        onDragEnd = _ref.onDragEnd;
-      // Simple wrapper that doesn't require DndContext
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "drag-provider"
-      }, children);
-    },
-    DragDroppablePlaceholder: function DragDroppablePlaceholder(_ref2) {
-      var children = _ref2.children,
-        disabled = _ref2.disabled,
-        instanceId = _ref2.instanceId;
-      // Simple wrapper that doesn't require useDroppable
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "drag-droppable-placeholder"
-      }, children);
-    }
-  };
-});
-
-// Mock @dnd-kit/core components and hooks used by DragInTheBlank and child components
-jest.mock('@dnd-kit/core', function () {
-  return {
-    DragOverlay: function DragOverlay(_ref3) {
-      var children = _ref3.children;
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "drag-overlay"
-      }, children);
-    },
-    closestCenter: jest.fn(),
-    useDraggable: jest.fn(function () {
-      return {
-        attributes: {},
-        listeners: {},
-        setNodeRef: jest.fn(),
-        transform: null,
-        isDragging: false
-      };
-    }),
-    useDroppable: jest.fn(function () {
-      return {
-        setNodeRef: jest.fn(),
-        isOver: false,
-        active: null
-      };
-    })
-  };
-});
-jest.mock('@dnd-kit/utilities', function () {
-  return {
-    CSS: {
-      Translate: {
-        toString: jest.fn(function () {
-          return 'translate3d(0, 0, 0)';
-        })
-      }
-    }
-  };
-});
-describe('DragInTheBlank', function () {
-  var defaultProps = {
-    disabled: false,
-    feedback: {},
-    markup: markup,
-    choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2'), choice('Fork', '3'), choice('Bumped', '4'), choice('Smiled', '5')],
-    value: {
-      0: undefined
-    }
-  };
-  describe('render', function () {
-    it('renders correctly with default props', function () {
-      var _render = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], defaultProps)),
-        container = _render.container;
-      expect(container.firstChild).toBeInTheDocument();
-      // Check that markup content is rendered
-      expect(_react2.screen.getByText(/Hey Diddle Diddle/)).toBeInTheDocument();
-      expect(_react2.screen.getByText(/Hey, diddle, diddle,/)).toBeInTheDocument();
-    });
-    it('renders correctly with disabled prop as true', function () {
-      var _render2 = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], (0, _extends2["default"])({}, defaultProps, {
-          disabled: true
-        }))),
-        container = _render2.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-    it('renders correctly with feedback', function () {
-      var _render3 = (0, _react2.render)(/*#__PURE__*/React.createElement(_dragInTheBlank["default"], (0, _extends2["default"])({}, defaultProps, {
-          feedback: {
-            0: {
-              value: 'Jumped',
-              correct: 'Jumped'
-            },
-            1: {
-              value: 'Laughed',
-              correct: 'Laughed'
-            },
-            2: {
-              value: 'Spoon',
-              correct: 'Spoon'
-            }
-          }
-        }))),
-        container = _render3.container;
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-//# sourceMappingURL=drag-in-the-blank.test.js.map

package/lib/__tests__/drag-in-the-blank.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drag-in-the-blank.test.js","names":["React","_interopRequireWildcard","require","_react2","_dragInTheBlank","_interopRequireDefault","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","markup","choice","v","id","value","jest","mock","DragProvider","_ref","children","onDragStart","onDragEnd","createElement","DragDroppablePlaceholder","_ref2","disabled","instanceId","DragOverlay","_ref3","closestCenter","fn","useDraggable","attributes","listeners","setNodeRef","transform","isDragging","useDroppable","isOver","active","CSS","Translate","toString","describe","defaultProps","feedback","choices","undefined","it","_render","render","container","expect","firstChild","toBeInTheDocument","screen","getByText","_render2","_extends2","_render3","correct"],"sources":["../../src/__tests__/drag-in-the-blank.test.js"],"sourcesContent":["import * as React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport DragInTheBlank from '../drag-in-the-blank';\n\nconst markup = `<div>\n  <img src=\"https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg\"></img>\n   <h5>Hey Diddle Diddle <i>by ?</i></h5>\n <p>1: Hey, diddle, diddle,</p>\n <p>2: The cat and the fiddle,</p>\n <p>3: The cow {{0}} over the moon;</p>\n <p>4: The little dog {{1}},</p>\n <p>5: To see such sport,</p>\n <p>6: And the dish ran away with the {{2}}.</p>\n</div>`;\nconst choice = (v, id) => ({ value: v, id });\n\n// Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement\njest.mock('@pie-lib/drag', () => ({\n  DragProvider: ({ children, onDragStart, onDragEnd }) => {\n    // Simple wrapper that doesn't require DndContext\n    return <div data-testid=\"drag-provider\">{children}</div>;\n  },\n  DragDroppablePlaceholder: ({ children, disabled, instanceId }) => {\n    // Simple wrapper that doesn't require useDroppable\n    return <div data-testid=\"drag-droppable-placeholder\">{children}</div>;\n  },\n}));\n\n// Mock @dnd-kit/core components and hooks used by DragInTheBlank and child components\njest.mock('@dnd-kit/core', () => ({\n  DragOverlay: ({ children }) => <div data-testid=\"drag-overlay\">{children}</div>,\n  closestCenter: jest.fn(),\n  useDraggable: jest.fn(() => ({\n    attributes: {},\n    listeners: {},\n    setNodeRef: jest.fn(),\n    transform: null,\n    isDragging: false,\n  })),\n  useDroppable: jest.fn(() => ({\n    setNodeRef: jest.fn(),\n    isOver: false,\n    active: null,\n  })),\n}));\n\njest.mock('@dnd-kit/utilities', () => ({\n  CSS: {\n    Translate: {\n      toString: jest.fn(() => 'translate3d(0, 0, 0)'),\n    },\n  },\n}));\n\ndescribe('DragInTheBlank', () => {\n  const defaultProps = {\n    disabled: false,\n    feedback: {},\n    markup,\n    choices: [\n      choice('Jumped', '0'),\n      choice('Laughed', '1'),\n      choice('Spoon', '2'),\n      choice('Fork', '3'),\n      choice('Bumped', '4'),\n      choice('Smiled', '5'),\n    ],\n\n    value: {\n      0: undefined,\n    },\n  };\n\n  describe('render', () => {\n    it('renders correctly with default props', () => {\n      const { container } = render(<DragInTheBlank {...defaultProps} />);\n      expect(container.firstChild).toBeInTheDocument();\n      // Check that markup content is rendered\n      expect(screen.getByText(/Hey Diddle Diddle/)).toBeInTheDocument();\n      expect(screen.getByText(/Hey, diddle, diddle,/)).toBeInTheDocument();\n    });\n\n    it('renders correctly with disabled prop as true', () => {\n      const { container } = render(<DragInTheBlank {...defaultProps} disabled={true} />);\n      expect(container.firstChild).toBeInTheDocument();\n    });\n\n    it('renders correctly with feedback', () => {\n      const { container } = render(\n        <DragInTheBlank\n          {...defaultProps}\n          feedback={{\n            0: {\n              value: 'Jumped',\n              correct: 'Jumped',\n            },\n            1: {\n              value: 'Laughed',\n              correct: 'Laughed',\n            },\n            2: {\n              value: 'Spoon',\n              correct: 'Spoon',\n            },\n          }}\n        />,\n      );\n      expect(container.firstChild).toBeInTheDocument();\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/__tests__/index.test.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _componentize = _interopRequireDefault(require("../componentize"));
-var _serialization = require("../serialization");
-describe('index', function () {
-  describe('componentize', function () {
-    it('should return an array with the appropriate markup', function () {
-      var dropDownMarkup = (0, _componentize["default"])('{{0}} foo {{1}}', 'dropdown');
-      expect(dropDownMarkup).toEqual({
-        markup: '<span data-component="dropdown" data-id="0"></span> foo <span data-component="dropdown" data-id="1"></span>'
-      });
-    });
-  });
-  describe('serialization', function () {
-    it('should have default node a span', function () {
-      expect((0, _serialization.deserialize)('something')).toEqual(expect.objectContaining({
-        object: 'value',
-        document: {
-          object: 'document',
-          data: {},
-          nodes: [{
-            object: 'block',
-            data: {},
-            isVoid: false,
-            type: 'span',
-            nodes: [{
-              object: 'text',
-              leaves: [{
-                text: 'something'
-              }]
-            }]
-          }]
-        }
-      }));
-    });
-  });
-});
-//# sourceMappingURL=index.test.js.map

package/lib/__tests__/index.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.js","names":["_componentize","_interopRequireDefault","require","_serialization","describe","it","dropDownMarkup","componentize","expect","toEqual","markup","deserialize","objectContaining","object","document","data","nodes","isVoid","type","leaves","text"],"sources":["../../src/__tests__/index.test.js"],"sourcesContent":["import componentize from '../componentize';\nimport { deserialize } from '../serialization';\n\ndescribe('index', () => {\n  describe('componentize', () => {\n    it('should return an array with the appropriate markup', () => {\n      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');\n\n      expect(dropDownMarkup).toEqual({\n        markup:\n          '<span data-component=\"dropdown\" data-id=\"0\"></span> foo <span data-component=\"dropdown\" data-id=\"1\"></span>',\n      });\n    });\n  });\n\n  describe('serialization', () => {\n    it('should have default node a span', () => {\n      expect(deserialize('something')).toEqual(\n        expect.objectContaining({\n          object: 'value',\n          document: {\n            object: 'document',\n            data: {},\n            nodes: [\n              {\n                object: 'block',\n                data: {},\n                isVoid: false,\n                type: 'span',\n                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],\n              },\n            ],\n          },\n        }),\n      );\n    });\n  });\n});\n"],"mappings":";;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAEAE,QAAQ,CAAC,OAAO,EAAE,YAAM;EACtBA,QAAQ,CAAC,cAAc,EAAE,YAAM;IAC7BC,EAAE,CAAC,oDAAoD,EAAE,YAAM;MAC7D,IAAMC,cAAc,GAAG,IAAAC,wBAAY,EAAC,iBAAiB,EAAE,UAAU,CAAC;MAElEC,MAAM,CAACF,cAAc,CAAC,CAACG,OAAO,CAAC;QAC7BC,MAAM,EACJ;MACJ,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFN,QAAQ,CAAC,eAAe,EAAE,YAAM;IAC9BC,EAAE,CAAC,iCAAiC,EAAE,YAAM;MAC1CG,MAAM,CAAC,IAAAG,0BAAW,EAAC,WAAW,CAAC,CAAC,CAACF,OAAO,CACtCD,MAAM,CAACI,gBAAgB,CAAC;QACtBC,MAAM,EAAE,OAAO;QACfC,QAAQ,EAAE;UACRD,MAAM,EAAE,UAAU;UAClBE,IAAI,EAAE,CAAC,CAAC;UACRC,KAAK,EAAE,CACL;YACEH,MAAM,EAAE,OAAO;YACfE,IAAI,EAAE,CAAC,CAAC;YACRE,MAAM,EAAE,KAAK;YACbC,IAAI,EAAE,MAAM;YACZF,KAAK,EAAE,CAAC;cAAEH,MAAM,EAAE,MAAM;cAAEM,MAAM,EAAE,CAAC;gBAAEC,IAAI,EAAE;cAAY,CAAC;YAAE,CAAC;UAC7D,CAAC;QAEL;MACF,CAAC,CACH,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}