FEAT: No example shown for extending a component like image type

You extend the image as any other component, it's explained here. If you have a particular use case, it's up to you looking at the source of the component implementation

I am facing the same difficulty as @revdfdev - when following the documentation example to extend an existing component, I am struggling to comprehend. For example the documentation says:

comps.addType('my-new-component', {
  isComponent: el => {/* ... */},
  extend: 'other-defined-component',
  model: { ... }, // Will extend the model from 'other-defined-component'
  view: { ... }, // Will extend the view from 'other-defined-component'
});

what does one put into the { ... }? This is never explained - just a bunch of dots. If I define model as

model: {
    defaults: {
        traits: [
            'another',
            'fred',
    ],
    }
}

then the existing traits id and title are destroyed, nothing is 'extended'. For example, I want to preserve the nice default feature of id being auto allocated, unless I explicitly set its value. If I re-implement 'id' then I'd have to figure how to do this again myself.

There are very few if any examples of using extend - all the examples I can find use this sort of technique e.g. this example:

var domComps = editor.DomComponents;
dType = domComps.getType('default');
dModel = dType.model;
dView = dType.view;

domComps.addType('input', {
    model: dModel.extend({
        defaults: Object.assign({}, dModel.prototype.defaults, {
            traits: dModel.prototype.defaults.traits.concat([
                'test'
            ])
        })
    },
        {
            isComponent: function (el) {
                if (el.tagName == 'INPUT') {
                    return { type: 'input' };
                }
            },
        }),
    view: dView
});

is this perhaps an older technique that precedes the extend idea? Interesting, in the above example, I get the attribute test without explicitly declaring it?

The only other example of using extend I could find was in #3135 and running here and looks very simple and zen - however it merely shows adding a dblclick handler to the video component and does not show adding additional component attributes or properties and traits.

I've also tried studying existing component plugins but cannot find any that use extend. Incidentally, studying published plugins is an additional level of complexity since they are structured differently than a plugin that I define on the fly within my own project. I'd like a simple example of calling addType that e.g. extends an input or text component with additional attributes and traits - and IMO it should be in the doco.

When you extend the default properties it works like that:

// Component A
defaults: {
 propA: 'A',
 propB: [1, 2],
}

// Component B which extends Component A
defaults: {
 // Component B will have propA as Component A
 propB: [3, 4], // this overrides entirely the propB
}

If you need to have propB merged with the one from Component A, you would need something like that

const parentProps = domc.getType('parent-type').model.prototype.defaults;
// ...
defaults: {
 propB: [ ...parentProps.traits, 3, 4 ]
}

Interesting, in the above example, I get the attribute test without explicitly declaring it?

Strings fallbacks to a simple text trait type 'attr-name' => { type: 'text', name: 'attr-name' }