[Fix] [WRS-2276] Refactor studio loader config

README.md

@@ -68,7 +68,7 @@ If you need help generating a token or would like code samples, please see our [
             /* Function that refreshes your access token, not providing a proper function can lead to data loss when your token is expired. */
             const refreshTokenAction = () => Promise.resolve(token);
 
-            window.StudioUI.studioLoaderConfig({
+            window.StudioUI.studioUILoaderConfig({
                 // Div id to inject studio-ui in
                 selector: studioUIContainer,
                 // downloadUrl used to fetch the document

documentation/advanced-integration.md

@@ -127,7 +127,7 @@ const uiOptions = {
     },
 };
 
-window.StudioUI.studioLoaderConfig({
+window.StudioUI.studioUILoaderConfig({
     // Div id to inject studio-ui in
     selector: studioUIContainer,
 
@@ -153,7 +153,7 @@ window.StudioUI.studioLoaderConfig({
     projectName: projectName,
 
     /* outputTypes: object of all available output types (optional) that have a boolean value */
-    outputTypes: outputTypes,
+    outputSettings: outputSettings,
 
     /* uiOptions: object to play around with parts of the UI and the theming.*/
     uiOptions: uiOptions,
@@ -280,38 +280,6 @@ const onProjectSave = async (generateJson) => {
         },
     };
 };
-
-window.StudioUI.studioLoaderCustomTemplateConfig({
-    // Div id to inject studio-ui in
-    selector: studioUIContainer,
-
-    // downloadUrl used to fetch the document
-    projectDownloadUrl: `${environmentBaseURL}/projects/${projectID}/document`,
-
-    // uploadUrl used to save the changes you did to the document (autosave)
-    projectUploadUrl: `${environmentBaseURL}/projects/${projectID}`,
-
-    // project Id to enable autosave
-    projectId: projectID,
-
-    /* environment base URL ex: https://cp-abc-123.chili-publish.online/grafx/api/v1/cp-abc-123 */
-    graFxStudioEnvironmentApiBaseUrl: environmentBaseURL,
-
-    /* Integration access token */
-    authToken: token,
-
-    /* refreshTokenAction, being a function that will return a promise () => Promise<string | Error> */
-    refreshTokenAction: refreshTokenAction,
-
-    /* projectName: string, name of the project. Shown in the UI (does not have to be match the real name) */
-    projectName: projectName,
-
-    /* outputTypes: object of all available output types (optional) that have a boolean value */
-    outputTypes: outputTypes,
-
-    /* uiOptions: object to play around with parts of the UI.*/
-    uiOptions: uiOptions,
-});
 ```
 
 onProjectSave example implementation [can be found here](https://github.com/chili-publish/studio-ui/blob/b2f7e5307cc8dee41eb89a15c3647a8ce1d13768/src/StudioProjectLoader.tsx#L72).

src/App.tsx

@@ -18,12 +18,12 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
     const [eventSubscriber] = useState(new Subscriber());
 
     const uiThemeMode = useMemo(() => {
-        if (projectConfig.uiTheme === 'system') {
+        if (projectConfig.uiOptions.uiTheme === 'system') {
             const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
             return isDarkTheme ? 'dark' : 'light';
         }
-        return projectConfig.uiTheme;
-    }, [projectConfig.uiTheme]);
+        return projectConfig.uiOptions.uiTheme;
+    }, [projectConfig.uiOptions.uiTheme]);
 
     // This interceptor will resend the request after refreshing the token in case it is no longer valid
     useEffect(() => {

src/MainContent.tsx

@@ -282,7 +282,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                     viewMode: { enabled: false },
                 },
             },
-            editorLink: projectConfig.overrideEngineUrl,
+            editorLink: projectConfig.editorLink,
         });
 
         // Connect to ths SDK
@@ -385,8 +385,8 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
 
     const navbarProps = useMemo(
         () => ({
-            projectName: currentProject?.name || projectConfig.projectName,
-            goBack: projectConfig?.onUserInterfaceBack,
+            projectName: currentProject?.name ?? projectConfig.projectName ?? '',
+            goBack: projectConfig.onBack,
             projectConfig,
             undoStackState,
             zoom: currentZoom,
@@ -496,7 +496,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
                                 </MainContentContainer>
                                 <LoadDocumentErrorDialog
                                     isLoadDocumentErrorDialogOpen={isLoadDocumentErrorDialogOpen}
-                                    goBack={projectConfig?.onUserInterfaceBack}
+                                    goBack={projectConfig.onBack}
                                 />
                                 {pendingAuthentications.length &&
                                     pendingAuthentications.map((authFlow) => (