From 9a626f066e8a7b45c095d269e87be1517cd79bb2 Mon Sep 17 00:00:00 2001
From: Lars <lars@serlo.org>
Date: Thu, 21 Nov 2024 17:40:34 +0100
Subject: [PATCH 1/2] fix(plugin-edusharing): keep overlay but let pointer
 events pass through

---
 .../src/plugins/edusharing-asset/editor.tsx     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/plugins/edusharing-asset/editor.tsx b/packages/editor/src/plugins/edusharing-asset/editor.tsx
index c0bf603812..2363f0ae2c 100644
--- a/packages/editor/src/plugins/edusharing-asset/editor.tsx
+++ b/packages/editor/src/plugins/edusharing-asset/editor.tsx
@@ -1,6 +1,7 @@
 import { EditorMetaContext } from '@editor/core/contexts/editor-meta-context'
 import { EditorModal } from '@editor/editor-ui/editor-modal'
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
+import { cn } from '@editor/utils/cn'
 import * as t from 'io-ts'
 import { useContext, useEffect, useRef, useState } from 'react'
 
@@ -79,12 +80,20 @@ export function EdusharingAssetEditor({
     </>
   )
 
-  // Transparent overlay while the edu-sharing plugin is unfocused. Clicking it will focus the plugin and let the user interact with the content.
+  // Transparent overlay. If the plugin is ...
+  // ... unfocused -> Clicking it will focus the plugin
+  // ... focused -> Clicking it does nothing and the events are handled in the iframe behind it
   // Explanation: Content is inside an iframe. Clicking within the iframe does sadly not change the editor focus automatically. Solutions I found are not easy and don't work reliably. So, we require an extra click from the user to be able to interact with the content in the editor.
   function renderOverlay() {
-    if (focused) return null
-
-    return <div className="absolute left-0 top-0 z-[15] h-full w-full"></div>
+    const captureClick = !focused
+    return (
+      <div
+        className={cn(
+          'absolute left-0 top-0 z-[15] h-full w-full',
+          captureClick ? 'pointer-events-auto' : 'pointer-events-none'
+        )}
+      ></div>
+    )
   }
 
   function renderPluginToolbar() {

From 38bb5def7a507621846517a8973d56d732e66b15 Mon Sep 17 00:00:00 2001
From: Lars <lars@serlo.org>
Date: Fri, 22 Nov 2024 10:07:32 +0100
Subject: [PATCH 2/2] fix(plugin-edusharing): make loading plugin state have
 aspect 16/9 to reduce content shifts after load

---
 packages/editor/src/editor-ui/assets/edusharing.svg       | 2 +-
 packages/editor/src/plugins/edusharing-asset/renderer.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/editor-ui/assets/edusharing.svg b/packages/editor/src/editor-ui/assets/edusharing.svg
index 19101e9086..e3de67a7e7 100644
--- a/packages/editor/src/editor-ui/assets/edusharing.svg
+++ b/packages/editor/src/editor-ui/assets/edusharing.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" xml:space="preserve">
 	<path fill="#58819B" d="m18.214 21.509-3.708-6.426 3.708-6.426h7.417l3.708 6.426-3.708 6.426z" />
 	<path fill="#9AC4D8" d="M5.208 13.853 1.5 7.426 5.208 1h7.417l3.708 6.426-3.708 6.427z" />
 	<path fill="#2F5775" d="M5.208 29.167 1.5 22.738l3.708-6.425h7.417l3.708 6.425-3.708 6.429z" />
diff --git a/packages/editor/src/plugins/edusharing-asset/renderer.tsx b/packages/editor/src/plugins/edusharing-asset/renderer.tsx
index 2ddaee1717..9240f47626 100644
--- a/packages/editor/src/plugins/edusharing-asset/renderer.tsx
+++ b/packages/editor/src/plugins/edusharing-asset/renderer.tsx
@@ -100,8 +100,8 @@ export function EdusharingAssetRenderer(props: {
         {embedHtml ? (
           renderEmbed()
         ) : (
-          <div className="flex justify-center">
-            <EdusharingIcon />
+          <div className="flex aspect-[16/9] w-full items-center justify-center">
+            <EdusharingIcon style={{ width: '5rem', height: '5rem' }} />
           </div>
         )}
       </div>