Ndtyjky

I'm working on angular 6 project, there is a textarea with color-picker, user selects the text & applies color, I'm replacing the selected text with a span tag, which contains the styling with inline CSS.

Example: When a part of text is selected, I'm using window.getSelection() to create range with offsets, using the offsets I'm able to get the selected area from the textarea content. After that, I'm replacing the selected area with a span containing the font-color(color comes from color-picker). It works fine for the first time. But when i do it again, if i select a part of the text, the offsets are going wrong & color is being applied to other than the selected area. Because, the previous selected area will be replaced with spanTag & the selection doesn't happen. The selection doesn't move through the span element.

Here is the code:

This is the selectionFunction:

private getCaretAndSelectionRange() {

    var doc = this.editableElment.ownerDocument || this.editableElment.document;

    var win = doc.defaultView || doc.parentWindow;

    var sel;

    if (typeof win.getSelection != "undefined") {

        sel = win.getSelection();

        if (sel.rangeCount > 0) {

            var range = win.getSelection().getRangeAt(0);

            var preCaretRange = range.cloneRange();

            preCaretRange.selectNodeContents(this.editableElment);

            preCaretRange.setStart(range.startContainer,range.startOffset);

            preCaretRange.setEnd(range.endContainer, range.endOffset);

            this.caretPosition = this.editableElment.innerText.length;

            this.selecteTextLength = (range.endOffset - range.startOffset);

            this.firstIndex = preCaretRange.startOffset;

            this.secondIndex = preCaretRange.endOffset;

        }

    } else if ((sel = doc.selection) && sel.type != "Control") {

        var textRange = sel.createRange();

        var preCaretTextRange = doc.body.createTextRange();

        preCaretTextRange.moveToElementText(this.editableElment);

        preCaretTextRange.setEndPoint("EndToEnd", textRange);

        this.caretPosition = preCaretTextRange.text.length;

        this.selecteTextLength = (textRange.endOffset - textRange.startOffset);

    }

}

This is the formatter:

public formatDoc(sCmd, sValue) {

    this.editableElment = document.querySelector("#" + this.customTextAreaID);

    this.editableElment.focus();

    var commandStatus: boolean = document.execCommand('styleWithCSS', false, true);

    commandStatus = document.execCommand(sCmd, false, sValue);

    if(this.firstIndex !== null && this.secondIndex !== null) {

        var str = this.editableElment.innerText;

        var str2 = str.slice(this.firstIndex,this.secondIndex);

        var output = str;

        output = output.replace(new RegExp(str2, 'g'),'<span style="color:'+sValue+';">'+str2+'</span>');

        this.editableElment.innerHTML = output;

        console.log(this.editableElment.innerHTML+'before');

    }

    this.tfWidget.inputValue = this.editableElment.innerHTML;

}

Note: sCmd = 'ForeColor' && sValue is the HEX value from the color-picker.