@pie-lib/mask-markup 3.1.3 → 4.0.0-next.37

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

@@ -1,351 +0,0 @@
-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';
-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 || {};
-  if (dataset.component === 'blank') {
-    // eslint-disable-next-line react/prop-types
-    const {
-      disabled,
-      duplicates,
-      correctResponse,
-      feedback,
-      showCorrectAnswer,
-      emptyResponseAreaWidth,
-      emptyResponseAreaHeight,
-      instanceId,
-      isDragging,
-      selectedItem,
-      onSelectClick,
-      onPlacementClick,
-    } = 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}
-        selectedItem={selectedItem}
-        onSelectClick={onSelectClick}
-        onPlacementClick={onPlacementClick}
-      />
-    );
-  }
-});
-
-export default class DragInTheBlank extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeDragItem: null,
-      dropAnimation: undefined,
-      selectedItem: null,
-    };
-    this.lastDragEndAt = 0;
-  }
-
-  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
-        selectedItem: active.data.current,
-      });
-    }
-  };
-
-  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;
-  };
-
-  // 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 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,
-    });
-
-    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);
-  };
-
-  onPlacementClick = (targetId) => {
-    if (this.isClickSoonAfterDragEnd()) return;
-
-    this.placeSelectedItem(targetId);
-  };
-
-  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}
-        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
-            choicePosition={choicePosition}
-            choices={choices}
-            value={value}
-            duplicates={duplicates}
-            disabled={disabled}
-            instanceId={instanceId}
-            selectedItem={this.state.selectedItem}
-            onSelectClick={this.onItemClick}
-            onPlacementClick={this.onPlacementClick}
-          />
-          <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}
-            selectedItem={this.state.selectedItem}
-            onSelectClick={this.onItemClick}
-            onPlacementClick={this.onPlacementClick}
-          />
-          <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>
-            {this.renderDragOverlay()}
-          </DragOverlay>
-        </div>
-      </DragProvider>
-    );
-  }
-}

package/src/index.js

@@ -1,16 +0,0 @@
-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

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