Enrich Components html

[thenovacreator]

Hallo @ALL,

i am building a laravel / php application and using also grapesjs to build pages for the application. Inside these pages i want to conditionally render sections / components if the logged in user is a normal user or an admin. I came along to use a struture like this to mark fragements / components of the page as conditional:

{IS_ADMIN}some component html{/IS_ADMIN}

Inside grapesjs i have added a trait to all components to select the user role to decide the component should be rendered. I do came along with the following code:

editor.DomComponents.getTypes().map(type => {
	editor.DomComponents.addType(type.id, {
		isComponent: el => true,
		model: {
			defaults: {
				traits: [...type.model.prototype.defaults.traits,
					{
						type: 'select',
						label: 'User Role',
						name: 'data-user-role-trait',
						options: [
							{ id: '1', name: 'Any' },
							{ id: '2', name: 'User' },
							{ id: '3', name: 'Admin' }
						]
					}
				],
			},
			toHTML: function() {
				const attrs = this.getAttributes();
				if (typeof attrs['data-user-role-trait'] !== 'undefined') {
					if (parseInt(attrs['data-user-role-trait']) === 2) {
						return "{IS_USER}" + type.model.prototype.toHTML.apply(this) + "{/IS_USER}";
					}
					if (parseInt(attrs['data-user-role-trait']) === 3) {
						return "{IS_ADMIN}" + type.model.prototype.toHTML.apply(this) + "{/IS_ADMIN}";
					}
				}

				return type.model.prototype.toHTML.apply(this);
			}
		}
	});
});

If i do it like that the following code leads to a inifinte loop type.model.prototype.toHTML.apply(this)

How do i get the html from the component and wrap it into the conditional i am aiming for?

[artf]

You have to store the original model before is updated

editor.Components.getTypes().map(type => {
  const originalModel = type.model;

  editor.Components.addType(type.id, {
     // ...
     return originalModel.prototype.toHTML.apply(this);
    // ...
  })
})

[thenovacreator]

I did actually incoperate the changes suggested and it basically works. However wit the given code integrated into the demo to play around with it i get really strange behavior. Texts disappear if edited and forms are not dropable. Columns can not be dropped into columns. After all there is no warnings in the console. I am trying to get this working but not luck. Any suggestions on what can be wrong?

I will take also the day tomorrow to get a demo of the issues working.

[artf]

remove isComponent: el => true as this breaks the Component Type Stack (when you update the component type it will be preserved anyway)

[thenovacreator]

Ok yes that was the problem. Thank you really much about that!

[thenovacreator]

For everyone interested into the full code. This is what works:

editor.DomComponents.getTypes().map(type => {
	const originalModel = type.model;	

	editor.DomComponents.addType(type.id, {
		model: {
			defaults: {
				traits: [...type.model.prototype.defaults.traits,
					{
						type: 'select',
						label: 'User Role',
						name: 'data-user-role-trait',
						options: [
							{ id: '1', name: 'Any' },
							{ id: '2', name: 'User' },
							{ id: '3', name: 'Admin' }
						]
					}
				],
			},
			toHTML: function() {
				const attrs = this.getAttributes();
				if (typeof attrs['data-user-role-trait'] !== 'undefined') {
					if (parseInt(attrs['data-user-role-trait']) === 2) {
						return "{IS_USER}" + originalModel.prototype.toHTML.apply(this) + "{/IS_USER}";
					}
					if (parseInt(attrs['data-user-role-trait']) === 3) {
						return "{IS_ADMIN}" + originalModel.prototype.toHTML.apply(this) + "{/IS_ADMIN}";
					}
				}

				return originalModel.prototype.toHTML.apply(this);
			}
		}
	});
});