When we add button component to the editor , it changes to text component after a reload . Please help

[Sudhin35]

Hi All ,

I have created a custome button component in the grapes js , when dragged and dropped , it is successfully created in the editor but after the reload the button component is changing to the text component . Please help

I have attached the code and screenshots

const newBlocksEl = blockManager.render( [
        {
           id: 'themed_button1',
          label: '<button type="button" class="btn btn-light">Button1</button>',
          type: "button",
          category: 'Themed Button',
          content: '<button type="button" class="btn [btn-light">Button1</button>',
          activate: true,
        },

[sandenson]

You should add a Block to the BlockManager like this:

blockManager.add('h1-block', {
  label: 'Heading',
  content: '<h1>Put your title here</h1>',
  category: 'Basic',
  attributes: {
    title: 'Insert h1 block'
  }
});

Here's the API reference for the BlockManager.

[artf]

You created the Block, that doesn't have any component context for the editor in that way so it falls back to the best default option (Text in that case). Try to read Components first, then Blocks.

Probably our falt is not to have all HTML elements as components (in your case the <button>), which is something I'd like to fix soon by creating a new dedicated plugin.