Concerns Regarding Inline and External JS Handling in GrapesJS Custom code

[pankaj77official-git]

Hello, I am working on a custom preview system for a project built using GrapesJS. I am attempting to handle both inline and external JavaScript within the editor, and I've created a method to preview the content as follows:

`open(editor: Editor) {
if (!editor) return;

const pages = editor.Pages.getAll().map((p: any) => {
const main = p.getMainComponent();
let html = main.toHTML({ withoutScripts: false });
const temp = document.createElement('div');
temp.innerHTML = html;

const inlineScripts: string[] = [];
const externalScripts: string[] = [];

temp.querySelectorAll('script').forEach(script => {
  const src = script.getAttribute('src');
  if (src) {
    externalScripts.push(src);
  } else {
    inlineScripts.push(script.innerHTML);
  }
  script.remove(); 
});

html = temp.innerHTML;

const componentJs = editor.getJs({ component: main });

return {
  id: p.id,
  html,
  css: editor.getCss({ component: main }),
  js: componentJs + '\n' + inlineScripts.join('\n'),
  externalScripts
};

});

// Open preview window
const previewWindow = window.open('');
if (!previewWindow) return;

previewWindow.document.open();
previewWindow.document.write(`




<title>Preview</title>
<style>
body { margin: 0; }
</style>

<script>
const pages = ${JSON.stringify(pages)};
let currentBodyClasses = [];
let currentScripts = [];
let currentExternalScripts = [];

      function renderPage(pageId) {
        const page = pages.find(p => p.id === pageId) || pages[0];
        const parser = new DOMParser();
        const doc = parser.parseFromString(page.html, 'text/html');
        const body = doc.body;

        if (currentBodyClasses.length) {
          document.body.classList.remove(...currentBodyClasses);
        }

        const bodyClass = body.getAttribute('class');
        currentBodyClasses = bodyClass ? bodyClass.split(' ') : [];
        if (currentBodyClasses.length) {
          document.body.classList.add(...currentBodyClasses);
        }

        currentScripts.forEach(script => script.remove());
        currentScripts = [];

        currentExternalScripts.forEach(script => script.remove());
        currentExternalScripts = [];

        const app = document.getElementById('app');
        app.innerHTML = \`
          <style>\${page.css}</style>
          \${body.innerHTML}
        \`;

        if (page.externalScripts && page.externalScripts.length) {
          page.externalScripts.forEach(src => {
            if (!document.querySelector(\`script[src="\${src}"]\`)) {
              const s = document.createElement('script');
              s.type = 'text/javascript';
              s.src = src;
              s.onload = () => {
                console.log('External script loaded:', src);
              };
              document.body.appendChild(s);
              currentExternalScripts.push(s);
            }
          });
        }

        if (page.js && page.js.trim()) {
          const script = document.createElement('script');
          script.type = 'text/javascript';
          script.textContent = \`
            (function() {
              try {
                \${page.js}
              } catch (e) {
                console.error('Page JS error:', e);
              }
            })();
          \`;
          document.body.appendChild(script);
          currentScripts.push(script);
        }
      }

      function getPageFromHash() {
        const match = location.hash.match(/page=([^&]+)/);
        return match && match[1];
      }

      renderPage(getPageFromHash());

      window.addEventListener('hashchange', () => {
        renderPage(getPageFromHash());
      });

      document.addEventListener('click', e => {
        const a = e.target.closest('a');
        if (!a) return;
        const href = a.getAttribute('href');
        if (!href) return;
        if (href.startsWith('#') || href.startsWith('http')) return;

        if (pages.some(p => p.id === href)) {
          e.preventDefault();
          location.hash = 'page=' + href;
        }
      });

      document.addEventListener('submit', async e => {
        const form = e.target;
        if (!(form instanceof HTMLFormElement)) return;

        e.preventDefault(); 
        const action = form.getAttribute('action');
        const method = (form.getAttribute('method') || 'GET').toUpperCase();
        if (!action) return;

        const formData = new FormData(form);
        try {
          const res = await fetch(action, {
            method,
            body: method === 'GET' ? null : formData,
          });
          console.log('Form submitted successfully', res);
        } catch (err) {
          console.error('Form submission failed', err);
        }
      });
    </script>
  </body>
</html>

`);

previewWindow.document.close();
}
`

Question:

I have created a system to preview pages with inline and external scripts separately, but I am concerned about potential issues with this approach, especially regarding security, performance, or compatibility with GrapesJS updates.

• Are there any risks associated with handling inline and external JavaScript this way?
• Are there potential problems when publishing a website built with this preview system?
• Would this method affect the performance or functionality of the website when using GrapesJS?
• I would appreciate any feedback or suggestions on improving this system or any known concerns.

Thank you in advance!