fix(RichTextEditor): video embedding (#10631)

.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

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');
+        }
       }
     }
   };

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",

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';
 

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>',
+      );
     });
   });
 });