@griddo/ax 1.65.27 → 1.66.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.65.27",
+  "version": "1.66.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -221,5 +221,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "81abc826fbd955f0e6c82325a7290ec20c4778b7"
+  "gitHead": "48f0e2027ddcce4188e6bed411ecaab485ddb7e5"
 }

package/src/GlobalStore.tsx

@@ -19,6 +19,7 @@ import { galleryReducer, galleryInitialState } from "./containers/Gallery/reduce
 import { domainsReducer, domainsInitialState } from "./containers/Domains/reducer";
 import { redirectsReducer, redirectsInitialState } from "./containers/Redirects/reducer";
 import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/reducer";
+import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
 
@@ -54,10 +55,10 @@ export class GlobalStore {
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
-      if (action.type === "RESET") {
+      if (action.type === LOGOUT) {
         state = {
-          router: undefined,
-          app: appInitialState,
+          router: state?.router,
+          app: state?.app || appInitialState,
           sites: sitesInitialState,
           pageEditor: pageEditorInitialState,
           menu: menuInitialState,

package/src/api/structuredData.tsx

@@ -34,6 +34,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/structured_data_content/",
     method: "DELETE",
   },
+  GET_DATA_CONTENT_BULK: {
+    ...template,
+    endpoint: "/structured_data_content/bulk/",
+    method: "GET",
+  },
   DELETE_DATA_CONTENT_BULK: {
     ...template,
     endpoint: "/structured_data_content/bulk",
@@ -73,7 +78,7 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     ...template,
     endpoint: ["/site/", "/structured_data"],
     method: "GET",
-  }
+  },
 };
 
 const getData = (token: string | null, siteID?: number | null) => {
@@ -145,6 +150,14 @@ const deleteDataContent = async (dataContentId: number) => {
   return sendRequest(SERVICES.DELETE_DATA_CONTENT);
 };
 
+const getDataContentBulk = (dataContentIDs: number[], siteID?: number) => {
+  const { host, endpoint } = SERVICES.GET_DATA_CONTENT_BULK;
+  const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
+  const ids = dataContentIDs.join(",");
+  SERVICES.GET_DATA_CONTENT_BULK.dynamicUrl = `${url}${ids}`;
+  return sendRequest(SERVICES.GET_DATA_CONTENT_BULK);
+};
+
 const deleteDataContentBulk = (dataContentID: number[]) => {
   return sendRequest(SERVICES.DELETE_DATA_CONTENT_BULK, { ids: dataContentID });
 };
@@ -226,4 +239,5 @@ export default {
   setDataStatus,
   setDataStatusBulk,
   getContentTypes,
+  getDataContentBulk,
 };

package/src/components/Browser/index.tsx

@@ -3,7 +3,7 @@ import { FrameContextConsumer } from "react-frame-component";
 import { StyleSheetManager } from "styled-components";
 
 import * as components from "components";
-import { providers, builderSSR, ssrHelpers } from "components";
+import { SiteProvider, builderSSR, ssrHelpers } from "components";
 import { Preview } from "@griddo/core";
 import { findByEditorID } from "@ax/forms";
 import { copyTextToClipboard } from "@ax/helpers";
@@ -33,7 +33,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
-  const { SiteProvider, AnimationProvider } = providers;
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -111,20 +110,18 @@ const Browser = (props: IBrowserProps): JSX.Element => {
       publicApiUrl={PUBLIC_API_URL}
       siteId={siteID}
     >
-      <AnimationProvider showOnScroll={{ active: false }}>
-        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-          <Preview
-            isPage={isPage}
-            apiUrl={API_URL}
-            library={components}
-            content={content}
-            header={header}
-            footer={footer}
-            languageId={content.language}
-            pageLanguages={content.pageLanguages}
-          />
-        </S.Wrapper>
-      </AnimationProvider>
+      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+        <Preview
+          isPage={isPage}
+          apiUrl={API_URL}
+          library={components}
+          content={content}
+          header={header}
+          footer={footer}
+          languageId={content.language}
+          pageLanguages={content.pageLanguages}
+        />
+      </S.Wrapper>
     </SiteProvider>
   );
 

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -25,6 +25,10 @@ const Field = (props: IProps): JSX.Element => {
     deleteError,
     errors,
     theme,
+    moduleCopy,
+    availableDataPacks,
+    template,
+    setHistoryPush,
   } = props;
 
   const isGroup = field.type === "FieldGroup";
@@ -72,6 +76,10 @@ const Field = (props: IProps): JSX.Element => {
       error={error}
       deleteError={deleteError}
       theme={theme}
+      moduleCopy={moduleCopy}
+      availableDataPacks={availableDataPacks}
+      template={template}
+      setHistoryPush={setHistoryPush}
     />
   );
 };
@@ -97,6 +105,10 @@ interface IProps {
   errors: IErrorItem[];
   collapsed?: boolean;
   theme: string;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  availableDataPacks: Record<string, any>[];
+  template: any;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
 }
 
 export default Field;

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -25,6 +25,9 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     deleteError,
     errors,
     theme,
+    moduleCopy,
+    availableDataPacks,
+    setHistoryPush,
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -92,6 +95,10 @@ export const TemplateManager = (props: IProps): JSX.Element => {
               deleteError={deleteError}
               errors={errors}
               theme={theme}
+              moduleCopy={moduleCopy}
+              availableDataPacks={availableDataPacks}
+              template={template}
+              setHistoryPush={setHistoryPush}
             />
           );
         })}
@@ -116,11 +123,15 @@ interface IProps {
   deleteError(error: IErrorItem): void;
   errors: IErrorItem[];
   theme: string;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  availableDataPacks: Record<string, any>[];
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   activatedPacks: state.dataPacks.activated,
   activatedModules: state.dataPacks.modules,
+  availableDataPacks: state.dataPacks.available,
 });
 
 export default connect(mapStateToProps)(TemplateManager);

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -34,6 +34,10 @@ const PageConnectedField = (props: any) => {
     deleteError,
     isGlobal,
     theme,
+    moduleCopy,
+    availableDataPacks,
+    template,
+    setHistoryPush,
   } = props;
 
   const isTemplate = field.type === "template";
@@ -155,6 +159,8 @@ const PageConnectedField = (props: any) => {
         deleteError={deleteError}
         errors={errors}
         theme={theme}
+        moduleCopy={moduleCopy}
+        setHistoryPush={setHistoryPush}
       />
     );
   }
@@ -179,6 +185,10 @@ const PageConnectedField = (props: any) => {
       deleteError={deleteError}
       errors={errors}
       theme={theme}
+      moduleCopy={moduleCopy}
+      availableDataPacks={availableDataPacks}
+      template={template}
+      setHistoryPush={setHistoryPush}
     />
   );
 };
@@ -193,6 +203,9 @@ const mapStateToProps = (state: IRootState) => ({
   templateConfig: state.pageEditor.templateConfig,
   activatedModules: state.dataPacks.modules,
   errors: state.pageEditor.errors,
+  moduleCopy: state.pageEditor.moduleCopy,
+  availableDataPacks: state.dataPacks.available,
+  template: state.pageEditor.template,
 });
 
 const mapDispatchToProps = {

package/src/components/ConfigPanel/Form/index.tsx

@@ -6,7 +6,7 @@ import { Tabs } from "@ax/components";
 import ConnectedField from "./ConnectedField";
 
 export const Form = (props: IProps): JSX.Element => {
-  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme } = props;
+  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme, setHistoryPush } = props;
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
@@ -29,6 +29,7 @@ export const Form = (props: IProps): JSX.Element => {
         isPage={isPage}
         isGlobal={isGlobal}
         theme={theme}
+        setHistoryPush={setHistoryPush}
       />
     );
   };
@@ -69,6 +70,7 @@ interface IProps {
   isPage: boolean;
   isGlobal?: boolean;
   theme: string;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
 }
 
 export default Form;

package/src/components/ConfigPanel/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { isEmptyObj } from "@ax/helpers";
 
 import { Loading } from "@ax/components";
@@ -10,7 +10,9 @@ import NavigationForm from "./NavigationForm";
 import GlobalPageForm from "./GlobalPageForm";
 import PreviewForm from "./PreviewForm";
 
-const NAV_COMPONENTS = ["Header", "Footer"];
+import * as S from "./style";
+
+const navigationModulesTypes = ["header", "footer"];
 
 const ConfigPanel = (props: IStateProps): JSX.Element => {
   const {
@@ -31,13 +33,23 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     isReadOnly,
     userEditing,
     theme,
+    lastElementAddedId,
   } = props;
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (lastElementAddedId && wrapperRef.current) {
+      const element = document.querySelector(`.editorId-${lastElementAddedId}`);
+      element && element.scrollIntoView();
+    }
+  }, [lastElementAddedId]);
+
   if (isLoading || isEmptyObj(schema)) {
     return <Loading />;
   }
 
-  const showNavigationForm = NAV_COMPONENTS.includes(schema.component) && isPage;
+  const showNavigationForm = navigationModulesTypes.includes(schema.type) && isPage;
   const isGlobalPageNotEditable = isGlobal && isPage && !isEditable;
 
   const getForm = () => {
@@ -67,13 +79,14 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           isPage={isPage}
           isGlobal={isGlobal}
           theme={theme}
+          setHistoryPush={setHistoryPush}
         />
       );
     }
   };
 
   return (
-    <>
+    <S.Wrapper ref={wrapperRef}>
       <Header
         schema={schema}
         actions={actions}
@@ -83,7 +96,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
         setSelectedContent={setSelectedContent}
       />
       {getForm()}
-    </>
+    </S.Wrapper>
   );
 };
 
@@ -105,6 +118,7 @@ interface IStateProps {
   isReadOnly?: boolean;
   userEditing?: IUserEditing | null;
   theme: string;
+  lastElementAddedId?: null | number;
 }
 
 export default ConfigPanel;

package/src/components/ConfigPanel/style.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div``;
+
+export { Wrapper };

package/src/components/FieldContainer/index.tsx

@@ -77,4 +77,8 @@ interface IProps {
   error?: any;
   deleteError?(error: any): void;
   theme: string;
+  moduleCopy?: { date: string; element: Record<string, unknown> } | null;
+  availableDataPacks?: Record<string, unknown>[];
+  template?: any;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
 }

package/src/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/index.tsx

@@ -0,0 +1,49 @@
+import React, { memo } from "react";
+
+import { useToast } from "@ax/hooks";
+import { Tooltip, IconAction, Toast } from "@ax/components";
+import { INotification } from "@ax/types";
+
+const PasteModuleButton = (props: IProps): JSX.Element => {
+  const { pasteModule, setNotification, setHistoryPush, editorID, isModuleCopyUnavailable } = props;
+
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
+  const handlePasteModule = async () => {
+    if (!isModuleCopyUnavailable) {
+      const pasteResult = await pasteModule(editorID);
+      if (pasteResult.error) {
+        const { type, text } = pasteResult.error;
+        setNotification && setNotification({ type, text });
+      }
+      toggleToast();
+    } else {
+      const notification: INotification = {
+        type: "error",
+        text: "You are trying to paste a module that is part of a disabled content type package. To copy it, you must first activate it.",
+        btnText: "Activate package",
+        onClick: () => setHistoryPush && setHistoryPush("/sites/settings/content-types", false),
+      };
+      setNotification && setNotification(notification);
+    }
+  };
+
+  return (
+    <>
+      <Tooltip content="Paste from clipboard">
+        <IconAction icon="paste" onClick={handlePasteModule} />
+      </Tooltip>
+      {isVisible && <Toast message="Module pasted from clipboard" setIsVisible={setIsVisible} />}
+    </>
+  );
+};
+
+interface IProps {
+  pasteModule: (editorID: number) => Promise<{ error?: INotification }>;
+  setNotification?: (notification: INotification) => void;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  editorID: number;
+  isModuleCopyUnavailable: boolean;
+}
+
+export default memo(PasteModuleButton);

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -1,10 +1,12 @@
 import React from "react";
+import differenceInSeconds from 'date-fns/differenceInSeconds';
 
 import { IModule } from "@ax/types";
 import { ComponentContainer } from "@ax/components";
 
-import AddItemButton from "./AddItemButton";
 import { getComponentProps, containerToComponentArray, getTypefromKey } from "../helpers";
+import AddItemButton from "./AddItemButton";
+import PasteModuleButton from "./PasteModuleButton";
 
 import * as S from "./style";
 
@@ -25,8 +27,22 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     field,
     mandatory,
     theme,
+    moduleCopy,
+    availableDataPacks,
+    template,
+    setHistoryPush,
   } = props;
 
+  const moduleCopyComponent = moduleCopy?.element.component;
+  const availableDataPackModule = availableDataPacks?.reduce((prev: any, curr: any) => {
+    const packModule = curr.modules.find((module: any) => module.id === moduleCopyComponent);
+    return prev || packModule;
+  }, null);
+  const isModuleCopyUnavailable =
+    availableDataPackModule &&
+    !whiteList.includes(moduleCopyComponent) &&
+    !!availableDataPackModule?.sectionList[template.component]?.includes(field.key);
+
   const type = getTypefromKey(objKey);
   const { contentType = type } = field;
 
@@ -54,7 +70,16 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
-  const showAddItemButton = !maxItems || fixedValue.length < maxItems;
+  const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled;
+
+  const timeSinceModuleCopy = !!moduleCopy && differenceInSeconds(new Date(), new Date(moduleCopy.date));
+  const eightHoursInSeconds = 8 * 60 * 60;
+  const showPasteModuleButton =
+    showAddItemButton &&
+    isModuleArr &&
+    !!moduleCopy &&
+    timeSinceModuleCopy < eightHoursInSeconds &&
+    (whiteList.includes(moduleCopyComponent) || isModuleCopyUnavailable);
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
@@ -65,15 +90,26 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
       </S.Title>
       <S.ItemRow>
         <S.Subtitle>{fixedValue && fixedValue.length} items</S.Subtitle>
-        {showAddItemButton && !disabled && (
-          <AddItemButton
-            whiteList={whiteList}
-            categories={categories}
-            handleClick={handleAdd}
-            isModuleArr={isModuleArr}
-            theme={theme}
-          />
-        )}
+        <S.ActionsWrapper>
+          {showPasteModuleButton && (
+            <PasteModuleButton
+              editorID={editorID}
+              isModuleCopyUnavailable={isModuleCopyUnavailable}
+              pasteModule={actions.pasteModuleAction}
+              setNotification={actions.setNotificationAction}
+              setHistoryPush={setHistoryPush}
+            />
+          )}
+          {showAddItemButton && (
+            <AddItemButton
+              whiteList={whiteList}
+              categories={categories}
+              handleClick={handleAdd}
+              isModuleArr={isModuleArr}
+              theme={theme}
+            />
+          )}
+        </S.ActionsWrapper>
       </S.ItemRow>
       {fixedValue &&
         fixedValue.map((element: any, i: number) => {
@@ -125,6 +161,10 @@ export interface IMixableComponentArrayProps {
   field: any;
   mandatory?: boolean;
   theme: string;
+  moduleCopy: { date: string; element: Record<string, any> } | null;
+  availableDataPacks: Record<string, any>[];
+  template: any;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
 }
 
 export default MixableComponentArray;

package/src/components/Fields/ComponentArray/MixableComponentArray/style.tsx

@@ -52,4 +52,17 @@ const Asterisk = styled.span`
   color: ${(p) => p.theme.color.error};
 `;
 
-export { Wrapper, Title, Component, ItemRow, Subtitle, Asterisk };
+const ActionsWrapper = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.xxs};
+`;
+
+export {
+  Wrapper,
+  Title,
+  Component,
+  ItemRow,
+  Subtitle,
+  Asterisk,
+  ActionsWrapper
+};

package/src/components/Fields/ComponentContainer/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { useModal } from "@ax/hooks";
+import { useModal, useToast } from "@ax/hooks";
 import { isEmptyContainer, getDisplayName, trimText } from "@ax/helpers";
-import { Icon, SideModal } from "@ax/components";
+import { Icon, SideModal, Toast } from "@ax/components";
 import EmptyContainer from "./EmptyContainer";
 import { ArrayContainerButtons, ContainerButtons } from "./atoms";
 
@@ -27,17 +27,21 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     disabled,
     canDuplicate,
     parentKey,
-    theme
+    theme,
   } = props;
 
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
   let deleteModuleAction: any;
   let moveModuleAction: any;
   let duplicateModuleAction: any;
+  let copyModuleAction: any;
 
   if (actions) {
     deleteModuleAction = actions.deleteModuleAction;
     moveModuleAction = actions.moveModuleAction;
     duplicateModuleAction = actions.duplicateModuleAction;
+    copyModuleAction = actions.copyModuleAction;
   }
 
   const whiteListFirstItem: any = whiteList && whiteList[0];
@@ -69,6 +73,16 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
   const removeItem = () => deleteModuleAction(editorID, parentKey);
   const duplicateItem = () => parentKey && duplicateModuleAction(editorID, parentKey);
+  const copyItem = () => {
+    const isCopied = copyModuleAction(editorID);
+    isCopied && toggleToast();
+  }
+
+  const copyOpt = {
+    label: "copy",
+    icon: "duplicate",
+    action: copyItem,
+  };
 
   const duplicateOpt = {
     label: "duplicate",
@@ -82,7 +96,11 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     action: removeItem,
   };
 
-  const actionArrayMenuOptions = !canDuplicate ? [deleteOpt] : [duplicateOpt, deleteOpt];
+  const actionArrayMenuOptions =  [
+    copyOpt,
+    ...(canDuplicate ? [duplicateOpt] : []),
+    deleteOpt
+  ];
 
   const actionMenuOptions = [
     {
@@ -130,7 +148,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     />
   ) : (
     <>
-      <S.Component isArray={isArray} onClick={handleClick} disabled={disabled}>
+      <S.Component isArray={isArray} onClick={handleClick} disabled={disabled} className={`editorId-${editorID}`}>
         {containerInfo && !disabled && (
           <S.IconWrapper>
             <Icon name={containerText} />
@@ -160,6 +178,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
           theme={theme}
         />
       )}
+        {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
     </>
   );
 };

package/src/components/Fields/ImageField/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from "react";
-import { Icon, IconAction, Gallery, Modal } from "@ax/components";
+import { Icon, IconAction, Gallery, Modal, Image } from "@ax/components";
 
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
 import { IImage, ISite } from "@ax/types";
@@ -8,8 +8,18 @@ import { useModal } from "@ax/hooks";
 import * as S from "./style";
 
 const ImageField = (props: IImageFieldProps) => {
-  const { value, error, onChange, selectedContent, disabled, handleValidation, validators, site, setIsGalleryOpened } =
-    props;
+  const {
+    value,
+    error,
+    onChange,
+    selectedContent,
+    disabled,
+    handleValidation,
+    validators,
+    site,
+    setIsGalleryOpened,
+    cropPreview = false,
+  } = props;
 
   const isLinkableImage = selectedContent && selectedContent.component === "LinkableImage";
   const hasImage = value && Object.prototype.hasOwnProperty.call(value, "url");
@@ -54,6 +64,8 @@ const ImageField = (props: IImageFieldProps) => {
     }
   };
 
+  const previewHeight = cropPreview ? { height: 190 } : {};
+
   return (
     <>
       <S.FieldWrapper error={error} preview={!!previewSrc} disabled={disabled} onClick={handleClick}>
@@ -73,7 +85,7 @@ const ImageField = (props: IImageFieldProps) => {
         </S.ImageDataWrapper>
       )}
       <S.Preview preview={!!previewSrc}>
-        <img src={previewSrc} alt="Preview" />
+        {previewSrc && <Image url={previewSrc} width={320} {...previewHeight} />}
         <S.PreviewActions>
           <IconAction icon="change" onClick={handleChange} />
           <IconAction icon="delete" onClick={handleDelete} />
@@ -96,6 +108,7 @@ interface IImageFieldProps {
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
   site: ISite;
+  cropPreview?: boolean;
 }
 
-export default memo(ImageField);
+export default memo(ImageField);