feat: static elements iframe rendering #715
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| // window.removeEventListener('message', onMessage); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
[1] Introducing a new event sent from the web app, that will set a flag similar to the editor mode to set it in read-only mode.
We will also set the mode to editor mode, so that we enable the iframe communication and don't fetch staff over the network
| @@ -38,6 +38,7 @@ export const ExperienceRoot = ({ | |||
| experience={experienceObject as Experience<EntityStore> | undefined} | |||
| visualEditorMode={visualEditorMode} | |||
| initialLocale={locale} | |||
| isReadOnlyMode={isReadOnlyMode} | |||
| /> | |||
There was a problem hiding this comment.
[2] For read-only we still render the VisualEditorRoot, but we set it into read-only
| experience={experience} | ||
| isReadOnlyMode={isReadOnlyMode} | ||
| visualEditorMode={visualEditorMode} | ||
| /> |
There was a problem hiding this comment.
[3] Pass it on to the Visual editor
| if (isReadOnlyMode) { | ||
| return <ReadOnlyRenderer />; | ||
| } | ||
|
|
There was a problem hiding this comment.
[4] Introducing a new Renderer that will handle elements diffently to the normal editor renderer
| @@ -0,0 +1,32 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
[5] This renderer will render the blocks directly, as we don't need the editor things like the dropzone and hover stuff.
| @@ -0,0 +1,116 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
[6] Mostly copy-pasted code from the useEditorSubscriber, excluding all the events that we are not interested in, like the drag and drop stuff, hover or select events.
this will mostly just listen to the component tree update events and will update the tree in here
| ...modifiedProps, | ||
| style: { ...sizeStyles, ...style }, | ||
| // forces the container elements to render without the dropzone | ||
| editorMode: false, |
There was a problem hiding this comment.
[7] Creating the element that will be rendered for this node. We set it here directly to editor mode as this would prevent elements like the container to not render the dropzone
| @@ -0,0 +1,53 @@ | |||
| import React, { useMemo, useRef } from 'react'; | |||
There was a problem hiding this comment.
[8] Mostly the same as the blocks for the delivery mode just getting the information differently as we are already in the editor mode land.
This might be abstracted and be shared with the delivery mode components ?
Purpose
Approach