[deploy] Restrict tags input regex (#9172)

app/javascript/article-form/components/TagsField.jsx

@@ -2,7 +2,11 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import Tags from '../../shared/components/tags';
 
-export const TagsField = ({ defaultValue, onInput, switchHelpContext }) => {
+export const DEFAULT_TAG_FORMAT = '[0-9A-Za-z, ]+';
+
+export const TagsField = ({ defaultValue, onInput, switchHelpContext, tagFormat = DEFAULT_TAG_FORMAT }) => {
+  const TAG_FORMAT = '[0-9A-Za-z, ]+';
+
   return (
     <div className="crayons-article-form__tagsfield">
       <Tags
@@ -12,6 +16,7 @@ export const TagsField = ({ defaultValue, onInput, switchHelpContext }) => {
         onFocus={switchHelpContext}
         classPrefix="crayons-article-form"
         fieldClassName="crayons-textfield crayons-textfield--ghost ff-accent"
+        pattern={TAG_FORMAT}
       />
     </div>
   );

app/javascript/listings/listingForm.jsx

@@ -61,6 +61,8 @@ export default class ListingForm extends Component {
       expireDate,
     } = this.state;
 
+    const TAG_FORMAT = '[0-9A-Za-z, ]+';
+
     const selectOrg =
       organizations && organizations.length > 0 ? (
         <div className="field">
@@ -100,6 +102,7 @@ export default class ListingForm extends Component {
             maxTags={8}
             autocomplete="off"
             listing
+            pattern={TAG_FORMAT}
           />
           <ExpireDate
             defaultValue={expireDate}

app/javascript/shared/components/tags.jsx

@@ -374,6 +374,7 @@ class Tags extends Component {
       listing,
       fieldClassName,
       onFocus,
+      pattern,
     } = this.props;
     const { activeElement } = document;
     const searchResultsRows = searchResults.map((tag, index) => (
@@ -449,7 +450,7 @@ class Tags extends Component {
           onKeyDown={this.handleKeyDown}
           onBlur={this.handleFocusChange}
           onFocus={onFocus}
-          pattern={`${LETTERS_NUMBERS}`}
+          pattern={pattern}
         />
         {searchResultsHTML}
       </div>