#103 - Title and description field added to metadata

assets/media/styles.css

@@ -428,6 +428,15 @@ input:checked + .field__toggle__slider:before {
   margin-right: .5rem;
 }
 
+.metadata_field__textarea, .metadata_field__textarea:focus {
+  outline: none;
+}
+
+.metadata_field__limit {
+  color: var(--vscode-inputValidation-warningBorder);
+  margin-top: .25rem;
+}
+
 /* File list */
 .file_list vscode-label {
   border-bottom: 1px solid var(--vscode-foreground);

src/viewpanel/components/Fields/TextField.tsx

@@ -0,0 +1,52 @@
+import { PencilIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { VsLabel } from '../VscodeComponents';
+
+export interface ITextFieldProps {
+  label: string;
+  value: string | null;
+  limit: number | undefined;
+  rows?: number;
+  onChange: (txtValue: string) => void;
+}
+
+export const TextField: React.FunctionComponent<ITextFieldProps> = ({limit, label, value, rows, onChange}: React.PropsWithChildren<ITextFieldProps>) => {
+  const [ text, setText ] = React.useState<string | null>(value);
+  
+  const onTextChange = (txtValue: string) => {
+    setText(txtValue);
+    onChange(txtValue);
+  };
+
+  React.useEffect(() => {
+    if (text !== value) {
+      setText(value);
+    }
+  }, [ value ]);
+
+  return (
+    <div className={`metadata_field`}>
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+      
+      <textarea
+        className={`metadata_field__textarea`}
+        rows={rows || 2}
+        value={text || ""}  
+        onChange={(e) => onTextChange(e.currentTarget.value)} style={{
+        border: !limit || ((text || "").length < limit) ? "1px solid var(--vscode-inputValidation-infoBorder)" : "1px solid var(--vscode-inputValidation-warningBorder)"
+      }} />
+
+      {
+        limit && (text || "").length >= limit && (
+          <div className={`metadata_field__limit`}>
+            Field limit reached {(text || "").length}/{limit}
+          </div>
+        )
+      }
+    </div>
+  );
+};

src/viewpanel/components/Metadata.tsx

@@ -16,6 +16,8 @@ import { useState } from 'react';
 import "react-datepicker/dist/react-datepicker.css";
 import { parseJSON } from 'date-fns';
 import { DateTime } from './Fields/DateTime';
+import { TextField } from './Fields/TextField';
+import { DefaultFields } from '../../constants';
 
 export interface IMetadataProps {
   settings: PanelSettings | undefined;
@@ -53,9 +55,24 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
     modifying = metadata[modDate] ? getDate(metadata[modDate] as string) : null;
   }
 
+  const descriptionField = settings?.seo.descriptionField || DefaultFields.Description;
+
   return (
     <Collapsible id={`tags`} title="Metadata" className={`inherit z-20`}>
 
+      <TextField 
+        label={`Title`}
+        limit={settings?.seo.title}
+        onChange={(value) => sendUpdate('title', value)}
+        value={metadata.title as string || null} />
+
+      <TextField 
+        label={`Description`}
+        limit={settings?.seo.description}
+        rows={3}
+        onChange={(value) => sendUpdate(descriptionField, value)}
+        value={metadata[descriptionField] as string || null} />
+
       <DateTime
         label={`Article date`}
         date={publishing}