From ae59f04b9f73fcc16328e33cb8456dd57243a9c7 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 8 Jan 2023 10:50:26 -0800
Subject: [PATCH] fix: allow-iframe-embeds (#2009)

* allow embedding iframes

* fix alignment issue for buttons
---
 frontend/components/Domain/Recipe/RecipeActionMenu.vue | 8 ++++++--
 frontend/components/global/SafeMarkdown.vue            | 8 +++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index b8447d5a14d8..d48e01e5e3c0 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -9,7 +9,7 @@
   >
     <BaseDialog
       v-model="deleteDialog"
-      :title="$t('recipe.delete-recipe')"
+      :title="$tc('recipe.delete-recipe')"
       color="error"
       :icon="$globals.icons.alertCircle"
       @confirm="emitDelete()"
@@ -66,7 +66,7 @@
         @print="$emit('print')"
       />
     </div>
-    <div v-if="open" class="custom-btn-group mb-">
+    <div v-if="open" class="custom-btn-group gapped">
       <v-btn
         v-for="(btn, index) in editorButtons"
         :key="index"
@@ -211,6 +211,10 @@ export default defineComponent({
   display: inline-flex;
 }
 
+.gapped {
+  gap: 0.25rem;
+}
+
 .vertical {
   flex-direction: column !important;
 }
diff --git a/frontend/components/global/SafeMarkdown.vue b/frontend/components/global/SafeMarkdown.vue
index 1d38eb3a5942..2a46d39ab66e 100644
--- a/frontend/components/global/SafeMarkdown.vue
+++ b/frontend/components/global/SafeMarkdown.vue
@@ -20,17 +20,19 @@ export default defineComponent({
   },
   setup() {
     function sanitizeMarkdown(rawHtml: string | null | undefined): string {
+      console.log(rawHtml)
       if (!rawHtml) {
         return "";
       }
 
       const sanitized = DOMPurify.sanitize(rawHtml, {
-        USE_PROFILES: { html: true },
         // TODO: some more thought could be put into what is allowed and what isn't
-        ALLOWED_TAGS: ["img", "div", "p"],
-        ADD_ATTR: ["src", "alt", "height", "width", "class"],
+        ALLOWED_TAGS: ["img", "div", "p", "iframe"],
+        ADD_ATTR: ["src", "alt", "height", "width", "class", "allow", "title", "allowfullscreen", "frameborder", "scrolling"],
       });
 
+      console.log(sanitized)
+
       return sanitized;
     }