catchup-library-web 1.20.36 → 1.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.36",
+  "version": "1.21.01",
   "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
@@ -201,14 +261,12 @@ const FillInTheBlanksActivityMaterialContent = ({
       <div className="w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2">
         {shuffleOptionList.map((option, index) =>
           checkAnswerProvided(answerMap, option) ? (
-            <div className="opacity-30" key={index}>
-              <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-${index}`}
-                contentType={contentMap.type}
-                src={option}
-                canFullScreen={true}
-              />
-            </div>
+            <ShowMaterialMediaByContentType
+              key={`${uniqueValue}-${index}`}
+              contentType={contentMap.type}
+              src={option}
+              canFullScreen={true}
+            />
           ) : (
             <div
               key={index}
@@ -254,7 +312,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]),

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

@@ -24,6 +24,10 @@ const GroupingActivityMaterialContent = ({
   const [isShuffled, setIsShuffled] = useState(false);
   const [shuffledMaterialList, setShuffledMaterialList] = useState<any[]>([]);
   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,
@@ -103,6 +107,24 @@ const GroupingActivityMaterialContent = ({
     e.preventDefault();
     setDraggedValue(materialValue);
     setSelectedValue(null);
+    setMousePosition({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleMouseMove = (e: React.MouseEvent): void => {
+    if (!draggedValue) 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-grouping-drop-zone]");
+
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-grouping-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
   };
 
   const handleMouseUp = (): void => {
@@ -111,6 +133,7 @@ const GroupingActivityMaterialContent = ({
     }
     setDraggedValue(null);
     setDropTargetKey(null);
+    setMousePosition({ x: 0, y: 0 });
   };
 
   // Touch drag handlers
@@ -155,6 +178,7 @@ const GroupingActivityMaterialContent = ({
     setDraggedValue(null);
     setDropTargetKey(null);
     setDraggedElement(null);
+    setTouchPosition({ x: 0, y: 0 });
   };
 
   // Click/tap to select (for easier mobile interaction)
@@ -175,7 +199,55 @@ const GroupingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
 
   return (
-    <div onMouseUp={handleMouseUp}>
+    <div onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+      {/* Floating drag preview for mouse */}
+      {draggedValue && 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 rounded-catchup-xlarge bg-white shadow-lg">
+              <div className="flex flex-col items-center justify-center m-2 min-w-[200px]">
+                <p className="text-xl text-center whitespace-pre-wrap">
+                  {constructInputWithSpecialExpressionList(draggedValue).map(
+                    (inputPart, index) => (
+                      <span
+                        key={index}
+                        className={`${inputPart.isBold ? "font-bold" : ""} ${
+                          inputPart.isUnderline ? "underline" : ""
+                        }`}
+                      >
+                        {inputPart.isEquation ? (
+                          <span className="text-2xl">
+                            <InlineMath math={inputPart.value} />
+                          </span>
+                        ) : (
+                          inputPart.value
+                        )}
+                      </span>
+                    )
+                  )}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
+              <ShowMaterialMediaByContentType
+                key={`${uniqueValue}-drag-mouse`}
+                contentType={contentMap.type}
+                src={draggedValue}
+                canFullScreen={false}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Floating drag preview for touch */}
       {draggedValue && touchPosition.x > 0 && (
         <div
@@ -214,7 +286,7 @@ const GroupingActivityMaterialContent = ({
           ) : (
             <div className="border-catchup-blue border-2 rounded-catchup-xlarge bg-white shadow-lg">
               <ShowMaterialMediaByContentType
-                key={`${uniqueValue}-drag`}
+                key={`${uniqueValue}-drag-touch`}
                 contentType={contentMap.type}
                 src={draggedValue}
                 canFullScreen={false}