added predefined mime types list and other minor ui improvements

2023-01-24 20:58:24 +02:00
parent e5477961ad
commit ecfae2e5c9
53 changed files with 554 additions and 343 deletions
@@ -10,6 +10,7 @@
    import SortHeader from "@/components/base/SortHeader.svelte";
    import FormattedDate from "@/components/base/FormattedDate.svelte";
    import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
+    import CopyIcon from "@/components/base/CopyIcon.svelte";
    import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
    import AdminUpsertPanel from "@/components/admins/AdminUpsertPanel.svelte";

@@ -148,7 +149,10 @@
                        </td>

                        <td class="col-type-text col-field-id">
-                            <span class="label">{admin.id}</span>
+                            <div class="label">
+                                <CopyIcon value={admin.id} />
+                                <span class="txt">{admin.id}</span>
+                            </div>
                            {#if admin.id === $loggedAdmin.id}
                                <span class="label label-warning m-l-5">You</span>
                            {/if}
@@ -0,0 +1,41 @@
+<script>
+    import { onMount } from "svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import tooltip from "@/actions/tooltip";
+
+    export let value = "";
+    export let idleClasses = "ri-file-copy-line txt-sm link-hint";
+    export let successClasses = "ri-check-line txt-sm txt-success";
+    export let successDuration = 500; // ms
+
+    let copyTimeout;
+
+    function copy() {
+        if (!value) {
+            return;
+        }
+
+        CommonHelper.copyToClipboard(value);
+
+        clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+            clearTimeout(copyTimeout);
+            copyTimeout = null;
+        }, successDuration);
+    }
+
+    onMount(() => {
+        return () => {
+            if (copyTimeout) {
+                clearTimeout(copyTimeout);
+            }
+        };
+    });
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<i
+    class={copyTimeout ? successClasses : idleClasses}
+    use:tooltip={!copyTimeout ? "Copy" : ""}
+    on:click|stopPropagation={copy}
+/>
@@ -0,0 +1,6 @@
+<script>
+    export let item = {}; // {ext, mimeType}
+</script>
+
+<span class="txt">{item.ext || "N/A"}</span>
+<small class="txt-hint">{item.mimeType}</small>
@@ -93,13 +93,13 @@
            dispatch("show");
            document.body.classList.add("overlay-active");
        } else {
-            clearTimeout(contentScrollThrottle);
-            oldFocusedElem?.focus();
-            dispatch("hide");
-
            if (getHolder().querySelectorAll(".overlay-panel-container.active").length <= 1) {
                document.body.classList.remove("overlay-active");
            }
+
+            clearTimeout(contentScrollThrottle);
+            oldFocusedElem?.focus();
+            dispatch("hide");
        }

        await tick();
@@ -11,9 +11,9 @@
    export let items = [];
    export let multiple = false;
    export let disabled = false;
-    export let closable = true;
    export let selected = multiple ? [] : undefined;
    export let toggle = multiple; // toggle option on click
+    export let closable = true; // close the dropdown on option select/deselect
    export let labelComponent = undefined; // custom component to use for each selected option label
    export let labelComponentProps = {}; // props to pass to the custom option component
    export let optionComponent = undefined; // custom component to use for each dropdown option item
@@ -20,7 +20,6 @@
    import JsonOptions from "@/components/collections/schema/JsonOptions.svelte";
    import FileOptions from "@/components/collections/schema/FileOptions.svelte";
    import RelationOptions from "@/components/collections/schema/RelationOptions.svelte";
-    import UserOptions from "@/components/collections/schema/UserOptions.svelte";

    const dispatch = createEventDispatcher();

@@ -275,8 +274,6 @@
                    <FileOptions {key} bind:options={field.options} />
                {:else if field.type === "relation"}
                    <RelationOptions {key} bind:options={field.options} />
-                {:else if field.type === "user"}
-                    <UserOptions {key} bind:options={field.options} />
                {/if}
            </div>

@@ -3,11 +3,16 @@
    import tooltip from "@/actions/tooltip";
    import Field from "@/components/base/Field.svelte";
    import Toggler from "@/components/base/Toggler.svelte";
+    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
+    import MimeTypeSelectOption from "@/components/base/MimeTypeSelectOption.svelte";
    import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
+    import baseMimeTypesList from "@/mimes.js";

    export let key = "";
    export let options = {};

+    let mimeTypesList = baseMimeTypesList.slice();
+
    $: if (CommonHelper.isEmpty(options)) {
        // load defaults
        options = {
@@ -16,6 +21,30 @@
            thumbs: [],
            mimeTypes: [],
        };
+    } else {
+        appendMissingMimeTypes();
+    }
+
+    // append any previously set custom mime types to the predefined
+    // list for backward compatibility
+    function appendMissingMimeTypes() {
+        if (CommonHelper.isEmpty(options.mimeTypes)) {
+            return;
+        }
+
+        const missing = [];
+
+        for (const v of options.mimeTypes) {
+            if (!!mimeTypesList.find((item) => item.mimeType === v)) {
+                continue; // exist
+            }
+
+            missing.push({ mimeType: v });
+        }
+
+        if (missing.length) {
+            mimeTypesList = mimeTypesList.concat(missing);
+        }
    }
 </script>

@@ -37,7 +66,7 @@
    <div class="col-sm-12">
        <Field class="form-field" name="schema.{key}.options.mimeTypes" let:uniqueId>
            <label for={uniqueId}>
-                <span class="txt">Mime types</span>
+                <span class="txt">Allowed mime types</span>
                <i
                    class="ri-information-line link-hint"
                    use:tooltip={{
@@ -46,23 +75,28 @@
                    }}
                />
            </label>
-            <MultipleValueInput
+            <ObjectSelect
                id={uniqueId}
-                placeholder="eg. image/png, application/pdf..."
-                bind:value={options.mimeTypes}
+                multiple
+                searchable
+                closable={false}
+                selectionKey="mimeType"
+                selectPlaceholder="No restriction"
+                items={mimeTypesList}
+                labelComponent={MimeTypeSelectOption}
+                optionComponent={MimeTypeSelectOption}
+                bind:keyOfSelected={options.mimeTypes}
            />
            <div class="help-block">
-                <span class="txt">Use comma as separator.</span>
                <button type="button" class="inline-flex flex-gap-0">
                    <span class="txt link-primary">Choose presets</span>
                    <i class="ri-arrow-drop-down-fill" />
-                    <Toggler class="dropdown dropdown-sm dropdown-nowrap">
+                    <Toggler class="dropdown dropdown-sm dropdown-nowrap dropdown-left">
                        <button
                            type="button"
                            class="dropdown-item closable"
                            on:click={() => {
                                options.mimeTypes = [
-                                    "image/jpg",
                                    "image/jpeg",
                                    "image/png",
                                    "image/svg+xml",
@@ -115,15 +149,6 @@
                        >
                            <span class="txt">Archives (zip, 7zip, rar)</span>
                        </button>
-                        <a
-                            href="https://github.com/gabriel-vasile/mimetype/blob/master/supported_mimes.md"
-                            class="btn btn-sm btn-hint closable"
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            on:click|stopPropagation
-                        >
-                            List with all supported mimetypes
-                        </a>
                    </Toggler>
                </button>
            </div>
@@ -1,36 +0,0 @@
-<script>
-    import CommonHelper from "@/utils/CommonHelper";
-    import Field from "@/components/base/Field.svelte";
-    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
-
-    const defaultOptions = [
-        { label: "False", value: false },
-        { label: "True", value: true },
-    ];
-
-    export let key = "";
-    export let options = {};
-
-    // load defaults
-    $: if (CommonHelper.isEmpty(options)) {
-        options = {
-            maxSelect: 1,
-            cascadeDelete: false,
-        };
-    }
-</script>
-
-<div class="grid">
-    <div class="col-sm-6">
-        <Field class="form-field required" name="schema.{key}.options.maxSelect" let:uniqueId>
-            <label for={uniqueId}>Max select</label>
-            <input type="number" id={uniqueId} step="1" min="1" required bind:value={options.maxSelect} />
-        </Field>
-    </div>
-    <div class="col-sm-6">
-        <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
-            <label for={uniqueId}>Delete record on user delete</label>
-            <ObjectSelect id={uniqueId} items={defaultOptions} bind:keyOfSelected={options.cascadeDelete} />
-        </Field>
-    </div>
-</div>
@@ -42,6 +42,8 @@
    let initialFormHash = "";
    let activeTab = TAB_FORM;

+    $: hasEditorField = !!collection?.schema?.find((f) => f.type === "editor");
+
    $: hasFileChanges =
        CommonHelper.hasNonEmptyProps(uploadedFilesMap) ||
        CommonHelper.hasNonEmptyProps(deletedFileIndexesMap);
@@ -223,7 +225,11 @@

 <OverlayPanel
    bind:this={recordPanel}
-    class="overlay-panel-lg record-panel {collection?.isAuth && !record.isNew ? 'colored-header' : ''}"
+    class="
+        record-panel
+        {hasEditorField ? 'overlay-panel-xl' : 'overlay-panel-lg'}
+        {collection?.isAuth && !record.isNew ? 'colored-header' : ''}
+    "
    beforeHide={() => {
        if (hasChanges && confirmClose) {
            confirm("You have unsaved changes. Do you really want to close the panel?", () => {
@@ -9,6 +9,7 @@
    import SortHeader from "@/components/base/SortHeader.svelte";
    import Toggler from "@/components/base/Toggler.svelte";
    import Field from "@/components/base/Field.svelte";
+    import CopyIcon from "@/components/base/CopyIcon.svelte";
    import FormattedDate from "@/components/base/FormattedDate.svelte";
    import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
    import RecordFieldCell from "@/components/records/RecordFieldCell.svelte";
@@ -379,7 +380,10 @@
                    {#if !hiddenColumns.includes("@id")}
                        <td class="col-type-text col-field-id">
                            <div class="flex flex-gap-5">
-                                <span class="label">{record.id}</span>
+                                <div class="label">
+                                    <CopyIcon value={record.id} />
+                                    <div class="txt">{record.id}</div>
+                                </div>

                                {#if collection.isAuth}
                                    {#if record.verified}
@@ -27,6 +27,7 @@
        id={uniqueId}
        toggle={!field.required || isMultiple}
        multiple={isMultiple}
+        closable={!isMultiple}
        items={field.options?.values}
        searchable={field.options?.values > 5}
        bind:selected={value}
@@ -43,12 +43,6 @@
            <span class="txt">{title}</span>
        </div>

-        {#if config.enabled}
-            <span class="label label-success">Enabled</span>
-        {:else}
-            <span class="label label-hint">Disabled</span>
-        {/if}
-
        <div class="flex-fill" />

        {#if hasErrors}
@@ -58,6 +52,12 @@
                use:tooltip={{ text: "Has errors", position: "left" }}
            />
        {/if}
+
+        {#if config.enabled}
+            <span class="label label-success">Enabled</span>
+        {:else}
+            <span class="label label-hint">Disabled</span>
+        {/if}
    </svelte:fragment>

    <Field class="form-field form-field-toggle m-b-0" name="{key}.enabled" let:uniqueId>
@@ -65,28 +65,26 @@
        <label for={uniqueId}>Enable</label>
    </Field>

-    {#if config.enabled}
-        <div class="grid" transition:slide|local={{ duration: 200 }}>
-            <div class="col-12 spacing" />
-            <div class="col-lg-6">
-                <Field class="form-field required" name="{key}.clientId" let:uniqueId>
-                    <label for={uniqueId}>Client ID</label>
-                    <input type="text" id={uniqueId} bind:value={config.clientId} required />
-                </Field>
-            </div>
-
-            <div class="col-lg-6">
-                <Field class="form-field required" name="{key}.clientSecret" let:uniqueId>
-                    <label for={uniqueId}>Client Secret</label>
-                    <RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required />
-                </Field>
-            </div>
-
-            {#if optionsComponent}
-                <div class="col-lg-12">
-                    <svelte:component this={optionsComponent} {key} bind:config />
-                </div>
-            {/if}
+    <div class="grid">
+        <div class="col-12 spacing" />
+        <div class="col-lg-6">
+            <Field class="form-field required" name="{key}.clientId" let:uniqueId>
+                <label for={uniqueId}>Client ID</label>
+                <input type="text" id={uniqueId} bind:value={config.clientId} required />
+            </Field>
        </div>
-    {/if}
+
+        <div class="col-lg-6">
+            <Field class="form-field required" name="{key}.clientSecret" let:uniqueId>
+                <label for={uniqueId}>Client Secret</label>
+                <RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required />
+            </Field>
+        </div>
+
+        {#if optionsComponent}
+            <div class="col-lg-12">
+                <svelte:component this={optionsComponent} {key} bind:config />
+            </div>
+        {/if}
+    </div>
 </Accordion>
@@ -86,7 +86,7 @@

    <div class="wrapper">
        <form class="panel" autocomplete="off" on:submit|preventDefault={save}>
-            <h6 class="m-b-base">Manage the allowed users sign-in/sign-up methods.</h6>
+            <h6 class="m-b-base">Manage the allowed users OAuth2 sign-in/sign-up methods.</h6>

            {#if isLoading}
                <div class="loader" />
@@ -122,7 +122,6 @@
                        class="btn btn-expanded"
                        class:btn-loading={isSaving}
                        disabled={!hasChanges || isSaving}
-                        on:click={() => save()}
                    >
                        <span class="txt">Save changes</span>
                    </button>
@@ -10,13 +10,7 @@
    <div class="col-lg-12">
        <Field class="form-field required" name="{key}.authUrl" let:uniqueId>
            <label for={uniqueId}>Auth URL</label>
-            <input
-                type="url"
-                id={uniqueId}
-                required
-                placeholder="https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize"
-                bind:value={config.authUrl}
-            />
+            <input type="url" id={uniqueId} required bind:value={config.authUrl} />
            <div class="help-block">
                Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize`}
            </div>
@@ -25,13 +19,7 @@
    <div class="col-lg-12">
        <Field class="form-field required" name="{key}.tokenUrl" let:uniqueId>
            <label for={uniqueId}>Token URL</label>
-            <input
-                type="text"
-                id={uniqueId}
-                required
-                placeholder="https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token"
-                bind:value={config.tokenUrl}
-            />
+            <input type="text" id={uniqueId} required bind:value={config.tokenUrl} />
            <div class="help-block">
                Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token`}
            </div>
@@ -0,0 +1,178 @@
+// List of supported mime types and their extensions.
+//
+// https://github.com/gabriel-vasile/mimetype/blob/master/supported_mimes.md
+export default [
+    {ext: ".xpm", mimeType: "image/x-xpixmap"},
+    {ext: ".7z", mimeType: "application/x-7z-compressed"},
+    {ext: ".zip", mimeType: "application/zip"},
+    {ext: ".xlsx", mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},
+    {ext: ".docx", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"},
+    {ext: ".pptx", mimeType: "application/vnd.openxmlformats-officedocument.presentationml.presentation"},
+    {ext: ".epub", mimeType: "application/epub+zip"},
+    {ext: ".jar", mimeType: "application/jar"},
+    {ext: ".odt", mimeType: "application/vnd.oasis.opendocument.text"},
+    {ext: ".ott", mimeType: "application/vnd.oasis.opendocument.text-template"},
+    {ext: ".ods", mimeType: "application/vnd.oasis.opendocument.spreadsheet"},
+    {ext: ".ots", mimeType: "application/vnd.oasis.opendocument.spreadsheet-template"},
+    {ext: ".odp", mimeType: "application/vnd.oasis.opendocument.presentation"},
+    {ext: ".otp", mimeType: "application/vnd.oasis.opendocument.presentation-template"},
+    {ext: ".odg", mimeType: "application/vnd.oasis.opendocument.graphics"},
+    {ext: ".otg", mimeType: "application/vnd.oasis.opendocument.graphics-template"},
+    {ext: ".odf", mimeType: "application/vnd.oasis.opendocument.formula"},
+    {ext: ".odc", mimeType: "application/vnd.oasis.opendocument.chart"},
+    {ext: ".sxc", mimeType: "application/vnd.sun.xml.calc"},
+    {ext: ".pdf", mimeType: "application/pdf"},
+    {ext: ".fdf", mimeType: "application/vnd.fdf"},
+    {ext: "N/A", mimeType: "application/x-ole-storage"},
+    {ext: ".msi", mimeType: "application/x-ms-installer"},
+    {ext: ".aaf", mimeType: "application/octet-stream"},
+    {ext: ".msg", mimeType: "application/vnd.ms-outlook"},
+    {ext: ".xls", mimeType: "application/vnd.ms-excel"},
+    {ext: ".pub", mimeType: "application/vnd.ms-publisher"},
+    {ext: ".ppt", mimeType: "application/vnd.ms-powerpoint"},
+    {ext: ".doc", mimeType: "application/msword"},
+    {ext: ".ps", mimeType: "application/postscript"},
+    {ext: ".psd", mimeType: "image/vnd.adobe.photoshop"},
+    {ext: ".p7s", mimeType: "application/pkcs7-signature"},
+    {ext: ".ogg", mimeType: "application/ogg"},
+    {ext: ".oga", mimeType: "audio/ogg"},
+    {ext: ".ogv", mimeType: "video/ogg"},
+    {ext: ".png", mimeType: "image/png"},
+    {ext: ".png", mimeType: "image/vnd.mozilla.apng"},
+    {ext: ".jpg", mimeType: "image/jpeg"},
+    {ext: ".jxl", mimeType: "image/jxl"},
+    {ext: ".jp2", mimeType: "image/jp2"},
+    {ext: ".jpf", mimeType: "image/jpx"},
+    {ext: ".jpm", mimeType: "image/jpm"},
+    {ext: ".jxs", mimeType: "image/jxs"},
+    {ext: ".gif", mimeType: "image/gif"},
+    {ext: ".webp", mimeType: "image/webp"},
+    {ext: ".exe", mimeType: "application/vnd.microsoft.portable-executable"},
+    {ext: "N/A", mimeType: "application/x-elf"},
+    {ext: "N/A", mimeType: "application/x-object"},
+    {ext: "N/A", mimeType: "application/x-executable"},
+    {ext: ".so", mimeType: "application/x-sharedlib"},
+    {ext: "N/A", mimeType: "application/x-coredump"},
+    {ext: ".a", mimeType: "application/x-archive"},
+    {ext: ".deb", mimeType: "application/vnd.debian.binary-package"},
+    {ext: ".tar", mimeType: "application/x-tar"},
+    {ext: ".xar", mimeType: "application/x-xar"},
+    {ext: ".bz2", mimeType: "application/x-bzip2"},
+    {ext: ".fits", mimeType: "application/fits"},
+    {ext: ".tiff", mimeType: "image/tiff"},
+    {ext: ".bmp", mimeType: "image/bmp"},
+    {ext: ".ico", mimeType: "image/x-icon"},
+    {ext: ".mp3", mimeType: "audio/mpeg"},
+    {ext: ".flac", mimeType: "audio/flac"},
+    {ext: ".midi", mimeType: "audio/midi"},
+    {ext: ".ape", mimeType: "audio/ape"},
+    {ext: ".mpc", mimeType: "audio/musepack"},
+    {ext: ".amr", mimeType: "audio/amr"},
+    {ext: ".wav", mimeType: "audio/wav"},
+    {ext: ".aiff", mimeType: "audio/aiff"},
+    {ext: ".au", mimeType: "audio/basic"},
+    {ext: ".mpeg", mimeType: "video/mpeg"},
+    {ext: ".mov", mimeType: "video/quicktime"},
+    {ext: ".mqv", mimeType: "video/quicktime"},
+    {ext: ".mp4", mimeType: "video/mp4"},
+    {ext: ".webm", mimeType: "video/webm"},
+    {ext: ".3gp", mimeType: "video/3gpp"},
+    {ext: ".3g2", mimeType: "video/3gpp2"},
+    {ext: ".avi", mimeType: "video/x-msvideo"},
+    {ext: ".flv", mimeType: "video/x-flv"},
+    {ext: ".mkv", mimeType: "video/x-matroska"},
+    {ext: ".asf", mimeType: "video/x-ms-asf"},
+    {ext: ".aac", mimeType: "audio/aac"},
+    {ext: ".voc", mimeType: "audio/x-unknown"},
+    {ext: ".mp4", mimeType: "audio/mp4"},
+    {ext: ".m4a", mimeType: "audio/x-m4a"},
+    {ext: ".m3u", mimeType: "application/vnd.apple.mpegurl"},
+    {ext: ".m4v", mimeType: "video/x-m4v"},
+    {ext: ".rmvb", mimeType: "application/vnd.rn-realmedia-vbr"},
+    {ext: ".gz", mimeType: "application/gzip"},
+    {ext: ".class", mimeType: "application/x-java-applet"},
+    {ext: ".swf", mimeType: "application/x-shockwave-flash"},
+    {ext: ".crx", mimeType: "application/x-chrome-extension"},
+    {ext: ".ttf", mimeType: "font/ttf"},
+    {ext: ".woff", mimeType: "font/woff"},
+    {ext: ".woff2", mimeType: "font/woff2"},
+    {ext: ".otf", mimeType: "font/otf"},
+    {ext: ".ttc", mimeType: "font/collection"},
+    {ext: ".eot", mimeType: "application/vnd.ms-fontobject"},
+    {ext: ".wasm", mimeType: "application/wasm"},
+    {ext: ".shx", mimeType: "application/vnd.shx"},
+    {ext: ".shp", mimeType: "application/vnd.shp"},
+    {ext: ".dbf", mimeType: "application/x-dbf"},
+    {ext: ".dcm", mimeType: "application/dicom"},
+    {ext: ".rar", mimeType: "application/x-rar-compressed"},
+    {ext: ".djvu", mimeType: "image/vnd.djvu"},
+    {ext: ".mobi", mimeType: "application/x-mobipocket-ebook"},
+    {ext: ".lit", mimeType: "application/x-ms-reader"},
+    {ext: ".bpg", mimeType: "image/bpg"},
+    {ext: ".sqlite", mimeType: "application/vnd.sqlite3"},
+    {ext: ".dwg", mimeType: "image/vnd.dwg"},
+    {ext: ".nes", mimeType: "application/vnd.nintendo.snes.rom"},
+    {ext: ".lnk", mimeType: "application/x-ms-shortcut"},
+    {ext: ".macho", mimeType: "application/x-mach-binary"},
+    {ext: ".qcp", mimeType: "audio/qcelp"},
+    {ext: ".icns", mimeType: "image/x-icns"},
+    {ext: ".heic", mimeType: "image/heic"},
+    {ext: ".heic", mimeType: "image/heic-sequence"},
+    {ext: ".heif", mimeType: "image/heif"},
+    {ext: ".heif", mimeType: "image/heif-sequence"},
+    {ext: ".hdr", mimeType: "image/vnd.radiance"},
+    {ext: ".mrc", mimeType: "application/marc"},
+    {ext: ".mdb", mimeType: "application/x-msaccess"},
+    {ext: ".accdb", mimeType: "application/x-msaccess"},
+    {ext: ".zst", mimeType: "application/zstd"},
+    {ext: ".cab", mimeType: "application/vnd.ms-cab-compressed"},
+    {ext: ".rpm", mimeType: "application/x-rpm"},
+    {ext: ".xz", mimeType: "application/x-xz"},
+    {ext: ".lz", mimeType: "application/lzip"},
+    {ext: ".torrent", mimeType: "application/x-bittorrent"},
+    {ext: ".cpio", mimeType: "application/x-cpio"},
+    {ext: "N/A", mimeType: "application/tzif"},
+    {ext: ".xcf", mimeType: "image/x-xcf"},
+    {ext: ".pat", mimeType: "image/x-gimp-pat"},
+    {ext: ".gbr", mimeType: "image/x-gimp-gbr"},
+    {ext: ".glb", mimeType: "model/gltf-binary"},
+    {ext: ".avif", mimeType: "image/avif"},
+    {ext: ".cab", mimeType: "application/x-installshield"},
+    {ext: ".jxr", mimeType: "image/jxr"},
+    {ext: ".txt", mimeType: "text/plain"},
+    {ext: ".html", mimeType: "text/html"},
+    {ext: ".svg", mimeType: "image/svg+xml"},
+    {ext: ".xml", mimeType: "text/xml"},
+    {ext: ".rss", mimeType: "application/rss+xml"},
+    {ext: ".atom", mimeType: "applicatioN/Atom+xml"},
+    {ext: ".x3d", mimeType: "model/x3d+xml"},
+    {ext: ".kml", mimeType: "application/vnd.google-earth.kml+xml"},
+    {ext: ".xlf", mimeType: "application/x-xliff+xml"},
+    {ext: ".dae", mimeType: "model/vnd.collada+xml"},
+    {ext: ".gml", mimeType: "application/gml+xml"},
+    {ext: ".gpx", mimeType: "application/gpx+xml"},
+    {ext: ".tcx", mimeType: "application/vnd.garmin.tcx+xml"},
+    {ext: ".amf", mimeType: "application/x-amf"},
+    {ext: ".3mf", mimeType: "application/vnd.ms-package.3dmanufacturing-3dmodel+xml"},
+    {ext: ".xfdf", mimeType: "application/vnd.adobe.xfdf"},
+    {ext: ".owl", mimeType: "application/owl+xml"},
+    {ext: ".php", mimeType: "text/x-php"},
+    {ext: ".js", mimeType: "application/javascript"},
+    {ext: ".lua", mimeType: "text/x-lua"},
+    {ext: ".pl", mimeType: "text/x-perl"},
+    {ext: ".py", mimeType: "text/x-python"},
+    {ext: ".json", mimeType: "application/json"},
+    {ext: ".geojson", mimeType: "application/geo+json"},
+    {ext: ".har", mimeType: "application/json"},
+    {ext: ".ndjson", mimeType: "application/x-ndjson"},
+    {ext: ".rtf", mimeType: "text/rtf"},
+    {ext: ".srt", mimeType: "application/x-subrip"},
+    {ext: ".tcl", mimeType: "text/x-tcl"},
+    {ext: ".csv", mimeType: "text/csv"},
+    {ext: ".tsv", mimeType: "text/tab-separated-values"},
+    {ext: ".vcf", mimeType: "text/vcard"},
+    {ext: ".ics", mimeType: "text/calendar"},
+    {ext: ".warc", mimeType: "application/warc"},
+    {ext: ".vtt", mimeType: "text/vtt"},
+    {ext: "N/A", mimeType: "application/octet-stream"},
+];
@@ -105,7 +105,6 @@
    display: block;
    text-align: center;
    pointer-events: none;
-    transition: left var(--activeAnimationSpeed);
    .alert {
        text-align: left;
        pointer-events: auto;
@@ -55,16 +55,16 @@
        }

        // states
-        &:focus-visible,
-        &:hover {
+        &.selected {
            background: var(--baseAlt1Color);
        }
-        &.selected {
+        &:focus-visible,
+        &:hover {
            background: var(--baseAlt2Color);
        }
        &:active {
            transition-duration: var(--activeAnimationSpeed);
-            background: var(--baseAlt2Color);
+            background: var(--baseAlt3Color);
        }
        &.disabled {
            color: var(--txtDisabledColor);
@@ -800,7 +800,7 @@ select {
    outline: 0;
    .option {
        user-select: none;
-        column-gap: 8px;
+        column-gap: 5px;
        .icon {
            min-width: 20px;
            text-align: center;
@@ -910,9 +910,9 @@ select {
            max-width: 100%;
            line-height: normal;
        }
-        &:hover {
-            cursor: pointer;
-        }
+    }
+    &:not(.disabled) .selected-container:hover {
+        cursor: pointer;
    }
    &.disabled {
        color: var(--txtDisabledColor);
@@ -978,7 +978,7 @@ select {
        }
        .options-list {
            overflow: auto;
-            max-height: 270px;
+            max-height: 240px;
            width: auto;
            margin-left: 0;
            margin-right: -5px;
@@ -231,14 +231,6 @@ table {
    margin-right: calc(var(--baseSpacing) * -1);
    .bulk-select-col {
        min-width: 70px;
-        input[type="checkbox"] ~ label {
-            opacity: 0.7;
-        }
-        label:hover,
-        label:focus-within,
-        input[type="checkbox"]:checked ~ label {
-            opacity: 1 !important;
-        }
    }
    td, th {
        position: relative;
@@ -19,7 +19,8 @@
    transition: opacity var(--baseAnimationSpeed),
                visibility var(--baseAnimationSpeed),
                transform var(--baseAnimationSpeed);
-    transform: scale(0.98);
+    transform: translateY(1px);
+    backface-visibility: hidden;
    white-space: pre-line;
    word-break: break-word;
    @include hide();
@@ -1222,9 +1222,10 @@ export default class CommonHelper {
                "media",
                "table",
                "code",
+                "codesample",
            ],
            toolbar:
-                "styles | alignleft aligncenter alignright | bold italic forecolor backcolor | bullist numlist | link image table | fullscreen code",
+                "undo redo | styles | alignleft aligncenter alignright | bold italic forecolor backcolor | bullist numlist | link image table codesample | code fullscreen",
            file_picker_types: "image",
            // @see https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#interactive-example
            file_picker_callback: (cb, value, meta) => {