Render Component with JavaScript.

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -20,8 +20,7 @@ function DataOptions(props = {}) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(async () => {
-    const data = await fetchDataOptions(state.dataName);
-    updateState(data);
+    await syncDataOptions(state.dataName);
   }, []);
 
   const handleCloseSidebarEscEvent = useCallback((e) => {
@@ -98,15 +97,7 @@ function DataOptions(props = {}) {
 
   async function changeDataOption(e) {
     const dataName = e.target.value;
-
-    const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
-    previewFrameUrl.searchParams.set('data', dataName);
-    previewFrameUrl.searchParams.set('iframe', 'true');
-
-    props.rootAttributes.previewFrame.src = previewFrameUrl.href;
-
-    const dataOption = await fetchDataOptions(dataName);
-    updateState(Object.assign({}, dataOption, {dataName}));
+    await syncDataOptions(dataName);
   }
 
   async function fetchDataOptions(name = 'default') {
@@ -138,6 +129,19 @@ function DataOptions(props = {}) {
 
     setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
   }
+
+  async function syncDataOptions(dataName) {
+    const dataOptions = await fetchDataOptions(dataName);
+    updateIframe(dataOptions);
+
+    const newState = Object.assign({}, dataOptions, {dataName});
+    updateState(newState);
+  }
+
+  function updateIframe(dataOptions) {
+    const previewIframe = props.rootAttributes.previewFrame;
+    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(dataOptions.data || {}), '*');
+  }
 }
 
 function copyToClipboard(e, context) {