[Question] Define components in template

Questions

• How can I make a part of my template a component ?
• How can I set draggableComponents on such a component?
• If so, then can I stop setting selectable: false, highlightable: false, hoverable: false on the child nodes inside said component?
• Is it possible to supply a different external link to the component?

More explanation and a code part

I have a question because I think grapesjs is smarter than I use it currently. We have an asp.net app where its integrated, and we initialize it from an element. That element is the combination of our html template and data which give our users every day a prefilled newsletter with new content. They can drag articles around and then send it.

Our template has stuff like this (code in there is razor/cshtml stuff):

	<tr data-gjs-draggable="#main" data-gjs-copyable="false">
		<td data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false">
			<a data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false" href="https://www.@(Model.Site.Address)/subscribe/" target="_blank">
				<img data-gjs-selectable="false" data-gjs-highlightable="false" data-gjs-hoverable="false" style="margin-bottom: 5px;" alt="" src="https://cdn.@(Model.Site.Address)/Subscribe.jpg" border="0" width="468" />
			</a>
		</td>
	</tr>

To me it looks if this should be a component with the new draggableComponents option enabled. (see question 1-3)

This piece has an external link that will end up in the output. It would help our users if there could be another link that is not send out, but just for internal use (link to the editor in our cms). Maybe only available in the layer manager.

[artf]

for the moment grapes has some issue on storing custom components defined outside plugins.

Actually, are stored correctly, it’s just about loading components that are not recognized because the custom type doesn’t exist yet, so this is the reason for putting the code in the plugin (plugins are loaded before fetching components). We’re updating the Component documentation and this thing will be the first recommendation (and the only available) for defining custom types

BTW @Jogai the approach described by @pouyamiralayi is correct. Instead of writing

<tr data-gjs-draggable="#main" data-gjs-copyable="false">

You can just define a custom component type (or extend the built-in row one)

 editor.DomComponents.addType('my-row',{
			extend: 'row',
            model:{
                defaults:{
					draggable: '#main',
					copyable: 'false',
				}
// ...

And use it where you need it

<tr data-gjs-type="my-row">

The properties will be taken from the defined component type. In this way, you’re more Component-oriented and it’s easier to reuse them around your templates

[pouyamiralayi]

yes exactly. just remember defining your custom type inside a plugin. for the moment grapes has some issue on storing custom components defined outside plugins. cheers.