@griddo/ax 11.4.14 → 11.4.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.14",
+  "version": "11.4.16",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -118,7 +118,7 @@
     "react-dom": "18.2.0",
     "react-draft-wysiwyg": "1.15.0",
     "react-error-boundary": "4.0.13",
-    "react-froala-wysiwyg": "3.2.7",
+    "react-froala-wysiwyg": "4.0.4",
     "react-redux": "7.2.9",
     "react-refresh": "0.14.2",
     "react-router-dom": "5.1.2",
@@ -152,6 +152,10 @@
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
+    "@babel/helper-environment-visitor": "7.24.7",
+    "@babel/helper-function-name": "7.24.7",
+    "@babel/helper-hoist-variables": "7.24.7",
+    "@babel/helper-split-export-declaration": "7.24.7",
     "@babel/plugin-transform-optional-chaining": "7.25.9",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
@@ -220,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91a7a9998319a6dc21dab4a22d38e87f8b59b6c5"
+  "gitHead": "c49a8f24585bb180c3230fe22b55a5212a5d8a4c"
 }

package/src/api/utils.tsx

@@ -108,6 +108,11 @@ export const sendInitialRequest = async (
     const response = await axios(config);
     return response;
   } catch (e) {
+    if (e.message !== "Network Error") {
+      return (
+        e.response || { status: e.status, data: { code: e.code || "unknown", message: e.message || "Platform error" } }
+      );
+    }
     return e.response;
   }
 };
@@ -146,6 +151,11 @@ export const sendRequest = async (
     // return response;
     return await axios(requestConfig);
   } catch (e) {
+    if (e.message !== "Network Error") {
+      return (
+        e.response || { status: e.status, data: { code: e.code || "unknown", message: e.message || "Platform error" } }
+      );
+    }
     return e.response;
   }
 };
@@ -174,6 +184,11 @@ export const sendUploadRequest = async (
 
     return await axios(requestConfig);
   } catch (e) {
+    if (e.message !== "Network Error") {
+      return (
+        e.response || { status: e.status, data: { code: e.code || "unknown", message: e.message || "Platform error" } }
+      );
+    }
     return e.response;
   }
 };

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

@@ -1,11 +1,11 @@
 import React, { memo } from "react";
-import { IHeadingField } from "@ax/types";
-import { FieldsBehavior, TextField } from "@ax/components";
+import { IHeadingField, ISite } from "@ax/types";
+import { FieldsBehavior, TextField, Wysiwyg } from "@ax/components";
 
 import * as S from "./style";
 
 const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
-  const { value, onChange, options, showAdvanced } = props;
+  const { value, onChange, options, showAdvanced, toolbar = false } = props;
 
   const getContentValue = () => value?.content || props.default?.content || "";
   const getTagValue = () => value?.tag || props.default?.tag || "";
@@ -22,7 +22,11 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
 
   return (
     <>
-      <TextField {...props} value={getContentValue()} onChange={handleChange} />
+      {toolbar ? (
+        <Wysiwyg {...props} inline={true} value={getContentValue()} onChange={handleChange} />
+      ) : (
+        <TextField {...props} value={getContentValue()} onChange={handleChange} />
+      )}
       {showAdvanced && (
         <S.AdvancedWrapper data-testid="text-field-advanced-wrapper">
           <FieldsBehavior fieldType="Select" options={options} value={getTagValue()} onChange={handleSelectChange} />
@@ -39,6 +43,8 @@ interface IHeadingFieldProps {
   options: IOption[];
   showAdvanced: boolean;
   default: IHeadingField;
+  site: ISite;
+  toolbar?: boolean;
 }
 
 interface IOption {

package/src/components/Fields/Wysiwyg/config.tsx

@@ -1,4 +1,6 @@
-import { getRichTextConfig, parseClassNames } from "./helpers";
+import FroalaEditor from "froala-editor";
+import { getLanguageMenuHtml, getRichTextConfig, parseClassNames } from "./helpers";
+import { languages } from "./languages";
 
 const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 const richTextConfig = getRichTextConfig();
@@ -23,6 +25,7 @@ const miscButtons = [
   "html",
   "insertTable",
   paragraphStyles ? "paragraphStyle" : undefined,
+  "langDropdown",
 ];
 
 const buttonsFull = {
@@ -42,9 +45,19 @@ const buttonsFull = {
 };
 
 const buttons = [
-  ["bold", "italic", "formatUL", "insertLink", "paragraphFormat", paragraphStyles ? "paragraphStyle" : undefined],
+  [
+    "bold",
+    "italic",
+    "formatUL",
+    "insertLink",
+    "paragraphFormat",
+    paragraphStyles ? "paragraphStyle" : undefined,
+    "langDropdown",
+  ],
 ];
 
+const inlineToolbar = ["langDropdown", "undo", "redo"];
+
 const wysiwygConfig = {
   key: process.env.REACT_APP_FROALA_KEY,
   // pastePlain: false,
@@ -85,4 +98,29 @@ const wysiwygConfig = {
   imageUploadRemoteUrls: false,
 };
 
-export { buttonsFull, buttons, wysiwygConfig };
+FroalaEditor.DefineIcon("langIcon", {
+  PATH: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z",
+  template: "svg",
+});
+
+FroalaEditor.RegisterCommand("langDropdown", {
+  title: "Language",
+  type: "dropdown",
+  icon: "langIcon",
+  undo: true,
+  focus: true,
+  refreshAfterCallback: true,
+  html: function () {
+    return getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages);
+  },
+  callback: function (cmd: any, val: string) {
+    const html = this.selection.text();
+    if (val !== "") {
+      this.html.insert(`<span lang="${val}" translate="no">${html}</span>`, true);
+    } else {
+      this.html.insert(html, true);
+    }
+  },
+});
+
+export { buttonsFull, buttons, inlineToolbar, wysiwygConfig };

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+import { renderToString } from "react-dom/server";
 import { config } from "components";
 
 const getRichTextConfig = (): IRichTextConfig | null => {
@@ -14,6 +17,72 @@ interface IRichTextConfig {
   paragraphStyles?: { label: string; className: string }[];
   tableStyles?: { label: string; className: string }[];
   tableCellStyles?: { label: string; className: string }[];
+  editorLangs?: { name: string; iso: string }[];
 }
 
-export { getRichTextConfig, parseClassNames };
+const getLanguageMenuHtml = (languages: { name: string; iso: string; featured?: boolean }[]) => {
+  const borderStyle = {
+    borderBottom: "1px solid #DBDDE9",
+    paddingBottom: "4px",
+    marginBottom: "4px",
+  };
+
+  const featuredLanguages = languages
+    .filter((lang) => lang.featured === true)
+    .map((lang, index, { length }) => (
+      <li role="presentation" key={lang.iso} style={index + 1 === length ? borderStyle : {}}>
+        <a
+          className="fr-command"
+          tabIndex={-1}
+          role="option"
+          data-cmd="langDropdown"
+          data-param1={lang.iso}
+          title={lang.name}
+          aria-selected="false"
+        >
+          {lang.name}
+        </a>
+      </li>
+    ));
+
+  const otherLanguages = languages
+    .filter((lang) => lang.featured !== true)
+    .map((lang) => (
+      <li role="presentation" key={lang.iso}>
+        <a
+          className="fr-command"
+          tabIndex={-1}
+          role="option"
+          data-cmd="langDropdown"
+          data-param1={lang.iso}
+          title={lang.name}
+          aria-selected="false"
+        >
+          {lang.name}
+        </a>
+      </li>
+    ));
+
+  return renderToString(
+    <ul className="fr-dropdown-list" role="presentation">
+      <li role="presentation" key="remove" style={borderStyle}>
+        <a
+          className="fr-command"
+          tabIndex={-1}
+          role="option"
+          data-cmd="langDropdown"
+          data-param1={""}
+          title="Remove"
+          aria-selected="false"
+          style={{ fontStyle: "italic" }}
+        >
+          Remove
+        </a>
+      </li>
+      {featuredLanguages}
+      {otherLanguages}
+    </ul>
+  );
+};
+
+export { getRichTextConfig, parseClassNames, getLanguageMenuHtml };

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
-import FroalaEditor from "react-froala-wysiwyg";
+import FroalaEditorComponent from "react-froala-wysiwyg";
+import FroalaEditor from "froala-editor";
 import { decodeEntities } from "@ax/helpers";
 import { IImage, ISite, IRootState } from "@ax/types";
 import { galleryActions } from "@ax/containers/Gallery";
 
-import { wysiwygConfig, buttons, buttonsFull } from "./config";
+import { wysiwygConfig, buttons, buttonsFull, inlineToolbar } from "./config";
 import "./vendors";
 import * as S from "./style";
 
@@ -21,6 +22,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
     site,
     token,
     uploadImage,
+    inline = false,
   } = props;
 
   const imageSite = site ? site.id : "global";
@@ -33,13 +35,18 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
   const dynamicConfig = {
     placeholderText: placeholder,
-    toolbarButtons: full ? buttonsFull : buttons,
-    imageUpload: full ? true : false,
+    toolbarButtons: inline ? inlineToolbar : full ? buttonsFull : buttons,
+    toolbarInline: inline,
+    charCounterCount: !inline,
+    imageUpload: full && !inline ? true : false,
+    multiLine: !inline,
+    enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
     requestHeaders: {
       Authorization: `bearer ${token}`,
     },
     events: {
       initialized() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         if (disabled) {
           setTimeout(() => {
@@ -48,12 +55,14 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
         }
       },
       "image.beforeUpload": async function (images: FileList) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         const { url } = await uploadImage(images[0], imageSite);
         editor.image.insert(url, true, null, editor.image.get(), null);
         return false;
       },
       blur: function () {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const editor: any = this;
         const html = editor.html.get();
         const stripedHtml = decodeEntities(html);
@@ -66,13 +75,12 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
   return (
     <S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
-      <FroalaEditor tag="textarea" model={value} config={config} onModelChange={handleChange} />
+      <FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
     </S.EditorWrapper>
   );
 };
 
 interface IProps {
-  name: string;
   value: string;
   title: string;
   full?: boolean;
@@ -84,6 +92,7 @@ interface IProps {
   disabled?: boolean;
   handleValidation?: (value: string) => void;
   site: ISite;
+  inline?: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/Wysiwyg/languages.js

@@ -0,0 +1,136 @@
+const languages = [
+  {
+    name: "Arabic (Saudi Arabia)",
+    iso: "ar-SA",
+  },
+  {
+    name: "Chinese (China)",
+    iso: "zh-CN",
+  },
+  {
+    name: "Chinese (Taiwan)",
+    iso: "zh-TW",
+  },
+  {
+    name: "Czech",
+    iso: "cs-CZ",
+  },
+  {
+    name: "Danish",
+    iso: "da-DK",
+  },
+  {
+    name: "Dutch",
+    iso: "nl-NL",
+  },
+  {
+    name: "English (United Kingdom)",
+    iso: "en-GB",
+  },
+  {
+    name: "English (United States)",
+    iso: "en-US",
+  },
+  {
+    name: "Finnish",
+    iso: "fi-FI",
+  },
+  {
+    name: "French (Canada)",
+    iso: "fr-CA",
+  },
+  {
+    name: "French (France)",
+    iso: "fr-FR",
+  },
+  {
+    name: "German",
+    iso: "de-DE",
+  },
+  {
+    name: "Greek",
+    iso: "el-GR",
+  },
+  {
+    name: "Hebrew",
+    iso: "he-IL",
+  },
+  {
+    name: "Hindi",
+    iso: "hi-IN",
+  },
+  {
+    name: "Hungarian",
+    iso: "hu-HU",
+  },
+  {
+    name: "Italian",
+    iso: "it-IT",
+  },
+  {
+    name: "Japanese",
+    iso: "ja-JP",
+  },
+  {
+    name: "Korean",
+    iso: "ko-KR",
+  },
+  {
+    name: "Norwegian",
+    iso: "no-NO",
+  },
+  {
+    name: "Polish",
+    iso: "pl-PL",
+  },
+  {
+    name: "Portuguese (Brazil)",
+    iso: "pt-BR",
+  },
+  {
+    name: "Portuguese (Portugal)",
+    iso: "pt-PT",
+  },
+  {
+    name: "Romanian",
+    iso: "ro-RO",
+  },
+  {
+    name: "Russian",
+    iso: "ru-RU",
+  },
+  {
+    name: "Slovak",
+    iso: "sk-SK",
+  },
+  {
+    name: "Spanish (Mexico)",
+    iso: "es-MX",
+  },
+  {
+    name: "Spanish (Spain)",
+    iso: "es-ES",
+  },
+  {
+    name: "Swedish",
+    iso: "sv-SE",
+  },
+  {
+    name: "Thai",
+    iso: "th-TH",
+  },
+  {
+    name: "Turkish",
+    iso: "tr-TR",
+  },
+  {
+    name: "Ukrainian",
+    iso: "uk-UA",
+  },
+  {
+    name: "Vietnamese",
+    iso: "vi-VN",
+  },
+];
+
+export { languages };

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

@@ -22,6 +22,9 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
       ${(p) => p.theme.textStyle.fieldContent};
       margin-block-start: 1em;
       margin-block-end: 1em;
+      span[lang] {
+        color: #F9861B;
+      }
     }
     p:first-child {
       margin-block-start: 0;
@@ -59,6 +62,13 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
       .fr-popup.fr-desktop.fr-active {
         margin-left: -70px;
       }
+
+      .fr-command.fr-btn svg {
+        margin: 5px 5px;
+      }
+    }
+    .fr-toolbar.fr-toolbar-open {
+      padding-bottom: 16px;
     }
     .fr-second-toolbar {
       border-color: ${(p) =>
@@ -71,15 +81,15 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
           p.error === true
             ? p.theme.color.error
             : p.disabled
-            ? p.theme.color.interactiveDisabled
-            : p.theme.color.uiLine};
+              ? p.theme.color.interactiveDisabled
+              : p.theme.color.uiLine};
       border-right: 1px solid
         ${(p) =>
           p.error === true
             ? p.theme.color.error
             : p.disabled
-            ? p.theme.color.interactiveDisabled
-            : p.theme.color.uiLine};
+              ? p.theme.color.interactiveDisabled
+              : p.theme.color.uiLine};
     }
     .fr-disabled {
       color: ${(p) => p.theme.color.interactiveDisabled};
@@ -91,8 +101,8 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
           p.error === true
             ? p.theme.color.error
             : p.disabled
-            ? p.theme.color.interactiveDisabled
-            : p.theme.color.interactive01};
+              ? p.theme.color.interactiveDisabled
+              : p.theme.color.interactive01};
       }
       .fr-wrapper {
         border-left: 1px solid
@@ -100,16 +110,49 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
             p.error === true
               ? p.theme.color.error
               : p.disabled
-              ? p.theme.color.interactiveDisabled
-              : p.theme.color.interactive01};
+                ? p.theme.color.interactiveDisabled
+                : p.theme.color.interactive01};
         border-right: 1px solid
           ${(p) =>
             p.error === true
               ? p.theme.color.error
               : p.disabled
+                ? p.theme.color.interactiveDisabled
+                : p.theme.color.interactive01};
+      }
+    }
+  }
+  .fr-inline {
+    .fr-wrapper {
+      background: ${(p) => p.theme.color.uiBackground02};
+      border-radius: ${(p) => p.theme.radii.s};
+      min-height: ${(p) => p.theme.spacing.l};
+      border: 1px solid
+        ${(p) =>
+          p.error === true
+            ? p.theme.color.error
+            : p.disabled
               ? p.theme.color.interactiveDisabled
-              : p.theme.color.interactive01};
+              : p.theme.color.uiLine};
+    }
+    .fr-element {
+      ${(p) => p.theme.textStyle.fieldContent};
+      color: ${(p) => p.theme.color.textHighEmphasis};
+      padding: ${(p) => `12px ${p.theme.spacing.s}`};
+
+      span[lang] {
+        color: #F9861B;
       }
     }
+    ${Wrapper}:focus-within & {
+      .fr-wrapper {
+        border: 1px solid
+          ${(p) =>
+            p.error === true
+              ? p.theme.color.error
+              : p.disabled
+                ? p.theme.color.interactiveDisabled
+                : p.theme.color.interactive01};
+    }
   }
 `;

package/src/components/Icon/components/Translate.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgTranslate = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z"
+    />
+  </svg>
+);
+export default SvgTranslate;

package/src/components/Icon/svgs/translate.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.87 15.07L10.33 12.56L10.36 12.53C12.1 10.59 13.34 8.36 14.07 6H17V4H10V2H8V4H1V5.99H12.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8H4.69C5.42 9.63 6.42 11.17 7.67 12.56L2.58 17.58L4 19L9 14L12.11 17.11L12.87 15.07ZM18.5 10H16.5L12 22H14L15.12 19H19.87L21 22H23L18.5 10ZM15.88 17L17.5 12.67L19.12 17H15.88Z" fill="#5057FF"/>
+</svg>

package/src/components/MainWrapper/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { IErrorItem, ILanguage } from "@ax/types";
+import { useNetworkStatus } from "@ax/hooks";
+import { Notification } from "@ax/components";
 
 import AppBar from "./AppBar";
 
@@ -8,11 +10,19 @@ import * as S from "./style";
 const MainWrapper = (props: IWrapperProps): JSX.Element => {
   const { children, fixedAppBar, fullWidth, hasAnimation } = props;
 
+  const { isOnline } = useNetworkStatus();
+
   return (
     <S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
       {hasAnimation && <S.BackgroundAnimation />}
       <AppBar {...props} />
       <S.Main fullWidth={fullWidth} data-testid="main-component" id="main-component">
+        {!isOnline && (
+          <Notification
+            type="error"
+            text="You are offline. Please, check your internet connection. Changes you make may not be saved."
+          />
+        )}
         {children}
       </S.Main>
     </S.Wrapper>

package/src/global.d.ts

@@ -1,5 +1,6 @@
 declare module "node";
 declare module "components";
+declare module "froala-editor";
 declare module "react-froala-wysiwyg";
 declare module "lodash.isequal";
 declare module "is-wsl";

package/src/helpers/requests.tsx

@@ -1,4 +1,3 @@
-import { setError } from "@ax/containers/App/actions";
 import { Dispatch } from "redux";
 
 const isReqOk = (reqStatus: number) => reqStatus >= 200 && reqStatus < 400;
@@ -15,23 +14,14 @@ function handleRequest(
 
     const response = await callback();
 
-    if (!response) {
-      dispatch(
-        setError({
-          text: "You are offline. Please, check your internet connection. Changes you make may not be saved.",
-        })
-      );
-      return false;
-    }
-
     const responseArr = Array.isArray(response) ? response : [response];
 
     let result = true;
 
     responseArr.forEach((response) => {
-      if (!isReqOk(response.status)) {
+      if (!response || !isReqOk(response.status)) {
         result = false;
-        handleError(response);
+        !!response && handleError(response);
       }
     });
 

package/src/hooks/index.tsx

@@ -7,6 +7,7 @@ import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { usePermission, useGlobalPermission } from "./users";
 import { useResizable } from "./resize";
+import { useNetworkStatus } from "./network";
 
 export {
   useModal,
@@ -28,4 +29,5 @@ export {
   useGlobalPermission,
   useOnMessageReceivedFromIframe,
   useOnMessageReceivedFromOutside,
+  useNetworkStatus,
 };

package/src/hooks/network.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const useNetworkStatus = () => {
+  const [isOnline, setOnline] = useState<boolean>(true);
+
+  const updateNetworkStatus = () => {
+    setOnline(navigator.onLine);
+  };
+
+  //   sometimes, the load event does not trigger on some browsers, that is why manually calling updateNetworkStatus on initial mount
+  useEffect(() => {
+    updateNetworkStatus();
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("load", updateNetworkStatus);
+    window.addEventListener("online", updateNetworkStatus);
+    window.addEventListener("offline", updateNetworkStatus);
+
+    return () => {
+      window.removeEventListener("load", updateNetworkStatus);
+      window.removeEventListener("online", updateNetworkStatus);
+      window.removeEventListener("offline", updateNetworkStatus);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigator.onLine]);
+
+  return { isOnline };
+};
+
+export { useNetworkStatus };

package/src/modules/Content/OptionTable/index.tsx

@@ -2,7 +2,7 @@ import React, { useReducer, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { IRootState, IStructuredData, ITemplateOption, IThemeElements } from "@ax/types";
-import { filterThemeTemplates, getThumbnailProps, removeDuplicatesByProperty } from "@ax/helpers";
+import { filterThemeTemplates, getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { SecondaryActionButton, MainActionButton } from "./../atoms";
@@ -93,6 +93,18 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     isOptionInType(filteredOptionsByDataPack) &&
     getThumbnailProps(state.selectedOption, true, theme);
 
+  const removeDuplicatesByTypeAndMode = (arr: ITemplateOption[]) => {
+    const seen = new Set();
+    return arr.filter((item) => {
+      const key = `${item.type}::${item.mode}`;
+      if (item.mode && seen.has(key)) {
+        return false;
+      }
+      seen.add(key);
+      return true;
+    });
+  };
+
   const displayOptions = (item: IOptionFilter) => {
     const { value } = item;
 
@@ -123,7 +135,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       }
     });
 
-    filteredOptionsByDataPack = removeDuplicatesByProperty(filteredOptionsByDataPack, "type");
+    filteredOptionsByDataPack = removeDuplicatesByTypeAndMode(filteredOptionsByDataPack);
 
     filteredOptionsByDataPack.sort((ele, comp) => {
       // Use localeCompare to compare strings alphabetically