POC: Feat/remove window parent #40
Conversation
|
@maarten2424 is attempting to deploy a commit to the Shopstory Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
This PR is a very very good attempt to clean up an important thing, great work!
FYI, There were a several reasons we didn't do communication between windows with Window.postMessage, but most of them don't apply now, they're historical (from Shopstory).
There's one big thing that must be remembered here: when postMessage is used a copy is created, and creating a copy of EditorContext is something that can't be done, there can be should be only context instance.
IMO the best way to approach this task correctly is to assume that in the canvas (child window with preview) there is no editorContext at all. Since there can be only one instance of editor context and it must live in parent window, then whatever exists in the child window shouldn't be named this way. After editorContext is removed from child window then it will trigger all types of errors across the system, which is good. Each one of them should be fixed by either:
- For events: adding new
postMessageevents instead of callingeditorContext.actionsoreditorContext.form.changeetc. - For data: instead of using
editorContext.form.valueslet's just pass the required values directly to a child window (there won't be many, probably 3-4) likeentry(which is used instead ofeditorContext.form.values) etc.
This approach is the best because it will automatically create a proper and minimal "surface area" between parent and child. Right now we're passing entire editorContext which is absolutely unnecessary, probably 2% of this context is used in a child.
Let me know if my explanation is clear.
| @@ -272,7 +272,7 @@ function RichTextEditor(props: RichTextProps) { | |||
|
|
|||
| if (event.data.type === "@easyblocks-editor/rich-text-changed") { | |||
| const { payload } = event.data; | |||
| const { editorContext } = (window.parent as any).editorWindowAPI; | |||
| const { editorContext } = (window as any).editorWindowAPI; | |||
There was a problem hiding this comment.
editorContext is used heavily in this file and it should be the instance from the editor, not the copy in canvas.
| type: "@easyblocks/init", | ||
| meta: JSON.stringify(meta), | ||
| compiled: JSON.stringify(renderableContent), | ||
| editorContext: JSON.stringify({ |
There was a problem hiding this comment.
The problem with postMessage is that it requires you to create serialized copies. In that case editorContext is well, a context, and there should be only one reference of it. If you use a copy of editor context in the canvas then it just can't work properly.
POC removing window.parent.editorWindowAPI
This removes
window.parent.editorWindowAPIin favour ofpostMessagefunctionality. This way the editor and the rendered page can be hosted on different domains.