JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/blocks-v1/css/style.css">

CSS

.page-editor-block {
  position: relative;
}

JavaScript

const runIfFunction = function (value, bind = false, rest = []) {
	if (typeof value === 'function') {
		return bind !== false ? value.apply(bind, rest) : value(rest);
	}
	return value;
};


const htmlStringToElement = function (str) { //This one supports stylesheets
	const parser = new DOMParser();
	const doc = parser.parseFromString('<div>' + str + '</div>', 'text/html');
	return doc.body.firstElementChild; //Return the DIV
};

const pathToArray = function (path, seperator = '/', convertToInt=false) {
	if (typeof path === 'string') {

		const firstChar = path.charAt(0);
		if (firstChar === seperator || firstChar === '#') {
			path = path.split(seperator);
			path.shift();

			if (convertToInt) {
				for (let i=0,l=length; i < l; i++) {
					if (isNumeric(path[i])) {
						path[i] = parseInt(path[i]);
					}
				}
			}

		}

	} else if (Array.isArray(path)) {
		return path;
	}

	return path;
};

const arrayToPath = function(path, seperator) {
	
  if (typeof path === 'string') {
  	return path;
  } else if (Array.isArray(path)) {
		return '#/'+path.join(seperator);
	}
  
};

const arraysMatch = function (arr1, arr2, checkLength=true) {
	// Check if the arrays are the same length
	if (checkLength && arr1.length !== arr2.length) return false;

	// Check if all items exist and are in the same order
	// If there is a difference then return the index where the arrays don't match
	for (let i = 0, l = arr1.length; i < l; i++) {
		if (arr1[i] !== arr2[i]) return i;
	}

	// Otherwise, return true
	return true;
};

const stringToClass = function(str) {
    return str.replace(/\s+/g, '-').toLowerCase();
};

function getUploadURL(image, resize=null, domain=null) {
    
    const url = [];
    
    if (!image) return null;

    if (image.startsWith('/') || image.includes('://')) return image;
    
    const [store, agency, path] = typeof image === 'string' ? image.split(':') : image;

    if (!store || !agency || !path) return null;

	if (resize) {

       ...