Add character count support for countFunction option

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/components/character-count/character-count.jsdom.test.mjs

@@ -390,6 +390,42 @@ describe('Character count', () => {
 
         expect(component.getCountMessage()).toBe('You have 97 words remaining')
       })
+
+      it('uses custom `countFunction` for `maxlength` limit when set', async () => {
+        const component = new CharacterCount($root, {
+          maxlength: 100,
+          countFunction: jest.fn().mockReturnValue(10)
+        })
+
+        $textarea.focus()
+        await user.keyboard('Newly updated value')
+
+        expect(component.config.countFunction).toHaveBeenCalledWith(
+          'Newly updated value',
+          component.segmenter
+        )
+
+        expect(component.getCountMessage()).toBe(
+          'You have 90 characters remaining'
+        )
+      })
+
+      it('uses custom `countFunction` for `maxwords` limit when set', async () => {
+        const component = new CharacterCount($root, {
+          maxwords: 100,
+          countFunction: jest.fn().mockReturnValue(10)
+        })
+
+        $textarea.focus()
+        await user.keyboard('Newly updated value')
+
+        expect(component.config.countFunction).toHaveBeenCalledWith(
+          'Newly updated value',
+          component.segmenter
+        )
+
+        expect(component.getCountMessage()).toBe('You have 90 words remaining')
+      })
     })
 
     describe('with HTML lang attribute', () => {

packages/nhsuk-frontend/src/nhsuk/components/character-count/character-count.mjs

@@ -61,6 +61,7 @@ export class CharacterCount extends ConfigurableComponent {
     const {
       i18n,
       maxlength,
+      countFunction,
       countType,
       screenReaderCountMessageClass,
       textareaDescriptionClass,
@@ -72,9 +73,9 @@ export class CharacterCount extends ConfigurableComponent {
       locale: closestAttributeValue(this.$root, 'lang')
     })
 
-    if ('Segmenter' in Intl && countType === 'graphemes') {
+    if ('Segmenter' in Intl && (countType === 'graphemes' || !!countFunction)) {
       this.segmenter = new Intl.Segmenter(this.i18n.locale, {
-        granularity: 'grapheme'
+        granularity: countType === 'words' ? 'word' : 'grapheme'
       })
     }
 
@@ -212,9 +213,9 @@ export class CharacterCount extends ConfigurableComponent {
    */
   updateCount(text) {
     const { $textarea } = this
-    let { countType } = this.config
+    let { countFunction, countType } = this.config
 
-    const countFunction =
+    countFunction ??=
       countType === 'words'
         ? CharacterCount.countFunctions.words
         : CharacterCount.countFunctions.characters
@@ -518,6 +519,7 @@ export class CharacterCount extends ConfigurableComponent {
       maxlength: { type: 'number' },
       threshold: { type: 'number' },
       countType: { type: 'string' },
+      countFunction: { type: 'function' },
       textareaDescriptionClass: { type: 'string' },
       visibleCountMessageClass: { type: 'string' },
       screenReaderCountMessageClass: { type: 'string' },
@@ -564,6 +566,7 @@ export function initCharacterCounts(options) {
  * @property {number} [threshold=0] - The percentage value of the limit at which point the count message is displayed.
  *   If this attribute is set, the count message will be hidden by default.
  * @property {'characters' | 'graphemes' | 'words'} countType - The count type (`"characters"`, `"graphemes"` or `"words"`) used to count the text.
+ * @property {(text: string, segmenter?: Intl.Segmenter | null) => number} [countFunction] - Custom character or word counting function.
  * @property {string} textareaDescriptionClass - Textarea description class
  * @property {string} visibleCountMessageClass - Visible count message class
  * @property {string} screenReaderCountMessageClass - Screen reader count message class