Feature suggestion: Nicer fonts and click to select

[VarunAgw]

It's not the most beautiful or efficient code snippet written but that's what I currently use with TamperMonkey to improve JSON Formatter.

The main features are "click to select a field "and better fonts. If you like them, feel free to integrate them (after the rewrite obviously) in the extension, otherwise just close the ticket.

$("#jfContent, #formattedJson").ready(function () {
    setTimeout(function () {
        if (2 == $("#jfContent, #formattedJson").length) {
            $('span').css('font-family', 'Microsoft YaHei,Tahoma');
            $('span').css('font-size', '15px');

            $('.k').css('color', 'brown');

            $('.nl,.bl,.n,.b').css('font-weight', "normal");
            $('.nl').css('color', 'gray');
            $('.bl').css('color', 'black');
            $('.n').css('color', 'darkorange');
            $('.b').css('color', 'blue');

            $("#formattedJson").html($("#formattedJson").html().replaceAll('>"<', '><span style="color:white; font-size: 1px;">"</span><'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>":&nbsp;<', '><span style="color:white; font-size: 1px;">"</span>:&nbsp;<'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>[<', '>[ <'));
            $("#formattedJson").html($("#formattedJson").html().replaceAll('>{<', '>{ <'));
            $(".kvov .objProp > .s,.nl,.bl,.n").css("cursor", "pointer");

            function addLink() {
                if (window.getSelection().anchorNode == $('.e').first()[0]) {
                    var selection = window.getSelection();
                    var newdiv = document.createElement('pre');
                    newdiv.style.position = 'absolute';
                    newdiv.style.left = '-99999px';

                    document.body.appendChild(newdiv);
                    newdiv.innerText = JSON.stringify(window.json, null, 2);
                    selection.selectAllChildren(newdiv);

                    window.setTimeout(function () {
                        document.body.removeChild(newdiv);
                    }, 100);
                }

            }
            document.addEventListener('copy', addLink);

            $('span.k').each(function () {
                //var depth = $(this).parents(".blockInner").length;
                //$(this).prev().text("\t".repeat(depth) + '"');
            });

            $('.b').each(function () {
                //var depth = $(this).parents(".blockInner").length;
                //$(this).prev().text("\t".repeat(depth) + '"');
            });
            var popup = $('<div class="popup" style="display: none; position:absolute;padding:.5em;border-radius:.5em;box-shadow:0 0 1em gray;background:white;z-index:1;white-space:nowrap;color:black;"><span class="info-key" style="font-weight:bold;">type</span>: <span class="info-val" style="color:dodgerblue;">string</span></div>');
            $('body').append(popup);

            $(".kvov .objProp > .s,.nl,.bl,.n").click(function (e) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(e.target);
                selection.removeAllRanges();
                selection.addRange(range);

                $('.popup').css('display', 'block');
            });

            $(document).click(function (e) {
                $('.popup').css('display', 'none');
            });
        }
    });
}, 100);