Merge pull request #39 from prezly/fix/qrf-113-embeds-vanish-in-edito…

…r-in-published

[QRF-113] Fix - Iframely Embeds not visible on first page load

.gitignore

@@ -1,4 +1,5 @@
 .idea/
+.yalc/
 .history
 build/
 coverage/

src/components/HtmlInjection.tsx

@@ -1,28 +1,49 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react';
-import { useSyncedRef } from '@react-hookz/web';
-import { injectHtmlMarkup } from '../lib';
+import React, { HTMLAttributes, ScriptHTMLAttributes, useEffect } from 'react';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
     html: string;
-    id?: string;
-    className?: string;
     onError: () => void;
 }
 
-export const HtmlInjection: FunctionComponent<Props> = (props) => {
-    const { html, className, id } = props;
-    const freshProps = useSyncedRef<Props>(props);
-    const ref = useRef<HTMLDivElement>(null);
+export function HtmlInjection(props: Props) {
+    const { html, onError, ...attrs } = props;
 
+    useScripts(html, onError);
+
+    return <div {...attrs} dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+function useScripts(html: Props['html'], onError: Props['onError']) {
     useEffect(() => {
-        if (ref.current) {
-            injectHtmlMarkup({
-                html,
-                onError: () => freshProps.current.onError(),
-                target: ref.current,
-            });
-        }
+        const container = document.createElement('div');
+        container.innerHTML = html;
+
+        const scripts: ScriptHTMLAttributes<HTMLScriptElement>[] = Array.from(
+            container.getElementsByTagName('script'),
+        ).map((script) => {
+            return Array.from(script.attributes).reduce((agg, { name, value }) => ({ ...agg, [name]: value }), {});
+        });
+
+        container.remove();
+
+        scripts.forEach((attributes) => {
+            if (attributes.src && document.querySelector(`script[src="${attributes.src}"]`)) {
+                return;
+            }
+
+            const script = document.createElement('script');
+            setScriptAttributes(script, attributes);
+
+            script.addEventListener('error', onError);
+            document.body.appendChild(script);
+        });
+
+        iframely?.load();
+
+        return;
     }, [html]);
+}
 
-    return <div id={id} className={className} ref={ref} />;
-};
+function setScriptAttributes(script: HTMLScriptElement, attributes: ScriptHTMLAttributes<HTMLScriptElement>): void {
+    Object.entries(attributes).forEach(([name, value]) => script.setAttribute(name, value));
+}

src/components/Media/Media.tsx

@@ -34,7 +34,7 @@ export function Media({ className, image, style, title }: Props) {
                 playsInline
                 style={style}
                 title={title}
-                webkit-playsinline
+                webkit-playsinline="true"
             >
                 <source src={sourceWebm} type="video/webm" />
                 <source src={sourceMp4} type="video/mp4" />

src/elements/Embed/IframelyEmbed.scss

@@ -9,4 +9,8 @@
         border: 1px solid $color-error;
         border-radius: $border-radius-base;
     }
+
+    blockquote {
+        border-left: none;
+    }
 }

src/globals.d.ts

@@ -0,0 +1,5 @@
+interface Iframely {
+    load(): void;
+}
+
+declare const iframely: Iframely | undefined;

src/lib/index.ts

@@ -2,7 +2,6 @@ export { applyTransformations } from './applyTransformations';
 export { describeNode } from './describeNode';
 export { formatBytes } from './formatBytes';
 export { identity } from './identity';
-export { injectHtmlMarkup } from './injectHtmlMarkup';
 export { noop } from './noop';
 export { openWindow } from './openWindow';
 export { stringifyNode } from './stringifyNode';

tsconfig.json

@@ -29,5 +29,5 @@
 
     "include": ["./src"],
     "exclude": ["node_modules"],
-    "files": ["./src/@types/scss.d.ts", "./src/@types/svg.d.ts"]
+    "files": ["./src/@types/scss.d.ts", "./src/@types/svg.d.ts", "./src/globals.d.ts"]
 }