Merge pull request #3932 from serlo/fix/pass-testing-secret-through-w…

…eb-component fix(editor): pass testingSecret through web-component
serlo · Jul 3, 2024 · bd27541 · bd27541
2 parents 225d1be + f944440
commit bd27541
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/editor-web-component/src/editor-web-component.tsx b/packages/editor-web-component/src/editor-web-component.tsx
@@ -30,6 +30,8 @@ export class EditorWebComponent extends HTMLElement {
   private _initialState: InitialState = exampleInitialState
   private _currentState: unknown
 
+  private _testingSecret: string | null = null
+
   constructor() {
     super()
 
@@ -50,7 +52,7 @@ export class EditorWebComponent extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['initial-state', 'mode']
+    return ['initial-state', 'mode', 'testing-secret']
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -111,6 +113,14 @@ export class EditorWebComponent extends HTMLElement {
     return this._history
   }
 
+  get testingSecret(): string | null {
+    return this._testingSecret
+  }
+
+  set testingSecret(newTestingSecret) {
+    if (newTestingSecret) this.setAttribute('testing-secret', newTestingSecret)
+  }
+
   connectedCallback() {
     if (!this.reactRoot) {
       this.reactRoot = ReactDOM.createRoot(this.container)
@@ -128,6 +138,7 @@ export class EditorWebComponent extends HTMLElement {
 
   mountReactComponent() {
     const initialStateAttr = this.getAttribute('initial-state')
+    const testingSecretAttr = this.getAttribute('testing-secret')
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const initialState: InitialState = initialStateAttr
@@ -159,6 +170,16 @@ export class EditorWebComponent extends HTMLElement {
             <Suspense fallback={<div>Loading editor...</div>}>
               <LazySerloEditor
                 initialState={this.initialState}
+                pluginsConfig={
+                  testingSecretAttr
+                    ? {
+                        general: {
+                          testingSecret: testingSecretAttr,
+                          enableTextAreaExercise: false,
+                        },
+                      }
+                    : {}
+                }
                 // HACK: Temporary solution to make image plugin available in Moodle & Chancenwerk integration with file upload disabled.
                 _enableImagePlugin
                 onChange={({ changed, getDocument }) => {

diff --git a/packages/editor/src/editor-integration/image-with-testing-config.ts b/packages/editor/src/editor-integration/image-with-testing-config.ts
@@ -115,7 +115,7 @@ export function createReadFile(secret: string) {
             },
           }),
         })
-        const data = (await response.json()) as MediaUploadQuery
+        const { data } = (await response.json()) as { data: MediaUploadQuery }
         const reader = new FileReader()
 
         reader.onload = async function (e: ProgressEvent) {