feat(editor): form-change event

Author: maarten2424

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

@@ -4,7 +4,7 @@ import { parseFocusedRichTextPartConfigPath } from "./parseRichTextPartConfigPat
 
 function getEditorSelectionFromFocusedFields(
   focusedFields: Array<string>,
-  form: any
+  formValues: any
 ): Selection {
   try {
     const anchorFocusedField = focusedFields[0];
@@ -26,7 +26,7 @@ function getEditorSelectionFromFocusedFields(
       focus: {
         offset: parsedFocusedField.range
           ? parsedFocusedField.range[1]
-          : dotNotationGet(form.values, focusFocusedField).value.length,
+          : dotNotationGet(formValues, focusFocusedField).value.length,
         path: parsedFocusedField.path,
       },
     };

packages/core/src/compiler/builtins/$richText/utils/getEditorSelectionFromFocusedFields.ts

@@ -3,6 +3,7 @@ import { dotNotationGet } from "@easyblocks/utils";
 import React, { ReactElement } from "react";
 import { InternalNoCodeComponentProps } from "../../../components/ComponentBuilder/ComponentBuilder";
 import { InlineTextarea } from "./InlineTextarea";
+import { useEasyblocksCanvasContext } from "../../../_internals";
 
 type TextProps = {
   value: string | undefined;
@@ -16,9 +17,10 @@ function TextEditor(props: TextProps) {
     __easyblocks: { path, runtime },
   } = props;
 
-  const { form } = (window.parent as any).editorWindowAPI.editorContext;
+  const { formValues } = useEasyblocksCanvasContext();
+
   const valuePath = `${path}.value`;
-  const configValue = dotNotationGet(form.values, valuePath);
+  const configValue = dotNotationGet(formValues, valuePath);
   const isLocalTextReference = configValue.id?.startsWith("local.");
 
   return (

packages/core/src/compiler/builtins/$text/$text.editor.tsx

@@ -3,6 +3,7 @@ import React, { ElementRef, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import TextareaAutosize from "react-textarea-autosize";
 import { useTextValue } from "../useTextValue";
+import { useEasyblocksCanvasContext } from "../../../_internals";
 
 interface InlineTextProps {
   path: string;
@@ -17,19 +18,21 @@ export function InlineTextarea({
 }: InlineTextProps) {
   const [isEnabled, setIsEnabled] = useState(false);
   const textAreaRef = useRef<ElementRef<"textarea">>(null);
+  const { formValues, locale, locales } = useEasyblocksCanvasContext();
 
-  const {
-    form,
-    contextParams: { locale },
-    locales,
-  } = (window.parent as any).editorWindowAPI.editorContext;
   const valuePath = `${path}.value`;
-  const value = dotNotationGet(form.values, valuePath);
+  const value = dotNotationGet(formValues, valuePath);
 
   const inputProps = useTextValue(
     value,
     (val: string | null) => {
-      form.change(valuePath, val);
+      window.parent.postMessage({
+        type: "@easyblocks-editor/form-change",
+        payload: {
+          key: valuePath,
+          value: val,
+        },
+      });
     },
     locale,
     locales,

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

@@ -18,11 +18,11 @@ type EasyblocksCanvasState = {
   externalData: FetchOutputResources | null;
   formValues: EditorContextType["form"]["values"] | null;
   definitions: EditorContextType["definitions"] | null;
-  locale: EditorContextType["contextParams"]["locale"] | null;
-  locales: EditorContextType["locales"] | null;
+  locale: EditorContextType["contextParams"]["locale"];
+  locales: EditorContextType["locales"];
   isEditing: EditorContextType["isEditing"];
   devices: EditorContextType["devices"] | null;
-  focussedField: EditorContextType["focussedField"] | null;
+  focussedField: EditorContextType["focussedField"];
 };
 
 const initialState: EasyblocksCanvasState = {
@@ -31,11 +31,11 @@ const initialState: EasyblocksCanvasState = {
   externalData: null,
   formValues: null,
   definitions: null,
-  locale: null,
-  locales: null,
+  locale: "",
+  locales: [],
   isEditing: false,
   devices: null,
-  focussedField: null,
+  focussedField: [],
 };
 
 const EasyblocksCanvasContext = createContext<

packages/core/src/components/EasyblocksCanvasProvider.tsx

@@ -136,6 +136,18 @@ type UndoEvent = MessageEvent<
     }
   >
 >;
+
+type FormChangeEvent = MessageEvent<
+  EasyblocksEditorEventData<
+    "@easyblocks-editor/form-change",
+    {
+      key: string;
+      value: any;
+      focussedField?: Array<string> | string;
+    }
+  >
+>;
+
 type RedoEvent = MessageEvent<
   EasyblocksEditorEventData<
     "@easyblocks-editor/redo",
@@ -193,4 +205,5 @@ export type {
   UndoEvent,
   RedoEvent,
   SetFocussedFieldEvent,
+  FormChangeEvent,
 };

packages/core/src/events.ts

@@ -38,12 +38,10 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
         if (window.parent !== window.self && window.parent.isShopstoryEditor) {
           setSelectedWindowToChild();
         } else {
-          // setSelectedWindowToParent();
-          setSelectedWindowToChild();
+          setSelectedWindowToParent();
         }
       } catch (error) {
-        // setSelectedWindowToParent();
-        setSelectedWindowToChild();
+        setSelectedWindowToParent();
       }
     }
   }, []);

packages/editor/src/EasyblocksEditor.tsx

@@ -27,6 +27,7 @@ import {
   ChangeResponsiveEvent,
   CompilationContextType,
   ComponentPickerOpenedEvent,
+  FormChangeEvent,
   ItemInsertedEvent,
   ItemMovedEvent,
   RedoEvent,
@@ -894,7 +895,24 @@ const EditorContent = ({
         | SetFocussedFieldEvent
         | UndoEvent
         | RedoEvent
+        | FormChangeEvent
     ) {
+      if (event.data.type === "@easyblocks-editor/form-change") {
+        if (event.data.payload.focussedField) {
+          actions.runChange(() => {
+            if (
+              event.data.type === "@easyblocks-editor/form-change" &&
+              Array.isArray(event.data.payload.focussedField)
+            ) {
+              form.change(event.data.payload.key, event.data.payload.value);
+              return event.data.payload.focussedField;
+            }
+          });
+        } else {
+          form.change(event.data.payload.key, event.data.payload.value);
+        }
+      }
+
       if (event.data.type === "@easyblocks-editor/focus-field") {
         handleSetFocussedField(event.data.payload.target);
       }