feat: enhancements and fixes (#810)

packages/core/dev-test/config.yml

@@ -82,6 +82,7 @@ collections:
     create: true
     editor:
       frame: false
+      size: half
     fields:
       - label: Question
         name: title

packages/core/src/backend.ts

@@ -18,7 +18,7 @@ import {
   hasI18n,
 } from './lib/i18n';
 import { getBackend, invokeEvent } from './lib/registry';
-import { sanitizeChar } from './lib/urlHelper';
+import { joinUrlPath, sanitizeChar } from './lib/urlHelper';
 import {
   CURSOR_COMPATIBILITY_SYMBOL,
   Cursor,
@@ -39,7 +39,11 @@ import {
   selectInferredField,
   selectMediaFolders,
 } from './lib/util/collection.util';
-import { selectMediaFilePath, selectMediaFilePublicPath } from './lib/util/media.util';
+import {
+  DRAFT_MEDIA_FILES,
+  selectMediaFilePath,
+  selectMediaFilePublicPath,
+} from './lib/util/media.util';
 import { selectCustomPath, slugFromCustomPath } from './lib/util/nested.util';
 import { set } from './lib/util/object.util';
 import { dateParsers, expandPath, extractTemplateVars } from './lib/widgets/stringTemplate';
@@ -84,7 +88,19 @@ function updateAssetProxies(
     // update media files path based on entry path
     const oldPath = asset.path;
     entryDraft.entry.path = path;
-    const newPath = selectMediaFilePath(config, collection, entryDraft.entry, oldPath, asset.field);
+
+    const folderPath = joinUrlPath(
+      collection && 'folder' in collection ? collection.folder : '',
+      DRAFT_MEDIA_FILES,
+    );
+
+    const newPath = selectMediaFilePath(
+      config,
+      collection,
+      entryDraft.entry,
+      oldPath.replace(folderPath, ''),
+      asset.field,
+    );
     asset.path = newPath;
   });
 }

packages/core/src/components/collections/CollectionSearch.tsx

@@ -151,7 +151,7 @@ const CollectionSearch = ({
             p-1.5
             pl-10
             text-sm
-          text-gray-900
+            text-gray-800
             border
             border-gray-300
             rounded-lg
@@ -185,7 +185,7 @@ const CollectionSearch = ({
           rounded-md
           bg-white
           text-base
-          shadow-lg
+          shadow-md
           ring-1
           ring-black
           ring-opacity-5
@@ -193,6 +193,7 @@ const CollectionSearch = ({
           sm:text-sm
           z-40
           dark:bg-slate-700
+          dark:shadow-lg
         "
       >
         <div

packages/core/src/components/collections/FilterControl.tsx

@@ -52,7 +52,7 @@ const FilterControl = ({
               />
               <label
                 htmlFor={labelId}
-                className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                className="ml-2 text-sm font-medium text-gray-800 dark:text-gray-300"
               >
                 {viewFilter.label}
               </label>

packages/core/src/components/collections/entries/EntryListingCardGrid.tsx

@@ -106,13 +106,6 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
   }, []);
 
   const getDefaultHeight = useCallback((data?: CollectionEntryData) => {
-    console.log(
-      'DEFAULT HEIGHT',
-      data,
-      isNotNullish(data?.imageFieldName)
-        ? COLLECTION_CARD_HEIGHT
-        : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE,
-    );
     return isNotNullish(data?.imageFieldName)
       ? COLLECTION_CARD_HEIGHT
       : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE;
@@ -187,13 +180,6 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
 
                     if (cardHeights[i] > rowHeight && cardHeights[i]) {
                       rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN;
-
-                      console.log(
-                        'HEIGHT @index',
-                        i,
-                        cardHeights[i],
-                        cardHeights[i] + COLLECTION_CARD_MARGIN,
-                      );
                     }
                   }
 
@@ -201,8 +187,6 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
                     rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN;
                   }
 
-                  console.log('HEIGHT', index, rowHeight);
-
                   return rowHeight;
                 }}
                 width={width}

packages/core/src/components/collections/entries/EntryListingTable.tsx

@@ -77,7 +77,12 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
         overflow-hidden
         p-1.5
         bg-white
+        shadow-sm
+        border
+        border-gray-100
         dark:bg-slate-800
+        dark:border-gray-700/40
+        dark:shadow-md
         rounded-xl
       "
     >

packages/core/src/components/common/autocomplete/Autocomplete.tsx

@@ -70,7 +70,7 @@ const Autocomplete = function <T>(
               min-h-8
               p-0
               w-full
-              text-gray-900
+              text-gray-800
               dark:text-gray-100
             "
             data-testid="autocomplete-input-wrapper"
@@ -99,7 +99,7 @@ const Autocomplete = function <T>(
                       dark:text-gray-500
                     `
                   : `
-                      text-gray-900
+                      text-gray-800
                       dark:text-gray-100
                     `,
               )}
@@ -144,7 +144,7 @@ const Autocomplete = function <T>(
                 bg-white
                 py-1
                 text-base
-                shadow-lg
+                shadow-md
                 ring-1
                 ring-black
                 ring-opacity-5
@@ -152,10 +152,11 @@ const Autocomplete = function <T>(
                 sm:text-sm
                 z-30
                 dark:bg-slate-700
+                dark:shadow-lg
               `}
             >
               {options.length === 0 ? (
-                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
+                <div className="relative cursor-default select-none py-2 px-4 text-gray-800">
                   Nothing found.
                 </div>
               ) : (
@@ -179,7 +180,7 @@ const Autocomplete = function <T>(
                             pl-10
                             pr-4
                             cursor-pointer
-                            text-gray-900
+                            text-gray-800
                             dark:text-gray-100
                           `,
                           (selected || active) &&

packages/core/src/components/common/card/Card.tsx

@@ -14,12 +14,14 @@ const Card = ({ children, className }: CardProps) => {
     <div
       className={classNames(
         `
-          bg-white border
+          bg-white
-          border-gray-200
+          border
+          border-gray-100
           rounded-lg
-          shadow-md
+          shadow-sm
           dark:bg-slate-800
           dark:border-gray-700/40
+          dark:shadow-md
           flex
           flex-col
           h-full

packages/core/src/components/common/card/CardContent.tsx

@@ -7,7 +7,7 @@ interface CardContentProps {
 }
 
 const CardContent = ({ children }: CardContentProps) => {
-  return <p className="w-full p-5 font-normal text-gray-700 dark:text-gray-300">{children}</p>;
+  return <p className="w-full p-5 font-normal text-gray-800 dark:text-gray-300">{children}</p>;
 };
 
 export default CardContent;

packages/core/src/components/common/card/CardHeader.tsx

@@ -8,7 +8,7 @@ interface CardHeaderProps {
 
 const CardHeader = ({ children }: CardHeaderProps) => {
   return (
-    <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+    <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-800 dark:text-white">
       {children}
     </h5>
   );

packages/core/src/components/common/menu/Menu.tsx

@@ -97,7 +97,7 @@ const Menu = ({
                 rounded-md
                 bg-white
                 dark:bg-slate-800
-                shadow-lg
+                shadow-md
                 border
                 border-gray-200
                 focus:outline-none
@@ -105,6 +105,7 @@ const Menu = ({
                 divide-gray-100
                 dark:border-gray-700
                 dark:divide-gray-600
+                dark:shadow-lg
               `,
               onClick: handleClose,
             },

packages/core/src/components/common/menu/MenuItemButton.tsx

@@ -46,11 +46,11 @@ const MenuItemButton = ({
               items-center
               justify-between
               cursor-pointer
-              dark:disabled:text-gray-700
+              dark:disabled:text-gray-800
             `,
             color === 'default' &&
               `
-                text-gray-700
+                text-gray-800
                 dark:text-gray-300
                 hover:bg-gray-200
                 dark:hover:bg-slate-600

packages/core/src/components/common/menu/MenuItemLink.tsx

@@ -36,7 +36,7 @@ const MenuItemLink = ({
               px-4
               py-2
               text-sm
-              text-gray-700
+              text-gray-800
               dark:text-gray-300
               w-full
               text-left

packages/core/src/components/common/pill/Pill.tsx

@@ -45,7 +45,7 @@ const Pill: FC<PillProps> = ({
             `
           : `
               bg-gray-200
-              text-gray-900
+              text-gray-800
               dark:bg-gray-700
               dark:text-gray-100
             `;

packages/core/src/components/common/select/Option.tsx

@@ -40,7 +40,7 @@ const Option = function <T>({
               py-2
               px-4
               cursor-pointer
-              text-gray-900
+              text-gray-800
               hover:bg-blue-500
               dark:text-gray-100
             `,

packages/core/src/components/common/select/Select.tsx

@@ -136,7 +136,7 @@ const Select = forwardRef(
                   px-4
                   py-1.5
                   w-full
-                  text-gray-900
+                  text-gray-800
                   dark:text-gray-100
                 `,
                 disabled &&
@@ -154,7 +154,7 @@ const Select = forwardRef(
                 bg-white
                 py-1
                 text-base
-                shadow-lg
+                shadow-md
                 ring-1
                 ring-black
                 ring-opacity-5
@@ -162,6 +162,7 @@ const Select = forwardRef(
                 sm:text-sm
                 z-50
                 dark:bg-slate-700
+                dark:shadow-lg
               `,
               style: { width },
               disablePortal: false,

packages/core/src/components/common/switch/Switch.tsx

@@ -86,7 +86,7 @@ const Switch = forwardRef<HTMLInputElement | null, SwitchProps>(
               ml-3
               text-sm
               font-medium
-              text-gray-900
+              text-gray-800
               dark:text-gray-300
             "
           >

packages/core/src/components/common/table/Table.tsx

@@ -13,13 +13,12 @@ const TableCell = ({ columns, children }: TableCellProps) => {
   return (
     <div
       className="
-        shadow-md
         z-[2]
       "
     >
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-300">
         <thead className="text-xs">
-          <tr>
+          <tr className="shadow-sm">
             {columns.map((column, index) => (
               <TableHeaderCell key={index}>{column}</TableHeaderCell>
             ))}

packages/core/src/components/common/table/TableCell.tsx

@@ -42,7 +42,7 @@ const TableCell = ({ children, emphasis = false, to, shrink = false }: TableCell
           text-gray-500
           dark:text-gray-300
         `,
-        emphasis && 'font-medium text-gray-900 whitespace-nowrap dark:text-white',
+        emphasis && 'font-medium text-gray-800 whitespace-nowrap dark:text-white',
         shrink && 'w-0',
       )}
     >

packages/core/src/components/common/table/TableHeaderCell.tsx

@@ -27,14 +27,13 @@ const TableHeaderCell = ({ children }: TableHeaderCellProps) => {
         className="
           px-4
           py-3
-          text-gray-900
+          text-gray-800
           border-gray-100
           border-b
           bg-white
           dark:text-white
           dark:border-gray-700
           dark:bg-slate-800
-          shadow-sm
           text-[14px]
         "
       >

packages/core/src/components/common/text-field/TextArea.tsx

@@ -75,7 +75,7 @@ const TextArea = forwardRef<HTMLInputElement | null, TextAreaProps>(
               outline-none
               text-sm
               font-medium
-              text-gray-900
+              text-gray-800
               dark:text-gray-100
               disabled:text-gray-300
               dark:disabled:text-gray-500

packages/core/src/components/common/text-field/TextField.tsx

@@ -86,7 +86,7 @@ const TextField: FC<TextFieldProps> = ({
               bg-transparent
               outline-none
               font-medium
-              text-gray-900
+              text-gray-800
               disabled:text-gray-300
               dark:text-gray-100
               dark:disabled:text-gray-500
@@ -96,7 +96,7 @@ const TextField: FC<TextFieldProps> = ({
               bg-gray-50
               border
               border-gray-300
-              text-gray-900
+              text-gray-800
               rounded-lg
               focus:ring-blue-500
               focus:border-blue-500

packages/core/src/components/entry-editor/EditorInterface.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollSyncPane } from 'react-scroll-sync';
 
+import { EDITOR_SIZE_COMPACT } from '@staticcms/core/constants/views';
 import useBreadcrumbs from '@staticcms/core/lib/hooks/useBreadcrumbs';
 import { getI18nInfo, getPreviewEntry, hasI18n } from '@staticcms/core/lib/i18n';
 import classNames from '@staticcms/core/lib/util/classNames.util';
@@ -138,9 +139,10 @@ const EditorInterface = ({
     setSelectedLocale(locale);
   }, []);
 
-  const [showPreviewToggle, previewInFrame] = useMemo(() => {
+  const [showPreviewToggle, previewInFrame, editorSize] = useMemo(() => {
     let preview = collection.editor?.preview ?? true;
     let frame = collection.editor?.frame ?? true;
+    let size = collection.editor?.size ?? EDITOR_SIZE_COMPACT;
 
     if ('files' in collection) {
       const file = getFileFromSlug(collection, entry.slug);
@@ -151,9 +153,13 @@ const EditorInterface = ({
       if (file?.editor?.frame !== undefined) {
         frame = file.editor.frame;
       }
+
+      if (file?.editor?.size !== undefined) {
+        size = file.editor.size;
+      }
     }
 
-    return [preview, frame];
+    return [preview, frame, size];
   }, [collection, entry.slug]);
 
   const finalPreviewActive = useMemo(
@@ -226,13 +232,22 @@ const EditorInterface = ({
     : entry;
 
   const editorWithPreview = (
-    <div className="grid grid-cols-editor h-full">
+    <div
+      className={classNames(
+        `
+          grid
+          h-full
+        `,
+        editorSize === EDITOR_SIZE_COMPACT ? 'grid-cols-editor' : 'grid-cols-2',
+      )}
+    >
       <ScrollSyncPane>{editor}</ScrollSyncPane>
       <EditorPreviewPane
         collection={collection}
         previewInFrame={previewInFrame}
         entry={previewEntry}
         fields={fields}
+        editorSize={editorSize}
       />
     </div>
   );

packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx

@@ -4,17 +4,20 @@ import Frame from 'react-frame-component';
 import { translate } from 'react-polyglot';
 import { ScrollSyncPane } from 'react-scroll-sync';
 
+import { EDITOR_SIZE_COMPACT } from '@staticcms/core/constants/views';
 import { getPreviewStyles, getPreviewTemplate } from '@staticcms/core/lib/registry';
+import classNames from '@staticcms/core/lib/util/classNames.util';
 import { selectTemplateName } from '@staticcms/core/lib/util/collection.util';
 import { selectConfig } from '@staticcms/core/reducers/selectors/config';
 import { selectTheme } from '@staticcms/core/reducers/selectors/globalUI';
 import { useAppSelector } from '@staticcms/core/store/hooks';
-import useWidgetsFor from '../../common/widget/useWidgetsFor';
 import ErrorBoundary from '../../ErrorBoundary';
+import useWidgetsFor from '../../common/widget/useWidgetsFor';
 import EditorPreview from './EditorPreview';
 import EditorPreviewContent from './EditorPreviewContent';
 import PreviewFrameContent from './PreviewFrameContent';
 
+import type { EditorSize } from '@staticcms/core/constants/views';
 import type {
   Collection,
   Entry,
@@ -51,7 +54,7 @@ const FrameGlobalStyles = `
     color: rgb(59 130 246);
   }
 
-  .text-gray-900 {
+  .text-gray-800 {
     color: rgb(17 24 39);
   }
 
@@ -103,10 +106,11 @@ export interface EditorPreviewPaneProps {
   fields: Field[];
   entry: Entry;
   previewInFrame: boolean;
+  editorSize: EditorSize;
 }
 
 const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
-  const { entry, collection, fields, previewInFrame, t } = props;
+  const { editorSize, entry, collection, fields, previewInFrame, t } = props;
 
   const config = useAppSelector(selectConfig);
 
@@ -168,7 +172,17 @@ const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
     }
 
     return createPortal(
-      <div className="w-preview h-main absolute top-16 right-0">
+      <div
+        className={classNames(
+          `
+            h-main
+            absolute
+            top-16
+            right-0
+          `,
+          editorSize === EDITOR_SIZE_COMPACT ? 'w-preview' : 'w-6/12',
+        )}
+      >
         {!entry || !entry.data ? null : (
           <ErrorBoundary config={config}>
             {previewInFrame ? (
@@ -191,7 +205,15 @@ const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
               </Frame>
             ) : (
               <ScrollSyncPane key="preview-wrapper-scroll-sync">
-                <div key="preview-wrapper" id="preview-pane">
+                <div
+                  key="preview-wrapper"
+                  id="preview-pane"
+                  className="
+                    overflow-y-auto
+                    styled-scrollbars
+                    h-full
+                  "
+                >
                   {!collection ? (
                     t('collection.notFound')
                   ) : (
@@ -216,6 +238,7 @@ const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
   }, [
     collection,
     config,
+    editorSize,
     element,
     entry,
     initialFrameContent,

packages/core/src/components/entry-editor/editor-preview-pane/PreviewFrameContent.tsx

@@ -40,7 +40,7 @@ const PreviewFrameContent: FC<PreviewFrameContentProps> = ({ previewComponent, p
             <div>
               <div
                 className="
-                  text-gray-900
+                  text-gray-800
                   dark:text-gray-100
                 "
               >

packages/core/src/components/entry-editor/widgets/Unknown/UnknownControl.tsx

@@ -10,7 +10,7 @@ const UnknownControl = ({ field, t }: TranslatedProps<WidgetControlProps<unknown
         px-4
         py-2
         text-small
-        text-gray-900
+        text-gray-800
         dark:text-gray-100
       "
     >

packages/core/src/components/media-library/common/FolderCreationDialog.tsx

@@ -65,7 +65,7 @@ const FolderCreationDialog: FC<TranslatedProps<FolderCreationDialogProps>> = ({
           className="
             text-xl
             font-semibold
-            text-gray-900
+            text-gray-800
             dark:text-white
           "
         >

packages/core/src/components/media-library/common/InlineEditTextField.tsx

@@ -140,7 +140,7 @@ const InlineEditTextField: FC<InlineEditTextFieldProps> = ({
             p-1.5
             -ml-1.5
             text-sm
-            text-gray-900
+            text-gray-800
             border
             border-gray-300
             rounded-md

packages/core/src/components/media-library/common/MediaLibrarySearch.tsx

@@ -27,7 +27,7 @@ const MediaLibrarySearch = ({
     >
       <label
         htmlFor="default-search"
-        className="text-sm font-medium text-gray-900 sr-only dark:text-white"
+        className="text-sm font-medium text-gray-800 sr-only dark:text-white"
       >
         Search
       </label>
@@ -44,7 +44,7 @@ const MediaLibrarySearch = ({
             p-1.5
             pl-10
             text-sm
-            text-gray-900
+            text-gray-800
             border
             border-gray-300
             rounded-lg

packages/core/src/components/navbar/Navbar.tsx

@@ -41,7 +41,16 @@ const Navbar = ({
   }, [dispatch]);
 
   return (
-    <nav className="bg-white dark:bg-slate-800 drop-shadow-lg z-40 relative">
+    <nav
+      className="
+        z-40
+        relative
+        bg-white
+        drop-shadow-md
+        dark:bg-slate-800
+        dark:drop-shadow-lg
+      "
+    >
       <div key="nav" className="mx-auto pr-2 sm:pr-4 lg:pr-5">
         <div className="relative flex h-16 items-center justify-between">
           <div className="flex flex-1 items-center justify-center h-full sm:items-stretch sm:justify-start gap-4">

packages/core/src/components/snackbar/SnackbarAlert.tsx

@@ -56,7 +56,7 @@ const SnackbarAlert = forwardRef<HTMLDivElement, TranslatedProps<SnackbarAlertPr
           text-gray-500
           bg-white
           rounded-lg
-          shadow
+          shadow-md
           dark:text-gray-300
           dark:bg-gray-800
           dark:shadow-lg

packages/core/src/constants/views.ts

@@ -2,9 +2,16 @@ export const VIEW_STYLE_TABLE = 'table';
 export const VIEW_STYLE_GRID = 'grid';
 
 export type ViewStyle = typeof VIEW_STYLE_TABLE | typeof VIEW_STYLE_GRID;
+export const VIEW_STYLES = [VIEW_STYLE_TABLE, VIEW_STYLE_GRID];
 
 export const COLLECTION_CARD_WIDTH = 240;
 export const COLLECTION_CARD_HEIGHT = 204;
 export const COLLECTION_CARD_IMAGE_HEIGHT = 140;
 export const COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE = 64;
 export const COLLECTION_CARD_MARGIN = 10;
+
+export const EDITOR_SIZE_COMPACT = 'compact';
+export const EDITOR_SIZE_HALF = 'half';
+
+export type EditorSize = typeof EDITOR_SIZE_COMPACT | typeof EDITOR_SIZE_HALF;
+export const EDITOR_SIZES = [EDITOR_SIZE_COMPACT, EDITOR_SIZE_HALF];

packages/core/src/interface.ts

@@ -37,7 +37,7 @@ import type {
   STRIKETHROUGH_TOOLBAR_BUTTON,
   UNORDERED_LIST_TOOLBAR_BUTTON,
 } from './constants/toolbar_buttons';
-import type { ViewStyle } from './constants/views';
+import type { EditorSize, ViewStyle } from './constants/views';
 import type { formatExtensions } from './formats/formats';
 import type {
   I18N_FIELD_DUPLICATE,
@@ -178,6 +178,7 @@ export interface FilterRule {
 export interface EditorConfig {
   preview?: boolean;
   frame?: boolean;
+  size?: EditorSize;
 }
 
 export interface CollectionFile<EF extends BaseField = UnknownField> {

packages/core/src/lib/hooks/index.ts

@@ -2,7 +2,7 @@ export { default as useEntries } from './useEntries';
 export { default as useFolderSupport } from './useFolderSupport';
 export { default as useHasChildErrors } from './useHasChildErrors';
 export { default as useIsMediaAsset } from './useIsMediaAsset';
-export { default as useMediaAsset } from './useMediaAsset';
+export { default as useMediaAsset, useGetMediaAsset } from './useMediaAsset';
 export { default as useMediaFiles } from './useMediaFiles';
 export { default as useMediaInsert } from './useMediaInsert';
 export { default as useMediaPersist } from './useMediaPersist';

packages/core/src/lib/hooks/useIcon.tsx

@@ -14,7 +14,7 @@ export function getIcon(iconName: string | undefined): ReactNode {
     }
   }
 
-  return <div className="h-6 w-6 flex">{icon}</div>;
+  return <div className="h-6 w-6 flex items-center justify-center cms-icon">{icon}</div>;
 }
 
 export default function useIcon(iconName: string | undefined) {

packages/core/src/lib/hooks/useMediaAsset.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { emptyAsset, getAsset } from '@staticcms/core/actions/media';
 import { useAppDispatch } from '@staticcms/core/store/hooks';
@@ -13,6 +13,33 @@ import type {
   UnknownField,
 } from '@staticcms/core/interface';
 
+export function useGetMediaAsset<T extends MediaField, EF extends BaseField = UnknownField>(
+  collection?: Collection<EF>,
+  field?: T,
+  entry?: Entry,
+  currentFolder?: string,
+  isDirectory = false,
+): (url: string | undefined | null) => Promise<string | undefined | null> {
+  const dispatch = useAppDispatch();
+
+  return useCallback(
+    async (url: string | undefined | null): Promise<string | undefined | null> => {
+      const isAbsolute = isNotEmpty(url) ? /^(?:[a-z+]+:)?\/\//g.test(url) : false;
+
+      if (!url || isAbsolute || url.startsWith('blob:') || isDirectory) {
+        return url;
+      }
+
+      const asset = await dispatch(getAsset<T, EF>(collection, entry, url, field, currentFolder));
+
+      if (asset !== emptyAsset) {
+        return asset?.toString() ?? '';
+      }
+    },
+    [collection, currentFolder, dispatch, entry, field, isDirectory],
+  );
+}
+
 export default function useMediaAsset<T extends MediaField, EF extends BaseField = UnknownField>(
   url: string | undefined | null,
   collection?: Collection<EF>,

packages/core/src/lib/hooks/useMediaInsert.ts

@@ -13,8 +13,14 @@ import type {
 } from '@staticcms/core/interface';
 import type { MouseEvent } from 'react';
 
+export interface OpenMediaLibraryProps {
+  forImage?: boolean;
+  forFolder?: boolean;
+  replaceIndex?: number;
+}
+
 export default function useMediaInsert<T extends string | string[], F extends MediaField>(
-  value: MediaPath<T>,
+  value: MediaPath<T> | undefined,
   options: {
     collection: Collection<F>;
     field: F;
@@ -23,8 +29,8 @@ export default function useMediaInsert<T extends string | string[], F extends Me
     forFolder?: boolean;
     insertOptions?: MediaLibrarInsertOptions;
   },
-  callback: (newValue: MediaPath<T>) => void,
+  callback: (newValue: MediaPath<T>) => void | Promise<void>,
-): (e?: MouseEvent, options?: { replaceIndex?: number }) => void {
+): (e?: MouseEvent, options?: OpenMediaLibraryProps) => void {
   const dispatch = useAppDispatch();
 
   const {
@@ -41,7 +47,7 @@ export default function useMediaInsert<T extends string | string[], F extends Me
   const mediaPath = useAppSelector(mediaPathSelector);
 
   useEffect(() => {
-    if (mediaPath && (mediaPath.path !== value.path || mediaPath.alt !== value.alt)) {
+    if (mediaPath && (!value || mediaPath.path !== value.path || mediaPath.alt !== value.alt)) {
       setTimeout(() => {
         callback(mediaPath as MediaPath<T>);
         dispatch(removeInsertedMedia(finalControlID));
@@ -50,17 +56,27 @@ export default function useMediaInsert<T extends string | string[], F extends Me
   }, [callback, finalControlID, dispatch, mediaPath, value]);
 
   const handleOpenMediaLibrary = useCallback(
-    (e?: MouseEvent, { replaceIndex }: { replaceIndex?: number } = {}) => {
+    (
+      e?: MouseEvent,
+      {
+        replaceIndex,
+        forImage: forImageOverride,
+        forFolder: forFolderOverride,
+      }: OpenMediaLibraryProps = {},
+    ) => {
       e?.preventDefault();
       dispatch(
         openMediaLibrary({
           controlID: finalControlID,
-          forImage,
+          forImage: forImageOverride ?? forImage,
-          forFolder,
+          forFolder: forFolderOverride ?? forFolder,
-          value: Array.isArray(value.path) ? [...value.path] : value.path,
+          value: field.multiple
-          alt: value.alt,
+            ? value
+              ? [...(Array.isArray(value.path) ? value.path : [value.path])]
+              : []
+            : value?.path,
+          alt: value?.alt,
           replaceIndex,
-          allowMultiple: false,
           config: field.media_library,
           collection,
           field,
@@ -68,17 +84,7 @@ export default function useMediaInsert<T extends string | string[], F extends Me
         }),
       );
     },
-    [
+    [dispatch, finalControlID, forImage, forFolder, value, collection, field, insertOptions],
-      dispatch,
-      finalControlID,
-      forImage,
-      forFolder,
-      value.path,
-      value.alt,
-      collection,
-      field,
-      insertOptions,
-    ],
   );
 
   return handleOpenMediaLibrary;

packages/core/src/reducers/entries.ts

@@ -22,7 +22,7 @@ import {
   SORT_ENTRIES_REQUEST,
   SORT_ENTRIES_SUCCESS,
 } from '../constants';
-import { VIEW_STYLE_TABLE } from '../constants/views';
+import { VIEW_STYLES, VIEW_STYLE_TABLE } from '../constants/views';
 import { set } from '../lib/util/object.util';
 
 import type { EntriesAction } from '../actions/entries';
@@ -93,7 +93,7 @@ function persistSort(sort: Sort | undefined) {
 
 const loadViewStyle = once(() => {
   const viewStyle = localStorage.getItem(viewStyleKey) as ViewStyle;
-  if (viewStyle) {
+  if (viewStyle && VIEW_STYLES.includes(viewStyle)) {
     return viewStyle;
   }
 

packages/core/src/styles/main.css

@@ -7,9 +7,14 @@
 @tailwind utilities;
 
 @layer components {
+  html {
+    @apply overflow-hidden;
+  }
+
   body {
-    @apply text-gray-900
+    @apply text-gray-800
-      dark:text-gray-100;
+      dark:text-gray-100
+      overflow-hidden;
   }
 
   /**
@@ -73,7 +78,7 @@
   }
 
   .btn-outlined-primary {
-    @apply text-gray-900
+    @apply text-gray-800
       bg-transparent
       border
       border-gray-200
@@ -96,7 +101,7 @@
 
   .btn-text-primary {
     @apply bg-transparent
-      text-gray-700
+      text-gray-800
       hover:text-blue-700
       hover:bg-blue-100
       disabled:text-gray-300
@@ -115,7 +120,7 @@
       text-gray-600
       bg-white
       border-gray-200/75
-      hover:text-gray-700
+      hover:text-gray-800
       hover:bg-gray-100
       hover:border-gray-200/50
       disabled:text-gray-300/75
@@ -133,12 +138,12 @@
   }
 
   .btn-outlined-secondary {
-    @apply text-gray-900
+    @apply text-gray-800
       bg-transparent
       border
       border-gray-200
       hover:bg-gray-100
-      hover:text-gray-700
+      hover:text-gray-800
       hover:border-gray-200/50
       disabled:text-gray-300/75
       disabled:border-gray-200/40
@@ -156,8 +161,8 @@
 
   .btn-text-secondary {
     @apply bg-transparent
-      text-gray-900
+      text-gray-800
-      hover:text-gray-700
+      hover:text-gray-800
       hover:bg-gray-100
       disabled:text-gray-300/75
       disabled:hover:bg-transparent
@@ -408,3 +413,10 @@ table {
     }
   }
 }
+
+.cms-icon {
+  & > * {
+    width: 24px;
+    height: 24px;
+  }
+}

packages/core/src/widgets/markdown/plate/components/balloon-toolbar/BalloonToolbar.tsx

@@ -266,7 +266,7 @@ const BalloonToolbar: FC<BalloonToolbarProps> = ({
             bg-white
             p-1
             text-base
-            shadow-lg
+            shadow-md
             ring-1
             ring-black
             ring-opacity-5
@@ -274,6 +274,7 @@ const BalloonToolbar: FC<BalloonToolbarProps> = ({
             sm:text-sm
             z-40
             dark:bg-slate-700
+            dark:shadow-lg
           "
         >
           <div

packages/core/src/widgets/markdown/plate/components/buttons/FontTypeSelect.tsx

@@ -151,7 +151,7 @@ const FontTypeSelect: FC<FontTypeSelectProps> = ({ disabled = false }) => {
                     dark:text-gray-500
                   `
                 : `
-                    text-gray-900
+                    text-gray-800
                     border-gray-600
                     dark:border-gray-200
                     dark:text-gray-100
@@ -166,13 +166,14 @@ const FontTypeSelect: FC<FontTypeSelectProps> = ({ disabled = false }) => {
               overflow-auto
               rounded-md
               bg-white
-              shadow-lg
+              shadow-md
               ring-1
               ring-black
               ring-opacity-5
               focus:outline-none
               sm:text-sm
               dark:bg-slate-800
+              dark:shadow-lg
             `,
           },
         }}

packages/core/src/widgets/markdown/plate/components/common/MediaPopover.tsx

@@ -91,7 +91,7 @@ const MediaPopover = <T extends FileOrImageField | MarkdownField>({
         bg-white
         p-1
         text-base
-        shadow-lg
+        shadow-md
         ring-1
         ring-black
         ring-opacity-5
@@ -99,6 +99,7 @@ const MediaPopover = <T extends FileOrImageField | MarkdownField>({
         sm:text-sm
         z-40
         dark:bg-slate-700
+        dark:shadow-lg
       "
     >
       <div

packages/core/src/widgets/markdown/plate/components/toolbar/Toolbar.tsx

@@ -81,9 +81,10 @@ const Toolbar: FC<ToolbarProps> = ({ collection, field, disabled }) => {
         border-bottom-2
         border-gray-400
         gap-0.5
-        shadow-md
+        shadow-sm
         bg-slate-50
         dark:bg-slate-900
+        dark:shadow-md
         sticky
         top-0
         z-10

packages/core/src/widgets/relation/__tests__/RelationControl.spec.ts

@@ -425,12 +425,12 @@ describe(RelationControl.name, () => {
       const option5 = 'autocomplete-option-Post 5';
       const option6 = 'autocomplete-option-Post 6';
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option3)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option3)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option4)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option4)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option5)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option5)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option6)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option6)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.type(input, 'ost body text for Post 3');
@@ -441,7 +441,7 @@ describe(RelationControl.name, () => {
 
       await waitFor(() => expect(queryByTestId(option1)).not.toBeInTheDocument());
       expect(queryByTestId(option2)).not.toBeInTheDocument();
-      expect(getByTestId(option3)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option3)).toHaveClass('text-gray-800'); // Not selected
       expect(queryByTestId(option4)).not.toBeInTheDocument();
       expect(queryByTestId(option5)).not.toBeInTheDocument();
       expect(queryByTestId(option6)).not.toBeInTheDocument();
@@ -469,11 +469,11 @@ describe(RelationControl.name, () => {
 
       expect(input).toHaveValue('P');
 
-      expect(getByTestId('autocomplete-option-Post 1')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 1')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 2')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 2')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 3')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 3')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 4')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 4')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 5')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 5')).toHaveClass('text-gray-800'); // Not selected
       expect(queryByTestId('autocomplete-option-Post 6')).not.toBeInTheDocument();
     });
 
@@ -504,12 +504,12 @@ describe(RelationControl.name, () => {
         await userEvent.type(input, 'P');
       });
 
-      expect(getByTestId('autocomplete-option-Post 1')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 1')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 2')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 2')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 3')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 3')).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId('autocomplete-option-Post 4')).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId('autocomplete-option-Post 4')).toHaveClass('text-gray-800'); // Not selected
       expect(queryByTestId('autocomplete-option-Post 5')).not.toBeInTheDocument();
-      expect(getByTestId('autocomplete-option-Post 6')).toHaveClass('bg-gray-100', 'text-gray-900'); // Selected
+      expect(getByTestId('autocomplete-option-Post 6')).toHaveClass('bg-gray-100', 'text-gray-800'); // Selected
     });
 
     it('should call onChange when option is selected', async () => {
@@ -604,8 +604,8 @@ describe(RelationControl.name, () => {
       const option1 = 'autocomplete-option-Post 1';
       const option2 = 'autocomplete-option-Post 2';
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -619,8 +619,8 @@ describe(RelationControl.name, () => {
         await userEvent.type(input, 'o');
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-gray-100', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-gray-100', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -633,8 +633,8 @@ describe(RelationControl.name, () => {
         await userEvent.type(input, 's');
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-gray-100', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-gray-100', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-gray-100', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-gray-100', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -647,8 +647,8 @@ describe(RelationControl.name, () => {
         await userEvent.type(input, 't');
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-gray-100', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-gray-100', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 

packages/core/src/widgets/select/__tests__/SelectControl.spec.ts

@@ -132,8 +132,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -146,8 +146,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -160,8 +160,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
 
     it('should show error', async () => {
@@ -236,8 +236,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -250,8 +250,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -264,8 +264,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
   });
 
@@ -324,8 +324,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -338,8 +338,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -352,8 +352,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
   });
 
@@ -425,8 +425,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -439,8 +439,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -453,8 +453,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
   });
 
@@ -526,8 +526,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -540,8 +540,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -554,8 +554,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
   });
 
@@ -627,8 +627,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -641,8 +641,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -655,8 +655,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not selected
     });
   });
 
@@ -716,8 +716,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -730,8 +730,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -744,8 +744,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -758,8 +758,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 
@@ -819,8 +819,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -833,8 +833,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -847,8 +847,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -861,8 +861,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 
@@ -922,8 +922,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -936,8 +936,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -950,8 +950,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -964,8 +964,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 
@@ -1029,8 +1029,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1043,8 +1043,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -1057,8 +1057,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1071,8 +1071,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 
@@ -1136,8 +1136,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1150,8 +1150,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -1164,8 +1164,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1178,8 +1178,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 
@@ -1243,8 +1243,8 @@ describe(SelectControl.name, () => {
         expect(queryByTestId(option2)).toBeInTheDocument();
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1257,8 +1257,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option1)).toHaveClass('text-gray-800'); // Not Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option1));
@@ -1271,8 +1271,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option2)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
 
       await act(async () => {
         await userEvent.click(getByTestId(option2));
@@ -1285,8 +1285,8 @@ describe(SelectControl.name, () => {
         await userEvent.click(input);
       });
 
-      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-900'); // Selected
+      expect(getByTestId(option1)).toHaveClass('bg-blue-400/75', 'text-gray-800'); // Selected
-      expect(getByTestId(option2)).toHaveClass('text-gray-900'); // Not Selected
+      expect(getByTestId(option2)).toHaveClass('text-gray-800'); // Not Selected
     });
   });
 });

packages/docs/content/docs/collection-overview.mdx

@@ -171,9 +171,10 @@ fields: [
 The `editor` setting changes options for the editor view of a collection or a file inside a files collection. It has the following options:
 
 | Name    | Type                    | Default   | Description                                                                                                  |
-| ------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------ |
+| ------- | ----------------------- | --------- | ------------------------------------------------------------------------------------------------------------ |
 | preview | boolean                 | `true`    | Set to `false` to disable the preview pane for this collection or file                                       |
 | frame   | boolean                 | `true`    | <ul><li>`true` - Previews render in a frame</li><li>`false` - Previews render directly in your app</li></ul> |
+| size    | 'compact'<br />\|'half' | `compact` | The size of the editor:<ul><li>`compact` - `450px`</li><li>`half` - `50%` of the screen width </li></ul>     |
 
 <CodeTabs>
 ```yaml