From ec12171e803f3bb80f9c3eba7e3b10d1320fccfb Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 15:11:43 +0200
Subject: [PATCH 1/7] style embed overlay

---
 webapp/components/Editor/Editor.vue     | 33 ++++++++++++++++
 webapp/components/Editor/nodes/Embed.js | 50 +++++++++++--------------
 2 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 8d3ce281b..2cdff0814 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -342,4 +342,37 @@ li > p {
     margin: 0 0 $space-x-small;
   }
 }
+
+.embed-container {
+  position: relative;
+  border-radius: $border-radius-base;
+  border: 1px solid $color-neutral-70;
+  padding: $space-x-small;
+  overflow: hidden;
+}
+
+.embed-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  padding: $space-large;
+  background-color: $color-neutral-100;
+}
+
+.embed-buttons {
+  button {
+    margin-right: $space-small;
+  }
+}
+
+.embed-checkbox {
+  display: flex;
+
+  input {
+    margin-right: $space-small;
+  }
+}
 </style>
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index 4be49ee0c..92aee59fc 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -4,35 +4,28 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { mapGetters, mapMutations } from 'vuex'
 import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
-const template = `  
-    <a  class="embed" href="" style="cursor: none">
-      <ds-container width="small">
-        <ds-section secondary v-if="showOverlay"  style="height: 270px;width:80%;position:absolute;z-index:3">
-          <ds-text v-if="!isOnlyLink">Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
-          <ds-text v-else >Du verlässt jetzt Human Connection! Du wirst zu ({{embedPublisher}}) weitergeleitet!</ds-text>
-          <ds-button v-if="!isOnlyLink" size="x-large" @click.prevent="allowEmbedTemporar('openIframe')" >jetzt ansehen</ds-button>
-          <ds-button  v-else size="x-large" > <a :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank" >Webseite aufrufen   </a>  </ds-button>
-          <p v-show="!isOnlyLink">      
-          <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />
-      
-            <lable v-if="!currentUser.allowEmbedIframes" for="dataEmbedUrl" size="small">
-              automatisches Einbinden <b>zulassen?</b> |
-            </lable>
-            <lable v-else size="small" for="dataEmbedUrl" >
-              automatisches Einbinden <b>zugelassen</b> |
-            </lable>
-          </p>
-        </ds-section>
-        <img  v-show="showPreviewImage" style="cursor: pointer"  :src="embedImage" alt="dataEmbedUrl"  @click.prevent="clickPreview" height="270" width="auto" />
-         <div v-show="!showPreviewImage" v-html="embedHtml" />
-        <p style="color:black">
-        <div >{{ embedTitle }}</div>
-        <div>{{ embedDescription }}</div>
-        <a  :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank"  >
-          <em> {{ dataEmbedUrl }} </em>
-        </a>
-      </ds-container>
+const template = `
+  <ds-container width="small" class="embed-container">
+    <aside v-if="showOverlay" class="embed-overlay">
+      <ds-text v-if="!isOnlyLink">Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
+      <div class="embed-buttons">
+      <ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
+      <ds-button ghost @click.prevent="showOverlay = false">Abbrechen</ds-button>
+      </div>
+      <label class="embed-checkbox">
+        <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />
+        <span>Inhalte von Drittanbietern immer zulassen</span>
+      </label>
+    </aside>
+    <img  v-show="showPreviewImage" style="cursor: pointer"  :src="embedImage" alt="dataEmbedUrl"  @click.prevent="clickPreview" height="270" width="auto" />
+      <div v-show="!showPreviewImage" v-html="embedHtml" />
+    <p style="color:black">
+    <div >{{ embedTitle }}</div>
+    <div>{{ embedDescription }}</div>
+    <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank"  >
+      <em> {{ dataEmbedUrl }} </em>
     </a>
+  </ds-container>
 `
 
 const compiledTemplate = compileToFunctions(template)
@@ -166,7 +159,6 @@ export default class Embed extends Node {
           } else {
             this.submit(false)
           }
-          this.showOverlay = false
         },
         allowEmbedTemporar(xx) {
           if (!this.isOnlyLink) {

From 99629991d090814b09fb37fff7067e982ea726e4 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 15:49:23 +0200
Subject: [PATCH 2/7] style embed preview

---
 webapp/components/Editor/Editor.vue     | 27 +++++++++++++++++++++++--
 webapp/components/Editor/nodes/Embed.js | 20 +++++++++---------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 2cdff0814..ca632aa16 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -345,10 +345,33 @@ li > p {
 
 .embed-container {
   position: relative;
+  padding: 0;
+  margin: $space-small auto;
+  overflow: hidden;
   border-radius: $border-radius-base;
   border: 1px solid $color-neutral-70;
-  padding: $space-x-small;
-  overflow: hidden;
+  background-color: $color-neutral-90;
+}
+
+.embed-content {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  h4 {
+    margin: $space-small 0 0 $space-small;
+  }
+
+  p,
+  a {
+    display: block;
+    margin: 0 0 0 $space-small;
+  }
+}
+
+.embed-preview-image {
+  width: 100%;
+  height: auto;
 }
 
 .embed-overlay {
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index 92aee59fc..3513b6c41 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -6,25 +6,25 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = `
   <ds-container width="small" class="embed-container">
+    <section @click.prevent="clickPreview" class="embed-content">
+      <img v-show="showPreviewImage" :src="embedImage" class="embed-preview-image" />
+      <div v-show="!showPreviewImage" v-html="embedHtml" />
+      <h4>{{embedTitle}}</h4>
+      <p>{{embedDescription}}</p>
+      <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
+    </section>
     <aside v-if="showOverlay" class="embed-overlay">
-      <ds-text v-if="!isOnlyLink">Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
+      <h3>Achte auf deine Daten!</h3>
+      <ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
       <div class="embed-buttons">
       <ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
       <ds-button ghost @click.prevent="showOverlay = false">Abbrechen</ds-button>
       </div>
       <label class="embed-checkbox">
-        <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" id="dataEmbedUrl" />
+        <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" />
         <span>Inhalte von Drittanbietern immer zulassen</span>
       </label>
     </aside>
-    <img  v-show="showPreviewImage" style="cursor: pointer"  :src="embedImage" alt="dataEmbedUrl"  @click.prevent="clickPreview" height="270" width="auto" />
-      <div v-show="!showPreviewImage" v-html="embedHtml" />
-    <p style="color:black">
-    <div >{{ embedTitle }}</div>
-    <div>{{ embedDescription }}</div>
-    <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank"  >
-      <em> {{ dataEmbedUrl }} </em>
-    </a>
   </ds-container>
 `
 

From c46c13dbdf175ca42543d93ad8c10adef9d40009 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 16:37:52 +0200
Subject: [PATCH 3/7] toggle overlay with methods

---
 webapp/components/Editor/Editor.vue     |  8 ++++++++
 webapp/components/Editor/nodes/Embed.js | 18 ++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index ca632aa16..73ca5fcde 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -374,6 +374,14 @@ li > p {
   height: auto;
 }
 
+.embed-html {
+  width: 100%;
+
+  iframe {
+    width: 100%;
+  }
+}
+
 .embed-overlay {
   position: absolute;
   top: 0;
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index 3513b6c41..bbac8fad5 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -6,9 +6,9 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = `
   <ds-container width="small" class="embed-container">
-    <section @click.prevent="clickPreview" class="embed-content">
-      <img v-show="showPreviewImage" :src="embedImage" class="embed-preview-image" />
-      <div v-show="!showPreviewImage" v-html="embedHtml" />
+    <section @click.prevent="openOverlay()" class="embed-content">
+      <div v-if="!showPreviewImage" v-html="embedHtml" class="embed-html" />
+      <img v-else :src="embedImage" class="embed-preview-image" />
       <h4>{{embedTitle}}</h4>
       <p>{{embedDescription}}</p>
       <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
@@ -18,7 +18,7 @@ const template = `
       <ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
       <div class="embed-buttons">
       <ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
-      <ds-button ghost @click.prevent="showOverlay = false">Abbrechen</ds-button>
+      <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
       </div>
       <label class="embed-checkbox">
         <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" />
@@ -87,7 +87,7 @@ export default class Embed extends Node {
         embedData: {},
         showPreviewImage: true,
         showEmbed: null,
-        showOverlay: null,
+        showOverlay: false,
         isOnlyLink: false,
       }),
       async created() {
@@ -150,9 +150,12 @@ export default class Embed extends Node {
         ...mapMutations({
           setCurrentUser: 'auth/SET_USER',
         }),
-        clickPreview() {
+        openOverlay() {
           this.showOverlay = true
         },
+        closeOverlay() {
+          this.showOverlay = false
+        },
         check(e) {
           if (e.target.checked) {
             this.submit(true)
@@ -163,11 +166,10 @@ export default class Embed extends Node {
         allowEmbedTemporar(xx) {
           if (!this.isOnlyLink) {
             this.showEmbed = true
-            this.showOverlay = false
           } else {
             this.showEmbed = false
-            this.showOverlay = false
           }
+          this.closeOverlay()
         },
         async submit(allowEmbedIframes) {
           try {

From 8c78fef45798cf98cedb96c0ef1d7fc003ffe36e Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 16:55:30 +0200
Subject: [PATCH 4/7] toggle preview image with showEmbed

---
 webapp/components/Editor/Editor.vue     |  2 +-
 webapp/components/Editor/nodes/Embed.js | 30 +++++--------------------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 73ca5fcde..0f96607ee 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -356,7 +356,6 @@ li > p {
 .embed-content {
   width: 100%;
   height: 100%;
-  cursor: pointer;
 
   h4 {
     margin: $space-small 0 0 $space-small;
@@ -372,6 +371,7 @@ li > p {
 .embed-preview-image {
   width: 100%;
   height: auto;
+  cursor: pointer;
 }
 
 .embed-html {
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index bbac8fad5..72c59c32b 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -6,9 +6,9 @@ import { allowEmbedIframesMutation } from '~/graphql/User.js'
 
 const template = `
   <ds-container width="small" class="embed-container">
-    <section @click.prevent="openOverlay()" class="embed-content">
-      <div v-if="!showPreviewImage" v-html="embedHtml" class="embed-html" />
-      <img v-else :src="embedImage" class="embed-preview-image" />
+    <section class="embed-content">
+      <div v-if="showEmbed" v-html="embedHtml" class="embed-html" />
+      <img v-else :src="embedImage" class="embed-preview-image" @click.prevent="openOverlay()" />
       <h4>{{embedTitle}}</h4>
       <p>{{embedDescription}}</p>
       <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
@@ -17,7 +17,7 @@ const template = `
       <h3>Achte auf deine Daten!</h3>
       <ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
       <div class="embed-buttons">
-      <ds-button primary @click.prevent="allowEmbedTemporar('openIframe')">jetzt ansehen</ds-button>
+      <ds-button primary @click.prevent="allowEmbedTemporarily()">jetzt ansehen</ds-button>
       <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
       </div>
       <label class="embed-checkbox">
@@ -85,10 +85,8 @@ export default class Embed extends Node {
       props: ['node', 'updateAttrs', 'options'],
       data: () => ({
         embedData: {},
-        showPreviewImage: true,
         showEmbed: null,
         showOverlay: false,
-        isOnlyLink: false,
       }),
       async created() {
         if (!this.options) return {}
@@ -101,18 +99,6 @@ export default class Embed extends Node {
         }),
         embedHtml() {
           const { html = '' } = this.embedData
-          if (this.embedData.html === null) {
-            this.isOnlyLink = true
-          }
-
-          if (this.showEmbed && !this.isOnlyLink) {
-            this.showPreviewImage = false
-          }
-
-          if (!this.showEmbed && this.isOnlyLink) {
-            this.showPreviewImage = true
-          }
-
           return html
         },
         embedImage() {
@@ -163,12 +149,8 @@ export default class Embed extends Node {
             this.submit(false)
           }
         },
-        allowEmbedTemporar(xx) {
-          if (!this.isOnlyLink) {
-            this.showEmbed = true
-          } else {
-            this.showEmbed = false
-          }
+        allowEmbedTemporarily() {
+          this.showEmbed = true
           this.closeOverlay()
         },
         async submit(allowEmbedIframes) {

From 3a013d0607580730d6cacdda9ffc7e76b2da5500 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 17:10:08 +0200
Subject: [PATCH 5/7] update settings on button click instead of checkbox click

---
 webapp/components/Editor/nodes/Embed.js | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index 72c59c32b..1275fe3d2 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -17,11 +17,11 @@ const template = `
       <h3>Achte auf deine Daten!</h3>
       <ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
       <div class="embed-buttons">
-      <ds-button primary @click.prevent="allowEmbedTemporarily()">jetzt ansehen</ds-button>
+      <ds-button primary @click.prevent="allowEmbed()">jetzt ansehen</ds-button>
       <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
       </div>
       <label class="embed-checkbox">
-        <input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" />
+        <input type="checkbox" v-model="checkedAlwaysAllowEmbeds" />
         <span>Inhalte von Drittanbietern immer zulassen</span>
       </label>
     </aside>
@@ -85,13 +85,16 @@ export default class Embed extends Node {
       props: ['node', 'updateAttrs', 'options'],
       data: () => ({
         embedData: {},
-        showEmbed: null,
+        checkedAlwaysAllowEmbeds: false,
+        showEmbed: false,
         showOverlay: false,
       }),
       async created() {
-        if (!this.options) return {}
-        this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
-        this.showEmbed = this.currentUser.allowEmbedIframes
+        if (this.options) {
+          this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
+          this.showEmbed = this.currentUser.allowEmbedIframes
+          this.checkedAlwaysAllowEmbeds = this.currentUser.allowEmbedIframes
+        }
       },
       computed: {
         ...mapGetters({
@@ -142,18 +145,15 @@ export default class Embed extends Node {
         closeOverlay() {
           this.showOverlay = false
         },
-        check(e) {
-          if (e.target.checked) {
-            this.submit(true)
-          } else {
-            this.submit(false)
-          }
-        },
-        allowEmbedTemporarily() {
+        allowEmbed() {
           this.showEmbed = true
           this.closeOverlay()
+
+          if (this.checkedAlwaysAllowEmbeds !== this.currentUser.allowEmbedIframes) {
+            this.updateEmbedSettings(this.checkedAlwaysAllowEmbeds)
+          }
         },
-        async submit(allowEmbedIframes) {
+        async updateEmbedSettings(allowEmbedIframes) {
           try {
             await this.$apollo.mutate({
               mutation: allowEmbedIframesMutation(),

From 1f93c690beee31713002c0451936eca555260356 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 18:05:29 +0200
Subject: [PATCH 6/7] only display available data

---
 webapp/components/Editor/Editor.vue     |  7 +++++++
 webapp/components/Editor/nodes/Embed.js | 11 ++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 0f96607ee..2b65131a8 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -406,4 +406,11 @@ li > p {
     margin-right: $space-small;
   }
 }
+
+.embed-close-button {
+  position: absolute;
+  top: $space-x-small;
+  right: $space-x-small;
+  background-color: rgba(250, 249, 250, 0.6);
+}
 </style>
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index 1275fe3d2..fb24eadd1 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -8,9 +8,9 @@ const template = `
   <ds-container width="small" class="embed-container">
     <section class="embed-content">
       <div v-if="showEmbed" v-html="embedHtml" class="embed-html" />
-      <img v-else :src="embedImage" class="embed-preview-image" @click.prevent="openOverlay()" />
-      <h4>{{embedTitle}}</h4>
-      <p>{{embedDescription}}</p>
+      <img v-else-if="embedImage" :src="embedImage" class="embed-preview-image" @click.prevent="openOverlay()" />
+      <h4 v-if="embedTitle">{{embedTitle}}</h4>
+      <p v-if="embedDescription">{{embedDescription}}</p>
       <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>
     </section>
     <aside v-if="showOverlay" class="embed-overlay">
@@ -25,6 +25,7 @@ const template = `
         <span>Inhalte von Drittanbietern immer zulassen</span>
       </label>
     </aside>
+    <ds-button icon="close" ghost size="small" class="embed-close-button" @click.prevent="removeEmbed()" />
   </ds-container>
 `
 
@@ -153,6 +154,10 @@ export default class Embed extends Node {
             this.updateEmbedSettings(this.checkedAlwaysAllowEmbeds)
           }
         },
+        removeEmbed() {
+          // TODO: replace the whole Embed with a proper Link node
+          console.log('I want to be a Link!')
+        },
         async updateEmbedSettings(allowEmbedIframes) {
           try {
             await this.$apollo.mutate({

From 4a1ca2610aedd5503740e0415ea5fc95105f6854 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 2 Oct 2019 18:23:30 +0200
Subject: [PATCH 7/7] show overlay only for embedded html

---
 webapp/components/Editor/Editor.vue     | 3 +++
 webapp/components/Editor/nodes/Embed.js | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 2b65131a8..6ab4a0db6 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -371,6 +371,9 @@ li > p {
 .embed-preview-image {
   width: 100%;
   height: auto;
+}
+
+.embed-preview-image--clickable {
   cursor: pointer;
 }
 
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index fb24eadd1..6e3449e38 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -8,7 +8,10 @@ const template = `
   <ds-container width="small" class="embed-container">
     <section class="embed-content">
       <div v-if="showEmbed" v-html="embedHtml" class="embed-html" />
-      <img v-else-if="embedImage" :src="embedImage" class="embed-preview-image" @click.prevent="openOverlay()" />
+      <template v-else>
+        <img v-if="embedHtml && embedImage" :src="embedImage" class="embed-preview-image embed-preview-image--clickable" @click.prevent="openOverlay()" />
+        <img v-else-if="embedImage" :src="embedImage" class="embed-preview-image" />
+      </template>
       <h4 v-if="embedTitle">{{embedTitle}}</h4>
       <p v-if="embedDescription">{{embedDescription}}</p>
       <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">{{dataEmbedUrl}}</a>