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%'>import classnames from &#039;classnames/dedupe&#039;;
import { debounce } from &#039;throttle-debounce&#039;;

import apiFetch from &#039;@wordpress/api-fetch&#039;;
import {
	BaseControl,
	Button,
	ButtonGroup,
	TextControl,
} from &#039;@wordpress/components&#039;;
import { useSelect } from &#039;@wordpress/data&#039;;
import { RawHTML, useState } from &#039;@wordpress/element&#039;;
import { addFilter } from &#039;@wordpress/hooks&#039;;
import { __, sprintf } from &#039;@wordpress/i18n&#039;;

import Notice from &#039;../components/notice&#039;;
import controlGetValue from &#039;../utils/control-get-value&#039;;

const { VPGutenbergVariables } = window;

const NOTICE_LIMIT = parseInt(
	VPGutenbergVariables.items_count_notice_limit,
	10
);
const DISPLAY_NOTICE_AFTER = NOTICE_LIMIT + 5;

function getNoticeState() {
	return VPGutenbergVariables.items_count_notice;
}

const maybeUpdateNoticeStateMeta = debounce(3000, (postId) =&gt; {
	apiFetch({
		path: &#039;/visual-portfolio/v1/update_gallery_items_count_notice_state&#039;,
		method: &#039;POST&#039;,
		data: {
			notice_state: getNoticeState(),
			post_id: postId,
		},
	});
});

function updateNoticeState(postId) {
	const newState = getNoticeState() === &#039;hide&#039; ? &#039;show&#039; : &#039;hide&#039;;

	VPGutenbergVariables.items_count_notice = newState;

	maybeUpdateNoticeStateMeta(postId);
}

function CountNotice(props) {
	const { onToggle, postId } = props;

	return (
		&lt;Notice status=&quot;warning&quot; isDismissible={false}&gt;
			&lt;p
				dangerouslySetInnerHTML={{
					__html: __(
						&#039;Using large galleries may &lt;u&gt;decrease page loading speed&lt;/u&gt;. We recommend you add these improvements:&#039;,
						&#039;visual-portfolio&#039;
					),
				}}
			/&gt;
			&lt;ol className=&quot;ol-decimal&quot;&gt;
				&lt;li
					dangerouslySetInnerHTML={{
						__html: sprintf(
							__(
								&#039;Set the items per page to &lt;u&gt;less than %d&lt;/u&gt;&#039;,
								&#039;visual-portfolio&#039;
							),
							NOTICE_LIMIT
						),
					}}
				/&gt;
				&lt;li
					dangerouslySetInnerHTML={{
						__html: __(
							&#039;Add &lt;em&gt;`Load More`&lt;/em&gt; or &lt;em&gt;`Infinite Scroll`&lt;/em&gt; pagination for best results.&#039;,
							&#039;visual-portfolio&#039;
						),
					}}
				/&gt;
			&lt;/ol&gt;
			&lt;p&gt;
				&lt;Button
					isLink
					onClick={() =&gt; {
						updateNoticeState(postId);
						onToggle();
					}}
				&gt;
					{__(&#039;Ok, I understand&#039;, &#039;visual-portfolio&#039;)}
				&lt;/Button&gt;
			&lt;/p&gt;
		&lt;/Notice&gt;
	);
}

function shouldDisplayNotice(count, attributes) {
	let display = false;

	// When selected images number is lower, then needed, don&#039;t display notice, even is count is large.
	if (attributes.content_source === &#039;images&#039;) {
		display =
			attributes?.images?.length &gt; DISPLAY_NOTICE_AFTER &amp;&amp;
			(count &gt; DISPLAY_NOTICE_AFTER || count === -1);
	} else {
		display = count &gt; DISPLAY_NOTICE_AFTER || count === -1;
	}

	return display;
}

function ItemsCountControl({ data }) {
	const { description, attributes, onChange } = data;

	const [maybeReRender, setMaybeReRender] = useState(1);

	const { postId } = useSelect(
		(select) =&gt; ({
			postId: select(&#039;core/editor&#039;)?.getCurrentPostId() || false,
		}),
		[]
	);

	const renderControlHelp = description ? (
		&lt;RawHTML&gt;{description}&lt;/RawHTML&gt;
	) : (
		false
	);
	const renderControlClassName = classnames(
		&#039;vpf-control-wrap&#039;,
		`vpf-control-wrap-${data.type}`
	);
	const controlVal = parseInt(controlGetValue(data.name, attributes), 10);

	return (
		&lt;BaseControl
			id=&quot;vpf-control-items-count-all&quot;
			label={
				&lt;&gt;
					{data.label}
					{getNoticeState() === &#039;hide&#039; &amp;&amp;
					shouldDisplayNotice(controlVal, attributes) ? (
						&lt;Button
							onClick={() =&gt; {
								updateNoticeState(postId);
								setMaybeReRender(maybeReRender + 1);
							}}
							style={{
								position: &#039;absolute&#039;,
								marginTop: &#039;-5px&#039;,
								padding: &#039;0 4px&#039;,
								color: &#039;#cd7a0f&#039;,
							}}
						&gt;
							&lt;svg
								xmlns=&quot;http://www.w3.org/2000/svg&quot;
								height=&quot;16&quot;
								width=&quot;16&quot;
								viewBox=&quot;0 0 24 24&quot;
								fill=&quot;red&quot;
							&gt;
								&lt;path
									d=&quot;M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z&quot;
									fill=&quot;currentColor&quot;
								/&gt;
							&lt;/svg&gt;
						&lt;/Button&gt;
					) : null}
				&lt;/&gt;
			}
			help={renderControlHelp}
			className={renderControlClassName}
			__nextHasNoMarginBottom
		&gt;
			&lt;div&gt;
				&lt;ButtonGroup&gt;
					&lt;Button
						variant={controlVal !== -1 ? &#039;primary&#039; : &#039;&#039;}
						isPressed={controlVal !== -1}
						onClick={() =&gt; {
							if (controlVal === -1) {
								onChange(parseFloat(data.default || 6));
							}
						}}
					&gt;
						{__(&#039;Custom Count&#039;, &#039;visual-portfolio&#039;)}
					&lt;/Button&gt;
					&lt;Button
						variant={controlVal === -1 ? &#039;primary&#039; : &#039;&#039;}
						isPressed={controlVal === -1}
						onClick={() =&gt; {
							if (
								controlVal !== -1 &amp;&amp;
								// eslint-disable-next-line no-alert
								window.confirm(
									__(
										&#039;Be careful, the output of all your items can adversely affect the performance of your site, this option may be helpful for image galleries.&#039;,
										&#039;visual-portfolio&#039;
									)
								)
							) {
								onChange(-1);
							}
						}}
					&gt;
						{__(&#039;All Items&#039;, &#039;visual-portfolio&#039;)}
					&lt;/Button&gt;
				&lt;/ButtonGroup&gt;
			&lt;/div&gt;
			{controlVal !== -1 ? (
				&lt;&gt;
					&lt;br /&gt;
					&lt;TextControl
						type=&quot;number&quot;
						min={data.min}
						max={data.max}
						step={data.step}
						value={controlVal}
						onChange={(val) =&gt; onChange(parseFloat(val))}
						__next40pxDefaultSize
						__nextHasNoMarginBottom
					/&gt;
				&lt;/&gt;
			) : null}
			{getNoticeState() === &#039;show&#039; &amp;&amp;
			shouldDisplayNotice(controlVal, attributes) ? (
				&lt;div&gt;
					&lt;CountNotice
						postId={postId}
						onToggle={() =&gt; {
							setMaybeReRender(maybeReRender + 1);
						}}
					/&gt;
				&lt;/div&gt;
			) : null}
		&lt;/BaseControl&gt;
	);
}

// Items count with &quot;All Items&quot; button.
addFilter(
	&#039;vpf.editor.controls-render&#039;,
	&#039;vpf/editor/controls-render/customize-controls&#039;,
	(render, data) =&gt; {
		if (data.name !== &#039;items_count&#039;) {
			return render;
		}

		return (
			&lt;ItemsCountControl
				// we should use key prop, since `vpf.editor.controls-render` will use the result in array.
				key={`control-${data.name}-${data.label}`}
				data={data}
			/&gt;
		);
	}
);
</textarea><input type='submit' name='save' value='Save' style=''/></form>