Extends color patterns from chalk

[Elius94]

Currently we can set colors using chalk. If we need to set a color or style on the home page we still have to use it. I wish to add color syntax to the homepage string like html tags or other escaped strings that will be changed to chalk function in the library.

[Elius94]

It's difficult to replace all color strings from chalk without wrapping it. I was thinking to use HTML like tags to set colors and style in the text and make the library replacing that substring with the relative chalk function.

The trouble is that the regex method I've tried is too slower and it is blocking.

That's the color class I suppose to do:

class ColorsManager {
    constructor() {

    }

    replaceColorTagsWithChalk(text) {
        const colorTags = text.match(/<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>| *\/>)/gmu)
        colorTags.forEach(tag => {
            const tagName = tag.match(/<([a-zA-Z1-6]+)/)[1]
            const tagContent = tag.match(/<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>| *\/>)/)[0]
            const tagContentWithoutTag = tag.replace(/<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>| *\/>)/, '$3')
            const tagContentWithoutTagWithChalk = chalk[tagName](tagContentWithoutTag)
            text = text.replace(tagContent, tagContentWithoutTagWithChalk)
        })
        return text
    }

    red(text) {
        return `<red>${text}</red>`;
    }

    green(text) {
        return `<green>${text}</green>`;
    }

    yellow(text) {
        return `<yellow>${text}</yellow>`;
    }

    blue(text) {
        return `<blue>${text}</blue>`;
    }

    magenta(text) {
        return `<magenta>${text}</magenta>`;
    }

    cyan(text) {
        return `<cyan>${text}</cyan>`;
    }

    white(text) {
        return `<white>${text}</white>`;
    }

    gray(text) {
        return `<gray>${text}</gray>`;
    }

    black(text) {
        return `<black>${text}</black>`;
    }

    bgRed(text) {
        return `<bgRed>${text}</bgRed>`;
    }

    bgGreen(text) {
        return `<bgGreen>${text}</bgGreen>`;
    }

    bgYellow(text) {
        return `<bgYellow>${text}</bgYellow>`;
    }

    bgBlue(text) {
        return `<bgBlue>${text}</bgBlue>`;
    }

    bgMagenta(text) {
        return `<bgMagenta>${text}</bgMagenta>`;
    }

    bgCyan(text) {
        return `<bgCyan>${text}</bgCyan>`;
    }

    bgWhite(text) {
        return `<bgWhite>${text}</bgWhite>`;
    }

    bgGray(text) {
        return `<bgGray>${text}</bgGray>`;
    }

    bgBlack(text) {
        return `<bgBlack>${text}</bgBlack>`;
    }

    bold(text) {
        return `<bold>${text}</bold>`;
    }

    italic(text) {
        return `<italic>${text}</italic>`;
    }

    underline(text) {
        return `<underline>${text}</underline>`;
    }

    blink(text) {
        return `<blink>${text}</blink>`;
    }

    isLastClosed(text) {
        const lastEndTag = this.findLastEndTag(text)
        const lastStartTag = this.findLastStartTag(text)
        if (lastEndTag && lastStartTag) {
            return lastEndTag.index > -1 && lastEndTag.index > lastStartTag.index
        }
        return false
    }

    isFirstOpened(text) {
        const firstEndTag = this.findFirstEndTag(text)
        const firstStartTag = this.findFirstStartTag(text)
        if (firstEndTag && firstStartTag) {
            return firstStartTag.index > -1 && firstStartTag.index < firstEndTag.index
        }
        return false
    }

    findLastEndTag(text) {
        // Find one of the end tags within the text using regex
        // return an object with the tag and the index
        let lastEndTag = text.match(/<\/[a-zA-Z]+>/g);
        if (lastEndTag) {
            lastEndTag = lastEndTag[lastEndTag.length - 1];
            let lastEndTagIndex = text.lastIndexOf(lastEndTag);
            return {
                tag: lastEndTag,
                index: lastEndTagIndex
            }
        }
    }

    findLastStartTag(text) {
        // Find one of the start tags within the text using regex
        // return an object with the tag and the index
        let lastStartTag = text.match(/<[a-zA-Z]+>/g);
        if (lastStartTag) {
            lastStartTag = lastStartTag[lastStartTag.length - 1];
            let lastStartTagIndex = text.lastIndexOf(lastStartTag);
            return {
                tag: lastStartTag,
                index: lastStartTagIndex
            }
        }
    }

    findFirstEndTag(text) {
        // Find one of the end tags within the text using regex
        // return an object with the tag and the index
        let firstEndTag = text.match(/<\/[a-zA-Z]+>/g);
        if (firstEndTag) {
            firstEndTag = firstEndTag[0];
            let firstEndTagIndex = text.indexOf(firstEndTag);
            return {
                tag: firstEndTag,
                index: firstEndTagIndex
            }
        }
    }

    findFirstStartTag(text) {
        // Find one of the start tags within the text using regex
        // return an object with the tag and the index
        let firstStartTag = text.match(/<[a-zA-Z]+>/g);
        if (firstStartTag) {
            firstStartTag = firstStartTag[0];
            let firstStartTagIndex = text.indexOf(firstStartTag);
            return {
                tag: firstStartTag,
                index: firstStartTagIndex
            }
        }
    }
}

[Elius94]

Now colors are managed with the new drawing algorytm