catchup-library-web 1.20.35 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.35",
+  "version": "1.21.00",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -13,14 +13,11 @@
   "dependencies": {
     "@types/lodash": "^4.17.20",
     "lodash": "^4.17.21",
-    "mathlive": "^0.105.3",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-touch-backend": "^16.0.1"
+    "mathlive": "^0.105.3"
   },
   "peerDependencies": {
     "i18next": ">=22.0.0",
     "react": "^18.0.0",
-    "react-dnd": "^16.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": ">=12.0.0",
     "react-katex": "^3.0.0",
@@ -36,7 +33,6 @@
     "@types/react-modal": "^3.16.3",
     "i18next": "^24.2.2",
     "react": "^18.3.0",
-    "react-dnd": "^16.0.1",
     "react-dom": "^18.3.0",
     "react-i18next": "^15.4.0",
     "react-katex": "^3.0.1",

package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx

@@ -28,6 +28,10 @@ const FillInTheBlanksActivityMaterialContent = ({
     null
   );
   const dragElementRef = useRef<HTMLDivElement>(null);
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
   const [touchPosition, setTouchPosition] = useState<{ x: number; y: number }>({
     x: 0,
     y: 0,
@@ -87,6 +91,24 @@ const FillInTheBlanksActivityMaterialContent = ({
     e.preventDefault();
     setDraggedOption(option);
     setSelectedOption(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent): void => {
+    if (!draggedOption) return;
+
+    setMousePosition({ x: e.clientX, y: e.clientY });
+
+    // Find the element under the mouse point
+    const elementUnder = document.elementFromPoint(e.clientX, e.clientY);
+    const dropZone = elementUnder?.closest("[data-drop-zone]");
+
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
   };
 
   const handleMouseUp = (): void => {
@@ -95,6 +117,7 @@ const FillInTheBlanksActivityMaterialContent = ({
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setMousePosition({ x: 0, y: 0 });
   };
 
   // Touch drag handlers
@@ -138,6 +161,7 @@ const FillInTheBlanksActivityMaterialContent = ({
     setDraggedOption(null);
     setDropTargetIndex(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
 
   // Click/tap to select (for easier mobile interaction)
@@ -156,7 +180,11 @@ const FillInTheBlanksActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
 
   return (
-    <div className="flex flex-row flex-wrap items-center">
+    <div
+      className="flex flex-row flex-wrap items-center"
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    >
       <div className="hidden md:block">
         <span className="font-semibold text-xl opacity-60">
           {i18n.t("please_select_fill_in_the_blanks_text")}
@@ -166,6 +194,38 @@ const FillInTheBlanksActivityMaterialContent = ({
         <DividerLine />
       </div>
 
+      {/* Floating drag preview for mouse */}
+      {draggedOption && mousePosition.x > 0 && (
+        <div
+          className="fixed pointer-events-none z-50 opacity-80"
+          style={{
+            left: `${mousePosition.x}px`,
+            top: `${mousePosition.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {contentMap.type === "TEXT" ? (
+            <div className="border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <p className="italic whitespace-pre-wrap">
+                <InputWithSpecialExpression
+                  value={draggedOption}
+                  showSpecialOnly={false}
+                />
+              </p>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={uniqueValue}
+                contentType={contentMap.type}
+                src={draggedOption}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Floating drag preview for touch */}
       {draggedOption && touchPosition.x > 0 && (
         <div
@@ -254,7 +314,7 @@ const FillInTheBlanksActivityMaterialContent = ({
           )
         )}
       </div>
-      <div className="w-full flex flex-row flex-wrap" onMouseUp={handleMouseUp}>
+      <div className="w-full flex flex-row flex-wrap">
         {Object.keys(answerMap).map((materialKey, index) => {
           const learnerAnswerState = checkAnswerState(
             JSON.parse(materialMap[materialKey]),