Create one more key in JSON

[vijaycreatise]

{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": false }

In JSON I want add new key with object. Example data key this will have custom Traits. I want to add new object from where data can be fetch and populate the output. Can I do this? Below is sample object how I wanted. Can any one help me on this how can I achieve this. { "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "data":{ "url":"https://something.com", "refresh_rate":"10" }, "activeOnRender": 0, "open": false }

[longdoan7421]

I'm not sure if I get your problem.

But if you set any custom attributes to component model (except some preserve keys like components, styles, ...) e.g: component.set('customTraits', yourCustomTraits);. It would be in JSON data.

[vijaycreatise]

editor.getWrapper().find('form').forEach(
      component => component.set('customAttr', {
        type: 'text', 
        name: 'api-link', 
        label: 'API Link', 
        placeholder: 'Enter API LINK',
      })
    )

I tried like this, but it is not working.

{
  "type": "text",
  "status": "hovered",
  "content": "Insert your text here",
  "attributes": {
    "id": "ixx2"
  },
  "data": {
    "url": "https://something.com",
    "refresh_rate": "10"
  },
  "activeOnRender": 0,
  "open": false
}

I want to add data key and object in JSON, when user select form they can enter API url. Can you please check am I doing correctly?

[longdoan7421]

Sorry I misunderstood your problem, so my previous comment was not relevant.

To achieve your desire, you need create your own trait type (docs) and component type (docs).

There is an easier way but it can not save all your custom data as an object to the data key. The JSON result would be like this:

{
  "type": "text",
  "status": "hovered",
  "content": "Insert your text here",
  ...
  // custom data
  "url": "https://something.com",
  "refresh_rate": 10
}

Sample code:

const defaultType = editor.DomComponents.getType('default');
editor.DomComponents.addType('form, {
  model: defaultType.model.extend({
    defaults: {
        ...defaultModel.prototype.defaults,
        droppable: ':not(form)',
        draggable: ':not(form)',
        traits: [
        {
          type: 'text',
          label: 'API Url',
          name: 'url',
          changeProp: true, // if `true` the value will be stored as model's property, otherwise it will be stored as html attribute
        },
        {
          type: 'text',
          label: 'Form Action',
          name: 'action',
          changeProp: true,
        }
    }
  },
  {
    isComponent(el) {
      if(el.tagName == 'FORM'){
        return {type: 'form'};
      }
    },
  }),

  view: defaultModel.view
})

You can look at grapesjs-plugin-form to have more idea.