How to add script in block component and render it properly in page?

[ShohanMir]

I'm trying to add this script as a component and make it a drag and drop able block. Last time I posted a question where I tried to add a react component in the block manager. But I didn't get any proper answer for that. Whatever.
Now I'm trying it another way. I need help.

this is the script I want to add in the block component. I'm super new in the GrapesJS community and tried to learn it properly. But sometimes stuck on something for days and weeks that's why I posted questions and ask for help here.

      var d = document.createElement('div');
      var qs = document.createElement('script');
      d.classList.add('mtge-calc_embeded');
      var currentScriptTag = document.currentScript;
      d.setAttribute('id', 'mtge-calc_embeded');
      d.setAttribute(
        'data-sitekey',
        'sitekey-dummy'
      );
      qs.src =
        'https://mortgage-calculator.savagesales.com/static/js/plugin.js';
      qs.defer = true;
      var l1 = document.createElement('link');
      l1.setAttribute('rel', 'stylesheet');
      l1.setAttribute('type', 'text/css');
      l1.setAttribute(
        'href',
        'https://mortgage-calculator.savagesales.com/static/css/plugin.css'
      );
      document.head.appendChild(l1);
      currentScriptTag.parentNode.insertBefore(d, currentScriptTag);
      document.body.appendChild(qs);
    </script>

This is the way I tried to get the job done:

const MortgageRatesWidget = {
  id: 'mortgage-rates-widget',
  label: 'Mortgage Rates Widget',
  content: <div data-gjs-type="mortgage-rates-widget"></div>,
  attributes: { class: 'fa fa-calculator' }, // Add any class for the block icon
};

const mortgageRatesWidget = function (editor) {
  var d = editor.Canvas.getDocument().createElement('div');
  var qs = editor.Canvas.getDocument().createElement('script');
  d.classList.add('mtge-calc_embeded');
  d.setAttribute('id', 'mtge-calc_embeded');
  d.setAttribute('data-sitekey', 'OVBazy8m-tJJvug7baBHEjdh5ZnfYr3HEM3XFADdsP4');
  qs.src = 'https://mortgage-calculator.savagesales.com/static/js/plugin.js';
  qs.defer = true;
  var l1 = editor.Canvas.getDocument().createElement('link');
  l1.setAttribute('rel', 'stylesheet');
  l1.setAttribute('type', 'text/css');
  l1.setAttribute(
    'href',
    'https://mortgage-calculator.savagesales.com/static/css/plugin.css'
  );
  editor.Canvas.getDocument().head.appendChild(l1);
  d.appendChild(qs);
  editor.Canvas.getDocument().body.appendChild(d);
};

export default mortgageRatesWidget;

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import useContext from '../../context/StateProvider';
import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
import gjsPresetWebpage from 'grapesjs-preset-webpage';
import gjsCustomCode from 'grapesjs-custom-code';
import gjsTap from 'grapesjs-tabs';
import gjsBasicBlocks from 'grapesjs-blocks-basic';
import gjsForms from 'grapesjs-plugin-forms';
import gjsPluginExport from 'grapesjs-plugin-export';
import gjsTouch from 'grapesjs-touch';
import gjsParserCss from 'grapesjs-parser-postcss';
import gjsTooltip from 'grapesjs-tooltip';
import gjsImageEditor from 'grapesjs-tui-image-editor';
import gjsTyped from 'grapesjs-typed';
import gjsStyleBg from 'grapesjs-style-bg';
import ReactDOM from 'react-dom';
import mortgageRatesWidget from './CustomComonent';
import MortgageWidget from './mortgageWidget';

function EditorGs({ pageId, userId = null, storageUrl, handleSubmit }) {
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: '#editor',

      storageManager: {
        type: 'remote',
        id: 'mycustom-',
        options: {
          remote: {
            id: 'mycustom-',
            urlLoad: storageUrl,
            urlStore: storageUrl,
            fetchOptions: (opts) => {
              if (opts.body) {
                const contentWithAssets = JSON.parse(opts.body);
                opts.body = JSON.stringify(contentWithAssets);
              }
              return opts.method === 'POST' ? { method: 'PUT' } : {};
            },
            onStore: (data, editor) => {
              const pagesHtml = editor.Pages.getAll().map((page) => {
                const component = page.getMainComponent();
                return {
                  html: editor.getHtml({ component }),
                  css: editor.getCss({ component }),
                };
              });
              return { id: pageId, data, pagesHtml };
            },
            onLoad: (result) => result.data,
          },
        },
      },

      blockManager: {
        blocks: [MortgageWidget],
      },

      panels: { defaults: [] },
      plugins: [
        gjsPresetWebpage,
        gjsCustomCode,
        gjsTap,
        gjsBasicBlocks,
        gjsForms,
        gjsPluginExport,
        gjsTouch,
        gjsParserCss,
        gjsTooltip,
        gjsImageEditor,
        gjsTyped,
        gjsStyleBg,
      ],
      pluginsOpts: {
        gjsPresetWebpage: {},
      },
    });
    setEditor(editor);

    //******block manager config
    editor.Components.addType('mortgage-rates-widget', {
      model: {
        defaults: {
          mortgageRatesWidget,
          // Add some style, just to make the component visible
          style: {
            width: '100px',
            height: '100px',
            background: 'red',
          },
        },
      },
    });

    // Handle 'component:add' event
    editor.on('component:add', (model) => {
      if (model.attributes.type === 'mortgage-rates-widget') {
        model.view.render();
      }
    });

    //******block manager config

    // Add a custom button to the panel toolbar
    const panelManager = editor.Panels;
    panelManager.addButton('options', {
      id: 'save-db',
      className: 'fa fa-save',
      command: 'save-db',
      attributes: { title: 'Save Page' },
    });

    // Register the save command
    editor.Commands.add('save-db', {
      run: (editor, sender) => {
        sender && sender.set('active');
        editor.store();
      },
    });

    // Add a custom button to the panel toolbar
    panelManager.addButton('options', {
      id: 'save-publish',
      className: 'save-publish-button',
      command: 'save-publish',
      label: 'Save & Publish',
    });

    editor.Commands.add('save-publish', {
      run: (editor, sender) => {
        sender && sender.set('active');
        const html = editor.getHtml();
        const css = editor.getCss();
        handleSubmit(html, css);
      },
    });

    return () => {
      // Clean up the editor instance if necessary
      editor.destroy();
    };
  }, [userId, storageUrl, handleSubmit, pageId]);

  return (
    <div>
      <div id="editor"></div>
    </div>
  );
}

export default EditorGs;

But it's not working properly. Just a red square showing on the canvas whenever I drag and drop it.

@artf Thanks for making such a brilliant tool.

[artf]

Read here how to create custom components with JS.

By looking at your code it also looks like you're doing some nonsense... like adding a plugin code inside the component?!?

import mortgageRatesWidget from './CustomComonent';
// ...
 editor.Components.addType('mortgage-rates-widget', {
      model: {
        defaults: {
          mortgageRatesWidget, // ??????
// ...

[artf]

Can you post the output HTML/CSS you're saving with that component?

[ShohanMir]

Here are the HTML and CSS from the database with that component:

"html": "<body><header id=\"inei\" class=\"header-banner\"></header><div id=\"id3l6i\" class=\"gjs-row\"><div id=\"i02qxx\" class=\"gjs-cell\"><img src=\"data:image/jpeg;base64,/9j/4AAABJRU5ErkJggg==\" class=\"img-phone\"/></div></div><div id=\"i30ne2\" class=\"gjs-row\"><div id=\"ioluzf\" class=\"gjs-cell\"><div id=\"i7i16k\" class=\"flex-title\">John Doe</div><div class=\"profession-ttle\"><b id=\"ibp9t\">Profession:</b> Software Developer</div><div class=\"profession-ttle\"><b id=\"iwhgl\">Organization:</b> Savage Sales</div><div></div><div class=\"domain-link\"><a href=\"\" id=\"icp1mf\">Add domain</a><a href=\"\" id=\"i7fmwg\"></a></div><div></div><div class=\"am-desc\">John Doe is a highly passionate and innovative software developer with a deep love for crafting elegant code and solving complex problems. Armed with a degree in Computer Science, John has been immersed in the world of software development for over a decade. His journey began with humble beginnings of tinkering with basic programming languages during high school, which quickly evolved into a full-blown obsession with turning ideas into functional, user-friendly software.<br/><br/>As a lifelong learner, John stays at the forefront of the ever-evolving technology landscape, constantly honing his skills in cutting-edge programming languages, frameworks, and development methodologies. From web applications to mobile apps and everything in between, John possesses a diverse set of skills that make him a versatile and adaptable developer.<br/><br/>Throughout his career, John has collaborated with various cross-functional teams, seamlessly bridging the gap between technical jargon and user needs. His knack for understanding user requirements and translating them into intuitive and scalable solutions has earned him accolades from clients and colleagues alike.<br/><br/>Beyond coding, John is an excellent communicator and problem-solver, which helps him thrive in fast-paced environments and meet tight deadlines without breaking a sweat. He believes that teamwork, open communication, and a dash of creativity are the keys to building software that truly makes a positive impact.<br/><br/>When he's not tapping away at the keyboard, you can find John exploring the outdoors, indulging in sci-fi novels, or experimenting with the latest kitchen gadgets to whip up a culinary masterpiece.<br/><br/>Passionate, driven, and constantly pushing the boundaries of what's possible, John Smith is a force to be reckoned with in the world of software development.<br/><br/>Please note that this bio is purely fictional and for illustrative purposes only. Feel free to customize and modify it as needed for your actual profile.</div><div id=\"im2so\" class=\"gjs-row\"><div class=\"gjs-cell\"><div id=\"in3xu\"></div></div></div></div></div></body><script>var items = document.querySelectorAll('#in3xu');\n          for (var i = 0, len = items.length; i < len; i++) {\n            (function(){\nvar t=function(t){var e=document.createElement(\"div\");e.classList.add(\"mtge-calc_embeded\"),e.setAttribute(\"id\",\"mtge-calc_embeded\"),e.setAttribute(\"data-sitekey\",\"OVBazy8m-tJJvug7baBHEjdh5ZnfYr3HEM3XFADdsP4\"),t.appendChild(e);var i=document.createElement(\"script\");i.src=\"https://mortgage-calculator.savagesales.com/static/js/plugin.js\",i.defer=!0,document.head.appendChild(i);var o=document.createElement(\"link\");o.setAttribute(\"rel\",\"stylesheet\"),o.setAttribute(\"type\",\"text/css\"),o.setAttribute(\"href\",\"https://mortgage-calculator.savagesales.com/static/css/plugin.css\"),document.head.appendChild(o)},e=this;if(\"undefined\"==typeof document.currentScript){var i=document.createElement(\"script\");i.onload=function(){t(e)},i.src=\"https://mortgage-calculator.savagesales.com/static/js/plugin.js\",document.body.appendChild(i)}else t(e)\n}.bind(items[i]))();\n          }</script>",
   

"css": "* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin:0;}.header-banner{padding-top:35px;padding-bottom:100px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;background-image:url(\"https://grapesjs.com/img/bg-gr-v.png\"), url(\"https://grapesjs.com/img/work-desk.jpg\");background-attachment:scroll, scroll;background-position:left top, center center;background-repeat:repeat-y, no-repeat;background-size:contain, cover;height:460px;}.flex-title{margin-bottom:15px;font-size:3em;text-align:left;font-weight:700;color:#555;padding:5px;}.img-phone{float:right;width:150px;height:150px;}.am-desc{padding:7px;font-size:17px;line-height:25px;}.badge-avatar{width:150px;height:150px;border-radius:100%;border:5px solid #fff;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2);position:relative;margin:0 0 0 0;}.gjs-row{display:table;padding:10px;width:100%;}.gjs-cell{width:8%;display:table-cell;height:75px;}#i30ne2{display:block;padding:10px 50px 80px 50px;}.profession-ttle{font-size:2em;color:#555555;padding:10px 5px 10px 5px;}.domain-link{font-size:22px;padding:7px 7px 7px 7px;}#id3l6i{margin:-120px 0px 0px 0px;padding:10px 50px 10px 50px;}@media (max-width: 768px){.gjs-cell{width:100%;display:block;}}@media (max-width: 480px){.profession-ttle{font-size:1.5em;}.badge-avatar{width:100px;height:100px;}.img-phone{width:100px;height:100px;margin:-75px 0px 0px 0px;}#id3l6i{padding:0px 20px 5px 20px;margin:-75px 0 -45px 0px;}.header-banner{height:150px;}#i7i16k{font-size:2em;}#i30ne2{position:static;padding:10px 25px 80px 25px;}#ibp9t{font-size:20px;}#iwhgl{font-size:20px;}}",
 

[ShohanMir]

Hopefully, you will understand now.

<body><header id=\"inei\" class=\"header-banner\">
</header>
<div id=\"id3l6i\" class=\"gjs-row\">
<div id=\"i02qxx\" class=\"gjs-cell\">
<img src=\"data:image/jpeg;base64,/9j/4AAABJRU5ErkJggg==\" class=\"img-phone\"/></div></div><div id=\"i30ne2\" class=\"gjs-row\">
<div id=\"ioluzf\" class=\"gjs-cell\"> 
<div id=\"i7i16k\" class=\"flex-title\">John Doe</div>
 <div class=\"profession-ttle\"><b id=\"ibp9t\">Profession:</b> Software Developer</div>
<div class=\"profession-ttle\"><b id=\"iwhgl\">Organization:</b> Savage Sales</div>
<div>
</div>
<div class=\"domain-link\"><a href=\"\" id=\"icp1mf\">Add domain</a><a href=\"\" id=\"i7fmwg\"></a></div>
<div>
</div>
<div class=\"am-desc\">John Doe is a highly passionate and innovative software developer with a deep love for crafting elegant code and solving complex problems. Armed with a degree in Computer Science, John has been immersed in the world of software development for over a decade. His journey began with humble beginnings of tinkering with basic programming languages during high school, which quickly evolved into a full-blown obsession with turning ideas into functional, user-friendly software.<br/><br/>As a lifelong learner, John stays at the forefront of the ever-evolving technology landscape, constantly honing his skills in cutting-edge programming languages, frameworks, and development methodologies. From web applications to mobile apps and everything in between, John possesses a diverse set of skills that make him a versatile and adaptable developer.<br/><br/>Throughout his career, John has collaborated with various cross-functional teams, seamlessly bridging the gap between technical jargon and user needs. His knack for understanding user requirements and translating them into intuitive and scalable solutions has earned him accolades from clients and colleagues alike.<br/><br/>Beyond coding, John is an excellent communicator and problem-solver, which helps him thrive in fast-paced environments and meet tight deadlines without breaking a sweat. He believes that teamwork, open communication, and a dash of creativity are the keys to building software that truly makes a positive impact.<br/><br/>When he's not tapping away at the keyboard, you can find John exploring the outdoors, indulging in sci-fi novels, or experimenting with the latest kitchen gadgets to whip up a culinary masterpiece.<br/><br/>Passionate, driven, and constantly pushing the boundaries of what's possible, John Smith is a force to be reckoned with in the world of software development.<br/><br/>Please note that this bio is purely fictional and for illustrative purposes only. Feel free to customize and modify it as needed for your actual profile.</div>
<div id=\"im2so\" class=\"gjs-row\"><div class=\"gjs-cell\"><div id=\"in3xu\">
</div>
</div>
</div>
</div>
</div>
</body>
<script>var items = document.querySelectorAll('#in3xu');\n          for (var i = 0, len = items.length; i < len; i++) {\n            (function(){\nvar t=function(t){var e=document.createElement(\"div\");e.classList.add(\"mtge-calc_embeded\"),e.setAttribute(\"id\",\"mtge-calc_embeded\"),e.setAttribute(\"data-sitekey\",\"OVBazy8m-tJJvug7baBHEjdh5ZnfYr3HEM3XFADdsP4\"),t.appendChild(e);var i=document.createElement(\"script\");i.src=\"https://mortgage-calculator.savagesales.com/static/js/plugin.js\",i.defer=!0,document.head.appendChild(i);var o=document.createElement(\"link\");o.setAttribute(\"rel\",\"stylesheet\"),o.setAttribute(\"type\",\"text/css\"),o.setAttribute(\"href\",\"https://mortgage-calculator.savagesales.com/static/css/plugin.css\"),document.head.appendChild(o)},e=this;if(\"undefined\"==typeof document.currentScript){var i=document.createElement(\"script\");i.onload=function(){t(e)},i.src=\"https://mortgage-calculator.savagesales.com/static/js/plugin.js\",document.body.appendChild(i)}else t(e)\n}.bind(items[i]))();\n          }</script>",
   

"css": "
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin:0;}.header-banner{padding-top:35px;padding-bottom:100px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;background-image:url(\"https://grapesjs.com/img/bg-gr-v.png\"), url(\"https://grapesjs.com/img/work-desk.jpg\");background-attachment:scroll, scroll;background-position:left top, center center;background-repeat:repeat-y, no-repeat;background-size:contain, cover;height:460px;}.flex-title{margin-bottom:15px;font-size:3em;text-align:left;font-weight:700;color:#555;padding:5px;}.img-phone{float:right;width:150px;height:150px;}.am-desc{padding:7px;font-size:17px;line-height:25px;}.badge-avatar{width:150px;height:150px;border-radius:100%;border:5px solid #fff;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2);position:relative;margin:0 0 0 0;}.gjs-row{display:table;padding:10px;width:100%;}.gjs-cell{width:8%;display:table-cell;height:75px;}#i30ne2{display:block;padding:10px 50px 80px 50px;}.profession-ttle{font-size:2em;color:#555555;padding:10px 5px 10px 5px;}.domain-link{font-size:22px;padding:7px 7px 7px 7px;}#id3l6i{margin:-120px 0px 0px 0px;padding:10px 50px 10px 50px;}@media (max-width: 768px){.gjs-cell{width:100%;display:block;}}@media (max-width: 480px){.profession-ttle{font-size:1.5em;}.badge-avatar{width:100px;height:100px;}.img-phone{width:100px;height:100px;margin:-75px 0px 0px 0px;}#id3l6i{padding:0px 20px 5px 20px;margin:-75px 0 -45px 0px;}.header-banner{height:150px;}#i7i16k{font-size:2em;}#i30ne2{position:static;padding:10px 25px 80px 25px;}#ibp9t{font-size:20px;}#iwhgl{font-size:20px;}}",
 

[artf]

I tried your content and it works

so it seems to be related to how you are serving the final template on your side.

[ShohanMir]

Can you give me a snippet or demo of the way you serving the final template?

[artf]

I only created an HTML file with your same content 😅

[artf]

don't you see any error in console of your final page?

[ShohanMir]

No.