How to Add a Custom Button to the Floating Component Toolbar in React (on Element Selection)

[Ahtasham-Faheem]

I'm currently integrating GrapesJS (via @grapesjs/studio-sdk/react) into my app and trying to add a custom button to the floating inline toolbar that appears on top-right of an element when it is selected in the editor canvas (the one that includes clone/delete/move icons).

I’ve tried using component.set('toolbar', [...]) inside editor.on('component:selected'), and while it works for adding buttons to the left panel toolbar, it doesn’t seem to show my custom button inside the floating contextual menu over the selected component.

Here’s the snippet I tried:
`editor.on('component:selected', (component) => {
const toolbar = component.get('toolbar') || [];

const aiButton = {
id: 'ai-edit',
className: 'fa fa-robot',
command: 'open-ai-assistant',
attributes: { title: 'Generate AI Text' }
};

if (!toolbar.find(item => item.id === 'ai-edit')) {
component.set('toolbar', [...toolbar, aiButton]);
}
});`

[artf]

You can find here an example of a toolbar extension:
https://app.grapesjs.com/docs-sdk/configuration/components/properties#toolbar

[Ahtasham-Faheem]

@artf I'm currently working on integrating an AI Content Generator into my project. I have the OpenAI API keys set up, and I would like to enhance the editor functionality by allowing users to generate AI content and replace the currently selected element's content with the newly generated text.

Specifically, when a user selects an element (like a text block) and generates new content through AI, I want to replace the existing content of that selected element with the AI-generated text.

I've attached my current implementation below. Could someone please guide me on how I can properly achieve this within GrapesJS?
editor.txt

[artf]

The proper way would be to get the inner HTML of the component

setSelectedComponent({
  component: selected,
  originalContent: selected.getInnerHTML(),
})

and then update the components with new content

component.components(newContent);

[Ahtasham-Faheem]

Hi @artf , thanks again—that was really helpful. I just have one more request: I’d like to add a "Show Templates" button inside my Type: "Web" editor so users can open the template panel manually. I no longer want the template panel to appear automatically on editor load. Could you guide me on how to implement this?

[artf]

I no longer want the template panel to appear automatically on editor load

Well, this is not a default behaviour, maybe you're doing that on editor load?!
Did you try to check the documentation here?