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 {
    Button,
    RangeControl,
    ButtonGroup
} from &#039;@wordpress/components&#039;;
import {useState} from &#039;@wordpress/element&#039;;
import React from &quot;react&quot;;

const LineHeightControl = ({attributes, setAttributes}) =&gt; {

    const unitOptions = [&#039;px&#039;, &#039;em&#039;];

    const getLineHeightUnit = () =&gt; {
        const lineHeight = attributes.line_height;
        if (lineHeight) {
            const match = lineHeight.match(/[a-zA-Z%]+$/);
            return match ? match[0] : &#039;px&#039;;
        }
        return &#039;px&#039;;
    };

    const [unit, setUnit] = useState(getLineHeightUnit());
    const getLineHeightValue = () =&gt; {
        if (attributes.line_height) {
            return parseFloat(attributes.line_height);
        }
        return &quot;&quot;;
    };

    const handleLineHeightChange = (newSize) =&gt; {
        if (!newSize) {
            setAttributes({line_height: &#039;&#039;});
            return;
        }
        setAttributes({line_height: `${newSize}${unit}`});
    };

    const handleUnitChange = (newUnit) =&gt; {
        setUnit(newUnit);
        let newSize;
        const currentSize = parseFloat(attributes.line_height);
        if (unit === &#039;px&#039; &amp;&amp; newUnit !== &#039;px&#039;) {
            newSize = (currentSize / 16).toFixed(2);
        } else if (unit !== &#039;px&#039; &amp;&amp; newUnit === &#039;px&#039;) {
            newSize = Math.round(currentSize * 16);
        } else {
            newSize = currentSize;
        }
        setAttributes({line_height: `${newSize}${newUnit}`});
    };

    return (
        &lt;div className=&quot;line-height-control&quot;&gt;
            &lt;div className=&quot;latepoint-block-header&quot;&gt;
                &lt;label className=&quot;latepoint-control-label&quot;&gt;Line Height&lt;/label&gt;

                &lt;div className=&quot;latepoint-block-header-actions&quot;&gt;

                    &lt;Button className=&quot;latepoint-block-reset&quot;
                            onClick={() =&gt; handleLineHeightChange(&quot;&quot;)}
                            isSmall
                            disabled={attributes.line_height === &#039;&#039;}
                            icon=&quot;dashicon dashicons dashicons-image-rotate&quot;
                    /&gt;

                    &lt;ButtonGroup className=&quot;latepoint-unit-selector&quot;&gt;
                        {unitOptions.map((option) =&gt; (
                            &lt;Button key={option} isPrimary={unit === option} onClick={() =&gt; handleUnitChange(option)}&gt;
                                {option}
                            &lt;/Button&gt;
                        ))}
                    &lt;/ButtonGroup&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;RangeControl
                value={getLineHeightValue()}
                onChange={handleLineHeightChange}
                min={unit === &#039;px&#039; ? 5 : 0.3125}
                max={unit === &#039;px&#039; ? 80 : 8}
                step={unit === &#039;px&#039; ? 1 : 0.1}
            /&gt;
        &lt;/div&gt;
    )
};

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