File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>/**
 * Code based on Tagger, copyright (c) 2018-2022 Jakub T. Jankiewicz &lt;https://jcubic.pl/me&gt;
 * Released under the MIT license.
 */
import React, { useRef, useState } from &#039;react&#039;
import { handleUnknownError } from &#039;../../utils/errors&#039;
import { SuggestionList } from &#039;./SuggestionList&#039;
import { TagList } from &#039;./TagList&#039;
import type { InputHTMLAttributes, KeyboardEventHandler } from &#039;react&#039;

const COMPLETION_MIN_LENGTH = 2
const SPECIAL_CHARS_RE = /(?&lt;specialChar&gt;[-\\^$[\]()+{}?*.|])/g

const escapeRegex = (str: string) =&gt;
	str.replace(SPECIAL_CHARS_RE, &#039;\\$1&#039;)

const isNotEmpty = (value: string | null | undefined): value is string =&gt;
	![&#039;&#039;, &#039;&quot;&quot;&#039;, &quot;&#039;&#039;&quot;, &#039;``&#039;, undefined, null].includes(value)

const isTagSelected = (selected: string[], tag: string) =&gt; {
	if (!selected.includes(tag)) {
		return false
	}
	const re = new RegExp(`^${escapeRegex(tag)}`)
	return 1 === selected.filter(test_tag =&gt; re.test(test_tag)).length
}

export type TagEditorCompletions = string[] | ((value?: string) =&gt; Promise&lt;string[]&gt;) | undefined

const buildCompletions = (completions: TagEditorCompletions, value: string | undefined): Promise&lt;string[] | undefined&gt; =&gt; {
	if (!completions) {
		return Promise.resolve(undefined)
	} else if (&#039;function&#039; === typeof completions) {
		return completions(value)
	} else {
		return Promise.resolve(completions)
	}
}

export interface TagEditorProps extends Omit&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, &#039;onChange&#039;&gt; {
	id: string
	tags: string[]
	onChange: (tags: string[]) =&gt; void
	tagLimit?: number
	completions?: TagEditorCompletions
	addOnBlur?: boolean
	allowSpaces?: boolean
	allowDuplicates?: boolean
	completionMinLength?: number
}

// eslint-disable-next-line max-lines-per-function
export const TagEditor: React.FC&lt;TagEditorProps&gt; = ({
	id,
	tags,
	onChange,
	tagLimit,
	completions,
	addOnBlur = false,
	allowSpaces = true,
	allowDuplicates = false,
	completionMinLength = COMPLETION_MIN_LENGTH,
	...inputProps
}) =&gt; {
	const inputRef = useRef&lt;HTMLInputElement&gt;(null)
	const [inputValue, setInputValue] = useState&lt;string&gt;(&#039;&#039;)
	const [completionOpen, setCompletionOpen] = useState(false)
	const [completionList, setCompletionList] = useState&lt;string[]&gt;([])
	const [lastCompletionList, setLastCompletionList] = useState&lt;string[]&gt;()

	const isTagLimit = () =&gt; Boolean(tagLimit &amp;&amp; 0 &lt; tagLimit &amp;&amp; tags.length &gt;= tagLimit)

	const addTag = (tag: string = inputValue.trim()) =&gt; {
		const isTagValid = isNotEmpty(tag) &amp;&amp; !isTagLimit() &amp;&amp; (allowDuplicates || !tags.includes(tag))

		if (isTagValid) {
			onChange([...tags, tag])
		}

		setInputValue(&#039;&#039;)
		return isTagValid
	}

	const removeTag = (tag?: string) =&gt;
		onChange(tag ? tags.filter(item =&gt; item !== tag) : tags.slice(0, -1))

	const triggerCompletion = (openList = inputValue.length &gt;= completionMinLength) =&gt; {
		if (openList) {
			buildCompletions(completions, inputValue)
				.then(list =&gt; {
					setLastCompletionList(completionList)

					if (list?.length) {
						setCompletionList(allowDuplicates ? list : list.filter(item =&gt; !tags.includes(item)))
					}
				})
				.catch(handleUnknownError)
		}

		setCompletionOpen(openList)
	}

	const keyboardHandler: KeyboardEventHandler&lt;HTMLInputElement&gt; = event =&gt; {
		const { key, ctrlKey, metaKey } = event

		switch (key) {
			case &#039;Enter&#039;:
			case &#039;,&#039;:
				event.preventDefault()
				addTag()
				break

			case &#039;Backspace&#039;:
				if (!inputValue) {
					event.preventDefault()
					removeTag()
				}
				break

			case &#039; &#039;:
				if (ctrlKey || metaKey) {
					event.preventDefault()
					triggerCompletion(true)
				} else if (!allowSpaces) {
					event.preventDefault()
					addTag()
				}
				break

			case &#039;Tab&#039;:
				if (!isTagLimit()) {
					event.preventDefault()
				}
				break
		}
	}

	const inputHandler = () =&gt; {
		if (completionOpen &amp;&amp; lastCompletionList &amp;&amp; isTagSelected(lastCompletionList, inputValue.trim())) {
			if (addTag()) {
				setCompletionOpen(false)
			}
		} else {
			triggerCompletion()
		}
	}

	return (
		&lt;div className=&quot;tagger&quot;&gt;
			&lt;ul onClick={() =&gt; inputRef.current?.focus()}&gt;
				&lt;TagList tags={tags} onRemove={removeTag} /&gt;
				&lt;li className=&quot;tagger-new&quot;&gt;
					&lt;input
						{...inputProps}
						id={id}
						type=&quot;text&quot;
						ref={inputRef}
						value={inputValue}
						list={`tagger-completion-${completionOpen ? &#039;&#039; : &#039;-disabled&#039;}${id}`}
						onBlur={() =&gt; addOnBlur ? addTag() : undefined}
						onChange={event =&gt; setInputValue(event.target.value)}
						onKeyDown={keyboardHandler}
						onInput={inputHandler}
					/&gt;
					&lt;SuggestionList
						id={`tagger-completion-${id}`}
						suggestions={completionList.filter(suggestion =&gt; !tags.includes(suggestion))}
						onSelect={suggestion =&gt; {
							addTag(suggestion)
							setCompletionList([])
							setCompletionOpen(false)
						}}
					/&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	)
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>