diff --git a/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/UnsafeHTML.js b/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/UnsafeHTML.js index 06217903e6f962..d18602097c5447 100644 --- a/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/UnsafeHTML.js +++ b/modules/apps/layout/layout-content-page-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/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/fragment-content/FragmentContent.js b/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/fragment-content/FragmentContent.js index 6bbecc6967ac9d..6d0ef10765243c 100644 --- a/modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/fragment-content/FragmentContent.js +++ b/modules/apps/layout/layout-content-page-editor-web/src/main/resources/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} />