Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Markdown): filter styles from video #2954

Merged
merged 12 commits into from
Oct 16, 2024
Merged
8 changes: 5 additions & 3 deletions packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
Original file line number Diff line number Diff line change
@@ -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());
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tried a few different ways to format the Markdown here and it all errors, can come back to the tables later

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);
3 changes: 2 additions & 1 deletion packages/gamut/src/Markdown/index.tsx
Original file line number Diff line number Diff line change
@@ -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 &&
56 changes: 56 additions & 0 deletions packages/gamut/src/Markdown/libs/overrides/index.tsx
Original file line number Diff line number Diff line change
@@ -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,
1 change: 0 additions & 1 deletion packages/gamut/src/Markdown/libs/sanitizationConfig.ts
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ export const defaultSanitizationConfig = {
'loop',
'muted',
'src',
'style',
'width',
],
iframe: [
Original file line number Diff line number Diff line change
@@ -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>
Loading