feat(canvas): fix types

Author: maarten2424

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

@@ -71,7 +71,7 @@ interface RichTextProps extends InternalNoCodeComponentProps {
 }
 
 function RichTextEditor(props: RichTextProps) {
-  const { editorContext } = (window.parent as any).editorWindowAPI;
+  // const { editorContext } = (window.parent as any).editorWindowAPI;
   const { formValues, locales, locale, focussedField, definitions } =
     useEasyblocksCanvasContext();
 
@@ -754,7 +754,10 @@ function RichTextEditor(props: RichTextProps) {
   function handleEditableCopy(event: React.ClipboardEvent) {
     const selectedRichTextComponentConfig = getRichTextComponentConfigFragment(
       richTextConfig,
-      editorContext
+      focussedField,
+      locale,
+      formValues,
+      definitions
     );
 
     event.clipboardData.setData(
@@ -775,8 +778,9 @@ function RichTextEditor(props: RichTextProps) {
       event.preventDefault();
 
       const nextSlateValue = convertRichTextElementsToEditorValue(
-        duplicateConfig(selectedRichTextComponentConfig, editorContext)
-          .elements[locale]
+        duplicateConfig(selectedRichTextComponentConfig, definitions).elements[
+          locale
+        ]
       );
 
       const temporaryEditor = createTemporaryEditor(editor);

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

@@ -11,34 +11,35 @@ import { stripRichTextPartSelection } from "./stripRichTextTextPartSelection";
 
 function getRichTextComponentConfigFragment(
   sourceRichTextComponentConfig: RichTextComponentConfig,
-  editorContext: EditorContextType
+  focussedField: EditorContextType["focussedField"],
+  locale: EditorContextType["contextParams"]["locale"],
+  formValues: EditorContextType["form"]["values"],
+  definitions: EditorContextType["definitions"]
 ): RichTextComponentConfig & {
   _itemProps?: Record<string, unknown>;
 } {
-  const { focussedField, form, contextParams } = editorContext;
-
   const newRichTextComponentConfig: RichTextComponentConfig = {
     ...sourceRichTextComponentConfig,
     elements: {
-      [contextParams.locale]: [],
+      [locale]: [],
     },
   };
 
   focussedField.forEach((focusedField) => {
     const textPartConfig: RichTextPartComponentConfig = get(
-      form.values,
+      formValues,
       stripRichTextPartSelection(focusedField)
     );
 
     const { path, range } = parseFocusedRichTextPartConfigPath(focusedField);
 
-    const newTextPartConfig = duplicateConfig(textPartConfig, editorContext);
+    const newTextPartConfig = duplicateConfig(textPartConfig, definitions);
 
     if (range) {
       newTextPartConfig.value = textPartConfig.value.slice(...range);
     }
 
-    let lastParentConfigPath = `elements.${contextParams.locale}`;
+    let lastParentConfigPath = `elements.${locale}`;
 
     path.slice(0, -1).forEach((pathIndex, index) => {
       let currentConfigPath = lastParentConfigPath;

packages/core/src/compiler/duplicateConfig.ts

@@ -2,11 +2,11 @@ import { deepClone, uniqueId } from "@easyblocks/utils";
 import { NoCodeComponentEntry } from "../types";
 import { configTraverse } from "./configTraverse";
 import { traverseComponents } from "./traverseComponents";
-import { CompilationContextType } from "./types";
+import { AnyContextWithDefinitions } from "./types";
 
 export function duplicateConfig<
   ConfigType extends NoCodeComponentEntry = NoCodeComponentEntry
->(inputConfig: ConfigType, compilationContext: CompilationContextType) {
+>(inputConfig: ConfigType, compilationContext: AnyContextWithDefinitions) {
   // deep copy first
   const config = deepClone(inputConfig);
 

packages/core/src/compiler/traverseComponents.ts

@@ -1,7 +1,7 @@
 import { NoCodeComponentEntry } from "../types";
 import { findComponentDefinition } from "./findComponentDefinition";
 import { isSchemaPropComponent } from "./schema";
-import { CompilationContextType } from "./types";
+import { AnyContextWithDefinitions } from "./types";
 
 type TraverseComponentsCallback = (arg: {
   path: string;
@@ -12,15 +12,15 @@ type TraverseComponentsCallback = (arg: {
  */
 function traverseComponents(
   config: NoCodeComponentEntry,
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback
 ): void {
   traverseComponentsInternal(config, context, callback, "");
 }
 
 function traverseComponentsArray(
   array: NoCodeComponentEntry[],
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback,
   path: string
 ) {
@@ -31,7 +31,7 @@ function traverseComponentsArray(
 
 function traverseComponentsInternal(
   componentConfig: NoCodeComponentEntry,
-  context: CompilationContextType,
+  context: AnyContextWithDefinitions,
   callback: TraverseComponentsCallback,
   path: string
 ) {

packages/core/src/compiler/types.ts

@@ -168,3 +168,7 @@ export type EditorContextType = CompilationContextType & {
   actions: EditorActions;
   templates?: Template[];
 };
+
+export type AnyContextWithDefinitions = {
+  definitions: InternalComponentDefinitions;
+};

packages/editor/src/Editor.tsx

@@ -873,7 +873,6 @@ const EditorContent = ({
   }, []);
 
   useEffect(() => {
-    sendCanvasData();
     if (window.editorWindowAPI.onUpdate) {
       window.editorWindowAPI.onUpdate();
     }
@@ -1124,6 +1123,11 @@ const EditorContent = ({
                   height={iframeSize.height}
                   transform={iframeSize.transform}
                   containerRef={iframeContainerRef}
+                  onIframeLoaded={() => {
+                    setTimeout(() => {
+                      sendCanvasData();
+                    }, 10);
+                  }}
                 />
                 {isEditing && (
                   <SelectionFrame

packages/editor/src/EditorIframe.tsx

@@ -10,6 +10,7 @@ interface EditorIframeWrapperProps {
   height: number;
   transform: string;
   containerRef: React.RefObject<HTMLDivElement>;
+  onIframeLoaded?: () => void;
 }
 
 function EditorIframe({
@@ -19,11 +20,15 @@ function EditorIframe({
   height,
   transform,
   containerRef,
+  onIframeLoaded,
 }: EditorIframeWrapperProps) {
   const [isIframeReady, setIframeReady] = useState(false);
 
   const handleIframeLoaded = () => {
     setIframeReady(true);
+    if (onIframeLoaded) {
+      onIframeLoaded();
+    }
   };
 
   useWindowKeyDown("z", onEditorHistoryUndo, {