@readme/markdown 6.65.3 → 6.66.0-beta.1

package/components/Code/index.jsx

@@ -51,8 +51,8 @@ function Code(props) {
     dark: theme === 'dark',
   };
 
-  const codeContent =
-    syntaxHighlighter && children ? syntaxHighlighter(children[0], language, codeOpts) : children?.[0] || '';
+  const code = Array.isArray(children) ? children[0] : children;
+  const codeContent = syntaxHighlighter && children ? syntaxHighlighter(code, language, codeOpts) : code || '';
 
   return (
     <React.Fragment>

package/components/CodeTabs/index.jsx

@@ -3,6 +3,22 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const { useState } = require('react');
 
+const traverseProps = (props, fn) => {
+  if (props?.children) {
+    if (props.children.forEach) {
+      props.children.forEach(child => {
+        if (child.props) {
+          traverseProps(child.props, fn);
+        }
+      });
+    } else {
+      fn(props.children.props);
+    }
+  }
+
+  fn(props);
+};
+
 const CodeTabs = props => {
   const { children, theme } = props;
   const [activeIndex, setActiveIndex] = useState(0);
@@ -19,11 +35,17 @@ const CodeTabs = props => {
     setActiveIndex(index);
   }
 
+  const tabs = [];
+  traverseProps(props, childProps => {
+    if ('meta' in childProps || 'lang' in childProps) {
+      tabs.push({ meta: childProps.meta, lang: childProps.lang });
+    }
+  });
+
   return (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar" role="tablist">
-        {children.map(({ props: pre }, i) => {
-          const { meta, lang } = pre.children[0].props;
+        {tabs.map(({ meta, lang }, i) => {
           /* istanbul ignore next */
           return (
             <button
@@ -56,5 +78,11 @@ function CreateCodeTabs({ theme }) {
   return props => <CodeTabs {...props} theme={theme} />;
 }
 
+CreateCodeTabs.sanitize = sanitizeSchema => {
+  sanitizeSchema.attributes.div = ['className', 'tabs'];
+
+  return sanitizeSchema;
+};
+
 module.exports = CreateCodeTabs;
 module.exports.CodeTabs = CodeTabs;

package/components/Div.jsx

@@ -0,0 +1,30 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+/*
+ * To get around hast/html sanitation, we pass custom components through using
+ * className's. Then this Div component, can render the associated component
+ * instead. This used to be done with a custom `React.createElement`, but for
+ * mdx@v1.5, I don't see a way to customize that.
+ */
+
+const Div = ({ components, ...props }) => {
+  if (Object.keys(components).includes(props.className)) {
+    const Component = components[props.className];
+    return <Component {...props} />;
+  }
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <div {...props} />;
+};
+
+Div.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.any),
+  className: PropTypes.string,
+  components: PropTypes.object,
+};
+
+module.exports =
+  (components, { theme }) =>
+  props =>
+    <Div components={components} theme={theme} {...props} />;

package/components/index.js

@@ -2,6 +2,7 @@ export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
+export { default as Div } from './Div';
 export { default as Embed } from './Embed';
 export { default as GlossaryItem } from './GlossaryItem';
 export { default as HTMLBlock } from './HTMLBlock';