Explicit IDs for markdown headings fail to parse dots

[FHannes]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The documentation describes the ability to choose a specific id for a markdown heading: https://docusaurus.io/docs/markdown-features/toc#heading-ids

This works in some cases, but the parser fails when dots are included in the id, which is a valid character for ids in html pages. The id definition will just be considered to be part of the heading.

Example image:

Reproducible demo

https://codesandbox.io/s/docusaurus-explicit-id-bug-ffjjmv?file=/docs/intro.md

Steps to reproduce

Define a markdown heading with an explicit id that contains dots. Eg:

Changes 2022.6.0 {#2022.6.0}

Expected behavior

I would expect a heading to be added with the text "Changes 2022.6.0" and the id "2022.6.0".

Actual behavior

A heading is added with text "Changes 2022.6.0 {#2022.6.0}" and the id "changes-202260-202260".

Your environment

• Docusaurus version used: 2.0.0-beta.21

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

We seem to intentionally have a very restricted pattern. I don't know if this is working as intended or if we can safely extend the regex—I will need examples of how other Markdown parsers behave in this case. Heading IDs is a very common syntax.

[Josh-Cena]

These two both parse the custom ID correctly:

const md = require("markdown-it")()
  .use(require("markdown-it-attrs"))
  .use(require("markdown-it-anchor"))
  .render("## a {#2022.1.1}");

console.log(md);

const md2 = require("remark")()
  .use(require("remark-heading-id"))
  .use(require("remark-rehype"))
  .use(require("rehype-stringify"))
  .processSync("## a {#2022.1.1}");

console.log(md2.toString());

I think it's fair for us to keep the behavior in line.