fix: media library url entry (#775)

packages/core/src/components/common/field/Field.tsx

@@ -157,16 +157,18 @@ const Field: FC<FieldProps> = ({
         {renderedHint}
         {renderedErrorMessage}
       </div>
-      <div
-        className={classNames(
-          `
+      {endAdornment ? (
+        <div
+          className={classNames(
+            `
             pr-2
           `,
-          !noPadding && '-mb-3',
-        )}
-      >
-        {endAdornment}
-      </div>
+            !noPadding && '-mb-3',
+          )}
+        >
+          {endAdornment}
+        </div>
+      ) : null}
     </div>
   );
 };

packages/core/src/components/common/image/Image.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Image as ImageIcon } from '@styled-icons/material-outlined/Image';
 
 import useMediaAsset from '@staticcms/core/lib/hooks/useMediaAsset';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { selectEditingDraft } from '@staticcms/core/reducers/selectors/entryDraft';
 import { useAppSelector } from '@staticcms/core/store/hooks';
+import { isEmpty } from '@staticcms/core/lib/util/string.util';
 
 import type { BaseField, Collection, MediaField, UnknownField } from '@staticcms/core/interface';
 
@@ -28,6 +30,20 @@ const Image = <EF extends BaseField = UnknownField>({
 
   const assetSource = useMediaAsset(src, collection, field, entry);
 
+  if (isEmpty(src)) {
+    return (
+      <ImageIcon
+        className="
+          p-10
+          rounded-md
+          border
+          border-gray-200/75
+          dark:border-slate-600/75
+        "
+      />
+    );
+  }
+
   return (
     <img
       key="image"

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import classNames from '@staticcms/core/lib/util/classNames.util';
 import { isEmpty } from '../../../lib/util/string.util';
 import Image from '../../common/image/Image';
 import InlineEditTextField from './InlineEditTextField';
@@ -14,6 +15,7 @@ interface CurrentMediaDetailsProps {
   url?: string | string[];
   alt?: string;
   insertOptions?: MediaLibrarInsertOptions;
+  forImage: boolean;
   onUrlChange: (url: string) => void;
   onAltChange: (alt: string) => void;
 }
@@ -25,54 +27,83 @@ const CurrentMediaDetails: FC<CurrentMediaDetailsProps> = ({
   url,
   alt,
   insertOptions,
+  forImage,
   onUrlChange,
   onAltChange,
 }) => {
-  if (!field || !canInsert || typeof url !== 'string' || isEmpty(url)) {
+  if (
+    !field ||
+    !canInsert ||
+    Array.isArray(url) ||
+    (!insertOptions?.chooseUrl &&
+      !insertOptions?.showAlt &&
+      (typeof url !== 'string' || isEmpty(url)))
+  ) {
     return null;
   }
 
   return (
     <div
-      className="
-        grid
-        grid-cols-media-preview
-        items-center
-        px-5
-        py-4
-        border-b
-        border-gray-200/75
-        dark:border-slate-500/75
-      "
-    >
-      <Image
-        src={url}
-        collection={collection}
-        field={field}
-        className="
-          w-media-preview-image
-          h-media-preview-image
-          rounded-md
-          shadow-sm
-          overflow-hidden
-          group/media-card
-          border
-          bg-gray-50/75
+      className={classNames(
+        `
+          items-center
+          px-5
+          py-4
+          border-b
           border-gray-200/75
-          dark:bg-slate-800
-          dark:border-slate-600/75
-          object-cover
-        "
-      />
+          dark:border-slate-500/75
+        `,
+        forImage
+          ? `
+            grid
+            grid-cols-media-preview
+          `
+          : `
+            flex
+            w-full
+          `,
+      )}
+    >
+      {forImage ? (
+        <Image
+          key="image-preview"
+          src={url}
+          collection={collection}
+          field={field}
+          className="
+            w-media-preview-image
+            h-media-preview-image
+            rounded-md
+            shadow-sm
+            overflow-hidden
+            group/media-card
+            border
+            bg-gray-50/75
+            border-gray-200/75
+            dark:bg-slate-800
+            dark:border-slate-600/75
+            object-cover
+          "
+        />
+      ) : null}
       <div
-        className="
-          flex
-          flex-col
-          h-full
-          p-0
-          pl-4
-          gap-2
-        "
+        className={classNames(
+          `
+            flex
+            flex-col
+            h-full
+            p-0
+            gap-2
+          `,
+          forImage
+            ? `
+              pl-4
+            `
+            : `
+              w-full
+              pl-1.5
+            `,
+        )}
       >
         <InlineEditTextField
           label="URL"
@@ -80,7 +111,11 @@ const CurrentMediaDetails: FC<CurrentMediaDetailsProps> = ({
           onChange={insertOptions?.chooseUrl ? onUrlChange : undefined}
         />
         {insertOptions?.showAlt ? (
-          <InlineEditTextField label="Alt" value={alt} onChange={onAltChange} />
+          <InlineEditTextField
+            label={forImage ? 'Alt' : 'Text'}
+            value={alt}
+            onChange={onAltChange}
+          />
         ) : null}
       </div>
     </div>

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

@@ -96,6 +96,7 @@ const InlineEditTextField: FC<InlineEditTextFieldProps> = ({
       {!editing || !onChange ? (
         <div
           key="value"
+          tabIndex={0}
           className={classNames(
             `
               flex
@@ -110,7 +111,6 @@ const InlineEditTextField: FC<InlineEditTextFieldProps> = ({
               rounded-md
               border
               text-slate-600
-              dark:font-semibold
               dark:text-gray-100
             `,
             onChange
@@ -125,6 +125,7 @@ const InlineEditTextField: FC<InlineEditTextFieldProps> = ({
               `,
           )}
           onClick={handleValueClick}
+          onFocus={handleValueClick}
         >
           {internalValue}
         </div>

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

@@ -484,6 +484,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
           url={url}
           alt={alt}
           insertOptions={insertOptions}
+          forImage={forImage}
           onUrlChange={handleURLChange}
           onAltChange={handleAltChange}
         />