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.
-
-
+`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.
+