@plaudit/gutenberg-api-extensions 2.95.0 → 2.96.0

package/src/controls/ExtendedFormTokenField.tsx

@@ -1,144 +0,0 @@
-import {Spinner, FormTokenField, Modal} from '@wordpress/components';
-import {useDebounce} from "@wordpress/compose";
-import {type MapSelect, useSelect} from "@wordpress/data";
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from "@wordpress/element";
-import {__} from "@wordpress/i18n";
-
-import type {SNPControlSlots} from "../blocks";
-import {packDisplayTokenText, unpackDisplayedTokenText, useImprovedTokenManager, ValidationState} from "./hooks/useImprovedTokenManager";
-import {useMultiSingleConversionLayer} from "./hooks/useMultiSingleConversionLayer";
-import {potentialWpErrorToString} from "../lib/helpers";
-import {TokenItem} from "../lib/useful-types";
-
-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;
-
-const EMPTY_ARRAY: TokenItem[] = [];
-export function ExtendedFormTokenField(props: ExtendedFormTokenFieldProps) {
-	const [debouncedInput, setDebouncedInput, setImmediateInput, input] = useDebouncedValue('');
-	const [hasBeenFocused, setHasBeenFocused] = useState(false);
-
-	const tokenTitleCacheRef = useRef<Map<TokenItem['value'], TokenItem['title']>|undefined>(undefined);
-	if (tokenTitleCacheRef.current === undefined) {
-		tokenTitleCacheRef.current = new Map();
-	}
-
-	const {rawSuggestions, isLoading, hasLoadingError, thrownLoadingError} = useSelect((select, registry) => {
-		if (!debouncedInput && (!hasBeenFocused || props.initialSuggestions !== undefined)) {
-			return {rawSuggestions: props.initialSuggestions ?? EMPTY_ARRAY, isLoading: false};
-		}
-		let res;
-		try {
-			res = props.suggestionQuery(debouncedInput, select, registry);
-		} catch (e) {
-			return {rawSuggestions: [], isLoading: false, hasLoadingError: true, thrownLoadingError: potentialWpErrorToString(e)};
-		}
-		if (res === undefined) {
-			return {rawSuggestions: props.initialSuggestions ?? EMPTY_ARRAY, isLoading: true};
-		}
-
-		return {rawSuggestions: res, isLoading: false, hasLoadingError: props.hasLoadingError?.(debouncedInput, select, registry)};
-	}, [debouncedInput, props.initialSuggestions, props.suggestionQuery, hasBeenFocused]);
-	const suggestions = useMemo(() => rawSuggestions?.map(packDisplayTokenText), [rawSuggestions]);
-
-	const {value, setValue} = useMultiSingleConversionLayer(props.value, props.onChange, props.stringToTokenConverter, props.multiple);
-	const {currentTokens, isValidating, updateComponentValue, tokenStatusCache, thrownValidationError}
-		= useImprovedTokenManager(value, setValue, props.validationQuery, props.stringToTokenConverter, tokenTitleCacheRef.current);
-
-	// This is just a trick to avoid needing to send an additional validation request when adding a token from the suggestions list
-	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: !!thrownValidationError || props.hasValidationError?.(select, registry)
-	}), [props.hasLoadingError, props.hasValidationError, thrownValidationError]);
-
-	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(() => {
-				setHasBeenFocused(true);
-				setImmediateInput(input);
-			}, [input])}
-			__next40pxDefaultSize
-			__nextHasNoMarginBottom
-		/>
-		{help && <div><span className="components-form-token-field__help">{help}</span></div>}
-		{hasLoadingError && <ErrorSummaryWithModal summary={<span className="components-form-token-field__help">{__("An Error Occurred While Loading Suggestions")}</span>} detail={thrownLoadingError} />}
-		{isLoading && <div><Spinner /><span className="components-form-token-field__help">{__("Updating Suggestions")}</span></div>}
-		{hasValidationError && <ErrorSummaryWithModal summary={<span className="components-form-token-field__help">{__("An Error Occurred While Validating")}</span>} detail={thrownValidationError} />}
-		{isValidating && <div><Spinner /><span className="components-form-token-field__help">{__("Validating")}</span></div>}
-	</>;
-}
-
-const ErrorSummaryWithModal = memo(({summary, detail}: {summary: ReactNode, detail: ReactNode}) => {
-	const [isOpen, setOpen] = useState(false);
-	const openModal = useCallback(() => setOpen(true), [setOpen]);
-	const closeModal = () => setOpen(false);
-
-	return <>
-		<div onClick={openModal} children={summary} />
-		{isOpen && <Modal title="Error Details" onRequestClose={closeModal} children={<pre>{detail}</pre>} />}
-	</>;
-});
-
-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

@@ -1,57 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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 {store as endpointsStore} from "../editor/simple-gutenberg-endpoints-impl";
-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(endpointsStore).get("plaudit-common.term-table-search-options", {search: input, taxonomy}) as TokenItem[]|undefined;
-	}, [taxonomy]);
-	const validationQuery = useCallback((slugsBeingValidated: string[], select: typeof dataSelect) => {
-		return select(endpointsStore).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

@@ -1,65 +0,0 @@
-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 {...forwardedProps} ref={textareaRef} value={v} onChange={safeOnChange} __nextHasNoMarginBottom />
-			{Messages && <Messages/>}
-		</>;
-	})
-})();

package/src/controls/ExtendedUserPicker.ts

@@ -1,56 +0,0 @@
-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);
-})

package/src/controls/FileControl.tsx

@@ -1,48 +0,0 @@
-import {MediaUpload, MediaUploadCheck} from "@wordpress/block-editor";
-import {BaseControl, Button, useBaseControlProps} from "@wordpress/components";
-import {store as coreStore} from "@wordpress/core-data";
-import {useSuspenseSelect} from "@wordpress/data";
-import {useCallback} from "@wordpress/element";
-import {__} from "@wordpress/i18n";
-
-import type {ReactNode} from "react";
-
-export type FileControlProps = {
-	label: ReactNode,
-	help?: ReactNode,
-	onChange: (value?: number) => void,
-	value?: number,
-	allowedTypes?: string[]
-};
-export function FileControl(props: FileControlProps) {
-	const {allowedTypes, help, label, onChange, value} = props;
-	const onSelect = useCallback((media: {id: number}) => {
-		if (media.id !== value) {
-			onChange(media.id);
-		}
-	}, [onChange, value]);
-
-	const attachment = useSuspenseSelect(select => value !== undefined ? select(coreStore).getMedia(value) : undefined, [value]);
-	const {baseControlProps, controlProps} = useBaseControlProps({label, help});
-	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
-		<MediaUploadCheck>
-			<MediaUpload
-				onSelect={onSelect}
-				value={value}
-				allowedTypes={allowedTypes}
-				render={useCallback(({open}) => {
-					if (!attachment?.id) {
-						return <div {...controlProps}><Button onClick={open} children={__('Select a File', 'plaudit')} __next40pxDefaultSize /></div>
-					}
-					return <div {...controlProps}>
-						<p>{__('Selected File', 'plaudit')}: <a href={attachment.source_url} target="_blank" rel="noopener noreferrer">{attachment.title.rendered}</a></p>
-						<div className="selected-file-control-buttons">
-							<Button onClick={open} variant="secondary" children="Replace File" __next40pxDefaultSize />
-							<Button onClick={() => onChange(undefined)} isDestructive children={__('Remove File', 'plaudit')} __next40pxDefaultSize />
-						</div>
-					</div>;
-				}, [attachment, onChange, controlProps])}
-			/>
-		</MediaUploadCheck>
-	</BaseControl>;
-}