fix(Markdown): filter styles from video

Enables source tags from Video and filters out `video`s with a style prop
Codecademy · Oct 16, 2024 · 51e34e4 · 51e34e4
1 parent 4327fc2
commit 51e34e4
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 8 deletions.
diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -90,13 +90,15 @@ describe('<Markdown />', () => {
   });
 
   it('Renders custom tables in markdown', () => {
+    jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({ text: table });
     expect(document.querySelectorAll('div.tableWrapper table').length).toEqual(
       1
     );
   });
 
   it('Skips rendering custom tables in markdown when skipProcessing.table is true', () => {
+    jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({
       skipDefaultOverrides: { table: true },
       text: table,
@@ -121,11 +123,11 @@ describe('<Markdown />', () => {
     renderView({ text: videoMarkdown });
     screen.getByTitle(mockTitle);
   });
-  it('Renders video tags using the Video component if they have an src', () => {
+
+  it('Renders video tags using the Video component if they have a source', () => {
     renderView({ text: videoSourceMarkdown });
-    expect(screen.queryByTitle(mockTitle)).toBeNull();
+    screen.getByTitle(mockTitle);
   });
-
   it('Renders YouTube iframes using the Video component', () => {
     renderView({ text: youtubeMarkdown });
     screen.getByTitle(mockTitle);

diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx
@@ -10,6 +10,7 @@ import {
   createCodeBlockOverride,
   createInputOverride,
   createTagOverride,
+  createVideoOverride,
   MarkdownOverrideSettings,
   standardOverrides,
 } from './libs/overrides';
@@ -117,7 +118,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
           allowedAttributes: ['style'],
         }),
       !skipDefaultOverrides.video &&
-        createTagOverride('video', {
+        createVideoOverride('video', {
           component: MarkdownVideo,
         }),
       !skipDefaultOverrides.details &&

diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -114,6 +114,62 @@ export const createTagOverride = (
   },
 });
 
+// generic video tag override
+export const createVideoOverride = (
+  tagName: string,
+  Override: MarkdownOverrideSetting
+) => ({
+  shouldProcessNode(node: HTMLToReactNode) {
+    if (!Override) return false;
+
+    if (Override.shouldProcessNode) {
+      return Override.shouldProcessNode(node);
+    }
+    return node.name === tagName.toLowerCase();
+  },
+  processNode(
+    node: HTMLToReactNode,
+    children: HTMLToReactNode[],
+    key: React.Key
+  ) {
+    if (!Override) return null;
+
+    const { src, ...processedAttributes } = processAttributes(
+      node.attribs
+    ) as any;
+
+    const altVideoSrc = [] as any;
+
+    if (children) {
+      children.forEach((element: any) => {
+        if (element.type === 'source' && element?.props?.src) {
+          if (element.props?.type.includes('video')) {
+            altVideoSrc.push({
+              src: element?.props.src,
+              type: element?.props.type,
+            });
+          }
+        } // Once we enable captions in the Video component, we can add an additional check here - GM-909
+      });
+    }
+
+    const props = {
+      src: altVideoSrc.length > 0 ? altVideoSrc : src,
+      ...processedAttributes,
+      children,
+      key,
+    };
+
+    if (Override.processNode) {
+      return Override.processNode(node, props);
+    }
+
+    if (!Override.component) return null;
+
+    return <Override.component {...props} />;
+  },
+});
+
 // Allows <CodeBlock></CodeBlock> override and overrides of standard fenced codeblocks
 export const createCodeBlockOverride = (
   tagName: string,

diff --git a/packages/gamut/src/Markdown/libs/sanitizationConfig.ts b/packages/gamut/src/Markdown/libs/sanitizationConfig.ts
@@ -23,7 +23,6 @@ export const defaultSanitizationConfig = {
       'loop',
       'muted',
       'src',
-      'style',
       'width',
     ],
     iframe: [

diff --git a/packages/styleguide/stories/Organisms/Markdown/markdown-example.md b/packages/styleguide/stories/Organisms/Markdown/markdown-example.md
@@ -358,7 +358,6 @@ Vimeo and Youtube video iframes will be rendered by our Video component, otherwi
 
 ### Video
 
-`video`s with an `src` will be rendered by our Video component, otherwise they'll render as stated.
-
-<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" title="video" />
+`video`s with an `src` or a `source` video file will be rendered by our Video component, otherwise they'll render the original code. Videos with a `style` prop or another restricted prop will be stripped of that property.
 
+<video width="100%" height="100%" align="middle" controls> <source src="https://content.codecademy.com/articles/db-browser/open-database.mp4" type="video/mp4"> Your browser does not support the video tag. </video>