fix(frontend): use EditorImage on subject landing pages

apps/web/src/components/frontend-client-base/frontend-client-base.tsx

@@ -1,6 +1,7 @@
 import { StaticStringsProvider } from '@editor/i18n/static-strings-provider'
 import { staticStrings as staticStringsDe } from '@editor/i18n/strings/de/static'
 import { staticStrings as staticStringsEn } from '@editor/i18n/strings/en/static'
+import { SerloOnlyFeaturesContext } from '@editor/utils/serlo-extra-context'
 import type { AuthorizationPayload } from '@serlo/authorization'
 import Head from 'next/head'
 import { Router, useRouter } from 'next/router'
@@ -125,37 +126,39 @@ export function FrontendClientBase({
         </Head>
       ) : null}
       <AuthProvider unauthenticatedAuthorizationPayload={authorization}>
-        <StaticStringsProvider
-          value={
-            instanceData.lang === 'de'
-              ? mergeDeepRight(staticStringsEn, staticStringsDe)
-              : staticStringsEn
-          }
-        >
-          <LoggedInDataProvider value={loggedInData}>
-            <UuidsProvider value={serloEntityData ?? null}>
-              <Toaster />
-              <ConditionalWrap
-                condition={!noHeaderFooter}
-                wrapper={(kids) => <HeaderFooter>{kids}</HeaderFooter>}
-              >
+        <SerloOnlyFeaturesContext.Provider value={{ isSerlo: true }}>
+          <StaticStringsProvider
+            value={
+              instanceData.lang === 'de'
+                ? mergeDeepRight(staticStringsEn, staticStringsDe)
+                : staticStringsEn
+            }
+          >
+            <LoggedInDataProvider value={loggedInData}>
+              <UuidsProvider value={serloEntityData ?? null}>
+                <Toaster />
                 <ConditionalWrap
-                  condition={!noContainers}
-                  wrapper={(kids) => (
-                    <div className="relative">
-                      <MaxWidthDiv showNav={showNav}>
-                        <main id="content">{kids}</main>
-                      </MaxWidthDiv>
-                    </div>
-                  )}
+                  condition={!noHeaderFooter}
+                  wrapper={(kids) => <HeaderFooter>{kids}</HeaderFooter>}
                 >
-                  {children}
+                  <ConditionalWrap
+                    condition={!noContainers}
+                    wrapper={(kids) => (
+                      <div className="relative">
+                        <MaxWidthDiv showNav={showNav}>
+                          <main id="content">{kids}</main>
+                        </MaxWidthDiv>
+                      </div>
+                    )}
+                  >
+                    {children}
+                  </ConditionalWrap>
+                  <MaintenanceBanner />
                 </ConditionalWrap>
-                <MaintenanceBanner />
-              </ConditionalWrap>
-            </UuidsProvider>
-          </LoggedInDataProvider>
-        </StaticStringsProvider>
+              </UuidsProvider>
+            </LoggedInDataProvider>
+          </StaticStringsProvider>
+        </SerloOnlyFeaturesContext.Provider>
       </AuthProvider>
     </InstanceDataProvider>
   )

apps/web/src/components/landing/subjects/subject-landing-topic-overview.tsx

@@ -1,4 +1,5 @@
 import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
+import { EditorImage } from '@editor/plugins/image/components/editor-image'
 import { isImageDocument } from '@editor/types/plugin-type-guards'
 import { faListUl } from '@fortawesome/free-solid-svg-icons'
 import Image from 'next/image'
@@ -146,8 +147,7 @@ export function SubjectLandingTopicOverview({
                       alt={`Illustration: ${term.title}`}
                     />
                   ) : (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img src={src} className="h-12 w-12 object-cover" />
+                    <EditorImage src={src} className="h-12 w-12 object-cover" />
                   )
                 ) : null}
               </div>

apps/web/src/serlo-editor-integration/editor-renderer.tsx

@@ -1,17 +1,14 @@
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import { AnyEditorDocument } from '@editor/types/editor-plugins'
-import { SerloOnlyFeaturesContext } from '@editor/utils/serlo-extra-context'
 
 export function EditorRenderer({
   document,
 }: {
   document: unknown
 }): JSX.Element {
   return (
-    <SerloOnlyFeaturesContext.Provider value={{ isSerlo: true }}>
-      <div className="serlo-content-with-spacing-fixes">
-        <StaticRenderer document={document as AnyEditorDocument} />
-      </div>
-    </SerloOnlyFeaturesContext.Provider>
+    <div className="serlo-content-with-spacing-fixes">
+      <StaticRenderer document={document as AnyEditorDocument} />
+    </div>
   )
 }