Merge pull request #4243 from serlo/staging

Deployment
serlo · Nov 7, 2024 · a53e6b0 · a53e6b0
2 parents add2906 + ff8501a
commit a53e6b0
Show file tree

Hide file tree

Showing 27 changed files with 241 additions and 151 deletions.
diff --git a/apps/web/src/components/frontend-client-base/frontend-client-base.tsx b/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>
   )

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,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>

diff --git a/apps/web/src/data/de/index.ts b/apps/web/src/data/de/index.ts
@@ -344,6 +344,8 @@ export const instanceData = {
         code1010001: "Anmelden",
         code1010002: "Anmelden mit Mein Bildungsraum",
         code1010013: "Weiter mit SSO",
+        code1010022: "Anmelden",
+        // Login with password
         code1040001: "Account anlegen",
         code1040002: "Über „Mein Bildungsraum“ Account registrieren",
         code1040003: "Weiter",

diff --git a/apps/web/src/data/en/index.ts b/apps/web/src/data/en/index.ts
@@ -373,6 +373,7 @@ export const instanceData = {
         code1010001: 'Sign in',
         code1010002: 'Sign in via „Mein Bildungsraum“',
         code1010013: 'Continue with SSO',
+        code1010022: 'Login', // Login with password
         code1040001: 'Register',
         code1040002: 'Register via „Mein Bildungsraum“',
         code1040003: 'Continue',

diff --git a/apps/web/src/data/es/index.ts b/apps/web/src/data/es/index.ts
@@ -344,6 +344,8 @@ export const instanceData = {
         code1010001: "Iniciar sesión",
         code1010002: "Inicia sesión a través de „Mein Bildungsraum“ (programa en Alemania)",
         code1010013: "Continuar con SSO",
+        code1010022: "Ingresar",
+        // Login with password
         code1040001: "Registrarse",
         code1040002: "Inscríbete a través de  „Mein Bildungsraum“ (programa de Alemania)",
         code1040003: "Continuar",

diff --git a/apps/web/src/data/fr/index.ts b/apps/web/src/data/fr/index.ts
@@ -344,6 +344,8 @@ export const instanceData = {
         code1010001: 'Sign in',
         code1010002: 'Sign in via „Mein Bildungsraum“',
         code1010013: 'Continue with SSO',
+        code1010022: "Se connecter",
+        // Login with password
         code1040001: 'Register',
         code1040002: 'Register via „Mein Bildungsraum“',
         code1040003: 'Continue',

diff --git a/apps/web/src/data/hi/index.ts b/apps/web/src/data/hi/index.ts
@@ -344,6 +344,8 @@ export const instanceData = {
         code1010001: 'Sign in',
         code1010002: 'Sign in via „Mein Bildungsraum“',
         code1010013: 'Continue with SSO',
+        code1010022: "लॉग इन करें",
+        // Login with password
         code1040001: 'Register',
         code1040002: 'Register via „Mein Bildungsraum“',
         code1040003: 'Continue',

diff --git a/apps/web/src/data/ta/index.ts b/apps/web/src/data/ta/index.ts
@@ -344,6 +344,8 @@ export const instanceData = {
         code1010001: 'Sign in',
         code1010002: 'Sign in via „Mein Bildungsraum“',
         code1010013: 'Continue with SSO',
+        code1010022: "உள்நுழை",
+        // Login with password
         code1040001: 'Register',
         code1040002: 'Register via „Mein Bildungsraum“',
         code1040003: 'Continue',

diff --git a/apps/web/src/pages/___editor_preview.tsx b/apps/web/src/pages/___editor_preview.tsx
@@ -1,3 +1,4 @@
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { editStrings as editStringsDe } from '@editor/i18n/strings/de/edit'
 import { editStrings as editStringsEn } from '@editor/i18n/strings/en/edit'
@@ -100,64 +101,68 @@ function Content() {
           : editStringsEn
       }
     >
-      <main id="content" className="flex">
-        <section className="min-h-screen w-[50vw] border-4 border-r-0 border-editor-primary">
-          <header className="mx-side flex justify-between align-middle font-bold">
-            <h2 className="mb-12 text-editor-primary">Edit</h2>
-            <div>
-              <input
-                onPaste={({ clipboardData }) => {
-                  const pastedString = clipboardData
-                    .getData('text/plain')
-                    .trim()
-                  const cleanJsonString = pastedString
-                    .replace(/'/g, '')
-                    .replace(/\\"/g, '"')
+      <EditorMetaContext.Provider
+        value={{ editorVariant: 'serlo-org', userId: 'serlo-preview-user' }}
+      >
+        <main id="content" className="flex">
+          <section className="min-h-screen w-[50vw] border-4 border-r-0 border-editor-primary">
+            <header className="mx-side flex justify-between align-middle font-bold">
+              <h2 className="mb-12 text-editor-primary">Edit</h2>
+              <div>
+                <input
+                  onPaste={({ clipboardData }) => {
+                    const pastedString = clipboardData
+                      .getData('text/plain')
+                      .trim()
+                    const cleanJsonString = pastedString
+                      .replace(/'/g, '')
+                      .replace(/\\"/g, '"')
 
-                  try {
-                    const jsonObject = JSON.parse(
-                      cleanJsonString
-                    ) as AnyEditorDocument
-                    setPreviewState(JSON.stringify(jsonObject))
-                  } catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.error('Error parsing JSON:', error)
-                    showToastNotice('sorry, invalid json', 'warning')
-                  }
-                }}
-                className="mt-0.5 w-20 bg-gray-100 text-sm"
-                placeholder="paste json"
-              />
-              {' | '}
-              <button
-                onClick={() => {
-                  void navigator.clipboard.writeText(previewState)
-                  showToastNotice('state copied to clipboard', 'success')
-                }}
-                className="mt-0.5 text-sm"
-              >
-                copy
-              </button>{' '}
-              |{' '}
-              <button
-                onClick={() => setPreviewState(emptyState)}
-                className="mt-0.5 text-sm"
-              >
-                reset
-              </button>
+                    try {
+                      const jsonObject = JSON.parse(
+                        cleanJsonString
+                      ) as AnyEditorDocument
+                      setPreviewState(JSON.stringify(jsonObject))
+                    } catch (error) {
+                      // eslint-disable-next-line no-console
+                      console.error('Error parsing JSON:', error)
+                      showToastNotice('sorry, invalid json', 'warning')
+                    }
+                  }}
+                  className="mt-0.5 w-20 bg-gray-100 text-sm"
+                  placeholder="paste json"
+                />
+                {' | '}
+                <button
+                  onClick={() => {
+                    void navigator.clipboard.writeText(previewState)
+                    showToastNotice('state copied to clipboard', 'success')
+                  }}
+                  className="mt-0.5 text-sm"
+                >
+                  copy
+                </button>{' '}
+                |{' '}
+                <button
+                  onClick={() => setPreviewState(emptyState)}
+                  className="mt-0.5 text-sm"
+                >
+                  reset
+                </button>
+              </div>
+            </header>
+            <div className="px-2">{editor}</div>
+          </section>
+          <section className="min-h-screen w-[50vw] border-4 border-editor-primary">
+            <h2 className="mx-side mb-12 font-bold text-editor-primary">
+              Preview
+            </h2>
+            <div className="mt-[3rem]">
+              <EditorRenderer document={parseDocumentString(previewState)} />
             </div>
-          </header>
-          <div className="px-2">{editor}</div>
-        </section>
-        <section className="min-h-screen w-[50vw] border-4 border-editor-primary">
-          <h2 className="mx-side mb-12 font-bold text-editor-primary">
-            Preview
-          </h2>
-          <div className="mt-[3rem]">
-            <EditorRenderer document={parseDocumentString(previewState)} />
-          </div>
-        </section>
-      </main>
+          </section>
+        </main>
+      </EditorMetaContext.Provider>
     </EditStringsProvider>
   )
 }
diff --git a/apps/web/src/serlo-editor-integration/serlo-editor.tsx b/apps/web/src/serlo-editor-integration/serlo-editor.tsx
@@ -1,4 +1,5 @@
 import { type EditorProps } from '@editor/core'
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { editStrings as editStringsDe } from '@editor/i18n/strings/de/edit'
 import { editStrings as editStringsEn } from '@editor/i18n/strings/en/edit'
@@ -18,6 +19,7 @@ import { SaveButton } from './components/save-button'
 import { createPlugins } from './create-plugins'
 import { createRenderers } from './create-renderers'
 import { useSerloHandleLearnerEvent } from './use-handle-learner-event'
+import { useAuthentication } from '@/auth/use-authentication'
 import { useInstanceData } from '@/contexts/instance-context'
 import type { SetEntityMutationData } from '@/mutations/use-set-entity-mutation/types'
 
@@ -39,6 +41,7 @@ export function SerloEditor({
   children,
 }: SerloEditorProps) {
   const { lang, licenses } = useInstanceData()
+  const auth = useAuthentication()
 
   const handleLearnerEvent = useSerloHandleLearnerEvent()
 
@@ -57,20 +60,24 @@ export function SerloEditor({
 
   return (
     <EditStringsProvider value={editString}>
-      <SerloOnlyFeaturesContext.Provider
-        value={{ isSerlo: true, licenses, ArticleAddModal }}
+      <EditorMetaContext.Provider
+        value={{ editorVariant: 'serlo-org', userId: String(auth?.id) }}
       >
-        <Editor initialState={initialState}>
-          <SaveButton onSave={onSave} isInTestArea={isInTestArea} />
-          {isNewEntity ? (
-            <ExternalRevisionLoader
-              templateType={initialState.plugin as TemplatePluginType}
-            />
-          ) : null}
+        <SerloOnlyFeaturesContext.Provider
+          value={{ isSerlo: true, licenses, ArticleAddModal }}
+        >
+          <Editor initialState={initialState}>
+            <SaveButton onSave={onSave} isInTestArea={isInTestArea} />
+            {isNewEntity ? (
+              <ExternalRevisionLoader
+                templateType={initialState.plugin as TemplatePluginType}
+              />
+            ) : null}
 
-          {children}
-        </Editor>
-      </SerloOnlyFeaturesContext.Provider>
+            {children}
+          </Editor>
+        </SerloOnlyFeaturesContext.Provider>
+      </EditorMetaContext.Provider>
     </EditStringsProvider>
   )
 }
diff --git a/packages/editor/src/core/contexts/editor-meta-context.tsx b/packages/editor/src/core/contexts/editor-meta-context.tsx
@@ -0,0 +1,12 @@
+import type { EditorVariant } from '@editor/package/storage-format'
+import { createContext } from 'react'
+
+export interface EditorMeta {
+  editorVariant: EditorVariant
+  userId?: string
+  ltik?: string
+}
+
+export const EditorMetaContext = createContext<EditorMeta>({
+  editorVariant: 'unknown',
+})
diff --git a/packages/editor/src/core/contexts/editor-variant-context.tsx b/packages/editor/src/core/contexts/editor-variant-context.tsx