JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<textarea id="data"></textarea>  
<textarea id="panels">
{
    "widgets": [
        {
            "bg_color": "#ffffff",
            "title_section": {
                "text": "Solutions",
                "position": "top"
            },
            "title": {
                "source": "widget",
                "text": "Enterprise WordPress Media Solutions",
                "size": "large",
                "width": "wide"
            },
            "paragraph": {
                "source": "widget",
                "text": "UDX's Stateless Media for WordPress transforms traditional media management by synchronizing with Google Cloud Storage, ensuring robust data protection, cost-effective storage, and effortless integration. This innovation offers seamless media management, enhanced site performance, and optimizes storage efficiency.",
                "size": "medium",
                "width": "wide"
            },
            "button": {
                "label": "Talk to an Expert",
                "url": "#contact"
            },
            "secondary_button": {
                "label": "Continue Reading",
                "url": "#overview"
            },
            "image_section": {
                "image_source": "featured",
                "image": 0,
                "crop_mode": "auto=compress,format&amp;fit=crop&amp;crop=faces,entropy&amp;ar=16:8"
            }
        },
        {
            "spacing": "medium",
            "bg_color": "light"
        },
        {
            "bg_color": "#ffffff",
            "sticky": "enabled",
            "title": {
                "text": "Enterprise WordPress Media Solutions",
                "position": "top"
            },
            "menu": [
                {
                    "level": "1",
                    "title": "Overview",
                    "url": "#overview"
                },
                {
                    "level": "1",
                    "title": "Results",
                    "url":...

JavaScript

function generateUUID(){
		var d = new Date().getTime();
		if( window.performance && typeof window.performance.now === "function" ){
			d += performance.now(); //use high-precision timer if available
		}
		var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( /[xy]/g, function(c) {
			var r = (d + Math.random()*16)%16 | 0;
			d = Math.floor(d/16);
			return ( c == 'x' ? r : (r&0x3|0x8) ).toString(16);
		} );
		return uuid;
	}
  
function processTextareaData() {
  // Get data from textarea
  let data = document.querySelector('#panels').value;
  // Parse JSON string to object
  data = JSON.parse(data);

  // Check if data.widgets exists
  if (!data.widgets) {
    data.widgets = data;
  }

  // Map through each widget
  data.widgets = data.widgets.map((value, key) => {
    // Your existing widget checks and modifications here...
    // ...

    // Add default fields
    value.panels_info = Object.assign({
      grid: 0,
      cell: 0,
      id: 1,
      widget_id: generateUUID(),
    }, value.panels_info);

    value.option_name = generateUUID();
    
    delete value.widget;  // remove panel key

    value = Object.assign({
      _sow_form_id: generateUUID(),
      _sow_form_timestamp: new Date().getTime(),
    }, value);


  // if option_name is Statement class is "UDX\Layout\Widgets\Statement\Statement"
  if (value.widget === "Statement" || value.option_name === 'widget_udx-statement-widget') {

    _.defaults(value.title, {
      so_field_container_state: 'open'
    })
    _.defaults(value.panels_info, {
      class: 'UDX\\Layout\\Widgets\\Statement\\Statement',
      label: 'Statement'
    });


  }

  // if widget is "TitledContent" use "UDX\Layout\Widgets\TitledContent\TitledContent" class
  if (value.widget === "TitledContent" || value.option_name === 'widget_udx-titled-content-widget') {

    _.defaults(value, {
      title: "",
      content_selected_editor: 'html'
    });

    _.defaults(value.panels_info, {
      class:...