@wix/patterns-fields 1.124.0 → 1.126.0

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "fieldvalidationsettingsinput257954205";
+var _namespace_ = "fieldvalidationsettingsinput3114297852";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fieldvalidationsettingsinput257954205__root","specificValuesInput":"fieldvalidationsettingsinput257954205__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput3114297852__root","specificValuesInput":"fieldvalidationsettingsinput3114297852__specificValuesInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2399701812";
+var _namespace_ = "highlightedtext270952920";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2399701812__root","substring":"highlightedtext2399701812__substring"};
-export var keyframes = {"highlighted":"highlightedtext2399701812__highlighted","highlighted-match":"highlightedtext2399701812__highlighted-match"}; 
+export var classes = {"root":"highlightedtext270952920__root","substring":"highlightedtext270952920__substring"};
+export var keyframes = {"highlighted":"highlightedtext270952920__highlighted","highlighted-match":"highlightedtext270952920__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay4212077662";
+var _namespace_ = "thumbnailreplaceoverlay357761885";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay4212077662__root","icon":"thumbnailreplaceoverlay4212077662__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay357761885__root","icon":"thumbnailreplaceoverlay357761885__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell3858838089";
+var _namespace_ = "cellmediaeditshell2678266369";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell3858838089__root"};
+export var classes = {"root":"cellmediaeditshell2678266369__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton895096232";
+var _namespace_ = "pasteurlbutton3562431376";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton895096232__root","iconButtonTooltip":"pasteurlbutton895096232__iconButtonTooltip","iconButton":"pasteurlbutton895096232__iconButton"};
+export var classes = {"root":"pasteurlbutton3562431376__root","iconButtonTooltip":"pasteurlbutton3562431376__iconButtonTooltip","iconButton":"pasteurlbutton3562431376__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield3450096841";
+var _namespace_ = "formmediagalleryfield445299435";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield3450096841__root","container":"formmediagalleryfield3450096841__container","viewBox":"formmediagalleryfield3450096841__viewBox","addItemWrapper":"formmediagalleryfield3450096841__addItemWrapper","addItem":"formmediagalleryfield3450096841__addItem","overlay":"formmediagalleryfield3450096841__overlay","image":"formmediagalleryfield3450096841__image","previewImage":"formmediagalleryfield3450096841__previewImage","previewVideo":"formmediagalleryfield3450096841__previewVideo"};
+export var classes = {"root":"formmediagalleryfield445299435__root","container":"formmediagalleryfield445299435__container","viewBox":"formmediagalleryfield445299435__viewBox","addItemWrapper":"formmediagalleryfield445299435__addItemWrapper","addItem":"formmediagalleryfield445299435__addItem","overlay":"formmediagalleryfield445299435__overlay","image":"formmediagalleryfield445299435__image","previewImage":"formmediagalleryfield445299435__previewImage","previewVideo":"formmediagalleryfield445299435__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/media-preview-modal.tsx

@@ -59,7 +59,7 @@ export const MediaPreviewModal: React.FC<MediaPreviewProps> = ({
   }
 
   return (
-    <Modal isOpen screen="full">
+    <Modal isOpen screen="full" onRequestClose={onClose}>
       <MediaPreviewLayout
         src={value}
         onClose={onClose}
@@ -143,6 +143,7 @@ const MediaPreviewLayout: React.FC<MediaPreviewLayoutProps> = ({
               size="small"
               skin="light"
               prefixIcon={<Replace />}
+              dataHook="preview-modal-replace-button"
               onClick={onReplace}
               disabled={readOnly}
             >

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage2827756990";
+var _namespace_ = "mediaimage2523230102";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage2827756990__root"};
+export var classes = {"root":"mediaimage2523230102__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2827756990-from","to":"--mediaimage2827756990-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2523230102-from","to":"--mediaimage2523230102-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay748369807";
+var _namespace_ = "overlay404814470";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay748369807__root","iconOverlay":"overlay748369807__iconOverlay"};
+export var classes = {"root":"overlay404814470__root","iconOverlay":"overlay404814470__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit2503392614";
+var _namespace_ = "cellmediaimageedit2941294818";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaimageedit2503392614__root","view":"cellmediaimageedit2503392614__view","anchor":"cellmediaimageedit2503392614__anchor","anchorBox":"cellmediaimageedit2503392614__anchorBox","popoverContent":"cellmediaimageedit2503392614__popoverContent","image":"cellmediaimageedit2503392614__image","imageActions":"cellmediaimageedit2503392614__imageActions"};
+export var classes = {"root":"cellmediaimageedit2941294818__root","view":"cellmediaimageedit2941294818__view","anchor":"cellmediaimageedit2941294818__anchor","anchorBox":"cellmediaimageedit2941294818__anchorBox","popoverContent":"cellmediaimageedit2941294818__popoverContent","image":"cellmediaimageedit2941294818__image","imageActions":"cellmediaimageedit2941294818__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.tsx

@@ -5,19 +5,9 @@ import {
   IconButton,
   Input,
   Popover,
-  PopoverMenu,
   Tooltip,
 } from '@wix/design-system';
-import {
-  Add,
-  Delete,
-  Download,
-  Link,
-  LinkSmall,
-  Maximize,
-  MoreSmall,
-  Replace,
-} from '@wix/wix-ui-icons-common/lazy';
+import { Add, LinkSmall } from '@wix/wix-ui-icons-common/lazy';
 import { ThumbnailSize } from '../../auto-field-types';
 import { useTranslations } from '../../hooks';
 import type { MediaImageValue } from '../../types/media-image';
@@ -30,14 +20,18 @@ import {
   toMediaImageValue,
   withAltText,
 } from '../../utils/media-image-value';
-import { executeDownloading, MEDIA_TYPES } from '../../utils/media-utils';
+import { MEDIA_TYPES } from '../../utils/media-utils';
 import {
   CellMediaEditShell,
   MediaFieldType,
   useCellMediaEdit,
 } from '../media-control';
-import { MediaPreviewModal } from '../media-gallery/media-preview-modal';
 import { MediaImage } from '../media-image';
+import {
+  MediaImageActions,
+  MediaImagePreviewModal,
+  useMediaImageDownload,
+} from './media-image-actions';
 import { MediaImageView } from './media-image-view';
 import { st, classes } from './cell-media-image-edit.st.css.js';
 
@@ -64,45 +58,6 @@ type Layer = PopoverLayer | 'pasteUrl' | 'loading';
 const imageFromUrl = (url: string, current: MediaImageValue | null) =>
   replaceImage(current, fromImageUrl(url));
 
-interface MenuTriggerProps {
-  isOpen: boolean;
-  toggle: () => void;
-  /** Lets WDS put focus back here when the menu closes. */
-  buttonRef?: React.RefObject<HTMLElement>;
-  onOpenChange: (isOpen: boolean) => void;
-  ariaLabel: string;
-}
-
-/** WDS shows the menu's open state only to its trigger, so the trigger
- *  reports it. */
-const MenuTrigger: React.FC<MenuTriggerProps> = ({
-  isOpen,
-  toggle,
-  buttonRef,
-  onOpenChange,
-  ariaLabel,
-}) => {
-  useEffect(() => {
-    onOpenChange(isOpen);
-  }, [isOpen, onOpenChange]);
-
-  return (
-    <IconButton
-      ref={buttonRef}
-      size="small"
-      skin="light"
-      priority="secondary"
-      dataHook="media-image-edit-more-button"
-      ariaLabel={ariaLabel}
-      aria-haspopup="menu"
-      aria-expanded={isOpen}
-      onClick={toggle}
-    >
-      <MoreSmall />
-    </IconButton>
-  );
-};
-
 /**
  * Edits a `MEDIA_IMAGE` cell. An empty cell shows the add and paste-URL
  * buttons. A cell with an image opens a popover with the image and its alt
@@ -158,14 +113,7 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
     value: isExternalMediaImage(image) ? image.url : undefined,
   });
 
-  const handleDownload = useCallback(() => {
-    // The Media Manager can't make a download link for an external URL.
-    if (isExternalMediaImage(image)) {
-      executeDownloading(image.url);
-    } else if (src) {
-      downloadMedia(src);
-    }
-  }, [src, image, downloadMedia]);
+  const handleDownload = useMediaImageDownload(image, downloadMedia);
 
   const commit = useCallback(() => {
     setPopoverLayer('none');
@@ -265,7 +213,9 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
                 shown={openLayer === 'popover' || openLayer === 'menu'}
                 appendTo="window"
                 placement="bottom-start"
-                moveBy={{ x: 0, y: 4 }}
+                // The anchor sits inside the cell's 1px border. Figma puts the
+                // popover 4px under the border, aligned with its left edge.
+                moveBy={{ x: -1, y: 5 }}
                 zIndex={5001}
                 animate
                 flip
@@ -301,64 +251,16 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
                             menuOpen: popoverLayer === 'menu',
                           })}
                         >
-                          <Tooltip
-                            content={t('CMS.image.replace')}
-                            appendTo="window"
-                          >
-                            <IconButton
-                              size="small"
-                              skin="light"
-                              priority="secondary"
-                              dataHook="media-image-edit-replace-button"
-                              ariaLabel={t('CMS.image.replace')}
-                              onClick={handleCallMedia}
-                            >
-                              <Replace />
-                            </IconButton>
-                          </Tooltip>
-                          <PopoverMenu
-                            textSize="small"
-                            appendTo="window"
-                            zIndex={5002}
-                            triggerElement={({ isOpen, toggle, ref }) => (
-                              <MenuTrigger
-                                isOpen={isOpen}
-                                toggle={toggle}
-                                buttonRef={ref}
-                                onOpenChange={handleMenuOpenChange}
-                                ariaLabel={t(
-                                  'auto-patterns.fields.more_actions_tooltip',
-                                )}
-                              />
-                            )}
-                          >
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-replace-url"
-                              text={t('CMS.image.replaceWithUrl.button')}
-                              prefixIcon={<Link />}
-                              onClick={openPasteUrl}
-                            />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-preview"
-                              text={t('CMS.mediaGallery.preview')}
-                              prefixIcon={<Maximize />}
-                              onClick={() => setPopoverLayer('preview')}
-                            />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-download"
-                              text={t('CMS.image.download')}
-                              prefixIcon={<Download />}
-                              onClick={handleDownload}
-                            />
-                            <PopoverMenu.Divider />
-                            <PopoverMenu.MenuItem
-                              dataHook="media-image-edit-action-delete"
-                              text={t('CMS.image.clear')}
-                              skin="destructive"
-                              prefixIcon={<Delete />}
-                              onClick={handleDelete}
-                            />
-                          </PopoverMenu>
+                          <MediaImageActions
+                            dataHook="media-image-edit"
+                            onReplace={handleCallMedia}
+                            onReplaceWithUrl={openPasteUrl}
+                            onPreview={() => setPopoverLayer('preview')}
+                            onDownload={handleDownload}
+                            onDelete={handleDelete}
+                            onMenuOpenChange={handleMenuOpenChange}
+                            menuZIndex={5002}
+                          />
                         </div>
                       </div>
                     </FormField>
@@ -382,18 +284,13 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
         )}
       </CellMediaEditShell>
       {image && (
-        <MediaPreviewModal
+        <MediaImagePreviewModal
           isOpen={popoverLayer === 'preview'}
-          value={src}
+          image={image}
           onClose={() => setPopoverLayer('popover')}
-          onRequestMedia={handleCallMedia}
-          onClearMedia={handleDelete}
-          onDownloadMedia={handleDownload}
-          textKeys={{
-            replace: 'CMS.image.replace',
-            download: 'CMS.image.download',
-            delete: 'CMS.image.clear',
-          }}
+          onReplace={handleCallMedia}
+          onDelete={handleDelete}
+          onDownload={handleDownload}
         />
       )}
     </>

package/src/components/media-image-field/form-media-image-field.tsx

@@ -1,9 +1,17 @@
 import type { FC } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import type { FormFieldProps } from '@wix/design-system';
-import { Box, FormField, ImageViewer, Input } from '@wix/design-system';
+import {
+  Box,
+  FormField,
+  Image,
+  ImageViewer,
+  Input,
+  MediaOverlay,
+} from '@wix/design-system';
 import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
 
+import { Z_INDEX_MODAL_POPOVER } from '../common';
 import type { ControlledInputProps } from '../../types/controlled-input';
 import type { MediaImageValue } from '../../types/media-image';
 import { useMergedRef, useTranslations } from '../../hooks';
@@ -11,12 +19,25 @@ import { getImageSource } from '../../utils/get-image-source';
 import { getImageUrl } from '../../utils/get-image-url';
 import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
 import {
+  fromImageUrl,
   fromMediaManagerPick,
+  isExternalMediaImage,
+  replaceImage,
   toMediaImageValue,
   withAltText,
 } from '../../utils/media-image-value';
 import { MEDIA_TYPES } from '../../utils/media-utils';
-import { useMediaControl } from '../media-control';
+import {
+  MediaFieldType,
+  PasteURLForm,
+  useMediaControl,
+  usePasteURLForm,
+} from '../media-control';
+import {
+  MediaImageActions,
+  MediaImagePreviewModal,
+  useMediaImageDownload,
+} from './media-image-actions';
 
 interface ImageViewerActions {
   focus: () => void;
@@ -77,7 +98,7 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     [onChange],
   );
 
-  const { callMedia, onMediaLoad } = useMediaControl({
+  const { callMedia, downloadMedia } = useMediaControl({
     mediaType: MEDIA_TYPES.IMAGE,
     value: getImageSource(image),
     onChange: handlePick,
@@ -85,9 +106,28 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     readOnly,
     onBlur,
     inputRef,
-    initialLoading: true,
   });
 
+  const pasteUrlForm = usePasteURLForm({
+    onChange: (url) =>
+      onChange(replaceImage(imageRef.current, fromImageUrl(url))),
+  });
+  const openPasteUrl = pasteUrlForm.onOpen({
+    title: t('CMS.image.replaceWithUrl.title'),
+    value: isExternalMediaImage(image) ? image.url : undefined,
+  });
+
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const handleDownload = useMediaImageDownload(image, downloadMedia);
+  const handleDelete = useCallback(() => {
+    setIsPreviewOpen(false);
+    onChange(null);
+  }, [onChange]);
+  const handlePreviewReplace = useCallback(() => {
+    setIsPreviewOpen(false);
+    callMedia();
+  }, [callMedia]);
+
   const canEdit = !isMobile && !readOnly;
 
   const handleAltTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -100,24 +140,47 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
     <Box dataHook={dataHook} gap="SP4" width="100%">
       <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} flexShrink={0}>
         <FormField {...imageFormFieldProps} dataHook="media-image-field-image">
-          <ImageViewer
-            ref={setInputRef}
-            dataHook="media-image-field-viewer"
-            imageUrl={image ? getImageUrl(image) : undefined}
-            onImageLoad={onMediaLoad}
-            onAddImage={canEdit ? callMedia : undefined}
-            onUpdateImage={canEdit ? callMedia : undefined}
-            disabled={image ? Boolean(readOnly) : !canEdit}
-            showUpdateButton={canEdit}
-            showRemoveButton={!readOnly}
-            updateImageInfo={translate('cairo.replace-image.tooltip')}
-            removeImageInfo={translate('cairo.remove-image.tooltip')}
-            addImageInfo={translate('cairo.add-image.tooltip')}
-            height={MEDIA_HEIGHT}
-            width="100%"
-            fit="cover"
-            onRemoveImage={() => onChange(null)}
-          />
+          {image ? (
+            <MediaOverlay
+              dataHook="media-image-field-overlay"
+              hoverSkin="dark"
+              media={
+                <Image
+                  dataHook="media-image-field-current-image"
+                  src={getImageUrl(image)}
+                  width="100%"
+                  height={MEDIA_HEIGHT}
+                  fit="cover"
+                />
+              }
+            >
+              <MediaOverlay.Content placement="middle" visible="hover">
+                <Box gap="SP2">
+                  <MediaImageActions
+                    dataHook="media-image-field"
+                    onReplace={canEdit ? callMedia : undefined}
+                    onReplaceWithUrl={readOnly ? undefined : openPasteUrl}
+                    onPreview={() => setIsPreviewOpen(true)}
+                    onDownload={handleDownload}
+                    onDelete={readOnly ? undefined : handleDelete}
+                    menuZIndex={Z_INDEX_MODAL_POPOVER}
+                  />
+                </Box>
+              </MediaOverlay.Content>
+            </MediaOverlay>
+          ) : (
+            <ImageViewer
+              // Only the empty state has a focusable control, so this is the
+              // only place inputRef can land.
+              ref={setInputRef}
+              dataHook="media-image-field-viewer"
+              onAddImage={canEdit ? callMedia : undefined}
+              disabled={!canEdit}
+              addImageInfo={translate('cairo.add-image.tooltip')}
+              height={MEDIA_HEIGHT}
+              width="100%"
+            />
+          )}
         </FormField>
       </Box>
       {image && (
@@ -133,6 +196,25 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
           </FormField>
         </Box>
       )}
+      <PasteURLForm
+        title={pasteUrlForm.title}
+        value={pasteUrlForm.value}
+        show={pasteUrlForm.isOpen}
+        closeModal={pasteUrlForm.onClose}
+        onSave={pasteUrlForm.onSave}
+        fieldType={MediaFieldType.image}
+      />
+      {image && (
+        <MediaImagePreviewModal
+          isOpen={isPreviewOpen}
+          image={image}
+          onClose={() => setIsPreviewOpen(false)}
+          onReplace={handlePreviewReplace}
+          onDelete={handleDelete}
+          onDownload={handleDownload}
+          readOnly={!canEdit}
+        />
+      )}
     </Box>
   );
 };