Skip to content

Commit d708b88

Browse files
maarten2424maarten2424
committed
fix(editor): use loaded postmessage event for initialization
1 parent c16ff45 commit d708b88

File tree

11 files changed

+483
-159
lines changed

11 files changed

+483
-159
lines changed

‎packages/core/src/compiler/builtins/$richText/$richText.editor.tsx‎

Lines changed: 77 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,15 @@ function RichTextEditor(props: RichTextProps) {
8585
// } = editorContext;
8686

8787
const setFocussedField = (field: Array<string> | string) => {
88-
window.parent.postMessage({
89-
type: "@easyblocks-editor/focus-field",
90-
payload: {
91-
target: field,
88+
window.parent.postMessage(
89+
{
90+
type: "@easyblocks-editor/focus-field",
91+
payload: {
92+
target: field,
93+
},
9294
},
93-
});
95+
"*"
96+
);
9497
};
9598

9699
const {
@@ -263,13 +266,16 @@ function RichTextEditor(props: RichTextProps) {
263266
);
264267
// form.change(path, nextRichTextElement);
265268

266-
window.parent.postMessage({
267-
type: "@easyblocks-editor/form-change",
268-
payload: {
269-
key: path,
270-
value: nextRichTextElement,
269+
window.parent.postMessage(
270+
{
271+
type: "@easyblocks-editor/form-change",
272+
payload: {
273+
key: path,
274+
value: nextRichTextElement,
275+
},
271276
},
272-
});
277+
"*"
278+
);
273279
}
274280
}
275281
},
@@ -349,14 +355,17 @@ function RichTextEditor(props: RichTextProps) {
349355
getAbsoluteRichTextPartPath(focusedRichTextPart, path, locale)
350356
);
351357

352-
window.parent.postMessage({
353-
type: "@easyblocks-editor/form-change",
354-
payload: {
355-
key: path,
356-
value: newRichTextElement,
357-
focussedField: newFocusedFields,
358+
window.parent.postMessage(
359+
{
360+
type: "@easyblocks-editor/form-change",
361+
payload: {
362+
key: path,
363+
value: newRichTextElement,
364+
focussedField: newFocusedFields,
365+
},
358366
},
359-
});
367+
"*"
368+
);
360369
}
361370
}
362371

@@ -544,22 +553,25 @@ function RichTextEditor(props: RichTextProps) {
544553

545554
previousRichTextComponentConfig.current = newRichTextElement;
546555

547-
window.parent.postMessage({
548-
type: "@easyblocks-editor/form-change",
549-
payload: {
550-
key: path,
551-
value: newRichTextElement,
552-
...(editor.selection
553-
? {
554-
focussedField: getFocusedFieldsFromSlateSelection(
555-
editor,
556-
path,
557-
locale
558-
),
559-
}
560-
: {}),
556+
window.parent.postMessage(
557+
{
558+
type: "@easyblocks-editor/form-change",
559+
payload: {
560+
key: path,
561+
value: newRichTextElement,
562+
...(editor.selection
563+
? {
564+
focussedField: getFocusedFieldsFromSlateSelection(
565+
editor,
566+
path,
567+
locale
568+
),
569+
}
570+
: {}),
571+
},
561572
},
562-
});
573+
"*"
574+
);
563575
}, RICH_TEXT_CONFIG_SYNC_THROTTLE_TIMEOUT),
564576
[isConfigChanged, locale]
565577
);
@@ -661,13 +673,16 @@ function RichTextEditor(props: RichTextProps) {
661673

662674
// form.change(path, nextRichTextComponentConfig);
663675

664-
window.parent.postMessage({
665-
type: "@easyblocks-editor/form-change",
666-
payload: {
667-
key: path,
668-
value: nextRichTextComponentConfig,
676+
window.parent.postMessage(
677+
{
678+
type: "@easyblocks-editor/form-change",
679+
payload: {
680+
key: path,
681+
value: nextRichTextComponentConfig,
682+
},
669683
},
670-
});
684+
"*"
685+
);
671686
} else {
672687
// If current and fallback value is missing we have:
673688
// - empty Slate value
@@ -679,13 +694,16 @@ function RichTextEditor(props: RichTextProps) {
679694
editor.children as Array<BlockElement>
680695
);
681696
// form.change(path, nextRichTextComponentConfig);
682-
window.parent.postMessage({
683-
type: "@easyblocks-editor/form-change",
684-
payload: {
685-
key: path,
686-
value: nextRichTextComponentConfig,
697+
window.parent.postMessage(
698+
{
699+
type: "@easyblocks-editor/form-change",
700+
payload: {
701+
key: path,
702+
value: nextRichTextComponentConfig,
703+
},
687704
},
688-
});
705+
"*"
706+
);
689707
}
690708

691709
previousRichTextComponentConfig.current = nextRichTextComponentConfig;
@@ -801,18 +819,21 @@ function RichTextEditor(props: RichTextProps) {
801819
// return nextFocusedFields;
802820
// });
803821

804-
window.parent.postMessage({
805-
type: "@easyblocks-editor/form-change",
806-
payload: {
807-
key: richTextElementsConfigPath,
808-
value: nextElements,
809-
focussedField: getFocusedFieldsFromSlateSelection(
810-
temporaryEditor,
811-
path,
812-
locale
813-
),
822+
window.parent.postMessage(
823+
{
824+
type: "@easyblocks-editor/form-change",
825+
payload: {
826+
key: richTextElementsConfigPath,
827+
value: nextElements,
828+
focussedField: getFocusedFieldsFromSlateSelection(
829+
temporaryEditor,
830+
path,
831+
locale
832+
),
833+
},
814834
},
815-
});
835+
"*"
836+
);
816837

817838
lastChangeReason.current = "paste";
818839
} else if (

‎packages/core/src/compiler/builtins/$text/InlineTextarea.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,16 @@ export function InlineTextarea({
2626
const inputProps = useTextValue(
2727
value,
2828
(val: string | null) => {
29-
window.parent.postMessage({
30-
type: "@easyblocks-editor/form-change",
31-
payload: {
32-
key: valuePath,
33-
value: val,
29+
window.parent.postMessage(
30+
{
31+
type: "@easyblocks-editor/form-change",
32+
payload: {
33+
key: valuePath,
34+
value: val,
35+
},
3436
},
35-
});
37+
"*"
38+
);
3639
},
3740
locale,
3841
locales,

‎packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,15 +273,16 @@ function getCompiledSubcomponents(
273273
name: path,
274274
index: 0,
275275
block: event.data.payload.config,
276-
})
276+
}),
277+
"*"
277278
);
278279
}
279280
}
280281
}
281282

282283
window.addEventListener("message", handleComponentPickerCloseMessage);
283284

284-
window.parent.postMessage(componentPickerOpened(originalPath));
285+
window.parent.postMessage(componentPickerOpened(originalPath), "*");
285286
}}
286287
meta={meta}
287288
/>,

‎packages/core/src/events.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,55 @@ type UndoEvent = MessageEvent<
137137
>
138138
>;
139139

140+
type CanvasLoadedEvent = MessageEvent<
141+
EasyblocksEditorEventData<
142+
"@easyblocks-editor/canvas-loaded",
143+
{
144+
type: "@easyblocks-editor/canvas-loaded";
145+
}
146+
>
147+
>;
148+
149+
type RemoveItemsEvent = MessageEvent<
150+
EasyblocksEditorEventData<
151+
"@easyblocks-editor/remove-items",
152+
{
153+
type: "@easyblocks-editor/remove-items";
154+
paths: Array<string>;
155+
}
156+
>
157+
>;
158+
159+
type PasteItemsEvent = MessageEvent<
160+
EasyblocksEditorEventData<
161+
"@easyblocks-editor/paste-items",
162+
{
163+
type: "@easyblocks-editor/paste-items";
164+
configs: any;
165+
}
166+
>
167+
>;
168+
169+
type MoveItemsEvent = MessageEvent<
170+
EasyblocksEditorEventData<
171+
"@easyblocks-editor/move-items",
172+
{
173+
type: "@easyblocks-editor/move-items";
174+
paths: Array<string>;
175+
direction: "top" | "right" | "bottom" | "left";
176+
}
177+
>
178+
>;
179+
180+
type LogSelectedEvent = MessageEvent<
181+
EasyblocksEditorEventData<
182+
"@easyblocks-editor/log-selected-items",
183+
{
184+
type: "@easyblocks-editor/log-selected-items";
185+
}
186+
>
187+
>;
188+
140189
type FormChangeEvent = MessageEvent<
141190
EasyblocksEditorEventData<
142191
"@easyblocks-editor/form-change",
@@ -206,4 +255,9 @@ export type {
206255
RedoEvent,
207256
SetFocussedFieldEvent,
208257
FormChangeEvent,
258+
CanvasLoadedEvent,
259+
RemoveItemsEvent,
260+
PasteItemsEvent,
261+
MoveItemsEvent,
262+
LogSelectedEvent,
209263
};

‎packages/editor/src/CanvasRoot/CanvasRoot.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { ReactNode } from "react";
22
import { useEasyblocksCanvasContext } from "@easyblocks/core/_internals";
3+
import { useCanvasGlobalKeyboardShortcuts } from "../useCanvasGlobalKeyboardShortcuts";
34

45
type CanvasRootProps = {
56
children: ReactNode;
@@ -8,16 +9,21 @@ type CanvasRootProps = {
89
function CanvasRoot(props: CanvasRootProps) {
910
const { isEditing } = useEasyblocksCanvasContext();
1011

12+
useCanvasGlobalKeyboardShortcuts();
13+
1114
return (
1215
<div
1316
onClick={() => {
1417
if (isEditing) {
15-
window.parent.postMessage({
16-
type: "@easyblocks-editor/focus-field",
17-
payload: {
18-
target: [],
18+
window.parent.postMessage(
19+
{
20+
type: "@easyblocks-editor/focus-field",
21+
payload: {
22+
target: [],
23+
},
1924
},
20-
});
25+
"*"
26+
);
2127
}
2228
}}
2329
>

‎packages/editor/src/EditableComponentBuilder/BlockControls.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -195,12 +195,15 @@ export function BlocksControls({
195195

196196
const nextFocusedField = getNextFocusedField();
197197

198-
window.parent.postMessage({
199-
type: "@easyblocks-editor/focus-field",
200-
payload: {
201-
target: nextFocusedField,
198+
window.parent.postMessage(
199+
{
200+
type: "@easyblocks-editor/focus-field",
201+
payload: {
202+
target: nextFocusedField,
203+
},
202204
},
203-
});
205+
"*"
206+
);
204207

205208
if (isMultipleSelection) {
206209
document.getSelection()?.removeAllRanges();

0 commit comments

Comments
 (0)