feat(editor) include query parameters as editor params

Author: maarten2424

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}
         />
       )}
 

packages/editor/src/EasyblocksEditorProps.ts

@@ -25,4 +25,9 @@ export type EasyblocksEditorProps = {
   >;
 
   __debug?: boolean;
+  rootTemplate?: string;
+  rootComponent?: string;
+  locale?: string;
+  documentId?: string;
+  readOnly?: boolean;
 };

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={{

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,

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 () => {