WP Function to make a Json Formatter Web Based Tool

wp-json-formatter

function load_json_formatter_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('json-formatter', get_template_directory_uri() . '/json-formatter.js', array('jquery'), '1.0', true);
    wp_enqueue_script('jsonlint', 'https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js', array('jquery'), '1.6.0', true);
}
add_action('wp_enqueue_scripts', 'load_json_formatter_scripts');

function json_formatter_shortcode() {
    ob_start();
    ?>
    <style>
	    .container {
	    width: 80%;
	    margin: 0 auto;
	    font-family: Arial, sans-serif;
	    font-size: 16px;
	    color: #333;
	}

	.step h4 {
	    margin-bottom: 10px;
	    font-size: 1.2rem;
	    color: #007bff;
	}

	.first-step {
	    display: grid;
	    grid-template-columns: 90% 20%;
	    grid-template-rows: auto auto; 
	    gap: 10px;
	    margin-bottom: 20px;
	}

	.json-textarea {
	    grid-column: span 2;
	    width: 100%;
	    height: 370px;
	    padding: 10px;
	    box-sizing: border-box;
	    margin-bottom: 10px;
	    font-family: 'Courier New', monospace;
	    font-size: 14px;
	    background-color: #f5f5f5;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	}

	.select-container select {
	    width: 100%;
	    padding: 10px;
	    box-sizing: border-box;
	    font-family: Arial, sans-serif;
	    font-size: 16px;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	    background-color: #ffffff;
	}

	.button-panel {
	    grid-column: span 2;
	    background-color: #007bff;
	    border: none;
	    color: white;
	    padding: 10px 20px;
	    text-align: center;
	    text-decoration: none;
	    font-size: 14px;
	    cursor: pointer;
	    border-radius: 5px;
	    margin-top: 10px;
	    width: 100%;
	    transition: background-color 0.3s ease;
	}

	.button-panel:hover {
	    background-color: #0056b3;
	}

	h5 {
	    padding: 0;
	    font-size: 0.90rem;
	    color: #555;
	}

	/* Media Query for Tablets and Smaller Screens */
	@media screen and (max-width: 768px) {
	    .first-step {
		grid-template-columns: 100%;
	    }

	    .json-textarea {
		height: 150px;
	    }
	}

	/* Media Query for Phones and Smaller Screens */
	@media screen and (max-width: 480px) {
	    .json-textarea {
		height: 100px;
	    }
	}
    </style>
<section class="json-formatter-section">
<div id="json-formatter" class="container">
    <div class="step">
        <h4>Drag and drop your JSON here or write your code.</h4>
    </div>
    <div class="first-step">
        <div class="textarea-container">
            <textarea id="json-input" placeholder="Drag and drop your JSON file here or write your code" class="json-textarea" ondrop="handleDrop(event)" ondragover="handleDragOver(event)"></textarea>
        </div>
        <div class="process-button-container">
            <div class="select-container-1">
                <h5>Formatting Style</h5>
                <select id="format-select" class="button-panel">
                    <option value="0">Compact</option>
                    <option value="1">1 Space Tab</option>
                    <option value="2">2 Space Tab</option>
                    <option value="3">3 Space Tab</option>
                    <option value="4">4 Space Tab</option>
                </select>
            </div>
            <div class="select-container-2">
                <h5>Validation Type</h5>
                <select id="validation-type" class="button-panel">
                    <option value="ecma-404">ECMA-404</option>
                    <option value="rfc-8259">RFC-8259</option>
                    <option value="rfc-7159">RFC-7159</option>
                    <option value="rfc-4627">RFC-4627</option>
                    <option value="skip-validation">Skip Validation</option>
                </select>
            </div>
            <div class="select-container-3">
                <h5>Press Process Button</h5>
                <button class="button-panel" id="format-button">Process JSON</button>
            </div>
        </div>
    </div>
    <div class="step">
        <h4>The Processed JSON Result.</h4>
    </div>
    <div class="first-step">
        <div class="textarea-container">
            <textarea id="formatted-json" class="json-textarea"></textarea>
        </div>
        <div class="process-button-container">
            <div class="select-container-1">
                <h5>Download result</h5>
                <button class="button-panel" id="download-button">Download</button>
            </div>
            <div class="select-container-3">
                <h5>Copy result</h5>
                <button class="button-panel" id="copy-button">Copy to Clipboard</button>
            </div>
            <div class="select-container-2">
                <h5>Clear result</h5>
                <button class="button-panel" id="clear-button">Clear</button>
            </div>
        </div>
    </div>
</div>
</section>
    <script>
        jQuery(document).ready(function($) {
			$('#json-input').on('dragover', function(event) {
                event.preventDefault();
                $(this).addClass('drag-over');
            });

            $('#json-input').on('dragleave', function(event) {
                event.preventDefault();
                $(this).removeClass('drag-over');
            });

            $('#json-input').on('drop', function(event) {
                event.preventDefault();
                $(this).removeClass('drag-over');

                var files = event.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#json-input').val(e.target.result);
                    };
                    reader.readAsText(files[0]);
                }
            });
            $('#format-button').on('click', function() {
                try {
                    var jsonString = $('#json-input').val();
                    var selectedFormat = $('#format-select').val();
                    var validationType = $('#validation-type').val();
                    console.log('JSON recibido:', jsonString);
                    var jsonObject;

                    // Validar el JSON según el tipo de validación seleccionado
                    if (validationType === 'ecma-404' || validationType === 'rfc-8259' || validationType === 'rfc-7159' || validationType === 'rfc-4627') {
                        jsonlint.parse(jsonString);
                        jsonObject = JSON.parse(jsonString);
                    } else if (validationType === 'skip-validation') {
                        // No se aplica validación
                        jsonObject = JSON.parse(jsonString);
                    } else {
                        throw new Error('Tipo de validación no reconocido');
                    }

                    var formattedJson = JSON.stringify(jsonObject, null, parseInt(selectedFormat));

                    $('#formatted-json').val(formattedJson);
                } catch (error) {
                    $('#formatted-json').val(error.message);
                }
            });

            $('#download-button').on('click', function() {
                var content = $('#formatted-json').val();
                if (content) {
                    var blob = new Blob([content], { type: 'application/json' });
                    var url = URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = 'formatted-file.json';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                } else {
                    alert('No hay contenido para descargar.');
                }
            });

            $('#clear-button').on('click', function() {
                $('#json-input').val('');
                $('#formatted-json').val('');
            });

            $('#copy-button').on('click', function() {
                $('#formatted-json').select();
                document.execCommand('copy');
                alert('JSON copiado al portapapeles.');
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('jsonformatter', 'json_formatter_shortcode');

Este Gist contiene un código PHP para crear un shortcode de WordPress que proporciona una interfaz de usuario para formatear y validar JSON. Su uso es simplemente colocar el shortcode [jsonformatter] en cualquier parte del contenido de WordPress. Simplemente copia y pega este codigo en tu archivo functions.php