fix(highlight): don't remove whitespace-only nodes

src/components/Highlighter.vue

@@ -1,7 +1,5 @@
 <template>
- <span
- :class="suit()"
- >
+ <span :class="suit()">
  <component
  v-for="({ value, isHighlighted }, index) in parsedHighlights"
  :class="[isHighlighted && suit('highlighted')]"

src/components/__tests__/Highlight.js

@@ -78,3 +78,25 @@ test('allows usage of dot delimited path to access nested attribute', () => {
 
  expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('retains whitespace nodes', () => {
+ const hit = {
+ _highlightResult: {
+ attr: {
+ value: `con<mark>tent</mark> <mark>search</mark>ing`,
+ },
+ },
+ };
+
+ const wrapper = mount(Highlight, {
+ propsData: {
+ attribute: 'attr',
+ highlightedTagName: 'marquee',
+ hit,
+ },
+ });
+
+ expect(wrapper.html()).toBe(
+ `<span class="ais-Highlight">con<marquee class="ais-Highlight-highlighted">tent</marquee> <marquee class="ais-Highlight-highlighted">search</marquee>ing</span>`
+ );
+});

src/util/parseAlgoliaHit.js

@@ -39,7 +39,10 @@ function parseHighlightedAttribute({ preTag, postTag, highlightedValue = '' }) {
 
  if (splitByPostTag[1] !== '') {
  elements.push({
- value: splitByPostTag[1],
+ // Vue removes nodes which are just a single space (vuejs/vue#9208),
+ // we replace this by two spaces, which does not have an impact,
+ // unless someone would have `white-space: pre` on the highlights
+ value: splitByPostTag[1] === ' ' ? ' ' : splitByPostTag[1],
  isHighlighted: false,
  });
  }