@plaudit/gutenberg-api-extensions 2.79.0 → 2.80.1

package/src/controls/BaseSortableItemsControl.tsx

@@ -0,0 +1,84 @@
+import {BaseControl, Button, useBaseControlProps} from "@wordpress/components";
+import {useCallback} from "@wordpress/element";
+import {dragHandle, Icon} from "@wordpress/icons";
+
+import {ProvidedSlot} from "../blocks";
+
+import {Reorder, useDragControls} from "framer-motion";
+import type {ReactNode} from "react";
+import {IndexedItemActionsMaker, KeyedValue, useSortableItemsModel} from "./hooks/useSortableItemsModel";
+
+export type BaseSortableItemsControlProps<D> = Omit<Parameters<typeof useBaseControlProps>[0], 'children'|'id'>&{
+	id?: string,
+	value: D[]|undefined,
+	onAdd?: (index: number, value: D) => void,
+	onChange?: (value: D[]) => void,
+	onRemove?: (index: number) => void,
+	onReorder?: (oldIndex: number, newIndex: number) => void,
+	children: (datum: D, onDatumChange: (datum: D) => void, index: number) => ReactNode,
+	buttonsArea: (props: {addHandler: (added: D, index?: number) => void, disabled: boolean}) => ReactNode,
+	min?: number,
+	max?: number,
+	emptyValue?: D,
+	Label?: ProvidedSlot, Messages?: ProvidedSlot
+};
+
+export function BaseSortableItemsControl<D>({
+	value, onChange, onRemove, onReorder, onAdd, children: makeChild, min, max, label, Label, Messages, buttonsArea, emptyValue, ...wrapperProps
+}: BaseSortableItemsControlProps<D>) {
+	const {add: addHandler, commit, makeIndexedItemActions, keyedValues} = useSortableItemsModel({onAdd, onChange, onRemove, onReorder, emptyValue, value});
+
+	const listLength = value?.length ?? 0;
+	const addDisabled = max !== undefined && listLength >= max;
+	const removeDisabled = min !== undefined && listLength <= min;
+	const {baseControlProps, controlProps} = useBaseControlProps({...wrapperProps, label: Label ? <Label /> : label});
+
+	return <BaseControl {...baseControlProps}>
+		<div {...controlProps} className="plaudit-sortable-items-container">
+			<Reorder.Group
+				axis="y" onReorder={commit} values={keyedValues}
+				children={keyedValues.map((datum, index) => <SortableItemsListNode
+					addDisabled={addDisabled} datum={datum} index={index} key={datum.key} listLength={listLength}
+					makeChild={makeChild} makeIndexedItemActions={makeIndexedItemActions} removeDisabled={removeDisabled}
+				/>)}
+			/>
+		</div>
+		{buttonsArea({addHandler, disabled: addDisabled})}
+		{Messages && <Messages />}
+	</BaseControl>;
+}
+
+type SortableItemsListNodeProps<D> = {
+	addDisabled: boolean, datum: KeyedValue<D>, index: number, listLength: number,
+	makeChild: BaseSortableItemsControlProps<D>['children'], removeDisabled: boolean,
+	makeIndexedItemActions: IndexedItemActionsMaker<D>
+};
+function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeIndexedItemActions, removeDisabled}: SortableItemsListNodeProps<D>) {
+	const {remove, moveUp, moveDown, change} = makeIndexedItemActions(index, datum.key);
+	//TODO: If used, implement addBefore and addAfter the same way as moveUp and moveDown
+
+	const dragControls = useDragControls();
+	const dragStartHandler = useCallback((event: React.PointerEvent) => dragControls.start(event), [dragControls]);
+
+	return <Reorder.Item className="plaudit-sortable-items-row" data-index={index} dragListener={false} dragControls={dragControls} layout="position" value={datum}>
+		<div className="plaudit-sortable-items-ordering-controls">
+			<div className="plaudit-sortable-items-ordering-control">
+				<Icon icon={dragHandle} onPointerDown={dragStartHandler} />
+			</div>
+			<div className="plaudit-sortable-items-ordering-control">
+				<Button icon="arrow-up" aria-label="Move Up" disabled={index < 1} onClick={moveUp} />
+				<Button icon="arrow-down" aria-label="Move Down" disabled={index >= listLength - 1} onClick={moveDown} />
+			</div>
+		</div>
+		<div className="plaudit-sortable-items-inputs plaudit-sortable-items-padded">
+			{makeChild(datum.value, change, index)}
+		</div>
+		<div className="plaudit-sortable-items-presence-controls plaudit-sortable-items-padded">
+			{/*addEmptyHandlers && index === 0 &&
+				<Button icon="insert" className="insert-before" disabled={addDisabled} onClick={addEmptyHandlers[0]} aria-label="Insert Before"/>*/}
+			<Button icon="remove" disabled={removeDisabled} onClick={remove} aria-label="Remove"/>
+			{/*addEmptyHandlers && <Button icon="insert" className="insert-after" disabled={addDisabled} onClick={addEmptyHandlers[1]}
+			                             aria-label={index < listLength - 1 ? "Insert Between" : "Insert After"}/>*/}
+		</div>
+	</Reorder.Item>;
+}

package/src/controls/ExtendedFormTokenField.tsx

@@ -0,0 +1,120 @@
+import {Spinner, FormTokenField} from '@wordpress/components';
+import {useDebounce} from "@wordpress/compose";
+import {type MapSelect, useSelect} from "@wordpress/data";
+import {useCallback, useEffect, useMemo, useRef, useState} from "@wordpress/element";
+import {__} from "@wordpress/i18n";
+
+import type {SNPControlSlots} from "../blocks";
+import type {TokenItem} from "../lib/useful-types";
+import {packDisplayTokenText, unpackDisplayedTokenText, useImprovedTokenManager, ValidationState} from "./hooks/useImprovedTokenManager";
+import {useMultiSingleConversionLayer} from "./hooks/useMultiSingleConversionLayer";
+
+export {packDisplayTokenText, unpackDisplayedTokenText, ValidationState};
+
+import type {ReactNode} from "react";
+
+type ExtendedFormTokenFieldPropsBase = {
+	label?: string;
+	help?: ReactNode;
+
+	validationQuery(tokens: string[], ...args: Parameters<MapSelect>): TokenItem[]|undefined;
+	suggestionQuery(input: string, ...args: Parameters<MapSelect>): TokenItem[]|undefined;
+	stringToTokenConverter(suggestion: string): TokenItem;
+	validator?: (value: string) => boolean;
+	expandOnFocus?: boolean;
+	initialSuggestions?: TokenItem[];
+	hasLoadingError?: (input: string, ...args: Parameters<MapSelect>) => boolean;
+	hasValidationError?: (...args: Parameters<MapSelect>) => boolean;
+}&Partial<Pick<SNPControlSlots, 'Messages'>>;
+type ExtendedFormTokenFieldPropsSingle = ExtendedFormTokenFieldPropsBase&{
+	value?: string;
+	onChange: (value: string) => void;
+	multiple: false;
+};
+type ExtendedFormTokenFieldPropsMultiple = ExtendedFormTokenFieldPropsBase&{
+	value?: string[];
+	onChange: (value: string[]) => void;
+	multiple?: true|undefined;
+	maxLength?: number;
+};
+export type ExtendedFormTokenFieldProps = ExtendedFormTokenFieldPropsSingle|ExtendedFormTokenFieldPropsMultiple;
+
+export function ExtendedFormTokenField(props: ExtendedFormTokenFieldProps) {
+	const [debouncedInput, setDebouncedInput, setImmediateInput, input] = useDebouncedValue('');
+
+	const tokenTitleCacheRef = useRef<Map<TokenItem['value'], TokenItem['title']>|undefined>(undefined);
+	if (tokenTitleCacheRef.current === undefined) {
+		tokenTitleCacheRef.current = new Map();
+	}
+
+	const {rawSuggestions, isLoading, hasLoadingError} = useSelect((select, registry) => {
+		if (!debouncedInput && props.initialSuggestions !== undefined) {
+			return {rawSuggestions: props.initialSuggestions, isLoading: false};
+		}
+		const res = props.suggestionQuery(debouncedInput, select, registry);
+		if (res === undefined) {
+			return {rawSuggestions: props.initialSuggestions, isLoading: true};
+		}
+
+		return {rawSuggestions: res, isLoading: false, hasLoadingError: props.hasLoadingError?.(debouncedInput, select, registry)};
+	}, [debouncedInput, props.initialSuggestions, props.suggestionQuery]);
+	const suggestions = useMemo(() => rawSuggestions?.map(packDisplayTokenText), [rawSuggestions]);
+
+	const [value, setValue] = useMultiSingleConversionLayer(props.value, props.onChange, props.stringToTokenConverter, props.multiple);
+	const {currentTokens, isValidating, updateComponentValue, tokenStatusCache}
+		= useImprovedTokenManager(value, setValue, props.validationQuery, props.stringToTokenConverter, tokenTitleCacheRef.current);
+
+	// This is just a trick to avoid needing to repeat requests when pulling from suggestions
+	useMemo(() => {
+		if (rawSuggestions) {
+			for (const suggestion of rawSuggestions) {
+				if (suggestion.status !== undefined && !tokenStatusCache.has(suggestion.value)) {
+					tokenStatusCache.set(suggestion.value, suggestion.status);
+				}
+			}
+		}
+	}, [rawSuggestions, tokenStatusCache]);
+
+	const {hasValidationError} = useSelect((select, registry) => ({
+		hasValidationError: props.hasValidationError?.(select, registry)
+	}), [props.hasLoadingError, props.hasValidationError]);
+
+	const {help, expandOnFocus = false} = props;
+
+	//TODO: If focus is in field but user hasn't started typing, show a message telling them to start typing
+	return <>
+		<FormTokenField
+			value={currentTokens}
+			label={props.label}
+			placeholder="Start typing to see suggestions"
+			suggestions={suggestions}
+			onChange={updateComponentValue}
+			displayTransform={useCallback((token: string) => tokenTitleCacheRef.current!.get(unpackDisplayedTokenText(token).value) ?? token, [tokenTitleCacheRef])}
+			maxLength={props.multiple !== false ? props.maxLength : 1}
+			__experimentalValidateInput={props.validator}
+			__experimentalAutoSelectFirstMatch={true}
+			__experimentalExpandOnFocus={expandOnFocus}
+			__experimentalShowHowTo={props.multiple !== false}
+			onInputChange={setDebouncedInput}
+			onFocus={useCallback(() => setImmediateInput(input), [input])}
+		/>
+		{help && <div><span className="components-form-token-field__help">{help}</span></div>}
+		{hasLoadingError && <div><Spinner /><span className="components-form-token-field__help">{__("An Error Occurred While Loading Suggestions")}</span></div>}
+		{isLoading && <div><Spinner /><span className="components-form-token-field__help">{__("Updating Suggestions")}</span></div>}
+		{hasValidationError && <div><Spinner /><span className="components-form-token-field__help">{__("An Error Occurred While Validating")}</span></div>}
+		{isValidating && <div><Spinner /><span className="components-form-token-field__help">{__("Validating")}</span></div>}
+	</>;
+}
+
+function useDebouncedValue<V>(defaultValue: V): [V, (value: V) => any, (value: V) => any, V] {
+	const [value, setValue] = useState(defaultValue);
+	const [debouncedValue, setDebouncedState] = useState(defaultValue);
+	const setDebounced = useDebounce(setDebouncedState, 100);
+	useEffect(() => {
+		setDebounced(value);
+	}, [value, setDebounced]);
+	return [debouncedValue, setValue, useCallback((value: V) => {
+		setValue(value);
+		setDebouncedState(value);
+	}, [setValue, setDebounced]), value];
+}

package/src/controls/ExtendedPostPicker.ts

@@ -0,0 +1,57 @@
+import apiFetch from "@wordpress/api-fetch";
+import {memo, useMemo} from "@wordpress/element";
+
+import {basicNumericallyIdedItemPicker} from "./basicNumericallyIdedItemPicker";
+import type {SNPControlSlots} from "../blocks";
+import {ValidationState} from "./ExtendedFormTokenField";
+import {registerSimpleGutenbergApiEndpoint} from "../editor/simple-gutenberg-endpoints-api";
+import type {TokenItem, WPTaxonomyQuery} from "../lib/useful-types";
+
+import type {ReactNode} from "react";
+
+type ExtendedPostPickerPropsBase = {
+	label?: string;
+	help?: ReactNode;
+	postTypes?: string[];
+	placeholder?: string;
+	taxonomyQuery?: WPTaxonomyQuery;
+}&Partial<Pick<SNPControlSlots, 'Messages'>>;
+type ExtendedPostPickerPropsSingle = ExtendedPostPickerPropsBase&{
+	onChange(value: string): void;
+	value?: string;
+	multiple: false;
+};
+type ExtendedPostPickerPropsMultiple = ExtendedPostPickerPropsBase&{
+	onChange(value: string[]): void;
+	value?: string[];
+	multiple?: true|undefined;
+};
+export type ExtendedPostPickerProps = ExtendedPostPickerPropsSingle|ExtendedPostPickerPropsMultiple;
+export type ExtendedPostPickerConstructorProps = ExtendedPostPickerProps;
+
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.post-table-search-options",
+	data => apiFetch<Array<{id: number, title: string, type: string}>>({data, method: 'POST', path: "/plaudit/common/v1/post-table-search"}),
+	{
+		transformer: posts => posts.map(post => ({value: post.id.toString(), title: post.title, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.post-table-search-validation",
+	data => apiFetch<Array<{id: number, title: string, type: string}>>({data, method: 'POST', path: "/plaudit/common/v1/post-table-search"}),
+	{
+		transformer: posts => posts
+			.map((post): TokenItem => ({value: post.id.toString(), title: post.title, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+
+export const ExtendedPostPicker = memo((props: ExtendedPostPickerProps) => {
+	const {postTypes, taxonomyQuery, ...passthrough} = props;
+
+	const queryArgs = useMemo(() => {
+		return {postTypes: postTypes?.join(','), taxonomyQuery};
+	}, [postTypes, taxonomyQuery]);
+	return basicNumericallyIdedItemPicker(passthrough, "plaudit-common.post-table-search", queryArgs);
+});

package/src/controls/ExtendedRadioControl.tsx

@@ -0,0 +1,107 @@
+import {BaseControl, RadioControl, __experimentalVStack as VStack} from "@wordpress/components";
+import {useInstanceId} from "@wordpress/compose";
+import {useCallback, useState} from "@wordpress/element";
+
+import type {SNPControlSlots} from "../blocks";
+
+import type {ChangeEvent, ComponentPropsWithoutRef, ElementType} from "react";
+
+type RawElementSafeProps<P, T extends ElementType> = P&Omit<ComponentPropsWithoutRef<T>, 'as' | keyof P | 'children'>;
+export type ExtendedRadioControlProps = RawElementSafeProps<ComponentPropsWithoutRef<typeof RadioControl> & { allowCustom?: boolean }, 'input'>&Partial<SNPControlSlots>;
+
+/**
+ * This is a variant of WordPress'
+ */
+export function ExtendedRadioControl(props: ExtendedRadioControlProps) {
+	const {
+		label,
+		className,
+		selected,
+		help,
+		onChange,
+		hideLabelFromVision,
+		options = [],
+		allowCustom,
+		Label, Messages,
+		...additionalProps
+	} = props;
+	const instanceId = useInstanceId( ExtendedRadioControl );
+	const id = `inspector-radio-control-${instanceId}`;
+	const [valueIsCustom, setValueIsCustom] = useState(
+		() => options.find(option => option.value === selected) === undefined);
+	const [customValue, setCustomValue] = useState(valueIsCustom ? selected : "");
+
+	const onChangeValue = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+		setValueIsCustom(options.find(option => option.value === event.target.value) === undefined);
+		onChange(event.target.value);
+	}, [onChange, options, setValueIsCustom]);
+	const onChangeCustom = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+		onChangeValue(e);
+		setValueIsCustom(true);
+		setCustomValue(e.target.value);
+	}, [onChangeValue, setValueIsCustom, setCustomValue]);
+
+	if (!options?.length) {
+		return null;
+	}
+
+	const distinctnessSet = new Set<string>();
+	const classNames = [...className?.split(/\s+/g) ?? [], 'components-radio-control'].filter(cn => distinctnessSet.add(cn)).join(' ');
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			label={Label ? <Label /> : label}
+			id={id}
+			hideLabelFromVision={hideLabelFromVision}
+			help={help}
+			className={classNames}
+		>
+			<VStack spacing={1}>
+				{options.map((option, index) => (
+					<div
+						key={`${id}-${index}`}
+						className="components-radio-control__option"
+					>
+						<input
+							id={`${id}-${index}`}
+							className="components-radio-control__input"
+							type="radio"
+							name={id}
+							value={option.value}
+							onChange={onChangeValue}
+							checked={option.value === selected}
+							aria-describedby={!!help ? `${id}__help` : undefined}
+							{...additionalProps}
+						/>
+						<label
+							className="components-radio-control__label"
+							htmlFor={`${id}-${index}`}
+						>
+							{option.label}
+						</label>
+					</div>
+				))}
+				{allowCustom && <div
+                    key={`${id}-${options.length}`}
+                    className="components-radio-control__option"
+				>
+                    <input
+                        id={`${id}-${options.length}`}
+                        className="components-radio-control__input"
+                        type="radio"
+                        name={id}
+                        value={customValue ?? ''}
+                        onChange={onChangeValue}
+                        checked={valueIsCustom}
+                        aria-describedby={!!help ? `${id}__help` : undefined}
+						{...additionalProps}
+                    />
+					<label id={`${id}-custom-label`} className="components-radio-control__label" htmlFor={`${id}-${options.length}`}>Custom:</label>
+					<input aria-labelledby={`${id}-custom-label`} type="text" value={customValue ?? ''} onChange={onChangeCustom} />
+                </div>}
+			</VStack>
+			{Messages && <Messages/>}
+		</BaseControl>
+	);
+}

package/src/controls/ExtendedTaxonomyPicker.tsx

@@ -0,0 +1,100 @@
+import {type BaseEntityRecords, store as coreStore, type Taxonomy} from "@wordpress/core-data";
+import {useSelect} from "@wordpress/data";
+import {useCallback, useMemo} from "@wordpress/element";
+
+import type {SNPControlSlots} from "../blocks";
+import type {TokenItem} from "../lib/useful-types";
+import {useOutputMemoizingFilter} from "./hooks/useOutputMemoizingFilter";
+import {ExtendedFormTokenField, unpackDisplayedTokenText, ValidationState} from "./ExtendedFormTokenField";
+
+import type {ReactNode} from "react";
+
+type ExtendedTaxonomyPickerPropsBase = {
+	label?: string;
+	help?: ReactNode;
+	placeholder?: string;
+	visibility?: Partial<BaseEntityRecords.TaxonomyVisibility>
+}&Partial<Pick<SNPControlSlots, 'Messages'>>;
+export type ExtendedTaxonomyPickerPropsSingle = {
+	onChange(value: string): void;
+	value?: string;
+	multiple: false;
+};
+export type ExtendedTaxonomyPickerPropsMultiple = {
+	onChange(value: string[]): void;
+	value?: string[];
+	multiple?: true|undefined;
+};
+export type ExtendedTaxonomyPickerProps = ExtendedTaxonomyPickerPropsBase&(ExtendedTaxonomyPickerPropsSingle|ExtendedTaxonomyPickerPropsMultiple);
+
+export function ExtendedTaxonomyPicker(props: ExtendedTaxonomyPickerProps) {
+	const {visibility, ...extendedFormTokenFieldProps} = props;
+	const availableTaxonomies = useTaxonomiesFilteredByVisibility(visibility);
+	const taxonomyVisibilityFilter = makeTaxonomyVisibilityFilter(visibility);
+
+	const taxonomySuggestionQuery = useOutputMemoizingFilter((input: string, taxonomies: Taxonomy[]|null) => {
+		return taxonomies?.filter(taxonomy => !props.value?.includes(taxonomy.slug))
+			.filter(taxonomy => taxonomy.name.toLowerCase().includes(input.toLowerCase()) || taxonomy.slug.toLowerCase().includes(input.toLowerCase()))
+			.map(taxonomy => ({value: taxonomy.slug, status: ValidationState.Valid, title: taxonomy.name})) ?? [];
+	}, [props.value]);
+	const taxonomyValidationQuery = useOutputMemoizingFilter((tokens: string[], rawTaxonomies: Taxonomy[]|null) => {
+		if (rawTaxonomies === null) {
+			return tokens.map(token => ({value: token, status: ValidationState.Validating}));
+		}
+		const tokenItemCreator = (taxonomy: Taxonomy): [string, TokenItem] => {
+			return [taxonomy.slug, {value: taxonomy.slug, status: ValidationState.Valid, title: taxonomy.name}];
+		};
+		const taxonomies = rawTaxonomies?.length ? Object.fromEntries(rawTaxonomies.map(tokenItemCreator)) : undefined;
+		if (!taxonomies) {
+			return tokens.map(token => ({value: token, status: ValidationState.Invalid}));
+		}
+		return tokens.map(token => taxonomies[token] ?? {value: token, status: ValidationState.Invalid});
+	});
+
+	return <ExtendedFormTokenField
+		expandOnFocus={true}
+		{...extendedFormTokenFieldProps}
+		stringToTokenConverter={useCallback(token => {
+			if (availableTaxonomies === null) {
+				return {value: token, status: ValidationState.Validating};
+			}
+			const {value, title} = unpackDisplayedTokenText(token);
+			const foundTaxonomy = availableTaxonomies.find(taxonomy => taxonomy.slug === value);
+			if (foundTaxonomy) {
+				return {value: foundTaxonomy.slug, status: ValidationState.Valid, title: foundTaxonomy.name};
+			}
+			return title === undefined ? {value, status: ValidationState.Validating} : {value, status: ValidationState.Invalid, title};
+		}, [availableTaxonomies])}
+		suggestionQuery={useCallback((input, select) => {
+			return taxonomySuggestionQuery(input, taxonomyVisibilityFilter(select(coreStore).getTaxonomies()));
+		}, [taxonomyVisibilityFilter, taxonomySuggestionQuery])}
+		validationQuery={useCallback((tokens, select) => {
+			return taxonomyValidationQuery(tokens, taxonomyVisibilityFilter(select(coreStore).getTaxonomies()));
+		}, [taxonomyVisibilityFilter, taxonomyValidationQuery])}
+		validator={useCallback((token: string) => {
+			if (!availableTaxonomies) {
+				return false;
+			}
+			const {value} = unpackDisplayedTokenText(token);
+			return availableTaxonomies.find(taxonomy => taxonomy.slug === value) !== undefined;
+		}, [availableTaxonomies])}
+	/>;
+}
+
+function useTaxonomiesFilteredByVisibility(visibility: ExtendedTaxonomyPickerProps['visibility']) {
+	const taxonomies = useSelect(select => select(coreStore).getTaxonomies(), []);
+	return useMemo(() => filterTaxonomiesByVisibility(taxonomies, visibility), [taxonomies, visibility]);
+}
+function makeTaxonomyVisibilityFilter(visibility: Parameters<typeof filterTaxonomiesByVisibility>[1]) {
+	return useOutputMemoizingFilter((taxonomies: Parameters<typeof filterTaxonomiesByVisibility>[0]) => filterTaxonomiesByVisibility(taxonomies, visibility), [visibility]);
+}
+function filterTaxonomiesByVisibility(taxonomies: Taxonomy[]|null, visibility: ExtendedTaxonomyPickerProps['visibility']) {
+	if (!taxonomies || !visibility) {
+		return taxonomies;
+	}
+	const tests = Object.entries(visibility)
+		.filter((entry): entry is [keyof BaseEntityRecords.TaxonomyVisibility, boolean] => entry[1] !== undefined && entry[1] !== null);
+	return tests.length
+		? taxonomies.filter(taxonomy => tests.every(([key, value]) => taxonomy.visibility[key] === value))
+		: taxonomies;
+}

package/src/controls/ExtendedTermPicker.tsx

@@ -0,0 +1,62 @@
+import apiFetch from "@wordpress/api-fetch";
+import {select as dataSelect} from "@wordpress/data";
+import {useCallback} from "@wordpress/element";
+
+import type {SNPControlSlots} from "../blocks";
+import {ExtendedFormTokenField, unpackDisplayedTokenText, ValidationState} from "./ExtendedFormTokenField";
+import {registerSimpleGutenbergApiEndpoint} from "../editor/simple-gutenberg-endpoints-api";
+import type {TokenItem} from "../lib/useful-types";
+
+import type {ReactNode} from "react";
+
+type ExtendedTermPickerPropsBase = {
+	label?: string;
+	help?: ReactNode;
+	taxonomy: string;
+	placeholder?: string;
+}&Partial<Pick<SNPControlSlots, 'Messages'>>;
+export type ExtendedTermPickerPropsSingle = ExtendedTermPickerPropsBase&{
+	onChange(value: string): void;
+	value?: string;
+	multiple: false;
+};
+export type ExtendedTermPickerPropsMultiple = ExtendedTermPickerPropsBase&{
+	onChange(value: string[]): void;
+	value?: string[];
+	multiple?: true|undefined;
+};
+export type ExtendedTermPickerProps = ExtendedTermPickerPropsSingle|ExtendedTermPickerPropsMultiple;
+
+export type TermDataStruct = {term_id: number, name: string, slug: number, term_taxonomy_id: number, taxonomy: string};
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.term-table-search-options",
+	data => apiFetch<TermDataStruct[]>({data, method: 'POST', path: "/plaudit/common/v1/term-table-search"}),
+	{
+		transformer: terms => terms.map(term => ({value: term.slug, title: term.name, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.term-table-search-validation",
+	data => apiFetch<TermDataStruct[]>({data, method: 'POST', path: "/plaudit/common/v1/term-table-search"}),
+	{
+		transformer: terms => terms
+			.map((term) => ({value: term.slug, title: term.name, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+
+export function ExtendedTermPicker(props: ExtendedTermPickerProps) {
+	const {taxonomy} = props;
+
+	const suggestionQuery = useCallback((input: string, select: typeof dataSelect) => {
+		return select('plaudit/simple-gutenberg-apis')
+			.get("plaudit-common.term-table-search-options", {search: input, taxonomy}) as TokenItem[]|undefined;
+	}, [taxonomy]);
+	const validationQuery = useCallback((slugsBeingValidated: string[], select: typeof dataSelect) => {
+		return (select('plaudit/simple-gutenberg-apis')
+			.get("plaudit-common.term-table-search-validation", {slugs: slugsBeingValidated.join(','), taxonomy}) as TokenItem[]|undefined);
+	}, [taxonomy]);
+
+	return <ExtendedFormTokenField {...props} validationQuery={validationQuery} suggestionQuery={suggestionQuery} stringToTokenConverter={unpackDisplayedTokenText} />;
+}

package/src/controls/ExtendedTextareaControl.tsx

@@ -0,0 +1,65 @@
+import {TextareaControl} from "@wordpress/components";
+import {useDebounce} from "@wordpress/compose";
+
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from "@wordpress/element";
+
+import type {SNPControlSlots} from "../blocks";
+
+import type {ComponentProps} from "react";
+
+export type TextareaControlPropsExtension = {newline?: undefined|"\n"|"br"|"p", placeholder?: string|undefined, rich?: boolean};
+export type ExtendedTextAreaControlProps = Omit<ComponentProps<typeof TextareaControl>, 'value'>&{value: ComponentProps<typeof TextareaControl>['value']|null|undefined}
+	&Partial<Pick<SNPControlSlots, 'Messages'>>&TextareaControlPropsExtension;
+export const ExtendedTextareaControl = (() => {
+	const debouncerSettings = {leading: false, maxWait: 250, trailing: true};
+	return forwardRef<HTMLTextAreaElement, ExtendedTextAreaControlProps>((props, ref) => {
+		const {newline, onChange, placeholder, rich, value, Messages, ...forwardedProps} = props;
+		let v = value ?? '';
+		if (!rich) {
+			if (newline === "br") {
+				v = v.replaceAll(/<br>\s*<\/br>|<br\/?>/gi, "\n");
+			} else if (newline === "p") {
+				v = v.replaceAll(/<p>(.*?)<\/p>/gi, "$1\n");
+			}
+		}
+		const safeOnChange = useCallback((v: string) => {
+			if (rich) {
+				onChange(v);
+			} else if (newline === "br") {
+				onChange(v.replaceAll(/\r?\n/g, "<br/>"));
+			} else if (newline === "p") {
+				onChange(v.split(/\r?\n/g).map(v => "<p>" + v + "</p>").join(""));
+			} else {
+				onChange(v);
+			}
+		}, [onChange]);
+
+		const textareaRef = useRef<HTMLTextAreaElement|null>(null);
+		useImperativeHandle(ref, () => textareaRef.current!, []);
+
+		const debouncedUpdate = useDebounce(safeOnChange, 100, debouncerSettings);
+
+		useEffect(() => {
+			const id = textareaRef.current?.id;
+			if (id && rich && document.getElementById(id)) {
+				(window as any).tinymce.EditorManager.execCommand('mceAddEditor', true, id);
+				const editor = (window as any).tinymce.editors.findLast((e: {id: string}) => e.id === id);
+				editor.on('input', () => debouncedUpdate(editor.getContent()));
+				editor.on('NodeChange', () => debouncedUpdate(editor.getContent()));
+				editor.on('change', () => {
+					debouncedUpdate.cancel();
+					safeOnChange(editor.getContent());
+				});
+				return () => {
+					(window as any).tinymce.EditorManager.execCommand('mceRemoveEditor', true, id);
+				};
+			}
+			return () => {};
+		}, [rich, debouncedUpdate, textareaRef.current]);
+
+		return <>
+			<TextareaControl ref={textareaRef} {...forwardedProps} value={v} onChange={safeOnChange} />
+			{Messages && <Messages/>}
+		</>;
+	})
+})();

package/src/controls/ExtendedUserPicker.ts

@@ -0,0 +1,56 @@
+import apiFetch from "@wordpress/api-fetch";
+import {memo, useMemo} from "@wordpress/element";
+
+import {basicNumericallyIdedItemPicker} from "./basicNumericallyIdedItemPicker";
+import type {SNPControlSlots} from "../blocks";
+import {ValidationState} from "./ExtendedFormTokenField";
+import {registerSimpleGutenbergApiEndpoint} from "../editor/simple-gutenberg-endpoints-api";
+import type {TokenItem} from "../lib/useful-types";
+
+import type {ReactNode} from "react";
+
+type ExtendedUserPickerPropsBase = {
+	label?: string;
+	help?: ReactNode;
+	userRoles?: string[];
+	placeholder?: string;
+}&Partial<Pick<SNPControlSlots, 'Messages'>>;
+type ExtendedUserPickerPropsSingle = ExtendedUserPickerPropsBase&{
+	onChange(value: string): void;
+	value?: string;
+	multiple: false;
+};
+type ExtendedUserPickerPropsMultiple = ExtendedUserPickerPropsBase&{
+	onChange(value: string[]): void;
+	value?: string[];
+	multiple?: true|undefined;
+};
+export type ExtendedUserPickerProps = ExtendedUserPickerPropsSingle|ExtendedUserPickerPropsMultiple;
+
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.user-table-search-options",
+	data => apiFetch<Array<{id: number, name: string, roles?: string[]}>>({data, method: 'POST', path: "/plaudit/common/v1/user-table-search"}),
+	{
+		transformer: users => users.map(user => ({value: user.id.toString(), title: user.name, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+registerSimpleGutenbergApiEndpoint(
+	"plaudit-common.user-table-search-validation",
+	data => apiFetch<Array<{id: number, name: string, roles?: string[]}>>({data, method: 'POST', path: "/plaudit/common/v1/user-table-search"}),
+	{
+		transformer: user => user
+			.map((user): TokenItem => ({value: user.id.toString(), title: user.name, status: ValidationState.Valid})),
+		maxCachedResults: 10
+	}
+);
+
+export const ExtendedUserPicker = memo((props: ExtendedUserPickerProps) => {
+	const {userRoles, ...passthrough} = props;
+
+	const queryArgs = useMemo(() => {
+		return {roles: userRoles?.join(",")};
+	}, [userRoles]);
+
+	return basicNumericallyIdedItemPicker(passthrough, "plaudit-common.user-table-search", queryArgs);
+})