fix(autocomplete-preset-algolia): support Unicode in ReverseHighlight (#1330) (#1331)

* fix(autocomplete-preset-algolia): support Unicode word characters in ReverseHighlight

* test(autocomplete-preset-algolia): add regression tests for Unicode ReverseHighlight

fixes #1317

see #1330

Co-authored-by: rinoshiyo <45587676+rinoshiyo@users.noreply.github.com>

Author: Haroenv

packages/autocomplete-preset-algolia/src/highlight/__tests__/isPartHighlighted.test.ts

@@ -30,4 +30,92 @@ describe('isPartHighlighted', () => {
       )
     ).toEqual(true);
   });
+
+  // Japanese (俺はジャイアン): start / middle / end
+
+  test('does not treat Japanese text as a separator at the start (俺はジャイアン)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: false, value: '俺は' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: true, value: 'ジャイアン' },
+        ],
+        0
+      )
+    ).toEqual(false);
+  });
+
+  test('does not treat Japanese text as a separator in the middle (俺はジャイアンだ)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: true, value: '俺は' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: false, value: 'ジャイアン' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: true, value: 'だ' },
+        ],
+        2
+      )
+    ).toEqual(false);
+  });
+
+  test('does not treat Japanese text as a separator at the end (俺はジャイアンだ)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: true, value: '俺は' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: true, value: 'ジャイアン' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: false, value: 'だ' },
+        ],
+        4
+      )
+    ).toEqual(false);
+  });
+
+  // Cyrillic (regression #1317): start / middle / end
+
+  test('does not treat Cyrillic text as a separator at the start (regression #1317)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: false, value: 'привет' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: true, value: 'мир' },
+        ],
+        0
+      )
+    ).toEqual(false);
+  });
+
+  test('does not treat Cyrillic text as a separator in the middle (regression #1317)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: true, value: 'привет' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: false, value: 'мир' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: true, value: 'привет' },
+        ],
+        2
+      )
+    ).toEqual(false);
+  });
+
+  test('does not treat Cyrillic text as a separator at the end (regression #1317)', () => {
+    expect(
+      isPartHighlighted(
+        [
+          { isHighlighted: true, value: 'привет' },
+          { isHighlighted: false, value: ' ' },
+          { isHighlighted: false, value: 'мир' },
+        ],
+        2
+      )
+    ).toEqual(false);
+  });
 });

packages/autocomplete-preset-algolia/src/highlight/isPartHighlighted.ts

@@ -7,7 +7,13 @@ const htmlEscapes = {
   '"': '"',
   ''': "'",
 };
-const hasAlphanumeric = new RegExp(/\w/i);
+const hasLetterOrNumber = (() => {
+  try {
+    return new RegExp('[\\p{L}\\p{N}_]', 'u');
+  } catch {
+    return new RegExp(/\w/i);
+  }
+})();
 const regexEscapedHtml = /&(amp|quot|lt|gt|#39);/g;
 const regexHasEscapedHtml = RegExp(regexEscapedHtml.source);
 
@@ -23,7 +29,7 @@ export function isPartHighlighted(parts: ParsedAttribute[], i: number) {
   const isPreviousHighlighted = parts[i - 1]?.isHighlighted || true;
 
   if (
-    !hasAlphanumeric.test(unescape(current.value)) &&
+    !hasLetterOrNumber.test(unescape(current.value)) &&
     isPreviousHighlighted === isNextHighlighted
   ) {
     return isPreviousHighlighted;