fix: allow-iframe-embeds (#2009)

* allow embedding iframes

* fix alignment issue for buttons

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;
 }

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;
     }