Merge pull request #25 from jedelson-pagerduty/issue/use-class-on-cod…

…e-block add manual detect method. fixes #23
johanneswuerbach · Mar 3, 2023 · 8097a4b · 8097a4b
2 parents c3845fa + d165b4b
commit 8097a4b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -41,3 +41,18 @@ graph TD;
     C-->D;
 ```
 ~~~
+
+## Auto-Detection vs. Manual Detection
+
+By default, this plugin will autodetect diagrams based on the starting token of the code block. In some cases, however, this auto-detection is not sufficient, for example because of an unrecognized 
+diagram type or the use of front matter. In these cases, you can force the use of mermaid on blocks by adding configuration like this to your `mkdocs.yaml` file:
+
+```yaml
+markdown_extensions:
+  pymdownx.extra:
+    pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
+```
diff --git a/src/Mermaid/Mermaid.test.tsx b/src/Mermaid/Mermaid.test.tsx
@@ -32,6 +32,16 @@ describe('Mermaid', () => {
     expect(getByText('TEST_CONTENT')).toBeInTheDocument();
   });
 
+  it.skip('renders fenced code blocks', async () => {
+    const { getByTestId } = await TechDocsAddonTester.buildAddonsInTechDocs([
+      <Mermaid config={{ themeVariables: { lineColor: '#00ff00' } }} />,
+    ])
+      .withDom(<body><pre className="mermaid" data-testid="mermaid-test"><code>something here</code></pre></body>)
+      .renderWithEffects();
+
+    expect(getByTestId('mermaid-test')).toHaveStyle('display: none')
+  });
+
   describe('selectConfig', () => {
     const legacyConfig = { config: { fontFamily: 'legacy-config' } };
     const lightConfig = { lightConfig: { fontFamily: 'light-config' } };

diff --git a/src/Mermaid/Mermaid.tsx b/src/Mermaid/Mermaid.tsx
@@ -44,8 +44,29 @@ export function selectConfig(backstagePalette: PaletteType, properties: MermaidP
 
 let diagramId = 0
 
+const makeDiagram = (el: HTMLDivElement | HTMLPreElement, diagramText: string, backstagePalette: PaletteType, properties: MermaidProps) => {
+  el.style.display = 'none'
+
+  const diagramElement = document.createElement('div')
+  diagramElement.className = "mermaid"
+
+  el.parentNode?.insertBefore(diagramElement, el.nextSibling);
+
+  const id = `mermaid-${diagramId++}`
+
+  const config = selectConfig(backstagePalette, properties);
+  if(config) {
+    mermaid.initialize(config);
+  }
+
+  mermaid.render(id, diagramText, (svgGraph: string) => {
+    diagramElement.innerHTML = svgGraph
+  });
+}
+
 export const MermaidAddon = (properties: MermaidProps) => {
   const highlightTables = useShadowRootElements<HTMLDivElement>(['.highlighttable']);
+  const mermaidPreBlocks = useShadowRootElements<HTMLPreElement>(['.mermaid']);
   const theme = useTheme<BackstageTheme>();
 
   useEffect(() => {
@@ -71,25 +92,27 @@ export const MermaidAddon = (properties: MermaidProps) => {
         return
       }
 
-      highlightTable.style.display = 'none'
-
-      const diagramElement = document.createElement('div')
-      diagramElement.className = "mermaid"
-
-      highlightTable.parentNode?.insertBefore(diagramElement, highlightTable.nextSibling);
+      makeDiagram(highlightTable, diagramText, theme.palette.type, properties)
+    });
+  }, [highlightTables, properties, theme.palette.type]);
 
-      const id = `mermaid-${diagramId++}`
+  useEffect(() => {
+    mermaidPreBlocks.forEach(mermaidPreBlock => {
+      // Skip already processed
+      if (mermaidPreBlock.style.display === 'none') {
+        return
+      }
 
-      const config = selectConfig(theme.palette.type, properties);
-      if(config) {
-        mermaid.initialize(config);
+      const codeBlock = mermaidPreBlock.querySelector('code')
+      if (!codeBlock) {
+        return
       }
 
-      mermaid.render(id, diagramText, (svgGraph: string) => {
-        diagramElement.innerHTML = svgGraph
-      });
+      const diagramText = codeBlock.innerText
+
+      makeDiagram(mermaidPreBlock, diagramText, theme.palette.type, properties)
     });
-  }, [highlightTables, properties, theme.palette.type]);
+  }, [mermaidPreBlocks, properties, theme.palette.type]);
 
   return null;
 };