diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx index 074bf1e26d..dea413b9d8 100644 --- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx +++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx @@ -90,6 +90,7 @@ describe('', () => { }); 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 @@ -97,6 +98,7 @@ describe('', () => { }); 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('', () => { 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 index e0dac07469..60d56e8648 100644 --- 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 { 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 index 2344557697..d1b639a49e 100644 --- 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 ; + }, +}); + // Allows 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 index eee0acbd69..9759db07ec 100644 --- 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 index 452aa2bcbd..ee8578c45d 100644 --- 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. - -