@readme/markdown 7.6.7 → 7.7.0

package/components/Code/index.tsx

@@ -57,6 +57,10 @@ const Code = (props: CodeProps) => {
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
   const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts, { mdx: true }) : code;
 
+  if (language === 'mermaid') {
+    return code;
+  }
+
   return (
     <>
       {copyButtons && <CopyCode className="fa" codeRef={codeRef} />}

package/components/Code/style.scss

@@ -84,6 +84,12 @@
     word-wrap: normal;
   }
 
+  pre.mermaid {
+    &_single {
+      background: var(--color-bg-page, white);
+    }
+  }
+
   kbd {
     background-color: $background;
     background-color: var(--d-code-background, $background);

package/components/CodeTabs/index.tsx

@@ -1,9 +1,17 @@
 import { uppercase } from '@readme/syntax-highlighter';
-import React from 'react';
+import React, { useEffect } from 'react';
+import mermaid from 'mermaid';
 
 const CodeTabs = props => {
   const { children, theme } = props;
 
+  // set Mermaid theme
+  useEffect(() => {
+    mermaid.initialize({
+      theme: theme === 'dark' ? 'dark' : 'default',
+    });
+  }, [theme])
+
   function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
     const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -14,6 +22,21 @@ const CodeTabs = props => {
     codeblocks[index].classList.add('CodeTabs_active');
 
     target.classList.add('CodeTabs_active');
+
+    if (target.value === 'mermaid') {
+      const $openMermaid = [].slice.call($wrap.querySelectorAll('.mermaid'));
+      $openMermaid.forEach((el: Element) => el.classList.remove('mermaid'));
+      codeblocks[index].classList.add('mermaid');
+      mermaid.contentLoaded();
+    }
+  }
+
+  // render single Mermaid diagram
+  if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
+    const value = children.props.children.props.value;
+    return (
+      <pre className="mermaid mermaid_single">{value}</pre>
+    )
   }
 
   return (
@@ -24,7 +47,7 @@ const CodeTabs = props => {
 
           /* istanbul ignore next */
           return (
-            <button key={i} onClick={e => handleClick(e, i)} type="button">
+            <button key={i} onClick={e => handleClick(e, i)} type="button" value={lang}>
               {meta || `${!lang ? 'Text' : uppercase(lang)}`}
             </button>
           );

package/components/Image/style.scss

@@ -103,16 +103,13 @@
       content: '\f00d';
       cursor: pointer;
       display: inline-block;
-      font: normal normal normal 2em/1 FontAwesome;
+      font-family: var(--fa-style-family, 'Font Awesome 6 Pro');
       font-size: inherit;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
       opacity: 1;
       position: fixed;
       right: 1em;
       text-rendering: auto;
       top: 1em;
-      transform: translate(0, 0);
       transform: scale(1.5);
       transition: 0.3s 0.3s ease-in;
     }