Add lazy loading support for images

Thanks @akmittal loading is actually really cool and useful but, for now, I'd like to avoid extending core components (this might lead to unexpected behavior if someone creates a new component by extending the image). For anyone who wants to make use of loading attribute can easily extend the image component in this way

editor.DomComponents.addType('image', {
  model: {
    defaults: () => ({
      traits: [
        'alt',
        {
          type: 'select',
          name: 'loading',
          label: 'Loading',
          default: 'eager',
          options: [
            { id: 'lazy', name: 'Lazy' },
            { id: 'eager', name: 'Eager' }
          ]
        }
      ],
    }),
  },
});

Thanks for reporting this, @akmittal.

Great suggestion about FEAT: Add lazy loading support for images! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.