From 218705553a47f137f9ae043bad0505581b4f78a5 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 19 Oct 2026 08:53:06 -0400
Subject: [PATCH 1/3] fix(Markdown): Escape open video tags

---
 .../src/Markdown/__tests__/Markdown.test.tsx  | 21 ++++++++++++++++++
 packages/gamut/src/Markdown/index.tsx         | 18 +++------------
 .../src/Markdown/libs/overrides/index.tsx     | 22 ++++++++++++++++++-
 .../src/Markdown/libs/overrides/utils.tsx     | 12 ++++++++++
 .../src/lib/Organisms/Markdown/example.md     |  8 +++++++
 5 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
index f89d8f48e4b..90cea2daa5e 100644
--- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
+++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx
@@ -213,6 +213,27 @@ describe('<Markdown />', () => {
     expect(document.querySelectorAll('video').length).toEqual(1);
     expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
   });
+
+  it('Leaves <video> inside inline code alone when a real video follows', () => {
+    renderView({
+      text: 'The `<video>` element needs a closing tag.\n\n<video src="/example.webm" controls>\n  Video not supported\n</video>',
+      videoOverride: { component: MarkdownVideo },
+    });
+    expect(document.querySelector('code')?.textContent).toEqual('<video>');
+    screen.getByTitle(mockTitle);
+  });
+
+  it('Leaves <video> inside fenced code blocks alone', () => {
+    renderView({
+      text: '```html\n<video src="/example.webm"></video>\n```',
+      videoOverride: { component: MarkdownVideo },
+    });
+    expect(document.querySelector('pre code')?.textContent).toContain(
+      '<video src="/example.webm"></video>'
+    );
+    expect(screen.queryByTitle(mockTitle)).not.toBeInTheDocument();
+  });
+
   it('Wraps the markdown in a div by default (block)', () => {
     renderView({ text: basicMarkdown });
     expect(
diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx
index 6aea782ab35..b8445b58291 100644
--- a/packages/gamut/src/Markdown/index.tsx
+++ b/packages/gamut/src/Markdown/index.tsx
@@ -12,6 +12,7 @@ import {
   createInputOverride,
   createTagOverride,
   createVideoOverride,
+  createVideoParagraphOverride,
   MarkdownOverrideSetting,
   MarkdownOverrideSettings,
   standardOverrides,
@@ -35,20 +36,6 @@ const preprocessingInstructions = createPreprocessingInstructions();
 
 const isValidNode = () => true;
 
-/**
- * Puts each <video> block on its own lines so marked emits an HTML block.
- * A single-line <video>...</video> is parsed as paragraph text, which wraps
- * the video's block-level output in a <p>.
- */
-const normalizeVideoBlocks = (text: string) =>
-  text.replace(
-    /(<video\b[^>]*>)([\s\S]*?)(<\/video>)/gi,
-    (_match, open: string, inner: string, close: string) => {
-      const body = inner.trim();
-      return `\n\n${open}\n${body ? `${body}\n` : ''}${close}\n\n`;
-    }
-  );
-
 const MarkdownWrapper = styled.div<{ spacing: 'loose' | 'tight' | 'none' }>`
   ${({ theme, spacing }) => {
     const spacingStyleFunction = markdownStyles[spacing];
@@ -144,6 +131,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
           component: Table,
           allowedAttributes: ['style'],
         }),
+      videoOverride && createVideoParagraphOverride('video'),
       videoOverride &&
         createVideoOverride({ tagName: 'video', Override: videoOverride }),
       !skipDefaultOverrides.details &&
@@ -168,7 +156,7 @@ export class Markdown extends PureComponent<MarkdownProps> {
     // Render markdown to html
     const rawHtml = inline
       ? marked.parseInline(text, markedOptions)
-      : marked(normalizeVideoBlocks(text), markedOptions);
+      : marked(text, markedOptions);
 
     const sanitizationConfig = {
       ...defaultSanitizationConfig,
diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
index 81c0bbe77ba..4891ed2be83 100644
--- a/packages/gamut/src/Markdown/libs/overrides/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -4,7 +4,13 @@ import camelCaseMap from 'html-to-react/lib/camel-case-attribute-names';
 import get from 'lodash/get';
 import * as React from 'react';
 
-import { getLabel, isCheckboxParent, isInput, isLabelText } from './utils';
+import {
+  getLabel,
+  isCheckboxParent,
+  isInput,
+  isLabelText,
+  isVideoParent,
+} from './utils';
 
 const processNodeDefinitions = HtmlToReact.ProcessNodeDefinitions();
 
@@ -214,6 +220,20 @@ export const createVideoOverride = ({
   },
 });
 
+// Drops the <p> marked wraps around a single-line video, since the Video component renders block-level elements
+export const createVideoParagraphOverride = (tagName: string) => ({
+  shouldProcessNode(node: HTMLToReactNode) {
+    return isVideoParent(node, tagName);
+  },
+  processNode(
+    _node: HTMLToReactNode,
+    children: HTMLToReactNode[],
+    key: React.Key
+  ) {
+    return <React.Fragment key={key}>{children}</React.Fragment>;
+  },
+});
+
 // Allows <CodeBlock></CodeBlock> override and overrides of standard fenced codeblocks
 export const createCodeBlockOverride = (
   tagName: string,
diff --git a/packages/gamut/src/Markdown/libs/overrides/utils.tsx b/packages/gamut/src/Markdown/libs/overrides/utils.tsx
index 4e359e23338..12587b95a8c 100644
--- a/packages/gamut/src/Markdown/libs/overrides/utils.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/utils.tsx
@@ -10,6 +10,18 @@ export const isCheckboxParent = (node: HTMLToReactNode, type: string) =>
       node.children[0]?.attribs?.type === type
   );
 
+// a <p> that only holds video tags, i.e. a single-line <video></video> that marked parsed as paragraph text
+export const isVideoParent = (node: HTMLToReactNode, tagName: string) =>
+  Boolean(
+    node.name === 'p' &&
+      node.children?.some((child) => child.name === tagName) &&
+      node.children.every(
+        (child) =>
+          child.name === tagName ||
+          (child.type === 'text' && !child.data.trim())
+      )
+  );
+
 export const isLabelText = (node: HTMLToReactNode, type: string) => {
   // we are using this text to create the accessible label, so are basically deduplicating it here
   return Boolean(
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/example.md b/packages/styleguide/src/lib/Organisms/Markdown/example.md
index 8d9568d3474..a0afeb5066b 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/example.md
+++ b/packages/styleguide/src/lib/Organisms/Markdown/example.md
@@ -28,6 +28,14 @@
 
 ### Philosophy
 
+In addition to images, HTML also supports displaying
+videos
+Preview: Docs Embedding videos within a site creates lively and informative pages that are attractive to visitors. Like the `<img>` element, the `<video>` element requires a src attribute with a link to the video source. Unlike the `<img>` element however, the `<video>` element requires an opening and a closing tag.
+
+<video src="myVideo.mp4" width="320" height="240" controls>
+  Video not supported
+</video>
+
 Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
 
 Readability, however, is emphasized above all else. A Markdown-formatted

From 54a6cd2f0c72dc0746d035588cb90948c21916d9 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 19 Oct 2026 09:25:25 -0400
Subject: [PATCH 2/3] fix type failures

---
 packages/gamut/src/Markdown/libs/overrides/index.tsx |  2 +-
 .../styleguide/src/lib/Organisms/Markdown/example.md | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx
index 4891ed2be83..71d91665a02 100644
--- a/packages/gamut/src/Markdown/libs/overrides/index.tsx
+++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx
@@ -227,7 +227,7 @@ export const createVideoParagraphOverride = (tagName: string) => ({
   },
   processNode(
     _node: HTMLToReactNode,
-    children: HTMLToReactNode[],
+    children: React.ReactNode[],
     key: React.Key
   ) {
     return <React.Fragment key={key}>{children}</React.Fragment>;
diff --git a/packages/styleguide/src/lib/Organisms/Markdown/example.md b/packages/styleguide/src/lib/Organisms/Markdown/example.md
index a0afeb5066b..19dcc50ea7c 100644
--- a/packages/styleguide/src/lib/Organisms/Markdown/example.md
+++ b/packages/styleguide/src/lib/Organisms/Markdown/example.md
@@ -26,16 +26,22 @@
 
 ## Overview
 
-### Philosophy
+### Tests tests tests
+
+In addition to images, HTML also supports displaying videos
 
-In addition to images, HTML also supports displaying
-videos
 Preview: Docs Embedding videos within a site creates lively and informative pages that are attractive to visitors. Like the `<img>` element, the `<video>` element requires a src attribute with a link to the video source. Unlike the `<img>` element however, the `<video>` element requires an opening and a closing tag.
 
+<video>
+
+):)
+
 <video src="myVideo.mp4" width="320" height="240" controls>
   Video not supported
 </video>
 
+### Philosophy
+
 Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
 
 Readability, however, is emphasized above all else. A Markdown-formatted

From 228e55b2d3f66c85ae95f7ee691a7c773cdcbeab Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 19 Oct 2026 15:06:04 -0400
Subject: [PATCH 3/3] v3 test

---
 package.json | 3 ++-
 yarn.lock    | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5602fb5a022..3fa5aed8f10 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "lodash": "^4.17.23",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-helmet-async": "^2.0.5"
+    "react-helmet-async": "^2.0.5",
+    "react-player": "^3.4.0"
   },
   "devDependencies": {
     "@babel/cli": "7.24.7",
diff --git a/yarn.lock b/yarn.lock
index 28949752267..26c0df19119 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13442,6 +13442,7 @@ __metadata:
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
     react-helmet-async: "npm:^2.0.5"
+    react-player: "npm:^3.4.0"
     react-test-renderer: "npm:^19.0.0"
     start-server-and-test: "npm:^2.1.5"
     storybook: "npm:^10.3.1"