[QUESTIONS] i18n content integration

@teawithfruit if you expect something in your saved HTML page (outside of the GrapesJS editor) the only thing I see it can do is:

script: function() {
	console.log('script done!')
}

So it does nothing, probably you're another victim of thinking that scripts inside GrapesJS editor will work in the exported code (but the final HTML has nothing to do with the editor). A bit more detailed explanation here

Hi @teawithfruit there are a couple of issues with your code:

1. you don't have access to this as the model inside component script: Component & Js docs
2. if your use case is to control an attribute, you don't have to provide a custom trait for that; just define a regular trait, and add listeners for the changes upon that attribute:

model: {
            init() {
                this.on('change:attributes:data-i18n', this.handleTypeChange);
            },

            handleTypeChange() {
                console.log('Input changed to: ', this.getAttributes()['data-i18n']);
            },
            defaults: {
                attributes:{
                  'data-i18n':''
                },
                traits: [
                    {
                        name: 'data-i18n',
                        label:'i18n!'
                    }
                ],
            //....

Cheers!

Thank you for the very helpful the answer! This is my updated Block/Component. Right now I've got just one more problem.

The script function I've added to the component is not called in the saved html page. If I add the block to the canvas in the editor, the function is called, but not if I save the page and open it outside grapes.js. If I look into the elements inspector, the script tag is visible but not being called.

Is there something I'm doing wrong?

editor.DomComponents.addType('content', {
  isComponent: el => el.classList && el.classList.contains('content'),
  extend: 'text',
  model: {
    async init() {
      const key = this.getAttributes()['data-i18n']

      if(key && await Localize.exists(key) == true) {
        this.set('content', await Localize.get(key))
      }
      
      this.on('change:attributes:data-i18n', this.handleTypeChange)
    },
    async handleTypeChange() {
      const key = this.getAttributes()['data-i18n']
      
      if(key && await Localize.exists(key) == true) {
        this.set('content', await Localize.get(key))
      } else {
        let attributes = this.getAttributes()

        if(attributes['data-i18n'] != undefined) {
          delete attributes['data-i18n']
          this.setAttributes(attributes)
        }
      }
    },
    defaults: {
      traits: [
        {
          name: 'data-i18n',
          label: 'i18n'
        }
      ],
      script: function() {
        console.log('script done!')
      }
    }
  }
})

editor.BlockManager.add('add-content', {
  label: 'Content',
  category: 'Elements',
  type: 'content',
  content: `<div class="content">Insert text here...</div>`
})

Thank's again for your help!