Members
-
<constant> DATA_ATTR :string
-
Attribute added by default to every highlight.
Type:
- string
-
<constant> IGNORE_TAGS :Array.<string>
-
Don't highlight content of these tags.
Type:
- Array.<string>
-
<constant> TIMESTAMP_ATTR :string
-
Attribute used to group highlight wrappers.
Type:
- string
Methods
-
arrayToLower(arr)
-
Returns array of strings with all strings converted to lower case.
Parameters:
Name Type Description arr
Array.<String> - Source:
Returns:
- Type
- Array.<String>
-
createWrapper(options)
-
Creates wrapper for highlights.
TextHighlighter instance calls this method each time it needs to create highlights and pass options retrieved
in constructor.Parameters:
Name Type Description options
object the same object as in TextHighlighter constructor.
- Source:
Returns:
- Type
- HTMLElement
-
dom( [el])
-
Utility functions to make DOM manipulation easier.
Parameters:
Name Type Argument Description el
Node | HTMLElement <optional>
base DOM element to manipulate
- Source:
Returns:
- Type
- object
-
findNodesAndOffsets(highlight, parentNode)
-
Determine where to inject a highlight based on it's offset.
A highlight can span multiple nodes, so in here we accumulate
all those nodes with offset and length of the content in the node
included in the highlight.Parameters:
Name Type Description highlight
* parentNode
* - Source:
-
getHighlightedTextForRange(range)
-
Collects the human-readable highlighted text for all nodes in the selected range.
Parameters:
Name Type Description range
Range - Source:
Returns:
The human-readable highlighted text for the given range.
- Type
- string
-
getHighlightedTextRelativeToRoot(params)
-
Collects the human-readable highlighted text for all nodes from the start text offset
relative to the root element.Parameters:
Name Type Description params
Object The root-relative parameters for extracting highlighted text.
- Source:
Returns:
The human-readable highlighted text for the given root element, offset and length.
- Type
- string
-
groupHighlights(highlights, timestampAttr)
-
Groups given highlights by timestamp.
Parameters:
Name Type Description highlights
Array timestampAttr
string - Source:
Returns:
Grouped highlights.
- Type
- Array
-
haveSameColor(a, b)
-
Returns true if elements a i b have the same color.
Parameters:
Name Type Description a
Node b
Node - Source:
Returns:
- Type
- boolean
-
isClosestHighlightParent(node, id, rootElement)
-
Parameters:
Name Type Description node
HTMLElement The element we need to get parent information for.
id
string The unique id of the collection of elements representing a highlight.
rootElement
HTMLElement The root element of the context to stop at.
- Source:
Returns:
- Type
- boolean
-
mergeSiblingTextNodesInDirection(startNode, direction)
-
Merges the text of all sibling text nodes with the start node.
Parameters:
Name Type Description startNode
HTMLElement direction
string - Source:
-
nodesInBetween(startNode, endNode)
-
Gets all the nodes in between the provided start and end.
Parameters:
Name Type Description startNode
HTMLElement endNode
HTMLElement - Source:
Returns:
Nodes that live in between the two.
- Type
- Array.<HTMLElement>
-
refineRangeBoundaries(range)
-
Takes range object as parameter and refines it boundaries
Parameters:
Name Type Description range
- Source:
Returns:
refined boundaries and initial state of highlighting algorithm.
- Type
- object
-
scaleFromTransformMatrix(transformMatrix)
-
Extracts the scale from a 2D transform matrix.
Parameters:
Name Type Description transformMatrix
string The 2D transform matrix.
- Source:
Returns:
The combined scale element of the transform.
- Type
- number
-
sortByDepth(arr, descending)
-
Sorts array of DOM elements by its depth in DOM tree.
Parameters:
Name Type Description arr
Array.<HTMLElement> array to sort.
descending
boolean order of sort.
- Source:
-
unique(arr)
-
Returns array without duplicated values.
Parameters:
Name Type Description arr
Array - Source:
Returns:
- Type
- Array
Type Definitions
-
NodeInfo
-
Focuses a set of highlight elements for a given id by ensuring if it has descendants that are highlights
it is moved inside of the innermost highlight.The innermost highlight's styles will be applied and will be visible to the user
and given the "focus".To focus the red highlight the following:
--
----
------
---------- Highlighted textbecomes:
--
----
------
-------- Highlighted textand
--
---- Some text only highlighted in red
----
------ Text in blue and red
------
---------- Rest of the highlight in red, green and bluebecomes
--
---- Some text only highlighted in red
--
----
------ Text in blue and red
----
------
-------- Rest of the highlight in red, green and blueType:
- object
- Source:
Properties:
Name Type Description nodeInfo.node
HTMLElement The html element (This will in most cases be a text node)
nodeInfo.offset
number The offset within the node to be highlighted
nodeInfo.length
number The length within the node that should be highlighted.
-
onAfterHighlightCallbackV1(range, highlights, timestamp)
-
PrimitivoHighlighter that provides text highlighting functionality to dom elements
for simple use cases.Parameters:
Name Type Description range
Range highlights
Array.<HTMLElement> timestamp
number - Source:
-
onAfterHighlightCallbackV2(range, highlightDescriptors, timestamp)
-
IndependenciaHighlighter that provides text highlighting functionality to dom elements
with a focus on removing interdependence between highlights and other element nodes in the context element.Parameters:
Name Type Description range
Range highlightDescriptors
Array.<HlDescriptor> timestamp
number - Source:
Properties:
Name Type Description 0
string The span wrapper injected for the highlight.
1
string The highlighted text.
2
number The text offset relevant to the root element of a highlight.
3
number Length of highlight.
Returns:
- Type
- Array.<HlDescriptor>