Merge pull request #2675 from serlo/staging

Deployment

next.config.js

@@ -41,8 +41,7 @@ module.exports = withBundleAnalyzer({
     defaultLocale: 'de',
     localeDetection: false,
   },
-  // TODO: reactStrictMode with react18 breaks edtr.io atm
-  reactStrictMode: false,
+  reactStrictMode: true,
   productionBrowserSourceMaps: true,
   transpilePackages: ['ramda'], // context: https://github.com/vercel/next.js/issues/40183
   /*experimental: {

package.json

@@ -90,7 +90,6 @@
     "reselect": "^4.1.8",
     "slate": "^0.91.0",
     "slate-react": "^0.91.0",
-    "styled-components": "^5.0.0",
     "swr": "^2.0.0",
     "timeago-react": "^3.0.5",
     "timeago.js": "^4.0.2",
@@ -130,7 +129,6 @@
     "@types/react-notify-toast": "^0.5.3",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/slate-react": "^0.50.1",
-    "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",

prisma/schema.prisma

@@ -20,6 +20,7 @@ model ExerciseSubmission {
 
   @@index([entityId])
   @@index([timestamp])
+  @@index([path(length: 50)])
 }
 
 model PrivateLinkPrototype {
@@ -47,6 +48,6 @@ model MitmachWoche {
 }
 
 model PrototypeThreadStatus {
-  threadId     String @db.VarChar(24) @id
-  status       String @db.VarChar(24)
-}
+  threadId String @id @db.VarChar(24)
+  status   String @db.VarChar(24)
+}

src/assets-webkit/styles/serlo-tailwind.css

@@ -130,13 +130,6 @@
   .serlo-solution-box {
     @apply mx-side mb-block border-l-8 border-brand-200 py-2.5;
   }
-  .serlo-styled-label {
-    @apply flex cursor-pointer items-center;
-    > div > * {
-      /* hacky selector */
-      @apply ml-2;
-    }
-  }
   .serlo-image-centered {
     @apply mb-block px-4 text-center;
   }
@@ -194,6 +187,7 @@
       @apply px-0;
     }
 
+    & .serlo-spacing-fix,
     & .serlo-important,
     & .serlo-blockquote,
     & .serlo-spoiler-body,

src/components/comments/dropdown-menu.tsx

@@ -107,10 +107,13 @@ export function DropdownMenu({
   )
 
   function onLinkToComment() {
-    const isOnEntity = window.location.href.includes(entityId.toString())
+    const isOnEntity =
+      entityId && window.location.href.includes(entityId.toString())
     onAnyClick()
     if (isOnEntity) highlight(id)
-    history.replaceState(null, '', `/${entityId}/#comment-${id}`)
+    if (entityId) {
+      history.replaceState(null, '', `/${entityId}/#comment-${id}`)
+    }
     copyToClipboad(window.location.href)
     showToastNotice('👌 ' + strings.share.copySuccess, 'success')
   }

src/components/content/box.tsx

@@ -1,6 +1,6 @@
 import { FrontendBoxNode } from '@/frontend-node-types'
 import { RenderNestedFunction } from '@/schema/article-renderer'
-import { Renderer } from '@/serlo-editor/plugins/box/renderer'
+import { BoxRenderer } from '@/serlo-editor/plugins/box/renderer'
 
 type BoxProps = FrontendBoxNode & { renderNested: RenderNestedFunction }
 
@@ -17,7 +17,7 @@ export function Box({
   const unwrappedTitle = title?.[0].children
 
   return (
-    <Renderer
+    <BoxRenderer
       boxType={boxType}
       title={
         unwrappedTitle ? (
@@ -27,6 +27,6 @@ export function Box({
       anchorId={anchorId}
     >
       <>{content}</>
-    </Renderer>
+    </BoxRenderer>
   )
 }

src/components/content/exercises/sc-mc-exercise.tsx

@@ -11,7 +11,7 @@ import { RenderNestedFunction } from '@/schema/article-renderer'
 import {
   ScMcExerciseRenderer,
   ScMcExerciseRendererAnswer,
-} from '@/serlo-editor/plugins/sc-mc-exercise/renderer/renderer'
+} from '@/serlo-editor/plugins/sc-mc-exercise/renderer'
 
 export interface ScMcExerciseProps {
   state: EditorPluginScMcExercise['state']

src/components/frontend-client-base.tsx

@@ -117,7 +117,7 @@ export function FrontendClientBase({
       <PrintMode />
       <AuthProvider unauthenticatedAuthorizationPayload={authorization}>
         <LoggedInDataProvider value={loggedInData}>
-          <EntityIdProvider value={entityId || null}>
+          <EntityIdProvider value={entityId}>
             <ConditionalWrap
               condition={!noHeaderFooter}
               wrapper={(kids) => <HeaderFooter>{kids}</HeaderFooter>}

src/components/modal-with-close-button.tsx

@@ -50,6 +50,7 @@ export function ModalWithCloseButton({
           cursor-pointer rounded-full border-none bg-transparent text-center
           leading-tight text-almost-black hover:bg-brand hover:text-white
         `}
+        data-qa="modal-close-button"
       >
         <FaIcon icon={faXmark} className="h-5" />
       </button>

src/components/user/profile-experimental.tsx

@@ -11,6 +11,12 @@ export const features = {
     activeInDev: true,
     hideInProduction: true,
   },
+  editorAnchorLinkCopyTool: {
+    cookieName: 'useEditorAnchorLinkCopyTool',
+    isActive: false,
+    activeInDev: true,
+    hideInProduction: true,
+  },
   legacyDesign: {
     cookieName: 'useFrontend',
     isActive: false,
@@ -88,6 +94,21 @@ export function ProfileExperimental() {
         </div>
       )}
       <hr className="mx-side -mt-2 mb-4" />
+      {features.editorAnchorLinkCopyTool && (
+        <div>
+          <h3 className="serlo-h3 mb-3">
+            {renderFeatureButton('editorAnchorLinkCopyTool')} Editor: Anker-Link
+            Tool
+          </h3>
+          <p className="serlo-p">
+            Ein neues Tool in der Editor-Toolbar um direkt Anker-Links auf
+            Editor-Plugins in die Zwischenablage zu kopieren. Wichtig:
+            Funktioniert nur, wenn der Inhalt ab Juli 2023 eine neue Revision
+            erhalten hat.
+          </p>
+        </div>
+      )}
+      <hr className="mx-side -mt-2 mb-4" />
       {features.legacyDesign && (
         <div>
           <h3 className="serlo-h3 mb-3">

src/contexts/entity-id-context.ts

@@ -1,12 +1,12 @@
 import { createContext, useContext } from 'react'
 
-export const EntityIdContext = createContext<number | null>(null)
+export const EntityIdContext = createContext<number | undefined | null>(null)
 
 export const EntityIdProvider = EntityIdContext.Provider
 
 export function useEntityId() {
   const data = useContext(EntityIdContext)
-  if (!data) {
+  if (data === null) {
     throw new Error('Attempt to use entityId outside of provider!')
   }
   return data

src/data/de/index.ts

@@ -602,13 +602,14 @@ export const loggedInData = {
         anchor: {
           title: "Sprungmarke",
           description: "Füge eine Sprungmarke innerhalb deines Inhalts hinzu.",
-          identifier: "Name",
+          identifier: "Ziel-Name (z.B. \"lange-erlaerung\")",
           anchorId: "Name der Sprungmarke"
         },
         box: {
           title: "Box",
           description: "Ein Rahmen für Beispiele, Zitate, Warnungen, Beweise (math.), …",
           type: "Art der Box",
+          typeTooltip: "Wähle die Art der Box",
           titlePlaceholder: "(optionaler Titel)",
           anchorId: "Sprungmarke (anchor id)",
           emptyContentWarning: "Boxen ohne Inhalt werden nicht angezeigt"
@@ -644,6 +645,7 @@ export const loggedInData = {
         geogebra: {
           title: 'GeoGebra Applet',
           description: "Binde Applets von GeoGebra Materials via Link oder ID ein.",
+          chooseApplet: "Applet auswählen",
           urlOrId: "GeoGebra Materials URL oder ID"
         },
         highlight: {
@@ -652,13 +654,14 @@ export const loggedInData = {
           clickAndEnter: "Klicke hier und füge deinen Quellcode ein…",
           enterHere: "Füge hier deinen Quellcode ein. Verlasse den Bereich, um eine Vorschau zu sehen.",
           language: "Programmiersprache",
-          enterLanguage: "Programmiersprache eingeben",
-          showLineNumbers: "Zeilennummern anzeigen"
+          languageTooltip: "Wähle die Sprache für's Syntax-Highlighting",
+          showLineNumbers: "Zeilennummern",
+          lineNumbersTooltip: "Sollten die Besucher*innen Zeilennummern sehen?"
         },
         image: {
           title: "Bild",
           description: "Lade Bilder hoch oder verwende Bilder, die bereits online sind.",
-          upload: "Hochladen…",
+          upload: "Hochladen",
           imageUrl: "Bild-URL",
           placeholderEmpty: 'https://example.com/image.png',
           placeholderUploading: "Wird hochgeladen …",
@@ -678,7 +681,7 @@ export const loggedInData = {
           description: "Binde einen Inhalt von serlo.org via ID ein.",
           illegalInjectionFound: "Ungültige Injection gefunden",
           serloEntitySrc: "Serlo Inhalt {{src}}",
-          serloId: "Serlo ID",
+          serloId: 'Serlo ID',
           placeholder: "Serlo ID (z.B. 1565)"
         },
         layout: {
@@ -718,6 +721,7 @@ export const loggedInData = {
           title: "Zeilen",
           searchForTools: "Suche hier nach Tools…",
           duplicate: "Duplizieren",
+          copyAnchorLink: "Link zu diesem Element kopieren",
           remove: "Löschen",
           close: "Schließen",
           dragElement: "Verschiebe das Element innerhalb des Dokuments",
@@ -783,6 +787,7 @@ export const loggedInData = {
             formula: "[neue Formel]",
             visual: "visuell",
             latex: 'LaTeX',
+            latexEditorTitle: "LaTeX-Editor",
             onlyLatex: "Nur LaTeX verfügbar",
             shortcuts: "Tastenkürzel",
             fraction: "Bruch",
@@ -798,9 +803,9 @@ export const loggedInData = {
         },
         video: {
           title: 'Video',
-          decription: "Binde Videos von YouTube, Vimeo, Wikimedia Commons oder BR ein.",
+          description: "Binde Videos von YouTube, Vimeo, Wikimedia Commons oder BR ein.",
           videoUrl: 'Video URL',
-          description: "Beschreibung",
+          videoDescription: "Beschreibung",
           titlePlaceholder: "Titel",
           url: 'URL',
           seoTitle: "Titel für Suchmaschinen"
@@ -951,7 +956,8 @@ export const loggedInData = {
         current: "Aktuell",
         author: "Verfasser",
         createdAt: "Zeitstempel",
-        ready: "Bereit zum Speichern?"
+        ready: "Bereit zum Speichern?",
+        anchorLinkWarning: "Dieser Link funktioniert nur im Frontend und für Inhalte, die eine etwas relativ neue akzeptierte Bearbeitung haben."
       },
       taxonomy: {
         title: "Titel"

src/data/en/index.ts

@@ -670,14 +670,15 @@ export const loggedInData = {
         anchor: {
           title: 'Anchor',
           description: 'Insert an anchor.',
-          identifier: 'Identifier',
+          identifier: 'Identifier (e.g. "long-explanation")',
           anchorId: 'ID of the anchor',
         },
         box: {
           title: 'Container',
           description:
             'A container for examples, quotes, warnings, theorems, notes…',
           type: 'Type of box',
+          typeTooltip: 'Choose the type of the box',
           titlePlaceholder: '(optional title)',
           anchorId: 'Anchor ID',
           emptyContentWarning: 'Boxes without content will not be displayed',
@@ -715,6 +716,7 @@ export const loggedInData = {
         geogebra: {
           title: 'GeoGebra Applet',
           description: 'Embed GeoGebra Materials applets via URL or ID.',
+          chooseApplet: 'Choose Applet',
           urlOrId: 'GeoGebra URL or ID',
         },
         highlight: {
@@ -723,13 +725,14 @@ export const loggedInData = {
           clickAndEnter: 'Click here and enter your source code…',
           enterHere: 'Enter your source code here',
           language: 'Language',
-          enterLanguage: 'Enter language',
-          showLineNumbers: 'Show line numbers',
+          languageTooltip: 'Choose language for syntax highlighting',
+          showLineNumbers: 'Line numbers',
+          lineNumbersTooltip: 'Should users see line numbers?',
         },
         image: {
           title: 'Image',
           description: 'Upload images.',
-          upload: 'Upload…',
+          upload: 'Upload',
           imageUrl: 'Image URL',
           placeholderEmpty: 'https://example.com/image.png',
           placeholderUploading: 'Uploading…',
@@ -749,7 +752,7 @@ export const loggedInData = {
           description: 'Embed serlo.org content via their ID.',
           illegalInjectionFound: 'Illegal injection found',
           serloEntitySrc: 'Serlo entity {{src}}',
-          serloId: 'Serlo ID:',
+          serloId: 'Serlo ID',
           placeholder: 'Serlo ID (e.g. 1565)',
         },
         layout: {
@@ -792,6 +795,7 @@ export const loggedInData = {
           title: 'Rows',
           searchForTools: 'Search for tools…',
           duplicate: 'Duplicate',
+          copyAnchorLink: "Copy link to this element",
           remove: 'Remove',
           close: 'Close',
           dragElement: 'Drag the element within the document',
@@ -859,6 +863,7 @@ export const loggedInData = {
             formula: '[formula]',
             visual: 'visual',
             latex: 'LaTeX',
+            latexEditorTitle: 'LaTeX editor',
             onlyLatex: 'Only LaTeX editor available',
             shortcuts: 'Shortcuts',
             fraction: 'Fraction',
@@ -874,9 +879,9 @@ export const loggedInData = {
         },
         video: {
           title: 'Video',
-          decription: 'Embed YouTube, Vimeo, Wikimedia Commons or BR videos.',
+          description: 'Embed YouTube, Vimeo, Wikimedia Commons or BR videos.',
           videoUrl: 'Video URL',
-          description: 'Description',
+          videoDescription: 'Description',
           titlePlaceholder: 'Title',
           url: 'URL',
           seoTitle: 'Title for search engines',
@@ -1038,6 +1043,7 @@ export const loggedInData = {
         author: 'Author',
         createdAt: 'when?',
         ready: 'Ready to save?',
+        anchorLinkWarning: 'This link will only work in the frontend and for content that has a somewhat new revision.',
       },
       taxonomy: {
         title: 'Title',