refactor: remove Editor imports from subject landing

serlo · Jan 9, 2025 · dcfce72 · dcfce72
1 parent c7d96e4
commit dcfce72
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/apps/web/src/components/landing/subjects/proxy-image.tsx b/apps/web/src/components/landing/subjects/proxy-image.tsx
@@ -0,0 +1,25 @@
+import type { ImgHTMLAttributes } from 'react'
+
+import { serloDomain } from '@/helper/urls/serlo-domain'
+
+/**
+ * Proxies external images via cloudflare worker
+ * Temporary fix for privacy reasons. Long term we want to upload
+ * images to our own bucket instead
+ */
+export function ProxyImage(props: ImgHTMLAttributes<HTMLImageElement>) {
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img {...props} src={getSrc(props.src)} />
+}
+
+function getSrc(src?: string) {
+  if (!src) return src
+
+  const isAllowed =
+    src.match(/^https:\/\/[a-z]+.(serlo|serlo-staging).(org|dev)\//) ||
+    src.startsWith('https://pixabay.com/')
+
+  if (isAllowed) return src
+
+  return `https://asset-proxy.${serloDomain}/image?url=${encodeURIComponent(src)}`
+}
diff --git a/apps/web/src/components/landing/subjects/subject-landing-topic-overview.tsx b/apps/web/src/components/landing/subjects/subject-landing-topic-overview.tsx
@@ -1,11 +1,10 @@
-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 { EditorPluginType } from '@editor/package'
 import { faListUl } from '@fortawesome/free-solid-svg-icons'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
 
+import { ProxyImage } from './proxy-image'
 import { MaxWidthDiv } from '../../navigation/max-width-div'
 import { SubTopic } from '../../taxonomy/sub-topic'
 import { Link } from '@/components/content/link'
@@ -15,7 +14,6 @@ import { deSubjectLandingData } from '@/data/de/de-subject-landing-data'
 import type { TaxonomySubTerm } from '@/data-types'
 import { cn } from '@/helper/cn'
 import { isPartiallyInView } from '@/helper/is-partially-in-view'
-import { createRenderers } from '@/serlo-editor-integration/create-renderers'
 
 interface SubjectLandingTopicOverviewProps {
   subterms: TaxonomySubTerm[]
@@ -30,8 +28,6 @@ export function SubjectLandingTopicOverview({
   const topicContainer = useRef<HTMLDivElement>(null)
   const router = useRouter()
 
-  editorRenderers.init(createRenderers())
-
   const { extraTerms, allTopicsTaxonomyId } = deSubjectLandingData[subject]
 
   const allTopicsEntry = {
@@ -95,9 +91,8 @@ export function SubjectLandingTopicOverview({
 
           const firstRow = term.description?.state[0]
           const src =
-            firstRow && isImageDocument(firstRow)
-              ? // eslint-disable-next-line @typescript-eslint/no-base-to-string
-                String(firstRow.state.src)
+            firstRow && firstRow.plugin === EditorPluginType.Image
+              ? String((firstRow.state as { src: string }).src)
               : undefined
 
           const isExtraTerm = Object.hasOwn(term, 'href')
@@ -148,7 +143,7 @@ export function SubjectLandingTopicOverview({
                       alt={`Illustration: ${term.title}`}
                     />
                   ) : (
-                    <EditorImage src={src} className="h-12 w-12 object-cover" />
+                    <ProxyImage src={src} className="h-12 w-12 object-cover" />
                   )
                 ) : null}
               </div>