[feature/frogend] (Mastodon) domain block CSV import (#1390)

* checkbox-list styling with taller <p> element

* CSV import/export, UI/UX improvements to import-export interface

* minor styling tweaks

* csv export, clean up export type branching

* abstract domain block entry validation

* foundation for PSL check + suggestions

* Squashed commit of the following:

commit e3655ba4fbea1d55738b2f9e407d3378af26afe6
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 15:19:10 2023 +0100

    let debug depend on env (prod/debug) again

commit 79c792b832a2b59e472dcdff646bad6d71b42cc9
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 00:34:01 2023 +0100

    update checklist components

commit 4367960fe4be4e3978077af06e63a729d64e32fb
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 23:46:20 2023 +0100

    checklist performance improvements

commit 204a4c02d16ffad189a6e8a6001d5bf4ff95fc4e
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 20:05:34 2023 +0100

    checklist field: use reducer for state

* remove debug logging

* show and use domain block suggestion

* restructure import/export buttons

* updating suggestions

* suggestion overview

* restructure check-list behavior, domain import/export

1 files changed, 25 insertions, 6 deletions

diff --git a/web/source/settings/lib/form/text.jsx b/web/source/settings/lib/form/text.jsx
index 70e61657c..d9a9ab28c 100644
--- a/web/source/settings/lib/form/text.jsx
+++ b/web/source/settings/lib/form/text.jsx
@@ -20,14 +20,30 @@
 
 const React = require("react");
 
-module.exports = function useTextInput({ name, Name }, { validator, defaultValue = "", dontReset = false } = {}) {
+module.exports = function useTextInput({ name, Name }, {
+	defaultValue = "",
+	dontReset = false,
+	validator,
+	showValidation = true,
+	initValidation
+} = {}) {
+
 	const [text, setText] = React.useState(defaultValue);
-	const [valid, setValid] = React.useState(true);
 	const textRef = React.useRef(null);
 
+	const [validation, setValidation] = React.useState(initValidation ?? "");
+	const [_isValidating, startValidation] = React.useTransition();
+	let valid = validation == "";
+
 	function onChange(e) {
 		let input = e.target.value;
 		setText(input);
+
+		if (validator) {
+			startValidation(() => {
+				setValidation(validator(input));
+			});
+		}
 	}
 
 	function reset() {
@@ -38,11 +54,13 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue
 
 	React.useEffect(() => {
 		if (validator && textRef.current) {
-			let res = validator(text);
-			setValid(res == "");
-			textRef.current.setCustomValidity(res);
+			if (showValidation) {
+				textRef.current.setCustomValidity(validation);
+			} else {
+				textRef.current.setCustomValidity("");
+			}
 		}
-	}, [text, textRef, validator]);
+	}, [validation, validator, showValidation]);
 
 	// Array / Object hybrid, for easier access in different contexts
 	return Object.assign([
@@ -62,6 +80,7 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue
 		ref: textRef,
 		setter: setText,
 		valid,
+		validate: () => setValidation(validator(text)),
 		hasChanged: () => text != defaultValue
 	});
 };
\ No newline at end of file