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

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

Vue by default removes nodes which are just whitespace: https://github.com/vuejs/vue/blob/ec78fc8b6d03e59da669be1adf4b4b5abf670a34/dist/vue.common.dev.js#L2527

We need to prevent this, since sometimes between highlights, there is just a space, we need to make the value not "wrapped". We can't make the value always "block" (i don't know the correct name for this), since that would add spaces between "inline" highlights.

fixes #826

* Update src/components/Highlighter.vue

* less needless spaces

* use only two spaces, move to parseAlgoliaHit

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,
         });
       }