Merge pull request #198 from studiopress/bugfix/validate-new-category…

…-input

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,7 @@ import Creatable from 'react-select/creatable';
 import toKebabCase from '../../utils/toKebabCase';
 import getSelectedOptions from '../../utils/getSelectedOptions';
 import getCustomCategories from '../../utils/getCustomCategories';
+import { hasIllegalChars, stripIllegalChars } from '../../utils/validateInput';
 import type { BaseSidebarProps, AdditionalSidebarProps } from './types';
 
 /**
@@ -20,6 +22,9 @@ export default function CategoriesPanel( {
 	handleChange,
 }: BaseSidebarProps< 'categories' | 'customCategories' > &
 	AdditionalSidebarProps< 'categoryOptions' > ) {
+	const [ categoryTitleIsInvalid, setCategoryTitleIsInvalid ] =
+		useState( false );
+
 	return (
 		<PluginDocumentSettingPanel
 			name="patternmanager-pattern-editor-pattern-categories"
@@ -53,23 +58,41 @@ export default function CategoriesPanel( {
 						} );
 					} }
 					onCreateOption={ ( newCategoryTitle ) => {
+						const validatedTitle =
+							stripIllegalChars( newCategoryTitle );
+
 						handleChange(
 							'customCategories',
-							[ ...customCategories, newCategoryTitle ],
+							[ ...customCategories, validatedTitle ],
 							{
 								categories: [
 									...categories,
-									toKebabCase( newCategoryTitle ),
+									toKebabCase( validatedTitle ),
 								],
 							}
 						);
 					} }
+					onInputChange={ ( event ) => {
+						setCategoryTitleIsInvalid( hasIllegalChars( 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,32 @@
+import { hasIllegalChars, stripIllegalChars } from '../validateInput';
+
+const regexPattern = new RegExp( /([^a-z0-9 -]+)/gi );
+
+describe( 'validateInput', () => {
+	describe( 'hasIllegalChars', () => {
+		it.each( [
+			[ '', false ],
+			[ 'Nothing to strip', false ],
+			[ "String that might've been a problem", true ],
+			[ 'String with !#@$% illegal ^&*() chars', true ],
+		] )( 'matches the illegal characters', ( input, expected ) => {
+			expect( hasIllegalChars( input, regexPattern ) ).toBe( 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 hasIllegalChars(
+	input: string,
+	regexPattern = defaultPattern
+) {
+	return !! input.match( regexPattern );
+}
+
+export function stripIllegalChars(
+	input: string,
+	regexPattern = defaultPattern
+) {
+	return input.replace( regexPattern, '' );
+}