[QUESTION] Custom component property that is not a trait

[ltenti-eventboost]

I would like to create a custom component with a property that will be updated by specific code, but I don't want this property to be visible and updatable as a trait; let say my property is called "ebTesto", I wrote a plugin function like that:

function addComponentX(editor, options){
    const COMPONENT_TYPE = 'eb-componentx';
    editor.DomComponents.addType(COMPONENT_TYPE, {
        isComponent: function(el) {
            if(el.getAttribute && el.getAttribute('data-gjs-type') ==COMPONENT_TYPE) {
                return {type:COMPONENT_TYPE};
            }
         },             
         model: {
              defaults: {
                  ebTesto: 'Ciao',
                  tagName: 'div',
                  components: [
                    {
                        type:'text',
                        content: 'Title component X',
                        removable: false
                    }
                ]                       
            },
            ebTesto: 'Ciao'             
        }               
    });
    editor.BlockManager.add(COMPONENT_TYPE, {
            label: 'Component X',
            category: 'EB',
            attributes: {class:'eb-componentx-block'},
            content: `<div class="eb-componentx" data-gjs-type="${COMPONENT_TYPE}"></div>`
      });
}

I expected to find my new property in the "gjs-components" part of the stored JSON, but this is what I got:

[
  {
    "type": "eb-componentx",
    "classes": [
      "eb-componentx"
    ],
    "components": [
      {
        "type": "text",
        "removable": false,
        "content": "Title component X"
      }
    ]
  }
]

Maybe I'm trying the wrong way? Has anyone ever had a similar need? Thanks for your help!

[Ju99ernaut]

Try adding it inside defaults

[ltenti-eventboost]

@Ju99ernaut I did it:

model: {
       defaults: {
         ebTesto: 'Ciao',
....

[Ju99ernaut]

I think it's not stored since the property hasn't been changed from the default. The editor should be able to recover the property from the component definition itself.

[artf]

I think it's not stored since the property hasn't been changed from the default. The editor should be able to recover the property from the component definition itself.

Correct.

One note for your component definition, you don't need this check

if(el.getAttribute && el.getAttribute('data-gjs-type') ==COMPONENT_TYPE) {

GrapesJS checks already internally for data-gjs-type, so you can even remove isComponent (which is used only to identify components post-parsing).

[ltenti-eventboost]

Thank you both!