🔍 Assistance Needed: “Import Code” Functionality in Open-Source GrapesJS vs. Studio SDK

[Aze1337]

🔍 Assistance Needed: "Import Code" Functionality in Open-Source GrapesJS vs. Studio SDK

Hello GrapesJS Community,

I hope this message finds you well. I'm reaching out to seek assistance and gain a deeper understanding of the "Import Code" feature within GrapesJS, specifically comparing the open-source version with the Studio SDK version.

🛠️ Issue Description

I've been working on a complex project using the open-source GrapesJS editor. Recently, I attempted to utilize the <import code> feature to import various complete webpages into my project. However, I've encountered significant issues:

• Styling Discrepancies: When importing pages using the open-source GrapesJS, the styling often appears very off or broken. This issue is prevalent across multiple websites, including:

  • Roblox Login
  • YouTube
  • Netflix

• Studio SDK Success: In contrast, using the same import process within the GrapesJS Studio SDK (Studio SDK Demo), the styling and layout are preserved accurately, closely matching the original websites.

📄 Questions

1. How Does the "Import Code" Feature Work in Studio SDK?

   • Is there specific documentation or resources that explain how the Studio SDK handles the import functionality differently from the open-source version?

2. Are There Any Plugins Available?

   • Are there any existing GrapesJS plugins that enhance the import functionality to handle complete HTML/CSS (and possibly JavaScript) imports more effectively, similar to the Studio SDK?

3. Differences Between Open-Source GrapesJS and Studio SDK:

   • Are there documented differences between the open-source GrapesJS and the Studio SDK versions that might explain why the import functionality works better in Studio SDK?

💡 Why I Prefer the Open-Source Version

I've already invested significant time and effort into building a complex project using the standard open-source GrapesJS editor. Migrating to the Studio SDK would require substantial rework, so I'm keen on enhancing the import functionality within the open-source version to match the capabilities of the Studio SDK.

** 💰 Compensation Offer **

I’m willing to compensate anyone who can provide guidance, share relevant resources, or assist in implementing a solution to enhance the import functionality within the open-source GrapesJS. Your expertise and support would be invaluable in saving me a significant amount of development time. ($200 USD, crypto or paypal).

🔧 What I've Tried

To demonstrate the issue, I've created a CodeSandbox Example showcasing my current implementation. Here's a snippet of the code I've been working with:

// src/components/GrapesJSEditor/GrapesJSEditor.js

import React, { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import styles from './GrapesJSEditor.module.css';
import { toast } from 'react-toastify';
import { v4 as uuidv4 } from 'uuid';

const GrapesJSEditor = () => {
  const editorRef = useRef(null);

  // Generate unique IDs for project and identity
  const projectId = uuidv4();
  const endUserId = uuidv4();

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file && (file.type === 'text/html' || file.type === 'text/css')) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target.result;
        if (editorRef.current) {
          try {
            if (file.type === 'text/html') {
              editorRef.current.setComponents(content);
              toast.success('HTML file loaded successfully!');
            } else if (file.type === 'text/css') {
              editorRef.current.setStyle(content);
              toast.success('CSS file loaded successfully!');
            }
          } catch (error) {
            console.error('Error loading file into GrapesJS:', error);
            toast.error('Failed to load file.');
          }
        }
      };
      reader.readAsText(file);
    } else {
      toast.error('Please upload a valid HTML or CSS file.');
    }
  };

  useEffect(() => {
    const editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '100vh',
      width: 'auto',
      storageManager: false,
      plugins: [], // Add your plugins here
      pluginsOpts: {},
      // ... other configurations
    });

    editorRef.current = editor;

    // Add "Import Code" button
    editor.Panels.addButton('options', [{
      id: 'import-code',
      className: 'fa fa-upload',
      command: 'open-import-modal',
      attributes: { title: 'Import Code' }
    }]);

    // Define the "Import Code" command
    editor.Commands.add('open-import-modal', {
      run(editor, sender) {
        sender && sender.set('active', 0); // Deactivate the button

        const modal = editor.Modal;
        const container = document.createElement('div');
        container.innerHTML = `
          <div style="padding: 20px;">
            <h2>Import Code</h2>
            <textarea id="import-html" placeholder="Paste your HTML here" style="width: 100%; height: 200px; margin-bottom: 10px;"></textarea>
            <button id="import-btn" style="margin-top: 10px; padding: 10px 20px;">Import</button>
          </div>
        `;

        modal.setTitle('Import Code');
        modal.setContent(container);
        modal.open();

        document.getElementById('import-btn').onclick = () => {
          const html = document.getElementById('import-html').value;

          try {
            const { html: parsedHtml, externalCss, inlineCss, inlineJs } = parseHTML(html);

            if (parsedHtml) {
              editor.setComponents(parsedHtml);
              toast.success('HTML imported successfully!');
            }

            if (externalCss.length > 0) {
              externalCss.forEach(href => {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = href;
                editor.Canvas.getDocument().head.appendChild(link);
              });
              toast.success('External CSS loaded successfully!');
            }

            if (inlineCss) {
              const styleTag = document.createElement('style');
              styleTag.innerHTML = inlineCss;
              editor.Canvas.getDocument().head.appendChild(styleTag);
              toast.success('Inline CSS loaded successfully!');
            }

            if (inlineJs) {
              try {
                const script = document.createElement('script');
                script.innerHTML = inlineJs;
                editor.Canvas.getWindow().document.body.appendChild(script);
                toast.success('JavaScript imported successfully!');
              } catch (jsError) {
                console.error('Error importing JavaScript:', jsError);
                toast.error('Failed to import JavaScript.');
              }
            }

            modal.close();
          } catch (error) {
            console.error('Error importing code:', error);
            toast.error('Failed to import code.');
          }
        };
      }
    });

    // Handle errors
    editor.on('error', (error) => {
      console.error('GrapesJS Error:', error);
      toast.error('An error occurred within GrapesJS.');
    });

    return () => {
      editor.destroy();
    };
  }, []);

  return (
    <div className={styles.editorWrapper}>
      <input
        type="file"
        accept=".html,.css"
        onChange={handleFileUpload}
        className={styles.fileInput}
      />
      <div className={styles.studioContainer}>
        <div id="gjs" style={{ height: '100vh', width: '100%' }}>
        </div>
      </div>
    </div>
  );
};

export default GrapesJSEditor;

[Aze1337]

tldr : i want the same html/css parser as the studio sdk version and im willing to pay for anyone that can help me with that.

[Aze1337]

on top of that I even tried the studio sdk but I do not like it from a privacy standpoint ,to me it seems that this project turned to be a saas.

i dont want anyone to stalk my customers or myself.

[Aze1337]

I even try the same .html as I try on the studio sdk demo and end up with a wide range of errors when importing those html :

Uncaught TypeError: this.model.classes.pluck is not a function
at o.updateClasses (ComponentView.ts:316:36)
at o.renderAttributes (ComponentView.ts:565:10)
at n.parseString (Components.ts:268:12)
at n.add (Components.ts:298:21)
at o.addComponent (index.ts:495:33)