Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding traits make it unrenderable

See original GitHub issue

Good

      const editor = window.grapesjs.init({
        autorender: false,
        container: '#gjs',
        plugins: ['gjs-preset-newsletter'],
      })
      mergeContents.forEach(a => {
        editor.BlockManager.add(camelCase(a.name), {
          label: a.name,
          category: 'Snippets',
          content: { type: camelCase(a.name) },
          attributes: { class: 'fa fa-link' },
        })

        const defaultType = editor.DomComponents.getType('default')
        editor.DomComponents.addType(camelCase(a.name), {
          model: defaultType.model.extend(

            {
              toHTML() {
                return `<div data-type="${camelCase(a.name)}">${a.value}</div>`
              },
            },
            {
              isComponent(el) {
                if (
                  el &&
                  typeof el === 'object' &&
                  el.getAttribute &&
                  el.hasAttribute('data-type') &&
                  el.getAttribute('data-type') === camelCase(a.name)
                ) {
                  return { type: camelCase(a.name) }
                }
              },
            }
          ),
          view: defaultType.view.extend({
            render() {
              this.el.innerHTML = placeholderImage(a.name)
              return this
            },
          }),
        })
      })

      editor.render()

Bad

      const editor = window.grapesjs.init({
        autorender: false,
        container: '#gjs',
        plugins: ['gjs-preset-newsletter'],
      })
      mergeContents.forEach(a => {
        editor.BlockManager.add(camelCase(a.name), {
          label: a.name,
          category: 'Snippets',
          content: { type: camelCase(a.name) },
          attributes: { class: 'fa fa-link' },
        })

        const defaultType = editor.DomComponents.getType('default')
        editor.DomComponents.addType(camelCase(a.name), {
          model: defaultType.model.extend(
            {
              defaults: Object.assign(
                {},
                defaultType.model.prototype.defaults,
                {
                  traits: [
                    {
                      type: 'select',
                      label: 'Type',
                      name: 'type',
                      changeProp: 1,
                      options: [
                        { value: 'text', name: 'Text' },
                        { value: 'email', name: 'Email' },
                        { value: 'password', name: 'Password' },
                        { value: 'number', name: 'Number' },
                      ],
                    },
                  ],
                }
              ),
            },
            {
              toHTML() {
                return `<div data-type="${camelCase(a.name)}">${a.value}</div>`
              },
            },
            {
              isComponent(el) {
                if (
                  el &&
                  typeof el === 'object' &&
                  el.getAttribute &&
                  el.hasAttribute('data-type') &&
                  el.getAttribute('data-type') === camelCase(a.name)
                ) {
                  return { type: camelCase(a.name) }
                }
              },
            }
          ),
          view: defaultType.view.extend({
            render() {
              this.el.innerHTML = placeholderImage(a.name)
              return this
            },
          }),
        })
      })

      editor.render()

Issue Analytics

State:
Created 6 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

Geczycommented, Aug 30, 2017

That fixes it 👍

0reactions

lock[bot]commented, Sep 18, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Top Results From Across the Web

Vary for Traits in Xcode 13 beta? | Apple Developer Forums

Trait Variations need to be enabled in the File Inspector tab; After that you can manually add traits by clicking the plus next...

5 Property Refinement / Resolution - W3C

For many traits there is a one-to-one correspondence with a property; for other traits the transformation is more complex. Details on the transformation...

Can a person add traits to their personality? How and why?

Yes I think so, due to neuroplasticity. You will notice in the chart below personality resides in the conscious mind and through meditation, ......

fx-team: changeset 290272 ... - Mercurial - Mozilla

Bug 1257874 - Use getProperties instead of getFrames in animation-detail. r=pbro Add a getProperties function to the animation actor to map ...

Operation Summary - AWS SDK for PHP 3.x

You can also create and send a command immediately using the magic ... that is, unrender it from view and delete it from...