JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<div class="dont kill me">
<div style="background-color: #f2f2f2; border-radius: 20px; padding: 20px; box-shadow: 0px 0px 10px; display: block;" contenteditable=true>"החלטנו לשנות את הצבע של כל המספרים."<br>"אבל זה אומר שאני צריך לעבור יחידה יחידה ולשנות... עשינו בערך 13 יחידות עם העיצוב הקודם..."<br>"אין ברירה... תשנה..."<br>"אוקיי, בסדר..."<br>"אה ו... זה לא ייקח הרבה זמן, נכון? רק לשנות את הצבע? צריך את זה למחר."</div>
    </div>
    
    <input type="button" value="clean" id="clean" />

JavaScript

var keep_user_styles = ["font-size", "color", "font-weight"];
var keep_user_tags = ["span", "b", "u", "i"];

    function clean(node) {
        if (node instanceof Array || node instanceof NodeList) {
            var exists = false;
            for (var i = 0, len = node.length; i < len;) {
                if(clean(node[i])){
                    i++;
                    exists = true;
                }
            }
            return exists;
        }
        else if (node.nodeType == 3) {
            return node.nodeValue;
        } else {
            var inlinestyling = node.getAttribute("style");
            var obj = CSSParser.parse(inlinestyling);
            for (var key in obj) {
                if (keep_user_styles.indexOf(key) == -1)
                    delete obj[key];
            }
            console.log(obj);
            var exists = true;
            if (Object.isEmpty(obj)) {
                node.removeAttribute("style");
                if (keep_user_tags.indexOf(node.tagName.toLowerCase()) == -1) {
                    exists = false;
                    if($(node).is(":empty"))
                        $(node).remove();
                    else
                        $(node).children().unwrap();
                }
            }
            else {
                exists = true;
                node.setAttribute("style", CSSParser.stringify(obj));
                return exists && clean(node.childNodes);
            }
            return exists;
        }
    }
Object.isEmpty = function (ob) {
    for (var i in ob) { return false; }
    return true;
}

CSSParser = {};
CSSParser.parse = function (text) {
    var re = /([\w-]+)\s*:\s*([^;]+)\s*;?/g, match;
    var obj = {};
    while ((match = re.exec(text)) != null) {
        obj[match[0]] = match[1];
    }
    return obj;
}
CSSParser.stringify = function (obj) {
    var string = "";
    for (var key in obj)
        string += key + ":" + obj[key] + ";";
    return...