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%'>/**
 * WordPress components that create the necessary UI elements for the block
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-components/
 */
import {TextControl, SelectControl, Panel, PanelBody, PanelRow} from &#039;@wordpress/components&#039;;
import {__} from &#039;@wordpress/i18n&#039;;

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import {
    useBlockProps,
    InspectorControls,
} from &#039;@wordpress/block-editor&#039;;
import styled from &quot;@emotion/styled&quot;;


/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @param {Object}   props               Properties passed to the function.
 * @param {Object}   props.attributes    Available block attributes.
 * @param {Function} props.setAttributes Function that updates individual attributes.
 *
 * @return {WPElement} Element to render.
 */
export default function Edit({attributes, setAttributes}) {
    const blockProps = useBlockProps();

    const range = (start, end) =&gt; {
        return Array.from({ length: end - start + 1 }, (_, index) =&gt; start + index);
    }

    const LatepointCalendarWrapper = styled.div`
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #ddd;
        border-bottom-color: #bbb;
        background-color: #fff;
        padding: 20px;
        max-width: 400px;
    `;

    const rangeTypes = [
        {label: &#039;Month&#039;, value: &#039;month&#039;},
        {label: &#039;Week&#039;, value: &#039;week&#039;},
    ];

    const LatepointCalendar = styled.div`
        border: 1px solid #ddd;
        border-right: none;
        background: #fbfbfb;
    `;

    const LatepointBlockCaption = styled.div`
        font-weight: 500;
        margin-bottom: 10px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    `;

    const LCRow = styled.div`
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    `;

    const LCHead = styled.div`
        border-bottom: 1px solid #ddd;
        background: #f3f3f3;
    `;

    const LCCell = styled.div`
        padding: 10px;
        text-align: center;
        border-right: 1px solid #ddd;
    `;
    const LCDate = styled.div`
        padding: 5px;
        border-radius: 4px;
        background-color: #e1e1e1;
    `;

    const LCText = styled.div`
        padding: 3px;
        border-radius: 4px;
        background-color: #ecebeb;
    `;

    const weekCells = (type) =&gt; {
        return (
            &lt;&gt;
                {range(1, 7).map(() =&gt; (
                    &lt;LCCell&gt;{type === &#039;date&#039; ? &lt;LCDate&gt;&lt;/LCDate&gt; : &lt;LCText&gt;&lt;/LCText&gt;}&lt;/LCCell&gt;
                ))}
            &lt;/&gt;
        )
    };


    return (
        &lt;div {...blockProps}&gt;
            &lt;InspectorControls&gt;
                &lt;Panel&gt;
                    &lt;PanelBody title=&quot;Latepoint Calendar Settings&quot;&gt;
                        &lt;TextControl
                            label=&quot;Caption&quot;
                            value={attributes.caption || &#039;&#039;}
                            onChange={(value) =&gt; setAttributes({caption: value})}
                        /&gt;
                        &lt;TextControl
                            label={__(&#039;Date&#039;, &#039;latepoint&#039;)}
                            value={attributes.date || &#039;&#039;}
                            placeholder=&quot;YYYY-MM-DD&quot;
                            onChange={(value) =&gt; setAttributes({date: value})}
                        /&gt;
                        &lt;TextControl
                            label=&quot;Show Agents&quot;
                            placeholder=&quot;Comma separated agent IDs&quot;
                            value={attributes.show_agents || &#039;&#039;}
                            onChange={(value) =&gt; setAttributes({show_agents: value})}
                        /&gt;
                        &lt;TextControl
                            label=&quot;Show Services&quot;
                            placeholder=&quot;Comma separated service IDs&quot;
                            value={attributes.show_services || &#039;&#039;}
                            onChange={(value) =&gt; setAttributes({show_services: value})}
                        /&gt;
                        &lt;TextControl
                            label=&quot;Show Locations&quot;
                            placeholder=&quot;Comma separated location IDs&quot;
                            value={attributes.show_locations || &#039;&#039;}
                            onChange={(value) =&gt; setAttributes({show_locations: value})}
                        /&gt;

                        &lt;SelectControl
                            label={__(&#039;View&#039;, &#039;latepoint&#039;)}
                            value={attributes.view || &#039;month&#039;}
                            onChange={(value) =&gt; setAttributes({view: value})}
                            options={rangeTypes}
                        /&gt;
                    &lt;/PanelBody&gt;
                &lt;/Panel&gt;
            &lt;/InspectorControls&gt;
            &lt;LatepointCalendarWrapper&gt;
                &lt;LatepointBlockCaption&gt;{attributes.caption}&lt;/LatepointBlockCaption&gt;
                &lt;LatepointCalendar&gt;
                    &lt;LCHead&gt;
                        &lt;LCRow&gt;
                            { weekCells(&#039;date&#039;) }
                        &lt;/LCRow&gt;
                    &lt;/LCHead&gt;

                    { range(1, 4).map(() =&gt; (
                        &lt;LCRow&gt;
                            { weekCells(&#039;text&#039;) }
                        &lt;/LCRow&gt;
                    ))}

                &lt;/LatepointCalendar&gt;

            &lt;/LatepointCalendarWrapper&gt;

        &lt;/div&gt;
    );
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>