Can it include widgets?

[Geczy]

Where I drag over a block, and instead of it displaying HTML, it displays a placeholder to the frontend.

Can this be done?

[artf]

@Geczy sure, you can create new component types, where in view you put whatever you want as a placeholder and in model, you might want override the toHTML and return some kind of variable to replace later

comps.addType('placeholder', {
  model: ...
        toHTML() {
          return '<div>VAR-TO-REPLACE</div>';
        }
        ...
  view: ...
      render() {
       this.el.innerHTML = 'placeholder content...';
       return this;
      }

  }),
});

[Geczy]

@artf What does the isComponent look like? Do I extend default type?

blockManager.add('placehole', {
  label: 'Orders Placeholder',
  category: 'Snippets',
  content: '<div class="my-block">This is a simple block</div>',
})

const defaultType = comps.getType('placehole')
comps.addType('placehole', {
  model: defaultType.model.extend({
    toHTML() {
      return '<div>{var-to-replace}</div>'
    },
  }),
  view: defaultType.view.extend({
    render(...args) {
      this.el.innerHTML = 'Image placeholder goes here' // <- Doesn't affect the final HTML code
      return this
    },
  }),
})

Is this correct?

How can I turn this into a block?

New to GrapesJS, trying to read the Wiki but still a little confusing

[Geczy]

Figured it out, for anyone else wondering it's like this:

blockManager.add('orderSnippet', {
  label: 'Orders',
  category: 'Snippets',
  content: { type: 'orderSnippet' },
})

const defaultType = comps.getType('default')
comps.addType('orderSnippet', {
  model: defaultType.model.extend({
    toHTML() {
      return '<div>{var-to-replace}</div>'
    },
  }),
  view: defaultType.view.extend({
    render(...args) {
      defaultType.view.prototype.render.apply(this, args)
      this.el.innerHTML = 'Image placeholder goes here' // <- Doesn't affect the final HTML code
      return this
    },
  }),
})

[Geczy]

So that works, but when I refresh it shows the <div>{var-to-replace}</div>

How can I make it show the placeholder again on refresh?

[Geczy]

Tried adding isComponent which is supposed to fix that I think, but that doesn't work

const editor = window.grapesjs.init({
  container: '#gjs',
  plugins: ['gjs-preset-newsletter', 'gjs-blocks-basic'],
})

editor.BlockManager.add('orderSnippet', {
  label: 'Order Items',
  category: 'Snippets',
  content: { type: 'orderSnippet' },
})

const defaultType = editor.DomComponents.getType('default')
editor.DomComponents.addType('orderSnippet', {
  model: defaultType.model.extend(
    {
      toHTML() {
        return '<div>{var-to-replace}</div>'
      },
    },
    {
      isComponent(el) {
        return { type: 'orderSnippet' }
      },
    }
  ),
  view: defaultType.view.extend({
    render(...args) {
      defaultType.view.prototype.render.apply(this, args)
      this.el.innerHTML = placeholderImage('Order Items')
      return this
    },
  }),
})

Can you see the issue? Even tried:

{
  isComponent(el) {
    return { type: 'orderSnippet' }
  },
}

[Geczy]

@artf

Refresh:

What I want it to display on refresh, which it isn't currently:

[Geczy]

Solved via https://github.com/artf/grapesjs/issues/43

[artf]

@Geczy glad you've solved, but would like to point out that isComponent defined like this will break stuff in importing. isComponent is used by the editor to recognize HTML elements and attach the appropriate type. When you define a new Component Type, this one is added on top of the type stack and on any new HTML element, this stack is iterated from the top so with your isComponent everything will be of orderSnippet type.

[Geczy]

I was using that just to debug, I have it changed to https://github.com/artf/grapesjs/issues/260#issue-253742728

              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) }
                }

[lock[bot]]

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.