docs(js): document highlighting utils

packages/website/docs/highlightItem.md

@@ -0,0 +1,51 @@
+---
+id: highlightItem
+---
+
+Returns a string with highlighted and escaped matching parts of an Algolia hit.
+
+# Example
+
+```js
+import { highlightItem } from '@algolia/autocomplete-js';
+
+const item = {}; // fetch an Algolia hit
+const highlightedValue = highlightItem({
+  item,
+  attribute: 'query',
+});
+```
+
+# Reference
+
+## Params
+
+### `item`
+
+> `AlgoliaHit` | required
+
+The Algolia hit to retrieve the attribute value from.
+
+### `attribute`
+
+> `string` | required
+
+The attribute to retrieve the highlight value from.
+
+### `highlightPreTag`
+
+> `string` | defaults to `<mark>`
+
+The HTML tag to prefix the value with.
+
+### `highlightPostTag`
+
+> `string` | defaults to `</mark>`
+
+The HTML tag to suffix the value with.
+
+### `ignoreEscape`
+
+> `string[]` | defaults to `[]`
+
+The characters to skip from escaping.

packages/website/docs/reverseHighlightItem.md

@@ -0,0 +1,51 @@
+---
+id: reverseHighlightItem
+---
+
+Returns a string with highlighted and escaped non-matching parts of an Algolia hit.
+
+# Example
+
+```js
+import { reverseHighlightItem } from '@algolia/autocomplete-js';
+
+const item = {}; // fetch an Algolia hit
+const highlightedValue = reverseHighlightItem({
+  item,
+  attribute: 'query',
+});
+```
+
+# Reference
+
+## Params
+
+### `item`
+
+> `AlgoliaHit` | required
+
+The Algolia hit to retrieve the attribute value from.
+
+### `attribute`
+
+> `string` | required
+
+The attribute to retrieve the highlight value from.
+
+### `highlightPreTag`
+
+> `string` | defaults to `<mark>`
+
+The HTML tag to prefix the value with.
+
+### `highlightPostTag`
+
+> `string` | defaults to `</mark>`
+
+The HTML tag to suffix the value with.
+
+### `ignoreEscape`
+
+> `string[]` | defaults to `[]`
+
+The characters to skip from escaping.

packages/website/docs/reverseSnippetItem.md

@@ -0,0 +1,51 @@
+---
+id: reverseSnippetItem
+---
+
+Returns a string with highlighted and escaped non-matching parts of an Algolia hit snippet.
+
+# Example
+
+```js
+import { reverseSnippetItem } from '@algolia/autocomplete-js';
+
+const item = {}; // fetch an Algolia hit
+const reverseSnippetedValue = reverseSnippetItem({
+  item,
+  attribute: 'query',
+});
+```
+
+# Reference
+
+## Params
+
+### `item`
+
+> `AlgoliaHit` | required
+
+The Algolia hit to retrieve the attribute value from.
+
+### `attribute`
+
+> `string` | required
+
+The attribute to retrieve the snippet value from.
+
+### `highlightPreTag`
+
+> `string` | defaults to `<mark>`
+
+The HTML tag to prefix the value with.
+
+### `highlightPostTag`
+
+> `string` | defaults to `</mark>`
+
+The HTML tag to suffix the value with.
+
+### `ignoreEscape`
+
+> `string[]` | defaults to `[]`
+
+The characters to skip from escaping.

packages/website/docs/snippetItem.md

@@ -0,0 +1,51 @@
+---
+id: snippetItem
+---
+
+Returns a string with highlighted and escaped matching parts of an Algolia hit snippet.
+
+# Example
+
+```js
+import { snippetItem } from '@algolia/autocomplete-js';
+
+const item = {}; // fetch an Algolia hit
+const snippetedValue = snippetItem({
+  item,
+  attribute: 'query',
+});
+```
+
+# Reference
+
+## Params
+
+### `item`
+
+> `AlgoliaHit` | required
+
+The Algolia hit to retrieve the attribute value from.
+
+### `attribute`
+
+> `string` | required
+
+The attribute to retrieve the snippet value from.
+
+### `highlightPreTag`
+
+> `string` | defaults to `<mark>`
+
+The HTML tag to prefix the value with.
+
+### `highlightPostTag`
+
+> `string` | defaults to `</mark>`
+
+The HTML tag to suffix the value with.
+
+### `ignoreEscape`
+
+> `string[]` | defaults to `[]`
+
+The characters to skip from escaping.

packages/website/sidebars.js

@@ -23,7 +23,15 @@ module.exports = {
       {
         type: 'category',
         label: 'autocomplete-js',
-        items: ['autocomplete-js', 'getAlgoliaHits-js', 'getAlgoliaResults-js'],
+        items: [
+          'autocomplete-js',
+          'getAlgoliaHits-js',
+          'getAlgoliaResults-js',
+          'highlightItem',
+          'reverseHighlightItem',
+          'snippetItem',
+          'reverseSnippetItem',
+        ],
       },
       {
         type: 'category',