Merge pull request #45 from prezly/fix/qrf-113-fix-twitter-embeds

[QRF-113] Add custom logic for iframely embed script
prezly · Oct 7, 2022 · 050985e · 050985e
2 parents a94beed + 3cfef31
commit 050985e
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 0 deletions.
diff --git a/.loki/reference/chrome_iphone7_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_iphone7_Elements_Bookmark_Big_Vertical.png
diff --git a/...nce/chrome_iphone7_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...nce/chrome_iphone7_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_iphone7_Elements_Bookmark_Small_Horizontal.png
diff --git a/.loki/reference/chrome_laptop_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_laptop_Elements_Bookmark_Big_Vertical.png
diff --git a/...ence/chrome_laptop_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...ence/chrome_laptop_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_laptop_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_laptop_Elements_Bookmark_Small_Horizontal.png
diff --git a/.loki/reference/chrome_laptop_Elements_Contact_Press_Contacts.png b/.loki/reference/chrome_laptop_Elements_Contact_Press_Contacts.png
diff --git a/.loki/reference/chrome_laptop_Elements_StoryBookmark_Horizontal_With_Thumbnail.png b/.loki/reference/chrome_laptop_Elements_StoryBookmark_Horizontal_With_Thumbnail.png
diff --git a/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_With_Thumbnail.png b/.loki/reference/chrome_laptop_Elements_StoryBookmark_Vertical_With_Thumbnail.png
diff --git a/.loki/reference/chrome_narrow_Elements_Bookmark_Big_Vertical.png b/.loki/reference/chrome_narrow_Elements_Bookmark_Big_Vertical.png
diff --git a/...ence/chrome_narrow_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png b/...ence/chrome_narrow_Elements_Bookmark_Horizontal_Without_Description_New_Tab.png
diff --git a/.loki/reference/chrome_narrow_Elements_Bookmark_Small_Horizontal.png b/.loki/reference/chrome_narrow_Elements_Bookmark_Small_Horizontal.png
diff --git a/src/components/HtmlInjection.tsx b/src/components/HtmlInjection.tsx
@@ -5,6 +5,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     onError: () => void;
 }
 
+const IFRAMELY_EMBED_SCRIPT_SRC = '//cdn.iframe.ly/embed.js';
+
 export function HtmlInjection(props: Props) {
     const { html, onError, ...attrs } = props;
 
@@ -46,6 +48,16 @@ function useScripts(html: Props['html'], onError: Props['onError']) {
             setScriptAttributes(script, attributes);
 
             script.addEventListener('error', onError);
+
+            // Iframely docs advise to insert their embed script before other scripts
+            if (attributes.src === IFRAMELY_EMBED_SCRIPT_SRC) {
+                const firstScript = document.body.getElementsByTagName('script')[0];
+                if (firstScript) {
+                    document.body.insertBefore(script, firstScript);
+                    return;
+                }
+            }
+
             document.body.appendChild(script);
         });