fix(theme): support details/summary in CommonMark + add md dogfood te…

…st cases (#9093)
facebook · Jun 22, 2023 · 3b85f07 · 3b85f07
1 parent 7225d80
commit 3b85f07
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 16 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -893,6 +893,8 @@ declare module '@theme/MDXComponents' {
 
   export type MDXComponentsObject = {
     readonly Head: typeof Head;
+    readonly details: typeof MDXDetails;
+
     readonly Details: typeof MDXDetails;
     readonly code: typeof MDXCode;
     readonly a: typeof MDXA;

diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx
@@ -21,6 +21,7 @@ import type {MDXComponentsObject} from '@theme/MDXComponents';
 
 const MDXComponents: MDXComponentsObject = {
   Head,
+  details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
   Details: MDXDetails,
   code: MDXCode,
   a: MDXA,

diff --git a/website/_dogfooding/_pages tests/markdown-tests-md.md b/website/_dogfooding/_pages tests/markdown-tests-md.md
@@ -8,13 +8,46 @@ wrapperClassName: docusaurus-markdown-example
 
 This file should be interpreted in a more CommonMark compliant way
 
+## SEO
+
+```md
+<head>
+  <title>HEAD Markdown Page tests title</title>
+  <meta name="keywords" content="cooking, blog">
+</head>
+```
+
+<head>
+  <title>HEAD Markdown Page tests title</title>
+  <meta name="keywords" content="cooking, blog">
+</head>
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
 ## Comment
 
 Html comment: <!-- comment -->
 
+Html comment multi-line:
+
+<!--
+comment
+-->
+
 <!-- prettier-ignore -->
 MDX comment: {/* comment */}
 
+MDX comment multi-line:
+
+<!-- prettier-ignore -->
+{/*
+comment 
+*/}
+
 ## JSX syntax
 
 import BrowserWindow from '@site/src/components/BrowserWindow';
@@ -39,6 +72,110 @@ note
 
 :::
 
+## Details
+
+<details>
+  <summary>MD Summary</summary>
+
+Our custom Details/Summary also works in CommonMark mode
+
+</details>
+
+## Tab
+
+<tabs>
+  <tabItem value="apple" label="Apple" default>
+    This is an apple 🍎
+  </tabItem>
+  <tabItem value="orange" label="Orange">
+    This is an orange 🍊
+  </tabItem>
+  <tabItem value="banana" label="Banana">
+    This is a banana 🍌
+  </tabItem>
+</tabs>
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
+## Code block test
+
+```js title="Title"
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+      // highlight-start
+      {/* prettier-ignore */}
+      long long long long long long long long long long long long line
+      {/* prettier-ignore */}
+      // highlight-end
+    </div>
+  );
+}
+```
+
+```jsx live
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```
+
+:::danger
+
+TODO unsupported (yet), see [issue](https://github.com/facebook/docusaurus/issues/9092)
+
+:::
+
+## Mermaid
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Health check
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
 ## Heading Id {#custom-heading-id}
 
 Custom heading syntax `{#custom-heading-id}` still works

diff --git a/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx b/website/_dogfooding/_pages tests/markdown-tests-mdx.mdx
@@ -36,29 +36,37 @@ import Tabs from '@theme/Tabs';
 
 import TabItem from '@theme/TabItem';
 
-<Tabs
-  defaultValue="apple"
-  values={[
-    {label: 'Apple', value: 'apple'},
-    {label: 'Orange', value: 'orange'},
-    {label: 'Banana', value: 'banana'},
-  ]}>
-  <TabItem value="apple">This is an apple 🍎</TabItem>
-  <TabItem value="orange">This is an orange 🍊</TabItem>
-  <TabItem value="banana">This is a banana 🍌</TabItem>
+<Tabs>
+  <TabItem value="apple" label="Apple" default>
+    This is an apple 🍎
+  </TabItem>
+  <TabItem value="orange" label="Orange">
+    This is an orange 🍊
+  </TabItem>
+  <TabItem value="banana" label="Banana">
+    This is a banana 🍌
+  </TabItem>
 </Tabs>
 
 ## Comments
 
-MDX comments can be used with
+Html comment: <!-- comment -->
 
-```mdx
-{/* My comment */}
-```
+Html comment multi-line:
 
-See, nothing is displayed:
+<!--
+comment
+-->
 
-{/* My comment */}
+<!-- prettier-ignore -->
+MDX comment: {/* comment */}
+
+MDX comment multi-line:
+
+<!-- prettier-ignore -->
+{/*
+comment
+*/}
 
 ## Import code block from source code file
 
@@ -164,6 +172,22 @@ function Clock(props) {
 }
 ```
 
+## Mermaid
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Health check
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
 ## Custom heading ID {#custom}
 
 ### Weird heading {#你好}

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -162,6 +162,9 @@ module.exports = async function createConfigAsync() {
         // comments: false,
       },
       preprocessor: ({filePath, fileContent}) => {
+        // TODO temporary quick fix for https://github.com/facebook/docusaurus/issues/9084
+        fileContent = fileContent.replaceAll('<!--\n', '<!-- \n');
+
         if (isDev) {
           // "vscode://file/${projectPath}${filePath}:${line}:${column}",
           // "webstorm://open?file=${projectPath}${filePath}&line=${line}&column=${column}",