+ Unit testing for diacriticsSensitive feature (diacritics insensitive test).

+ Added asset data text with diacritics as example.
+ Added case senstive and diacritics sensitive options as checkboxes on app.

Author: vicentenoriega

test/unit/specs/highlightChunks.spec.js

@@ -96,6 +96,25 @@ describe('highlightChunks', () => {
     ]);
   });
 
+  test('should match diacritics insensitive', () => {
+    const text = 'aBocd';
+    const string = 'abóc';
+
+    const chunks = highlightChunks(text, string, false, false);
+
+    expect(chunks).toEqual([
+      {
+        isHighlighted: true,
+        text: 'aBoc',
+        highlightIndex: 0,
+      },
+      {
+        isHighlighted: false,
+        text: 'd',
+      },
+    ]);
+  });
+
   test('should accept string as queries', () => {
     const text = 'aBcd';
     const object = { test: 'abc' };

web/App.vue

@@ -12,19 +12,41 @@
           @input="updateSearch"
           label="Search"
           class="textField"></input-field>
-        <check-box
-          :defaultValue="split"
-          @onchange="updateSplit"
-          class="checkBox">Split by space</check-box>
-        <check-box
-          :defaultValue="custom"
-          @onchange="updateCustom"
-          class="checkBox">Custom component</check-box>
+        <div class="row">
+          <div class="column">
+            <check-box
+              :defaultValue="split"
+              @onchange="updateSplit"
+              class="checkBox">Split by space</check-box>
+          </div>
+          <div class="column">
+            <check-box
+              :defaultValue="custom"
+              @onchange="updateCustom"
+              class="checkBox">Custom component</check-box>
+          </div>
+        </div>
+        <div class="row">
+          <div class="column">
+            <check-box
+              :defaultValue="caseSensitive"
+              @onchange="updateCaseSensitive"
+              class="checkBox">Case sensitive</check-box>
+          </div>
+          <div class="column">
+            <check-box
+              :defaultValue="diacriticsSensitive"
+              @onchange="updateDiacriticsSensitive"
+              class="checkBox">Diacritics sensitive</check-box>
+          </div>
+        </div>
       </div>
       <example-document
         :search="search"
         :split="split"
-        :custom="custom"></example-document>
+        :custom="custom"
+        :caseSensitive="caseSensitive"
+        :diacriticsSensitive="diacriticsSensitive"></example-document>
     </div>
   </div>
 </template>
@@ -50,6 +72,8 @@ export default {
       search: '',
       split: false,
       custom: false,
+      caseSensitive: false,
+      diacriticsSensitive: false,
     };
   },
   methods: {
@@ -62,6 +86,12 @@ export default {
     updateCustom(val) {
       this.custom = val;
     },
+    updateCaseSensitive(val) {
+      this.caseSensitive = val;
+    },
+    updateDiacriticsSensitive(val) {
+      this.diacriticsSensitive = val;
+    },
   },
 };
 </script>
@@ -77,7 +107,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: calc(10vh + 5%);
+  margin-top: calc(5vh + 5%);
   .titleHighlight {
     background-color: #42b983;
     color: #FFFFFFF0;
@@ -95,21 +125,27 @@ body {
     box-shadow: 0 20px 50px rgba(0,0,0,.1);
   }
   .inputs {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     margin-bottom: 20px;
     padding: 15px;
     border-bottom: 1px solid rgba(0, 0, 0, .1);
-    flex-wrap: wrap;
-    .checkBox {
-      margin: 0 10px;
-    }
     .textField {
       flex-grow: 1;
       padding-bottom: 10px;
       width: 100%;
     }
+    .row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-bottom: 5px;
+      width: 100%;
+    }
+
+    .column {
+      display: flex;
+      flex-direction: column;
+      flex-basis: 50%;
+    }
   }
 }
 </style>

web/assets/data.js

@@ -1,7 +1,14 @@
-export const texts = `Tropical birds scattered as Drake veered the Jeep onto an old rutted track,
+export const texts = {
+  english: `Tropical birds scattered as Drake veered the Jeep onto an old rutted track,
 snapping branches and tearing away vines, plowing through the rain forest with killers in pursuit,
 bullets flying, a gorgeous but pouty girl in the passenger’s seat, and a bitch of a headache.
 With only one of his arms on the wheel, the Jeep slewed to the left, and the pouty girl screamed as
-he forced the vehicle back onto the trail just before they would have crashed into a felled tree.`;
+he forced the vehicle back onto the trail just before they would have crashed into a felled tree.`,
+  spanish: `Las aves tropicales se dispersaron cuando Drake desvió el Jeep hacia una vieja pista llena de baches,
+cortando ramas y arrancando enredaderas, surcando la selva tropical con asesinos persiguiéndolos,
+las balas volando, y una chica hermosa pero con mala cara en el asiento del pasajero con dolor de cabeza.
+Con un solo brazo en el volante, el Jeep giró hacia la izquierda, y la chica gruñona gritó obligando
+al vehículo a regresar al camino justo antes de que se estrellaran contra un árbol talado.`,
+};
 
 export const html = '<script>vue-text-highlight is also safe against possible html injection</script>';

web/components/ExampleDocument.vue

@@ -17,8 +17,24 @@
         @leave="unsetActiveIndex"
         :activeIndex="activeIndex"
         :displayHoverMe="true"
+        :caseSensitive="caseSensitive"
+        :diacriticsSensitive="diacriticsSensitive"
       >
-        {{ texts }}
+        {{ textEnglish }}
+      </text-highlight>
+    </div>
+    <div class="text">
+      <text-highlight
+        :queries="queries"
+        :highlightComponent="highlightComponent"
+        @enter="setActiveIndex"
+        @leave="unsetActiveIndex"
+        :activeIndex="activeIndex"
+        :displayHoverMe="true"
+        :caseSensitive="caseSensitive"
+        :diacriticsSensitive="diacriticsSensitive"
+      >
+        {{ textSpanish }}
       </text-highlight>
     </div>
     <div class="html">
@@ -28,6 +44,8 @@
         @enter="setActiveIndex"
         @leave="unsetActiveIndex"
         :activeIndex="activeIndex"
+        :caseSensitive="caseSensitive"
+        :diacriticsSensitive="diacriticsSensitive"
       >
         {{ html }}
       </text-highlight>
@@ -45,13 +63,16 @@ export default {
     search: String,
     split: Boolean,
     custom: Boolean,
+    caseSensitive: Boolean,
+    diacriticsSensitive: Boolean,
   },
   components: {
     TextHighlight,
   },
   data() {
     return {
-      texts,
+      textEnglish: texts.english,
+      textSpanish: texts.spanish,
       html,
       activeIndex: null,
     };