Heading anchor slug does not respect GitHub behavior due to emojis

[slorber]

Heading anchor slug does not respect GitHub behavior due to emojis

Discussed in #9193

Considering the heading ## :smiley: This is a friendly header

• We are trying to align the default anchor generation behavior to the one of GitHub
• GitHub generates #smiley-this-is-a-friendly-header for your header
• GitHub test: https://gist.github.com/slorber/9c499bb934434a3f7ac6603eff6647d3#smiley-this-is-a-friendly-header)

Our slugger package is supposed to align with GitHub and seems to work as intended (the input heading string is not supposed to contain the leading space):

    expect(slugger.slug(' This is a friendly header')).toBe(
      '-this-is-a-friendly-header',
    );
    expect(slugger.slug('This is a friendly header')).toBe(
      'this-is-a-friendly-header',
    );
    expect(slugger.slug(' :smiley: This is a friendly header')).toBe(
      '-smiley-this-is-a-friendly-header',
    );
    expect(slugger.slug(':smiley: This is a friendly header')).toBe(
      'smiley-this-is-a-friendly-header',
    );

    // Yes, that's how GitHub behave in this case
    expect(slugger.slug('😃 This is a friendly header')).toBe(
      '-this-is-a-friendly-header',
    );

The MDX Playground shows the heading is parsed this way, and it's the value we pass to our slugger:

{
      "type": "heading",
      "depth": 2,
      "children": [
        {
          "type": "text",
          "value": ":smiley: This is a friendly header"
        }
      ]
    }

---

What I understand:

• We use https://github.com/rhysd/remark-emoji
• It turns the heading value to 😃 This is a friendly header
• the slugger does not handle the real emoji

We should probably use node-emoji to "unconvert the value" before passing it to the slugger.

import * as emoji from https://github.com/omnidan/node-emoji,

slugger.slug(emoji.unemojify('😃 This is a friendly header'));

The problem is that we shouldn't always unemojify 😅

If you look at the GitHub behavior, it has a different slugging behavior if we use 😃 or :smiley: in a heading:
See https://gist.github.com/slorber/9c499bb934434a3f7ac6603eff6647d3#-this-is-a-friendly-header-real-smiley
We should align to this behavior, but I'm not sure how 😅

The solution would be to get the "original" heading string value before remark-emoji gets applied. I'm not sure remark-emoji outputs that original value currently.

[Josh-Cena]

Why don't we just make the heading ID addition happen before emojifying?

docusaurus/packages/docusaurus-mdx-loader/src/processor.ts

Line 45 in e0bb39a

remarkPlugins: [emoji, headings, toc],

[slorber]

Ah yes, that actually looks like a good solution 🤦‍♂️ 🤪 👍

Marked as good first issue in case someone want to give it a try: just submit a PR directly.

Please add a dogfood page on our own site so that we can verify the behavior on the PR deploy preview.

[yosukekato165]

@slorber @Josh-Cena
Please review when you have time.
#9202