Fix issue where allow unicode slugs was not correctly used for urlify (#11865) (#11873)

When the urlify util is used, ensure that we pass in the allow unicode value correctly in the SlugController.

Note: This was passed in for slugify but the usage of slugify, not urlify.

Fixes #11828

Cherry pick of 2d075177c4

client/src/controllers/SlugController.test.js

@@ -1,6 +1,11 @@
 import { Application } from '@hotwired/stimulus';
 import { SlugController } from './SlugController';
 
+// load window.XRegExp polyfill
+import { XRegExp } from '../../../wagtail/admin/static_src/wagtailadmin/js/vendor/xregexp.min';
+
+window.XRegExp = XRegExp;
+
 describe('SlugController', () => {
   let application;
 
@@ -45,7 +50,7 @@ describe('SlugController', () => {
     expect(slugInput.value).toEqual('visiter-toulouse-en-t-2025');
   });
 
-  it('should now allow unicode characters by default', () => {
+  it('should allow unicode characters when allow-unicode-value is set to truthy', () => {
     const slugInput = document.querySelector('#id_slug');
     slugInput.setAttribute('data-w-slug-allow-unicode-value', 'true');
 
@@ -269,7 +274,7 @@ describe('urlify behaviour', () => {
     expect(slugInput.value).toBe('urlify-testing-on-edit-page');
   });
 
-  it('should transform input with special characters to their ASCII equivalent', () => {
+  it('should transform input with special (unicode) characters to their ASCII equivalent by default', () => {
     const slugInput = document.getElementById('id_slug');
     slugInput.value = 'Some Title with éçà Spaces';
 
@@ -282,6 +287,21 @@ describe('urlify behaviour', () => {
     expect(slugInput.value).toBe('some-title-with-eca-spaces');
   });
 
+  it('should transform input with special (unicode) characters to keep unicode values if allow unicode value is truthy', () => {
+    const value = 'Dê-me fatias de   pizza de manhã --ou-- à noite';
+
+    const slugInput = document.getElementById('id_slug');
+    slugInput.setAttribute('data-w-slug-allow-unicode-value', 'true');
+
+    slugInput.value = value;
+
+    const event = new CustomEvent('custom:event', { detail: { value } });
+
+    document.getElementById('id_slug').dispatchEvent(event);
+
+    expect(slugInput.value).toBe('dê-me-fatias-de-pizza-de-manhã-ou-à-noite');
+  });
+
   it('should return an empty string when input contains only special characters', () => {
     const slugInput = document.getElementById('id_slug');
     slugInput.value = '$$!@#$%^&*';

client/src/utils/text.ts

@@ -27,7 +27,7 @@ export function cleanForSlug(
   if (useURLify) {
     // URLify performs extra processing on the string (e.g. removing stopwords) and is more suitable
     // for creating a slug from the title, rather than sanitising a slug entered manually
-    const cleaned = window.URLify(val, 255);
+    const cleaned = window.URLify(val, 255, unicodeSlugsEnabled);
 
     // if the result is blank (e.g. because the title consisted entirely of stopwords),
     // fall through to the non-URLify method