fix(PPDSC-2605): safari svg filters fix

package.json

@@ -188,6 +188,7 @@
     "package-change-checker": "^1.2.4",
     "prettier": "2.2.1",
     "pretty-proptypes": "^0.6.0",
+    "raw-loader": "^4.0.2",
     "react": "18",
     "react-codesandboxer": "^3.1.1",
     "react-dom": "18",
@@ -222,12 +223,12 @@
     "date-fns": "^2.6.0",
     "debounce": "^1.2.0",
     "dequal": "^1.0.0",
-    "dompurify": "^2.3.1",
     "downshift": "^6.1.7",
     "file-saver": "^2.0.5",
     "glob": "^8.0.3",
     "globby": "^13.1.2",
     "googleapis": "^109.0.1",
+    "isomorphic-dompurify": "^0.24.0",
     "jszip": "^3.7.1",
     "next-seo": "^4.28.1",
     "react-focus-lock": "^2.5.0",

scripts/build-package-json.js

@@ -23,7 +23,7 @@ const allowedPackageProperties = [
 const dependenciesNotToBeIncluded = [
   'jszip',
   'file-saver',
-  'dompurify',
+  'isomorphic-dompurify',
   '@storybook/react',
   '@babel/runtime-corejs3',
   'semver',

site/components/illustrations/illustration-loader.tsx

@@ -1,18 +1,78 @@
-import React from 'react';
-import {pathToID} from './utils';
+import React, {useEffect, useState} from 'react';
+import {isNotSafari, isSafari, pathToID} from './utils';
+
+/**
+ * Only for Safari. It reads the svg file as raw string and returns the problematic <defs> .. </defs> part as additional svg which solves the problem. If the browser is not Safari then all of this is skipped.
+ */
+const getSafariSVGFilters = (
+  sanitize: (source: string) => string,
+  path: string,
+) => {
+  const rawSVG = sanitize(
+    // eslint-disable-next-line import/no-dynamic-require, global-require
+    require(`../../public/static/illustrations/${path}.svg`).default,
+  );
+
+  const defsStart = '<defs>';
+  const defsEnd = '</defs>';
+  const startIndex = rawSVG.indexOf(defsStart);
+  const endIndex = rawSVG.indexOf(defsEnd);
+  const result = rawSVG.substring(startIndex, endIndex + defsEnd.length);
+
+  return startIndex > -1 ? (
+    <svg
+      width="0"
+      height="0"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: result}}
+    />
+  ) : null;
+};
 
 export const getIllustrationComponent = (
   path: string,
   props?: React.SVGProps<SVGSVGElement>,
 ) => {
   const id = pathToID(path);
 
-  const Component = () => (
+  const renderInlineSVG = () => (
     <svg viewBox="0 0 1490 838" width="100%" {...props}>
       <use href={`static/illustrations/${path}.svg#${id}`} />
     </svg>
   );
 
+  const Component = () => {
+    const [safariSVGFilters, setSafariSVGFilters] = useState<
+      JSX.Element | undefined | null
+    >(undefined);
+
+    useEffect(() => {
+      if (isSafari && safariSVGFilters === undefined) {
+        // Dynamically importing 'isomorphic-dompurify' only for Safari to avoid bloating the bundle size for other browsers.
+        const importSanitizer = async () => {
+          const dompurify = await (await import('isomorphic-dompurify'))
+            .default;
+          const value = getSafariSVGFilters(dompurify.sanitize, path);
+          setSafariSVGFilters(value);
+        };
+        importSanitizer();
+      }
+    }, [safariSVGFilters]);
+
+    // If the browser is Safari and there are filters, we render an svg with filters, otherwise we render a clean svg.
+    const safariSVG = (
+      <>
+        {isSafari && safariSVGFilters}
+        {renderInlineSVG()}
+      </>
+    );
+
+    // If the browser is not Safari we will render a clean svg without checking for filters. There is an explicit isNotSafari call because of the server side nature of the component we have to handle a race condition where the window object is not loaded yet.
+    const nonSafariSVG = isNotSafari ? renderInlineSVG() : null;
+
+    return safariSVGFilters !== undefined ? safariSVG : nonSafariSVG;
+  };
+
   return Component;
 };
 

site/components/illustrations/utils.ts

@@ -33,3 +33,11 @@ export const pathToID = (path: string) => {
   }
   return '';
 };
+
+const safariUACheck = /^((?!chrome|android).)*safari/i;
+const isWindowLoaded = typeof window !== 'undefined';
+
+export const isSafari =
+  isWindowLoaded && safariUACheck.test(window.navigator.userAgent);
+export const isNotSafari =
+  isWindowLoaded && !safariUACheck.test(window.navigator.userAgent);

site/components/tools/svg-previewer.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {getColorCssFromTheme, getSSRId, P} from 'newskit';
-import dompurify from 'dompurify';
+import dompurify from 'isomorphic-dompurify';
 import {themeList, ThemeNames} from './colors-theme-list';
 import {
   StyledButtonsContainer,
@@ -12,7 +12,7 @@ import {DownloadControls} from './controls/download-controls';
 import {ThemeControls} from './controls/theme-controls';
 
 export const SvgPreviewer: React.FC = () => {
-  const sanitizer = dompurify.sanitize;
+  const {sanitize} = dompurify;
 
   // The name of the theme being currently used, the initial value will decide the default theme.
   const [currentThemeName, setCurrentThemeName] = useState<ThemeNames>(
@@ -180,7 +180,7 @@ export const SvgPreviewer: React.FC = () => {
             <StyledSingleSvgWrapper key={baseSvgCodeGroup[index].name}>
               <P>{baseSvgCodeGroup[index].name}</P>
               {/* eslint-disable-next-line react/no-danger */}
-              <div dangerouslySetInnerHTML={{__html: sanitizer(svgCode)}} />
+              <div dangerouslySetInnerHTML={{__html: sanitize(svgCode)}} />
             </StyledSingleSvgWrapper>
           ))}
         </StyledSvgGroupContainer>

site/next.config.js

@@ -39,6 +39,10 @@ module.exports = withMDX({
         },
       ]),
     ];
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: 'raw-loader',
+    });
 
     return config;
   },

src/test/test-framework-setup.ts

@@ -1,5 +1,11 @@
 import {matchers, createSerializer} from '@emotion/jest';
 import failOnConsole from 'jest-fail-on-console';
+import {TextEncoder, TextDecoder} from 'util';
+
+// @ts-ignore
+global.TextEncoder = TextEncoder;
+// @ts-ignore
+global.TextDecoder = TextDecoder;
 
 failOnConsole({
   silenceMessage: errorMessage => {