Button type error

[gilsonnetotec]

Type Button doesn't work.
How make or create type button in StyleManager ?

editor.StyleManager.addSector('editor', {
name: 'EDITOR',
open: false,
properties: [{
type: 'button',
// ...
text: 'Click me',
full: true, // Full width button
command: editor => alert('Hello')
// or you can just specify the Command ID
}]
})

[sathudeva7]

In GrapesJS, the StyleManager is designed to handle styling properties for components, not to execute commands or functions. However, if you want to add a button within a sector of the StyleManager that performs an action when clicked, you would typically need to create a custom property type that acts as a button.

editor.StyleManager.addProperty('editor', { name: 'Custom Button', // Name of the property property: 'custom-button', // Unique property name type: 'custom', // Use 'custom' type for custom properties create({ props, change }) { const button = document.createElement('button'); button.textContent = props.text || 'Click me'; button.style.width = props.full ? '100%' : 'auto'; button.onclick = () => { // Execute the command or custom function if (typeof props.command === 'function') { props.command(editor); } else if (typeof props.command === 'string') { editor.runCommand(props.command); } }; return button; } });
After defining the property, you would add it to a sector as follows:

editor.StyleManager.addSector('editor', { name: 'EDITOR', open: false, properties: [ { type: 'custom-button', text: 'Click me', // Text for the button full: true, // Full width button command: editor => alert('Hello'), // Command as a function // or you can just specify the Command ID as a string } ] });