Fixes frame (#6809)

* Fix isStyleInFlow

* Fix save restore

* Format

packages/core/src/canvas/model/Frame.ts

@@ -200,6 +200,10 @@ export default class Frame extends ModuleModel<CanvasModule> {
     return this.get('component');
   }
 
+  getMainComponent(): Component {
+    return this.refComponent || this.root;
+  }
+
   getStyles() {
     return this.get('styles');
   }

packages/core/src/editor/model/Editor.ts

@@ -909,11 +909,14 @@ export default class EditorModel extends Model {
       this.clearDirtyCount();
     }, 1);
     const data = this.storeData();
-    await this.Storage.store(data, options);
+    try {
-    setTimeout(() => {
+      await this.Storage.store(data, options);
-      this._isStoring = false;
+      return data;
-    }, 1);
+    } finally {
-    return data;
+      setTimeout(() => {
+        this._isStoring = false;
+      }, 1);
+    }
   }
 
   /**

packages/core/src/style_manager/model/PropertySelect.ts

@@ -3,7 +3,7 @@ import { ObjectAny } from '../../common';
 import { isDef } from '../../utils/mixins';
 import Property, { PropertyProps } from './Property';
 
-type SelectOption = {
+interface SelectOption {
   id: string;
   value?: string;
   label?: string;
@@ -12,7 +12,7 @@ type SelectOption = {
   title?: string;
   style?: string;
   propValue?: ObjectAny;
-};
+}
 
 /** @private */
 export interface PropertySelectProps extends PropertyProps {

packages/core/src/utils/sorter/SorterUtils.ts

@@ -144,7 +144,7 @@ export function closest(el: HTMLElement, selector: string): HTMLElement | undefi
  * @private
  */
 export function isStyleInFlow(el: HTMLElement, parent: HTMLElement): boolean {
-  if (isTextNode(el)) return false;
+  if (!el || isTextNode(el)) return false;
 
   const elementStyles = el.style || {};
   const $el = $(el);

packages/core/test/specs/grapesjs/index.ts

@@ -4,6 +4,7 @@ import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper
 import { EditorConfig } from '../../../src/editor/config/config';
 import PluginsEvents, { Plugin } from '../../../src/plugin_manager/types';
 import { StorageManagerConfig } from '../../../src/storage_manager/config/config';
+import { wait } from '../../../src/utils/mixins';
 import { fixJsDom, fixJsDomIframe, waitEditorEvent } from '../../common';
 
 type TestPlugin = Plugin<{ cVal: string }>;
@@ -517,6 +518,28 @@ describe('GrapesJS', () => {
         expect(data).toEqual(projectData);
       });
 
+      test('Allows retrying store after a storage failure', async () => {
+        const store = jest.fn().mockRejectedValueOnce(new Error('store failed')).mockResolvedValueOnce(undefined);
+
+        (config.storageManager as StorageManagerConfig).type = storageId;
+        config.plugins = [
+          (e) =>
+            e.StorageManager.add(storageId, {
+              store,
+              async load() {
+                return {};
+              },
+            }),
+        ];
+        const editor = initTestEditor(config);
+
+        await expect(editor.store()).rejects.toThrow('store failed');
+        await wait(2);
+        await editor.store();
+
+        expect(store).toHaveBeenCalledTimes(2);
+      });
+
       test('Adds a new storage and fetch correctly data from it', async () => {
         fixture.innerHTML = documentEl;
         const styleResult = { color: 'white', display: 'block' };