Added free keyword text area

Author: SonAndrea

website/src/pages/documents/edit-document-modal.tsx

@@ -167,6 +167,7 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
 
   const [creator, setCreator] = useState(documentMetadata.creators ?? [])
   const [keywords, setKeywords] = useState(documentMetadata.keywords ?? [])
+  const [freeKeyword, setFreeKeyword] = useState("")
   const [languages, setLanguages] = useState(documentMetadata.languages ?? [])
   const [spatialCoverage, setSpatialCoverage] = useState(
     documentMetadata.spatialCoverage ?? []
@@ -792,8 +793,45 @@ export const EditDocumentModal: React.FC<EditDocumentModalProps> = ({
             newTags={newKeywords}
             onAdd={(tagName) => addKeyword(tagName)}
             onRemove={removeKeyword}
-            addButtonLabel="Add Keyword"
-          />
+            addButtonLabel="Add Pre-existing Keywords"
+          >
+            {isEditing && (
+              <div
+                style={{
+                  display: "flex",
+                  gap: "8px",
+                  marginBottom: "12px",
+                  alignItems: "center",
+                }}
+              >
+                <input
+                  type="text"
+                  className={styles.input}
+                  placeholder="Enter keyword..."
+                  value={freeKeyword}
+                  onChange={(e) => setFreeKeyword(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && freeKeyword.trim()) {
+                      addKeyword(freeKeyword.trim())
+                      setFreeKeyword("")
+                    }
+                  }}
+                />
+                <button
+                  type="button"
+                  className={styles.addTagButton}
+                  onClick={() => {
+                    if (freeKeyword.trim()) {
+                      addKeyword(freeKeyword.trim())
+                      setFreeKeyword("")
+                    }
+                  }}
+                >
+                  Add Keyword
+                </button>
+              </div>
+            )}
+          </TagSelector>
 
           <TagSelector
             label="Subject Headings"

website/src/pages/documents/tag-selector.tsx

@@ -10,6 +10,7 @@ interface TagSelectorProps {
   onRemove?: (index: number) => void
   addButtonLabel: string
   customForm?: React.ReactNode
+  children?: React.ReactNode
 }
 
 export const TagSelector: React.FC<TagSelectorProps> = ({
@@ -21,6 +22,7 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
   onRemove,
   addButtonLabel,
   customForm,
+  children,
 }) => {
   const [showDropdown, setShowDropdown] = useState(false)
 
@@ -50,6 +52,7 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
       </div>
 
       <div className={styles.tagDropdownContainer}>
+        {children}
         <button
           type="button"
           onClick={() => setShowDropdown(!showDropdown)}