Gfrktyl

Introduction:

I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript.

One of the features I have implemented is focusing a particular portion of inserted snippet after insertion. This is how I am asking input for focus.

focusText: [StartIndex, EndIndex]

StartIndex and EndIndex of the content that should be in focus
after inserting the text. As of now these indexes should be calculated
as (0 - numberOfCharactersFromEnd)

focusHtml: [StartIndex, EndIndex]

StartIndex and EndIndex of the content that should be in focus after inserting the HTML. As of now these indexes should be calculated as (0 - numberOfCharactersFromEnd). This should not include the characters from HTML tags

Example:

{

    value: 'script',

    insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',

    focusText: [-25, -11],

    insertHtml: `&lt;<span style="color: red">script</span>&nbsp;<span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span>&nbsp;<span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>&gt;&lt;/<span style="color: red">script</span>&gt;`,

    focusHtml: [-25, -11],

}



// Should focus `path/to/jsfile` after inserting the snippet

insertText and focusText are for inserting snippet as text.

insertHtml and focusHtml are for inserting snippet as html elements.

And I am evaluating the focus value as follows:

/* For inserting as text:

 * textNode is the text node in which the snippet has been inserted

 * selection is the range object of current selection.

 * cursorPosition is after the last character in inserted snippet

 * */



selection.setStart(textNode, cursorPosition + focusText[0]);

selection.setEnd(textNode, cursorPosition + focusText[1]);

/* For inserting as HTML:

 * textNode is the text node after which the new html element(s) will be inserted

 * selection is the range object of current selection.

 * insertHtmlAfter returns an Array of newly inserted nodes

 * */

const nodes = insertHtmlAfter(textNode, suggestion.insertHtml);

const focus = nodes.length ? suggestion.focusHtml : [0, 0];

function setSelection(focus, nodes, method) {

    let lastNode, lastFocus = focus;

    if (lastFocus !== 0) {

        do {

            lastNode = nodes.pop();

            lastFocus += lastNode.textContent.length;

        } while(nodes.length && lastFocus < 0);



        if (!lastNode) {

            throw new TypeError(`AutoSuggest: Invalid value provided for Suggestion.focusHtml`);

        };

    }



    if (lastFocus === 0) {

        selection[method + 'After'](nodes[nodes.length - 1] || startContainer);

    } else {

        if (lastNode.nodeType === lastNode.TEXT_NODE) {

            selection[method](lastNode, lastFocus);

        } else {

            setSelection(

                lastFocus - lastNode.textContent.length,

                Array.from(lastNode.childNodes),

                method

            );

        }

    }

};



setSelection(focus[1], [...nodes], 'setEnd');

setSelection(focus[0], [...nodes], 'setStart');

Problem:

1. Asking for focus values as negative numbers might be confusing for the users, but it simplifies the logic for focusText, so is there any better way that is both user friendly and requires simpler logic.




2. I think the logic for setting the focus for inserting as HTML is a bit over-complicated, is there any better way to achieve this?