Merge pull request #4251 from serlo/feat/add-user-id-to-upload

feat(editor): add user id to image upload
serlo · Nov 6, 2024 · 00cb7f4 · 00cb7f4
2 parents 028dc65 + 056d32f
commit 00cb7f4
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 110 deletions.
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
diff --git a/packages/editor/src/package/editor.tsx b/packages/editor/src/package/editor.tsx
@@ -1,13 +1,12 @@
 import { Editor, type EditorProps } from '@editor/core'
-import { EditorVariantContext } from '@editor/core/contexts/editor-variant-context'
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { type GetDocument } from '@editor/core/types'
 import { createBasicPlugins } from '@editor/editor-integration/create-basic-plugins'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { StaticStringsProvider } from '@editor/i18n/static-strings-provider'
 import { editorPlugins } from '@editor/plugin/helpers/editor-plugins'
 import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
-import { LtikContext } from '@editor/plugins/edusharing-asset/ltik-context'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { SupportedLanguage } from '@editor/types/language-data'
 import { TemplatePluginType } from '@editor/types/template-plugin-type'
@@ -23,7 +22,6 @@ import {
   type EditorVariant,
 } from './storage-format'
 
-// TODO: figure out styling
 // eslint-disable-next-line import/no-unassigned-import
 import '../tailwind/editor.css'
 
@@ -35,6 +33,7 @@ export interface SerloEditorProps {
   language?: SupportedLanguage
   editorVariant: EditorVariant
   isProductionEnvironment?: boolean
+  userId?: string
   _testingSecret?: string | null
   _ltik?: string
 }
@@ -48,6 +47,7 @@ export function SerloEditor(props: SerloEditorProps) {
     language,
     plugins,
     isProductionEnvironment,
+    userId,
     _testingSecret,
     _ltik,
   } = {
@@ -76,17 +76,17 @@ export function SerloEditor(props: SerloEditorProps) {
   return (
     <StaticStringsProvider value={staticStrings}>
       <EditStringsProvider value={editStrings}>
-        <EditorVariantContext.Provider value={editorVariant}>
-          <LtikContext.Provider value={_ltik}>
-            {isProductionEnvironment ? null : renderTestEnvironmentWarning()}
-            <Editor
-              initialState={migratedState.document}
-              onChange={handleDocumentChange}
-            >
-              {children}
-            </Editor>
-          </LtikContext.Provider>
-        </EditorVariantContext.Provider>
+        <EditorMetaContext.Provider
+          value={{ editorVariant, userId, ltik: _ltik }}
+        >
+          {isProductionEnvironment ? null : renderTestEnvironmentWarning()}
+          <Editor
+            initialState={migratedState.document}
+            onChange={handleDocumentChange}
+          >
+            {children}
+          </Editor>
+        </EditorMetaContext.Provider>
       </EditStringsProvider>
     </StaticStringsProvider>
   )

diff --git a/packages/editor/src/package/serlo-renderer.tsx b/packages/editor/src/package/serlo-renderer.tsx
@@ -1,8 +1,8 @@
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { createRenderers } from '@editor/editor-integration/create-renderers'
 import { EditStringsProvider } from '@editor/i18n/edit-strings-provider'
 import { StaticStringsProvider } from '@editor/i18n/static-strings-provider'
 import { editorRenderers } from '@editor/plugin/helpers/editor-renderer'
-import { LtikContext } from '@editor/plugins/edusharing-asset/ltik-context'
 import { StaticRenderer } from '@editor/static-renderer/static-renderer'
 import type { SupportedLanguage } from '@editor/types/language-data'
 
@@ -37,14 +37,14 @@ export function SerloRenderer(props: SerloRendererProps) {
   return (
     <StaticStringsProvider value={staticStrings}>
       <EditStringsProvider value={editStrings}>
-        <LtikContext.Provider value={_ltik}>
+        <EditorMetaContext.Provider value={{ editorVariant, ltik: _ltik }}>
           <div
             className="serlo-content-with-spacing-fixes"
             data-editor-version={getEditorVersion()}
           >
             <StaticRenderer document={migratedState.document} />
           </div>
-        </LtikContext.Provider>
+        </EditorMetaContext.Provider>
       </EditStringsProvider>
     </StaticStringsProvider>
   )

diff --git a/packages/editor/src/plugins/edusharing-asset/editor.tsx b/packages/editor/src/plugins/edusharing-asset/editor.tsx
@@ -1,10 +1,10 @@
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import * as t from 'io-ts'
 import { useContext, useEffect, useRef, useState } from 'react'
 import Modal from 'react-modal'
 
 import type { EdusharingAssetProps } from '.'
-import { LtikContext } from './ltik-context'
 import { EdusharingAssetRenderer } from './renderer'
 import { PluginToolbar } from '../../editor-ui/plugin-toolbar'
 import { PluginDefaultTools } from '../../editor-ui/plugin-toolbar/plugin-tool-menu/plugin-default-tools'
@@ -52,7 +52,7 @@ export function EdusharingAssetEditor({
     return () => window.removeEventListener('message', handleIFrameEvent)
   }, [state.edusharingAsset])
 
-  const ltik = useContext(LtikContext)
+  const { ltik } = useContext(EditorMetaContext)
   if (!ltik) return <p>Error: ltik missing</p>
 
   return (

diff --git a/packages/editor/src/plugins/edusharing-asset/ltik-context.ts b/packages/editor/src/plugins/edusharing-asset/ltik-context.ts
diff --git a/packages/editor/src/plugins/edusharing-asset/static.tsx b/packages/editor/src/plugins/edusharing-asset/static.tsx
@@ -1,7 +1,7 @@
+import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { EditorEdusharingAssetDocument } from '@editor/types/editor-plugins'
 import { useContext } from 'react'
 
-import { LtikContext } from './ltik-context'
 import { EdusharingAssetRenderer } from './renderer'
 
 export function EdusharingAssetStaticRenderer(
@@ -12,7 +12,7 @@ export function EdusharingAssetStaticRenderer(
 
   const { contentWidth: widthInPercent } = props.state
 
-  const ltik = useContext(LtikContext)
+  const { ltik } = useContext(EditorMetaContext)
 
   if (!ltik) return null