try fix in portal

Codecademy · Oct 15, 2024 · 102a914 · 102a914
1 parent 4327fc2
commit 102a914
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
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/Video/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx
@@ -20,6 +20,7 @@ export const MarkdownVideo: React.FC<MarkdownVideoProps> = (props) => {
       muted: props?.muted,
       videoTitle: props?.title,
       videoUrl: props?.src,
+      style: props?.style,
       width: Number(props?.width),
     };
 

diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -114,6 +114,43 @@ export const createTagOverride = (
   },
 });
 
+// generic video tag override
+export const createVideoOverride = (
+  tagName: string,
+  Override: MarkdownOverrideSetting
+) => ({
+  shouldProcessNode(node: HTMLToReactNode) {
+    if (!Override || node?.attribs?.src) 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 props = {
+      ...processAttributes(node.attribs),
+      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,