From 4d4a81ceffe16fe15f1267079967df57713ad069 Mon Sep 17 00:00:00 2001
From: Maarten Vleugels <maarten@swell.is>
Date: Mon, 17 Jun 2024 16:37:03 +0100
Subject: [PATCH] feat(editor) include query parameters as editor params

---
 packages/editor/src/EasyblocksEditor.tsx     |  5 +++++
 packages/editor/src/EasyblocksEditorProps.ts |  5 +++++
 packages/editor/src/EasyblocksParent.tsx     | 19 ++++++++++++++-----
 packages/editor/src/Editor.tsx               |  6 ++++--
 packages/editor/src/useDataSaver.ts          |  4 +++-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/EasyblocksEditor.tsx b/packages/editor/src/EasyblocksEditor.tsx
index be269fa8..0d4b1b25 100644
--- a/packages/editor/src/EasyblocksEditor.tsx
+++ b/packages/editor/src/EasyblocksEditor.tsx
@@ -62,6 +62,11 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
           onExternalDataChange={props.onExternalDataChange ?? (() => ({}))}
           widgets={props.widgets}
           components={props.components}
+          readOnly={props.readOnly}
+          locale={props.locale}
+          documentId={props.documentId}
+          rootTemplate={props.rootTemplate}
+          rootComponent={props.rootComponent}
         />
       )}
 
diff --git a/packages/editor/src/EasyblocksEditorProps.ts b/packages/editor/src/EasyblocksEditorProps.ts
index 00c69611..0916f55c 100644
--- a/packages/editor/src/EasyblocksEditorProps.ts
+++ b/packages/editor/src/EasyblocksEditorProps.ts
@@ -25,4 +25,9 @@ export type EasyblocksEditorProps = {
   >;
 
   __debug?: boolean;
+  rootTemplate?: string;
+  rootComponent?: string;
+  locale?: string;
+  documentId?: string;
+  readOnly?: boolean;
 };
diff --git a/packages/editor/src/EasyblocksParent.tsx b/packages/editor/src/EasyblocksParent.tsx
index 033e3cdd..c22e525b 100644
--- a/packages/editor/src/EasyblocksParent.tsx
+++ b/packages/editor/src/EasyblocksParent.tsx
@@ -31,6 +31,11 @@ type EasyblocksParentProps = {
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
   components?: Record<string, ComponentType<any>>;
+  locale?: string;
+  documentId?: string;
+  rootComponent?: string;
+  rootTemplate?: string;
+  readOnly?: boolean;
 };
 
 const shouldForwardProp: ShouldForwardProp<"web"> = (propName, target) => {
@@ -70,11 +75,15 @@ export function EasyblocksParent(props: EasyblocksParentProps) {
           />
           <Editor
             config={props.config}
-            locale={editorSearchParams.locale ?? undefined}
-            readOnly={editorSearchParams.readOnly ?? true}
-            documentId={editorSearchParams.documentId}
-            rootComponentId={editorSearchParams.rootComponentId ?? null}
-            rootTemplateId={editorSearchParams.rootTemplateId}
+            locale={props.locale || editorSearchParams.locale || undefined}
+            readOnly={props.readOnly ?? editorSearchParams.readOnly ?? true}
+            documentId={props.documentId ?? editorSearchParams.documentId}
+            rootComponentId={
+              props.rootComponent ?? editorSearchParams.rootComponentId ?? null
+            }
+            rootTemplateId={
+              props.rootTemplate ?? editorSearchParams.rootTemplateId
+            }
             externalData={props.externalData}
             onExternalDataChange={props.onExternalDataChange}
             widgets={{
diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx
index 9bd4fe40..f9403bf6 100644
--- a/packages/editor/src/Editor.tsx
+++ b/packages/editor/src/Editor.tsx
@@ -196,6 +196,8 @@ function EditorBackendInitializer(props: EditorProps) {
           }
 
           setDocument(document);
+        } else {
+          setDocument(null);
         }
       } catch (error) {
         console.error(error);
@@ -209,7 +211,7 @@ function EditorBackendInitializer(props: EditorProps) {
     }
 
     run();
-  }, []);
+  }, [props.documentId]);
 
   if (!enabled) {
     return <AuthenticationScreen>Loading...</AuthenticationScreen>;
@@ -648,7 +650,7 @@ const EditorContent = ({
   const sidebarNodeRef = useRef<HTMLDivElement | null>(null);
 
   const [editableData, form] = useForm({
-    id: "easyblocks-editor",
+    id: `easyblocks-editor-${initialEntry._id}`,
     label: "Edit entry",
     fields: [],
     initialValues: initialEntry,
diff --git a/packages/editor/src/useDataSaver.ts b/packages/editor/src/useDataSaver.ts
index 66a18070..a7db98b9 100644
--- a/packages/editor/src/useDataSaver.ts
+++ b/packages/editor/src/useDataSaver.ts
@@ -17,6 +17,7 @@ export function useDataSaver(
   editorContext: EditorContextType
 ) {
   const remoteDocument = useRef<Document | null>(initialDocument);
+  remoteDocument.current = initialDocument;
 
   /**
    * This state variable is going to be used ONLY for comparison with local config in case of missing document.
@@ -168,9 +169,10 @@ export function useDataSaver(
     }, 5000);
 
     return () => {
+      console.log("clearing");
       clearInterval(interval);
     };
-  }, []);
+  }, [initialDocument]);
 
   return {
     saveNow: async () => {