@oat-sa/tao-core-ui 1.64.2 → 1.65.0

package/dist/highlighter.js

@@ -3,47 +3,47 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
     $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
 
-    /**
-     * This program is free software; you can redistribute it and/or
-     * modify it under the terms of the GNU General Public License
-     * as published by the Free Software Foundation; under version 2
-     * of the License (non-upgradable).
-     *
-     * This program is distributed in the hope that it will be useful,
-     * but WITHOUT ANY WARRANTY; without even the implied warranty of
-     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-     * GNU General Public License for more details.
-     *
-     * You should have received a copy of the GNU General Public License
-     * along with this program; if not, write to the Free Software
-     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-     *
-     * Copyright (c) 2016-2021 (original work) Open Assessment Technologies SA;
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2016-2021 (original work) Open Assessment Technologies SA;
      */
 
-    /**
-     * Data attribute used to logically group the wrapping nodes into a single selection
-     * @type {string}
+    /**
+     * Data attribute used to logically group the wrapping nodes into a single selection
+     * @type {string}
      */
     var GROUP_ATTR = 'data-hl-group';
 
-    /**
-     * Children of those nodes types cannot be highlighted
-     * @type {string[]}
+    /**
+     * Children of those nodes types cannot be highlighted
+     * @type {string[]}
      */
     var defaultBlackList = ['textarea', 'math', 'script', '.select2-container'];
 
-    /**
-     * @param {Object} options
-     * @param {String} options.className - name of the class that will be used by the wrappers tags to highlight text
-     * @param {String} options.containerSelector - allows to select the root Node in which highlighting is allowed
-     * @param {Array<String>} [options.containersBlackList] - additional blacklist selectors to be added to module instance's blacklist
-     * @param {Array<String>} [options.containersWhiteList] - whitelist selectors; supported only in `keepEmptyNodes` mode.
-     *   Priority of blacklist or whitelist is decided by which selector is closest to the node. If no match found, node is considered whitelisted.
-     * @param {Boolean} [options.clearOnClick] - clear single highlight node on click
-     * @param {Object} [options.colors] - keys is keeping as the "c" value of storing/restore the highlighters for indexing, values are wrappers class names
-     * @param {Boolean} [options.keepEmptyNodes] - retain original dom structure as far as possible and do not remove empty nodes if they were not created by highlighter
-     * @returns {Object} - the highlighter instance
+    /**
+     * @param {Object} options
+     * @param {String} options.className - name of the class that will be used by the wrappers tags to highlight text
+     * @param {String} options.containerSelector - allows to select the root Node in which highlighting is allowed
+     * @param {Array<String>} [options.containersBlackList] - additional blacklist selectors to be added to module instance's blacklist
+     * @param {Array<String>} [options.containersWhiteList] - whitelist selectors; supported only in `keepEmptyNodes` mode.
+     *   Priority of blacklist or whitelist is decided by which selector is closest to the node. If no match found, node is considered whitelisted.
+     * @param {Boolean} [options.clearOnClick] - clear single highlight node on click
+     * @param {Object} [options.colors] - keys is keeping as the "c" value of storing/restore the highlighters for indexing, values are wrappers class names
+     * @param {Boolean} [options.keepEmptyNodes] - retain original dom structure as far as possible and do not remove empty nodes if they were not created by highlighter
+     * @returns {Object} - the highlighter instance
      */
     function highlighter (options) {
       var className = options.className;
@@ -56,10 +56,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         highlightingClasses = Object.values(options.colors);
       }
 
-      /**
-       * list of node selectors which should NOT receive any highlighting from this instance
-       * an optional passed-in blacklist is merged with local defaults
-       * @type {Array}
+      /**
+       * list of node selectors which should NOT receive any highlighting from this instance
+       * an optional passed-in blacklist is merged with local defaults
+       * @type {Array}
        */
       const containersBlackList = _.union(defaultBlackList, options.containersBlackList);
       const containersBlackListSelector = containersBlackList.join(', ');
@@ -70,63 +70,63 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         containersBlackAndWhiteListSelector = _.union(containersBlackList, options.containersWhiteList).join(', ');
       }
 
-      /**
-       * used in recursive loops to decide if we should wrap or not the current node
-       * @type {boolean}
+      /**
+       * used in recursive loops to decide if we should wrap or not the current node
+       * @type {boolean}
        */
       let isWrapping = false;
 
-      /**
-       * performance improvement to break out of a potentially big recursive loop once the wrapping has ended
-       * @type {boolean}
+      /**
+       * performance improvement to break out of a potentially big recursive loop once the wrapping has ended
+       * @type {boolean}
        */
       let hasWrapped = false;
 
-      /**
-       * used in recursive loops to assign a group Id to the current wrapped node
-       * @type {number}
+      /**
+       * used in recursive loops to assign a group Id to the current wrapped node
+       * @type {number}
        */
       let currentGroupId;
 
-      /**
-       * used in recursive loops to build the index of text nodes
-       * @type {number}
+      /**
+       * used in recursive loops to build the index of text nodes
+       * @type {number}
        */
       let textNodesIndex;
 
-      /**
-       * Returns the node in which highlighting is allowed
-       * @returns {Element}
+      /**
+       * Returns the node in which highlighting is allowed
+       * @returns {Element}
        */
       function getContainer() {
         return $(containerSelector).get(0);
       }
 
-      /**
-       * Returns all highlighted nodes, excluding any inside blacklisted elements
-       * @returns {JQuery<HTMLElement>}
+      /**
+       * Returns all highlighted nodes, excluding any inside blacklisted elements
+       * @returns {JQuery<HTMLElement>}
        */
       function getHighlightedNodes() {
         return $(containerSelector).find(`.${highlightingClasses.join(',.')}`).filter((i, node) => !isBlacklisted(node));
       }
 
-      /**
-       * Attach data to wrapper node.
-       * Use it when deleting this highlight to know if highlight content should be merged with neighbour text nodes or not.
-       * Use it when building/restoring index to know if restored highlight content should be split off neighbour text node or not.
-       * Needed to keep markup the same as it was before highlighting.
-       * @param {HTMLElement} node
-       * @param {Boolean} beforeWasSplit
-       * @param {Boolean} afterWasSplit
+      /**
+       * Attach data to wrapper node.
+       * Use it when deleting this highlight to know if highlight content should be merged with neighbour text nodes or not.
+       * Use it when building/restoring index to know if restored highlight content should be split off neighbour text node or not.
+       * Needed to keep markup the same as it was before highlighting.
+       * @param {HTMLElement} node
+       * @param {Boolean} beforeWasSplit
+       * @param {Boolean} afterWasSplit
        */
       function addSplitData(node, beforeWasSplit, afterWasSplit) {
         node.dataset.beforeWasSplit = beforeWasSplit;
         node.dataset.afterWasSplit = afterWasSplit;
       }
 
-      /**
-       * Highlight all text nodes within each given range
-       * @param {Range[]} ranges - array of ranges to highlight, may be given by the helper selector.getAllRanges()
+      /**
+       * Highlight all text nodes within each given range
+       * @param {Range[]} ranges - array of ranges to highlight, may be given by the helper selector.getAllRanges()
        */
       function highlightRanges(ranges) {
         ranges.forEach(function (range) {
@@ -178,10 +178,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Check if a range is valid
-       * @param {Range} range
-       * @returns {boolean}
+      /**
+       * Check if a range is valid
+       * @param {Range} range
+       * @returns {boolean}
        */
       function isRangeValid(range) {
         var rangeInContainer;
@@ -193,18 +193,18 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Core wrapping function. Traverse the DOM tree and highlight (= wraps) all text nodes within the given range.
-       * Recursive.
-       *
-       * @param {Node} rootNode - top of the node hierarchy in which text nodes will be searched
-       * @param {Object} rangeInfos
-       * @param {Node} rangeInfos.startNode - node on which the selection starts
-       * @param {Node} rangeInfos.startNodeContainer - container of the startNode, or the start node itself in case of text nodes
-       * @param {number} rangeInfos.startOffset - same as range.startOffset, but not read-only to allow override
-       * @param {Node} rangeInfos.endNode - node on which the selection ends
-       * @param {Node} rangeInfos.endNodeContainer - container of the endNode, or the end node itself in case of text nodes
-       * @param {number} rangeInfos.endOffset - same as range.endOffset, but not read-only to allow override
+      /**
+       * Core wrapping function. Traverse the DOM tree and highlight (= wraps) all text nodes within the given range.
+       * Recursive.
+       *
+       * @param {Node} rootNode - top of the node hierarchy in which text nodes will be searched
+       * @param {Object} rangeInfos
+       * @param {Node} rangeInfos.startNode - node on which the selection starts
+       * @param {Node} rangeInfos.startNodeContainer - container of the startNode, or the start node itself in case of text nodes
+       * @param {number} rangeInfos.startOffset - same as range.startOffset, but not read-only to allow override
+       * @param {Node} rangeInfos.endNode - node on which the selection ends
+       * @param {Node} rangeInfos.endNodeContainer - container of the endNode, or the end node itself in case of text nodes
+       * @param {number} rangeInfos.endOffset - same as range.endOffset, but not read-only to allow override
        */
       function wrapTextNodesInRange(rootNode, rangeInfos) {
         var childNodes = rootNode.childNodes;
@@ -315,12 +315,12 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Restructure content of the highlighted wrapper according to the selectedRange
-       * @param {Node} textNode
-       * @param {string} activeClass
-       * @param {Range} selectedRange
-       * @param {number} groupId
+      /**
+       * Restructure content of the highlighted wrapper according to the selectedRange
+       * @param {Node} textNode
+       * @param {string} activeClass
+       * @param {Range} selectedRange
+       * @param {number} groupId
        */
       function highlightContainerNodes(textNode, activeClass, selectedRange, groupId) {
         const container = textNode.parentNode;
@@ -329,46 +329,46 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         const isSelectionCoversNodeStart = range.compareBoundaryPoints(Range.START_TO_START, selectedRange) === 0;
         const isSelectionCoversNodeEnd = range.compareBoundaryPoints(Range.END_TO_END, selectedRange) === 0;
 
-        /*
-        There are 4 possible cases selected area is intersected with already highlighted element.
-        In examples below the border is represents the selection, "yellow" is class name of already highlighted
-        container, "red" is class name of currently active highlighter
-        **********************************************************************************************************
-        1. The container content is completely selected, so that we only have to change the highlighter class name
-          Input:
-         __________________________________________________
-        |                                                  |
-        |<span class="yellow"> Lorem ipsum dolor sit</span>|
-        |__________________________________________________|
-          Output:
-         <span class="red"> Lorem ipsum dolor sit</span>
-          **********************************************************************************************************
-        2. The container content is partially selected from the begging.
-          Input:
-         ______________________________
-        |                              |
-        |<span class="yellow"> Lorem ip|sum dolor sit</span>
-        |______________________________|
-          Output:
-        <span class="red"> Lorem ip</span><span class="yellow">sum dolor sit</span>
-          **********************************************************************************************************
-        3. The container content is partially selected at the end.
-          Input:
-                                       ____________________
-                                      |                    |
-        <span class="yellow"> Lorem ip|sum dolor sit</span>|
-                                      |____________________|
-          Output:
-        <span class="yellow"> Lorem ip</span><span class="red">sum dolor sit</span>
-          **********************************************************************************************************
-        4. The container content is partially selected in the middle.
-          Input:
-                                     ___________
-                                    |           |
-        <span class="yellow"> Lorem |ipsum dolor| sit</span>
-                                    |___________|
-          Output:
-         <span class="yellow"> Lorem </span><span class="red">ipsum dolor</span><span class="yellow"> sit</span>
+        /*
+        There are 4 possible cases selected area is intersected with already highlighted element.
+        In examples below the border is represents the selection, "yellow" is class name of already highlighted
+        container, "red" is class name of currently active highlighter
+        **********************************************************************************************************
+        1. The container content is completely selected, so that we only have to change the highlighter class name
+         Input:
+         __________________________________________________
+        |                                                  |
+        |<span class="yellow"> Lorem ipsum dolor sit</span>|
+        |__________________________________________________|
+         Output:
+         <span class="red"> Lorem ipsum dolor sit</span>
+         **********************************************************************************************************
+        2. The container content is partially selected from the begging.
+         Input:
+         ______________________________
+        |                              |
+        |<span class="yellow"> Lorem ip|sum dolor sit</span>
+        |______________________________|
+         Output:
+        <span class="red"> Lorem ip</span><span class="yellow">sum dolor sit</span>
+         **********************************************************************************************************
+        3. The container content is partially selected at the end.
+         Input:
+                                       ____________________
+                                      |                    |
+        <span class="yellow"> Lorem ip|sum dolor sit</span>|
+                                      |____________________|
+         Output:
+        <span class="yellow"> Lorem ip</span><span class="red">sum dolor sit</span>
+         **********************************************************************************************************
+        4. The container content is partially selected in the middle.
+         Input:
+                                     ___________
+                                    |           |
+        <span class="yellow"> Lorem |ipsum dolor| sit</span>
+                                    |___________|
+         Output:
+         <span class="yellow"> Lorem </span><span class="red">ipsum dolor</span><span class="yellow"> sit</span>
          */
         if (isSelectionCoversNodeStart && isSelectionCoversNodeEnd) {
           textNode.parentNode.className = activeClass;
@@ -384,13 +384,13 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Wraps all containers text nodes with highlighter element.
-       * The child node with index given by indexToWrapNode parameter will be wrap with class given by activeClass parameter
-       * @param {Element} container
-       * @param {number} indexToWrapNode
-       * @param {string} activeClass
-       * @param {number} groupId
+      /**
+       * Wraps all containers text nodes with highlighter element.
+       * The child node with index given by indexToWrapNode parameter will be wrap with class given by activeClass parameter
+       * @param {Element} container
+       * @param {number} indexToWrapNode
+       * @param {string} activeClass
+       * @param {number} groupId
        */
       function wrapContainerChildNodes(container, indexToWrapNode, activeClass, groupId) {
         const containerClass = container.className;
@@ -411,11 +411,11 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         container.replaceWith(fragment);
       }
 
-      /**
-       * wraps a text node into the highlight span
-       * @param {Node} node - the node to wrap
-       * @param {number} groupId - the highlight group
-       * @returns {Node|null} wrapper node, if it was created
+      /**
+       * wraps a text node into the highlight span
+       * @param {Node} node - the node to wrap
+       * @param {number} groupId - the highlight group
+       * @returns {Node|null} wrapper node, if it was created
        */
       function wrapTextNode(node, groupId) {
         if (isWrapping && !isWrappingNode(node.parentNode) && isWrappable(node)) {
@@ -425,11 +425,11 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return null;
       }
 
-      /**
-       * We need to re-index the groups after a user highlight: either to merge groups or to resolve inconsistencies
-       * Recursive.
-       *
-       * @param {Node} rootNode
+      /**
+       * We need to re-index the groups after a user highlight: either to merge groups or to resolve inconsistencies
+       * Recursive.
+       *
+       * @param {Node} rootNode
        */
       function reindexGroups(rootNode) {
         if (!rootNode) {
@@ -456,10 +456,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Some highlights may result in having adjacent wrapping nodes. We remove them here to get a cleaner markup.
-       *
-       * @param {Node} rootNode
+      /**
+       * Some highlights may result in having adjacent wrapping nodes. We remove them here to get a cleaner markup.
+       *
+       * @param {Node} rootNode
        */
       function mergeAdjacentWrappingNodes(rootNode) {
         if (!rootNode) {
@@ -489,8 +489,8 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Unwraps highlighted nodes with a line break or with an empty content
+      /**
+       * Unwraps highlighted nodes with a line break or with an empty content
        */
       function unWrapEmptyHighlights() {
         getHighlightedNodes().each((index, node) => {
@@ -505,13 +505,13 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         });
       }
 
-      /**
-       * Check condition to avoid the work of `unwrapEmptyHighlights` ahead of time, before `mergeAdjacentNodes` runs,
-       * because in `keepEmptyNodes` case we do not want to add nodes to dom unless necessary.
-       * Also be more strict and don't allow to select nodes with spaces only, because they may appear in unexpected places in markup
-       * (here it's not exactly same as `unwrapEmptyHighlights`).
-       * @param {Node} node - node which will be wrapped (highlighted)
-       * @returns {Boolean}
+      /**
+       * Check condition to avoid the work of `unwrapEmptyHighlights` ahead of time, before `mergeAdjacentNodes` runs,
+       * because in `keepEmptyNodes` case we do not want to add nodes to dom unless necessary.
+       * Also be more strict and don't allow to select nodes with spaces only, because they may appear in unexpected places in markup
+       * (here it's not exactly same as `unwrapEmptyHighlights`).
+       * @param {Node} node - node which will be wrapped (highlighted)
+       * @returns {Boolean}
        */
       function willHighlightNotBeEmptyAfterMerge(node) {
         if (!node.textContent.length) {
@@ -533,12 +533,12 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return false;
       }
 
-      /**
-       * `range.surroundContents` can create empty text nodes,
-       * which will cause trouble in `mergeAdjacentNodes` later (in `keepEmptyNodes` case).
-       * This method surrounds range, then removes those nodes
-       * @param {Range} range
-       * @param {Node} wrapperNode
+      /**
+       * `range.surroundContents` can create empty text nodes,
+       * which will cause trouble in `mergeAdjacentNodes` later (in `keepEmptyNodes` case).
+       * This method surrounds range, then removes those nodes
+       * @param {Range} range
+       * @param {Node} wrapperNode
        */
       function rangeSurroundContentsNoEmptyNodes(range, wrapperNode) {
         const containerPreviousSibling = range.commonAncestorContainer.previousSibling;
@@ -548,10 +548,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         removeEmptyTextNodeIfDifferent(wrapperNode.nextSibling, containerNextSibling);
       }
 
-      /**
-       * Remove `node`, if it's an empty text node and is *not* the same node as `nodeToCompare`
-       * @param {Node} node
-       * @param {Node} nodeToCompare
+      /**
+       * Remove `node`, if it's an empty text node and is *not* the same node as `nodeToCompare`
+       * @param {Node} node
+       * @param {Node} nodeToCompare
        */
       function removeEmptyTextNodeIfDifferent(node, nodeToCompare) {
         if (node && node !== nodeToCompare && isText(node) && node.textContent.length === 0) {
@@ -559,8 +559,8 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Remove all wrapping nodes from markup
+      /**
+       * Remove all wrapping nodes from markup
        */
       function clearHighlights() {
         getHighlightedNodes().each(function (i, elem) {
@@ -575,8 +575,8 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         });
       }
 
-      /**
-       * Remove unwrap dom node
+      /**
+       * Remove unwrap dom node
        */
       function clearSingleHighlight(e) {
         if (!keepEmptyNodes) {
@@ -619,21 +619,21 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Index-related functions:
-       * ========================
-       * To allow saving and restoring highlights on an equivalent, but different, DOM tree (for example if the markup is deleted and re-created)
-       * we build an index containing the status of each text node:
-       * - not highlighted
-       * - fully highlighted
-       * - partially highlighted (= with inline ranges)
-       *
-       * This index will be used to restore a selection on the new DOM tree
+      /**
+       * Index-related functions:
+       * ========================
+       * To allow saving and restoring highlights on an equivalent, but different, DOM tree (for example if the markup is deleted and re-created)
+       * we build an index containing the status of each text node:
+       * - not highlighted
+       * - fully highlighted
+       * - partially highlighted (= with inline ranges)
+       *
+       * This index will be used to restore a selection on the new DOM tree
        */
 
-      /**
-       * Bootstrap the process of building the highlight index
-       * @returns {Object[]|BuildModelResultKeepEmpty|null}
+      /**
+       * Bootstrap the process of building the highlight index
+       * @returns {Object[]|BuildModelResultKeepEmpty|null}
        */
       function getHighlightIndex() {
         var rootNode = getContainer();
@@ -654,10 +654,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Traverse the DOM tree to create the text Nodes index. Recursive.
-       * @param {Node} rootNode
-       * @param {Object[]} highlightIndex
+      /**
+       * Traverse the DOM tree to create the text Nodes index. Recursive.
+       * @param {Node} rootNode
+       * @param {Object[]} highlightIndex
        */
       function buildHighlightIndex(rootNode, highlightIndex) {
         const childNodes = rootNode.childNodes;
@@ -726,26 +726,26 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * @typedef HighlightEntryKeepEmpty
-       * @property {String} groupId
-       * @property {String} c - color
-       * @property {Number} offsetBefore
-       * @property {Number} textLength
-       * @property {String} beforeWasSplit
-       * @property {String} afterWasSplit
-       * @property {Array<Number>} path - on each level from root container to highlight, index among siblings
+      /**
+       * @typedef HighlightEntryKeepEmpty
+       * @property {String} groupId
+       * @property {String} c - color
+       * @property {Number} offsetBefore
+       * @property {Number} textLength
+       * @property {String} beforeWasSplit
+       * @property {String} afterWasSplit
+       * @property {Array<Number>} path - on each level from root container to highlight, index among siblings
        */
-      /**
-       * @typedef BuildModelResultKeepEmpty
-       * @property {HighlightEntryKeepEmpty[]} highlightModel
-       * @property {NodeList} wrapperNodes
+      /**
+       * @typedef BuildModelResultKeepEmpty
+       * @property {HighlightEntryKeepEmpty[]} highlightModel
+       * @property {NodeList} wrapperNodes
        */
-      /**
-       * For `keepEmptyNodes` option, creates data model of highlights.
-       * Additionally returns array of highlight nodes. Traverses DOM tree.
-       * @param {Node} rootNode
-       * @returns {BuildModelResultKeepEmpty|null} result
+      /**
+       * For `keepEmptyNodes` option, creates data model of highlights.
+       * Additionally returns array of highlight nodes. Traverses DOM tree.
+       * @param {Node} rootNode
+       * @returns {BuildModelResultKeepEmpty|null} result
        */
       function buildHighlightModelKeepEmpty(rootNode) {
         const classNames = options.colors ? Object.values(options.colors) : [className];
@@ -802,9 +802,9 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         };
       }
 
-      /**
-       * Bootstrap the process of restoring the highlights from an index
-       * @param {Object[]|HighlightEntryKeepEmpty[]|null} highlightIndex
+      /**
+       * Bootstrap the process of restoring the highlights from an index
+       * @param {Object[]|HighlightEntryKeepEmpty[]|null} highlightIndex
        */
       function highlightFromIndex(highlightIndex) {
         var rootNode = getContainer();
@@ -819,10 +819,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Traverse the DOM tree to wraps the text nodes according to the highlight index. Recursive.
-       * @param {Node} rootNode
-       * @param {Object[]} highlightIndex
+      /**
+       * Traverse the DOM tree to wraps the text nodes according to the highlight index. Recursive.
+       * @param {Node} rootNode
+       * @param {Object[]} highlightIndex
        */
       function restoreHighlight(rootNode, highlightIndex) {
         var childNodes = rootNode.childNodes;
@@ -863,11 +863,11 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * For `keepEmptyNodes` option, wraps the text nodes according to highlights data model.
-       * Traverses and updates DOM tree. Shouldn't throw errors in case of mismatches.
-       * @param {Node} rootNode
-       * @param {HighlightEntryKeepEmpty[]|null} highlightModel
+      /**
+       * For `keepEmptyNodes` option, wraps the text nodes according to highlights data model.
+       * Traverses and updates DOM tree. Shouldn't throw errors in case of mismatches.
+       * @param {Node} rootNode
+       * @param {HighlightEntryKeepEmpty[]|null} highlightModel
        */
       function restoreHighlightKeepEmpty(rootNode, highlightModel) {
         if (!highlightModel) {
@@ -933,9 +933,9 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Set highlighter color
-       * @param {string} color Active highlighter color
+      /**
+       * Set highlighter color
+       * @param {string} color Active highlighter color
        */
       function setActiveColor(color) {
         if (options.colors[color]) {
@@ -943,24 +943,24 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Helpers
+      /**
+       * Helpers
        */
 
-      /**
-       * Return the object key contains the given value
-       * @param {Object} object
-       * @param {any} value
-       * @return {string|undefined}
+      /**
+       * Return the object key contains the given value
+       * @param {Object} object
+       * @param {any} value
+       * @return {string|undefined}
        */
       function getKeyByValue(object, value) {
         return Object.keys(object).find(key => object[key] === value);
       }
 
-      /**
-       * Returns color identifier for the given class name
-       * @param {string} highlighterClassName Class name of highlighter classes
-       * @returns {string|number} Color identifier
+      /**
+       * Returns color identifier for the given class name
+       * @param {string} highlighterClassName Class name of highlighter classes
+       * @returns {string|number} Color identifier
        */
       function getColorByClassName(highlighterClassName) {
         if (options.colors) {
@@ -969,10 +969,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return className;
       }
 
-      /**
-       * Returns class name for the given color identifier
-       * @param {string|number} color Color identifier
-       * @returns {string} Class name
+      /**
+       * Returns class name for the given color identifier
+       * @param {string|number} color Color identifier
+       * @returns {string} Class name
        */
       function getClassNameByColor(color) {
         if (options.colors && options.colors[color]) {
@@ -981,31 +981,31 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return className;
       }
 
-      /**
-       * Check if the given node is a wrapper
-       * @param {Node|Element} node
-       * @returns {boolean}
+      /**
+       * Check if the given node is a wrapper
+       * @param {Node|Element} node
+       * @returns {boolean}
        */
       function isWrappingNode(node) {
         return isElement(node) && node.tagName.toLowerCase() === 'span' && highlightingClasses.includes(node.className);
       }
 
-      /**
-       * Check if the given node can be wrapped
-       * @param {Node} node
-       * @returns {boolean}
+      /**
+       * Check if the given node can be wrapped
+       * @param {Node} node
+       * @returns {boolean}
        */
       function isWrappable(node) {
         return isText(node) && !isBlacklisted(node);
       }
 
-      /**
-       * Check if the given node is, or is within, a blacklisted container.
-       * With `keepEmptyNodes` option, node inside blacklisted container can be whitelisted too.
-       * Priority of blacklist or whitelist is decided by which selector is closest to the node.
-       * If no match found, node is considered whitelisted.
-       * @param {Node} node
-       * @returns {boolean}
+      /**
+       * Check if the given node is, or is within, a blacklisted container.
+       * With `keepEmptyNodes` option, node inside blacklisted container can be whitelisted too.
+       * Priority of blacklist or whitelist is decided by which selector is closest to the node.
+       * If no match found, node is considered whitelisted.
+       * @param {Node} node
+       * @returns {boolean}
        */
       function isBlacklisted(node) {
         const closest = $(node).closest(containersBlackAndWhiteListSelector);
@@ -1018,11 +1018,11 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         }
       }
 
-      /**
-       * Wraps text node to the highlighter wrapper element
-       * @param {Node} textNode Text node to wrap
-       * @param {string} wrapperClassName Wrapper class name
-       * @param {number} groupId Group id
+      /**
+       * Wraps text node to the highlighter wrapper element
+       * @param {Node} textNode Text node to wrap
+       * @param {string} wrapperClassName Wrapper class name
+       * @param {number} groupId Group id
        */
       function wrapNode(textNode, wrapperClassName, groupId) {
         const element = getWrapper(groupId, wrapperClassName);
@@ -1030,10 +1030,10 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return element;
       }
 
-      /**
-       * Create a wrapping node
-       * @param {number} groupId
-       * @returns {Element}
+      /**
+       * Create a wrapping node
+       * @param {number} groupId
+       * @returns {Element}
        */
       function getWrapper(groupId, wrapperClass) {
         const wrapper = document.createElement('span');
@@ -1042,9 +1042,9 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return wrapper;
       }
 
-      /**
-       * Returns the first unused group Id
-       * @returns {number}
+      /**
+       * Returns the first unused group Id
+       * @returns {number}
        */
       function getAvailableGroupId() {
         var id = currentGroupId || 1;
@@ -1054,35 +1054,35 @@ define(['lodash', 'jquery'], function (_, $) { 'use strict';
         return id;
       }
 
-      /**
-       * Check if the given node is an element
-       * @param {Node} node
-       * @returns {boolean}
+      /**
+       * Check if the given node is an element
+       * @param {Node} node
+       * @returns {boolean}
        */
       function isElement(node) {
         return node && typeof node === 'object' && node.nodeType === window.Node.ELEMENT_NODE;
       }
 
-      /**
-       * Check if the given node is of type text
-       * @param {Node} node
-       * @returns {boolean}
+      /**
+       * Check if the given node is of type text
+       * @param {Node} node
+       * @returns {boolean}
        */
       function isText(node) {
         return node && typeof node === 'object' && node.nodeType === window.Node.TEXT_NODE;
       }
 
-      /**
-       * a "Hot Node" is either wrappable text node or a wrapper
-       * @param {Node} node
-       * @returns {boolean}
+      /**
+       * a "Hot Node" is either wrappable text node or a wrapper
+       * @param {Node} node
+       * @returns {boolean}
        */
       function isHotNode(node) {
         return isWrappingNode(node) || isWrappable(node);
       }
 
-      /**
-       * Public API of the highlighter helper
+      /**
+       * Public API of the highlighter helper
        */
       return {
         highlightRanges: highlightRanges,