How to add text for button?

[senthil177cse]

How to change the button content text instead of "Submit" i need to change the text...
code has pasted on below... can you please help me on this?

this.editor.BlockManager.add('custom_button_block', {
label: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M4 11.5h16v1H4z"></path></svg><div class="gjs-block-label">Buitton</div>,
order: 2,
category: 'Component Block',
draggable: true,
attributes: {
class: '',
},
content: <button type="button">Submit</button>
});

[senthil177cse]

@artf any update of this ?

[senthil177cse]

ok i have added my code in below. is there any mistake i have made it? and if i using this code my json code not changing its just adding the attributes there...

this.editor.BlockManager.add('custom_button_block', {
label: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M4 11.5h16v1H4z"></path></svg><div class="gjs-block-label">Button</div>,
order: 2,
category: 'Component Block',
draggable: true,
attributes: {
class: '',
},
text: "Click Me",
content: <button type="button">Submit</button>,
});

        var selectedcomponents;
var el;
//  Adding Settings for Button tag
this.editor.DomComponents.addType('button', {
  isComponent: el => el.tagName == 'BUTTON',
  model: {
    defaults: {
      traits: [
        // Strings are automatically converted to text types
        'id',
        {
          type: 'select', // Type of the trait
          label: 'Type', // The label you will see in Settings
          name: 'type', // The name of the attribute/property to use on component
          options: [
            { id: 'submit', name: 'Submit'},
            { id: 'reset', name: 'Reset'},
            { id: 'button', name: 'Button'},
          ]
        },
        {
          type: 'text',
          label:'Content',
          name: 'text'
        }                          
      ],
      attributes: { type: 'submit'},
    },
    init() {
      this.on('change:attributes:text', this.handleTypeChange);
    },

    handleTypeChange() {
    console.log(selectedcomponents);
     el.innerHTML = this.getAttributes().text;  
    }
  },

});

Below is my response JSON:
[{"tagName":"button","type":"button","attributes":{"type":"button","text":"Login","id":"ixj6"},"components":[{"type":"textnode","content":"Submit"}]}]

Here i want to change the "Components": [{"content":"Login"}]

pls if any code mistake pls let me where is the problem?

[artf]

You should always update the model of your components (you're updating the DOM in the canvas which is not persisted), then the view should update accordingly.

init() {
  this.on('change:attributes:text', this.onTextChange);
},
onTextChange() {
  this.components(this.getAttributes().text);
},

[senthil177cse]

Thank You so much @artf ...
its working... i have one more clarification content changing inside the component but in attributes also its adding newly like below...

[{"tagName":"button","type":"button","attributes":{"type":"button","text":"test btn","id":"iowx"},"components":[{"type":"textnode","content":"test btn"}]}]

here components:["{"content":"text btn"}] but why attributes also adding like text aatribute?

[artf]

You can use changeProp option as explained here https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components

[senthil177cse]

if i add changeProp content not chnaging and adding the attributes inside components... like below

                          [{"tagName":"button","type":"button","attributes":{"type":"button","id":"isny"},"components":[{"type":"textnode","content":"Submit"}],"text":"tetsing"}]

here i dont want to add new attributes i need to change content value only... my code is below pls check what was the propblem occur in my code..

this.editor.Components.addType('button', {
isComponent: el => el.tagName == 'BUTTON',
model: {
defaults: {
traits: [
// Strings are automatically converted to text types
'id',
'action',
{
type: 'select', // Type of the trait
label: 'Type', // The label you will see in Settings
name: 'type', // The name of the attribute/property to use on component
options: [
{ id: 'submit', name: 'Submit'},
{ id: 'reset', name: 'Reset'},
{ id: 'button', name: 'Button'},
]
},
{
type: 'text',
label:'Content',
name: 'text',
changeProp: 1
}
],
attributes: { type: 'submit'},
},
init() {
this.on('change:attributes:text', this.onTextChange);
},
onTextChange() {
this.components(this.getAttributes().text);
}
},
});