Toolbar menu problem when exporting and loading project data(JSON)

[alifsuria]

Hello all,

I need help regarding the toolbar menu

This is the default grapeJS toolbar menu

This is a toolbar menu that was customized in a component.model

When I export the project data using editor.getProjectData() and load it, The custom toolbar menu is not added and is replaced by the default one.

Please help

[artf]

Are you properly defining the custom component in a plugin? Can you show the related code?

[alifsuria]

Thank you @artf for replying.

This is how I define a new custom component in a plugin.

`editor.Components.addType('package-link', {
    model: {
        defaults: {
            tagName: 'section',
            components: {
                name: 'accordion-list-box',
                tagName: 'div',
                components: {
                    content: '<p>Hello World</p>',
                    toolbar: [{ command: 'moveItem', label: `<span><i /class="fa-solid fa-arrows"></i></span>` }, { command: 'cloneItem', label: `<span><i class="fa-solid fa-copy"></i></span>` }, { command: 'deleteItem', label: `<span><i class="fa-solid fa-trash"></i></span>` },],
                },
                toolbar: [{ command: 'moveItem', label: `<span><i /class="fa-solid fa-arrows"></i></span>` }, { command: 'cloneItem', label: `<span><i class="fa-solid fa-copy"></i></span>` }, { command: 'deleteItem', label: `<span><i class="fa-solid fa-trash"></i></span>` },],
            },
        },
    },
})
editor.Blocks.add("Package Link", {
    label: "Package Link",
    media: `<span class='block-icon'><i class='fa-solid fa-box-open'></i></span>`,
    category: 'Ecommerce',
    content: { type: 'package-link' }
})`

This is my export code
`$axios.get(endpoint).then((response) => {
            // let projectData = editor.getProjectData();
              editor.store().then(() => {
                if (response.data.length === 0) {
                  $axios.post(endpoint, {data: editor.getProjectData()}).then((response) => {
                    console.log(response);
                  });
                } else {
                  let getExistingData = response.data[0];
                  console.log(getExistingData);
                  axios.put(
                    `${endpoint}/${getExistingData.id}`,
                    {data:editor.getProjectData()}
                  ).then((data)=>{
                    console.log(data)
                    console.log('data updated')
                  });
                }
              });
            }).catch((err)=>{
              console.log(err)
            });`

I'm sorry for taking your time about this issue.

[artf]

As toolbar property is not stored directly in the project you should create a custom component containing your toolbar configuration so when it's initialised it will take the right configuration.
You can also extend default components with your new toolbar if this is something changing on more than one custom component.

[alifsuria]

The toolbar only stayed when adding it on the most 'top-level/parent' but if we added it deep into the child or specific component or element. It doesn't stay. Does it was undoable?

editor.Components.addType('test-box', { model: { defaults: { tagName: 'div', // This toolbar will persist even after saving and loading the project data toolbar: [{ command: 'moveItem', label: <i /class="fa-solid fa-arrows">}, { command: 'cloneItem', label:}, { command: 'deleteItem', label:},], components: [ { tagName: "div", components: { tagName: 'div', name: 'outer-box', components: [{ tagName: 'div', name: 'first-column' }, { // This toolbar didn't persist even after saving and loading the project data it only shows when added to the editor toolbar: [{ command: 'moveItem', label:<i /class="fa-solid fa-arrows">}, { command: 'cloneItem', label:}, { command: 'deleteItem', label:},], tagName: 'div', name: 'second-column', }] } }, { tagName: "p", components:

Hello World

} ] } } });