inline_script: inline script code to excute in PWA APP

packages/pagebuilder/lib/ContentTypes/Html/html.js

@@ -4,6 +4,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { arrayOf, shape, string } from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import handleHtmlContentClick from '../../handleHtmlContentClick';
+import {useExecuteScripts} from '@magento/peregrine/lib/hooks/useExecuteScripts'
 
 const toHTML = str => ({ __html: str });
 
@@ -60,12 +61,13 @@ const Html = props => {
     const clickHandler = event => {
         handleHtmlContentClick(history, event);
     };
-
+    const setRef = useExecuteScripts(html);
     return (
         <div
+            ref={setRef}
             style={dynamicStyles}
             className={[classes.root, ...cssClasses].join(' ')}
-            dangerouslySetInnerHTML={toHTML(html)}
+          //  dangerouslySetInnerHTML={toHTML(html)}
             onClick={clickHandler}
             onKeyDown={clickHandler}
             role="presentation"

packages/peregrine/lib/hooks/useExecuteScripts.js

@@ -0,0 +1,65 @@
+import { useRef, useEffect } from 'react';
+import { nonceGenerator } from '../../lib/util/nonceGenerator';
+
+const removeHtmlComments = html => {
+    return html.replace(/<!--[\s\S]*?-->/g, '');
+};
+
+export const  useExecuteScripts = htmlContent => {
+    const containerRef = useRef(null);
+    const lastScriptTagRef = useRef(null);
+    const originalDocumentWrite = document.write;
+
+    useEffect(() => {
+        if (containerRef.current) {
+            /**
+             * Overriding the document.write function to make sure
+             * Javascript is writing the content in a place they intent to
+             * write instead of replacing the whole document.
+             *
+             */
+
+            document.write = function(content) {
+                console.log(lastScriptTagRef.current);
+                if (lastScriptTagRef.current) {
+                    const span = document.createElement('span');
+                    const scriptNode = lastScriptTagRef.current;
+                    span.innerHTML = content;
+                    console.log(scriptNode);
+                    if (scriptNode) scriptNode.after(span);
+                } else {
+                    originalDocumentWrite.call(document, content);
+                }
+            };
+
+            // Remove HTML comments
+            const contentWithoutComments = removeHtmlComments(htmlContent);
+            containerRef.current.innerHTML = contentWithoutComments;
+
+            const scriptTags = containerRef.current.querySelectorAll('script');
+
+            scriptTags.forEach(scriptTag => {
+                const newScript = document.createElement('script');
+                const nonce = nonceGenerator(24);
+                newScript.type = scriptTag.type || 'text/javascript';
+                newScript.setAttribute('nonce', nonce);
+
+                if (scriptTag.src) {
+                    newScript.src = scriptTag.src;
+                } else {
+                    newScript.textContent = scriptTag.innerHTML;
+                }
+
+                lastScriptTagRef.current = newScript;
+
+                scriptTag.replaceWith(newScript);
+            });
+        }
+
+        return () => {
+            document.write = originalDocumentWrite;
+        };
+    }, [htmlContent]);
+
+    return containerRef;
+};

packages/peregrine/lib/index.js

@@ -1,3 +1,4 @@
+import { from } from '@apollo/client';
 import * as RestApi from './RestApi';
 import * as Util from './util';
 
@@ -12,7 +13,7 @@ export { useScrollLock } from './hooks/useScrollLock';
 export { useSearchParam } from './hooks/useSearchParam';
 export { useSort } from './hooks/useSort';
 export { useTypePolicies } from './hooks/useTypePolicies';
-
+export { useExecuteScripts } from './hooks/useExecuteScripts'
 export {
     WindowSizeContextProvider,
     useWindowSize

packages/peregrine/lib/util/nonceGenerator.js

@@ -0,0 +1,6 @@
+// Function to generate a random nonce
+export const nonceGenerator = length => {
+    const array = new Uint8Array(length);
+    window.crypto.getRandomValues(array);
+    return btoa(String.fromCharCode.apply(null, array)).slice(0, length);
+};