JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<h4>Example From HTML</h4>
<ul>
    <li>Test1
        <ul>
            <li>Sub Item 1</li>
        </ul>
    </li>
    <li>Test2</li>
</ul>

<button id="getData">Get Data</button>
<div id="fromCode">My Data</div>

JavaScript

var jsTreeMaker = (function () {
    var selectedListItem;
    var displayPrefix = "displayFor";
    var newPrefix = "new";
    var parentNodePrefix = "parent";
    var addedIdCounter = 0;
    var currentData;
    var jsTreeMakerOptions = {
        PlaceListActionsAfterText: true,
        MainListId: 0,
        Container: document.getElementsByTagName('body')[0],
        ActionItemOptions: {
            Remove: {
                Display: "[-]",
                Title: "Click to Remove",
                Callback: function() {},
                IsAllowed: true,
                Id: "actionItemRemove",
                DefaultDisplay: ""
},
            Add: {
                Display: "[+]",
                Title: "Click to Add A Child",
                Callback: function () { },
                IsAllowed: true,
                Id: "actionItemAdd",
                DefaultDisplay: ""
            },
            Edit: {
                Display: "[✏]",
                Title: "Click to Edit Text",
                Callback: function () { },
                IsAllowed: true,
                Id: "actionItemEdit",
                DefaultDisplay: "none"
            },
            Collapse: {
                Display: "[^]",
                Title: "Click to Collapse",
                Callback: function() {},
                DefaultDisplay: ""
            },
            Expand: {
                Display: "[*]",
                Title: "Click to Expand",
                Callback: function () {},
                DefaultDisplay: ""
            }
        },
        TreeViewData: []
    }

    var generateNodes = function(nodeItem) {
        var childNodes = nodeItem || [];
        if (nodeItem && typeof nodeItem === "object" && !Array.isArray(nodeItem)) {
            createNode(nodeItem);
            childNodes = nodeItem.Children;
        }
        for (var i = 0; i < childNodes.length; i++) {
            generateNodes(childNodes[i]);
        }
    }
    var createNode =...