Skip to content

fix(Markdown): Escape open video tags - #3442

Open
dreamwasp wants to merge 8 commits into
mainfrom
cass-gmt-1814-fix
Open

dreamwasp wants to merge 8 commits into
mainfrom
cass-gmt-1814-fix

Conversation

@dreamwasp

@dreamwasp dreamwasp commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Overview

Fixes Markdown rendering breaking on open video tags.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-1814
  • Version plan added/updated (or not needed)
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. Go to the Markdown story
  2. See that the open tags don't break rendering anymore (I will delete example before shipping)
  3. You can also check out the page in the LE that no longer breaks

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud

nx-cloud Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 52a57d5


☁️ Nx Cloud last updated this comment at 2026-10-26 12:06:52 UTC

@codecov

codecov Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 93.33333% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 90.99%. Comparing base (a5aad92) to head (52a57d5).
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ckages/gamut/src/Markdown/libs/overrides/utils.tsx 85.71% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3442      +/-   ##
==========================================
- Coverage   91.34%   90.99%   -0.36%     
==========================================
  Files         407      277     -130     
  Lines        6873     5950     -923     
  Branches     2210     1983     -227     
==========================================
- Hits         6278     5414     -864     
+ Misses        586      527      -59     
  Partials        9        9              
Flag Coverage Δ
main ?
pull-request 90.99% <93.33%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dreamwasp
dreamwasp marked this pull request as ready for review October 20, 2026 12:17
@dreamwasp
dreamwasp requested a review from a team as a code owner October 20, 2026 12:17

@LinKCoding LinKCoding left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Played around with the example locally and looks good to me :)

Left some non-blocking thoughts and maybe a reminder to clean up test code?


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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this lead me down a rabbit hole of when someone might write raw HTML and markdown does not like that lol

`<video>` test testtest  ✅ 
Yoo yoo <pre><video> chck </video></pre> ❌ 
<p><code><video> chceeek </video></code></p> ❌

Seems like when using code fences (```) or inline backticks, the < and > characters get converted to &lt; and &gt; respectively, so there's no need for the override to kick in.

TL;DR: writing raw HTML in a markdown component is an edgecase, but probs not one worth worrying about

Comment thread package.json Outdated
"react-dom": "^19.0.0",
"react-helmet-async": "^2.0.5"
"react-helmet-async": "^2.0.5",
"react-player": "^3.4.0"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is also test code, yeah? i.e. to make testing easier?

);

// 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) =>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: the name throws me off a little and the need to have tagName as a parameter

name: isVideoOnlyParagraph is a 🤖 suggestion.

parameter: doesn't hurt I guess, but given how specific the function name is, seems like it's always checking 'video' that it might not be needed

@github-actions

Copy link
Copy Markdown
Contributor

@codecademydev

Copy link
Copy Markdown
Collaborator

📬 Published Alpha Packages:

Package Version npm Diff
@codecademy/gamut 74.0.1-alpha.fbaad7.0 npm diff
@codecademy/gamut-icons 10.2.1-alpha.fbaad7.0 npm diff
@codecademy/gamut-illustrations 1.1.1-alpha.fbaad7.0 npm diff
@codecademy/gamut-kit 3.0.28-alpha.fbaad7.0 npm diff
@codecademy/gamut-patterns 1.1.1-alpha.fbaad7.0 npm diff
@codecademy/gamut-styles 21.2.1-alpha.fbaad7.0 npm diff
@codecademy/gamut-tests 7.1.1-alpha.fbaad7.0 npm diff
@codecademy/variance 1.1.1-alpha.fbaad7.0 npm diff
eslint-plugin-gamut 3.1.1-alpha.fbaad7.0 npm diff

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants