Added provision for adding multiple tags by using commas

src/ui/component/channelEdit/view.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Form, FormField } from 'component/common/form';
 import Button from 'component/button';
 import SelectAsset from 'component/selectAsset';
-import TagSelect from 'component/tagsSelect';
+import TagsSelect from 'component/tagsSelect';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
           disabled={false}
           onChange={text => setParams({ ...params, description: text })}
         />
-        <TagSelect
+        <TagsSelect
           title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your channel.')}

src/ui/component/publishForm/view.jsx

@@ -6,7 +6,7 @@ import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
 import classnames from 'classnames';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
-import TagSelect from 'component/tagsSelect';
+import TagsSelect from 'component/tagsSelect';
 import PublishText from 'component/publishText';
 import PublishPrice from 'component/publishPrice';
 import PublishFile from 'component/publishFile';
@@ -130,7 +130,7 @@ function PublishForm(props: Props) {
         <PublishText disabled={formDisabled} />
         <Card actions={<SelectThumbnail />} />
 
-        <TagSelect
+        <TagsSelect
           title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your content.')}

src/ui/component/tagsSearch/view.jsx

@@ -34,7 +34,12 @@ export default function TagsSearch(props: Props) {
     tags.unshift({ name: newTag });
   }
 
-  const doesTagMatch = name => (newTag ? name.toLowerCase().includes(newTag.toLowerCase()) : true);
+  const doesTagMatch = name => {
+    let nextTag;
+    nextTag = newTag.substr(newTag.lastIndexOf(',') + 1, newTag.length);
+    nextTag = newTag.substr(newTag.lastIndexOf(' ') + 1, newTag.length);
+    return newTag ? name.toLowerCase().includes(nextTag.toLowerCase()) : true;
+  };
   // Make sure there are no duplicates, then trim
   const suggestedTagsSet = new Set(tags.map(tag => tag.name));
   const suggestedTags = Array.from(suggestedTagsSet)
@@ -51,32 +56,40 @@ export default function TagsSearch(props: Props) {
 
   function handleSubmit(e) {
     e.preventDefault();
-    const trimmedTag = newTag.trim();
+    let tags = newTag.trim();
 
-    if (trimmedTag.length === 0) {
+    if (tags.length === 0) {
       return;
     }
 
     setNewTag('');
+
+    tags = tags.split(',').map(newTag => newTag.trim());
+    tags.forEach(tag => {
       if (onSelect) {
-      onSelect({ name: trimmedTag });
+        onSelect({ name: tag });
       } else {
-      if (!unfollowedTags.map(({ name }) => name).includes(trimmedTag)) {
+        if (!unfollowedTags.map(({ name }) => name).includes(tag)) {
-        doAddTag(trimmedTag);
+          doAddTag(tag);
         }
 
-      if (!followedTags.map(({ name }) => name).includes(trimmedTag)) {
+        if (!followedTags.map(({ name }) => name).includes(tag)) {
-        doToggleTagFollow(trimmedTag);
+          doToggleTagFollow(tag);
         }
       }
+    });
   }
 
-  function handleTagClick(tag) {
+  function handleTagClick(tags) {
+    tags = tags.split(',').map(newTag => newTag.trim());
+
+    tags.forEach(tag => {
       if (onSelect) {
         onSelect({ name: tag });
       } else {
         doToggleTagFollow(tag);
       }
+    });
   }
 
   return (

src/ui/component/tagsSelect/view.jsx

@@ -23,7 +23,7 @@ type Props = {
   placeholder?: string,
 };
 
-export default function TagSelect(props: Props) {
+export default function TagsSelect(props: Props) {
   const {
     showClose,
     followedTags,