html-to-gutenberg 4.2.5 → 4.2.7

package/index.ts

@@ -1,67 +1,23 @@
-import axios from 'axios';
+import presetReact from '@babel/preset-react';
+import * as babel from '@babel/core';
 import * as cheerio from 'cheerio';
-import convert from 'node-html-to-jsx';
+import scopeCss from 'css-scoping';
+import extractAssets from 'fetch-page-assets';
 import fs from 'fs';
-import path from 'path';
-import * as babel from '@babel/core';
-import presetReact from '@babel/preset-react';
-import { transform } from '@svgr/core';
-import extractAssets from 'fetch-page-assets/index.js';
 import icon from 'html-screenshots';
-import imageToBase64 from 'image-to-base64';
+import { createRequire } from 'module';
+import convert from 'node-html-to-jsx';
+import path from 'path';
 
 import {
   imports,
-  panels,
   images,
   characters
 } from './globals.js';
 
-interface Attributes {
-  [key: string]: {
-    attribute?: string,
-    selector?: string,
-    default?: string,
-    type?: string
-  }
-}
-
-interface Panel {
-  type?: string,
-  title?: string,
-  attributes?: any,
-};
+const require = createRequire(import.meta.url);
+const { version } = require('./package.json');
 
-interface Image {
-  randomUrlVariable: string,
-  randomAltVariable: string,
-  imgClass: string,
-}
-
-interface ImageProperties {
-  imgTag: any,
-  imgSrc: string,
-  imgAlt: string,
-  imgClass: string,
-  isBackground: boolean,
-  type?: string,
-  attribute?: string,
-  prefix?: string,
-}
-interface BlockOptions {
-  name: string,
-  prefix: string,
-  category: string,
-  basePath: string,
-  htmlContent?: string,
-  cssFiles?: string[],
-  jsFiles?: string[],
-  generateIconPreview?: boolean,
-  shouldSaveFiles?: boolean,
-}
-
-let js = '';
-let css = '';
 const block = async (
   htmlContent,
   options = {
@@ -70,27 +26,40 @@ const block = async (
     category: 'common',
     basePath: process.cwd(),
     shouldSaveFiles: true,
+    generateIconPreview: false,
+    jsFiles: [],
+    cssFiles: [],
+    source: null,
   }
 ) => {
+  const panels = [];
   const styles = [];
   const scripts = [];
   const attributes = {};
+  const formVars = {};
+
+  const { name, prefix, source } = options;
 
-  function parseStyleString(style) {
-    const entries = style.split(';').filter(Boolean).map(rule => {
-      const [key, value] = rule.split(':');
-      if (!key || !value) return null;
+  let js = '';
+  let css = '';
+  let phpEmailData = '';
+  let emailTemplate = '';
 
-      const camelKey = key.trim().replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-      return [camelKey, value.trim()];
-    }).filter(Boolean);
+  function hasTailwindCdnSource(jsFiles) {
+    const tailwindCdnRegex = /https:\/\/(cdn\.tailwindcss\.com(\?[^"'\s]*)?|cdn\.jsdelivr\.net\/npm\/@tailwindcss\/browser@4(\.\d+){0,2})/;
 
-    const styleObject = Object.fromEntries(entries);
+    return jsFiles.some(url => tailwindCdnRegex.test(url));
+  }
+
+  function replaceSourceUrlVars(str, source) {
+    if (!source) return str;
 
-    return JSON.stringify(styleObject).replace(/"([^"]+)":/g, '$1:'); // Strip object keys' quotes
+    const escapedSource = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const pattern = new RegExp(`var\.url\+'${escapedSource}([^']+)'`, 'g');
+    return str.replace(pattern, (match, path) => `\${vars.url}${path}`);
   }
 
-  function sanitizeAndReplaceNumbers(str) {
+  function sanitizeAndReplaceLeadingNumbers(str) {
     const numberWords = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
     let firstNumberReplaced = false;
 
@@ -100,85 +69,132 @@ const block = async (
       .replace(/\d/g, (digit) => {
         if (!firstNumberReplaced) {
           firstNumberReplaced = true;
+
           return numberWords[parseInt(digit)] + digit;
         }
-        return digit; // keep the rest as-is or you can modify as needed
+        return digit;
       })
       .replace(/^[^a-z]+/, '');
   }
 
-  const convertName = (name) => {
-    return (name || '').replace(new RegExp(/\W|_/, 'g'), '-').toLowerCase();
+  const replaceUnderscoresSpacesAndUppercaseLetters = (name = '') => {
+    return name.replace(new RegExp(/\W|_/, 'g'), '-').toLowerCase();
   };
+
   const saveFile = (fileName, contents, options) => {
     try {
       const filePath = path.join(options.basePath, fileName);
+
       fs.writeFileSync(filePath, contents);
+
       return contents;
     } catch (error) {
       logError(error);
     }
   };
-  const parseRequirements = async (files) => {
+
+  function replaceRelativeUrls(html, replacer) {
+    const urlAttributes = [
+      'src', 'href', 'action', 'srcset', 'poster', 'data', 'formaction'
+    ];
+
+    const regex = new RegExp(
+      `\\b(${urlAttributes.join('|')}|data-[a-zA-Z0-9_-]+)\\s*=\\s*(['"])(?!https?:|//|mailto:|tel:|#)([^'"]+)\\2`,
+      'gi'
+    );
+
+    return html.replace(regex, (_match, attr, quote, url) => {
+      const newUrl = replacer(url);
+      return `${attr}=${quote}${newUrl}${quote}`;
+    });
+  }
+
+
+  function replaceRelativeUrlsInCss(css, replacer) {
+    const regex = /url\(\s*(['"]?)(.+?)\1\s*\)/gi;
+
+    return css.replace(regex, (match, quote, url) => {
+      if (/^(https?:|\/\/|data:|mailto:|tel:|#)/.test(url.trim())) {
+        return match;
+      }
+      const newUrl = replacer(url);
+      return `url(${quote}${newUrl}${quote})`;
+    });
+  }
+
+  function replaceRelativeUrlsInHtml(html, baseUrl) {
+    return replaceRelativeUrls(html, (url) => {
+      return new URL(url, baseUrl).href;
+    });
+  }
+
+  function replaceRelativeUrlsInCssWithBase(css, cssFileUrl) {
+    return replaceRelativeUrlsInCss(css, (url) => {
+      if (/^(https?:|\/\/|data:|mailto:|tel:|#)/.test(url.trim())) {
+        return url;
+      }
+      return new URL(url, cssFileUrl).href;
+    });
+  }
+
+  const parseRequirements = async (files, options) => {
+    const { source } = options;
     let output = '';
+
     for (const file of files) {
       try {
-        const { data } = await axios.get(file, { responseType: 'text' });
-        output += data;
+        const response = await fetch(file);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        let data = await response.text();
+
+        if (source) {
+          data = replaceRelativeUrlsInCssWithBase(data, file);
+        }
+
+        output += `${data}\n\n`;
       } catch (error) {
         logError(error);
       }
     }
+
     return output;
   };
-  const convertToUnderscores = (string) => {
+
+  const convertDashesSpacesAndUppercaseToUnderscoresAndLowercase = (string) => {
     if (string) {
-      return `${string.replaceAll('-', '_').replaceAll(' ', '_').toLowerCase()}${generateRandomVariableName(
-        'func',
-        3
-      )}`;
+      return `${string.replaceAll('-', '_').replaceAll(' ', '_').toLowerCase()}`;
     }
 
     return '';
   };
 
+  const newName = replaceUnderscoresSpacesAndUppercaseLetters(name);
+  const blockName = `${sanitizeAndReplaceLeadingNumbers(replaceUnderscoresSpacesAndUppercaseLetters(prefix))}/${sanitizeAndReplaceLeadingNumbers(replaceUnderscoresSpacesAndUppercaseLetters(name))}`;
+  const blockNameHandle = `${prefix}-${newName}`;
+
   const getPhp = (options) => {
     const { name, prefix, jsFiles, cssFiles } = options;
-    const newName = convertName(name);
-    const phpName = convertToUnderscores(name);
-    const phpPrefix = convertToUnderscores(prefix);
-
-    const inlineRemoteLoader = `
-      var remoteUrls = ${JSON.stringify(jsFiles)};
-
-      (function loadScripts() {
-        window._loadedRemoteScripts = window._loadedRemoteScripts || new Set();
-
-        remoteUrls.forEach((url) => {
-          if (window._loadedRemoteScripts.has(url)) return;
-
-          const script = document.createElement('script');
-          script.src = url;
-          script.async = true;
-          document.head.appendChild(script);
-
-          window._loadedRemoteScripts.add(url);
-        });
-      })();
-    `;
-
+    const phpName = convertDashesSpacesAndUppercaseToUnderscoresAndLowercase(name);
+    const phpPrefix = `${functionSufix}${convertDashesSpacesAndUppercaseToUnderscoresAndLowercase(prefix)}`;
+    const tailwindFix = hasTailwindCdnSource(jsFiles) ? 'function forceTailwindUpdate(){let e=setInterval(()=>{if("undefined"!=typeof tailwind){clearInterval(e);let n=document.documentElement.outerHTML;tailwind.config.content=[{raw:n,extension:"html"}]}},100)}forceTailwindUpdate();' : '';
+    const tailwindFooter = hasTailwindCdnSource(jsFiles) ? '(()=>{if(window.__tailwindObserverActive)return;window.__tailwindObserverActive=!0;let e=new MutationObserver(()=>{let t=[...document.querySelectorAll("style")].find(e=>e.innerText.includes("--tw-"));t&&(document.body.appendChild(t),e.disconnect(),window.__tailwindObserverActive=!1)});e.observe(document.documentElement,{childList:!0,subtree:!0})})();' : '';
+    const inlineRemoteLoader = `var remoteUrls = ${JSON.stringify(jsFiles)};(function loadScripts() {window._loadedRemoteScripts = window._loadedRemoteScripts || new Set();const style = document.createElement('style');remoteUrls.forEach((url) => {if (window._loadedRemoteScripts.has(url)) return;const script = document.createElement('script');script.src = url;document.head.appendChild(script);window._loadedRemoteScripts.add(url);});})();${tailwindFix}${tailwindFooter}`;
 
     const enqueueRemoteStyles = cssFiles
       .map((remoteUrl) => {
         return `
       wp_enqueue_style(
-        '${prefix}-${newName}-${remoteUrl
+        '${blockNameHandle}-${remoteUrl
             .split('/')
             .pop()
             .replace(/\.\w+$/, '')}',
         '${remoteUrl}',
         array(),
-        null // Set to null if you don't have a version
+        null
       );
     `;
       })
@@ -187,7 +203,7 @@ const block = async (
     return `<?php
   /*
     * Plugin Name:       ${name}
-    * Version:           1.0
+    * Version:           ${version}
     * Author:            Html to Gutenberg
     * Author URI:        https://www.html-to-gutenberg.io/
     * Description:       A custom editable block built with Html to Gutenberg
@@ -198,59 +214,44 @@ const block = async (
     exit;
   }
 
-  function ${phpPrefix}_${phpName}_add_custom_editor_styles() {
-    echo '<style>
-      .block-editor-block-types-list__list-item {
-          width: 100% !important;
-      }
-
-      .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
-          max-width: 100%;
-          margin: 0;
-      }
-
-      [aria-label="Empty block; start writing or type forward slash to choose a block"] {
-          max-width: 1200px !important;
-      }
-
-      span.block-editor-block-types-list__item-icon img {
-          max-width: 100%;
-          width: 100%;
-          margin: 0;
-          display: block;
-      }
+  function parse_form_placeholders_${functionSufix}($content, $post_data)
+  {
+    return preg_replace_callback('/{{(.*?)}}/', function ($matches) use ($post_data) {
+      $key = trim($matches[1]);
+      return isset($post_data[$key]) ? sanitize_text_field($post_data[$key]) : '';
+    }, $content);
+  }
 
-      span.block-editor-block-icon.has-colors {
-          width: 100%;
-          all: inherit;
-      }
+  add_action('wp_ajax_send_test_email_${functionSufix}}', function() {
+    //check_ajax_referer('wp_rest');
 
-      span.block-editor-block-icon.has-colors svg {
-          margin-left: auto;
-          margin-right: auto;
-      }
+    $post_data = $_POST;
+    $to = sanitize_email(parse_form_placeholders_${functionSufix}($post_data['to'], $post_data));
+    $from = sanitize_email(parse_form_placeholders_${functionSufix}($post_data['from'], $post_data));
+    $subject = sanitize_text_field(parse_form_placeholders_${functionSufix}($post_data['subject'], $post_data));
+    $message = wp_kses_post(parse_form_placeholders_${functionSufix}($post_data['message'], $post_data));
 
-      span.block-editor-block-icon.has-colors {
-          order: 2;
-          flex: 0 0 100%;
-          width: 100%;
-      }
+    if (empty($to) || empty($from)) {
+      wp_send_json_error('Missing email addresses.');
+    }
 
-       .block-editor-block-card {
-          display: flex !important;
-          flex-wrap: wrap;
-      }
+    $sent = wp_mail($to, $subject, $message, [
+      'Content-Type: text/html; charset=UTF-8',
+      'From: ' . $from
+    ]);
 
-      .block-editor-inserter__preview-content-missing {
-          display: none !important;
-      }
+    if ($sent) {
+      wp_send_json_success('Email sent');
+    } else {
+      error_log('Failed to send. To: ' . $to . ' | From: ' . $from);
+      wp_send_json_error('Failed to send email.');
+    }
+  });  
 
-      span.block-editor-block-icon.block-editor-block-switcher__toggle.has-colors img {
-          display: none;
-      }
-          
+  ${phpEmailData}
 
-    </style>';
+  function ${phpPrefix}_${phpName}_add_custom_editor_styles() {
+    echo '<style>span.block-editor-rich-text__editable.rich-text{all:unset!important}a br[data-rich-text-line-break=true],span.block-editor-block-icon.block-editor-block-switcher__toggle.has-colors img{display:none}.block-editor-block-types-list__list-item{width:100%!important}.block-editor-block-list__layout.is-root-container>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:100%;margin:0}[aria-label="Empty block; start writing or type forward slash to choose a block"]{max-width:1200px!important}span.block-editor-block-types-list__item-icon img{max-width:100%;width:100%;margin:0;display:block}span.block-editor-block-icon.has-colors{all:inherit;order:2;flex:0 0 100%;width:100%}span.block-editor-block-icon.has-colors svg{margin-left:auto;margin-right:auto}.block-editor-block-card{display:flex!important;flex-wrap:wrap}.block-editor-inserter__preview-content-missing{display:none!important}</style>';
   }
 
   add_action('admin_footer', function () {
@@ -258,7 +259,7 @@ const block = async (
     
     if ($screen && method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) {
         $href = esc_url(plugins_url('editor.css', __FILE__));
-        echo "<link rel='stylesheet' id='${prefix}-${newName}-style' href='$href' type='text/css' media='all' />";
+        echo "<link rel='stylesheet' id='${blockNameHandle}-style' href='$href' type='text/css' media='all' />";
     }
 });
 
@@ -272,39 +273,38 @@ const block = async (
       remove_action('wp_footer', 'wp_global_styles_render_svg_filters');
   }, 100);
 
-
   function ${phpPrefix}_${phpName}_editor_assets() {
     $filepath = plugin_dir_path(__FILE__) . 'block.js';
     $version = file_exists($filepath) ? filemtime($filepath) : time();
 
     wp_enqueue_script(
-      '${prefix}-${newName}',
+      '${blockNameHandle}',
       plugins_url( 'block.js', __FILE__ ),
       array( 'wp-blocks', 'wp-components', 'wp-element' ,'wp-editor'),
       $version
     );
 
-    wp_localize_script( '${prefix}-${newName}', 'vars', array( 'url' => plugin_dir_url( __FILE__ ) ) );
+    wp_localize_script( '${blockNameHandle}', 'vars', array( 'url' => plugin_dir_url( __FILE__ ) ) );
+
+    ${enqueueRemoteStyles}
+
+    ${phpPrefix}_${phpName}_add_custom_editor_styles();
+
+    wp_dequeue_style('${blockNameHandle}-frontend');
+    wp_deregister_style('${blockNameHandle}-frontend');
 
     wp_enqueue_script(
-        '${prefix}-${newName}-remote-loader',
-        plugins_url('remote-loader.js', __FILE__),
-        array(),
-        null,
-        true
+      '${blockNameHandle}-remote-loader',
+      plugins_url('remote-loader.js', __FILE__),
+      array(),
+      null,
+      true
     );
 
     wp_add_inline_script(
-      '${prefix}-${newName}-remote-loader',
+      '${blockNameHandle}-remote-loader',
       ${JSON.stringify(inlineRemoteLoader)}
     );
-
-    ${enqueueRemoteStyles}
-
-    ${phpPrefix}_${phpName}_add_custom_editor_styles();
-
-      wp_dequeue_style('${prefix}-${newName}-frontend');
-      wp_deregister_style('${prefix}-${newName}-frontend');
   }
 
   add_action('enqueue_block_editor_assets', function () {
@@ -314,177 +314,175 @@ const block = async (
     wp_dequeue_style('wp-format-library');
 }, 100);
 
-  add_action( 'enqueue_block_assets', '${phpPrefix}_${phpName}_block_assets' );
 
-  if (!is_admin()) {
-    wp_register_style(
-        '${prefix}-${newName}-frontend',
-        plugins_url('style.css', __FILE__)
+  add_action('init', function () {
+    wp_register_script(
+        '${blockNameHandle}-scripts',
+        plugins_url('scripts.js', __FILE__),
+        array(),
+        null,
+        true
     );
-  }
 
-  function ${phpPrefix}_${phpName}_block_assets() {
-    
-    if ( ! is_admin() ) {
-      wp_enqueue_style('${prefix}-${newName}-frontend');
-    }
+    wp_register_style(
+      '${blockNameHandle}-frontend',
+      plugins_url('style.css', __FILE__)
+    );
 
-    wp_enqueue_script(
-        '${prefix}-${newName}-remote-loader',
+    wp_register_script(
+      '${blockNameHandle}-remote-loader',
         plugins_url('remote-loader.js', __FILE__),
         array(),
         null,
         true
     );
+  });
 
-    
-    wp_add_inline_script(
-      '${prefix}-${newName}-remote-loader',
-      ${JSON.stringify(inlineRemoteLoader)}
-    );
-  }
-  `;
-  };
-
-  function scopeCss(css, blockClass) {
-    const GLOBAL_SELECTORS = ['html', 'body', ':root', ':host', '::backdrop'];
-    const lines = css.split('\n');
+  add_action( 'wp_enqueue_scripts', '${phpPrefix}_${phpName}_block_assets', 999 );
 
-    let result = '';
-    const nestingStack = [];
-    let selectorBuffer = [];
-    let insidePropertyBlock = false;
-    let insideRule = false;
-    let currentIsScoped = false;
-
-    function scopeSelector(sel) {
-      sel = sel.trim();
-
-      const whereMatch = sel.match(/^([^ :]+)(:where\(.*\))$/);
-      if (whereMatch) {
-        const base = whereMatch[1];
-        const pseudo = whereMatch[2];
-        const scopedBase = scopeSelector(base);
-        return `${scopedBase}${pseudo}`;
-      }
+  function ${phpPrefix}_${phpName}_block_assets() {
+    global $wp_query;
 
-      if (sel.startsWith(':where(') && sel.endsWith(')')) {
-        const inner = sel.slice(7, -1);
-        const scopedInner = inner
-          .split(',')
-          .map(scopeSelector)
-          .join(', ');
-        return `:where(${scopedInner})`;
-      }
+    $used = false;
 
-      const isGlobal = GLOBAL_SELECTORS.some(g => sel.startsWith(g));
-      const isAlreadyScoped = sel.startsWith(blockClass) || sel.includes(` ${blockClass}`);
+    if (!empty($wp_query->posts)) {
+        foreach ($wp_query->posts as $post) {
+            $blocks = parse_blocks($post->post_content);
 
-      if (!isGlobal && !isAlreadyScoped && sel.length > 0) {
-        return `${blockClass} ${sel}`;
-      }
-      return sel;
+            foreach ($blocks as $block) {
+                if ($block['blockName'] === '${blockName}') {
+                    $used = true;
+                    break 2;
+                }
+            }
+        }
     }
 
-    for (const rawLine of lines) {
-      const line = rawLine.trim();
+    if ($used) {
+        $handle = '${blockNameHandle}';
 
-      if (line.startsWith('@property')) {
-        insidePropertyBlock = true;
-        nestingStack.push('@property');
-        result += `${rawLine}\n`;
-        continue;
-      }
-
-      if (insidePropertyBlock) {
-        result += `${rawLine}\n`;
-        if (line === '}') {
-          nestingStack.pop();
-          insidePropertyBlock = false;
-        }
-        continue;
-      }
-
-      if (line.startsWith('@') && line.endsWith('{')) {
-        nestingStack.push('@block');
-        result += `${rawLine}\n`;
-        continue;
-      }
+        wp_enqueue_style($handle . '-frontend');
 
-      if (line === '}') {
-        if (nestingStack.length) nestingStack.pop();
-        result += `${rawLine}\n`;
-        insideRule = false;
-        currentIsScoped = false;
-        continue;
-      }
+        wp_enqueue_script($handle . '-scripts');
 
-      if (!insideRule && !line.startsWith('@')) {
-        selectorBuffer.push(rawLine);
+        wp_localize_script(
+            $handle . '-scripts',
+            'vars',
+            array(
+                'postId' => get_queried_object_id(),
+                'ajaxUrl' => admin_url('admin-ajax.php')
+            )
+        );
 
-        if (line.endsWith('{')) {
-          insideRule = true;
+        wp_enqueue_script($handle . '-remote-loader');
 
-          const fullSelectorLine = selectorBuffer.join('\n');
-          const selectorPart = fullSelectorLine.split('{')[0];
-          const selectors = selectorPart.split(',').map(s => s.trim());
+        wp_add_inline_script(
+            $handle . '-remote-loader',
+            ${JSON.stringify(inlineRemoteLoader)}
+        );
+    }
+  }
+  `;
+  };
 
-          const scopedSelectors = selectors.map(scopeSelector);
-          currentIsScoped = selectors.some(sel => scopeSelector(sel) !== sel);
+  function preprocessSvgAttributes(code) {
+    return code.replace(/(<svg[\s\S]*?>[\s\S]*?<\/svg>)/gi, (svgBlock) => {
+      let processed = svgBlock.replace(/([a-zA-Z0-9]+)-([a-zA-Z0-9]+)=/g, (match, p1, p2) => {
+        const camel = p1 + p2.charAt(0).toUpperCase() + p2.slice(1);
+        return camel + '=';
+      });
+      return processed;
+    });
+  }
 
-          result += `${scopedSelectors.join(',\n')} {\n`;
-          selectorBuffer = [];
-        }
+  function unwrapBody(code) {
+    try {
+      return code.replace(/<\/?(html|body)[^>]*>/gi, '');
+    } catch (e) {
+      return code;
+    }
+  }
 
-        continue;
-      }
+  function transformBlockFile(blockCode) {
+    let test = '';
 
-      if (insideRule && line.includes(':')) {
-        const declarationMatch = line.match(/^([a-zA-Z0-9\-\_]+)\s*:\s*(.+?)(;?)$/);
-        if (declarationMatch) {
-          let [_, prop, value, semi] = declarationMatch;
-          result += `  ${prop}: ${value}${semi}\n`;
-          continue;
-        }
-      }
+    try {
+      test = babel.transformSync(blockCode, {
+        presets: [[presetReact, { pragma: 'wp.element.createElement' }]],
+        filename: 'block.js'
+      });
+    } catch (error) {
+      console.log(error);
 
-      result += `${rawLine}\n`;
     }
 
-    return result;
+    return test;
   }
 
   const saveFiles = async (options) => {
-    const { cssFiles = [], shouldSaveFiles, name, prefix } = options;
-    css = await parseRequirements(cssFiles);
+    const { cssFiles = [], jsFiles = [], shouldSaveFiles, name, prefix } = options;
+    const tailwindRegex = /(class|className)\s*=\s*["'][^"']*\b(items-center|justify-center|gap-\d+|rounded(-[a-z]+)?|text-[a-z]+-\d{3}|bg-[a-z]+-\d{3}|w-(full|screen)|h-(full|screen)|max-w-[\w\[\]-]+|p-\d+|m-\d+)\b[^"']*["']/i;
+    const hasTailwind = tailwindRegex.test(htmlContent);
+    const hasTailwindCdn = hasTailwindCdnSource(jsFiles);
+
+    css = hasTailwind && hasTailwindCdn ? '' : `
+    *:not(.components-button) { 
+      all: revert-layer; 
+    }\n`;
+
+    css += await parseRequirements(cssFiles, options);
+
+    console.log('[CSS BEFORE]', css);
+
 
     for (const style of styles) {
-      css = style.type === 'inline' ? `
-      *:not(.components-button) { 
-        all: revert-layer; 
-      }
-        
-      ${style.content}` : `${style.content}`;
+      css += style.content;
     }
 
-    const scopedCssFrontend = scopeCss(css, `.wp-block-${sanitizeAndReplaceNumbers(convertName(prefix))}-${sanitizeAndReplaceNumbers(convertName(name))}`);
-    const editorStyleFile = scopeCss(css, `[data-type="${sanitizeAndReplaceNumbers(convertName(prefix))}/${sanitizeAndReplaceNumbers(convertName(name))}"]`);
+    css = css.replace(/[^{}]+:is\([^)]*\[.*?['"].*?\)[^{}]*\{[^}]*\}/g, '');
+
+    const scopedCssFrontend = scopeCss(css, `.wp-block-${sanitizeAndReplaceLeadingNumbers(replaceUnderscoresSpacesAndUppercaseLetters(prefix))}-${sanitizeAndReplaceLeadingNumbers(replaceUnderscoresSpacesAndUppercaseLetters(name))}`);
+    const editorStyleFile = scopeCss(css, `[data-type="${blockName}"]`);
     const scriptFile = js;
+
+    htmlContent = htmlContent
+      .replace(/<head[\s\S]*?<\/head>/gi, '')
+      .replace(/<script[\s\S]*?<\/script>/gi, '')
+      .replace(/<style[\s\S]*?<\/style>/gi, '');
+
+
+    let blockCode = await getBlock(options);
+
+    blockCode = blockCode.replaceAll(' / dangerouslySetInnerHTML', ' dangerouslySetInnerHTML')
+
     const indexFile = getPhp(options);
-    const blockCode = await getBlock(htmlContent, options);
+    let blockFile = '';
+
+    try {
+      blockFile = transformBlockFile(blockCode).code
+        ?.replace(/name: \"\{field.name\}\"/g, 'name: field.name')
+        ?.replace(/key: \"\{index\}\"/g, 'key: index')
+    } catch (error) {
+
+      console.log(error);
+
+    }
+
+    console.log(blockFile);
 
-    const blockFile = babel.transformSync(blockCode, {
-      presets: [[presetReact, { pragma: 'wp.element.createElement' }]],
-      filename: 'block.js',
-    });
 
     if (shouldSaveFiles) {
-      saveFile('style.css', scopedCssFrontend, options);
-      saveFile('editor.css', editorStyleFile, options);
-      saveFile('scripts.js', scriptFile, options);
-      saveFile('index.php', indexFile, options);
-      saveFile('block.js', blockFile.code, options);
-      saveFile('remote-loader.js', '// This file intentionally left blank.', options);
+      try {
+        saveFile('style.css', scopedCssFrontend, options);
+        saveFile('editor.css', editorStyleFile, options);
+        saveFile('scripts.js', `${scriptFile}\n\n${emailTemplate}`, options);
+        saveFile('index.php', indexFile, options);
+        saveFile('block.js', blockFile, options);
+        saveFile('remote-loader.js', '', options);
+      } catch (error) {
+        console.log(error);
+
+      }
     }
 
     return {
@@ -492,7 +490,7 @@ const block = async (
       'editor.css': editorStyleFile,
       'scripts.js': scriptFile,
       'index.php': indexFile,
-      'block.js': blockFile.code,
+      'block.js': blockFile,
     }
 
   };
@@ -503,22 +501,24 @@ const block = async (
 
   const generateRandomVariableName = (prefix = 'content', length = 3) => {
     let suffix = '';
+
     for (let i = 0; i < length; i++) {
       suffix += characters.charAt(
         Math.floor(Math.random() * characters.length)
       );
     }
+
     return `${prefix}${suffix}`;
   };
-  const setAttributeContent = (randomVariableName, content) => {
-    attributes[randomVariableName] = {
-      type: 'string', default: content.replace(/(?:<[^>]*>|[^<"]*")|"/g, (match) => {
-        if (match === '"') {
-          return '&quot;';
-        }
-        return match;
-      })
-    };
+
+  const functionSufix = generateRandomVariableName('func');
+
+  const setRandomAttributeContent = (randomVariableName, content) => {
+    const isArray = Array.isArray(content);
+
+
+    attributes[randomVariableName] = { type: isArray ? 'array' : 'string', default: content };
+
   };
 
   const hasAbsoluteKeyword = (str) => {
@@ -551,6 +551,7 @@ const block = async (
               width: '100%',
               height: '100%',
               zIndex: 10,
+              cursor: 'pointer'
             }}
           ></div>
         </div>
@@ -559,12 +560,12 @@ const block = async (
   `;
   };
 
-
   const replaceHtmlImage = (html, image) => {
     const { randomUrlVariable } = image;
     const regex = new RegExp(`<img\\s+[^>]*src=\\{[^}]*${randomUrlVariable}[^}]*\\}[^>]*>`, 'gi');
     return html.replace(regex, getImageTemplate(image));
   };
+
   const replaceImageComponents = (html) => {
     images.forEach((image) => {
       html = replaceHtmlImage(html, image);
@@ -577,9 +578,10 @@ const block = async (
     if (htmlContent) {
       const newHtml = await extractAssets(htmlContent, {
         basePath,
+        saveFile: true,
         verbose: false,
-        saveFile: false,
       });
+
       return cheerio.load(newHtml, {
         xmlMode: true,
         decodeEntities: false,
@@ -642,53 +644,191 @@ const block = async (
   };
   const setImageAttribute = (properties) => {
     const { imgTag, imgSrc, imgAlt, attribute, type, prefix } = properties;
-    const newPrefix = prefix ? convertName(prefix) : 'wp';
+    const newPrefix = prefix ? replaceUnderscoresSpacesAndUppercaseLetters(prefix) : 'wp';
     const randomVariable = generateRandomVariableName(`${type}${newPrefix}`);
+
+    let imgSrcWithoutOrigin = imgSrc;
+    try {
+      if (typeof imgSrc === 'string') {
+        if (/^https?:\/\//.test(imgSrc)) {
+          const urlObj = new URL(imgSrc);
+          imgSrcWithoutOrigin = urlObj.pathname + urlObj.search + urlObj.hash;
+        } else if (source && imgSrc.startsWith(source)) {
+          imgSrcWithoutOrigin = imgSrc.slice(source.length);
+          if (imgSrcWithoutOrigin.startsWith('/')) imgSrcWithoutOrigin = imgSrcWithoutOrigin.slice(1);
+        }
+      }
+    } catch (e) {
+      imgSrcWithoutOrigin = imgSrc;
+    }
+    let imgSrcNoLeadingSlash = imgSrcWithoutOrigin;
+    if (typeof imgSrcNoLeadingSlash === 'string' && imgSrcNoLeadingSlash.startsWith('/')) {
+      imgSrcNoLeadingSlash = imgSrcNoLeadingSlash.slice(1);
+    }
     attributes[randomVariable] = {
       attribute,
       type: 'string',
       selector: 'img',
-      default: attribute === 'alt' ? imgAlt : `var.url+'${imgSrc}'`,
+      default: attribute === 'alt' ? imgAlt : `{vars.url}${imgSrcNoLeadingSlash}`.replace(/^\u007f/, '$'),
     };
+
     imgTag.attr(attribute, `{attributes.${randomVariable}}`);
+
     return randomVariable;
   };
+
   const processImage = (properties) => {
     const { imgClass, type } = properties;
+
     const randomUrlVariable = setImageAttribute({
       ...properties,
       attribute: 'src',
       prefix: 'Url',
     });
+
     const randomAltVariable = setImageAttribute({
       ...properties,
       attribute: 'alt',
       prefix: 'Alt',
     });
+
     if (type !== 'background') {
       images.push({ randomUrlVariable, randomAltVariable, imgClass });
+
       return;
     }
+
     createPanel({
       type: 'media',
       title: 'Background Image',
       attributes: [randomUrlVariable, randomAltVariable],
     });
   };
+
+  const createPanelsForForm = () => {
+    const randomFormIdVariable = generateRandomVariableName('form');
+    const randomHiddenFieldsAttr = generateRandomVariableName('hiddenFields');
+    const randomSendEmailVariable = generateRandomVariableName('send');
+    const randomEmailFromVariable = generateRandomVariableName('emailFrom');
+    const randomEmailToVariable = generateRandomVariableName('emailTo');
+    const randomEmailSubjectVariable = generateRandomVariableName('emailSubj');
+    const randomEmailMessageVariable = generateRandomVariableName('emailMsg');
+    const randomTestFeedbackAttr = generateRandomVariableName('emailTestMsg');
+
+    Object.assign(formVars, {
+      randomFormIdVariable,
+      randomSendEmailVariable,
+      randomEmailFromVariable,
+      randomEmailToVariable,
+      randomEmailSubjectVariable,
+      randomEmailMessageVariable,
+      randomTestFeedbackAttr,
+      randomHiddenFieldsAttr
+    });
+
+    setRandomAttributeContent(randomFormIdVariable, `form-${randomFormIdVariable}`);
+    setRandomAttributeContent(randomSendEmailVariable, false);
+    setRandomAttributeContent(randomEmailFromVariable, '');
+    setRandomAttributeContent(randomEmailToVariable, '');
+    setRandomAttributeContent(randomEmailSubjectVariable, 'New Form Submission');
+    setRandomAttributeContent(randomEmailMessageVariable, 'Form data:\n{{fields}}');
+    setRandomAttributeContent(randomTestFeedbackAttr, '');
+    setRandomAttributeContent(randomHiddenFieldsAttr, []);
+
+    createPanel({
+      type: 'formSettings',
+      title: 'Form Settings',
+      attributes: [randomFormIdVariable, randomSendEmailVariable],
+    });
+
+    createPanel({
+      type: 'emailSettings',
+      title: 'Email Settings',
+      attributes: [
+        randomSendEmailVariable,
+        randomEmailFromVariable,
+        randomEmailToVariable,
+        randomEmailSubjectVariable,
+        randomEmailMessageVariable,
+        randomTestFeedbackAttr,
+        randomFormIdVariable
+      ],
+    });
+
+    createPanel({
+      type: 'hiddenFields',
+      title: 'Hidden Fields',
+      attributes: [randomHiddenFieldsAttr],
+    });
+  };
+
+  const getFormVariables = () => ({ ...formVars });
+
+  const transformFormToDynamicJSX = (htmlContent) => {
+    const regex = /<form([\s\S]*?)>([\s\S]*?)<\/form>/gi
+    const formExists = regex.test(htmlContent);
+
+    if (!formExists) {
+      return htmlContent;
+    }
+
+
+    return htmlContent.replace(
+      /<form([\s\S]*?)>([\s\S]*?)<\/form>/gi,
+      (_match, formAttributes, innerContent) => {
+        createPanelsForForm();
+
+        const {
+          randomFormIdVariable,
+          randomHiddenFieldsAttr
+        } = getFormVariables();
+
+        return `
+          <form
+            ${formAttributes.trim()}
+            id={attributes.${randomFormIdVariable}}
+          >
+            ${innerContent}
+            
+            { (attributes.${randomHiddenFieldsAttr} || []).map((field, index) => (<input key={index} name={field.name} value={field.value} type="hidden" /> )) }
+          </form>
+          `;
+      }
+    );
+  };
+
   const getFixedHtml = (html) => {
+    function parseStyleString(style) {
+      const entries = style.split(';').filter(Boolean).map(rule => {
+        const [key, value] = rule.split(':');
+        if (!key || !value) return null;
+        const camelKey = key.trim().replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        return [camelKey, value.trim()];
+      }).filter(Boolean);
+      const styleObject = Object.fromEntries(entries);
+      return JSON.stringify(styleObject).replace(/"([^"\n]+)":/g, '$1:');
+    }
     return html
+      .replace(/style="([^"]+)"/g, (_, styleString) => {
+        const styleObj = parseStyleString(styleString);
+        return `style={${styleObj}}`;
+      })
       .replace(/ onChange="{" \(newtext\)=""\>/gi, ' onChange={ (newtext) => ')
       .replace(/\<\/RichText\>/gi, '')
       .replace(/value="{(.*?)}"/gi, 'value={$1}')
       .replace(/"{attributes.(.*?)}"/gi, '{attributes.$1}');
   };
+
   const processImages = (imgTag) => {
     const properties = getImageProperties(imgTag);
     const { isBackground } = properties;
+
     if (!isBackground) {
       processImage({ ...properties, type: 'image' });
+
       return;
     }
+
     processImage({ ...properties, type: 'background' });
   };
   const loopImages = ($) => {
@@ -696,9 +836,11 @@ const block = async (
       processImages($(img));
     });
   };
+
   const getHtml = ($) => {
     return $.html({ xml: false, decodeEntities: false });
   };
+
   const processEditImages = async (options) => {
     const $ = await loadHtml(options);
     loopImages($);
@@ -715,43 +857,52 @@ const block = async (
       }}
     /><`;
   };
+
   const convertToRichText = (variableContent) => {
     const randomVariable = generateRandomVariableName('content');
-    setAttributeContent(randomVariable, variableContent);
+
+    setRandomAttributeContent(randomVariable, variableContent);
+
     return getRichTextTemplate(randomVariable, variableContent);
   };
+
   const parseContent = (content) => {
     return content.replace(/>([^<]+)</g, (match, variableContent) => {
-      if (match.replace(/\s\S/g, '').replace(/(<|>)/g, '').trim() === '') {
+      const regex = /{|}|\(|\)|=>/;
+
+      if (regex.test(variableContent.trim())) {
+        return match;
+      }
+
+      if (variableContent.trim() === '') {
         return match;
       }
+
       return convertToRichText(variableContent);
     });
   };
-  const editJsxContent = async (options) => {
-    let content;
-    if (options.htmlContent) {
-      content = options.htmlContent.replaceAll(/<!--(.*?)-->/gs, '');
-    }
+
+  const getEditJsxContent = async (options) => {
+    let content = transformFormToDynamicJSX(options.htmlContent);
+
+    content = content.replaceAll(/<!--(.*?)-->/gs, '');
+
     content = `<div className="custom-block">${content}</div>`;
+
     return await processEditImages({
       ...options,
-      htmlContent: convert(parseContent(content)),
+      htmlContent: parseContent(content),
     });
   };
+
   const createPanel = (values) => {
     if (values.attributes && values.attributes.length > 0) {
       panels.push(values);
     }
   };
-  const getSvgTemplate = (_match, group1, group3, randomSVGVariable) => {
-    return `
-      <svg
-        ${group1}
-        dangerouslySetInnerHTML={ { __html: attributes.${randomSVGVariable} }}
-        >
-      ${group3}
-      `;
+
+  const getSvgTemplate = (_match, group1, _group3, randomSVGVariable) => {
+    return `<svg ${group1} dangerouslySetInnerHTML={ { __html: attributes.${randomSVGVariable} }}></svg>`;
   };
   const replaceSVGImages = async (html) => {
     const regex = /<\s*svg\b((?:[^>'"]|"[^"]*"|'[^']*')*)>(\s*(?:[^<]|<(?!\/svg\s*>))*)(<\/\s*svg\s*>)/gim;
@@ -770,17 +921,15 @@ const block = async (
       const content = group2.trim();
       if (content) {
         const randomSVGVariable = generateRandomVariableName('svg');
-        setAttributeContent(randomSVGVariable, content);
+        setRandomAttributeContent(randomSVGVariable, content.replaceAll('className', 'class'));
         createPanel({
           type: 'svg',
           title: 'SVG Markup',
           attributes: [randomSVGVariable],
         });
 
-        const replacement = await transform(
-          getSvgTemplate(fullMatch, group1, group3, randomSVGVariable),
-          { jsxRuntime: 'classic' }
-        );
+
+        const replacement = getSvgTemplate(fullMatch, group1, group3, randomSVGVariable)
 
         result += replacement;
       } else {
@@ -791,6 +940,9 @@ const block = async (
     }
 
     result += html.slice(lastIndex);
+
+    console.log(result);
+
     return result;
   };
   const getSvgPanelTemplate = (panel) => {
@@ -822,6 +974,7 @@ const block = async (
         ? `${panel.attributes[0]}: media.url,
                    ${panel.attributes[1]}: media.alt`
         : '';
+
     return panel.attributes &&
       panel.attributes[0] &&
       attributes[panel.attributes[0]]
@@ -830,10 +983,7 @@ const block = async (
         <PanelRow>
           <div>
             <MediaUpload
-              onSelect={ (media) => { 
-                setAttributes({ 
-                  ${mediaAtts}
-                }); 
+              onSelect={ (media) => { setAttributes({ ${mediaAtts} }); 
               } }
               type="image"
               value={ attributes.${panel.attributes?.[0]} }
@@ -851,12 +1001,272 @@ const block = async (
       : '';
   };
 
-  const getPanelTemplate = (panel) => {
+  const getFormSettingsPanelTemplate = (panel) => {
+    const [formIdAttr, sendEmailAttr] = panel.attributes;
+
+    return `
+      <PanelBody title="${panel.title}" initialOpen={true}>
+        <TextControl
+          label="Form ID"
+          disabled="true"
+          value={attributes.${formIdAttr}}
+          onChange={(val) => setAttributes({ ${formIdAttr}: val })}
+        />
+        <ToggleControl
+          label="Send Email on Submit"
+          checked={attributes.${sendEmailAttr}}
+          onChange={(val) => setAttributes({ ${sendEmailAttr}: val })}
+        />
+      </PanelBody>
+    `;
+  };
+
+  const getPhpEmailData = (formIdAttr, fromAttr, toAttr, subjectAttr, messageAttr) => {
+    return `
+    add_action('wp_ajax_send_email_${formIdAttr}', function() {
+        //check_ajax_referer('wp_rest');
+
+        $post_id = $_POST['postId'];
+
+        if (!$post_id) {
+          wp_send_json_error('Missing post ID.');
+        }
+
+        $post_data = $_POST; 
+        $post = get_post($post_id);
+
+        if (!$post) {
+          wp_send_json_error('Post not found.');
+        }
+
+        $blocks = parse_blocks($post->post_content);
+
+        $target_block = null;
+
+        foreach ($blocks as $block) {
+          if ($block['blockName'] === '${blockName}') {
+            $target_block = $block;
+            break;
+          }
+        }
+
+        if (!$target_block) {
+          wp_send_json_error('Block not found.');
+        }
+
+        $attrs = $target_block['attrs'] ?? [];
+
+        $to      = sanitize_email(parse_form_placeholders_${functionSufix}($attrs['${toAttr}'] ?? '', $post_data));
+        $from    = sanitize_email(parse_form_placeholders_${functionSufix}($attrs['${fromAttr}'] ?? '', $post_data));
+        $subject = sanitize_text_field(parse_form_placeholders_${functionSufix}($attrs['${subjectAttr}'] ?? '', $post_data));
+        $message = wp_kses_post(parse_form_placeholders_${functionSufix}($attrs['${messageAttr}'] ?? '', $post_data));
+
+        if (empty($to) || empty($from)) {
+          wp_send_json_error('Missing email addresses.');
+        }
+
+        $sent = wp_mail($to, $subject, $message, [
+          'Content-Type: text/html; charset=UTF-8',
+          'From: ' . $from
+        ]);
+
+        if ($sent) {
+          wp_send_json_success('Email sent');
+        } else {
+          error_log('Failed to send. To: ' . $to . ' | From: ' . $from);
+          wp_send_json_error('Failed to send email.');
+        }
+      });
+    `;
+  }
+
+  const getEmailSettingsPanelTemplate = (panel) => {
+    const [
+      sendEmailAttr,
+      fromAttr,
+      toAttr,
+      subjectAttr,
+      messageAttr,
+      testFeedbackAttr,
+      formIdAttr,
+    ] = panel.attributes;
+
+    emailTemplate += sendEmailAttr ? getEmailSaveTemplate(formIdAttr) : '';
+    phpEmailData += getPhpEmailData(formIdAttr, fromAttr, toAttr, subjectAttr, messageAttr);
+
+    return `
+      { attributes.${sendEmailAttr} && (
+        <PanelBody title="${panel.title}" initialOpen={true}>
+          <TextControl
+            label="From"
+            value={attributes.${fromAttr}}
+            onChange={(val) => setAttributes({ ${fromAttr}: val })}
+          />
+          <TextControl
+            label="To"
+            value={attributes.${toAttr}}
+            onChange={(val) => setAttributes({ ${toAttr}: val })}
+          />
+          <TextControl
+            label="Subject"
+            value={attributes.${subjectAttr}}
+            onChange={(val) => setAttributes({ ${subjectAttr}: val })}
+          />
+          <TextareaControl
+            label="Message Template (HTML Supported)"
+            help="Use {{fieldName}} to insert field values."
+            value={attributes.${messageAttr}}
+            onChange={(val) => setAttributes({ ${messageAttr}: val })}
+          />
+  
+          <Button
+            variant="primary"
+            onClick={() => {
+              const form = document.getElementById('form-${formIdAttr}');
+              const inputs = form.querySelectorAll('input, select, textarea');
+              const body = new URLSearchParams();
+
+              inputs.forEach(input => {
+                if (input.name && !input.disabled) {
+                  body.append(input.name, input.value);
+                }
+              });
+
+              body.append('action', 'send_test_email_${functionSufix}');
+              body.append('from', attributes?.${fromAttr} || '');
+              body.append('to', attributes?.${toAttr} || '');
+              body.append('subject', attributes?.${subjectAttr} || '');
+              body.append('message', attributes?.${messageAttr} || '');
+
+              fetch(vars.ajaxUrl, {
+                method: 'POST',
+                body
+              })
+              .then(res => res.json())
+              .then(data => {
+                setAttributes({ ${testFeedbackAttr}: data.success ? 'Test Email Sent!' : data.error });
+              })
+              .catch(() => {
+                setAttributes({ ${testFeedbackAttr}: 'Failed to send test email.' });
+              });
+            }}
+          >
+            Send Test Email
+          </Button>
+  
+          {attributes.${testFeedbackAttr} && (
+            <Notice status="info" isDismissible={false}>
+              {attributes.${testFeedbackAttr}}
+            </Notice>
+          )}
+        </PanelBody>
+      )}
+    `;
+  };
+
+  const getEmailSaveTemplate = (formIdAttr) => {
+    return `
+      document.addEventListener('DOMContentLoaded', function() {
+        const form = document.getElementById('form-${formIdAttr}');
+
+        form.addEventListener('submit', function(event) {
+          event.preventDefault();
+          
+          const inputs = form.querySelectorAll('input, select, textarea');
+          const body = new URLSearchParams();
+
+          inputs.forEach(input => {
+            if (input.name && !input.disabled) {
+              body.append(input.name, input.value);
+            }
+          });
+
+          body.append('action', 'send_email_${formIdAttr}');
+          body.append('postId', vars.postId);
+
+          fetch(vars.ajaxUrl, {
+            method: 'POST',
+            body
+          })
+          .then(res => res.json())
+          .then(data => {
+            console.log(data.success ? 'Test Email Sent!' : data.error);
+          })
+          .catch(() => {
+            console.log('Failed to send test email.');
+          });
+
+          form.reset()
+        });
+      });   
+    `;
+  };
+
+  const getHiddenFieldsPanelTemplate = (panel) => {
+    const [hiddenFieldsAttr] = panel.attributes;
+
+    return `
+      <PanelBody title="${panel.title}" initialOpen={false}>
+        { (attributes.${hiddenFieldsAttr} || []).map((field, index) => (
+          <div key={index} style={{ marginBottom: '10px', borderBottom: '1px solid #ddd', paddingBottom: '10px' }}>
+            <TextControl
+              label="Name"
+              value={field.name}
+              onChange={(val) => {
+                const newFields = [...attributes.${hiddenFieldsAttr}];
+                newFields[index].name = val;
+                setAttributes({ ${hiddenFieldsAttr}: newFields });
+              }}
+            />
+            <TextControl
+              label="Value"
+              value={field.value}
+              onChange={(val) => {
+                const newFields = [...attributes.${hiddenFieldsAttr}];
+                newFields[index].value = val;
+                setAttributes({ ${hiddenFieldsAttr}: newFields });
+              }}
+            />
+            <Button
+              variant="secondary"
+              onClick={() => {
+                const newFields = [...attributes.${hiddenFieldsAttr}];
+                newFields.splice(index, 1);
+                setAttributes({ ${hiddenFieldsAttr}: newFields });
+              }}
+            >
+              Remove
+            </Button>
+          </div>
+        ))}
+  
+        <Button
+          variant="primary"
+          onClick={() => {
+            const newFields = [...(attributes.${hiddenFieldsAttr} || [])];
+            newFields.push({ name: '', value: '' });
+            setAttributes({ ${hiddenFieldsAttr}: newFields });
+          }}
+        >
+          Add Hidden Field
+        </Button>
+      </PanelBody>
+    `;
+  };
+
+
+  const findAndGetPanelTemplate = (panel) => {
     switch (panel.type) {
       case 'svg':
         return getSvgPanelTemplate(panel);
       case 'media':
         return getMediaPanelTemplate(panel);
+      case 'formSettings':
+        return getFormSettingsPanelTemplate(panel);
+      case 'emailSettings':
+        return getEmailSettingsPanelTemplate(panel);
+      case 'hiddenFields':
+        return getHiddenFieldsPanelTemplate(panel);
       default:
         return '';
     }
@@ -865,7 +1275,7 @@ const block = async (
   const getPanelsTemplate = () => {
     return panels
       .map((panel) => {
-        return getPanelTemplate(panel);
+        return findAndGetPanelTemplate(panel);
       })
       .join('\n');
   };
@@ -877,28 +1287,35 @@ const block = async (
     </Panel>`;
   };
 
-  const getSaveContent = (editContent) => {
+  const buildSaveContent = (editContent) => {
     return editContent.replace(
       /<RichText((.|\n)*?)value=\{(.*?)\}((.|\n)*?)\/>/gi,
       '<RichText.Content value={$3} />'
-    );
-  };
-
-  const saveHtmlContent = (editContent) => {
-    return getSaveContent(editContent).replace(/className=/gi, 'class=');
+    )
+      .replaceAll('class=', 'className=')
+      .replace(
+        /<MediaUpload\b[^>]*>([\s\S]*?(<img\b[^>]*>*\/>)[\s\S]*?)\/>/g,
+        (_match, _attributes, img) => {
+          return img.replace(/onClick={[^}]+}\s*/, '');
+        }
+      );
   };
 
   const removeHref = (match) => {
     return match.replace(/href="(.*?)"/, '');
   };
+
   const replaceRichText = (match, group1, _group2, group3) => {
     return removeHref(match)
       .replace(group1, '<span')
       .replace(group3, '</span>');
   };
+
   const processLinks = (options) => {
-    let htmlContent = options.htmlContent
-      ? options.htmlContent.replace(
+    let { htmlContent } = options;
+
+    htmlContent = htmlContent
+      ? htmlContent.replace(
         /(<a)[^>]*>([\s\S]*?)(<\/a>)/gim,
         replaceRichText
       )
@@ -935,84 +1352,62 @@ const block = async (
     );
   };
 
-  const transformOnClickEvent = (img) => {
-    return img.replace(/onClick={[^}]+}\s*/, '');
-  };
-
-  const processSaveImages = (htmlString) => {
-    return htmlString.replace(
-      /<MediaUpload\b[^>]*>([\s\S]*?(<img\b[^>]*>*\/>)[\s\S]*?)\/>/g,
-      (_match, _attributes, img) => transformOnClickEvent(img)
-    );
-  };
-
   const getComponentAttributes = () => {
-    return JSON.stringify(attributes, null, 2);
+    return Object.entries(attributes)
+      .map(([key, value]) => {
+        if (typeof value === 'object' && value !== null) {
+          return `${key}: { ${Object.entries(value).map(([k, v]) => `${k}: \`${v}\``).join(', ')} }`;
+        } else {
+          return `${key}:\`${value}\``;
+        }
+      })
+      .join(',\n');
   };
 
   const getEdit = async (options) => {
     let { htmlContent } = options;
 
     if (htmlContent) {
-      htmlContent = await editJsxContent(processLinks(options));
-      return (await replaceSVGImages(htmlContent.replaceAll('../', '').replace(/style="([^"]+)"/g, (_, styleString) => {
-        const styleObj = parseStyleString(styleString);
-        return `style={${styleObj}}`;
-      })));
+      options.htmlContent = unwrapBody(htmlContent);
+      const postProcessLinks = processLinks(options);
+      const postGetEditJsx = await getEditJsxContent(postProcessLinks);
+      const preConvert = await postGetEditJsx.replace(/<\/br>/g, '<br/>').replace(/<\/hr>/g, '<hr/>')
+      return convert(preConvert)
     }
+
     return '';
   };
-  const getSave = (edit) => {
-    return processSaveImages(saveHtmlContent(edit));
-  };
-  const getBlock = async (htmlContent, settings) => {
+
+  const parseBlockAttributes = () => {
+    const attrs = `{${getComponentAttributes()}}`;
+    return replaceSourceUrlVars(attrs, options.source);
+  }
+
+  const getBlock = async (settings) => {
     let {
-      prefix,
       name,
       category,
       generateIconPreview,
-      basePath,
-      cssFiles,
-      jsFiles,
     } = settings;
-    const newName = convertName(name);
-    const newPrefix = convertName(prefix);
-    cssFiles = cssFiles || [];
-    jsFiles = jsFiles || [];
-    let iconPreview = "'shield'";
-    let edit = await getEdit(settings);
-    edit = edit.replace(
-      /dangerouslySetInnerHTML="{" {="" __html:="" (.*?)="" }}=""/gm,
-      `dangerouslySetInnerHTML={{ __html: $1 }}`
-    );
-    const save = getSave(edit);
+
+    const iconPreview = generateIconPreview ? `(<img src={vars.url + 'preview.jpeg'} />)` : "'shield'";
+    const edit = await getEdit(settings);
+    const save = buildSaveContent(edit);
     const blockPanels = createPanels();
-    const blockAttributes = `${JSON.parse(
-      JSON.stringify(getComponentAttributes(), null, 2)
-    ).replace(/"var.url\+\'(.*?)\'(.*?)"/g, "vars.url+'$1'$2").replaceAll("var(.*?).url\+'(http.*?)'", 'http$2')}`;
-    if (generateIconPreview) {
-      try {
-        await icon(htmlContent, { basePath, cssFiles, jsFiles });
-        iconPreview = `(<img src="data:image/jpeg;base64,${await imageToBase64(
-          path.join(basePath, 'preview.jpeg')
-        )}" />)`;
-      } catch (error) {
-        console.log(`There was an error generating preview. ${error.message}`);
-      }
-    }
+
     const output = `
     (function () {
         ${imports}
 
-        registerBlockType('${sanitizeAndReplaceNumbers(newPrefix)}/${sanitizeAndReplaceNumbers(newName)}', {
+        registerBlockType('${blockName}', {
             title: '${name}',
             icon: ${iconPreview},
             category: '${category}',
-            attributes: ${blockAttributes},
+            attributes: ${parseBlockAttributes()},
             edit(props) {
-            const { attributes, setAttributes } = props;
+              const { attributes, setAttributes } = props;
 
-            return (
+              return (
                 <div>
                     <InspectorControls>
                     ${blockPanels}
@@ -1023,22 +1418,22 @@ const block = async (
                 );
             },
             save(props) {
-            const { attributes } = props;
+              const { attributes } = props;
 
-            return (
-                ${save}
-            );
+              return (
+                  ${save}
+              );
             },
         });
         })();`;
-    if (generateIconPreview) {
-      return output.replace(/icon: \s * (')([^']*)(')/, 'icon: $2');
-    }
+
     return output;
   };
+
   const setupVariables = async (htmlContent, options) => {
+
     const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-    const linkRegex = /<link\s+[^>]*href=["']([^"']+)["'][^>]*>/gi;
+    const linkRegex = /<link\b[^>]*((\brel=["']stylesheet["'])|\bhref=["'][^"']+\.css["'])[^>]*>/gi;
 
     let match;
 
@@ -1061,10 +1456,15 @@ const block = async (
 
     await Promise.all(fetchCssPromises);
 
-    css = styles.map((style) => {
+    css += styles.map((style) => {
       return `${style.content}`;
     }).join('\n');
 
+
+    console.log('[CSSFETCHED]', css);
+
+
+
     const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
     const scriptSrcRegex =
       /<script\s+[^>]*src=["']([^"']+)["'][^>]*>\s*<\/script>/gi;
@@ -1079,6 +1479,7 @@ const block = async (
     });
 
     const fetchJsPromises = [];
+
     while ((jsMatch = scriptSrcRegex.exec(htmlContent)) !== null) {
       const url = jsMatch[1];
       const fetchJsPromise = fetch(url)
@@ -1092,7 +1493,7 @@ const block = async (
 
     await Promise.all(fetchJsPromises);
 
-    js = scripts.map((script) => script.content).join('\n');
+    js += scripts.map((script) => script.content).join('\n');
 
     let {
       basePath = process.cwd(),
@@ -1100,9 +1501,24 @@ const block = async (
       jsFiles = [],
       name = 'My block',
     } = options;
-    const newDir = path.join(basePath, convertName(name));
+
+    const newDir = path.join(basePath, replaceUnderscoresSpacesAndUppercaseLetters(name));
+
+    const $ = cheerio.load(htmlContent, {
+      xmlMode: true,
+      decodeEntities: false,
+    });
+
+    $('head, script, style').remove();
+
+    htmlContent = $('body').html();
+
+    options.html
+
+
     try {
       fs.mkdirSync(newDir, { recursive: true });
+
       return {
         ...options,
         jsFiles,
@@ -1114,6 +1530,19 @@ const block = async (
       logError(error);
     }
   };
+
+  if (source) {
+    htmlContent = replaceRelativeUrlsInHtml(htmlContent, source);
+    htmlContent = replaceRelativeUrlsInCssWithBase(htmlContent, source);
+  }
+
+  try {
+    icon(htmlContent, { basePath: path.join(options.basePath, replaceUnderscoresSpacesAndUppercaseLetters(options.name)) });
+  } catch (error) {
+    console.log(`There was an error generating preview. ${error.message}`);
+  }
+
   return saveFiles(await setupVariables(htmlContent, options));
 };
-export default block;
+
+export default block;