linting and fixing made tags

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -341,7 +341,7 @@ const MetadataEditor = createReactClass({
 
 			<TagInput
 				label='tags'
-				valuePatterns={/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.&_\-]{0,40}$/}
+				valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/.&_\-]{0,40}\s*$/}
 				placeholder='add tag' unique={true}
 				values={this.props.metadata.tags}
 				smallText='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,15 +1,15 @@
-import "./tagInput.less";
-import React, { useState, useEffect, useMemo } from "react";
-import Combobox from "../../../components/combobox.jsx";
+import './tagInput.less';
+import React, { useState, useEffect } from 'react';
+import Combobox from '../../../components/combobox.jsx';
 
-import tagSuggestionList from "./curatedTagSuggestionList.js";
+import tagSuggestionList from './curatedTagSuggestionList.js';
 
-const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholder = "", smallText = "", onChange }) => {
+const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholder = '', smallText = '', onChange })=>{
 	const [tagList, setTagList] = useState(
 		values.map((value)=>({
 			value,
-			display: value.trim(),
 			editing : false,
+			draft   : '',
 		})),
 	);
 
@@ -23,7 +23,6 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 			setTagList(
 				incoming.map((value)=>({
 					value,
-					display: value.trim(),
 					editing : false,
 				})),
 			);
@@ -36,20 +35,18 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 		});
 	}, [tagList]);
 
+	// substrings to be normalized to the first value on the array
 	const duplicateGroups = [
-		["5e 2024", "5.5e", "5e'24", "5.24", "5e24", "5.5"],
-		["5e", "5th Edition"],
-		["Dungeons & Dragons", "Dungeons and Dragons", "Dungeons n dragons"],
-		["D&D", "DnD", "dnd", "Dnd", "dnD", "d&d", "d&D", "D&d"],
-		["P2e", "p2e", "P2E", "Pathfinder 2e"],
-		["meta:", "Meta:", "META:"],
-		["group:", "Group:", "GROUP:"],
-		["type:", "Type:", "TYPE:"],
-		["system:", "System:", "SYSTEM:"],
+		['5e 2024', '5.5e', '5e\'24', '5.24', '5e24', '5.5'],
+		['5e', '5th Edition'],
+		['Dungeons & Dragons', 'Dungeons and Dragons', 'Dungeons n dragons'],
+		['D&D', 'DnD', 'dnd', 'Dnd', 'dnD', 'd&d', 'd&D', 'D&d'],
+		['P2e', 'p2e', 'P2E', 'Pathfinder 2e'],
 	];
 
 	const normalizeValue = (input)=>{
 		const lowerInput = input.toLowerCase();
+		let normalizedTag = input;
 
 		for (const group of duplicateGroups) {
 			for (const tag of group) {
@@ -57,35 +54,42 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 
 				const index = lowerInput.indexOf(tag.toLowerCase());
 				if(index !== -1) {
-					return input.slice(0, index) + group[0] + input.slice(index + tag.length);
+					normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length);
+					break;
 				}
 			}
 		}
 
-		return input;
+		if(normalizedTag.includes(':')) {
+			const [rawType, rawValue = ''] = normalizedTag.split(':');
+			const tagType = rawType.trim().toLowerCase();
+			const tagValue = rawValue.trim();
+
+			if(tagValue.length > 0) {
+				normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`;
+			}
+			//trims spaces around colon and capitalizes the first word after the colon
+			//this is preferred to users not understanding they can't put spaces in
+		}
+
+		return normalizedTag;
 	};
 
 	const submitTag = (newValue, index = null)=>{
 		const trimmed = newValue?.trim();
-		console.log(newValue, trimmed);
 		if(!trimmed) return;
-		console.log(valuePatterns.test(trimmed));
 		if(!valuePatterns.test(trimmed)) return;
 
-		const canonical = normalizeValue(trimmed);
+		const normalizedTag = normalizeValue(trimmed);
 
 		setTagList((prev)=>{
-			const existsIndex = prev.findIndex((t) => t.value.toLowerCase() === canonical.toLowerCase());
-
+			const existsIndex = prev.findIndex((t)=>t.value.toLowerCase() === normalizedTag.toLowerCase());
 			if(unique && existsIndex !== -1) return prev;
-
 			if(index !== null) {
-				return prev.map((t, i) =>
-					i === index ? { ...t, value: canonical, display: canonical, editing: false } : t,
-				);
+				return prev.map((t, i)=>(i === index ? { ...t, value: normalizedTag, editing: false } : t));
 			}
 
-			return [...prev, { value: canonical, display: canonical, editing: false }];
+			return [...prev, { value: normalizedTag, editing: false }];
 		});
 	};
 
@@ -94,32 +98,32 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 	};
 
 	const editTag = (index)=>{
-		setTagList((prev) => prev.map((t, i) => ({ ...t, editing: i === index })));
+		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: true, draft: t.value } : t)));
+	};
+
+	const stopEditing = (index)=>{
+		setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: false, draft: '' } : t)));
 	};
 
 	const suggestionOptions = tagSuggestionList.map((tag)=>{
-		const tagType = tag.split(":");
+		const tagType = tag.split(':');
 
-		let classes = "item";
+		let classes = 'item';
 		switch (tagType[0]) {
-			case "type":
-				classes = "item type";
+		case 'type':
+			classes = 'item type';
 			break;
-
-			case "group":
-				classes = "item group";
+		case 'group':
+			classes = 'item group';
 			break;
-
-			case "meta":
-				classes = "item meta";
+		case 'meta':
+			classes = 'item meta';
 			break;
-
-			case "system":
-				classes = "item system";
+		case 'system':
+			classes = 'item system';
 			break;
-
 		default:
-				classes = "item";
+			classes = 'item';
 			break;
 		}
 
@@ -131,42 +135,44 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 	});
 
 	return (
-		<div className="field tags">
+		<div className='field tags'>
 			{label && <label>{label}</label>}
 
-			<div className="value">
-				<ul className="list">
-					{tagList.map((t, i) =>
-						t.editing ? (
+			<div className='value'>
+				<ul className='list'>
+					{tagList.map((t, i)=>t.editing ? (
 						<input
 							key={i}
-								type="text"
-								value={t.display}
+							type='text'
+							value={t.draft} // always use draft
 							pattern={valuePatterns.source}
-								onChange={(e) => {
-									const val = e.target.value;
-									setTagList((prev) =>
-										prev.map((tag, idx) => (idx === i ? { ...tag, display: val } : tag)),
-									);
-								}}
+							onChange={(e)=>setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: e.target.value } : tag)),
+							)
+							}
 							onKeyDown={(e)=>{
-									if (e.key === "Enter") {
+								if(e.key === 'Enter') {
 									e.preventDefault();
-										submitTag(e.target.value, i);
+									submitTag(t.draft, i); // submit draft
+									setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: '' } : tag)),
+									);
+								}
+								if(e.key === 'Escape') {
+									stopEditing(i);
+									e.target.blur();
 								}
 							}}
 							autoFocus
 						/>
 					) : (
-							<li key={i} className="tag" onClick={() => editTag(i)}>
-								{t.display}
+						<li key={i} className='tag' onClick={()=>editTag(i)}>
+							{t.value}
 							<button
-									type="button"
+								type='button'
 								onClick={(e)=>{
 									e.stopPropagation();
 									removeTag(i);
 								}}>
-									<i className="fa fa-times fa-fw" />
+								<i className='fa fa-times fa-fw' />
 							</button>
 						</li>
 					),
@@ -174,25 +180,25 @@ const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholde
 				</ul>
 
 				<Combobox
-					trigger="click"
-					className="tagInput-dropdown"
-					default=""
+					trigger='click'
+					className='tagInput-dropdown'
+					default=''
 					placeholder={placeholder}
-					options={label === "tags" ? suggestionOptions : []}
+					options={label === 'tags' ? suggestionOptions : []}
 					autoSuggest={
-						label === "tags"
+						label === 'tags'
 							? {
-									suggestMethod: "startsWith",
+								suggestMethod           : 'startsWith',
 								clearAutoSuggestOnClick : true,
-									filterOn: ["value", "title"],
+								filterOn                : ['value', 'title'],
 							}
-							: { suggestMethod: "includes", clearAutoSuggestOnClick: true, filterOn: [] }
+							: { suggestMethod: 'includes', clearAutoSuggestOnClick: true, filterOn: [] }
 					}
 					valuePatterns={valuePatterns.source}
 					onSelect={(value)=>submitTag(value)}
 					onEntry={(e)=>{
-						if (e.key === "Enter") {
-							console.log("submit");
+						if(e.key === 'Enter') {
+							console.log('submit');
 							e.preventDefault();
 							submitTag(e.target.value);
 						}

client/homebrew/editor/tagInput/tagInput.less

@@ -1,3 +1,7 @@
+.list input {
+	border-radius: 5px;
+}
+
 .tagInput-dropdown {
 	.dropdown-options {
 		.item {