wip: editor for serlo ssg

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serlo/editor",
-  "version": "0.26.1",
+  "version": "0.26.1-alpha.0",
   "homepage": "https://de.serlo.org/editor",
   "bugs": {
     "url": "https://github.com/serlo/frontend/issues"

packages/editor/src/plugins/article/renderer.tsx

@@ -28,7 +28,7 @@ export function ArticleRenderer({
 
   useEffect(() => {
     // small hack for SEO
-    const articleTitle = document.title.split('-').slice(0, -1).join('')
+    const articleTitle = document.title.split('-')[0].trim()
     const exTitle = document.getElementById('exercises-title')
     if (exTitle)
       exTitle.innerText = articleStrings.exercisesTitle + ' ' + articleTitle

packages/editor/src/plugins/injection/static.tsx

@@ -1,24 +1,16 @@
 import { LoadingSpinner } from '@editor/editor-ui/loading-spinner'
 import { useStaticStrings } from '@editor/i18n/static-strings-provider'
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
+import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import {
+  EditorExerciseGroupDocument,
   EditorInjectionDocument,
   type AnyEditorDocument,
 } from '@editor/types/editor-plugins'
 import { useEffect, useState } from 'react'
 
-function getBase(currentHost: string) {
-  if (currentHost.endsWith('serlo-staging.dev'))
-    return 'https://de.serlo-staging.dev'
-  if (currentHost.endsWith('serlo.org')) return 'https://' + currentHost
-
-  return process.env.NODE_ENV === 'development'
-    ? 'http://localhost:3000'
-    : 'https://de.serlo.org'
-}
-
 interface ResponseData {
-  content: AnyEditorDocument[]
+  content: AnyEditorDocument
   alias: string
   licenseId?: number
 }
@@ -36,25 +28,125 @@ export function InjectionStaticRenderer({
   useEffect(() => {
     if (!href) return
 
+    const [base, hash] = href.split('#')
+    const entityId = parseInt(base.match(/\/(\d+)/)?.[1] ?? '0')
+
+    if (!entityId) return
+
     function handleError(error: unknown) {
       // eslint-disable-next-line no-console
       console.error(error)
       setData('error')
     }
 
     async function fetchSerloContent() {
-      const base = getBase(window.location.host)
-      const url = `${base}/api/frontend/injection-content?href=${encodeURIComponent(href)}`
+      const url = `/content/entities/${entityId}.json`
+
       const res = await fetch(url)
-      const data = (await res.json()) as
-        | string
-        | { content: AnyEditorDocument[]; alias: string; licenseId?: number }
+      const responseData = (await res.json()) as {
+        contentType: string
+        path: string
+        title: string
+        content: string
+        contentUrl: string
+        licenseId: number
+      }
 
       if (!res.ok) {
-        handleError(data)
+        handleError(responseData)
         return
       }
-      setData(data as ResponseData)
+      if (
+        ['Article', 'Course', 'TaxonomyTerm'].includes(responseData.contentType)
+      ) {
+        setData({
+          content: createFallbackBox(responseData.path, responseData.title),
+          alias: responseData.path,
+          licenseId: responseData.licenseId,
+        })
+        return
+      }
+
+      if (responseData.contentType === 'Exercise') {
+        setData({
+          content:
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            JSON.parse(responseData.content).document as AnyEditorDocument,
+          alias: responseData.path,
+          licenseId: responseData.licenseId,
+        })
+        return
+      }
+
+      if (responseData.contentType === 'Video') {
+        setData({
+          content: {
+            plugin: EditorPluginType.Video,
+            state: {
+              src: responseData.contentUrl,
+              alt: responseData.title ?? 'video',
+            },
+          },
+          alias: responseData.path,
+          licenseId: responseData.licenseId,
+        })
+        return
+      }
+
+      if (responseData.contentType === 'Applet') {
+        setData({
+          content: {
+            plugin: EditorPluginType.Rows,
+            state: [
+              {
+                plugin: EditorPluginType.Geogebra,
+                state: responseData.contentUrl,
+              },
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+              JSON.parse(responseData.content).document,
+            ],
+          },
+          alias: responseData.path,
+          licenseId: responseData.licenseId,
+        })
+        return
+      }
+
+      if (responseData.contentType === 'ExerciseGroup') {
+        const content = (
+          JSON.parse(responseData.content) as {
+            document: EditorExerciseGroupDocument
+          }
+        ).document
+
+        // use id in hash to load one exercise out of the group
+        if (hash) {
+          const exercise = content.state.exercises.find((exercise) =>
+            exercise.id?.startsWith(hash)
+          )
+          if (exercise) {
+            setData({
+              content: exercise,
+              alias: responseData.path,
+              licenseId: responseData.licenseId,
+            })
+            return
+          }
+        }
+
+        setData({
+          content: content,
+          alias: responseData.path,
+          licenseId: responseData.licenseId,
+        })
+        return
+      }
+
+      setData({
+        content: JSON.parse(responseData.content) as AnyEditorDocument,
+        alias: responseData.path,
+        licenseId: responseData.licenseId,
+      })
     }
 
     try {
@@ -69,8 +161,6 @@ export function InjectionStaticRenderer({
   if (data === 'loading') return <LoadingSpinner />
   if (data === 'error') return errorBox ?? null
 
-  // injection content does not show license notice right now
-
   return (
     <div className="pt-4">
       <div className="mx-side border-t-3 border-brand-200 pb-4"></div>
@@ -79,7 +169,7 @@ export function InjectionStaticRenderer({
         {data.licenseId && data.licenseId > 1 ? (
           <a
             className="serlo-link"
-            href={`/license/detail/${data.licenseId}`}
+            href={`/license/${data.licenseId}`}
             target="_blank"
             rel="noreferrer"
           >
@@ -100,3 +190,25 @@ export function InjectionStaticRenderer({
     </div>
   )
 }
+
+function createFallbackBox(alias: string, title: string) {
+  return {
+    plugin: EditorPluginType.Text,
+    state: [
+      {
+        type: 'p',
+        children: [
+          {
+            type: 'a',
+            href: alias,
+            children: [{ text: title, strong: true }],
+          },
+          {
+            type: 'p',
+            children: [{ text: '' }],
+          },
+        ],
+      },
+    ],
+  }
+}

packages/editor/src/plugins/text/static-components/static-math.tsx

@@ -52,8 +52,8 @@ export function StaticMath({ src, inline }: StaticMathProps) {
     </div>
   )
 
-  function renderFormula(formula: string) {
-    if (!formula.length) return <span />
+  function renderFormula(formula?: string) {
+    if (!formula?.length) return <span />
 
     try {
       const mathML = temml.renderToString(formula, {

packages/editor/vite.config.ts

@@ -49,7 +49,13 @@ export default defineConfig({
       formats: ['es'],
     },
     rollupOptions: {
-      external: ['react', 'react-dom', 'lit', '@serlo/editor-web-component'],
+      external: [
+        'react',
+        'react-dom',
+        'lit',
+        '@serlo/editor-web-component',
+        'isomorphic-dompurify',
+      ],
       output: {
         globals: {
           react: 'React',