From 17d20a3d7c484ca8e70cd0a0bbbcf64aa3c88ae9 Mon Sep 17 00:00:00 2001
From: Benjamin Piouffle <benjamin@opencollective.com>
Date: Mon, 2 Sep 2024 14:35:04 +0200
Subject: [PATCH] fix(RichTextEditor): video embedding (#10631)

---
 .storybook/preview.js                         |  2 +-
 components/RichTextEditor.tsx                 | 18 ++++++++++++---
 package-lock.json                             | 14 ++++++------
 package.json                                  |  2 +-
 pages/_app.js                                 |  2 +-
 .../cypress/integration/04-collective.test.js | 22 ++++++++++++++-----
 6 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6e5642a9a16..fe67a4a5e0f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -14,7 +14,7 @@ import UserProvider from '../components/UserProvider';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'nprogress/nprogress.css';
-import 'trix/dist/trix.css';
+import '@opencollective/trix/dist/trix.css';
 import '../public/static/styles/app.css';
 
 // config file
diff --git a/components/RichTextEditor.tsx b/components/RichTextEditor.tsx
index f9888adbb74..96524b5ddee 100644
--- a/components/RichTextEditor.tsx
+++ b/components/RichTextEditor.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@styled-system/css';
-import { get } from 'lodash';
+import { get, remove } from 'lodash';
 import styled from 'styled-components';
 import { v4 as uuid } from 'uuid';
 import { isURL } from 'validator';
@@ -272,7 +272,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
 
     // Load Trix
     if (typeof window !== 'undefined') {
-      this.Trix = require('trix').default; // eslint-disable-line @typescript-eslint/no-var-requires
+      this.Trix = require('@opencollective/trix').default; // eslint-disable-line @typescript-eslint/no-var-requires
       document.addEventListener('trix-before-initialize', this.trixBeforeInitialize);
     }
   }
@@ -355,6 +355,8 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
   trixBeforeInitialize = () => {
     this.Trix.config.blockAttributes.heading1 = { tagName: 'h3' };
     this.Trix.config.attachments.preview.caption = { name: false, size: false };
+    remove(this.Trix.config.parser.forbiddenElements, type => type === 'iframe'); // Allow iframes for video embeds
+    this.Trix.config.parser.allowedAttributes.push('frameborder', 'allowfullscreen');
   };
 
   trixInitialize = event => {
@@ -383,7 +385,7 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
         <div class="trix-dialog__link-fields">
           <input type="url" name="video-url" class="trix-input trix-input--dialog trix-input--dialog-embed" placeholder="Enter Video URL…" aria-label="Video URL" data-trix-input="">
           <div class="trix-button-group">
-            <input type="button" class="trix-button trix-button--dialog" value="Add Video" data-trix-action="x-add-embed">
+            <input data-cy="add-video-submit" type="button" class="trix-button trix-button--dialog" value="Add Video" data-trix-action="x-add-embed">
           </div>
         </div>
         <strong>Note: Only YouTube links are supported.</strong>
@@ -410,6 +412,16 @@ export default class RichTextEditor extends React.Component<RichTextEditorProps,
       const embedLink = toolbarElement.querySelector('.trix-input--dialog-embed').value?.trim();
       if (embedLink) {
         this.embedIframe(embedLink);
+
+        const attachVideoDialog = toolbarElement.querySelector('[data-trix-dialog=video-url]');
+
+        // Clear input
+        attachVideoDialog.querySelector('.trix-input--dialog-embed').value = '';
+
+        // Close dialog
+        if (attachVideoDialog.getAttribute('data-trix-active') === '') {
+          attachVideoDialog.removeAttribute('data-trix-active');
+        }
       }
     }
   };
diff --git a/package-lock.json b/package-lock.json
index 4593d782738..fcabbd37774 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@hyperwatch/hyperwatch": "4.0.0",
         "@icons-pack/react-simple-icons": "^9.4.1",
         "@opencollective/taxes": "4.3.0",
+        "@opencollective/trix": "2.1.6",
         "@popperjs/core": "2.11.8",
         "@radix-ui/react-accordion": "1.2.0",
         "@radix-ui/react-alert-dialog": "1.0.5",
@@ -132,7 +133,6 @@
         "styled-system": "5.1.5",
         "tailwind-merge": "2.4.0",
         "throng": "5.0.0",
-        "trix": "2.1.4",
         "uuid": "9.0.1",
         "validator": "13.12.0",
         "webpack-manifest-plugin": "5.0.0",
@@ -7116,6 +7116,12 @@
         "npm": ">9.0.0"
       }
     },
+    "node_modules/@opencollective/trix": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@opencollective/trix/-/trix-2.1.6.tgz",
+      "integrity": "sha512-O6yVkQSxzwnePjQjsAXmzmyekSo4yhRcOsfeqZcOwonbilEbDgvuPneJq7dEL3V5PLE0ExkuEVOrBKz7IR2hQg==",
+      "license": "MIT"
+    },
     "node_modules/@peculiar/asn1-schema": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.8.tgz",
@@ -36875,12 +36881,6 @@
         "node": ">= 14.0.0"
       }
     },
-    "node_modules/trix": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/trix/-/trix-2.1.4.tgz",
-      "integrity": "sha512-f0AGnqBV8J2qW+fCtVU71JmvzjcxnO5Xbbd6Cl2KrHVRpgXKDqNGTmDmQzNHWU7T2OgtwHwvNiN+OIf3Z3KmHQ==",
-      "license": "MIT"
-    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
diff --git a/package.json b/package.json
index a39470e1ab2..4c43f20be20 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,7 @@
     "styled-system": "5.1.5",
     "tailwind-merge": "2.4.0",
     "throng": "5.0.0",
-    "trix": "2.1.4",
+    "@opencollective/trix": "2.1.6",
     "uuid": "9.0.1",
     "validator": "13.12.0",
     "webpack-manifest-plugin": "5.0.0",
diff --git a/pages/_app.js b/pages/_app.js
index fadf8029a59..f7e4cfbf4e3 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -22,7 +22,7 @@ import UserProvider from '../components/UserProvider';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'nprogress/nprogress.css';
-import 'trix/dist/trix.css';
+import '@opencollective/trix/dist/trix.css';
 import '../public/static/styles/app.css';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
diff --git a/test/cypress/integration/04-collective.test.js b/test/cypress/integration/04-collective.test.js
index 67348209763..fa395114a88 100644
--- a/test/cypress/integration/04-collective.test.js
+++ b/test/cypress/integration/04-collective.test.js
@@ -154,19 +154,31 @@ describe('Collective page', () => {
   });
 
   describe('About section', () => {
-    it('Can add description to about section', () => {
-      const richDescription = 'Hello world!';
+    it('Can add a rich description', () => {
       scrollToSection(Sections.ABOUT);
       cy.contains('#section-about button', 'Add description').click();
+
       // {ctrl}b fails on macos
       // {ctrl} maps control key & {meta} maps command key
       const ctrlOrMetaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+
+      // Type "Hello world!" and make it bold
       cy.get('#section-about [data-cy="RichTextEditor"] trix-editor')
-        .type(richDescription)
+        .type('Hello world!')
         .type('{selectall}')
-        .type(`${ctrlOrMetaKey}b`);
+        .type(`${ctrlOrMetaKey}b`)
+        .type('{rightArrow} ');
+
+      // Add a YouTube video
+      cy.get('#section-about [data-cy="RichTextEditor"] button[data-trix-action=x-video-dialog-open]').click();
+      cy.get('input[name="video-url"]').type('https://www.youtube.com/watch?v=2oyhlad64-s');
+      cy.getByDataCy('add-video-submit').click();
+
       cy.get('[data-cy="InlineEditField-Btn-Save"]').click();
-      cy.get('[data-cy="longDescription"]').should('have.html', '<div><strong>Hello world!</strong></div>');
+      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>',
+      );
     });
   });
 });