@griddo/ax 1.67.10 → 1.68.2

package/src/forms/editor.tsx

@@ -1,4 +1,4 @@
-import { deepClone, getDisplayName } from "@ax/helpers";
+import { deepClone, getSchema, getDisplayName } from "@ax/helpers";
 import { IPage, IBreadcrumbItem } from "@ax/types";
 
 const configKeys = ["headerConfig", "footerConfig"];
@@ -168,6 +168,39 @@ const getParentKey = (parentModule: any, editorID: number) => {
   return keyFound;
 };
 
+const checkMaxModules = (content: any, type: string): { isMaxModules: boolean; errorMessage?: string } => {
+  const { maxModulesPerPage } = getSchema(type);
+  const queue: any[] = [content];
+  let counter = 0;
+
+  while (queue.length > 0 && counter < maxModulesPerPage) {
+    const obj = queue.shift();
+    const currentObj = obj;
+
+    if (currentObj.component === type) {
+      counter++;
+    }
+
+    const keys = currentObj instanceof Object ? Object.keys(currentObj) : [];
+
+    for (const key of keys) {
+      const objVal = currentObj[key];
+      if (objVal instanceof Object) {
+        queue.push(objVal);
+      }
+    }
+  }
+
+  const isMaxModules = counter >= maxModulesPerPage;
+  const maxModulesText = maxModulesPerPage === 1 ? "one" : maxModulesPerPage;
+  const errorMessage = `There can be only ${maxModulesText} ${type} on page. You already have it.`;
+
+  return {
+    isMaxModules,
+    ...(isMaxModules && { errorMessage }),
+  };
+};
+
 export {
   parseData,
   cleanContent,
@@ -181,4 +214,5 @@ export {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 };

package/src/forms/fields.tsx

@@ -56,7 +56,8 @@ const getStructuredDataInnerFields = (
   innerFields: any[],
   content: any,
   updateValue: (value: Record<string, unknown>) => void,
-  theme: string
+  theme: string,
+  errors: IErrorItem[]
 ) => {
   let fieldArr: any[] = [];
 
@@ -72,9 +73,11 @@ const getStructuredDataInnerFields = (
       const value = content && content[key];
 
       if (type === "ConditionalField" || type === "ArrayFieldGroup") {
-        fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme);
+        fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
       }
 
+      const error = errors.find((err: any) => err.key === key);
+
       const fieldProps = {
         value,
         objKey: key,
@@ -84,6 +87,7 @@ const getStructuredDataInnerFields = (
         onChange: handleChange,
         ...singleFieldProps,
         theme,
+        error,
       };
 
       return <FieldsBehavior key={key} {...fieldProps} />;

package/src/forms/index.tsx

@@ -10,6 +10,7 @@ import {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 } from "./editor";
 import {
   getUpdatedComponents,
@@ -63,4 +64,5 @@ export {
   findMandatoryStructuredDataErrors,
   checkH1content,
   parseValidationErrors,
+  checkMaxModules,
 };

package/src/forms/validators.tsx

@@ -213,14 +213,19 @@ const getValidationErrors = (
   fields.forEach((field: any) => {
     if (field.mandatory) {
       const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
-      const isEmpty = isEmptyField(current[field.key], field.type, hasMultipleOptions);
+
+      const isEmpty =
+        !current ||
+        current[field.key] === undefined ||
+        isEmptyField(current[field.key], field.type, hasMultipleOptions);
+
       if (isEmpty) {
         errors.push({
           type: "error",
           message: getErrorMessage("ERR015", null),
           validator: { mandatory: true },
-          editorID: current.editorID ? current.editorID : null,
-          component: current.component ? current.component : null,
+          editorID: current && current.editorID ? current.editorID : null,
+          component: current && current.component ? current.component : null,
           name: name ? name : field.title,
           key: field.key,
           tab,
@@ -229,7 +234,7 @@ const getValidationErrors = (
       }
     }
 
-    if (current.component && field.isMockup) {
+    if (current && current.component && field.isMockup) {
       const { isMockup, defaultValue } = checkMockupContent(
         current.component,
         field.key,
@@ -275,7 +280,11 @@ const getValidationErrors = (
       }
     }
 
-    if (Object.prototype.hasOwnProperty.call(field, "fields") && field.fields.length) {
+    if (
+      Object.prototype.hasOwnProperty.call(field, "fields") &&
+      field.fields.length &&
+      field.type !== "ArrayFieldGroup"
+    ) {
       let innerFields = field.fields;
 
       if (field.type === "ConditionalField") {
@@ -287,6 +296,15 @@ const getValidationErrors = (
       const innerErrors = getValidationErrors(innerFields, current, name, tab, template);
       errors = [...errors, ...innerErrors];
     }
+
+    if (field.type === "ArrayFieldGroup") {
+      current &&
+        current[field.key] &&
+        current[field.key].forEach((item: any) => {
+          const innerErrors = getValidationErrors(field.fields, item, name, tab, template);
+          errors = [...errors, ...innerErrors];
+        });
+    }
   });
 
   return errors;
@@ -338,6 +356,7 @@ const findPackagesActivationErrors = (
       key: "",
       tab: "",
       template: false,
+      hasDeactivatedPackage: true,
     };
   }
 
@@ -397,10 +416,12 @@ const findMandatoryStructuredDataErrors = (content: any, schema: any): IErrorIte
   return errors;
 };
 
-const checkH1content = (content: any): IErrorItem | null => {
-  const h1s = content.getElementsByTagName("h1");
+const checkH1content = (): IErrorItem | null => {
+  const iframe = document.querySelector("iframe");
+  const iframeContent = iframe?.contentWindow?.document;
+  const h1s = iframeContent ? iframeContent.getElementsByTagName("h1") : null;
 
-  if (!h1s.length) {
+  if (h1s && !h1s.length) {
     return {
       type: "warning",
       message: getErrorMessage("ERR018", null),

package/src/guards/error/index.tsx

@@ -50,7 +50,7 @@ const ErrorGuard = (props: IProps) => {
     return domNode && createPortal(Notifications, domNode);
   };
 
-  return code ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
+  return code || text ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
 };
 
 const mapStateToProps = (state: IRootState) => {

package/src/helpers/containerEvaluations.tsx

@@ -1,14 +1,14 @@
 import { IComponent } from "@ax/types";
 import { getDisplayName } from "./schemas";
 
-export const isComponentEmpty = (component: IComponent): boolean => {
+const isComponentEmpty = (component: IComponent): boolean => {
   const keys = Object.keys(component);
   const privateKeys = ["componentID", "component", "parentEditorID"];
 
   return keys.length <= privateKeys.length;
 };
 
-export const setAsContainedComponent = (component: IComponent): IContainedComponent => {
+const setAsContainedComponent = (component: IComponent): IContainedComponent => {
   const displayName = getDisplayName(component.component);
   return {
     containerText: displayName,
@@ -17,7 +17,7 @@ export const setAsContainedComponent = (component: IComponent): IContainedCompon
   };
 };
 
-export const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
+const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
   const components = Object.keys(container);
   const filledComponents: IComponent[] = [];
   let containedComponent: any;
@@ -35,7 +35,7 @@ export const areAllComponentsEmpty = (container: any): IContainerEvaluation => {
   };
 };
 
-export const isEmptyContainer = (container: any, isMultiple?: boolean): IContainerEvaluation => {
+const isEmptyContainer = (container: any, isMultiple?: boolean): IContainerEvaluation => {
   return isMultiple
     ? areAllComponentsEmpty(container)
     : {
@@ -44,6 +44,32 @@ export const isEmptyContainer = (container: any, isMultiple?: boolean): IContain
       };
 };
 
+const areEqual = (prevProps: any, newProps: any): boolean => {
+  if (
+    prevProps.field.type === "FieldGroup" ||
+    (prevProps.field.fields && prevProps.field.fields.length > 0) ||
+    prevProps.selectedEditorID !== newProps.selectedEditorID
+  ) {
+    return false;
+  }
+
+  const {
+    selectedContent: { type },
+  } = prevProps;
+  const isTemplate = type === "template";
+  const prevValue = isTemplate
+    ? prevProps.selectedContent.template[prevProps.objKey]
+    : prevProps.selectedContent[prevProps.objKey];
+  const newValue = isTemplate
+    ? newProps.selectedContent.template[newProps.objKey]
+    : newProps.selectedContent[newProps.objKey];
+
+  const isObject = typeof prevValue === "object";
+  if (isObject) return false;
+
+  return prevValue === newValue;
+};
+
 interface IContainerEvaluation {
   isEmpty: boolean;
   containedComponent: IContainedComponent;
@@ -54,3 +80,5 @@ interface IContainedComponent {
   component: string;
   componentID: number;
 }
+
+export { isComponentEmpty, setAsContainedComponent, areAllComponentsEmpty, isEmptyContainer, areEqual };

package/src/helpers/index.tsx

@@ -3,6 +3,7 @@ import {
   setAsContainedComponent,
   areAllComponentsEmpty,
   isEmptyContainer,
+  areEqual,
 } from "./containerEvaluations";
 
 import {
@@ -178,4 +179,5 @@ export {
   getNavigationModules,
   getDefaultNavigationModules,
   isMultipleNavigationModules,
+  areEqual,
 };

package/src/helpers/structuredData.tsx

@@ -26,9 +26,9 @@ const getFilteredStructuredData = (activatedDataPacks: IDataPack[], structuredDa
 
 const getStructuredDataTitle = (name: string): string => schemas.structuredData[name]?.title;
 
-const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name].fromPage;
+const isStructuredDataFromPage = (name: string): boolean => schemas.structuredData[name]?.fromPage;
 
-const isGlobalStructuredData = (name: string): boolean => !schemas.structuredData[name].local;
+const isGlobalStructuredData = (name: string): boolean => !schemas.structuredData[name]?.local;
 
 const getGlobalPageTypes = (): Record<string, string>[] => {
   const { structuredData } = schemas;

package/src/hooks/forms.tsx

@@ -4,33 +4,6 @@ import isEqual from "lodash.isequal";
 import { deepClone } from "@ax/helpers";
 import { cleanPageValues, getIsSavedData } from "@ax/forms";
 
-const useEqualValue = (component: any) =>
-  memo(component, (prevProps: any, newProps: any) => {
-    if (
-      prevProps.field.type === "FieldGroup" ||
-      (prevProps.field.fields && prevProps.field.fields.length > 0) ||
-      prevProps.selectedEditorID !== newProps.selectedEditorID
-    ) {
-      return false;
-    }
-
-    const {
-      selectedContent: { type },
-    } = prevProps;
-    const isTemplate = type === "template";
-    const prevValue = isTemplate
-      ? prevProps.selectedContent.template[prevProps.objKey]
-      : prevProps.selectedContent[prevProps.objKey];
-    const newValue = isTemplate
-      ? newProps.selectedContent.template[newProps.objKey]
-      : newProps.selectedContent[newProps.objKey];
-
-    const isObject = typeof prevValue === "object";
-    if (isObject) return false;
-
-    return prevValue === newValue;
-  });
-
 const useDebounce = (value: any) => {
   // State and setters for debounced value
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -133,4 +106,4 @@ const useIsDirty = (
   return { isDirty, setIsDirty, resetDirty };
 };
 
-export { useEqualValue, useDebounce, useEqualStructured, usePrevious, useIsDirty };
+export { useDebounce, useEqualStructured, usePrevious, useIsDirty };

package/src/hooks/index.tsx

@@ -1,5 +1,5 @@
 import { useBulkSelection } from "./bulk";
-import { useDebounce, useEqualStructured, useEqualValue, useIsDirty, usePrevious } from "./forms";
+import { useDebounce, useEqualStructured, useIsDirty, usePrevious } from "./forms";
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
 import { useCategoryColors } from "./content";
@@ -7,7 +7,6 @@ import { useCategoryColors } from "./content";
 export {
   useModal,
   useHandleClickOutside,
-  useEqualValue,
   useDebounce,
   useEqualStructured,
   usePrevious,

package/src/modules/FramePreview/index.tsx

@@ -1,29 +1,68 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import * as components from "components";
-import { SiteProvider } from "components";
-import { Preview } from "@griddo/core";
 import { getDefaultTheme } from "@ax/helpers";
-import { Loading } from "@ax/components";
+import { Loading, BrowserContent } from "@ax/components";
 import { ILanguage, IRootState, ISocialState } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { findByEditorID } from "@ax/forms";
+import { useURLSearchParam } from "@ax/hooks";
 
 import * as S from "./style";
 
 const FramePreview = (props: IProps) => {
-  const { content, socials, selectedEditorID, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs } =
+  const { content, socials, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs, setSelectedContent } =
     props;
 
+  const [state, setState] = useState(content);
+  const isPreview = useURLSearchParam("preview");
+  const isDisabled = useURLSearchParam("disabled");
+
+  const onMessageReceivedFromOutside = useCallback((ev: MessageEvent<{ type: string; message: string }>) => {
+    if (typeof ev.data !== "object") return;
+    if (!ev.data.type) return;
+    if (ev.data.type !== "content-update") return;
+    if (!ev.data.message) return;
+    setState(ev.data.message);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("message", onMessageReceivedFromOutside);
+    return () => window.removeEventListener("message", onMessageReceivedFromOutside);
+  }, [onMessageReceivedFromOutside]);
+
   const {
     editorContent: { canonicalSite, language, pageLanguages },
     header,
     footer,
-  } = content;
+  } = state;
 
   document.body.classList.add("preview");
 
-  const API_URL = process.env.REACT_APP_API_ENDPOINT;
-  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+  const selectEditorID = (
+    selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
+    parentComponent: string | undefined | null,
+    e: React.SyntheticEvent
+  ) => {
+    const { element } = findByEditorID(content, selectedComponent.parentEditorID);
+    element && e.stopPropagation();
+
+    const { editorID } = selectedComponent;
+
+    const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
+
+    if (isPreview === "false" && (isDisabled === "false" || isNavigationModule)) {
+      window.parent.postMessage(
+        {
+          type: "module-click",
+          message: editorID,
+        },
+        "*"
+      );
+
+      setSelectedContent && setSelectedContent(editorID);
+    }
+  };
 
   const globalTheme = getDefaultTheme();
   const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
@@ -33,47 +72,38 @@ const FramePreview = (props: IProps) => {
   if (isLoading) return <Loading />;
 
   return (
-    <SiteProvider
-      cloudinaryCloudName={cloudinaryName}
-      theme={theme}
-      socials={socials}
-      siteLangs={langs}
-      selectEditorID={selectedEditorID}
-      renderer="editor"
-      apiUrl={API_URL}
-      publicApiUrl={PUBLIC_API_URL}
-      siteId={siteID}
-    >
-      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-        <Preview
-          isPage={true}
-          apiUrl={API_URL}
-          library={components}
-          content={content.editorContent}
-          header={currentSiteInfo && header}
-          footer={currentSiteInfo && footer}
-          languageId={language}
-          pageLanguages={pageLanguages}
-        />
-      </S.Wrapper>
-    </SiteProvider>
+    <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+      <BrowserContent
+        cloudinaryName={cloudinaryName}
+        theme={theme}
+        socials={socials}
+        siteLangs={langs}
+        selectEditorID={selectEditorID}
+        siteID={siteID}
+        isPage={true}
+        content={state.editorContent}
+        header={currentSiteInfo && header}
+        footer={currentSiteInfo && footer}
+        languageID={language}
+        pageLanguages={pageLanguages}
+      />
+    </S.Wrapper>
   );
 };
 
 interface IProps {
   content: any;
-  selectedEditorID: number;
   socials: ISocialState;
   cloudinaryName: string | null;
   currentSiteInfo: any;
   siteLangs: ILanguage[];
   globalLangs: ILanguage[];
   isLoading: boolean;
+  setSelectedContent(editorID: number): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   content: { ...state.pageEditor.editorContent },
-  selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
   currentSiteInfo: state.sites.currentSiteInfo,
@@ -82,4 +112,8 @@ const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
 });
 
-export default connect(mapStateToProps)(FramePreview);
+const mapDispatchToProps = {
+  setSelectedContent: pageEditorActions.setSelectedContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FramePreview);

package/src/modules/FramePreview/style.tsx

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 const Wrapper = styled.div`
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
   height: 100%;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import { Browser } from "@ax/components";
-import { IBreadcrumbItem, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
   const {
@@ -12,7 +12,6 @@ const PageBrowser = (props: IProps) => {
     content: {
       editorContent: { path, slug, canonicalSite },
     },
-    selectedEditorID,
     setSelectedContent,
     globalLangs,
     theme,
@@ -30,7 +29,6 @@ const PageBrowser = (props: IProps) => {
       isPage={true}
       content={props.content.editorContent}
       socials={socials}
-      selectedEditorID={selectedEditorID}
       setSelectedContent={setSelectedContent}
       url={url}
       theme={theme}
@@ -39,6 +37,7 @@ const PageBrowser = (props: IProps) => {
       disabled={isReadOnly}
       siteID={canonicalSite}
       isPreview={isPreview}
+      showIframe={true}
       browserRef={browserRef}
     />
   );
@@ -47,12 +46,10 @@ const PageBrowser = (props: IProps) => {
 interface IEditorStateProps {
   // TODO: Define content Type
   content: any;
-  selectedEditorID: number;
   socials: ISocialState;
   cloudinaryName: string | null;
   globalLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
-  breadcrumb: IBreadcrumbItem[];
   selectedParent: any;
   activatedModules: string[];
 }
@@ -69,12 +66,10 @@ type IProps = IEditorStateProps & IPageBrowserDispatchProps;
 
 const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   content: { ...state.pageEditor.editorContent },
-  selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
   globalLangs: state.app.globalLangs,
   schema: state.pageEditor.schema,
-  breadcrumb: state.pageEditor.breadcrumb,
   selectedParent: state.pageEditor.selectedParent,
   activatedModules: state.dataPacks.modules,
 });

package/src/modules/GlobalEditor/index.tsx

@@ -127,7 +127,7 @@ const GlobalEditor = (props: IProps) => {
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const validated = await validatePage(true, browserRef);
+    const validated = await validatePage(true);
 
     if (validated) {
       const publishPage = {
@@ -147,7 +147,7 @@ const GlobalEditor = (props: IProps) => {
   const publishChanges = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true, browserRef);
+    const validated = await validatePage(true);
 
     if (validated) {
       const publishPage = {
@@ -176,13 +176,13 @@ const GlobalEditor = (props: IProps) => {
 
   const reviewPage = () => {
     const { validatePage } = props;
-    validatePage(undefined, browserRef);
+    validatePage(undefined);
   };
 
   const handlePublishDraft = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true, browserRef);
+    const validated = await validatePage(true);
 
     if (validated) {
       const isSaved = await savePage(false, null, true);
@@ -307,6 +307,8 @@ const GlobalEditor = (props: IProps) => {
     setTab(tab);
   };
 
+  const goToPackage = () => setHistoryPush("/sites/settings/content-types", false);
+
   const modalText = (
     <>
       Some content <strong>is not saved</strong> on this page.
@@ -425,7 +427,7 @@ const GlobalEditor = (props: IProps) => {
         currentPageID={pageID}
         fullWidth={true}
         errors={errors}
-        errorActions={{ goToError }}
+        errorActions={{ goToError, goToPackage }}
         inversed={true}
         isFromEditor={true}
         pageStatusActions={pageStatusActions}
@@ -583,7 +585,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number, global?: boolean): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(publish?: boolean, browserRef?: any): Promise<boolean>;
+  validatePage(publish?: boolean): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/GlobalEditor/style.tsx

@@ -11,7 +11,7 @@ const NotificationWrapper = styled.div`
   top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
   left: 0;
   right: 0;
-  z-index: 2;
+  z-index: 3;
 `;
 
 const ModalContent = styled.div`

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -10,7 +10,6 @@ const DefaultsBrowser = (props: IProps) => {
     socials,
     cloudinaryName,
     content,
-    selectedEditorID,
     setSelectedContent,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
@@ -23,7 +22,6 @@ const DefaultsBrowser = (props: IProps) => {
       isPage={false}
       socials={socials}
       content={updatedContent}
-      selectedEditorID={selectedEditorID}
       setSelectedContent={setSelectedContent}
       url={content.slug}
       theme={theme}
@@ -37,7 +35,6 @@ const DefaultsBrowser = (props: IProps) => {
 interface IEditorStateProps {
   // TODO: Define content Type
   content: any;
-  selectedEditorID: number;
   currentSiteInfo: any;
   socials: ISocialState;
   cloudinaryName: string | null;
@@ -52,7 +49,6 @@ type IProps = IEditorStateProps & IPageBrowserDispatchProps;
 
 const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   content: { ...state.navigation.editorContent },
-  selectedEditorID: state.navigation.selectedEditorID as number,
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,