From cd825006d21f9c4e54c936191d73b4090211183c Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 21 Mar 2022 16:33:58 +0100
Subject: [PATCH] Added `projectData` option

---
 docs/modules/Storage.md     | 38 +++++++++++++++++++++++++++++++++++++
 src/editor/config/config.js | 20 ++++++++++++++++---
 src/editor/model/Editor.js  |  6 +++++-
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/docs/modules/Storage.md b/docs/modules/Storage.md
index 0e295a5d0..40652c8e2 100644
--- a/docs/modules/Storage.md
+++ b/docs/modules/Storage.md
@@ -313,6 +313,44 @@ Here you can find some of the plugins extending the Storage Manager
 
 
 
+## Common use cases
+
+### Init without first load
+
+In case you're using a `remote` storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the `projectData` on initialization.
+
+```js
+// Get the data before initializing the editor (eg. printed on server-side).
+const projectData = {...};
+// ...
+grapesjs.init({
+  // ...
+  // If projectData is not defined we might want to load some initial data for the project.
+  projectData: projectData || {
+    pages: [
+        {
+          component: `
+            <div class="test">Initial content</div>
+            <style>.test { color: red }</style>
+          `
+        }
+    ]
+  },
+  storageManager: {
+    type: 'remote',
+    // ...
+  },
+})
+```
+In case `projectData` is defined, the initial storage load will be automatically skipped.
+
+
+### HTML code in project data
+
+### Inline data
+
+
+
 
 ## Events
 
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index 538b77bee..926df187c 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -2,15 +2,29 @@ export default {
   // Style prefix
   stylePrefix: 'gjs-',
 
-  // HTML string or object of components
+  /**
+   * HTML string or object of components
+   * @deprecated Rely on `projectData` option
+   */
   components: '',
 
-  // CSS string or object of rules
+  /**
+   * CSS string or object of rules
+   * @deprecated Rely on `projectData` option
+   */
   style: '',
 
-  // If true, will fetch HTML and CSS from selected container
+  /**
+   * If true, will fetch HTML and CSS from selected container
+   * @deprecated
+   */
   fromElement: 0,
 
+  /**
+   * Initial project data
+   */
+  projectData: null,
+
   // Show an alert before unload the page with unsaved changes
   noticeOnUnload: true,
 
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 68bb376ce..35275aa18 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -155,7 +155,11 @@ export default class EditorModel extends Model {
 
     // Defer for storage load events.
     setTimeout(async () => {
-      if (this.get('StorageManager').canAutoload()) {
+      const projectData = this.getConfig('projectData');
+
+      if (projectData) {
+        this.loadData(projectData);
+      } else if (this.get('StorageManager').canAutoload()) {
         try {
           await this.load();
         } catch (error) {