LPS-112034 Execute fragments' scripts inside frame context

liferay · Apr 22, 2020 · 26e80ce · 26e80ce
1 parent cc2213a
commit 26e80ce
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/...editor-web/src/main/resources/META-INF/resources/page_editor/app/components/UnsafeHTML.js b/...editor-web/src/main/resources/META-INF/resources/page_editor/app/components/UnsafeHTML.js
@@ -12,7 +12,6 @@
  * details.
  */
 
-import {globalEval} from 'metal-dom';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -40,6 +39,38 @@ export default class UnsafeHTML extends React.PureComponent {
 		}
 	}
 
+	/**
+	 * Looks for script tags inside ref and executes
+	 * them inside this.props.globalContext.
+	 */
+	_runRefScripts() {
+		const doc = this.props.globalContext.document;
+
+		const scriptElements = Array.from(
+			this.state.ref.querySelectorAll('script')
+		);
+
+		const runNextScript = () => {
+			if (scriptElements.length) {
+				const nextScriptElement = doc.createElement('script');
+				const prevScriptElement = scriptElements.shift();
+
+				nextScriptElement.appendChild(
+					doc.createTextNode(prevScriptElement.innerHTML)
+				);
+
+				prevScriptElement.parentNode.replaceChild(
+					nextScriptElement,
+					prevScriptElement
+				);
+
+				requestAnimationFrame(runNextScript);
+			}
+		};
+
+		runNextScript();
+	}
+
 	/**
 	 * Syncs ref innerHTML and recreates portals.
 	 *
@@ -57,7 +88,7 @@ export default class UnsafeHTML extends React.PureComponent {
 				portals: this.props.getPortals(ref),
 			},
 			() => {
-				globalEval.runScriptsInElement(ref);
+				this._runRefScripts();
 				this.props.onRender(ref);
 			}
 		);
@@ -122,6 +153,7 @@ UnsafeHTML.defaultProps = {
 	className: '',
 	contentRef: null,
 	getPortals: () => [],
+	globalContext: window,
 	markup: '',
 	onRender: () => {},
 };
@@ -134,6 +166,7 @@ UnsafeHTML.propTypes = {
 		PropTypes.shape({current: PropTypes.object}),
 	]),
 	getPortals: PropTypes.func,
+	globalContext: PropTypes.object,
 	markup: PropTypes.string,
 	onRender: PropTypes.func,
 };

diff --git a/...sources/META-INF/resources/page_editor/app/components/fragment-content/FragmentContent.js b/...sources/META-INF/resources/page_editor/app/components/fragment-content/FragmentContent.js
@@ -27,6 +27,7 @@ import selectSegmentsExperienceId from '../../selectors/selectSegmentsExperience
 import FragmentService from '../../services/FragmentService';
 import {useDispatch, useSelector} from '../../store/index';
 import {useGetFieldValue} from '../CollectionItemContext';
+import {useFrameContext} from '../Frame';
 import Layout from '../Layout';
 import UnsafeHTML from '../UnsafeHTML';
 import {
@@ -45,6 +46,7 @@ const FragmentContent = React.forwardRef(
 		const dispatch = useDispatch();
 		const isMounted = useIsMounted();
 		const editableProcessorUniqueId = useEditableProcessorUniqueId();
+		const frameContext = useFrameContext();
 		const setEditableProcessorUniqueId = useSetEditableProcessorUniqueId();
 		const canUpdateLayoutContent = useSelector(
 			selectCanUpdateLayoutContent
@@ -232,6 +234,7 @@ const FragmentContent = React.forwardRef(
 						})}
 						contentRef={ref}
 						getPortals={getPortals}
+						globalContext={frameContext || window}
 						markup={content}
 						onRender={updateEditables}
 					/>