Only import ssr polyfill on server side rendering (#10633)

* Only import ssr polyfill on server side rendering * Compare tag ignoring case * Use html attribute api * fix order of attr in test snapshot
opencollective · Sep 3, 2024 · 02ba0fc · 02ba0fc
1 parent a382a29
commit 02ba0fc
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/components/HTMLContent.js b/components/HTMLContent.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { CaretDown } from '@styled-icons/fa-solid/CaretDown';
 import { CaretUp } from '@styled-icons/fa-solid/CaretUp';
 import { Markup } from 'interweave';
-import { merge, pick } from 'lodash';
 import { getLuminance } from 'polished';
 import { FormattedMessage } from 'react-intl';
 import styled, { css } from 'styled-components';
@@ -100,22 +99,22 @@ const HTMLContent = styled(
             allowAttributes
             transform={node => {
               // Allow some iframes
-              if (node.tagName === 'iframe') {
+              if (node.tagName.toLowerCase() === 'iframe') {
                 const src = node.getAttribute('src');
                 const parsedUrl = new URL(src);
                 const hostname = parsedUrl.hostname;
                 if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
-                  const attributes = merge({}, ...node.attributes.map(({ name, value }) => ({ [name]: value })));
                   return (
                     <iframe
-                      {...pick(attributes, ['width', 'height'])}
                       allowFullScreen
-                      title={attributes.title || 'Embed content'}
+                      width={node.getAttribute('width')}
+                      height={node.getAttribute('height')}
+                      title={node.getAttribute('title') || 'Embed content'}
                       src={src}
                     />
                   );
                 }
-              } else if (node.tagName === 'a') {
+              } else if (node.tagName.toLowerCase() === 'a') {
                 // Open links in new tab
                 if (openLinksInNewTab) {
                   node.setAttribute('target', '_blank');

diff --git a/components/crowdfunding-redesign/Fundraiser.tsx b/components/crowdfunding-redesign/Fundraiser.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { getApplicableTaxes } from '@opencollective/taxes';
 import { cva } from 'class-variance-authority';
 import { Markup } from 'interweave';
-import { merge, pick } from 'lodash';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 // eslint-disable-next-line no-restricted-imports
 import Link from 'next/link';
@@ -318,22 +317,22 @@ export default function Fundraiser({ account }) {
                   allowAttributes
                   transform={node => {
                     // Allow some iframes
-                    const attrs = [].slice.call(node.attributes);
-                    if (node.tagName === 'iframe') {
+                    if (node.tagName.toLowerCase() === 'iframe') {
                       const src = node.getAttribute('src');
                       const parsedUrl = new URL(src);
                       const hostname = parsedUrl.hostname;
                       if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
-                        const attributes = merge({}, ...attrs.map(({ name, value }) => ({ [name]: value })));
                         return (
                           <iframe
-                            {...pick(attributes, ['width', 'height', 'frameborder', 'allowfullscreen'])}
-                            title={attributes.title || 'Embed content'}
+                            width={node.getAttribute('width')}
+                            height={node.getAttribute('height')}
+                            allowFullScreen={node.getAttribute('allowfullscreen') as any}
+                            title={node.getAttribute('title') || 'Embed content'}
                             src={src}
                           />
                         );
                       }
-                    } else if (node.tagName === 'a') {
+                    } else if (node.tagName.toLowerCase() === 'a') {
                       // Open links in new tab
                       node.setAttribute('target', '_blank');
                       node.setAttribute('rel', 'noopener noreferrer');

diff --git a/components/crowdfunding-redesign/Profile.tsx b/components/crowdfunding-redesign/Profile.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Markup } from 'interweave';
-import { merge, pick } from 'lodash';
 import { MoreHorizontal, Share } from 'lucide-react';
 import { FormattedMessage } from 'react-intl';
 
@@ -168,22 +167,23 @@ export default function Profile({ account }) {
               allowAttributes
               transform={node => {
                 // Allow some iframes
-                const attrs = [].slice.call(node.attributes);
-                if (node.tagName === 'iframe') {
+                if (node.tagName.toLowerCase() === 'iframe') {
                   const src = node.getAttribute('src');
                   const parsedUrl = new URL(src);
                   const hostname = parsedUrl.hostname;
                   if (['youtube-nocookie.com', 'www.youtube-nocookie.com', 'anchor.fm'].includes(hostname)) {
-                    const attributes = merge({}, ...attrs.map(({ name, value }) => ({ [name]: value })));
                     return (
                       <iframe
-                        {...pick(attributes, ['width', 'height', 'frameborder', 'allowfullscreen'])}
-                        title={attributes.title || 'Embed content'}
+                        width={node.getAttribute('width')}
+                        height={node.getAttribute('height')}
+                        allowFullScreen={node.getAttribute('allowfullscreen') as any}
+                        frameBorder={node.getAttribute('frameborder')}
+                        title={node.getAttribute('title') || 'Embed content'}
                         src={src}
                       />
                     );
                   }
-                } else if (node.tagName === 'a') {
+                } else if (node.tagName.toLowerCase() === 'a') {
                   // Open links in new tab
                   node.setAttribute('target', '_blank');
                   node.setAttribute('rel', 'noopener noreferrer');

diff --git a/pages/_app.js b/pages/_app.js
@@ -54,7 +54,9 @@ import { ModalProvider } from '../components/ModalContext';
 import NewsAndUpdatesProvider from '../components/NewsAndUpdatesProvider';
 import { TooltipProvider } from '../components/ui/Tooltip';
 
-PolyfillInterweaveSSR();
+if (typeof window === 'undefined') {
+  PolyfillInterweaveSSR();
+}
 
 class OpenCollectiveFrontendApp extends App {
   static propTypes = {

diff --git a/test/cypress/integration/04-collective.test.js b/test/cypress/integration/04-collective.test.js
@@ -177,7 +177,7 @@ describe('Collective page', () => {
       cy.get('[data-cy="InlineEditField-Btn-Save"]').click();
       cy.get('[data-cy="longDescription"]').should(
         'have.html',
-        '<div><strong>Hello world!&nbsp;</strong><strong><iframe width="100%" height="394" allowfullscreen="" title="Embed content" src="https://www.youtube-nocookie.com/embed/2oyhlad64-s/?showinfo=0"></iframe><figcaption></figcaption></strong></div>',
+        '<div><strong>Hello world!&nbsp;</strong><strong><iframe allowfullscreen="" width="100%" height="394" title="Embed content" src="https://www.youtube-nocookie.com/embed/2oyhlad64-s/?showinfo=0"></iframe><figcaption></figcaption></strong></div>',
       );
     });
   });