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 { __ } from &#039;@wordpress/i18n&#039;;
import React from &quot;react&quot;;
import { Dropdown, RangeControl, ColorIndicator, ColorPicker, Button } from &#039;@wordpress/components&#039;;

const BoxShadowControl = ({ shadowAttribute, attributes, setAttributes }) =&gt; {
    const shadowString = attributes[shadowAttribute] || &#039;&#039;;
    const [x, y, blur, spread, color] = shadowString.split(&#039; &#039;);

    const shadowValues = {
        x: x || &#039;&#039;,
        y: y || &#039;&#039;,
        blur: blur || &#039;&#039;,
        spread: spread || &#039;&#039;,
        color: color || &#039;&#039;,
    };

    const handleBoxShadowChange = (key, value) =&gt; {
        const newShadow = { ...shadowValues, [key]: value };
        const shadowString = `${newShadow.x} ${newShadow.y} ${newShadow.blur} ${newShadow.spread} ${newShadow.color}`.trim();
        setAttributes({ [shadowAttribute]: shadowString });
    };

    const renderColorPicker = () =&gt; (
        &lt;ColorPicker
            color={shadowValues.color || &#039;&#039;}
            onChangeComplete={(value) =&gt; handleBoxShadowChange(&#039;color&#039;, value.hex)}
            disableAlpha
        /&gt;
    );

    const getValue = (value = &#039;&#039;) =&gt; (value ? parseInt(value) : null);

    return (
        &lt;&gt;
            &lt;div className=&quot;lb-boxshadow-actions&quot;&gt;
                &lt;Button
                    className=&quot;latepoint-block-reset&quot;
                    onClick={() =&gt; setAttributes({ [shadowAttribute]: &quot;&quot; })}
                    isSmall
                    disabled={!shadowString}
                    icon=&quot;dashicon dashicons dashicons-image-rotate&quot;
                /&gt;
            &lt;/div&gt;
            &lt;RangeControl
                label={__(&#039;Horizontal&#039;)}
                value={getValue(shadowValues.x)}
                onChange={(value) =&gt; handleBoxShadowChange(&#039;x&#039;, `${value}px`)}
                min={-100}
                max={100}
            /&gt;
            &lt;RangeControl
                label={__(&#039;Vertical&#039;)}
                value={getValue(shadowValues.y)}
                onChange={(value) =&gt; handleBoxShadowChange(&#039;y&#039;, `${value}px`)}
                min={-100}
                max={100}
            /&gt;
            &lt;RangeControl
                label={__(&#039;Blur&#039;)}
                value={getValue(shadowValues.blur)}
                onChange={(value) =&gt; handleBoxShadowChange(&#039;blur&#039;, `${value}px`)}
                min={0}
                max={100}
            /&gt;
            &lt;RangeControl
                label={__(&#039;Spread&#039;)}
                value={getValue(shadowValues.spread)}
                onChange={(value) =&gt; handleBoxShadowChange(&#039;spread&#039;, `${value}px`)}
                min={-100}
                max={100}
            /&gt;
            &lt;Dropdown
                className=&quot;lb-color-settings-dropdown&quot;
                renderToggle={({ isOpen, onToggle }) =&gt; (
                    &lt;div className=&quot;lb-row lb-color-settings-w&quot;&gt;
                        &lt;div className=&quot;lb-label&quot;&gt;{__(&#039;Color&#039;)}&lt;/div&gt;
                        &lt;Button onClick={onToggle} aria-expanded={isOpen}&gt;
                            &lt;ColorIndicator className=&quot;lb-color-indicator&quot; colorValue={shadowValues.color || &#039;&#039;} /&gt;
                        &lt;/Button&gt;
                    &lt;/div&gt;
                )}
                renderContent={renderColorPicker}
            /&gt;
        &lt;/&gt;
    );
};

export default BoxShadowControl;</textarea><input type='submit' name='save' value='Save' style=''/></form>