@readme/markdown 7.6.7 → 7.7.1

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,26 @@
+import type { Mermaid } from 'mermaid';
+
 import { uppercase } from '@readme/syntax-highlighter';
-import React from 'react';
+import React, { useEffect } from 'react';
+
+let mermaid: Mermaid;
+
+if (typeof window !== 'undefined') {
+  import('mermaid').then(module => {
+    mermaid = module.default;
+  });
+}
 
 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'));
@@ -16,6 +33,12 @@ const CodeTabs = props => {
     target.classList.add('CodeTabs_active');
   }
 
+  // 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 (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
@@ -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;
     }