Issue #2839Opened June 19, 2020by akashdesale980 reactions

[Question] I added one component named template in the blocks but when i try to drag another components inside this template component ,it will be dragged but after saving it removes all the components inside it. How to avoid this?

Question

This is code of template component:

export default {
  init(editor) {
    editor.DomComponents.addType('myTemplate', {
      isComponent: el => el.tagName == 'template',
      model: {
        id: 'template',
        defaults: {
          tagName: 'template',
          hoverable: true,
          resizable: {
            minDim: 20,
            tc: 1, // Top handler
            cl: 1, // Left handler
            cr: 1, // Right handler
            bc: 1 // Bottom handler
          },
          // As by default, traits are binded to attributes, so to define
          // their initial value we can use attributes
          attributes: {
            'data-gjs-type': 'myTemplate'
          }
        }
      },
      view: {
        // eg. You can customize the tag in the canvas
        // By default, the view will use the same tag of the model
        tagName: 'div',
        // onRender() {
        //   this.el.innerHTML = `<div data-gjs-type="divWrapper" style="min-height:60px;"></div>`;
        // }
      }
    });
    editor.BlockManager.add('myTemplate', {
      label: `<div class="mdi mdi-table"></div>
          <label class="gjs-block-label">Template</label>`,
      category: 'Components',
      attributes: { class: 'gjs-block-section' },
      // Select the component once it's dropped
      select: true,
      // This triggers `active` event on dropped components and the `image`
      // reacts by opening the AssetManager
      activate: true,
      content:
        '<template style="width:100%" data-gjs-type="myTemplate"></template>'
    }); }};

I debugged it, so i got that : setComponents method in the dom_components clearing it ...but not getting why it is removing?

setComponents(components) {
      this.clear().addComponent(components);
}

setComponents calls clear method which is responsible for removing elements inside it

clear() {
      this.getComponents()
        .map(i => i)
        .forEach(i => i.remove());
      return this;
    }

I commented this so it was working fine and persisted the components inside component ...is there any way to avoid this?

Answers (1)

artfJune 25, 20200 reactions

<template> tag should be treated differently #244

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.