fix(blanks-exercise): Comment out DndProvider because nested `DndPr…

…oviders` have issues
serlo · Dec 14, 2023 · 041a404 · 041a404
1 parent 766a6b2
commit 041a404
Showing 1 changed file with 93 additions and 93 deletions.
diff --git a/apps/web/src/serlo-editor/plugins/fill-in-the-blanks-exercise/renderer.tsx b/apps/web/src/serlo-editor/plugins/fill-in-the-blanks-exercise/renderer.tsx
@@ -89,106 +89,106 @@ export function FillInTheBlanksRenderer(props: FillInTheBlanksRendererProps) {
 
   return (
     // Additional prop 'context={window}' prevents error with nested DndProvider components. See: https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032
-    <DndProvider backend={HTML5Backend} context={window}>
-      <div className="mx-side mb-block leading-[30px] [&>p]:leading-[30px]">
-        <FillInTheBlanksContext.Provider
-          value={{
-            mode: mode,
-            feedbackForBlanks: feedbackForBlanks,
-            textInBlanks: textInBlanks,
-            textUserTypedIntoBlanks: {
-              value: textUserTypedIntoBlanks,
-              set: setTextUserTypedIntoBlanks,
-            },
-            draggables: draggables,
-            locationOfDraggables: {
-              value: locationOfDraggables,
-              set: setLocationOfDraggables,
-            },
+    // <DndProvider backend={HTML5Backend} context={window}>
+    <div className="mx-side mb-block leading-[30px] [&>p]:leading-[30px]">
+      <FillInTheBlanksContext.Provider
+        value={{
+          mode: mode,
+          feedbackForBlanks: feedbackForBlanks,
+          textInBlanks: textInBlanks,
+          textUserTypedIntoBlanks: {
+            value: textUserTypedIntoBlanks,
+            set: setTextUserTypedIntoBlanks,
+          },
+          draggables: draggables,
+          locationOfDraggables: {
+            value: locationOfDraggables,
+            set: setLocationOfDraggables,
+          },
+        }}
+      >
+        {text}
+      </FillInTheBlanksContext.Provider>
+      {mode === 'drag-and-drop' ? (
+        <DraggableSolutionArea
+          locationOfDraggables={{
+            value: locationOfDraggables,
+            set: setLocationOfDraggables,
           }}
         >
-          {text}
-        </FillInTheBlanksContext.Provider>
-        {mode === 'drag-and-drop' ? (
-          <DraggableSolutionArea
-            locationOfDraggables={{
-              value: locationOfDraggables,
-              set: setLocationOfDraggables,
-            }}
-          >
-            {draggables.map((draggable, index) => {
-              if (locationOfDraggables.get(draggable.draggableId)) return null
-              return (
-                <DraggableSolution
-                  key={index}
-                  text={draggable.text}
-                  draggableId={draggable.draggableId}
-                />
-              )
-            })}
-          </DraggableSolutionArea>
-        ) : null}
-
-        {/* Copied from mc-renderer.tsx */}
-        <div className="mt-2 flex">
-          <button
-            className="serlo-button-blue mr-3 h-8"
-            onClick={() => {
-              checkAnswers()
-              setShowFeedback(true)
-            }}
-          >
-            {exStrings.check}
-          </button>
-          {showFeedback && (
-            <Feedback
-              correct={[...feedbackForBlanks].every(
-                (entry) => entry[1].isCorrect
-              )}
-            />
-          )}
-        </div>
-
-        {/* Only debug output from here on */}
-        <div className="hidden">
-          Blanks state:
-          {blanks.map((blank, index) => (
-            <div key={index}>{JSON.stringify(blank)}</div>
-          ))}
-        </div>
-        <div className="hidden">
-          <div>State textUserTypedIntoBlank:</div>
-          {[...textUserTypedIntoBlanks].map((entry, index) => {
-            const blankId = entry[0]
-            const text = entry[1].text
-            return (
-              <div
-                className="ml-5"
-                key={index}
-              >{`Text: ${text} | BlankId: ${blankId}`}</div>
-            )
-          })}
-        </div>
-        <div className="hidden">
-          {[...locationOfDraggables].map((entry, index) => {
-            return (
-              <div key={index}>
-                {`DraggableId: ${entry[0]} in blankId: ${entry[1]}`}
-              </div>
-            )
-          })}
-        </div>
-        <div className="hidden">
           {draggables.map((draggable, index) => {
+            if (locationOfDraggables.get(draggable.draggableId)) return null
             return (
-              <div key={index}>
-                {`DraggableId: ${draggable.draggableId} with text: ${draggable.text}`}
-              </div>
+              <DraggableSolution
+                key={index}
+                text={draggable.text}
+                draggableId={draggable.draggableId}
+              />
             )
           })}
-        </div>
+        </DraggableSolutionArea>
+      ) : null}
+
+      {/* Copied from mc-renderer.tsx */}
+      <div className="mt-2 flex">
+        <button
+          className="serlo-button-blue mr-3 h-8"
+          onClick={() => {
+            checkAnswers()
+            setShowFeedback(true)
+          }}
+        >
+          {exStrings.check}
+        </button>
+        {showFeedback && (
+          <Feedback
+            correct={[...feedbackForBlanks].every(
+              (entry) => entry[1].isCorrect
+            )}
+          />
+        )}
+      </div>
+
+      {/* Only debug output from here on */}
+      <div className="hidden">
+        Blanks state:
+        {blanks.map((blank, index) => (
+          <div key={index}>{JSON.stringify(blank)}</div>
+        ))}
+      </div>
+      <div className="hidden">
+        <div>State textUserTypedIntoBlank:</div>
+        {[...textUserTypedIntoBlanks].map((entry, index) => {
+          const blankId = entry[0]
+          const text = entry[1].text
+          return (
+            <div
+              className="ml-5"
+              key={index}
+            >{`Text: ${text} | BlankId: ${blankId}`}</div>
+          )
+        })}
+      </div>
+      <div className="hidden">
+        {[...locationOfDraggables].map((entry, index) => {
+          return (
+            <div key={index}>
+              {`DraggableId: ${entry[0]} in blankId: ${entry[1]}`}
+            </div>
+          )
+        })}
+      </div>
+      <div className="hidden">
+        {draggables.map((draggable, index) => {
+          return (
+            <div key={index}>
+              {`DraggableId: ${draggable.draggableId} with text: ${draggable.text}`}
+            </div>
+          )
+        })}
       </div>
-    </DndProvider>
+    </div>
+    // </DndProvider>
   )
 
   function checkAnswers() {