Organize; add comment

Author: Justin Mahar

src/components/embeds/FacebookEmbed.tsx

@@ -174,10 +174,10 @@ export const FacebookEmbed = ({
     height: isPercentageHeight
       ? '100%'
       : typeof height !== 'undefined'
-      ? height
-      : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
-      ? '100%'
-      : defaultPlaceholderHeight,
+        ? height
+        : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
+          ? '100%'
+          : defaultPlaceholderHeight,
     border: '1px solid #dee2e6',
     borderRadius,
   };

src/components/embeds/InstagramEmbed.tsx

@@ -174,10 +174,10 @@ export const InstagramEmbed = ({
     height: isPercentageHeight
       ? '100%'
       : typeof height !== 'undefined'
-      ? height
-      : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
-      ? '100%'
-      : defaultPlaceholderHeight,
+        ? height
+        : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
+          ? '100%'
+          : defaultPlaceholderHeight,
     border: '1px solid #dee2e6',
     borderRadius,
   };

src/components/embeds/LinkedInEmbed.tsx

@@ -48,8 +48,8 @@ export const LinkedInEmbed = ({
       typeof height !== 'undefined'
         ? height
         : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
-        ? '100%'
-        : defaultPlaceholderHeight,
+          ? '100%'
+          : defaultPlaceholderHeight,
     border: 'solid 1px rgba(0, 0, 0, 0.15)',
     borderRadius,
   };

src/components/embeds/PinterestEmbed.tsx

@@ -48,8 +48,8 @@ export const PinterestEmbed = ({
       typeof height !== 'undefined'
         ? height
         : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
-        ? '100%'
-        : defaultPlaceholderHeight,
+          ? '100%'
+          : defaultPlaceholderHeight,
     border: 'solid 1px rgba(0, 0, 0, 0.15)',
     borderRadius,
   };

src/components/embeds/TikTokEmbed.tsx

@@ -133,8 +133,8 @@ export const TikTokEmbed = ({
       typeof height !== 'undefined'
         ? height
         : typeof divProps.style?.height !== 'undefined' || typeof divProps.style?.maxHeight !== 'undefined'
-        ? '100%'
-        : defaultPlaceholderHeight,
+          ? '100%'
+          : defaultPlaceholderHeight,
     border: 'solid 1px rgba(22,24,35,0.12)',
     borderRadius,
   };

src/components/placeholder/PlaceholderEmbed.tsx

@@ -6,7 +6,9 @@ import { BorderSpinner } from './parts/BorderSpinner';
 import { EngagementIconsPlaceholder } from './parts/EngagementIconsPlaceholder';
 import { ProfilePlaceholder } from './parts/ProfilePlaceholder';
 
-const isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i
+// See: https://pragmaticwebsecurity.com/articles/spasecurity/react-xss-part1
+const isJavaScriptProtocol =
+  /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
 
 export interface PlaceholderEmbedProps extends DivProps {
   url: string;
@@ -26,7 +28,6 @@ export const PlaceholderEmbed = ({
   spinnerDisabled,
   ...divProps
 }: PlaceholderEmbedProps) => {
-
   if (isJavaScriptProtocol.test(url) && !allowJavaScriptUrls) {
     console.warn(`PlaceholderEmbed has blocked a javascript: URL as a security precaution`);
     return null;