Components & Js - Load Template

Hi Arthur, are you able to create a demo of the issue?

Other problem: the data-gjs-type is changed to default instead of keeping my custom component type name when the template is loaded. It seems the isComponent method is not called when I have a JS attached to it

Do you rely on HTML for storing/loading?

I'm having the same issue. When I drop a Component with a script, it works but after I refresh, it doesn't You can test it out grapesjs-component-countdown, after you refresh, the digits don't show up. this is my config ( it is used in an Angular application, some help would also be helpful )

UPDATE: after researching, seems that JS is not saved in LocalStorage and also it doesn't try to rerender the component to add JS if it is missing, also if I try to use getScript() after reloading, it returns an empty string.

this.editor = grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: this.grapeJsElement.nativeElement,
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      fromElement: true,
      // Size of the editor
      autorender: 0,
      height: '100%',
      width: '100%',
      noticeOnUnload: true,
      showOffsets: false,
      showOffsetsSelected: true,
      forceClass: true,
      log: true,
      allowScripts: 1,
      mediaCondition: 'min-width',
      keepEmptyTextNodes: 0,
      jsInHtml: true,
      nativeDnD: 1,
      multipleSelection: 1,
      exportWrapper: 1,
      wrappesIsBody: 1,
      avoidInlineStyle: 1,
      avoidDefaults: 0,
      clearStyles: 0,

      canvas: {
        scripts: [
          "assets/jquery.min.js"
        ],
        styles: [
          "assets/bootstrap.min.css",
          "assets/ms-print-pdf.css"
        ]
      },

      // Configurations for Layers
      layerManager: {
        appendTo: this.grapejsLayersContainer.nativeElement
      },

      // Configurations for Panels
      panels: this.getPanelsConfig(),

      // Configurations for Selector Manager
      selectorManager: {
        appendTo: this.grapejsStyleContainer.nativeElement,
      },

      // Configurations for Device Manager
      deviceManager: this.getDeviceManagerConfig(),

      // Configurations for Style Manager
      styleManager: this.getStyleManagerConfig(),

      // Configurations for Block Manager
      blockManager: this.getBlockManagerConfig(),

      traitManager: {
        appendTo: this.grapejsTraitsContainer.nativeElement,
      }
    });

    this.setDeviceViewCommands();
    this.setRightPanelCommands();
    this.addComponents()

    this.editor.Commands.add('save-fisa', {
      run: (editor, element) => {
        this.saveFisa(editor);
      },
      stop: (editor, element) => {

      }
    });

    this.editor.render();
    // console.log(editor);
  }

  ngAfterViewInit() {
    console.log(this.grapeJsElement);
  }


  saveFisa(editor) {
    console.log("Html:", editor.getHtml());
    console.log("Css:", editor.getCss());
    console.log("JS:", editor.getJs())
    console.log("Componenets:", editor.getComponents())
  }

  // MARK:- Configs
  private getPanelsConfig() {
    return {
      defaults: [
        {
          id: 'panel-top',
          el: '.panel__top',
        },
        {
          id: 'panel-right',
          el: '.panel__right',
        },
        {
          id: 'device-toggle',
          buttons: [{
            id: 'desktop',
            active: true, // active by default
            className: 'btn-toggle-borders',
            label: '<i class="fas fa-desktop"></i>',
            command: 'set-desktop-view', // Built-in command
            context: "device-view-change",
            togglable: false,
          }, {
            id: 'tablet',
            className: 'btn-toggle-borders',
            label: '<i class="fas fa-tablet-alt"></i>',
            command: 'set-tablet-view', // Built-in command
            context: "device-view-change",
            togglable: false,
          }, {
            id: 'mobile',
            className: 'btn-toggle-borders',
            label: '<i class="fas fa-mobile-alt"></i>',
            command: 'set-mobile-view', // Built-in command
            context: "device-view-change",
            togglable: false,
          }],
          el: '.panel__devices'
        },
        {
          id: 'basic-actions',
          el: '.panel__basic-actions',
          buttons: [
            {
              id: 'visibility',
              active: true, // active by default
              className: 'btn-toggle-borders',
              label: '<u>B</u>',
              command: 'sw-visibility', // Built-in command
            }, {
              id: 'export',
              className: 'btn-open-export',
              label: 'Exp',
              command: 'export-template',
              context: 'export-template', // For grouping context of buttons from the same panel
            }, {
              id: 'show-json',
              className: 'btn-show-json',
              label: 'JSON',
              context: 'show-json',
              command(editor) {
                editor.Modal.setTitle('Components JSON')
                  .setContent(`<textarea style="width:100%; height: 250px;">
            ${JSON.stringify(editor.getComponents())}
          </textarea>`)
                  .open();
              },
            }, {
              id: "save-fisa",
              className: "btn",
              label: "<i class='fa fa-save'></i>",
              command: 'save-fisa',
              togglable: false,
            }
          ],
        }, {
          id: "panel-switcher",
          el: ".panel__switcher",
          buttons: [
            {
              id: 'show-layers',
              active: true,
              className: "tab-btn",
              label: "<i class='fas fa-layer-group'></i>",
              command: 'show-layers',
              // Once activated disable the possibility to turn it off
              togglable: false,
            }, {
              id: 'show-styles',
              active: true,
              className: "tab-btn",
              label: "<i class='fas fa-paint-brush'></i>",
              command: 'show-styles',
              togglable: false,
            }, {
              id: 'show-blocks',
              active: true,
              className: "tab-btn",
              label: "<i class='fas fa-th-large'></i>",
              command: "show-blocks",
              togglable: false,
            },
            {
              id: 'show-traits',
              active: true,
              className: "tab-btn",
              label: "<i class='fas fa-cogs'></i>",
              command: "show-traits",
              togglable: false,
            }
          ]
        }
      ],
    }
  }

  private getBlockManagerConfig() {
    return {
      appendTo: this.grapeJsBlocksElement.nativeElement,
      blocks: [{
        id: 'text',
        label: 'Text',
        content: '<div data-gjs-type="text">Insert your text here</div>',
      }]
    };
  }

  private getDeviceManagerConfig() {
    return {
      devices: [
        {
          name: 'Desktop',
          width: ''
        },
        {
          name: 'Tablet',
          width: '768px',
          widthMedia: '992px'
        },
        {
          name: 'Mobile',
          width: '320px',
          widthMedia: '480px'
        }
      ]
    }
  }

  private getStyleManagerConfig() {
    return {
      appendTo: this.grapejsStyleContainer.nativeElement,
      sectors: [
        {
          name: 'General',
          open: false,
          buildProps: [
            'float',
            'display',
            'position',
            'top',
            'right',
            'left',
            'bottom'
          ]
        },
        {
          name: 'Flex',
          open: false,
          buildProps: [
            'flex-direction',
            'flex-wrap',
            'justify-content',
            'align-items',
            'align-content',
            'order',
            'flex-basis',
            'flex-grow',
            'flex-shrink',
            'align-self'
          ]
        },
        {
          name: 'Dimension',
          open: false,
          buildProps: [
            'width',
            'height',
            'max-width',
            'min-height',
            'margin',
            'padding'
          ]
        },
        {
          name: 'Typography',
          open: false,
          buildProps: [
            'font-family',
            'font-size',
            'font-weight',
            'letter-spacing',
            'color',
            'line-height',
            'text-align',
            'text-shadow'
          ],
          properties: [
            {
              property: 'text-align',
              list: [
                {value: 'left', className: 'fa fa-align-left'},
                {value: 'center', className: 'fa fa-align-center'},
                {value: 'right', className: 'fa fa-align-right'},
                {value: 'justify', className: 'fa fa-align-justify'}
              ]
            }
          ]
        },
        {
          name: 'Decorations',
          open: false,
          buildProps: [
            'border-radius-c',
            'background-color',
            'border-radius',
            'border',
            'box-shadow',
            'background'
          ]
        },
        {
          name: 'Extra',
          open: false,
          buildProps: ['transition', 'perspective', 'transform']
        }
      ]
    }
  }

  // MARK:- Commands
  private setRightPanelCommands() {
    // Define commands
    this.editor.Commands.add('show-styles', {
      getRowEl(editor) {
        return editor.getContainer().closest('.editor-row');
      },
      getStyleEl(row) {
        return row.querySelector('.styles-container')
      },

      run(editor, sender) {
        const smEl = this.getStyleEl(this.getRowEl(editor));
        smEl.style.display = '';
      },
      stop(editor, sender) {
        const smEl = this.getStyleEl(this.getRowEl(editor));
        smEl.style.display = 'none';
      },
    });
    this.editor.Commands.add('show-layers', {
      getRowEl(editor) {
        return editor.getContainer().closest('.editor-row');
      },
      getLayersEl(row) {
        return row.querySelector('.layers-container')
      },

      run(editor, sender) {
        const lmEl = this.getLayersEl(this.getRowEl(editor));

        lmEl.style.display = '';
      },
      stop(editor, sender) {
        const lmEl = this.getLayersEl(this.getRowEl(editor));
        lmEl.style.display = 'none';
      },
    });


    this.editor.Commands.add('show-blocks', {
      getRowEl(editor) {
        return editor.getContainer().closest('.editor-row');
      },
      getBlocksEl(row) {
        return row.querySelector('.blocks-container')
      },

      run(editor, sender) {
        const bmEl = this.getBlocksEl(this.getRowEl(editor));
        bmEl.style.display = '';
      },
      stop(editor, sender) {
        const bmEl = this.getBlocksEl(this.getRowEl(editor));
        bmEl.style.display = 'none';
      },
    });

    this.editor.Commands.add('show-traits', {
      getRowEl(editor) {
        return editor.getContainer().closest('.editor-row');
      },
      getTraitsEl(row) {
        return row.querySelector('.traits-container')
      },

      run(editor, sender) {
        const tmEl = this.getTraitsEl(this.getRowEl(editor));
        tmEl.style.display = '';
      },
      stop(editor, sender) {
        const tmEl = this.getTraitsEl(this.getRowEl(editor));
        tmEl.style.display = 'none';
      },
    });

    const openBl = this.editor.Panels.getButton('panel-switcher', "show-blocks");
    this.editor.on('load', () => openBl && openBl.set('active', 1));
    this.editor.on('component:selected', () => {
      console.log("componentSelected");
      const openSmBtn = this.editor.Panels.getButton('panel-switcher', 'show-styles');
      openSmBtn.set('active', 1);
    });
  }

  private setDeviceViewCommands() {
    const cmds = this.editor.Commands;
    cmds.add('set-mobile-view', {
      run: (editor, element) => {
        editor.setDevice('Mobile');
        element.set('active', true);
      },
      stop: (editor, element) => {
        console.log("Mobile Stopped");
        element.set('active', false);
      }
    });

    cmds.add('set-tablet-view', {
      run: (editor, element) => {
        editor.setDevice('Tablet');
        element.set('active', true);
      },
      stop: (editor, element) => {
        console.log("Mobile Stopped");
        element.set('active', false);
      }
    });

    cmds.add('set-desktop-view', {
      run: (editor, element) => {
        editor.setDevice('Desktop');
        element.set('active', true);
      },
      stop: (editor, element) => {
        console.log("Mobile Stopped");
        element.set('active', false);
      }
    });
  }


  // MARK:- Utils

  private addComponents() {
    for (let key in components) {
      new components[key](this.editor);
    }
  }

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.