[QUESTION] Custom component - how to set editable to true

Hi, I’ve created a custom component type, but I am having some trouble making it editable. The component is a “span” with component type “tag”. it will contain only text, but I want it to extend the default, not the text component. Any idea how can I make it editable, even if it is not “text”.

comps.addType('tag', {
        
        model: { 
            defaults:  {
                type: 'tag',
                tagName: 'span',
                editable: true,
                droppable: false,
                attributes: {
                  'data-gjs-type': 'tag',
                },
                textable: 1,
                traits: [{
                    type: 'select',
                    label: 'Tag',
                    name: 'selected-tag',
                    options: tagTypes,
                }], 
            },

            isComponent: function(el) {
              let result;
              if (el.tagName == 'SPAN' && el.getAttribute("data-gjs-type") === "tag") {
                result = {
                  type: 'tag',
                };
              }
              return result;
            }
        }, ... 

[inaLar]

Thank you! I have done something similar, but yours is not so complicated. I’ve had other events attached to onActive, so I couldn’t use it. Now I detached them and I will do as you suggest. About the data-gjs-type - I need it because the content I am creating is stored and when reloaded the components have to be recognized in order for their settings/traits to be loaded and especially this custom type component I’ve added. There is also a possibility to change the content via traits, which complicates things a bit too 😃 P.S.: @artf You have done a great work by far!

[artf]

I think you’re looking for something like this

editor.DomComponents.addType('tag', {
	model: {
		defaults: {
                tagName: 'span',
                editable: true,
                droppable: false,
				// ... all your other stuff
		}
	},
	view: {
		events: {
			dblclick: 'onActive',
			focusout: 'onDisable',
		},
		onActive() {
			this.el.contentEditable = true;
		},
		onDisable() {
			const { el, model } = this;
			el.contentEditable = false;
			model.set('content', el.innerHTML)
		},
	}
});

ps: there is no need to check/handle for data-gjs-type, the editor does it already for you. If you don’t import HTML and need to recognize your tag custom component you can skip isComponent