Skip to content

fix(mdxish): inline Anchor/Glossary with expression attrs render as plain text#1525

Merged
eaglethrost merged 7 commits into
nextfrom
dimas/cx-3591-incorrect-anchor-rendering-in-mdx-ish
Jun 30, 2026
Merged

fix(mdxish): inline Anchor/Glossary with expression attrs render as plain text#1525
eaglethrost merged 7 commits into
nextfrom
dimas/cx-3591-incorrect-anchor-rendering-in-mdx-ish

Conversation

@eaglethrost

@eaglethrost eaglethrost commented Jun 24, 2026

Copy link
Copy Markdown
Contributor
🎫 Resolve CX-3591

🎯 What does this PR do?

There was a reported bug where <Anchor> tags were breaking not rendering as links. The root cause of the reported Anchor was it contained complex expression in an attribute: href={'https://' + user.docsUrl + '/reference/sign-up-api'}, which the raw anchor HTML can't render.

The fix is to now let the mdx tokenizer to now claim inline PascalCase components in text mode (Anchor & Glossary) and pass it on the relatively newly created MDX inline HTML transformer path (processor/transform/mdxish/components/inline-html.ts), which parses them into mdxJsxTextElement so they render correctly.

🧪 QA tips

  • Inline Anchor with a concatenation-expression href renders as a link (the original repro):

    <Anchor target="_blank" href={'https://' + 'www.google.com' + '/reference/sign-up-api'}>Content</Anchor>.
  • Inline Glossary with a template-literal expression attr renders:

    <Glossary term={`a${b}c`}>word</Glossary>
  • Plain inline Anchor (no expression attrs) still renders via the existing CommonMark path:

    <Anchor href="https://example.com">Link</Anchor>

📸 Screenshot or Loom

Old mdxish editor vs fixed mdxish vs legacy editor (correct baseline):

Screen.Recording.2026-06-25.at.4.28.51.pm.mov

@eaglethrost eaglethrost marked this pull request as ready for review June 25, 2026 06:31
@eaglethrost eaglethrost requested a review from a team June 25, 2026 06:31
kevinports
kevinports previously approved these changes Jun 29, 2026
@coderabbitai

coderabbitai Bot commented Jun 30, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 428bb661-13f7-4fea-af29-0c2cf92353e5

📥 Commits

Reviewing files that changed from the base of the PR and between 2aab521 and b650fca.

📒 Files selected for processing (4)
  • __tests__/lib/mdxish/mdxish.test.ts
  • __tests__/transformers/mdx-inline-html.test.ts
  • lib/micromark/mdx-component/syntax.ts
  • processor/transform/mdxish/components/inline-html.ts
🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

  • readmeio/ai (manual)
  • readmeio/gitto (manual)
  • readmeio/markdown (manual)
  • readmeio/readme (manual)

Walkthrough

The MDX tokenizer (lib/micromark/mdx-component/syntax.ts) is updated to allow a specific allowlist of PascalCase components (INLINE_COMPONENT_TAGS, containing Anchor and Glossary) to be tokenized in text/inline mode. Previously, all PascalCase tags were immediately rejected in text mode. Now, tagNameFirst defers rejection, tagNameRest computes a claimable predicate using INLINE_COMPONENT_TAGS for text mode and TOKENIZER_MDX_COMPONENT_EXCLUDED_TAGS for flow mode, and afterOpenTagName extends the brace-attribute requirement (requiresBraceAttr) to text-mode PascalCase components. The inline-HTML transformer (processor/transform/mdxish/components/inline-html.ts) correspondingly replaces GENERIC_MDX_COMPONENT_EXCLUDED_TAGS with INLINE_COMPONENT_TAGS and updates promoteInlineHtml to promote only allowlisted PascalCase tags. Tests are added at both the transformer and integration levels.


Comment @coderabbitai help to get the list of available commands.

@eaglethrost

Copy link
Copy Markdown
Contributor Author

Merging because it was previously approved and it was just a merge conflict dismissing it.

@eaglethrost eaglethrost merged commit 3355f7c into next Jun 30, 2026
8 checks passed
@eaglethrost eaglethrost deleted the dimas/cx-3591-incorrect-anchor-rendering-in-mdx-ish branch June 30, 2026 02:21
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.

2 participants