Validate new categories on input

wp-modules/editor/js/src/components/SidebarPanels/CategoriesPanel.tsx

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { Spinner } from '@wordpress/components';
 
@@ -7,6 +8,10 @@ import Creatable from 'react-select/creatable';
 import toKebabCase from '../../utils/toKebabCase';
 import getSelectedOptions from '../../utils/getSelectedOptions';
 import getCustomCategories from '../../utils/getCustomCategories';
+import {
+	checkIllegalChars,
+	stripIllegalChars,
+} from '../../utils/validateInput';
 import type { BaseSidebarProps, AdditionalSidebarProps } from './types';
 
 /**
@@ -20,6 +25,9 @@ export default function CategoriesPanel( {
 	handleChange,
 }: BaseSidebarProps< 'categories' | 'customCategories' > &
 	AdditionalSidebarProps< 'categoryOptions' > ) {
+	const [ categoryTitleIsInvalid, setCategoryTitleIsInvalid ] =
+		useState( false );
+
 	return (
 		<PluginDocumentSettingPanel
 			name="patternmanager-pattern-editor-pattern-categories"
@@ -55,7 +63,10 @@ export default function CategoriesPanel( {
 					onCreateOption={ ( newCategoryTitle ) => {
 						handleChange(
 							'customCategories',
-							[ ...customCategories, newCategoryTitle ],
+							[
+								...customCategories,
+								stripIllegalChars( newCategoryTitle ),
+							],
 							{
 								categories: [
 									...categories,
@@ -64,12 +75,29 @@ export default function CategoriesPanel( {
 							}
 						);
 					} }
+					onInputChange={ ( event ) => {
+						setCategoryTitleIsInvalid(
+							!! checkIllegalChars( event )
+						);
+					} }
+					formatCreateLabel={ ( userInput ) =>
+						`Create "${ stripIllegalChars( userInput ) }"`
+					}
 					menuPlacement="auto"
 					styles={ {
 						menu: ( base ) => ( {
 							...base,
 							zIndex: 100,
 						} ),
+						control: ( baseStyles ) => ( {
+							...baseStyles,
+							borderColor: categoryTitleIsInvalid
+								? 'red !important'
+								: baseStyles.borderColor,
+							boxShadow: categoryTitleIsInvalid
+								? '0 0 0 1px red'
+								: baseStyles.boxShadow,
+						} ),
 					} }
 				/>
 			) : (

wp-modules/editor/js/src/utils/test/validateInput.ts

@@ -0,0 +1,37 @@
+import { checkIllegalChars, stripIllegalChars } from '../validateInput';
+
+const regexPattern = new RegExp( /([^a-z0-9 -]+)/gi );
+
+describe( 'validateInput', () => {
+	describe( 'checkIllegalChars', () => {
+		it.each( [
+			[ '', null ],
+			[ 'Nothing to strip', null ],
+			[ 'String with !#@$%^&*() illegal chars', [ '!#@$%^&*()' ] ],
+			[
+				'String !#@$% with ^&*() separated \'"? illegal []{}|/ chars',
+				[ '!#@$%', '^&*()', '\'"?', '[]{}|/' ],
+			],
+		] )( 'matches the illegal characters', ( input, expected ) => {
+			expect( checkIllegalChars( input, regexPattern ) ).toEqual(
+				expected
+			);
+		} );
+	} );
+	describe( 'stripIllegalChars', () => {
+		it.each( [
+			[ '', '' ],
+			[ 'Nothing to strip', 'Nothing to strip' ],
+			[
+				'String with !#@$%^&*() illegal chars',
+				'String with  illegal chars',
+			],
+			[
+				"This might've caused a whitescreen previously!",
+				'This mightve caused a whitescreen previously',
+			],
+		] )( 'strips the illegal characters', ( input, expected ) => {
+			expect( stripIllegalChars( input, regexPattern ) ).toBe( expected );
+		} );
+	} );
+} );

wp-modules/editor/js/src/utils/validateInput.ts

@@ -0,0 +1,15 @@
+const defaultPattern = new RegExp( /([^a-z0-9 -]+)/gi );
+
+export function checkIllegalChars(
+	input: string,
+	regexPattern = defaultPattern
+) {
+	return input.match( regexPattern );
+}
+
+export function stripIllegalChars(
+	input: string,
+	regexPattern = defaultPattern
+) {
+	return input.replace( regexPattern, '' );
+}