How to Reload Components when Trait is Updated

[harsh201]

Hi @artf ,
We are using traits to assign attributes to components. For our use case, we fetch the trait data from our backend API and add it to components. We have two use cases:

• User can configure different API Endpoint, for which we need to fetch again and reload the components(If data is not present in new API Endpoint, we should invalidate previous selection)
• Use Storage Manager to save and reload the WIP document. In this case, whenever Editor is reloaded, we need to fetch the data again from API and associate with existing components.

Current Behavior:
Component A has 5 options which were retrieved from API. We reload the plugin once API responds back with options, so user can see updated list of fields in component's traits. The issue is, if user refreshes the screen, the content is loaded from Storage Manager before API call is made. So the already inserted component's traits does not have the values received from API and the selected option cannot be changed. But if user inserts a new component, user can see the list of options fetched from API, because we reload the plugin.

Same applies when the user wants to change the API. The components which are already inserted would not have latest traits list.

Anyway we can circumvent this and reload already inserted components once our API returns the response.

Note: If we load content, once API has responded and we have reloaded plugins, this issue does not happen as all components are initialized with values fetched from API.

[harsh201]

@artf Any suggestions here?

[artf]

How do you load/update Traits options?

[harsh201]

We pass the Trait options as part of options while initializing the plugin.
So we add the plugin while initialization with empty options:

<GrapesjsReact
  id="gjs"
  selectorManager={{ componentFirst: true }}
  storageManager={false}
  plugins={[
    pluginTable
  ]}
  onInit={onInit}
/>

And than we load plugin again to reload traits by this:

fetch(url).then((response) => {
    if (!response.ok) {
      throw new Error();
    }
    return response.json();
  }.then((dataForTable) => grapesjs.plugins.add(pluginTable(editor, dataForTable)));

[artf]

Well, you have different options here:

1. Load your traits data before creating GrapesJS instance (so you don't even need to reload the plugin)
2. Create a custom trait, where inside onUpdate you can check and update traits options every time a component with that trait is selected

[harsh201]

Thanks @artf! Let me check this.
Another way we were thinking is to get the components and load it again using getHtml and setComponents once we get a response from UI. WDYT of this approach? Will it cause a lot of unnecessary object creation?

[artf]

Will it cause a lot of unnecessary object creation?

Yeah, definitely an unnecessary thing.

[harsh201]

@artf
Tried Custom Trait approach. Not sure if I am missing something but same problem exists in custom trait too. I am initializing trait in init of plugin:

export default (editor, opts = {}) => {
  const options = {
    ...opts,
  };
  // Add components
  loadComponents(editor, options);
  // Add blocks
  loadBlocks(editor, options);
  // Add datalist trait
  loadCustomSelectTrait(editor);
};

Since the trait is loaded while initializing plugin, any already inserted component will have the trait options, component was initialized with.

I can see onUpdate being called every time the component is selected, but not sure from where I can get the updated options as the options are in React State.

Do you mean that I should add an event listener for component:selected and use that to update traits for the given component?

Also please correct me if I am wrong, but once a trait is added to component an component is added to canvas, the component will always refer to older trait, right?

[harsh201]

Hey @artf ,
Any pointers here?