Merge pull request #4188 from serlo/blanks-ux

feat(blanks): hide exercise task until child plugin is selected, focus child plugin after selection
serlo · Oct 14, 2024 · a4d14ea · a4d14ea
2 parents 9301313 + 9453c9a
commit a4d14ea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/editor/src/plugins/blanks-exercise/components/child-plugin-selection.tsx b/packages/editor/src/plugins/blanks-exercise/components/child-plugin-selection.tsx
@@ -2,6 +2,7 @@ import IconTable from '@editor/editor-ui/assets/plugin-icons/icon-table.svg'
 import IconText from '@editor/editor-ui/assets/plugin-icons/icon-text.svg'
 import { SelectionCard } from '@editor/editor-ui/selection-card'
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
+import { useAppDispatch, focus } from '@editor/store'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
 import type { BlanksExerciseProps } from '..'
@@ -16,15 +17,18 @@ export function ChildPluginSelection({
   const pluginStrings = useEditStrings().plugins
   const description = pluginStrings.blanksExercise.childPluginSelection
 
+  const dispatch = useAppDispatch()
+
   function handleClick(plugin: EditorPluginType) {
     setShowSelection(false)
     childPlugin.replace(plugin)
+    dispatch(focus(childPlugin.id))
   }
 
   return (
     <>
       <div className="py-6 text-center text-gray-500">{description}</div>
-      <div className="flex justify-center gap-6 [&_svg]:min-w-20">
+      <div className="blanks-child-plugin-selection flex justify-center gap-6 [&_svg]:min-w-20">
         <SelectionCard
           onClick={() => handleClick(EditorPluginType.Text)}
           icon={<IconText />}

diff --git a/packages/editor/src/plugins/exercise/editor.tsx b/packages/editor/src/plugins/exercise/editor.tsx
@@ -84,11 +84,15 @@ export function ExerciseEditor(props: ExerciseProps) {
           />
         </div>
         <div className="h-10"></div>
-        {content.render({
-          config: {
-            textPluginPlaceholder: exStrings.placeholder,
-          },
-        })}
+        {/* Special case for the blanks exercise: Until the child plugin is selected we hide the task to avoid confusion */}
+        {/* Background: Users often add their blanks-text to the task */}
+        <div className="group-has-[.blanks-child-plugin-selection]/exercise:hidden">
+          {content.render({
+            config: {
+              textPluginPlaceholder: exStrings.placeholder,
+            },
+          })}
+        </div>
         <div className="mx-side">
           {interactive.defined ? (
             <>