Extending Link component not working properly.

hello @hello @artf 
I am trying to extend the link component and add new traits like href and target the code is given below.

``function loadWithOption(opts) {
      editor.DomComponents.addType('link', {
        model: dModel.extend({
          defaults: Object.assign({}, dModel.prototype.defaults, {
            traits: [
            // strings are automatically converted to text types
            // title,
            {
              type: 'text',
              label: 'text',
              name: 'text',
              },
            {
              type: 'select',
              label: 'Target',
              name: 'target',
              options: [
              { value: '', name: 'This window' },
              { value: '_blank', name: 'New window' },
              ]
            }, 
            {
              type: 'select',
              label: 'Href',
              name: 'href',
              options: [
                {value: 'index.html', name: 'Home'},
                {value: 'index2.html', name: 'Home2'},
                {value: 'index3.html', name: 'Home3'},
                {value: 'index4.html', name: 'Home4'},
              ]
            },
            ],
          }),
        }, {
          isComponent: function (el) {
            if (el.tagName == 'A' || el.tagName == 'LINK') {
              return { type: 'link' };
            }
          },
        }),
        view: dView,
      });  `
`

It is working only after importing the code otherwise nothing changes...
please help