JSFiddle - React, Tailwind, and code Playground

by neonDog

CSS

body {
  white-space: pre;
  font-family: monospace;
}

JavaScript

const documentToArray = function (obj, valueField='id') {
    const arr = [];
	
    for (const key in obj) {
        const newObj = obj[key];	
        if ('children' in newObj && typeof newObj.children === 'object') {
            newObj.children = documentToArray(obj[key].children);
        }
        
        newObj[valueField] = key;
        const label = newObj.label;

        /*if (newObj.blockType in properties) {
            Object.assign(newObj, properties[newObj.blockType]);
        }*/
        
        if (label) {
            newObj.label = label;
        }

        if (!newObj.tags) {
            //newObj.tags = ['page-builder-item', 'page-builder-loose-item'];
        }
        if (!newObj.type) {
            //newObj.type = 'file';
        }
        arr.push(newObj);
        
    }
    return arr;
};


const masterLayout = {
  "navigation": {
    "values": {
      "navbar-init-transparent": true,
      "navbar-init-logo-hidden": true,
      "transparent": false
    }
  },
  "page-content": {
    "children": {
      "ax1": {
        "blockType": "section",
        "blockId": 1,
        "values": {
          "style": {
            "className": "banner-overlay fake-parallax"
          },
          "background":{"image": "https://runyour.agency/images/e0a1e3c227fdfff18a635b4d796dd396.jpg"}
        },
        "children": {
          "ax02": {
            "blockType": "section",
            "blockId": 1,
            "values": {
              "style": {
                "className": "container"
              }
            }
          }
        }
      }
    }
  }
};


//console.time('array');
//for (let i=0, l=1000; i<l; i++) {
//const result = documentToArray(masterLayout);
//console.log(result);
//}
//console.timeEnd('array');






const masterPage = [
  {
    "blockType": "document",
    "blockId": 1,
    "children": [
      {
        "blockType": "navigation",
        "blockId": 1,
        "values": {
          "menu": [
            {
             ...