AutoSuggest: Better way to implement focus after inserting a snippet

Question

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] || textNode);
    } 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?

Answer 1

I do feel that negative numbers seems a bit backwards compared to most other libraries I have used. I am not sure what all would be involved with reworking this code to utilize positive numbers but it seems it may be hefty. Though maybe you could accept positive numbers and convert them to negatives by subtracting them from the length of the string.

---

I see one spot that may have a possible performance improvement- in the recursive call to setSelection():

setSelection(
    lastFocus - lastNode.textContent.length,
    Array.from(lastNode.childNodes),
    method
);

here Array.from() is called to copy the array of nodes from the childNodes collection from lastNode. The spread operator can also be used to put those child nodes into an array (from the node collection), allowing you to eliminate that extra function call.

setSelection(
    lastFocus - lastNode.textContent.length,
    [...lastNode.childNodes],
    method
);