feat: multi image support (#778)

packages/core/src/components/common/button/Button.tsx

@@ -118,6 +118,7 @@ const Button: FC<ButtonLinkProps> = ({
       type="button"
       role="button"
       tabIndex={0}
+      data-no-dnd="true"
     >
       {content}
     </button>

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

@@ -60,6 +60,7 @@ const TextField: FC<TextFieldProps> = ({
       onChange={onChange}
       onClick={onClick}
       data-testid={dataTestId ?? `${type}-input`}
+      data-no-dnd="true"
       readOnly={readonly}
       disabled={disabled}
       startAdornment={startAdornment}

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

@@ -195,16 +195,8 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({
     }
 
     setPrevLocalBackup(localBackup);
-  }, [
-    config?.disable_local_backup,
-    deleteBackup,
-    dispatch,
-    entryDraft.entry?.data,
-    entryDraft.entry?.meta,
-    localBackup,
-    prevLocalBackup,
-    version,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config?.disable_local_backup, deleteBackup, dispatch, localBackup, prevLocalBackup, version]);
 
   useEffect(() => {
     if (hasChanged && entryDraft.entry) {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import classNames from '@staticcms/core/lib/util/classNames.util';
+import { isNullish } from '@staticcms/core/lib/util/null.util';
 import { isEmpty } from '../../../lib/util/string.util';
 import Image from '../../common/image/Image';
 import InlineEditTextField from './InlineEditTextField';
@@ -16,6 +17,7 @@ interface CurrentMediaDetailsProps {
   alt?: string;
   insertOptions?: MediaLibrarInsertOptions;
   forImage: boolean;
+  replaceIndex?: number;
   onUrlChange: (url: string) => void;
   onAltChange: (alt: string) => void;
 }
@@ -28,16 +30,25 @@ const CurrentMediaDetails: FC<CurrentMediaDetailsProps> = ({
   alt,
   insertOptions,
   forImage,
+  replaceIndex,
   onUrlChange,
   onAltChange,
 }) => {
+  if (!field || !canInsert) {
+    return null;
+  }
+
+  if (Array.isArray(url)) {
+    if (isNullish(replaceIndex)) {
+      return null;
+    }
+  }
+
   if (
-    !field ||
-    !canInsert ||
-    Array.isArray(url) ||
-    (!insertOptions?.chooseUrl &&
-      !insertOptions?.showAlt &&
-      (typeof url !== 'string' || isEmpty(url)))
+    !Array.isArray(url) &&
+    !insertOptions?.chooseUrl &&
+    !insertOptions?.showAlt &&
+    (typeof url !== 'string' || isEmpty(url))
   ) {
     return null;
   }
@@ -67,7 +78,7 @@ const CurrentMediaDetails: FC<CurrentMediaDetailsProps> = ({
       {forImage ? (
         <Image
           key="image-preview"
-          src={url}
+          src={Array.isArray(url) ? url[replaceIndex!] : url}
           collection={collection}
           field={field}
           className="
@@ -107,7 +118,7 @@ const CurrentMediaDetails: FC<CurrentMediaDetailsProps> = ({
       >
         <InlineEditTextField
           label="URL"
-          value={url}
+          value={Array.isArray(url) ? url[replaceIndex!] : url}
           onChange={insertOptions?.chooseUrl ? onUrlChange : undefined}
         />
         {insertOptions?.showAlt ? (

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

@@ -94,6 +94,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
     value: initialValue,
     alt: initialAlt,
     insertOptions,
+    replaceIndex,
   } = useAppSelector(selectMediaLibraryState);
 
   const entry = useAppSelector(selectEditingDraft);
@@ -485,6 +486,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
           alt={alt}
           insertOptions={insertOptions}
           forImage={forImage}
+          replaceIndex={replaceIndex}
           onUrlChange={handleURLChange}
           onAltChange={handleAltChange}
         />