Added label support to tagpicker

package.json

@@ -118,7 +118,10 @@
 							}
 						},
 						"additionalProperties": false,
-						"required": ["title", "path"]
+						"required": [
+							"title",
+							"path"
+						]
 					},
 					"scope": "Content"
 				},
@@ -149,7 +152,10 @@
 							}
 						},
 						"additionalProperties": false,
-						"required": ["title", "script"]
+						"required": [
+							"title",
+							"script"
+						]
 					},
 					"scope": "Custom scripts"
 				},
@@ -293,7 +299,10 @@
 					"scope": "Templates"
 				},
 				"frontMatter.taxonomy.contentTypes": {
-					"type": ["array", "null"],
+					"type": [
+						"array",
+						"null"
+					],
 					"markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.contentTypes)",
 					"items": {
 						"type": "object",
@@ -312,7 +321,14 @@
 									"properties": {
 										"type": {
 											"type": "string",
-											"enum": ["string", "datetime", "boolean", "image", "tags", "categories"],
+											"enum": [
+												"string",
+												"datetime",
+												"boolean",
+												"image",
+												"tags",
+												"categories"
+											],
 											"description": "Define the type of field"
 										},
 										"name": {
@@ -325,12 +341,18 @@
 										}
 									},
 									"additionalProperties": false,
-									"required": ["type", "name"]
+									"required": [
+										"type",
+										"name"
+									]
 								}
 							}
 						},
 						"additionalProperties": false,
-						"required": ["name", "fields"]
+						"required": [
+							"name",
+							"fields"
+						]
 					},
 					"default": [
 						{

src/viewpanel/components/Metadata.tsx

@@ -117,6 +117,7 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
           <TagPicker 
             key={field.name}
             type={TagType.tags} 
+            label={field.title || field.name}
             icon={<TagIcon />}
             crntSelected={metadata[field.name] as string[] || []} 
             options={settings?.tags || []} 
@@ -129,6 +130,7 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
           <TagPicker 
             key={field.name}
             type={TagType.categories}
+            label={field.title || field.name}
             icon={<ListUnorderedIcon />}
             crntSelected={metadata.categories as string[] || []} 
             options={settings.categories} 

src/viewpanel/components/TagPicker.tsx

@@ -11,6 +11,7 @@ import { MessageHelper } from '../../helpers/MessageHelper';
 export interface ITagPickerProps {
   type: string;
   icon: JSX.Element;
+  label?: string;
   crntSelected: string[];
   options: string[];
   freeform: boolean;
@@ -20,7 +21,7 @@ export interface ITagPickerProps {
 }
 
 export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
-  const { icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
+  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
   const prevSelected = usePrevious(crntSelected);
@@ -130,7 +131,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
     <div className={`article__tags`}>      
       <VsLabel>
         <div className={`metadata_field__label`}>
-          {icon} <span style={{ lineHeight: "16px"}}>{type}</span>
+          {icon} <span style={{ lineHeight: "16px"}}>{label || type}</span>
         </div>
       </VsLabel>
 
@@ -157,7 +158,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                             }
                           })
                        }
-                       placeholder={`Pick your ${type.toLowerCase()}`} />
+                       placeholder={`Pick your ${label || type.toLowerCase()}`} />
                 
                 {
                   freeform && (