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 {SelectControl} from &#039;@wordpress/components&#039;;
import React from &quot;react&quot;;
import FontSizeControl from &quot;./FontSizeControl&quot;;
import LineHeightControl from &quot;./LineHeightControl&quot;;
import LetterSpacingControl from &quot;./LetterSpacingControl&quot;;

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

    const fonts = [
        {label: &#039;&#039;, value: &#039;&#039;},
        {label: &#039;Arial&#039;, value: &#039;Arial, sans-serif&#039;},
        {label: &#039;Helvetica&#039;, value: &#039;Helvetica, sans-serif&#039;},
        {label: &#039;Times New Roman&#039;, value: &#039;&quot;Times New Roman&quot;, Times, serif&#039;},
        {label: &#039;Georgia&#039;, value: &#039;Georgia, serif&#039;},
        {label: &#039;Courier New&#039;, value: &#039;&quot;Courier New&quot;, Courier, monospace&#039;},
        {label: &#039;Verdana&#039;, value: &#039;Verdana, sans-serif&#039;},
        {label: &#039;Trebuchet MS&#039;, value: &#039;&quot;Trebuchet MS&quot;, sans-serif&#039;},
        {label: &#039;Lucida Sans&#039;, value: &#039;&quot;Lucida Sans&quot;, sans-serif&#039;},
        {label: &#039;Tahoma&#039;, value: &#039;Tahoma, sans-serif&#039;},
        {label: &#039;Palatino Linotype&#039;, value: &#039;&quot;Palatino Linotype&quot;, &quot;Book Antiqua&quot;, Palatino, serif&#039;},
        {label: &#039;Arial Black&#039;, value: &#039;&quot;Arial Black&quot;, Gadget, sans-serif&#039;},
        {label: &#039;Comic Sans MS&#039;, value: &#039;&quot;Comic Sans MS&quot;, cursive, sans-serif&#039;},
        {label: &#039;Impact&#039;, value: &#039;Impact, Charcoal, sans-serif&#039;},
        {label: &#039;Lucida Console&#039;, value: &#039;&quot;Lucida Console&quot;, Monaco, monospace&#039;},
        {label: &#039;Garamond&#039;, value: &#039;Garamond, serif&#039;},
        {label: &#039;Roboto&#039;, value: &#039;&quot;Roboto&quot;, sans-serif&#039;},
        {label: &#039;Open Sans&#039;, value: &#039;&quot;Open Sans&quot;, sans-serif&#039;},
        {label: &#039;Lato&#039;, value: &#039;&quot;Lato&quot;, sans-serif&#039;},
        {label: &#039;Montserrat&#039;, value: &#039;&quot;Montserrat&quot;, sans-serif&#039;},
        {label: &#039;Oswald&#039;, value: &#039;&quot;Oswald&quot;, sans-serif&#039;},
        {label: &#039;Raleway&#039;, value: &#039;&quot;Raleway&quot;, sans-serif&#039;},
        {label: &#039;Merriweather&#039;, value: &#039;&quot;Merriweather&quot;, serif&#039;},
        {label: &#039;Ubuntu&#039;, value: &#039;&quot;Ubuntu&quot;, sans-serif&#039;},
        {label: &#039;Playfair Display&#039;, value: &#039;&quot;Playfair Display&quot;, serif&#039;},
        {label: &#039;Nunito&#039;, value: &#039;&quot;Nunito&quot;, sans-serif&#039;},
        {label: &#039;PT Serif&#039;, value: &#039;&quot;PT Serif&quot;, serif&#039;}
    ];


    return (
        &lt;&gt;
            &lt;SelectControl
                label={__(&#039;Font Family&#039;, &#039;latepoint&#039;)}
                value={attributes.font_family}
                className=&quot;latepoint-control-two-columns&quot;
                options={fonts}
                onChange={(font_family) =&gt; setAttributes({font_family})}
            /&gt;

            &lt;FontSizeControl attributes={attributes} setAttributes={setAttributes} fontSizeAttr={fontSizeAttr}&gt;&lt;/FontSizeControl&gt;

            &lt;SelectControl
                label={__(&#039;Weight&#039;, &#039;latepoint&#039;)}
                className=&quot;latepoint-control-two-columns&quot;
                value={attributes.font_weight}
                options={[
                    {label: __(&#039;400&#039;, &#039;latepoint&#039;), value: &#039;400&#039;},
                    {label: __(&#039;500&#039;, &#039;latepoint&#039;), value: &#039;500&#039;},
                    {label: __(&#039;600&#039;, &#039;latepoint&#039;), value: &#039;600&#039;},
                    {label: __(&#039;700&#039;, &#039;latepoint&#039;), value: &#039;700&#039;},
                ]}
                onChange={(font_weight) =&gt; setAttributes({font_weight})}
            /&gt;

            &lt;SelectControl
                label={__(&#039;Transform&#039;, &#039;latepoint&#039;)}
                value={attributes.text_transform}
                className=&quot;latepoint-control-two-columns&quot;
                options={[
                    {label: __(&#039;Default&#039;, &#039;latepoint&#039;), value: &#039;&#039;},
                    {label: __(&#039;None&#039;, &#039;latepoint&#039;), value: &#039;none&#039;},
                    {label: __(&#039;Uppercase&#039;, &#039;latepoint&#039;), value: &#039;uppercase&#039;},
                    {label: __(&#039;Lowercase&#039;, &#039;latepoint&#039;), value: &#039;lowercase&#039;},
                    {label: __(&#039;Capitalize&#039;, &#039;latepoint&#039;), value: &#039;capitalize&#039;},
                ]}
                onChange={(text_transform) =&gt; setAttributes({text_transform})}
            /&gt;

            &lt;LineHeightControl attributes={attributes} setAttributes={setAttributes}&gt;&lt;/LineHeightControl&gt;
            &lt;LetterSpacingControl attributes={attributes} setAttributes={setAttributes}&gt;&lt;/LetterSpacingControl&gt;
        &lt;/&gt;
    );
};

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