Replacing of rendering of components with Iframe to preview frontend and url tracking

[MAX-786]

Fixes #8 Fixes #7 Fixes #9 Fixes #12 Fixes #13 Fixes #17 Fixes #15 Fixes #18 Fixes #10

Usage

• Clone this repo and start volto using 'make start'
• Connect to your Plone backend eg. run plone-backend docker image
• Start frontend and fetch content using @plone/client. Make sure content folder structure should be same as it is stored in backend
• Type url in input field in adminUI to see the preview and click edit button to see sidebar.

Approach

• Customized to View.jsx & Form.jsx to Show iframe component.
• Editor provides the URL in the input field, and after Submit it will redirect the iframe as well adminUI to that particular page.
• If is in edit mode then , sidebar is updated with the content of the current page.
• The frontend used in current example: here

Problems

[djay]

@MAX-786 you got a video of it working where if you change pages in the frontend the sidebar changes so if.you click contents it is based on the current page you are looking at it.

[MAX-786]

@MAX-786 you got a video of it working where if you change pages in the frontend the sidebar changes so if.you click contents it is based on the current page you are looking at it.

Currently to change pages in the frontend you have to manually update the slug in the input field which will redirect you to that page in adminUI and this will update the sidebar too and if you click on the contents page it will show the contents of that pages.

https://github.com/collective/volto-hydra/assets/99530996/9f7c38a9-e2c3-4e76-b1c5-b1b72d63c717

I have also tried to update the adminUI when you move from one page to another inside iframe, this will send the postMessage to the parent frame with the updated url and parent listens to the messages and if the type of message is 'urlChange' it will update the adminUI url.

But the problem was frontend was setting the click event listener for each <a> tag. I am thinking to find the different way achieve this.

[djay]

https://stackoverflow.com/questions/2429045/iframe-src-change-event-detection

[MAX-786]

Yep, tried this earlier it was giving permission denied. I'll look more into it

[djay]

You might need to update CSP to allow it

On Mon, 3 June 2024, 10:38 pm Mohammad K. Hussain, @.***> wrote:

Yep, tried this earlier it was giving permission denied. I'll look more into it

— Reply to this email directly, view it on GitHub https://github.com/collective/volto-hydra/pull/38#issuecomment-2145533671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAKFZHDXP6IBFTQDT7FETLZFSEV7AVCNFSM6AAAAABIVC7GMSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBVGUZTGNRXGE . You are receiving this because you commented.Message ID: @.***>

[djay]

Sorry CORS. https://en.m.wikipedia.org/wiki/Same-origin_policy

[djay]

@MAX-786 just to be clear. Watching the url change is the only feasible way to solve this I think since you can't possibly know what kinds of ways the page will change. So it's a waste of time looking into a links. So you have to solve the CORS issue and that is probably needed going forward for the iframe bridge and other things anyway.

[MAX-786]

So it's a waste of time looking into a links. So you have to solve the CORS issue and that is probably needed going forward for the iframe bridge and other things anyway.

The CORS issue can be solved by allowing those origin explicitly. I'll push the code how i did it.

[MAX-786]

So iframeBridge would use postMessage which would enable 2 way comm. We can use that for tracking url changes in the iframe too. And use the message event to handle it. It is also updating the adminUI to show the content of the page which iframe has just navigated to.

https://github.com/collective/volto-hydra/assets/99530996/b591d964-9ccb-49d1-aedd-3868acca1c11

BUT for CORS, we should make sure to properly assign the targetOrgin in postMessage on frontend side and check the origin of message while handling messages in adminUI side. (For now hardcoded these but later on we can use env or anyother way to set them according to developer)

[djay]

Yes later on the ifrajebridge can we used to track the url changes but the idea is always to offer the option for the least amount of effort for the integrators part. The idea is still to offer a iframebridge free version that requires almost no integration code but still works but in a much more limited UX for the editor. So requiring the iframebridge for the most basic version is not ideal unless that is the only way.

[djay]

@MAX-786 in the video there seems to be a reload of the whole admin UI when the page changes. Why?

[MAX-786]

The idea is still to offer a iframebridge free version that requires almost no integration code but still works but in a much more limited UX for the editor. So requiring the iframebridge for the most basic version is not ideal unless that is the only way.

Yeah I looked but to access iframe.contentWindow both needs to be on same domain, which is not always true. Thats why this approach is what I thought would be feasible.

[MAX-786]

@MAX-786 in the video there seems to be a reload of the whole admin UI when the page changes. Why?

To update to the content of the adminUI, directly navigating it to the same path as of the iframe bcz as we discussed that we are assuming frontend would be folderish type. But to update the content of the adminUI without navigation, is by dispatching the redux action and updating the redux store, which will update the content page and sidebar also.

[djay]

@MAX-786 ok. If post message is the only way then that's how it will have to be. Please start to document what the integrator has to do to get this working in the readme.

The reload explanation I didn't understand. If the ifrsme page changes then the admin UI should change via redux and not a full ssr reload. If that's what you've done then great.

[MAX-786]

The reload explanation I didn't understand. If the ifrsme page changes then the admin UI should change via redux and not a full ssr reload. If that's what you've done then great.

For now, I am updating the adminUI url to the same as iframe by changing the host, and the content fetching on the adminUI is already done by itself based on updated URL. And yeah the redux approach what i said is I have done on different branch bcz there's some errors I am having, once they are fixed I'll update it replacing this approach.

something like this is happening right now in adminUI whenever iframe src is updated:

  const handleNavigateToUrl = (givenUrl = '') => {
    // Update adminUI URL with the new URL
    const formattedUrl = url ? new URL(url) : new URL(givenUrl);
    formattedUrl.host = 'localhost:3000';
    window.location.href = window.location.pathname.endsWith('/edit')
      ? `${formattedUrl.href}/edit`
      : formattedUrl.href;
  };

[djay]

@MAX-786 let me know when it works for any frontend, then can merge and deploy it

[MAX-786]

Addding this snippet in script tag or in layout.js of any frontend, will connect it with the adminUI. (assuming volto is running on 3000).

window.navigation.addEventListener("navigate", (event) => {
      parent.postMessage({type: 'URL_CHANGE', url: event.destination.url}, 'http://localhost:3000');
  })

[djay]

@MAX-786 I think you need to put this into the start of the iframe bridge. ie the instructions should be, add a script tag to load our iframebridge/connector and thats all you have to do. Can this js code be loaded from the demo server to being with or does it need to be a published npm package?

[djay]

@MAX-786 also this the place where instructions to the frontend developer/integrator should go. https://github.com/collective/volto-hydra/pull/38/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R3. in the readme.

[MAX-786]

Can this js code be loaded from the demo server to being with or does it need to be a published npm package?

It has to be added by integrator in the frontend and it doesn't need to be a package for now.

[MAX-786]

Please check this out, and let me know what do you think.

https://github.com/collective/volto-hydra/tree/update-readme

[stevepiercy]

Please check this out, and let me know what do you think.

https://github.com/collective/volto-hydra/tree/update-readme

@MAX-786 Iif you make a pull request against main from the update-readme branch, then people can provide a proper review.

[djay]

@MAX-786 yes it's a good start. but I'd suggest the following changes

• put what you need to make and deploy your frontend first. This is the most important information.
  • the curent code for enabling the editing is too complex. it should be just including a script. Remember the goal is always to make this easy for integrators so the less code and complexity and explanation then the better you are doing. it should be as easy as <script src="https://hydra.pretagov.com/editor.js"/>
• put in links to the roadmap to show what currently works and what doesn't. You might need to explain more explictly you can do at this point and how going forward more apis will be added to enable more editing experience.
• put in using https://hydra.pretagov.com (demo server) as the first option to test out against as it's simplest, then have building your own hydra as an alternative option.
• Put in the url of where you test frontend is deployed so people can test that without running anything local

[MAX-786]

@MAX-786 Iif you make a pull request against main from the update-readme branch, then people can provide a proper review.

Sure, thanks.

[MAX-786]

the curent code for enabling the editing is too complex. it should be just including a script. Remember the goal is always to make this easy for integrators so the less code and complexity and explanation then the better you are doing. it should be as easy as Githubissues.

Githubissues is a development platform for aggregating issues.