@pie-lib/mask-markup 3.1.5 → 3.1.6-beta.10

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

@@ -6,13 +6,6 @@ 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 || {};
@@ -28,9 +21,6 @@ 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
@@ -57,9 +47,6 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         }}
         instanceId={instanceId}
         isDragging={isDragging}
-        selectedItem={selectedItem}
-        onSelectClick={onSelectClick}
-        onPlacementClick={onPlacementClick}
       />
     );
   }
@@ -71,9 +58,7 @@ export default class DragInTheBlank extends React.Component {
     this.state = {
       activeDragItem: null,
       dropAnimation: undefined,
-      selectedItem: null,
     };
-    this.lastDragEndAt = 0;
   }
 
   static propTypes = {
@@ -104,7 +89,6 @@ export default class DragInTheBlank extends React.Component {
       this.setState({
         activeDragItem: active.data.current,
         dropAnimation: undefined, // default during drag
-        selectedItem: active.data.current,
       });
     }
   };
@@ -126,40 +110,9 @@ 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;
@@ -173,83 +126,29 @@ export default class DragInTheBlank extends React.Component {
       dropAnimation: isValidDrop ? null : undefined,
     });
 
-    this.cancelSelection();
-    this.lastDragEndAt = Date.now();
-
-    if (!isValidDrop) return;
-
-    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);
-  };
+    if (!isValidDrop || !onChange) return;
 
-  onPlacementClick = (targetId) => {
-    if (this.isClickSoonAfterDragEnd()) return;
+    const draggedItem = draggedData;
+    const targetId = dropData.id;
 
-    this.placeSelectedItem(targetId);
+    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) => {
@@ -304,10 +203,7 @@ 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
@@ -317,9 +213,6 @@ 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"
@@ -337,9 +230,6 @@ 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/mask.jsx

@@ -32,7 +32,7 @@ const getMark = (n) => {
   const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
 
   if (mark) {
-    return mark.marks;
+    return mark.marks[0];
   }
 
   return null;
@@ -83,20 +83,18 @@ export const renderChildren = (layout, value, onChange, rootRenderChildren, pare
         const extraText = addText(parentNode, t);
         return extraText ? acc + extraText : acc;
       }, '');
-      const marks = getMark(n);
+      const mark = getMark(n);
 
-      if (marks?.length > 0) {
-        const tagsToWrap = marks
-          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))
-          .filter(Boolean);
+      if (mark) {
+        let markKey;
 
-        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);
+        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);

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/lib/keyboard-coordinates.js.map

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

package/src/__tests__/keyboard-coordinates.test.js

@@ -1,202 +0,0 @@
-import { KeyboardCode } from '@dnd-kit/core';
-import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
-
-function rectsToContext(rects) {
-  const droppableRects = new Map(Object.entries(rects));
-  const droppableContainers = new Map(Object.keys(rects).map((id) => [id, { disabled: false }]));
-
-  return { droppableRects, droppableContainers };
-}
-
-function makeEvent(code, shiftKey = false) {
-  return { code, preventDefault: () => {}, shiftKey };
-}
-
-// Mirrors dnd-kit's own KeyboardSensor, which always derives collisionRect's top-left
-// from the dragged item's current on-screen position on every keydown — so a test's
-// collisionRect must track currentCoordinates the same way on every simulated press,
-// not stay fixed while currentCoordinates changes across multiple presses.
-function press(rects, currentCoordinates, itemSize, event, active) {
-  const context = {
-    ...rectsToContext(rects),
-    collisionRect: { left: currentCoordinates.x, top: currentCoordinates.y, ...itemSize },
-  };
-
-  return closestDroppableKeyboardCoordinates(event, { active, context, currentCoordinates });
-}
-
-describe('closestDroppableKeyboardCoordinates', () => {
-  describe('arrow keys', () => {
-    it("nudges the dragged item by dnd-kit's own default step (25px), unchanged", () => {
-      const context = { ...rectsToContext({}), collisionRect: { left: 0, top: 0, width: 100, height: 40 } };
-      const currentCoordinates = { x: 10, y: 20 };
-
-      expect(
-        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Down), { context, currentCoordinates }),
-      ).toEqual({ x: 10, y: 45 });
-      expect(
-        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Up), { context, currentCoordinates }),
-      ).toEqual({ x: 10, y: -5 });
-      expect(
-        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Right), { context, currentCoordinates }),
-      ).toEqual({ x: 35, y: 20 });
-      expect(
-        closestDroppableKeyboardCoordinates(makeEvent(KeyboardCode.Left), { context, currentCoordinates }),
-      ).toEqual({ x: -15, y: 20 });
-    });
-  });
-
-  describe('Tab / Shift+Tab', () => {
-    const blank0Rect = { left: 0, top: 0, width: 120, height: 40, right: 120, bottom: 40 };
-    const blank1Rect = { left: 0, top: 60, width: 120, height: 40, right: 120, bottom: 100 };
-    const boardRect = { left: 0, top: 120, width: 400, height: 300, right: 400, bottom: 420 };
-    const baseRects = {
-      'mask-blank-drop-0': blank0Rect,
-      'mask-blank-drop-1': blank1Rect,
-      'drag-in-the-blank-droppable': boardRect,
-    };
-
-    it('jumps to the next droppable in top-to-bottom order, landing at its center-left point', () => {
-      const currentCoordinates = { x: blank0Rect.left, y: blank0Rect.top };
-
-      const next = press(baseRects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab'));
-
-      expect(next).toEqual({ x: blank1Rect.left, y: blank1Rect.top + blank1Rect.height / 2 });
-    });
-
-    it('cycles backwards with Shift+Tab, wrapping to the choice board', () => {
-      const currentCoordinates = { x: blank0Rect.left, y: blank0Rect.top };
-
-      const next = press(baseRects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab', true));
-
-      expect(next).toEqual({ x: boardRect.left, y: boardRect.top + boardRect.height / 2 });
-    });
-
-    it("excludes a dragged blank's own drop-zone from the cycle", () => {
-      // A blank is simultaneously draggable and droppable for its own slot (the same
-      // shape as match-list's placed "target" tiles). Without excluding it, containment
-      // would match the blank to itself and cycle relative to itself instead of its
-      // real neighbors — this test is constructed so the two behaviors give different,
-      // distinguishable results (not just coincidentally the same answer).
-      const blankARect = { left: 0, top: 0, width: 120, height: 40, right: 120, bottom: 40 };
-      const blankBRect = { left: 0, top: 60, width: 120, height: 40, right: 120, bottom: 100 };
-      const blankCRect = { left: 0, top: 120, width: 120, height: 40, right: 120, bottom: 160 };
-      const rects = {
-        'mask-blank-drop-a': blankARect,
-        'mask-blank-drop-b': blankBRect,
-        'mask-blank-drop-c': blankCRect,
-      };
-      const active = { data: { current: { id: 'b', fromChoice: false, type: 'MaskBlank' } } };
-      // Sitting exactly at blank B's own position.
-      const currentCoordinates = { x: blankBRect.left, y: blankBRect.top };
-
-      const next = press(rects, currentCoordinates, { width: 120, height: 40 }, makeEvent('Tab', true), active);
-
-      // With B's own slot excluded, Shift+Tab from B's position falls back to
-      // nearest-by-dropPosition among the remaining targets (A and C) — A is closer to
-      // B's actual position, making A the resolved "current", so reverse from there
-      // lands on C. Without the exclusion, containment would match B to itself
-      // directly (index 1 of [A, B, C] sorted by position), landing on A instead.
-      expect(next).toEqual({ x: blankCRect.left, y: blankCRect.top + blankCRect.height / 2 });
-    });
-
-    it('keeps advancing on repeated Shift+Tab when the choice board is much wider than the dragged item', () => {
-      // Regression case for the bug already found and fixed in match-list/image-cloze-
-      // association: matching the "current" target by reconstructing a center from the
-      // dragged item's own small size (instead of checking which target's rect actually
-      // contains it) makes the *next* press re-match a completely different droppable
-      // once the item is actually sitting on a wide target, so it looks like the press
-      // does nothing.
-      const wideBlankRect = { left: 0, top: 0, width: 900, height: 40, right: 900, bottom: 40 };
-      const rects = { 'mask-blank-drop-0': wideBlankRect, 'drag-in-the-blank-droppable': boardRect };
-      const itemSize = { width: 100, height: 40 };
-
-      const afterFirst = press(rects, { x: boardRect.left, y: boardRect.top }, itemSize, makeEvent('Tab', true));
-
-      expect(afterFirst).toEqual({ x: 0, y: 20 }); // wide blank's center-left point
-
-      const afterSecond = press(rects, afterFirst, itemSize, makeEvent('Tab', true));
-
-      expect(afterSecond).toEqual({ x: boardRect.left, y: boardRect.top + boardRect.height / 2 });
-    });
-
-    it('correctly identifies the choice board as the current target when picking up an item positioned near its edge, close to a small neighboring blank', () => {
-      // Regression case for the OTHER failure mode: matching "current target" purely by
-      // nearest-dropPosition (instead of containment first) can misidentify a large
-      // droppable as some small, unrelated nearby one, because a large droppable's
-      // dropPosition is anchored at its own vertical middle.
-      const tallBoardRect = { left: 0, top: 0, width: 400, height: 600, right: 400, bottom: 600 };
-      const smallBlankRect = { left: 0, top: -60, width: 100, height: 40, right: 100, bottom: -20 };
-      const rects = { 'mask-blank-drop-0': smallBlankRect, 'drag-in-the-blank-droppable': tallBoardRect };
-      const itemSize = { width: 100, height: 40 };
-
-      const currentCoordinates = { x: 0, y: 10 };
-
-      const next = press(rects, currentCoordinates, itemSize, makeEvent('Tab'));
-
-      expect(next).toEqual({ x: smallBlankRect.left, y: smallBlankRect.top + smallBlankRect.height / 2 });
-    });
-
-    it('keeps the choice board as a fixed last stop instead of sorting it in by its own center, when the board spans multiple blank rows', () => {
-      // Regression case for a real bug found via manual browser testing: with 3
-      // choices stacked beside wrapped inline text (`choicePosition: 'right'`), the
-      // tall choice board's own center fell numerically BETWEEN blank 2 and blank 3's
-      // rows. Sorting it by position the same way as a blank interleaved it into the
-      // middle of the cycle, so the very first Tab press after picking up a pool
-      // choice jumped straight to blank 3, skipping blanks 1 and 2 entirely.
-      const blank0Rect = { left: 0, top: 200, width: 50, height: 50, right: 50, bottom: 250 };
-      const blank1Rect = { left: 0, top: 250, width: 50, height: 50, right: 50, bottom: 300 };
-      const blank2Rect = { left: 0, top: 285, width: 50, height: 50, right: 50, bottom: 335 };
-      // Spans all three choices stacked beside the text — its center (287.5) falls
-      // between blank1's (275) and blank2's (310), more than 10px from either, so the
-      // old position-based sort placed it between them.
-      const tallBoardRect = { left: 400, top: 195, width: 80, height: 185, right: 480, bottom: 380 };
-      const rects = {
-        'mask-blank-drop-0': blank0Rect,
-        'mask-blank-drop-1': blank1Rect,
-        'mask-blank-drop-2': blank2Rect,
-        'drag-in-the-blank-droppable': tallBoardRect,
-      };
-      const active = { data: { current: { fromChoice: true, choice: { id: 'x' }, type: 'MaskBlank' } } };
-      const itemSize = { width: 48, height: 50 };
-      // Picking up a choice from within the board — its own current position, before
-      // any movement, sits inside the board's rect.
-      const currentCoordinates = { x: 415, y: 205 };
-
-      const next = press(rects, currentCoordinates, itemSize, makeEvent('Tab'), active);
-
-      expect(next).toEqual({ x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 });
-    });
-
-    it('cycles through every blank in position order, then the board, then wraps — even when the board would otherwise sort into the middle', () => {
-      const blank0Rect = { left: 0, top: 200, width: 50, height: 50, right: 50, bottom: 250 };
-      const blank1Rect = { left: 0, top: 250, width: 50, height: 50, right: 50, bottom: 300 };
-      const blank2Rect = { left: 0, top: 285, width: 50, height: 50, right: 50, bottom: 335 };
-      const tallBoardRect = { left: 400, top: 195, width: 80, height: 185, right: 480, bottom: 380 };
-      const rects = {
-        'mask-blank-drop-0': blank0Rect,
-        'mask-blank-drop-1': blank1Rect,
-        'mask-blank-drop-2': blank2Rect,
-        'drag-in-the-blank-droppable': tallBoardRect,
-      };
-      const active = { data: { current: { fromChoice: true, choice: { id: 'x' }, type: 'MaskBlank' } } };
-      const itemSize = { width: 48, height: 50 };
-
-      let coords = { x: 415, y: 205 };
-      const visited = [];
-
-      for (let i = 0; i < 5; i++) {
-        coords = press(rects, coords, itemSize, makeEvent('Tab'), active);
-        visited.push(coords);
-      }
-
-      expect(visited).toEqual([
-        { x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 },
-        { x: blank1Rect.left, y: blank1Rect.top + blank1Rect.height / 2 },
-        { x: blank2Rect.left, y: blank2Rect.top + blank2Rect.height / 2 },
-        { x: tallBoardRect.left, y: tallBoardRect.top + tallBoardRect.height / 2 },
-        { x: blank0Rect.left, y: blank0Rect.top + blank0Rect.height / 2 }, // wraps
-      ]);
-    });
-  });
-});

package/src/keyboard-coordinates.js

@@ -1,147 +0,0 @@
-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);