Grapesjs: Allow only one h1 tag on every page

[ikenderham]

Hello

Is it possible to only allowing one h1 tag on the every page?

I need to make sure that we only can drag one h1 tag into the canvas. What to do? :-)

[pouyamiralayi]

@ikenderham

editor.on('component:add', component => {
            const tag = component.get('tagName')
            if (tag == 'h1') {
                if (editor.getComponents().filter(comp => comp.get('tagName') == tag).length > 1) {
                    component.remove()
                }
            }
        })

cheers!

[ikenderham]

Tænk you alot. Another question. I'm making a team trait where I can show select a member from team to be shown in the team section, in the canvas. I already created the select box in trait, but Ii can't figure out how to show my data in the canvas. Whenever I select the team member I need to show the person image, title and job description. How so I do that ? Please help I'm new to this :D

[pouyamiralayi]

@ikenderham have you seen this?

[ikenderham]

@ikenderham have you seen this?

Yes. Was trying to make it work the whole day.. but no chance. I just need a little help, I'm so noob, but this project learnt me alot :+1: hope anyone can provide me some example I can work out from

[ikenderham]

I created it out from this example. I already made the trait with select members, that load from my db. But don't know how to show it in the canvas. The example I started with was the input select.

[pouyamiralayi]

@ikenderham based on Component Binding code sample in the provided link, you can control the value of target component properties:

onEvent({ elInput, component, event }) {
    const inputType = elInput.querySelector('.href-next__type');
    let href = '';

    switch (inputType.value) {
      case 'url':
        const valUrl = elInput.querySelector('.href-next__url').value;
        href = valUrl;
        break;
      case 'email':
        const valEmail = elInput.querySelector('.href-next__email').value;
        const valSubj = elInput.querySelector('.href-next__email-subject').value;
        href = `mailto:${valEmail}${valSubj ? `?subject=${valSubj}` : ''}`;
        break;
    }

    component.set('personImage', href)
    component.set('personDescription', "description")
    // ...
  },

Now in your component definition you have to define properties like below:

    model :{
        defaults:{
                personImage:'',
                personDescription:'',
            }
    }

The only thing left is to react upon changes of the properties by defining listeners in the init hook:

model: {
    defaults: {
      //...
    },
    init() {
      this.listenTo(this, 'change:personImage', this.handlePropChange);
      // ...
    },

cheers!

[ikenderham]

You are so nice! How can I thank you?? Thanks alot! Khdafesممنون I will try this example tomorrow on work. I just follwed you on github !

[artf]

@pouyamiralayi thanks as always for the huge support ❤️

BTW @ikenderham keep in mind that

editor.getComponents().filter(comp => comp.get('tagName') == tag).length > 1

is correct but only if need to check components as first children of editor.getComponents() (which returns children of the main wrapper)

If you need to check ALL components (including also nested children) you can use this

editor.getWrapper().find('h1').length > 1

[ikenderham]

Thanks alot for the help it works now