feat: allow using utf8 characters in tag slugs (#3588)

* feat: allow using utf8 characters in slugs
url-encoded slugs are not read by the backend.
* chore: use as a slug driver
* chore: refactor tests to use data provider
* Apply fixes from StyleCI
* fix: wrong resource used
* fix: forgotten slug from slug manager in serializer
* chore(review): adapt tag slug suggestions on the UI
* chore: introduce modes for slugging
* chore: `yarn format`

Signed-off-by: Sami Mazouz <sychocouldy@gmail.com>

framework/core/js/src/common/utils/string.ts

@@ -6,19 +6,38 @@ export function truncate(string: string, length: number, start: number = 0): str
 }
 
 /**
- * Create a slug out of the given string. Non-alphanumeric characters are
- * converted to hyphens.
+ * Create a slug out of the given string depending on the selected mode.
+ * Invalid characters are converted to hyphens.
  *
  * NOTE: This method does not use the comparably sophisticated transliteration
  * mechanism that is employed in the backend. Therefore, it should only be used
  * to *suggest* slugs that can be overridden by the user.
  */
-export function slug(string: string): string {
-  return string
-    .toLowerCase()
-    .replace(/[^a-z0-9]/gi, '-')
-    .replace(/-+/g, '-')
-    .replace(/-$|^-/g, '');
+export function slug(string: string, mode: SluggingMode = SluggingMode.ALPHANUMERIC): string {
+  switch (mode) {
+    case SluggingMode.UTF8:
+      return (
+        string
+          .toLowerCase()
+          // Match non-word characters (take UTF8 into consideration) and replace with a dash.
+          .replace(/[^\p{L}\p{N}\p{M}]/giu, '-')
+          .replace(/-+/g, '-')
+          .replace(/-$|^-/g, '')
+      );
+
+    case SluggingMode.ALPHANUMERIC:
+    default:
+      return string
+        .toLowerCase()
+        .replace(/[^a-z0-9]/gi, '-')
+        .replace(/-+/g, '-')
+        .replace(/-$|^-/g, '');
+  }
+}
+
+enum SluggingMode {
+  ALPHANUMERIC = 'alphanum',
+  UTF8 = 'utf8',
 }
 
 /**