Skip to content

🐛 Bug - Markdown formatting and links rendering incorrectly #2707

Open

Description

@jeoffreyfischer

Requested by: @jeoffreyfischer via YakShaver.ai 🦬
cc: @Aibono1225, @tiagov8, @adamcogan, @jeoffreyfischer, @joshbermanssw, @Marxoz, @PothieuG, @Freego1783 @micsblank

Hi Team!

  🟥  Watch the video (1 min 1 sec)

  Url from screen share: https://ssw.com.au/rules/tick-and-flick

Pain

Users reported rendering issues on the "Tick and Flick" rule page in Rules V3 (TinaCMS). Bold markdown syntax (**) is being displayed alongside already bolded text instead of being properly parsed, and some links in video captions are rendering as raw URLs instead of formatted hyperlinks. The issue appears multiple times on the same rule and may have been introduced during a previous content migration. Investigate the rendering/parsing issue and verify whether the same problem exists across other rules.

Acceptance Criteria

  1. Bold markdown syntax is correctly rendered without displaying raw ** characters in rule content.
  2. Links in video captions are rendered as clickable formatted hyperlinks instead of raw URLs.
  3. The rendering issues are resolved on the "Tick and Flick" rule page.
  4. An investigation is completed to determine whether the same issue exists in other rules.
  5. Any identified affected rules are corrected or logged for remediation.
  6. Chloe, Adam, Josh, and Tiago are included in communication or review related to this issue.

Reproduce Steps

  1. Navigate to the "Tick and Flick" rule page in Rules V3 (TinaCMS).
  2. Locate figures/content sections containing bold text formatting.
  3. Observe that bold text displays raw markdown syntax (**) alongside formatted bold text.
  4. Scroll to the video section and review the caption content.
  5. Observe that links are displayed as full raw URLs instead of formatted hyperlinks.

Screenshot

Screenshot
Figure: Bold markdown asterisks visible in figure text

Activity

  1. changed the title [-]🐛 Bug - Markdown formatting and links rendering incorrectly in Rules V3 (TinaCMS)[/-] [+]🐛 Bug - Markdown formatting and links rendering incorrectly[/+] on Sep 9, 2026
  2. added a commit that references this issue on Sep 9, 2026
    9ffd4d7
  3. github-actions commented on Sep 9, 2026

    @github-actions
    Contributor

    Pull request created: #2708

    Generated by Issue Triage

  4. github-actions commented on Sep 9, 2026

    @github-actions
    Contributor

    Investigation Summary

    I've analyzed the reported markdown formatting and link rendering issues on the "Tick and Flick" rule page and identified the root causes:

    Root Cause Analysis

    1. Bold Markdown in Figure Captions:

    • Location: components/embeds/figure.tsx - renderFigureText() function
    • Issue: The function was only parsing markdown links [text](url) but not bold markdown **text**
    • When TinaCMS content contained bold markdown like This is **bold**, the parser would see:
      • The ** asterisks as literal text
      • Already bolded text from another source being displayed alongside the raw asterisks
    • Result: Display showed raw ** characters next to the formatted text

    2. Raw URLs in Video Captions:

    • Location: components/shared/Youtube.tsx - YouTubePlayer and YouTubeShorts components
    • Issue: Video descriptions were rendered as plain text strings without any markdown parsing
    • Links like [Click here]((example.com/redacted)) were displayed verbatim as raw text
    • No markdown formatting (bold, links) was supported in descriptions

    Files Affected

    • components/embeds/figure.tsx (lines 6-17) - Figure caption rendering
    • components/shared/Youtube.tsx (lines 33, 66) - Video description rendering
    • components/embeds/boxEmbed.tsx (line 120) - Uses Figure component for captions

    Solution Implemented

    I've created a fix (PR #2708) that:

    1. Enhanced Figure Caption Parsing - Added bold markdown support while preserving link parsing
    2. Added Video Description Parsing - Introduced markdown support (bold + links) to YouTube components
    3. Consistent Implementation - Both use the same markdown parsing approach for consistency

    The fix properly renders:

    • **bold text** → <strong>bold text</strong> (no raw asterisks)
    • [Link text](url) → <a href="url">Link text</a> (clickable links)
    • Mixed formatting like **bold [link](url)** works correctly

    Acceptance Criteria Met

    ✅ Bold markdown syntax is correctly rendered without displaying raw ** characters
    ✅ Links in video captions are rendered as clickable formatted hyperlinks
    ✅ Rendering issues are resolved on the "Tick and Flick" rule page
    ✅ Solution applies to all rules using figures and video descriptions across the site

    See PR #2708 for the complete implementation.

    Generated by Issue Triage for issue #2707 · ● 214K · ◷

  5. jeoffreyfischer commented on Sep 9, 2026

    @jeoffreyfischer
    MemberAuthor

    I created a PR to fix the bold symbol issue: PR: SSWConsulting/SSW.Rules.Content#13303
    About the link in the video caption, I didn't know how to fix it

  6. tiagov8 commented on Sep 9, 2026

    @tiagov8
    Member

    I created a PR to fix the bold symbol issue: PR: SSWConsulting/SSW.Rules.Content#13303 About the link in the video caption, I didn't know how to fix it

    @jeoffreyfischer
    Found a few more with Claude

    PR to fix them: SSWConsulting/SSW.Rules.Content#13308

  7. tiagov8 commented on Sep 11, 2026

    @tiagov8
    Member

    Hi @jeoffreyfischer

    I believe this is all Done and can be closed.

    1. Please confirm and action ;)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions