From 04a306929460827f099a15fddd2dd34fd22429b1 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sun, 23 Jan 2022 18:28:28 +0100
Subject: [PATCH] Added workarounds to make Summernote embeds responsive
 (closes #1758)

---
 public/js/grocy.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/public/js/grocy.js b/public/js/grocy.js
index 55bb880e..a896fba9 100644
--- a/public/js/grocy.js
+++ b/public/js/grocy.js
@@ -677,7 +677,23 @@ $(document).on("click", ".easy-link-copy-textbox", function()
 
 $("textarea.wysiwyg-editor").summernote({
 	minHeight: "300px",
-	lang: __t("summernote_locale")
+	lang: __t("summernote_locale"),
+	callbacks: {
+		onImageLinkInsert: function(url)
+		{
+			// Summernote workaround: Make images responsive
+			// By adding the "img-fluid" class to the img tag
+			$img = $('<img>').attr({ src: url, class: "img-fluid" })
+			$(this).summernote("insertNode", $img[0]);
+		}
+	}
+});
+
+// Summernote workaround: Make embeds responsive
+// By wrapping any embeded video in a container with class "embed-responsive"
+$(".note-video-clip").each(function()
+{
+	$(this).parent().html('<div class="embed-responsive embed-responsive-16by9">' + $(this).wrap("<p/>").parent().html() + "</div>");
 });
 
 function LoadImagesLazy()