Issue #3228Opened January 12, 2021by Abhisheknanda13444630 reactions

Component Value is not changing

Question

Hi @artf
I've added a new component here is the code

editor.DomComponents.addType('header', {
    model: {
      defaults: {
          tagName: 'h1',
          type: 'header',
          size: 'h1',
          traits: [
            {
              name: 'size',
              label: 'Size',
              type: 'select',
              changeProp: 1,
              options: [
                {value: 'h1', name: 'One'},
                {value: 'h2', name: 'Two'},
                {value: 'h3', name: 'Three'},
              ]
            }
          ],
          content: 'Insert you header text here'
      },
      init(){
        this.listenTo(this, 'change:size', this.Updatehead);
      },
      Updatehead(){
        var newElem = $('<'+this.changed['size']+ ' />').append(this.view.el.innerText);
        console.log(newElem.html());
        this.view.model.set('content',newElem.html());
        this.view.el.innerHTML = newElem.html();
        this.attributes.tagName = this.changed['size'];
        this.attributes.size = this.changed['size'];
      }
    }
  });
  
  // block for header type
  bm.add('header', {
    label: `Header`,
    media: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-.2-.7-.3-1-.3h-.6v-.4h6.8v.4h-.6c-.4 0-.7.1-1 .3a1 1 0 00-.6.6L18 6.9v10.3c0 .8 0 1.3.2 1.6 0 .2.2.3.4.5.4.2.7.3 1.1.3h.6v.4h-6.8v-.4h.5c.7 0 1.2-.2 1.5-.6.2-.3.3-.9.3-1.8v-4.9H8.3v4.9l.1 1.6.5.5c.3.2.7.3 1 .3h.7v.4H3.7v-.4h.6c.7 0 1.1-.2 1.4-.6.2-.3.3-.9.3-1.8V6.9L6 5.3a1 1 0 00-.5-.5l-1-.3h-.7v-.4h6.9v.4H10c-.4 0-.8.1-1 .3a1 1 0 00-.6.6l-.1 1.5v4.6z"></path></svg>`,
    content: {
      type: 'header',
      style: {
        "font-family": 'Helvetica'
      },
    },
    category: {
      label: selection_category,
    }
  });

on selecting the h1 and h2 tag it's changing the value in the HTML section as you can see in the video but the content is not updating according to the tag. could you please help me with this? Thanks

https://user-images.githubusercontent.com/20657737/104281764-03e3e900-54d4-11eb-9b7d-959be8efa45a.mov

Answers (0)

No answers yet.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.