La selección de componentes personalizados no es posible desde el lienzo.

Hola,

Intenté averiguarlo por mi cuenta, pero siento que estoy dando vueltas un poco en círculos. Así que espero que tengáis tiempo para leer esto y ayudarme con el problema.

Me sale una plantilla html con varias etiquetas de componentes personalizadas => ''<custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag><custom-component-tag></custom-component-tag>.

Para todos los componentes defino un nuevo componente en grapesjs tal como se describe en la documentación. Para cada componente renderizo una vista diferente, pero no manipulo el modelo porque quiero que el html siga igual al guardar.

Aunque los componentes tienen la siguiente configuración, la función de selección no parece funcionar con ellos. A continuación se puede ver un código de ejemplo.

Proporcioné un vídeo de pantalla en el que se puede ver que el componente es visible dentro del árbol de componentes y puede seleccionarse desde ahí, pero la selección no es posible desde el lienzo.

PD: Este componente de ejemplo que selecciono en el vídeo está resaltado, pero algunos de los otros tienen un conjunto de herramientas para arrastrar, etc., pero no están resaltados. Este sería el segundo problema. '''js private createCustomComponent(editor) { const comps = editor. DomComponents; const defaultType = comps.getType('default'); const defaultModel = defaultType.model; comps.addType('custom-component', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { removible: cierto, Arrastrable: Cierto, Droppable: falso, Badgable: Cierto, Estilizado: Cierto, Resaltable: Cierto, copiable: falso, redimensionable: falso, Editable: Cierto, }) }, { isComponent: function (el) { if (el.tagName === 'ETIQUETA-COMPONENTE-PERSONALIZADO') { return {type: 'custom-component'}; } } }), Definir la vista view: defaultType.view.extend({ render: función () { defaultType.view.prototype.render.apply(esto, argumentos); valor const = document.createElement('div'); this.el.appendChild(valor); console.dir(this.el); devuelvo esto; }, }), }); }

Gracias de antemano :)