Fixed showing PDF component

frontend/src/Editor/Container.jsx

@@ -12,7 +12,7 @@ import { commentsService } from '@/_services';
 import config from 'config';
 import Spinner from '@/_ui/Spinner';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { addComponents, addNewWidgetToTheEditor } from '@/_helpers/appUtils';
+import { addComponents, addNewWidgetToTheEditor, isPDFSupported } from '@/_helpers/appUtils';
 import { useCurrentState } from '@/_stores/currentStateStore';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { useEditorStore } from '@/_stores/editorStore';
@@ -23,7 +23,6 @@ import _, { cloneDeep, isEmpty } from 'lodash';
 import { diff } from 'deep-object-diff';
 import DragContainer from './DragContainer';
 import { compact, correctBounds } from './gridUtils';
-import { isPDFSupported } from '@/_stores/utils';
 import toast from 'react-hot-toast';
 import { isOnlyLayoutUpdate, handleLowPriorityWork } from '@/_helpers/editorHelpers';
 import GhostWidget from './GhostWidget';

frontend/src/Editor/ControlledComponentToRender.jsx

@@ -38,6 +38,8 @@ export const shouldUpdate = (prevProps, nextProps) => {
 const ComponentWrapper = React.memo(({ componentName, ...props }) => {
   const ComponentToRender = getComponentToRender(componentName);
 
+  if (ComponentToRender === null) return;
+
   return <ComponentToRender {...props} />;
 }, shouldUpdate);
 

frontend/src/Editor/SubContainer.jsx

@@ -6,7 +6,12 @@ import { DraggableBox } from './DraggableBox';
 import update from 'immutability-helper';
 import _, { isEmpty } from 'lodash';
 import { componentTypes } from './WidgetManager/components';
-import { addNewWidgetToTheEditor, onComponentOptionChanged, onComponentOptionsChanged } from '@/_helpers/appUtils';
+import {
+  addNewWidgetToTheEditor,
+  onComponentOptionChanged,
+  onComponentOptionsChanged,
+  isPDFSupported,
+} from '@/_helpers/appUtils';
 import { resolveWidgetFieldValue } from '@/_helpers/utils';
 import { toast } from 'react-hot-toast';
 import { restrictedWidgetsObj } from '@/Editor/WidgetManager/restrictedWidgetsConfig';
@@ -18,7 +23,6 @@ import { useEditorStore } from '@/_stores/editorStore';
 import { diff } from 'deep-object-diff';
 // eslint-disable-next-line import/namespace
 import { useGridStore, useResizingComponentId } from '@/_stores/gridStore';
-import { isPDFSupported } from '@/_stores/utils';
 import GhostWidget from './GhostWidget';
 
 export const SubContainer = ({

frontend/src/_helpers/appUtils.js

@@ -2078,3 +2078,68 @@ export const removeFunctionObjects = (obj) => {
   }
   return obj;
 };
+
+export function isPDFSupported() {
+  const browser = getBrowserUserAgent();
+
+  if (!browser) {
+    return true;
+  }
+
+  const isChrome = browser.name === 'Chrome' && browser.major >= 92;
+  const isEdge = browser.name === 'Edge' && browser.major >= 92;
+  const isSafari = browser.name === 'Safari' && browser.major >= 15 && browser.minor >= 4; // Handle minor version check for Safari
+  const isFirefox = browser.name === 'Firefox' && browser.major >= 90;
+
+  console.log('browser--', browser, isChrome || isEdge || isSafari || isFirefox);
+
+  return isChrome || isEdge || isSafari || isFirefox;
+}
+
+function getBrowserUserAgent(userAgent) {
+  var regexps = {
+      Chrome: [/Chrome\/(\S+)/],
+      Firefox: [/Firefox\/(\S+)/],
+      MSIE: [/MSIE (\S+);/],
+      Opera: [/Opera\/.*?Version\/(\S+)/ /* Opera 10 */, /Opera\/(\S+)/ /* Opera 9 and older */],
+      Safari: [/Version\/(\S+).*?Safari\//],
+    },
+    re,
+    m,
+    browser,
+    version;
+
+  if (userAgent === undefined) userAgent = navigator.userAgent;
+
+  for (browser in regexps)
+    while ((re = regexps[browser].shift()))
+      if ((m = userAgent.match(re))) {
+        version = m[1].match(new RegExp('[^.]+(?:.[^.]+){0,1}'))[0];
+        const { major, minor } = extractVersion(version);
+        return {
+          name: browser,
+          major,
+          minor,
+        };
+      }
+
+  return null;
+}
+
+function extractVersion(versionStr) {
+  // Split the string by "."
+  const parts = versionStr.split('.');
+
+  // Check for valid input
+  if (parts.length === 0 || parts.some((part) => isNaN(part))) {
+    return { major: null, minor: null };
+  }
+
+  // Extract major version
+  const major = parseInt(parts[0], 10);
+
+  // Handle minor version (default to 0)
+  const minor = parts.length > 1 ? parseInt(parts[1], 10) : 0;
+
+  return { major, minor };
+}

frontend/src/_helpers/editorHelpers.js

@@ -49,6 +49,7 @@ import { Icon } from '@/Editor/Components/Icon';
 import { Link } from '@/Editor/Components/Link';
 import { Form } from '@/Editor/Components/Form/Form';
 import { BoundedBox } from '@/Editor/Components/BoundedBox/BoundedBox';
+import { isPDFSupported } from '@/_helpers/appUtils';
 
 export function memoizeFunction(func) {
   const cache = new Map();
@@ -119,8 +120,13 @@ export const AllComponents = {
   Form,
   BoundedBox,
 };
+if (isPDFSupported()) {
+  AllComponents.PDF = await import('@/Editor/Components/PDF').then((module) => module.PDF);
+}
 
 export const getComponentToRender = (componentName) => {
+  const shouldHideWidget = componentName === 'PDF' && !isPDFSupported();
+  if (shouldHideWidget) return null;
   return AllComponents[componentName];
 };
 

frontend/src/_stores/utils.js

@@ -333,70 +333,6 @@ function toRemoveExposedvariablesFromComponentDiff(object) {
   return copy;
 }
 
-export function isPDFSupported() {
-  const browser = getBrowserUserAgent();
-
-  if (!browser) {
-    return true;
-  }
-
-  const isChrome = browser.name === 'Chrome' && browser.major >= 92;
-  const isEdge = browser.name === 'Edge' && browser.major >= 92;
-  const isSafari = browser.name === 'Safari' && browser.major >= 15 && browser.minor >= 4; // Handle minor version check for Safari
-  const isFirefox = browser.name === 'Firefox' && browser.major >= 90;
-
-  console.log('browser--', browser, isChrome || isEdge || isSafari || isFirefox);
-
-  return isChrome || isEdge || isSafari || isFirefox;
-}
-
-export function getBrowserUserAgent(userAgent) {
-  var regexps = {
-      Chrome: [/Chrome\/(\S+)/],
-      Firefox: [/Firefox\/(\S+)/],
-      MSIE: [/MSIE (\S+);/],
-      Opera: [/Opera\/.*?Version\/(\S+)/ /* Opera 10 */, /Opera\/(\S+)/ /* Opera 9 and older */],
-      Safari: [/Version\/(\S+).*?Safari\//],
-    },
-    re,
-    m,
-    browser,
-    version;
-
-  if (userAgent === undefined) userAgent = navigator.userAgent;
-
-  for (browser in regexps)
-    while ((re = regexps[browser].shift()))
-      if ((m = userAgent.match(re))) {
-        version = m[1].match(new RegExp('[^.]+(?:.[^.]+){0,1}'))[0];
-        const { major, minor } = extractVersion(version);
-        return {
-          name: browser,
-          major,
-          minor,
-        };
-      }
-
-  return null;
-}
-
-function extractVersion(versionStr) {
-  // Split the string by "."
-  const parts = versionStr.split('.');
-
-  // Check for valid input
-  if (parts.length === 0 || parts.some((part) => isNaN(part))) {
-    return { major: null, minor: null };
-  }
-
-  // Extract major version
-  const major = parseInt(parts[0], 10);
-
-  // Handle minor version (default to 0)
-  const minor = parts.length > 1 ? parseInt(parts[1], 10) : 0;
-
-  return { major, minor };
-}
 export function createReferencesLookup(refState, forQueryParams = false, initalLoad = false) {
   if (forQueryParams && _.isEmpty(refState['parameters'])) {
     return { suggestionList: [] };