Merge pull request #3315 from serlo/refactor/blank-dummy-answers-rest…

…ructure-renaming refactor(blank): dummy answers restructure renaming
serlo · Jan 29, 2024 · 0552f28 · 0552f28
2 parents 0df679a + 8727a6a
commit 0552f28
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 44 deletions.
diff --git a/...mponents/blank-draggable-dummy-answer.tsx → ...ise/components/extra-incorrect-answer.tsx b/...mponents/blank-draggable-dummy-answer.tsx → ...ise/components/extra-incorrect-answer.tsx
@@ -10,22 +10,20 @@ import { FaIcon } from '@/components/fa-icon'
 import { useEditorStrings } from '@/contexts/logged-in-data-context'
 import { cn } from '@/helper/cn'
 
-interface BlankDraggableDummyAnswerProps {
+interface ExtraIncorrectAnswerProps {
   text: string
   onChange: ChangeEventHandler<HTMLInputElement>
   onKeyDown: KeyboardEventHandler
   onRemoveClick: MouseEventHandler
 }
 
-export function BlankDraggableDummyAnswer(
-  props: BlankDraggableDummyAnswerProps
-) {
+export function ExtraIncorrectAnswer(props: ExtraIncorrectAnswerProps) {
   const { text, onChange, onKeyDown, onRemoveClick } = props
   const blanksExerciseStrings = useEditorStrings().plugins.blanksExercise
 
   return (
     <div className="relative">
-      <span className="serlo-autogrow-input mb-1 mr-2" data-value={text + '_ '}>
+      <span className="serlo-autogrow-input" data-value={text + '_ '}>
         <input
           className="serlo-input-font-reset w-3/4 !min-w-[80px] rounded-full border border-brand bg-brand-50 focus:border-transparent focus:outline focus:outline-red-400"
           value={text}
@@ -37,7 +35,7 @@ export function BlankDraggableDummyAnswer(
       </span>
       <button
         className={cn(
-          `serlo-tooltip-trigger absolute right-3 top-1 h-6 w-6 rounded-full px-1 py-0.5 leading-none text-black
+          `serlo-tooltip-trigger absolute right-1 top-[1px] h-6 w-6 rounded-full px-1 py-0.5 leading-none text-black
           opacity-50 hover:bg-editor-primary-200 hover:opacity-100 focus:bg-editor-primary-200 focus:opacity-100`
         )}
         onClick={onRemoveClick}

diff --git a/...components/blank-draggable-dummy-area.tsx → ...mponents/extra-incorrect-answers-area.tsx b/...components/blank-draggable-dummy-area.tsx → ...mponents/extra-incorrect-answers-area.tsx
@@ -2,30 +2,34 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { FaIcon } from '@serlo/frontend/src/components/fa-icon'
 import { useRef } from 'react'
 
-import { BlankDraggableDummyAnswer } from './blank-draggable-dummy-answer'
+import { ExtraIncorrectAnswer } from './extra-incorrect-answer'
 import type { FillInTheBlanksExerciseProps } from '..'
 import { useEditorStrings } from '@/contexts/logged-in-data-context'
 
-interface BlankDraggableDummyAreaProps {
+interface ExtraIncorrectAnswersAreaProps {
   extraDraggableAnswers: FillInTheBlanksExerciseProps['state']['extraDraggableAnswers']
 }
 
-export function BlankDraggableDummyArea(props: BlankDraggableDummyAreaProps) {
+export function ExtraIncorrectAnswersArea(
+  props: ExtraIncorrectAnswersAreaProps
+) {
   const { extraDraggableAnswers } = props
 
   const areaRef = useRef<HTMLDivElement>(null)
   const blanksExerciseStrings = useEditorStrings().plugins.blanksExercise
 
-  const dummyValues = extraDraggableAnswers.map(({ answer }) => answer.value)
+  const incorrectAnswers = extraDraggableAnswers.map(
+    ({ answer }) => answer.value
+  )
 
   return (
-    <div className="mt-8 px-4" ref={areaRef}>
-      {dummyValues.length > 0 ? (
+    <div className="mt-8 px-8" ref={areaRef}>
+      {incorrectAnswers.length > 0 ? (
         <>
           {blanksExerciseStrings.dummyAnswers}:
-          <div className="flex flex-wrap">
-            {dummyValues.map((answer, index) => (
-              <BlankDraggableDummyAnswer
+          <div className="mb-4 mt-1 flex flex-wrap gap-2">
+            {incorrectAnswers.map((answer, index) => (
+              <ExtraIncorrectAnswer
                 key={index}
                 text={answer}
                 onChange={(event) => {
@@ -53,7 +57,7 @@ export function BlankDraggableDummyArea(props: BlankDraggableDummyAreaProps) {
         onClick={() => {
           extraDraggableAnswers.insert()
         }}
-        className="serlo-button-editor-secondary mt-3"
+        className="serlo-button-editor-secondary"
       >
         <FaIcon icon={faPlus} /> {blanksExerciseStrings.addDummyAnswer}
       </button>

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/editor.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/editor.tsx
@@ -8,6 +8,7 @@ import type { EditorFillInTheBlanksExerciseDocument } from '@editor/types/editor
 import { useState } from 'react'
 
 import type { FillInTheBlanksExerciseProps, FillInTheBlanksMode } from '.'
+import { ExtraIncorrectAnswersArea } from './components/extra-incorrect-answers-area'
 import { FillInTheBlanksRenderer } from './renderer'
 import { FillInTheBlanksStaticRenderer } from './static'
 import { FillInTheBlanksToolbar } from './toolbar'
@@ -16,11 +17,12 @@ import { useEditorStrings } from '@/contexts/logged-in-data-context'
 export function FillInTheBlanksExerciseEditor(
   props: FillInTheBlanksExerciseProps
 ) {
-  const { focused } = props
+  const { focused, id, state } = props
+  const { text, mode, extraDraggableAnswers } = state
   const [previewActive, setPreviewActive] = useState(false)
 
   const isRendererTextPluginFocused = useAppSelector((storeState) => {
-    return selectIsFocused(storeState, props.state.text.id)
+    return selectIsFocused(storeState, text.id)
   })
 
   const editorStrings = useEditorStrings()
@@ -29,14 +31,14 @@ export function FillInTheBlanksExerciseEditor(
 
   // Rerender if text plugin state changes
   const textPluginState = useAppSelector((state) => {
-    return selectDocument(state, props.state.text.id)
+    return selectDocument(state, text.id)
   })
 
   const staticDocument = useAppSelector(
     (storeState) =>
       selectStaticDocument(
         storeState,
-        props.id
+        id
       ) as EditorFillInTheBlanksExerciseDocument
   )
 
@@ -55,18 +57,26 @@ export function FillInTheBlanksExerciseEditor(
       {previewActive ? (
         <FillInTheBlanksStaticRenderer {...staticDocument} />
       ) : (
-        <FillInTheBlanksRenderer
-          isEditing
-          text={props.state.text.render({
-            config: {
-              placeholder: editorStrings.plugins.blanksExercise.placeholder,
-            },
-          })}
-          textPluginState={textPluginState}
-          extraDraggableAnswers={props.state.extraDraggableAnswers}
-          mode={props.state.mode.value as FillInTheBlanksMode}
-          initialTextInBlank="correct-answer"
-        />
+        <>
+          <FillInTheBlanksRenderer
+            isEditing
+            text={text.render({
+              config: {
+                placeholder: editorStrings.plugins.blanksExercise.placeholder,
+              },
+            })}
+            textPluginState={textPluginState}
+            extraDraggableAnswers={extraDraggableAnswers}
+            mode={mode.value as FillInTheBlanksMode}
+            initialTextInBlank="correct-answer"
+          />
+
+          {mode.value === 'drag-and-drop' ? (
+            <ExtraIncorrectAnswersArea
+              extraDraggableAnswers={extraDraggableAnswers}
+            />
+          ) : null}
+        </>
       )}
       {/* Only debug views from here on */}
       <div className="hidden">{JSON.stringify(textPluginState)}</div>

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx
@@ -11,7 +11,6 @@ import type {
 import { BlankCheckButton } from './components/blank-check-button'
 import { BlankDraggableAnswer } from './components/blank-draggable-answer'
 import { BlankDraggableArea } from './components/blank-draggable-area'
-import { BlankDraggableDummyArea } from './components/blank-draggable-dummy-area'
 import { FillInTheBlanksContext } from './context/blank-context'
 import { Blank, type BlankType } from './types'
 
@@ -80,12 +79,12 @@ export function FillInTheBlanksRenderer(props: FillInTheBlanksRendererProps) {
     }))
     if (isEditing) return sorted
 
-    const dummyAnswers = extraDraggableAnswers.map(({ answer }) => ({
+    const extraIncorrectAnswers = extraDraggableAnswers.map(({ answer }) => ({
       draggableId: uuid_v4(),
       text: typeof answer === 'string' ? answer : answer.value,
     }))
-    const withDummyAnswers = [...sorted, ...dummyAnswers]
-    const shuffled = withDummyAnswers
+    const withExtraIncorrectAnswers = [...sorted, ...extraIncorrectAnswers]
+    const shuffled = withExtraIncorrectAnswers
       .map((draggable) => ({ draggable, sort: Math.random() }))
       .sort((a, b) => a.sort - b.sort)
       .map(({ draggable }) => draggable)
@@ -157,14 +156,6 @@ export function FillInTheBlanksRenderer(props: FillInTheBlanksRendererProps) {
           </BlankDraggableArea>
         ) : null}
 
-        {mode === 'drag-and-drop' && isEditing ? (
-          <BlankDraggableDummyArea
-            extraDraggableAnswers={
-              extraDraggableAnswers as FillInTheBlanksExerciseProps['state']['extraDraggableAnswers']
-            }
-          />
-        ) : null}
-
         {!isEditing ? (
           <BlankCheckButton
             isVisible={shouldShowCheckButton}