fix(editor): use loaded postmessage event for initialization

easyblockshq · Apr 30, 2024 · 3c8dd71 · 3c8dd71
1 parent c16ff45
commit 3c8dd71
Show file tree

Hide file tree

Showing 11 changed files with 429 additions and 158 deletions.
diff --git a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
@@ -85,12 +85,15 @@ function RichTextEditor(props: RichTextProps) {
   // } = editorContext;
 
   const setFocussedField = (field: Array<string> | string) => {
-    window.parent.postMessage({
-      type: "@easyblocks-editor/focus-field",
-      payload: {
-        target: field,
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/focus-field",
+        payload: {
+          target: field,
+        },
       },
-    });
+      "*"
+    );
   };
 
   const {
@@ -263,13 +266,16 @@ function RichTextEditor(props: RichTextProps) {
           );
           // form.change(path, nextRichTextElement);
 
-          window.parent.postMessage({
-            type: "@easyblocks-editor/form-change",
-            payload: {
-              key: path,
-              value: nextRichTextElement,
+          window.parent.postMessage(
+            {
+              type: "@easyblocks-editor/form-change",
+              payload: {
+                key: path,
+                value: nextRichTextElement,
+              },
             },
-          });
+            "*"
+          );
         }
       }
     },
@@ -349,14 +355,17 @@ function RichTextEditor(props: RichTextProps) {
             getAbsoluteRichTextPartPath(focusedRichTextPart, path, locale)
         );
 
-        window.parent.postMessage({
-          type: "@easyblocks-editor/form-change",
-          payload: {
-            key: path,
-            value: newRichTextElement,
-            focussedField: newFocusedFields,
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: newRichTextElement,
+              focussedField: newFocusedFields,
+            },
           },
-        });
+          "*"
+        );
       }
     }
 
@@ -544,22 +553,25 @@ function RichTextEditor(props: RichTextProps) {
 
       previousRichTextComponentConfig.current = newRichTextElement;
 
-      window.parent.postMessage({
-        type: "@easyblocks-editor/form-change",
-        payload: {
-          key: path,
-          value: newRichTextElement,
-          ...(editor.selection
-            ? {
-                focussedField: getFocusedFieldsFromSlateSelection(
-                  editor,
-                  path,
-                  locale
-                ),
-              }
-            : {}),
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: path,
+            value: newRichTextElement,
+            ...(editor.selection
+              ? {
+                  focussedField: getFocusedFieldsFromSlateSelection(
+                    editor,
+                    path,
+                    locale
+                  ),
+                }
+              : {}),
+          },
         },
-      });
+        "*"
+      );
     }, RICH_TEXT_CONFIG_SYNC_THROTTLE_TIMEOUT),
     [isConfigChanged, locale]
   );
@@ -661,13 +673,16 @@ function RichTextEditor(props: RichTextProps) {
 
         // form.change(path, nextRichTextComponentConfig);
 
-        window.parent.postMessage({
-          type: "@easyblocks-editor/form-change",
-          payload: {
-            key: path,
-            value: nextRichTextComponentConfig,
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: nextRichTextComponentConfig,
+            },
           },
-        });
+          "*"
+        );
       } else {
         // If current and fallback value is missing we have:
         // - empty Slate value
@@ -679,13 +694,16 @@ function RichTextEditor(props: RichTextProps) {
             editor.children as Array<BlockElement>
           );
         // form.change(path, nextRichTextComponentConfig);
-        window.parent.postMessage({
-          type: "@easyblocks-editor/form-change",
-          payload: {
-            key: path,
-            value: nextRichTextComponentConfig,
+        window.parent.postMessage(
+          {
+            type: "@easyblocks-editor/form-change",
+            payload: {
+              key: path,
+              value: nextRichTextComponentConfig,
+            },
           },
-        });
+          "*"
+        );
       }
 
       previousRichTextComponentConfig.current = nextRichTextComponentConfig;
@@ -801,18 +819,21 @@ function RichTextEditor(props: RichTextProps) {
       //   return nextFocusedFields;
       // });
 
-      window.parent.postMessage({
-        type: "@easyblocks-editor/form-change",
-        payload: {
-          key: richTextElementsConfigPath,
-          value: nextElements,
-          focussedField: getFocusedFieldsFromSlateSelection(
-            temporaryEditor,
-            path,
-            locale
-          ),
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: richTextElementsConfigPath,
+            value: nextElements,
+            focussedField: getFocusedFieldsFromSlateSelection(
+              temporaryEditor,
+              path,
+              locale
+            ),
+          },
         },
-      });
+        "*"
+      );
 
       lastChangeReason.current = "paste";
     } else if (

diff --git a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
@@ -26,13 +26,16 @@ export function InlineTextarea({
   const inputProps = useTextValue(
     value,
     (val: string | null) => {
-      window.parent.postMessage({
-        type: "@easyblocks-editor/form-change",
-        payload: {
-          key: valuePath,
-          value: val,
+      window.parent.postMessage(
+        {
+          type: "@easyblocks-editor/form-change",
+          payload: {
+            key: valuePath,
+            value: val,
+          },
         },
-      });
+        "*"
+      );
     },
     locale,
     locales,

diff --git a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
@@ -273,15 +273,16 @@ function getCompiledSubcomponents(
                     name: path,
                     index: 0,
                     block: event.data.payload.config,
-                  })
+                  }),
+                  "*"
                 );
               }
             }
           }
 
           window.addEventListener("message", handleComponentPickerCloseMessage);
 
-          window.parent.postMessage(componentPickerOpened(originalPath));
+          window.parent.postMessage(componentPickerOpened(originalPath), "*");
         }}
         meta={meta}
       />,

diff --git a/packages/core/src/events.ts b/packages/core/src/events.ts
@@ -137,6 +137,15 @@ type UndoEvent = MessageEvent<
   >
 >;
 
+type CanvasLoadedEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/canvas-loaded",
+    {
+      type: "@easyblocks-editor/canvas-loaded";
+    }
+  >
+>;
+
 type FormChangeEvent = MessageEvent<
   EasyblocksEditorEventData<
     "@easyblocks-editor/form-change",
@@ -206,4 +215,5 @@ export type {
   RedoEvent,
   SetFocussedFieldEvent,
   FormChangeEvent,
+  CanvasLoadedEvent,
 };
diff --git a/packages/editor/src/CanvasRoot/CanvasRoot.tsx b/packages/editor/src/CanvasRoot/CanvasRoot.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useEasyblocksCanvasContext } from "@easyblocks/core/_internals";
+import { useCanvasGlobalKeyboardShortcuts } from "../useCanvasGlobalKeyboardShortcuts";
 
 type CanvasRootProps = {
   children: ReactNode;
@@ -8,16 +9,21 @@ type CanvasRootProps = {
 function CanvasRoot(props: CanvasRootProps) {
   const { isEditing } = useEasyblocksCanvasContext();
 
+  useCanvasGlobalKeyboardShortcuts();
+
   return (
     <div
       onClick={() => {
         if (isEditing) {
-          window.parent.postMessage({
-            type: "@easyblocks-editor/focus-field",
-            payload: {
-              target: [],
+          window.parent.postMessage(
+            {
+              type: "@easyblocks-editor/focus-field",
+              payload: {
+                target: [],
+              },
             },
-          });
+            "*"
+          );
         }
       }}
     >

diff --git a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
@@ -195,12 +195,15 @@ export function BlocksControls({
 
     const nextFocusedField = getNextFocusedField();
 
-    window.parent.postMessage({
-      type: "@easyblocks-editor/focus-field",
-      payload: {
-        target: nextFocusedField,
+    window.parent.postMessage(
+      {
+        type: "@easyblocks-editor/focus-field",
+        payload: {
+          target: nextFocusedField,
+        },
       },
-    });
+      "*"
+    );
 
     if (isMultipleSelection) {
       document.getSelection()?.removeAllRanges();