Merge pull request #3253 from serlo/staging

Deployment
serlo · Jan 15, 2024 · 7c81a31 · 7c81a31 · vercel · Jan 15, 2024
2 parents e35d58f + 9dcd3cb
commit 7c81a31
Show file tree

Hide file tree

Showing 31 changed files with 474 additions and 265 deletions.
diff --git a/.yarn/cache/follow-redirects-npm-1.15.3-ca69c47b72-584da22ec5.zip b/.yarn/cache/follow-redirects-npm-1.15.3-ca69c47b72-584da22ec5.zip
diff --git a/.yarn/cache/follow-redirects-npm-1.15.4-3384d6a415-e178d1deff.zip b/.yarn/cache/follow-redirects-npm-1.15.4-3384d6a415-e178d1deff.zip
diff --git a/apps/web/src/assets-webkit/styles/serlo-tailwind.css b/apps/web/src/assets-webkit/styles/serlo-tailwind.css
@@ -434,6 +434,30 @@
       @apply serlo-ol text-lg;
     }
   }
+
+  /* heavily inspired by Shaw (https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas) 
+    this needs a data-value on the wrapping element equal to the value of the input
+  */
+  .serlo-autogrow-input {
+    display: inline-grid;
+    position: relative;
+
+    input,
+    &::after {
+      width: auto;
+      min-width: 4rem;
+      grid-area: 1 / 2;
+      padding: 0 0.75rem;
+      resize: none;
+    }
+
+    &::after {
+      content: attr(data-value) ' ';
+      visibility: hidden;
+      white-space: pre-wrap;
+      margin-left: -0.5rem;
+    }
+  }
 }
 
 /* print and pdf styles */
@@ -567,3 +591,9 @@ main b {
 body {
   @apply tracking-slightly-tighter;
 }
+
+/* stop body from scrolling when a modal is open */
+body.ReactModal__Body--open {
+  overflow: hidden;
+  height: 100vh;
+}
diff --git a/apps/web/src/data/de/index.ts b/apps/web/src/data/de/index.ts
@@ -776,6 +776,8 @@ export const loggedInData = {
           mathFormula: "Matheformel (%ctrlOrCmd% + M)",
           code: 'Code (%ctrlOrCmd% + ⇧ + `)',
           blank: "Lücke",
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: "Fett (%ctrlOrCmd% + B)",
           italic: "Kursiv (%ctrlOrCmd% + I)",
           noItemsFound: "keine Einträge gefunden",
@@ -1101,7 +1103,6 @@ export const loggedInData = {
           multipleChoice: "Multiple-Choice",
           singleChoice: "Single-Choice",
           inputExercise: "Eingabefeld",
-          textAreaExercise: "Freitext",
           blanksExercise: "Lückentext Aufgabe"
         },
         difficulty: {
@@ -1207,4 +1208,4 @@ Sonst kannst du diese Mail einfach ignorieren.
 <p>✌️</p>`
     }
   }
-};
+};
diff --git a/apps/web/src/data/de/menu-data.ts b/apps/web/src/data/de/menu-data.ts
@@ -244,7 +244,7 @@ export const secondaryMenus: InstanceData['secondaryMenus'] = [
     entries: [
       { title: 'Themen', id: 41107 },
       { title: 'Lehrplan', id: 50540 },
-      { title: 'Bei Serlo-Physik mitarbeiten', id: 41134 },
+      { title: 'Bei Serlo-Physik mitarbeiten', id: 253504 },
     ],
   },
   {

diff --git a/apps/web/src/data/en/index.ts b/apps/web/src/data/en/index.ts
@@ -852,6 +852,8 @@ export const loggedInData = {
           mathFormula: 'Math formula (%ctrlOrCmd% + M)',
           code: 'Code (%ctrlOrCmd% + ⇧ + `)',
           blank: 'Blank',
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: 'Bold (%ctrlOrCmd% + B)',
           italic: 'Italic (%ctrlOrCmd% + I)',
           noItemsFound: 'No items found',
@@ -903,7 +905,7 @@ export const loggedInData = {
         },
         textAreaExercise: {
           title: 'Text Box Exercise',
-          description: 'A big text box for long answers. No feedback.'
+          description: 'A big text box for long answers. No feedback.',
         },
         scMcExercise: {
           title: 'SC/MC Exercise',

diff --git a/apps/web/src/data/es/index.ts b/apps/web/src/data/es/index.ts
@@ -776,6 +776,8 @@ export const loggedInData = {
           mathFormula: "Fórmula matemática (%ctrlOrCmd% + M)",
           code: "Código (%ctrlOrCmd% + + + `)",
           blank: "Blanco",
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: "Negrilla (%ctrlOrCmd% + B)",
           italic: "Itálica (%ctrlOrCmd% + I)",
           noItemsFound: "Elementos no encontrados",

diff --git a/apps/web/src/data/fr/index.ts b/apps/web/src/data/fr/index.ts
@@ -776,6 +776,8 @@ export const loggedInData = {
           mathFormula: "Formule mathématique (%ctrlOrCmd% + M)",
           code: 'Code (%ctrlOrCmd% + ⇧ + `)',
           blank: 'Blank',
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: "Gras (%ctrlOrCmd% + B)",
           italic: "Italique (%ctrlOrCmd% + I)",
           noItemsFound: "Aucun élément trouvé",

diff --git a/apps/web/src/data/hi/index.ts b/apps/web/src/data/hi/index.ts
@@ -776,6 +776,8 @@ export const loggedInData = {
           mathFormula: 'Math formula (%ctrlOrCmd% + M)',
           code: 'Code (%ctrlOrCmd% + ⇧ + `)',
           blank: 'Blank',
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: 'Bold (%ctrlOrCmd% + B)',
           italic: 'Italic (%ctrlOrCmd% + I)',
           noItemsFound: 'No items found',

diff --git a/apps/web/src/data/ta/index.ts b/apps/web/src/data/ta/index.ts
@@ -776,6 +776,8 @@ export const loggedInData = {
           mathFormula: 'Math formula (%ctrlOrCmd% + M)',
           code: 'Code (%ctrlOrCmd% + ⇧ + `)',
           blank: 'Blank',
+          createBlank: 'Create Blank',
+          removeBlank: 'Remove Blank',
           bold: 'Bold (%ctrlOrCmd% + B)',
           italic: 'Italic (%ctrlOrCmd% + I)',
           noItemsFound: "உருப்படிகள் எதுவும் இல்லை",

diff --git a/e2e-tests/yarn.lock b/e2e-tests/yarn.lock
@@ -1156,12 +1156,12 @@ __metadata:
   linkType: hard
 
 "follow-redirects@npm:^1.14.8, follow-redirects@npm:^1.15.0":
-  version: 1.15.3
-  resolution: "follow-redirects@npm:1.15.3"
+  version: 1.15.4
+  resolution: "follow-redirects@npm:1.15.4"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 584da22ec5420c837bd096559ebfb8fe69d82512d5585004e36a3b4a6ef6d5905780e0c74508c7b72f907d1fa2b7bd339e613859e9c304d0dc96af2027fd0231
+  checksum: e178d1deff8b23d5d24ec3f7a94cde6e47d74d0dc649c35fc9857041267c12ec5d44650a0c5597ef83056ada9ea6ca0c30e7c4f97dbf07d035086be9e6a5b7b6
   languageName: node
   linkType: hard
 

diff --git a/packages/editor/src/editor-ui/plugin-toolbar/text-controls/hooks/use-formatting-options.tsx b/packages/editor/src/editor-ui/plugin-toolbar/text-controls/hooks/use-formatting-options.tsx
@@ -16,7 +16,6 @@ import {
   faListOl,
   faListUl,
   faSquareRootVariable,
-  faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 import { onKeyDown as slateListsOnKeyDown } from '@prezly/slate-lists'
 import { FaIcon } from '@serlo/frontend/src/components/fa-icon'
@@ -227,12 +226,27 @@ function createToolbarControls(
   ctrlKey: string
 ): ControlButton[] {
   const allFormattingOptions = [
+    // Blank (For Fill in the Blank Exercises)
+    {
+      name: TextEditorFormattingOption.textBlank,
+      title: textStrings.createBlank,
+      activeTitle: textStrings.removeBlank,
+      isActive: isBlankActive,
+      onClick: toggleBlank,
+      group: 'blank',
+      renderIcon: () => (
+        <span className="relative -top-0.25 mx-1 mb-1 rounded-lg border-2 border-current px-1.5 py-0.25 text-[13px] font-bold">
+          {textStrings.blank}
+        </span>
+      ),
+    },
     // Bold
     {
       name: TextEditorFormattingOption.richTextBold,
       title: textStrings.bold,
       isActive: isBoldActive,
       onClick: toggleBoldMark,
+      group: 'default',
       renderIcon: () => <EditorSvgIcon pathData={editorBold} />,
     },
     // Italic
@@ -241,6 +255,7 @@ function createToolbarControls(
       title: textStrings.italic,
       isActive: isItalicActive,
       onClick: toggleItalicMark,
+      group: 'default',
       renderIcon: () => <EditorSvgIcon pathData={editorItalic} />,
     },
     // Link
@@ -249,6 +264,7 @@ function createToolbarControls(
       title: textStrings.link,
       isActive: isLinkActive,
       onClick: toggleLink,
+      group: 'default',
       renderIcon: () => <EditorSvgIcon pathData={editorLink} />,
     },
     // Headings
@@ -257,8 +273,8 @@ function createToolbarControls(
       title: textStrings.headings,
       closeMenuTitle: textStrings.closeSubMenu,
       isActive: isAnyHeadingActive,
+      group: 'default',
       renderIcon: () => <EditorSvgIcon pathData={editorText} />,
-      renderCloseMenuIcon: () => <FaIcon icon={faXmark} />,
       subMenuButtons: ([1, 2, 3] as const).map((level) => ({
         name: TextEditorFormattingOption.headings,
         title: `${textStrings.heading} ${level}`,
@@ -275,12 +291,12 @@ function createToolbarControls(
       title: textStrings.colors,
       closeMenuTitle: textStrings.closeSubMenu,
       isActive: () => false,
+      group: 'default',
       renderIcon: (editor: SlateEditor) => {
         const colorIndex = getColorIndex(editor)
         const color = colorIndex ? textColors[colorIndex].value : 'black'
         return <ColorTextIcon color={color} />
       },
-      renderCloseMenuIcon: () => <FaIcon icon={faXmark} />,
       subMenuButtons: [
         {
           name: TextEditorFormattingOption.colors,
@@ -315,6 +331,7 @@ function createToolbarControls(
       title: textStrings.orderedList,
       isActive: isSelectionWithinOrderedList,
       onClick: toggleOrderedList,
+      group: 'lists',
       renderIcon: () => <FaIcon className="h-[15px]" icon={faListOl} />,
     },
     // Unordered list
@@ -323,6 +340,7 @@ function createToolbarControls(
       title: textStrings.unorderedList,
       isActive: isSelectionWithinUnorderedList,
       onClick: toggleUnorderedList,
+      group: 'lists',
       renderIcon: () => <FaIcon className="h-[15px]" icon={faListUl} />,
     },
     // Math
@@ -331,6 +349,7 @@ function createToolbarControls(
       title: textStrings.mathFormula,
       isActive: isMathActive,
       onClick: toggleMath,
+      group: 'default',
       renderIcon: () => (
         <FaIcon className="h-[15px]" icon={faSquareRootVariable} />
       ),
@@ -341,28 +360,17 @@ function createToolbarControls(
       title: textStrings.code,
       isActive: isCodeActive,
       onClick: toggleCode,
+      group: 'default',
       renderIcon: () => <FaIcon className="h-[15px]" icon={faCode} />,
     },
-    // Blank (For Fill in the Blank Exercises)
-    {
-      name: TextEditorFormattingOption.textBlank,
-      title: textStrings.blank,
-      isActive: isBlankActive,
-      onClick: toggleBlank,
-      renderIcon: () => (
-        <span className="relative -top-0.5 rounded-lg border-2 border-current px-1 text-[10px] font-bold">
-          _
-        </span>
-      ),
-    },
   ].map((option) => {
     return {
       ...option,
       title: option.title.replace('%ctrlOrCmd%', isMac ? '⌘' : ctrlKey),
     }
   })
 
-  return allFormattingOptions.filter((option) =>
-    formattingOptions.includes(TextEditorFormattingOption[option.name])
-  )
+  return allFormattingOptions.filter(({ name }) =>
+    formattingOptions.includes(TextEditorFormattingOption[name])
+  ) as ControlButton[]
 }
diff --git a/.../editor/src/editor-ui/plugin-toolbar/text-controls/plugin-toolbar-text-control-button.tsx b/.../editor/src/editor-ui/plugin-toolbar/text-controls/plugin-toolbar-text-control-button.tsx
@@ -26,7 +26,7 @@ export function PluginToolbarTextControlButton({
         active
           ? 'bg-editor-primary-200 text-almost-black shadow-menu hover:text-black'
           : '#b6b6b6 hover:text-editor-primary',
-        'b-0 m-1 h-6 w-6 cursor-pointer rounded p-0 outline-none',
+        'b-0 m-1 h-6 w-auto min-w-[1.5rem] cursor-pointer rounded p-0 outline-none',
         'serlo-tooltip-trigger'
       )}
       data-qa={`plugin-toolbar-button-${