fix: enable editing on AEM for dynamic container components

Fire event once component model has been fetched and rendered, to reload editables and enable
editing within AEM

Author: sharanyavinod

src/Constants.ts

@@ -42,6 +42,11 @@ export class Constants {
     public static readonly _PAGE_CLASS_NAMES = 'aem-page';
     public static readonly _RESPONSIVE_GRID_PLACEHOLDER_CLASS_NAMES = 'aem-Grid-newComponent';
 
+    /**
+     * Event which indicates that content of remote component has been fetched and loaded in the app
+     */
+    public static readonly REMOTE_CONTENT_LOADED = 'cq-remotecontent-loaded';
+
     /**
      * Selector for WCM mode state meta property.
      */

src/components/ModelProvider.tsx

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import { Model, ModelManager } from '@adobe/aem-spa-page-model-manager';
+import { Model, ModelManager, PathUtils } from '@adobe/aem-spa-page-model-manager';
 import React, { Component } from 'react';
 import isEqual from 'react-fast-compare';
+import { Constants } from '../Constants';
 import { MappedComponentProperties, ReloadForceAble } from '../ComponentMapping';
 import Utils from '../Utils';
 
@@ -88,6 +89,11 @@ export class ModelProvider extends Component<ModelProviderType> {
               const props = Utils.modelToProps(data);
 
               this.setState(props);
+
+              // Fire event once component model has been fetched and rendered to enable editing on AEM
+              if (injectPropsOnInit) {
+                  PathUtils.dispatchGlobalCustomEvent(Constants.REMOTE_CONTENT_LOADED, {});
+              }
           }
         }).catch((error) => {
             console.log(error);