@griddo/ax 10.7.3 → 10.7.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.7.3",
+  "version": "10.7.4",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -68,8 +68,8 @@
     "@types/styled-components": "^5.1.25",
     "@types/uuid": "^8.3.1",
     "@types/webpack-env": "^1.14.1",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "add": "^2.0.6",
     "axios": "0.19.0",
     "babel-eslint": "10.0.3",
@@ -127,7 +127,7 @@
     "react-dev-utils": "^11.0.4",
     "react-dom": "*",
     "react-draft-wysiwyg": "^1.14.5",
-    "react-error-boundary": "^4.0.13",
+    "react-error-boundary": "4.0.13",
     "react-frame-component": "^5.2.1",
     "react-froala-wysiwyg": "^3.2.7",
     "react-redux": "^7.2.8",
@@ -172,14 +172,10 @@
     "@types/redux-mock-store": "^1.0.3",
     "axios-mock-adapter": "^1.21.2",
     "babel-jest": "^27.5.1",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^5.0.2",
+    "eslint": "^8.0.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-flowtype": "^5.7.2",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "7.14.3",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.5.1",
@@ -233,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4765708d342635b3d58af6605256d90671d2ef3"
+  "gitHead": "ffe5e36398cb00a902d9c47002278e8008b62a01"
 }

package/src/__tests__/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/TemplateManager.test.tsx

@@ -117,6 +117,9 @@ const initialStore = {
   sites: {
     themeElements: null,
   },
+  pageEditor: {
+    scrollEditorID: null,
+  },
 };
 
 const store = mockStore(initialStore);

package/src/components/Browser/index.tsx

@@ -193,6 +193,7 @@ export interface IBrowserProps {
     setSelectedContentAction: any;
     deleteModuleAction(editorID: number[]): void;
     duplicateModuleAction(editorID: number[]): number;
+    setScrollEditorIDAction(editorID: number | null): void;
   };
 }
 

package/src/components/BrowserContent/index.tsx

@@ -20,6 +20,7 @@ const BrowserContent = (props: IProps) => {
     selectEditorID,
     moduleActions,
     renderer,
+    selectHoverEditorID,
   } = props;
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
@@ -31,6 +32,7 @@ const BrowserContent = (props: IProps) => {
       builderSSR.onRenderBody(ssrHelpers);
     }
   }, []);
+
   useEffect(useInstanceExternalAssets, [useInstanceExternalAssets]);
 
   return (
@@ -46,6 +48,7 @@ const BrowserContent = (props: IProps) => {
       instance={INSTANCE}
       siteId={siteID}
       moduleActions={moduleActions}
+      selectHoverEditorID={selectHoverEditorID}
     >
       <Preview
         isPage={isPage}
@@ -79,6 +82,7 @@ interface IProps {
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ): void;
+  selectHoverEditorID?(editorID: number): void;
   moduleActions?: {
     deleteModuleAction(editorID: number): void;
     duplicateModuleAction(editorID: number): void;

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

@@ -30,6 +30,7 @@ const Field = (props: IFieldProps): JSX.Element => {
     template,
     setHistoryPush,
     languages,
+    scrollEditorID,
   } = props;
   const isGroup = field.type === "FieldGroup";
   const isCollapsed = isGroup && field.collapsed;
@@ -83,6 +84,7 @@ const Field = (props: IFieldProps): JSX.Element => {
       template={template}
       setHistoryPush={setHistoryPush}
       languages={languages}
+      scrollEditorID={scrollEditorID}
     />
   );
 };
@@ -113,6 +115,7 @@ export interface IFieldProps {
   template: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   languages?: ILanguage[];
+  scrollEditorID: number | null;
 }
 
 export default Field;

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

@@ -30,6 +30,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     setHistoryPush,
     lang,
     themeElements,
+    scrollEditorID,
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -124,6 +125,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
                 setHistoryPush={setHistoryPush}
                 lang={lang}
                 readonly={readonly}
+                scrollEditorID={scrollEditorID}
               />
             );
           })}
@@ -153,12 +155,14 @@ interface IProps {
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   lang: number;
   themeElements: IThemeElements | null;
+  scrollEditorID: number | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   activatedPacks: state.dataPacks.activated,
   availableDataPacks: state.dataPacks.available,
   themeElements: state.sites.themeElements,
+  scrollEditorID: state.pageEditor.scrollEditorID,
 });
 
 export default connect(mapStateToProps)(TemplateManager);

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

@@ -47,6 +47,7 @@ const PageConnectedField = (props: any) => {
     languages,
     isReadOnly,
     themeElements,
+    scrollEditorID,
   } = props;
 
   const isTemplate = field.type === "template";
@@ -204,6 +205,7 @@ const PageConnectedField = (props: any) => {
       template={template}
       setHistoryPush={setHistoryPush}
       languages={languages}
+      scrollEditorID={scrollEditorID}
     />
   );
 };
@@ -223,6 +225,7 @@ const mapStateToProps = (state: IRootState) => ({
   template: state.pageEditor.template,
   languages: state.sites.currentSiteLanguages,
   themeElements: state.sites.themeElements,
+  scrollEditorID: state.pageEditor.scrollEditorID,
 });
 
 const mapDispatchToProps = {

package/src/components/FieldContainer/index.tsx

@@ -82,4 +82,5 @@ export interface IFieldContainerProps {
   template?: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   languages?: ILanguage[];
+  scrollEditorID?: number | null;
 }

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

@@ -33,6 +33,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     availableDataPacks,
     template,
     setHistoryPush,
+    scrollEditorID,
   } = props;
 
   const {
@@ -61,6 +62,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     field
   );
 
+  const selectedID = parseInt(localStorage.getItem("selectedID") || "0");
+
   const { isOpen, toggleModal } = useModal();
   const [isBulkOpen, setIsBulkOpen] = useState(false);
   const [draggingId, setDraggingId] = useState<number | null>(null);
@@ -129,6 +132,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
       const isDraggingSelected = selectedItems.all.includes(draggingId);
       const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
       const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
+      const isActive = scrollEditorID === editorID;
 
       return (
         <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
@@ -160,7 +164,10 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               toggleToast={toggleToast}
               isMultiDragging={snapshot.isDragging && isMultiDragging}
               draggingCount={selectedItems.all.length}
-              className={`${isGhosting ? "ghosting" : ""} ${snapshot.isDragging && isMultiDragging ? "dragging" : ""}`}
+              isActive={selectedID === editorID}
+              className={`${isGhosting ? "ghosting" : ""} ${snapshot.isDragging && isMultiDragging ? "dragging" : ""} ${
+                isActive ? "active" : ""
+              }`}
             />
           )}
         </Draggable>
@@ -337,6 +344,7 @@ export interface IMixableComponentArrayProps {
   availableDataPacks: Record<string, any>[];
   template: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  scrollEditorID: number | null;
 }
 
 export default MixableComponentArray;

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

@@ -41,6 +41,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     className,
     isMultiDragging = false,
     draggingCount = 0,
+    isActive = false,
   } = props;
 
   const { addComponentAction, deleteModuleAction, duplicateModuleAction, copyModuleAction, replaceModuleAction } =
@@ -177,6 +178,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
         className={`editorId-${editorID} ${className}`}
         onClick={handleClick}
         ref={innerRef}
+        isActive={isActive}
         data-testid="component-container"
         {...provided?.draggableProps}
         {...dragProps}
@@ -257,6 +259,7 @@ export interface IComponentContainerProps {
   className?: string;
   isMultiDragging?: boolean;
   draggingCount?: number;
+  isActive?: boolean;
 }
 
 export default ComponentContainer;

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

@@ -24,14 +24,14 @@ const HiddenButtonsWrapper = styled.span`
   opacity: 0;
 `;
 
-const Component = styled.span<{ disabled?: boolean }>`
+const Component = styled.span<{ disabled?: boolean; isActive: boolean }>`
   color: ${(p) => p.theme.color.textHighEmphasis};
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   background: ${(p) => p.theme.color.uiBackground02};
-  border: 1px solid transparent;
+  border: 1px solid ${(p) => (p.isActive ? p.theme.color.interactive01 : "transparent")};
   margin-bottom: ${(p) => p.theme.spacing.xs};
   padding: calc(${(p) => p.theme.spacing.xs} - 1px) ${(p) => p.theme.spacing.xs};
   border-radius: ${(p) => p.theme.radii.s};
@@ -41,8 +41,9 @@ const Component = styled.span<{ disabled?: boolean }>`
   cursor: ${(p) => (p.disabled ? `default` : `pointer`)};
   min-height: 48px;
 
-  &:hover {
-    border: 1px solid ${(p) => p.theme.color.overlayHoverPrimary};
+  &:hover,
+  &.active {
+    border: 1px solid ${(p) => (p.isActive ? p.theme.color.interactive01 : p.theme.color.overlayHoverPrimary)};
     cursor: pointer;
     &:before {
       content: "";

package/src/containers/PageEditor/actions.tsx

@@ -69,6 +69,7 @@ import {
   SET_IS_IA_TRANSLATED,
   SET_LAST_TIMEOUT,
   RESET_PAGE_EDITOR_STORE,
+  SET_SCROLL_EDITOR_ID,
 } from "./constants";
 
 import {
@@ -111,6 +112,7 @@ import {
   ISetIsIATranslated,
   ISetLastTimeout,
   IResetPageEditorStore,
+  ISetScrollEditorID,
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving, handleError } = appActions;
@@ -220,6 +222,10 @@ function resetPageEditorStore(): IResetPageEditorStore {
   return { type: RESET_PAGE_EDITOR_STORE };
 }
 
+function setScrollEditorID(scrollEditorID: number | null): ISetScrollEditorID {
+  return { type: SET_SCROLL_EDITOR_ID, payload: { scrollEditorID } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -1088,7 +1094,9 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
       "*"
     );
 
-    localStorage.setItem("selectedID", `${editorID}`);
+    if (editorID > 0) {
+      localStorage.setItem("selectedID", `${editorID}`);
+    }
 
     dispatch(setIsLoading(true));
     const {
@@ -1535,4 +1543,5 @@ export {
   getPageTranslation,
   setIsTranslated,
   schedulePublication,
+  setScrollEditorID,
 };

package/src/containers/PageEditor/constants.tsx

@@ -23,6 +23,7 @@ export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
 export const SET_IS_IA_TRANSLATED = `${NAME}/SET_IS_IA_TRANSLATED`;
 export const SET_LAST_TIMEOUT = `${NAME}/SET_LAST_TIMEOUT`;
 export const RESET_PAGE_EDITOR_STORE = `${NAME}/RESET_PAGE_EDITOR_STORE`;
+export const SET_SCROLL_EDITOR_ID = `${NAME}/SET_SCROLL_EDITOR_ID`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];

package/src/containers/PageEditor/interfaces.tsx

@@ -22,6 +22,7 @@ import {
   SET_IS_IA_TRANSLATED,
   SET_LAST_TIMEOUT,
   RESET_PAGE_EDITOR_STORE,
+  SET_SCROLL_EDITOR_ID,
 } from "./constants";
 import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
@@ -139,6 +140,11 @@ export interface IResetPageEditorStore {
   type: typeof RESET_PAGE_EDITOR_STORE;
 }
 
+export interface ISetScrollEditorID {
+  type: typeof SET_SCROLL_EDITOR_ID;
+  payload: { scrollEditorID: number | null };
+}
+
 export interface IFieldProps {
   id: number;
   key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -25,6 +25,7 @@ import {
   SET_IS_IA_TRANSLATED,
   SET_LAST_TIMEOUT,
   RESET_PAGE_EDITOR_STORE,
+  SET_SCROLL_EDITOR_ID,
 } from "./constants";
 
 import { PageEditorActionsCreators } from "./interfaces";
@@ -52,6 +53,7 @@ export interface IPageEditorState {
   moduleCopy: { date: Date; elements: IModule[] } | null;
   isIATranslated: boolean;
   lastTimeout: NodeJS.Timeout | null;
+  scrollEditorID: number | null;
 }
 
 export const initialState = {
@@ -77,6 +79,7 @@ export const initialState = {
   moduleCopy: null,
   isIATranslated: false,
   lastTimeout: null,
+  scrollEditorID: null,
 };
 
 export function reducer(state = initialState, action: any): IPageEditorState {
@@ -104,6 +107,7 @@ export function reducer(state = initialState, action: any): IPageEditorState {
     case SET_COPY_MODULE:
     case SET_IS_IA_TRANSLATED:
     case SET_LAST_TIMEOUT:
+    case SET_SCROLL_EDITOR_ID:
       return { ...state, ...action.payload };
     case RESET_PAGE_EDITOR_STORE:
       return { ...initialState, moduleCopy: state.moduleCopy };

package/src/helpers/schemas.tsx

@@ -77,7 +77,7 @@ const getTemplateDisplayName = (template: string) => {
 const getMenuItems = (type: string): { fields: any[] } | undefined => schemas.menuItems[type];
 
 const filterByCategory = (options: any, category: string) =>
-  options.filter((option: any) => allSchemas[option].category === category);
+  options.filter((option: any) => allSchemas[option]?.category === category);
 
 const getModuleCategories = (moduleList: string[]): ModuleCategoryInfo[] => {
   const categories: string[] = [];
@@ -89,12 +89,13 @@ const getModuleCategories = (moduleList: string[]): ModuleCategoryInfo[] => {
   };
 
   moduleList.forEach((module) => {
-    const categoryValue = getSchema(module).category;
+    const categoryValue = getSchema(module)?.category;
+    if (categoryValue) {
+      const foundCategory = moduleCategories.find((category: ModuleCategoryInfo) => category.value === categoryValue);
 
-    const foundCategory = moduleCategories.find((category: ModuleCategoryInfo) => category.value === categoryValue);
-
-    if (foundCategory) {
-      categories.push(foundCategory);
+      if (foundCategory) {
+        categories.push(foundCategory);
+      }
     }
   });
 

package/src/hooks/iframe.ts

@@ -4,6 +4,7 @@ const useOnMessageReceivedFromIframe = (actions?: {
   setSelectedContentAction: any;
   deleteModuleAction(editorID: number[]): void;
   duplicateModuleAction(editorID: number[]): number;
+  setScrollEditorIDAction(editorID: number | null): void;
 }): void => {
   const onMessageReceivedFromIframe = useCallback(
     (ev: MessageEvent<{ type: string; message: string }>) => {
@@ -21,6 +22,9 @@ const useOnMessageReceivedFromIframe = (actions?: {
         const duplicatedEditorID = actions?.duplicateModuleAction([parseInt(ev.data.message)]);
         actions?.setSelectedContentAction(duplicatedEditorID);
       }
+      if (ev.data.type === "module-scroll") {
+        actions?.setScrollEditorIDAction(parseInt(ev.data.message));
+      }
     },
     [actions]
   );

package/src/modules/FramePreview/index.tsx

@@ -52,6 +52,9 @@ const FramePreview = (props: IProps) => {
     }
   };
 
+  const selectHoverEditorID = (editorID: number) =>
+    window.parent.postMessage({ type: "module-scroll", message: editorID }, "*");
+
   const globalTheme = getDefaultTheme();
   const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
   const langs = currentSiteInfo ? siteLangs : globalLangs;
@@ -62,10 +65,12 @@ const FramePreview = (props: IProps) => {
     setSelectedContent && setSelectedContent(0);
     deleteModule([editorID]);
   };
+
   const duplicateModuleSelected = (editorID: number) => {
     window.parent.postMessage({ type: "module-duplicate", message: editorID }, "*");
     duplicateModule([editorID]);
   };
+
   const moduleActions = {
     deleteModuleAction: deleteModuleSelected,
     duplicateModuleAction: duplicateModuleSelected,
@@ -90,6 +95,7 @@ const FramePreview = (props: IProps) => {
         pageLanguages={pageLanguages}
         moduleActions={moduleActions}
         renderer={isPreview === "true" ? "preview" : "editor"}
+        selectHoverEditorID={selectHoverEditorID}
       />
     </S.Wrapper>
   );

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

@@ -18,6 +18,7 @@ const PageBrowser = (props: IProps) => {
     browserRef,
     deleteModule,
     duplicateModule,
+    setScrollEditorID,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -28,6 +29,7 @@ const PageBrowser = (props: IProps) => {
     deleteModuleAction: deleteModule,
     duplicateModuleAction: duplicateModule,
     setSelectedContentAction: setSelectedContent,
+    setScrollEditorIDAction: setScrollEditorID,
   };
 
   return (
@@ -67,6 +69,7 @@ interface IPageBrowserDispatchProps {
   browserRef?: any;
   deleteModule(editorID: number[]): void;
   duplicateModule(editorID: number[]): number;
+  setScrollEditorID(editorID: number | null): void;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;
@@ -84,6 +87,7 @@ const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
   deleteModule: pageEditorActions.deleteModule,
   duplicateModule: pageEditorActions.duplicateModule,
+  setScrollEditorID: pageEditorActions.setScrollEditorID,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PageBrowser);

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

@@ -19,6 +19,7 @@ const PageBrowser = (props: IProps) => {
     browserRef,
     deleteModule,
     duplicateModule,
+    setScrollEditorID,
   } = props;
 
   if (!currentSiteInfo) {
@@ -36,6 +37,7 @@ const PageBrowser = (props: IProps) => {
     deleteModuleAction: deleteModule,
     duplicateModuleAction: duplicateModule,
     setSelectedContentAction: setSelectedContent,
+    setScrollEditorIDAction: setScrollEditorID,
   };
 
   return (
@@ -77,6 +79,7 @@ interface IPageBrowserDispatchProps {
   browserRef?: any;
   deleteModule(editorID: number[]): void;
   duplicateModule(editorID: number[]): number;
+  setScrollEditorID(editorID: number | null): void;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;
@@ -94,6 +97,7 @@ const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
   deleteModule: pageEditorActions.deleteModule,
   duplicateModule: pageEditorActions.duplicateModule,
+  setScrollEditorID: pageEditorActions.setScrollEditorID,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PageBrowser);

package/src/schemas/pages/GlobalPage.tsx

@@ -77,6 +77,11 @@ export default {
               type: "TagsField",
               key: "metaKeywords",
             },
+            {
+              title: "Canonical URL",
+              type: "TextField",
+              key: "canonicalURL",
+            },
             {
               title: "Meta robots index",
               type: "RadioGroup",
@@ -155,8 +160,8 @@ export default {
               type: "AnalyticsField",
               key: "dimensions",
               collapsed: true,
-            }
-          ]
+            },
+          ],
         },
         {
           title: "Social Media",