JSFiddle - React, Tailwind, and code Playground

by indigolion

JavaScript

Ext.define('HTMLListMakerfromMarkDown', {
    extend: 'Ext.Component',

    renderTpl: ['<ul></ul>'],

    renderSelectors: {
        treeEl: 'ul'
    },

    renderTo: Ext.getBody(),

    make: function (str) {
        var arrList = str.split(','),
            root = [],
            levels = [];

        Ext.Array.forEach(arrList, function (item) {
            var nodeData = this.getNodeDataFromString(item),
                temp;

            //tree depth stored in an array
            //acts as pointer to depth while iterating
            if (typeof levels[nodeData.level] === 'undefined') {
                levels[nodeData.level] = -1;
            }

            //for each level
            levels = Ext.Array.map(levels, function (item, index) {
                //if node level does not exceed level pointer index 
                if (index <= nodeData.level) {
                    //set node to be updated
					temp = temp || root; 
					if (index < nodeData.level) {
                        //set node to be updated
						temp = temp[item][1];
					} else if (index === nodeData.level) {
                        //we're @ pointer, so update node
						temp.push([nodeData.text, []]);
					}
				}

                //update node level pointers
                if (index > nodeData.level) {
                    item = -1;
                } else if (index === nodeData.level) {
                    item += 1;
                }
                return item;
            });
        }, this);

        this.insertTreeNodesfromArray(root);

    },

    getNodeDataFromString: function (str) {
        //works out how many astericks the passed string contains
        //and returns depth and text information for that string
        var matches = str.match(/\*/g),
            retVal = {
                level: matches.length - 1
            },
            regex;

        regex = new RegExp('^\\' + matches.join('\\') + ' (.*)');
        str.replace(regex, function (match, p1) {
           ...