From 404b4dba8b58c0086283775504345e26b19d8500 Mon Sep 17 00:00:00 2001
From: Nam Hoang Le <hoangnamb1.288@gmail.com>
Date: Thu, 6 May 2021 16:50:21 +0700
Subject: [PATCH] fix(v2): markdown title parser should ignore all forms of MDX
 import statements (#4735)

Co-authored-by: Nam Hoang Le <nam.hoang.le@mgm-tp.com>
---
 .../src/__tests__/markdownParser.test.ts      | 47 +++++++++++++++++++
 .../docusaurus-utils/src/markdownParser.ts    | 20 +++++---
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-utils/src/__tests__/markdownParser.test.ts b/packages/docusaurus-utils/src/__tests__/markdownParser.test.ts
index 57e5882965..221aaf018a 100644
--- a/packages/docusaurus-utils/src/__tests__/markdownParser.test.ts
+++ b/packages/docusaurus-utils/src/__tests__/markdownParser.test.ts
@@ -278,6 +278,53 @@ describe('parseMarkdownContentTitle', () => {
     });
   });
 
+  test('Should parse markdown h1 title placed after various import declarations', () => {
+    const markdown = `
+import DefaultComponent from '@site/src/components/Component1';
+import DefaultComponent2 from '../relative/path/Component2';
+import * as EntireComponent from './relative/path/Component3';
+
+import { Component4 }   from    "double-quote-module-name";
+import { Component51,   Component52, \n Component53, \n\t\t Component54 } from "double-quote-module-name";
+import { Component6 as AliasComponent6 } from "module-name";
+import DefaultComponent8,   { DefaultComponent81 ,\nDefaultComponent82 } from "module-name";
+import DefaultComponent9,    * as EntireComponent9 from "module-name";
+import {Component71,\nComponent72 as AliasComponent72,\nComponent73\n} \nfrom "module-name";
+
+import './styles.css';
+import _ from 'underscore';
+import "module-name"
+
+# Markdown Title
+
+Lorem Ipsum
+        `;
+
+    expect(parseMarkdownContentTitle(markdown)).toEqual({
+      content: `
+import DefaultComponent from '@site/src/components/Component1';
+import DefaultComponent2 from '../relative/path/Component2';
+import * as EntireComponent from './relative/path/Component3';
+
+import { Component4 }   from    "double-quote-module-name";
+import { Component51,   Component52, \n Component53, \n\t\t Component54 } from "double-quote-module-name";
+import { Component6 as AliasComponent6 } from "module-name";
+import DefaultComponent8,   { DefaultComponent81 ,\nDefaultComponent82 } from "module-name";
+import DefaultComponent9,    * as EntireComponent9 from "module-name";
+import {Component71,\nComponent72 as AliasComponent72,\nComponent73\n} \nfrom "module-name";
+
+import './styles.css';
+import _ from 'underscore';
+import "module-name"
+
+
+
+Lorem Ipsum
+        `.trim(),
+      contentTitle: 'Markdown Title',
+    });
+  });
+
   test('Should parse markdown h1 alternate title placed after import declarations', () => {
     const markdown = dedent`
           import Component from '@site/src/components/Component';
diff --git a/packages/docusaurus-utils/src/markdownParser.ts b/packages/docusaurus-utils/src/markdownParser.ts
index 2f16986959..0e86a714b7 100644
--- a/packages/docusaurus-utils/src/markdownParser.ts
+++ b/packages/docusaurus-utils/src/markdownParser.ts
@@ -86,12 +86,20 @@ export function parseMarkdownContentTitle(
 
   const content = contentUntrimmed.trim();
 
-  const regularTitleMatch = /^(?:import\s+\S+(\s+from\s+\S+)?;?|\n)*?(?<pattern>#\s*(?<title>[^#\n{]*)+[ \t]*(?<suffix>({#*[\w-]+})|#)?\n*?)/g.exec(
-    content,
-  );
-  const alternateTitleMatch = /^(?:import\s+\S+(\s+from\s+\S+)?;?|\n)*?(?<pattern>\s*(?<title>[^\n]*)\s*\n[=]+)/g.exec(
-    content,
-  );
+  const IMPORT_STATEMENT = /import\s+(([\w*{}\s\n,]+)from\s+)?["'\s]([@\w/_.-]+)["'\s];?|\n/
+    .source;
+  const REGULAR_TITLE = /(?<pattern>#\s*(?<title>[^#\n{]*)+[ \t]*(?<suffix>({#*[\w-]+})|#)?\n*?)/
+    .source;
+  const ALTERNATE_TITLE = /(?<pattern>\s*(?<title>[^\n]*)\s*\n[=]+)/.source;
+
+  const regularTitleMatch = new RegExp(
+    `^(?:${IMPORT_STATEMENT})*?${REGULAR_TITLE}`,
+    'g',
+  ).exec(content);
+  const alternateTitleMatch = new RegExp(
+    `^(?:${IMPORT_STATEMENT})*?${ALTERNATE_TITLE}`,
+    'g',
+  ).exec(content);
 
   const titleMatch = regularTitleMatch ?? alternateTitleMatch;
   const {pattern, title} = titleMatch?.groups ?? {};