How to change gjs-ckeditor-format component

@vatte21 To make your component editable.You've to extend the text type in your component like this way

editor.Components.addType('anyDiv', {
  model: {
      defaults: {
       type: 'text',
       traits:[
          ...editor.Components.getType(type.id).model.prototype.defaults.traits,
          ...[]
        ]
      },
      reRender() {
         this.view.render();
      },
  },
  extend: 'text',
  isComponent: function (el) {
    if (el.tagName === 'anyDiv')
        return {type: 'anyDiv'};
  }
});

@Abhisheknanda1344463 Thank you! Ill try

@Abhisheknanda1344463 your code fragment gives me an error Uncaught ReferenceError: type is not defined on the line

...editor.Components.getType(type.id).model.prototype.defaults.traits,

where is type defined?

Thanks for reporting this, @vatte21.

Great suggestion about how to change gjs-ckeditor-format component! 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.