@readme/markdown 8.1.0 → 8.3.0

package/README.md

@@ -1,9 +1,27 @@
-# <img align="right" width="26%" src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png"> `@readme/markdown`
-
-<img align=right src=https://github.com/readmeio/markdown/workflows/CI/badge.svg alt="RDMD CI Status"> ReadMe's MDX rendering engine and custom component collection.
-<br/>  *(Use ReadMe? [Learn more about our upcoming move to MDX](https://docs.readme.com/rdmd/page/mdx-engine)!)*
-
-## Getting Started
+<p align="center">
+  <a href="https://npm.im/@readme/markdown">
+    <img src="https://owlbertsio-resized.s3.amazonaws.com/Reading.psd.full.png" width="150" alt="rmdx" />
+  </a>
+</p>
+
+<p align="center">
+  ReadMe's MDX rendering engine and custom component collection.<br />
+  <sub>
+    Use ReadMe? <a href="https://docs.readme.com/rdmd/page/mdx-engine">Learn more about our upcoming move to MDX!</a>
+  </sub>
+</p>
+
+<p align="center">
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/v/@readme/markdown?style=for-the-badge" alt="NPM Version" /></a>
+  <a href="https://npm.im/@readme/markdown"><img src="https://img.shields.io/npm/l/@readme/markdown?style=for-the-badge" alt="MIT License" /></a>
+  <a href="https://github.com/readmeio/markdown"><img src="https://img.shields.io/github/actions/workflow/status/readmeio/markdown/ci.yml?branch=main&style=for-the-badge" alt="Build status" /></a>
+</p>
+
+<p align="center">
+  <a href="https://readme.com"><img src="https://raw.githubusercontent.com/readmeio/.github/main/oss-badge.svg" /></a>
+</p>
+
+## Usage
 
 To use the engine, install it from NPM:
 
@@ -16,11 +34,7 @@ Then [`compile`](#compile) and [`run`](#run) your MDX:
 ```jsx
 import RMDX from '@readme/markdown';
 
-export default ({ body }) => (
-  <div className="markdown-body">
-    {RMDX.run(RMDX.compile(body))}
-  </div>
-);
+export default ({ body }) => <div className="markdown-body">{RMDX.run(RMDX.compile(body))}</div>;
 ```
 
 ## API
@@ -42,13 +56,15 @@ A string of compiled Javascript module code.
 
 > [!CAUTION]
 > This is essentially a wrapper around [`mdx.run`](https://mdxjs.com/packages/mdx/#runcode-options) and **it will `eval` the compiled MDX**. Make sure you only call `run` on safe syntax from a trusted author!
->
-> #### Parameters
-> - **`string`** (`string`)—a compiled mdx document
-> - **`opts`** (`RunOpts`, optional)—configuration
->
-> #### Returns
-> An [`RMDXModule`](#rmdxmodule) of renderable components.
+
+#### Parameters
+
+- **`string`** (`string`)—a compiled mdx document
+- **`opts`** (`RunOpts`, optional)—configuration
+
+#### Returns
+
+An [`RMDXModule`](#rmdxmodule) of renderable components.
 
 ### `mdx`
 
@@ -57,7 +73,7 @@ Compiles an AST to a string of MDX syntax.
 #### Parameters
 
 - **`tree`** (`object`)—an abstract syntax tree
-- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options "`remark-stringify` Options type"))—`remark-stringify` configuration.
+- **`opts`** ([`Options`](https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#options '`remark-stringify` Options type'))—`remark-stringify` configuration.
 
 #### Returns
 
@@ -67,8 +83,8 @@ An MDX string.
 
 - **`mdast`**: parse MDX syntax to MDAST.
 - **`hast`**: parse MDX syntax to HAST.
-- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This *does not* `eval` the doc.)
-- **`tags`**: get a list of tag names from the doc. (This *does not* `eval` the doc.)
+- **`plain`**: parse MDX to a plaintext string with all Markdown syntax removed. (This _does not_ `eval` the doc.)
+- **`tags`**: get a list of tag names from the doc. (This _does not_ `eval` the doc.)
 - **`utils`**: additional defaults, helper methods, components, and so on.
 
 ## Types
@@ -103,7 +119,7 @@ Extends [`RunOptions`](https://mdxjs.com/packages/mdx/#runoptions)
 - **`toc`** (`HastHeading[]`)—a list of headings in the document
 - **`Toc`** (`() => MDCContent`)—a table of contents component
 
-## Local Development and Testing
+## Local development and testing
 
 To make changes to the RDMD engine locally, run the local development server. Clone the repo, `cd` in to it, `npm install`, and `npm run start`!
 

package/components/Accordion/index.tsx

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 
 import './style.scss';
 
-const Accordion = ({ children, icon, iconColor, title }) => {
+interface Props extends React.PropsWithChildren<{ icon?: string; iconColor?: string; title: string }> {}
+
+const Accordion = ({ children, icon, iconColor, title }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -17,4 +19,5 @@ const Accordion = ({ children, icon, iconColor, title }) => {
   );
 };
 
-export default Accordion;
+export default Accordion;
+

package/components/Anchor.jsx

@@ -1,5 +1,5 @@
 import { string, node } from 'prop-types';
-import React from 'react';
+import React, { useContext } from 'react';
 
 import BaseUrlContext from '../contexts/BaseUrl';
 

package/components/Callout/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
-  attributes?: {};
+  attributes?: Record<string, unknown>;
+  empty?: boolean;
   icon: string;
   theme?: string;
-  empty?: boolean;
 }
 
 const themes: Record<string, string> = {
@@ -24,10 +24,11 @@ const themes: Record<string, string> = {
 
 const Callout = (props: Props) => {
   const { attributes, children, icon, empty } = props;
-  let theme = props.theme || themes[icon] || 'default';
+  const theme = props.theme || themes[icon] || 'default';
 
   return (
-    // @ts-ignore
+    // @ts-expect-error -- theme is not a valid attribute
+    // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
       <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
         <span className="callout-icon">{icon}</span>

package/components/Cards/index.tsx

@@ -2,18 +2,30 @@ import React from 'react';
 
 import './style.scss';
 
-export const Card = ({ children, href, icon, iconColor, target, title }) => {
+interface CardProps
+  extends React.PropsWithChildren<{
+    href?: string;
+    icon?: string;
+    iconColor?: string;
+    target?: string;
+    title?: string;
+  }> {}
+
+export const Card = ({ children, href, icon, iconColor, target, title }: CardProps) => {
   const Tag = href ? 'a' : 'div';
   return (
     <Tag className="Card" href={href} target={target}>
       {icon && <i className={`Card-icon fa-duotone fa-solid ${icon}`} style={{ color: `${iconColor}` }}></i>}
-      {title && <p className='Card-title'>{title}</p>}
+      {title && <p className="Card-title">{title}</p>}
       <div className="Card-content">{children}</div>
     </Tag>
-  )
-}
+  );
+};
+
+interface CardsGripProps extends React.PropsWithChildren<{ columns?: number }> {}
 
-const CardsGrid = ({ columns = 2, children }) => {
+const CardsGrid = ({ columns = 2, children }: CardsGripProps) => {
+  // eslint-disable-next-line no-param-reassign
   columns = columns >= 2 ? columns : 2;
   return (
     <div className="CardsGrid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>

package/components/Code/index.tsx

@@ -5,7 +5,8 @@ import React, { createRef } from 'react';
 // apps. Necessary because of people like this:
 // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
 let syntaxHighlighter;
-let canonicalLanguage = _ => '';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let canonicalLanguage = lang => '';
 
 if (typeof window !== 'undefined') {
   import('@readme/syntax-highlighter').then(module => {
@@ -14,7 +15,15 @@ if (typeof window !== 'undefined') {
   });
 }
 
-function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
+function CopyCode({
+  codeRef,
+  rootClass = 'rdmd-code-copy',
+  className = '',
+}: {
+  className?: string;
+  codeRef: React.RefObject<HTMLElement>;
+  rootClass?: string;
+}) {
   const copyClass = `${rootClass}_copied`;
   const buttonRef = createRef<HTMLButtonElement>();
 

package/components/CodeTabs/index.tsx

@@ -5,8 +5,12 @@ import React, { useEffect } from 'react';
 
 let mermaid: Mermaid;
 
+interface Props {
+  children: JSX.Element | JSX.Element[];
+  theme: 'dark' | 'default' | 'light';
+}
 
-const CodeTabs = props => {
+const CodeTabs = (props: Props) => {
   const { children, theme } = props;
 
   // render Mermaid diagram

package/components/Columns/index.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 
 import './style.scss';
 
-export const Column = ({ children }) => {
-  return (
-    <div className="Column">{children}</div>
-  )
-}
+export const Column = ({ children }: React.PropsWithChildren) => {
+  return <div className="Column">{children}</div>;
+};
+
+interface Props extends React.PropsWithChildren<{ layout?: '1fr' | 'auto' | 'fixed' }> {}
 
-const Columns = ({ children, layout = 'auto'}) => {
+const Columns = ({ children, layout = 'auto' }: Props) => {
+  // eslint-disable-next-line no-param-reassign
   layout = layout === 'fixed' ? '1fr' : 'auto';
   const columnsCount = React.Children.count(children);
 

package/components/Embed/index.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 
 interface FaviconProps {
-  src: string;
   alt?: string;
+  src: string;
 }
 
 const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
@@ -10,16 +12,16 @@ const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
 );
 
 interface EmbedProps {
-  lazy?: boolean;
-  url: string;
-  title: string;
-  providerName?: string;
-  providerUrl?: string;
+  favicon?: string;
   html?: string;
   iframe?: boolean;
   image?: string;
-  favicon?: string;
+  lazy?: boolean;
+  providerName?: string;
+  providerUrl?: string;
+  title: string;
   typeOfEmbed?: string;
+  url: string;
 }
 
 const Embed = ({
@@ -50,6 +52,7 @@ const Embed = ({
   }
 
   if (iframe) {
+    // eslint-disable-next-line jsx-a11y/iframe-has-title
     return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
   }
 

package/components/Glossary/index.tsx

@@ -1,7 +1,9 @@
-import React, { useContext } from 'react';
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
+
 import Tooltip from '@tippyjs/react';
+import React, { useContext } from 'react';
+
 import GlossaryContext from '../../contexts/GlossaryTerms';
-import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
 
 interface Props extends React.PropsWithChildren {
   term?: string;
@@ -29,9 +31,11 @@ const Glossary = ({ children, term: termProp, terms }: Props) => {
   );
 };
 
-const GlossaryWithContext = props => {
+const GlossaryWithContext = (props: Omit<Props, 'terms'>) => {
   const terms = useContext(GlossaryContext);
   return terms ? <Glossary {...props} terms={terms} /> : <span>{props.term}</span>;
 };
 
-export { Glossary, GlossaryWithContext as default, GlossaryContext };
+export { Glossary, GlossaryContext };
+
+export default GlossaryWithContext;

package/components/HTMLBlock/index.tsx

@@ -10,12 +10,20 @@ const extractScripts = (html: string = ''): [string, () => void] => {
     scripts.push(match[1]);
   }
   const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
+  // eslint-disable-next-line no-eval
   return [cleaned, () => scripts.map(js => window.eval(js))];
 };
 
-const HTMLBlock = ({ children = '', runScripts, safeMode = false }) => {
+interface Props {
+  children: React.ReactElement | string;
+  runScripts?: boolean | string;
+  safeMode?: boolean;
+}
+
+const HTMLBlock = ({ children = '', runScripts, safeMode = false }: Props) => {
   let html = children;
-  runScripts = typeof runScripts !== 'boolean' ? (runScripts === 'true' ? true : false) : runScripts;
+  // eslint-disable-next-line no-param-reassign
+  runScripts = typeof runScripts !== 'boolean' ? runScripts === 'true' : runScripts;
 
   if (typeof html !== 'string') html = renderToStaticMarkup(html);
   const [cleanedHtml, exec] = extractScripts(html);

package/components/Heading/index.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 export type Depth = 1 | 2 | 3 | 4 | 5 | 6;
 
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLHeadingElement>> {
-  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   depth: Depth;
+  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 const Heading = ({ tag: Tag = 'h3', depth = 3, id, children, ...attrs }: Props) => {
@@ -26,6 +26,10 @@ const Heading = ({ tag: Tag = 'h3', depth = 3, id, children, ...attrs }: Props)
   );
 };
 
-const CreateHeading = (depth: Depth) => (props: Props) => <Heading {...props} depth={depth} tag={`h${depth}`} />;
+const CreateHeading = (depth: Depth) => {
+  const HeadingWithDepth = (props: Props) => <Heading {...props} depth={depth} tag={`h${depth}`} />;
+
+  return HeadingWithDepth;
+};
 
 export default CreateHeading;

package/components/Image/index.tsx

@@ -5,13 +5,13 @@ interface ImageProps {
   alt?: string;
   border?: boolean;
   caption?: string;
+  children?: [React.ReactElement];
   className?: string;
   height?: string;
+  lazy?: boolean;
   src: string;
   title?: string;
   width?: string;
-  lazy?: boolean;
-  children?: [React.ReactElement];
 }
 
 const Image = (Props: ImageProps) => {
@@ -32,11 +32,12 @@ const Image = (Props: ImageProps) => {
   const [lightbox, setLightbox] = React.useState(false);
 
   if (className === 'emoji') {
-    return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
+    return <img alt={alt} height={height} loading={lazy ? 'lazy' : 'eager'} src={src} title={title} width={width} />;
   }
 
   const handleKeyDown = ({ key, metaKey: cmd }: React.KeyboardEvent<HTMLImageElement>) => {
     const cmdKey = cmd ? 'cmd+' : '';
+    // eslint-disable-next-line no-param-reassign
     key = `${cmdKey}${key.toLowerCase()}`;
 
     switch (key) {
@@ -49,6 +50,7 @@ const Image = (Props: ImageProps) => {
       case 'enter':
         // OPEN
         if (!lightbox) setLightbox(true);
+        break;
       default:
     }
   };
@@ -71,13 +73,13 @@ const Image = (Props: ImageProps) => {
         >
           <span className="lightbox-inner">
             <img
-              src={src}
-              width={width}
-              height={height}
-              title={title}
-              className={`img img-align-center ${border ? 'border' : ''}`}
               alt={alt}
+              className={`img img-align-center ${border ? 'border' : ''}`}
+              height={height}
               loading={lazy ? 'lazy' : 'eager'}
+              src={src}
+              title={title}
+              width={width}
             />
             <figcaption>{children || caption}</figcaption>
           </span>
@@ -97,13 +99,13 @@ const Image = (Props: ImageProps) => {
     >
       <span className="lightbox-inner">
         <img
-          src={src}
-          width={width}
-          height={height}
-          title={title}
-          className={`img ${align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`}
           alt={alt}
+          className={`img ${align ? `img-align-${align}` : ''} ${border ? 'border' : ''}`}
+          height={height}
           loading={lazy ? 'lazy' : 'eager'}
+          src={src}
+          title={title}
+          width={width}
         />
       </span>
     </span>

package/components/Table/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 interface Props extends JSX.IntrinsicAttributes {
-  align: ('left' | 'center' | 'right')[];
-  children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+  align: ('center' | 'left' | 'right')[];
+  children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableRowElement | HTMLTableSectionElement>];
 }
 
 const Table = (props: Props) => {

package/components/Tabs/index.tsx

@@ -2,32 +2,39 @@ import React, { useState } from 'react';
 
 import './style.scss';
 
-export const Tab = ({ children }) => {
-  return (
-    <div className="TabContent">
-      {children}
-    </div>
-  )
+export const Tab = ({ children }: React.PropsWithChildren) => {
+  return <div className="TabContent">{children}</div>;
+};
+
+interface TabsProps {
+  children?: React.ReactElement[];
 }
 
-const Tabs = ({ children }) => {
+const Tabs = ({ children }: TabsProps) => {
   const [activeTab, setActiveTab] = useState(0);
 
   return (
     <div className="TabGroup">
       <header>
         <nav className="TabGroup-nav">
-          {children?.map((tab, index: number) =>
-            <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
-              {tab.props.icon && <i className={`TabGroup-icon fa-duotone fa-solid ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
+          {children?.map((tab, index: number) => (
+            <button
+              key={tab.props.title}
+              className={`TabGroup-tab${activeTab === index ? '_active' : ''}`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tab.props.icon && (
+                <i
+                  className={`TabGroup-icon fa-duotone fa-solid ${tab.props.icon}`}
+                  style={{ color: `${tab.props.iconColor}` }}
+                ></i>
+              )}
               {tab.props.title}
             </button>
-          )}
+          ))}
         </nav>
       </header>
-      <section>
-        {children && children[activeTab]}
-      </section>
+      <section>{children && children[activeTab]}</section>
     </div>
   );
 };

package/components/TailwindRoot/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-const TailwindRoot = ({ children, flow }) => {
+interface Props extends React.PropsWithChildren<{ flow: boolean }> {}
+
+const TailwindRoot = ({ children, flow }: Props) => {
   const Tag = flow ? 'div' : 'span';
 
   return <Tag className="readme-tailwind">{children}</Tag>;

package/dist/components/Accordion/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import './style.scss';
-declare const Accordion: ({ children, icon, iconColor, title }: {
-    children: any;
-    icon: any;
-    iconColor: any;
-    title: any;
-}) => React.JSX.Element;
+interface Props extends React.PropsWithChildren<{
+    icon?: string;
+    iconColor?: string;
+    title: string;
+}> {
+}
+declare const Accordion: ({ children, icon, iconColor, title }: Props) => React.JSX.Element;
 export default Accordion;

package/dist/components/Callout/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
-    attributes?: {};
+    attributes?: Record<string, unknown>;
+    empty?: boolean;
     icon: string;
     theme?: string;
-    empty?: boolean;
 }
 declare const Callout: (props: Props) => React.JSX.Element;
 export default Callout;

package/dist/components/Cards/index.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
 import './style.scss';
-export declare const Card: ({ children, href, icon, iconColor, target, title }: {
-    children: any;
-    href: any;
-    icon: any;
-    iconColor: any;
-    target: any;
-    title: any;
-}) => React.JSX.Element;
-declare const CardsGrid: ({ columns, children }: {
+interface CardProps extends React.PropsWithChildren<{
+    href?: string;
+    icon?: string;
+    iconColor?: string;
+    target?: string;
+    title?: string;
+}> {
+}
+export declare const Card: ({ children, href, icon, iconColor, target, title }: CardProps) => React.JSX.Element;
+interface CardsGripProps extends React.PropsWithChildren<{
     columns?: number;
-    children: any;
-}) => React.JSX.Element;
+}> {
+}
+declare const CardsGrid: ({ columns, children }: CardsGripProps) => React.JSX.Element;
 export default CardsGrid;

package/dist/components/CodeTabs/index.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-declare const CodeTabs: (props: any) => React.JSX.Element;
+interface Props {
+    children: JSX.Element | JSX.Element[];
+    theme: 'dark' | 'default' | 'light';
+}
+declare const CodeTabs: (props: Props) => React.JSX.Element;
 export default CodeTabs;

package/dist/components/Columns/index.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import './style.scss';
-export declare const Column: ({ children }: {
-    children: any;
-}) => React.JSX.Element;
-declare const Columns: ({ children, layout }: {
-    children: any;
-    layout?: string;
-}) => React.JSX.Element;
+export declare const Column: ({ children }: React.PropsWithChildren) => React.JSX.Element;
+interface Props extends React.PropsWithChildren<{
+    layout?: '1fr' | 'auto' | 'fixed';
+}> {
+}
+declare const Columns: ({ children, layout }: Props) => React.JSX.Element;
 export default Columns;

package/dist/components/Embed/index.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 interface EmbedProps {
-    lazy?: boolean;
-    url: string;
-    title: string;
-    providerName?: string;
-    providerUrl?: string;
+    favicon?: string;
     html?: string;
     iframe?: boolean;
     image?: string;
-    favicon?: string;
+    lazy?: boolean;
+    providerName?: string;
+    providerUrl?: string;
+    title: string;
     typeOfEmbed?: string;
+    url: string;
 }
 declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
 export default Embed;

package/dist/components/Glossary/index.d.ts

@@ -1,10 +1,11 @@
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
 import React from 'react';
 import GlossaryContext from '../../contexts/GlossaryTerms';
-import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
 interface Props extends React.PropsWithChildren {
     term?: string;
     terms: GlossaryTerm[];
 }
 declare const Glossary: ({ children, term: termProp, terms }: Props) => React.JSX.Element;
-declare const GlossaryWithContext: (props: any) => React.JSX.Element;
-export { Glossary, GlossaryWithContext as default, GlossaryContext };
+declare const GlossaryWithContext: (props: Omit<Props, "terms">) => React.JSX.Element;
+export { Glossary, GlossaryContext };
+export default GlossaryWithContext;