Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Add remark-slug and remark-external-links to Vite builder #21796

Merged

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Mar 28, 2023

Closes #20519

What I did

This PR adds remark-slug and remark-external-links plugins to the MDX plugin in the Vite builder. The plugins are already added to addon-docs, however that only has an effect in Webpack projects. The changes to the mdx plugin here are direct copy-paste from https://github.com/storybookjs/storybook/blob/next/code/addons/docs/src/preset.ts#L55-L66

Not having these plugins caused the issue where headings wouldn't automatically get ids assigned, and thus no anchors. This fixes that.

In the near future we probably want to move all MDX handling from the Vite builder to the docs addon, to not force Vite users to have all those dependencies.

How to test

This is not an issue in autodocs, only standalone MDX files.

Create a standalone MDX file with the following content:

# This is H1

{"text".repeat(1000)}

## This is H2

More text

Hover over the headings and see the anchor icon appear. Click the H2 heading, copy the URL and open it in a new tab. See that it scrolls down to the H2 when opened.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@socket-security
Copy link

socket-security bot commented Mar 28, 2023

New dependency changes detected. Learn more about Socket for GitHub ↗︎


👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary
Issue Status
Install scripts ✅ 0 issues
Native code ✅ 0 issues
Bin script confusion ✅ 0 issues
Bin script shell injection ✅ 0 issues
Shell access ✅ 0 issues
Uses eval ✅ 0 issues
Unresolved require ✅ 0 issues
Invalid package.json ✅ 0 issues
HTTP dependency ✅ 0 issues
Git dependency ✅ 0 issues
GitHub dependency ✅ 0 issues
New author ✅ 0 issues
Potential typo squat ✅ 0 issues
Known Malware ✅ 0 issues
Telemetry ✅ 0 issues
Protestware/Troll package ✅ 0 issues

📊 Modified Dependency Overview:

➕ Added Package Capability Access +/- Transitive Count Publisher
remark-slug@7.0.1 None +0 wooorm
remark-external-links@9.0.1 None +1 wooorm

JReinhold and others added 3 commits March 29, 2023 12:29
…nchors' of github.com:storybookjs/storybook into 20519-bug-markdown-headings-in-mdx-are-broken-no-html-anchors
Comment on lines 22 to 47
const modulesToTransform = [
'@angular',
'ccount',
'rxjs',
'nanoid',
'uuid',
'lit-html',
'lit',
'@lit',
'@mdx-js',
'ccount',
'character-entities',
'decode-named-character-reference',
'estree',
'is-absolute-url',
'lit',
'lit-html',
'mdast',
'micromark',
'nanoid',
'remark',
'rxjs',
'slash',
'space-separated-tokens',
'stringify-entities',
'unified',
'unist',
'uuid',
'vfile',
'vfile-message',
'mdast',
'micromark',
'unist',
'estree',
'decode-named-character-reference',
'character-entities',
'zwitch',
'stringify-entities',
'slash',
];
Copy link
Contributor Author

Choose a reason for hiding this comment

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

  1. Sort alphabetically
  2. Add space-separated-tokens and is-absolute-url, ESM only modules used by remark-external-links

@JReinhold JReinhold merged commit be04bd8 into next Mar 29, 2023
57 checks passed
@JReinhold JReinhold deleted the 20519-bug-markdown-headings-in-mdx-are-broken-no-html-anchors branch March 29, 2023 13:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: markdown headings in MDX are broken (no html anchors)
2 participants