@readme/markdown 6.75.0-beta.4 → 6.75.0-beta.40

package/components/Anchor.jsx

@@ -1,11 +1,11 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import { string, node } from 'prop-types';
+import React from 'react';
 
-const BaseUrlContext = require('../contexts/BaseUrl');
+import BaseUrlContext from '../contexts/BaseUrl';
 
 // Nabbed from here:
 // https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/markdown/renderer.js#L52
-function getHref(href, baseUrl) {
+export function getHref(href, baseUrl) {
   const [path, hash] = href.split('#');
   const hashStr = hash ? `#${hash}` : '';
 
@@ -49,7 +49,9 @@ function docLink(href) {
 }
 
 function Anchor(props) {
-  const { baseUrl, children, href, target, title, ...attrs } = props;
+  const { children, href, target, title, ...attrs } = props;
+  const baseUrl = useContext(BaseUrlContext);
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <a {...attrs} href={getHref(href, baseUrl)} target={target} title={title} {...docLink(href)}>
@@ -59,12 +61,12 @@ function Anchor(props) {
 }
 
 Anchor.propTypes = {
-  baseUrl: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  download: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.string,
-  title: PropTypes.string,
+  baseUrl: string,
+  children: node.isRequired,
+  download: string,
+  href: string,
+  target: string,
+  title: string,
 };
 
 Anchor.defaultProps = {
@@ -74,17 +76,4 @@ Anchor.defaultProps = {
   title: '',
 };
 
-const AnchorWithContext = props => (
-  <BaseUrlContext.Consumer>{baseUrl => <Anchor baseUrl={baseUrl} {...props} />}</BaseUrlContext.Consumer>
-);
-
-AnchorWithContext.sanitize = sanitizeSchema => {
-  // This is for our custom link formats
-  sanitizeSchema.protocols.href.push('doc', 'target', 'ref', 'blog', 'changelog', 'page');
-
-  return sanitizeSchema;
-};
-
-module.exports = AnchorWithContext;
-
-AnchorWithContext.getHref = getHref;
+export default Anchor;

package/components/Callout/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
+  attributes?: {};
+  icon: string;
+  theme?: string;
+  empty?: boolean;
+}
+
+const themes: Record<string, string> = {
+  '\uD83D\uDCD8': 'info',
+  '\uD83D\uDEA7': 'warn',
+  '\u26A0\uFE0F': 'warn',
+  '\uD83D\uDC4D': 'okay',
+  '\u2705': 'okay',
+  '\u2757\uFE0F': 'error',
+  '\u2757': 'error',
+  '\uD83D\uDED1': 'error',
+  '\u2049\uFE0F': 'error',
+  '\u203C\uFE0F': 'error',
+  '\u2139\uFE0F': 'info',
+  '\u26A0': 'warn',
+};
+
+const Callout = (props: Props) => {
+  const { attributes, children, icon, empty } = props;
+  let theme = props.theme || themes[icon] || 'default';
+
+  return (
+    // @ts-ignore
+    <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
+      <h3 className={`callout-heading${empty ? ' empty' : ''}`}>
+        <span className="callout-icon">{icon}</span>
+        {empty || children[0]}
+      </h3>
+      {empty ? children : React.Children.toArray(children).slice(1)}
+    </blockquote>
+  );
+};
+
+export default Callout;

package/components/Code/index.tsx

@@ -0,0 +1,75 @@
+import copy from 'copy-to-clipboard';
+import React, { createRef } from 'react';
+
+// Only load CodeMirror in the browser, for SSR
+// apps. Necessary because of people like this:
+// https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534
+let syntaxHighlighter;
+let canonicalLanguage = _ => '';
+
+if (typeof window !== 'undefined') {
+  import('@readme/syntax-highlighter').then(module => {
+    syntaxHighlighter = module.default;
+    canonicalLanguage = module.canonical;
+  });
+}
+
+function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
+  const copyClass = `${rootClass}_copied`;
+  const button = createRef<HTMLButtonElement>();
+
+  const copier = () => {
+    const code = codeRef.current.textContent;
+
+    if (copy(code)) {
+      const el = button.current;
+      el.classList.add(copyClass);
+
+      setTimeout(() => el.classList.remove(copyClass), 1500);
+    }
+  };
+
+  return <button ref={button} aria-label="Copy Code" className={`${rootClass} ${className}`} onClick={copier} />;
+}
+
+interface CodeProps {
+  children?: string[] | string;
+  copyButtons?: boolean;
+  lang?: string;
+  meta?: string;
+  theme?: string;
+  value?: string;
+}
+
+const Code = (props: CodeProps) => {
+  const { children, copyButtons, lang, theme, value } = props;
+
+  const language = canonicalLanguage(lang);
+
+  const codeRef = createRef<HTMLElement>();
+
+  const codeOpts = {
+    inline: !lang,
+    tokenizeVariables: true,
+    dark: theme === 'dark',
+  };
+
+  const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
+  const highlightedCode = syntaxHighlighter && code ? syntaxHighlighter(code, language, codeOpts) : code;
+
+  return (
+    <>
+      {copyButtons && <CopyCode className="fa" codeRef={codeRef} />}
+      <code
+        ref={codeRef}
+        className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
+        data-lang={language}
+        suppressHydrationWarning={true}
+      >
+        {highlightedCode}
+      </code>
+    </>
+  );
+};
+
+export default Code;

package/components/CodeTabs/{index.jsx → index.tsx}

@@ -1,14 +1,13 @@
-const { uppercase } = require('@readme/syntax-highlighter');
-const PropTypes = require('prop-types');
-const React = require('react');
+import { uppercase } from '@readme/syntax-highlighter';
+import React from 'react';
 
 const CodeTabs = props => {
   const { children, theme } = props;
 
-  function handleClick({ target }, index) {
+  function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
     const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
-    $open.forEach(el => el.classList.remove('CodeTabs_active'));
+    $open.forEach((el: Element) => el.classList.remove('CodeTabs_active'));
     $wrap.classList.remove('CodeTabs_initial');
 
     const codeblocks = $wrap.querySelectorAll('pre');
@@ -20,8 +19,9 @@ const CodeTabs = props => {
   return (
     <div className={`CodeTabs CodeTabs_initial theme-${theme}`}>
       <div className="CodeTabs-toolbar">
-        {children.map(({ props: pre }, i) => {
-          const { meta, lang } = pre.children[0].props;
+        {(Array.isArray(children) ? children : [children]).map((pre, i) => {
+          const { meta, lang } = pre.props.children.props;
+
           /* istanbul ignore next */
           return (
             <button key={i} onClick={e => handleClick(e, i)} type="button">
@@ -35,15 +35,4 @@ const CodeTabs = props => {
   );
 };
 
-CodeTabs.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  theme: PropTypes.string,
-};
-
-function CreateCodeTabs({ theme }) {
-  // eslint-disable-next-line react/display-name
-  return props => <CodeTabs {...props} theme={theme} />;
-}
-
-module.exports = CreateCodeTabs;
-module.exports.CodeTabs = CodeTabs;
+export default CodeTabs;

package/components/Embed/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+interface FaviconProps {
+  src: string;
+  alt?: string;
+}
+
+const Favicon = ({ src, alt = 'favicon', ...attr }: FaviconProps) => (
+  <img {...attr} alt={alt} height="14" src={src} width="14" />
+);
+
+interface EmbedProps {
+  lazy?: boolean;
+  url: string;
+  title: string;
+  provider?: string;
+  html?: string;
+  iframe?: boolean;
+  image?: string;
+  favicon?: string;
+}
+
+const Embed = ({ lazy = true, url, provider, title, html, iframe, image, favicon, ...attrs }: EmbedProps) => {
+  if (iframe) {
+    return <iframe {...attrs} src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
+  }
+
+  if (!provider)
+    provider = new URL(url).hostname
+      .split(/(?:www)?\./)
+      .filter(i => i)
+      .join('.');
+
+  const classes = ['embed', image ? 'embed_hasImg' : ''];
+
+  return (
+    <div className={classes.join(' ')}>
+      {html ? (
+        <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
+          {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : undefined} src={image} />}
+          {title ? (
+            <div className="embed-body">
+              {!favicon || <Favicon alt={provider} src={favicon} />}
+              {provider && (
+                <small className="embed-provider">
+                  {provider.search(/^@{1}/) < 0 ? (
+                    provider
+                  ) : (
+                    <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
+                  )}
+                </small>
+              )}
+              <div className="embed-title">{title}</div>
+            </div>
+          ) : (
+            <div className="embed-body">
+              <b>View</b>: <span className="embed-body-url">{url}</span>
+            </div>
+          )}
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default Embed;

package/components/Glossary/index.tsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import Tooltip from '@tippyjs/react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
+
+interface Props extends React.PropsWithChildren {
+  term?: string;
+  terms: GlossaryTerm[];
+}
+
+const Glossary = ({ children, term: termProp, terms }: Props) => {
+  const term = (Array.isArray(children) ? children[0] : children) || termProp;
+  const foundTerm = terms.find(i => term.toLowerCase() === i?.term?.toLowerCase());
+
+  if (!foundTerm) return <span>{term}</span>;
+
+  return (
+    <Tooltip
+      content={
+        <div className="Glossary-tooltip-content">
+          <strong className="Glossary-term">{foundTerm.term}</strong> - {foundTerm.definition}
+        </div>
+      }
+      offset={[-5, 5]}
+      placement="bottom-start"
+    >
+      <span className="Glossary-trigger">{term}</span>
+    </Tooltip>
+  );
+};
+
+const GlossaryWithContext = props => {
+  const terms = useContext(GlossaryContext);
+  return terms ? <Glossary {...props} terms={terms} /> : <span>{props.term}</span>;
+};
+
+export { Glossary, GlossaryWithContext as default, GlossaryContext };

package/components/Glossary/style.scss

@@ -0,0 +1,69 @@
+.Glossary {
+  &-trigger {
+    border-bottom: 1px solid #737c83;
+    border-style: dotted;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    cursor: pointer;
+  }
+
+  &-tooltip-content {
+    --Glossary-bg: var(--color-bg-page, var(--white));
+    --Glossary-color: var(--color-text-default, var(--gray20));
+    --Glossary-shadow: var(
+      --box-shadow-menu-light,
+      0 5px 10px rgba(0, 0, 0, 0.05),
+      0 2px 6px rgba(0, 0, 0, 0.025),
+      0 1px 3px rgba(0, 0, 0, 0.025)
+    );
+
+    /* what the dark-mode mixin does in the readme project */
+    [data-color-mode='dark'] & {
+      --Glossary-bg: var(--gray15);
+      --Glossary-color: var(--color-text-default, var(--white));
+      --Glossary-shadow: var(
+        --box-shadow-menu-dark,
+        0 1px 3px rgba(0, 0, 0, 0.025),
+        0 2px 6px rgba(0, 0, 0, 0.025),
+        0 5px 10px rgba(0, 0, 0, 0.05)
+      );
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-color-mode='auto'] & {
+        --Glossary-bg: var(--Tooltip-bg, var(--gray0));
+        --Glossary-color: var(--color-text-default, var(--white));
+        --Glossary-shadow: var(
+          --box-shadow-menu-dark,
+          0 1px 3px rgba(0, 0, 0, 0.025),
+          0 2px 6px rgba(0, 0, 0, 0.025),
+          0 5px 10px rgba(0, 0, 0, 0.05)
+        );
+      }
+    }
+
+    background-color: var(--Glossary-bg);
+    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
+    border-radius: var(--border-radius);
+    box-shadow: var(--Glossary-shadow);
+    color: var(--Glossary-color);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 15px;
+    text-align: left;
+    width: 350px;
+  }
+
+  &-term {
+    font-style: italic;
+  }
+}
+
+.tippy-box {
+  // needed for tippy's default animation
+  &[data-animation='fade'][data-state='hidden'] {
+    opacity: 0;
+  }
+}

package/components/HTMLBlock/index.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
+
+const extractScripts = (html: string = ''): [string, () => void] => {
+  const scripts: string[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = MATCH_SCRIPT_TAGS.exec(html)) !== null) {
+    scripts.push(match[1]);
+  }
+  const cleaned = html.replace(MATCH_SCRIPT_TAGS, '');
+  return [cleaned, () => scripts.map(js => window.eval(js))];
+};
+
+const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
+  let html = children;
+  if (typeof html !== 'string') html = renderToStaticMarkup(html);
+  const [cleanedHtml, exec] = extractScripts(html);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts) exec();
+  }, [runScripts, exec]);
+
+  if (safeMode) {
+    return (
+      <pre className="html-unsafe">
+        <code>{html}</code>
+      </pre>
+    );
+  }
+
+  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;
+};
+
+export default HTMLBlock;

package/components/Image/index.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+
+interface ImageProps {
+  align?: string;
+  alt?: string;
+  border?: boolean;
+  caption?: string;
+  className?: string;
+  height?: string;
+  src: string;
+  title?: string;
+  width?: string;
+  lazy?: boolean;
+}
+
+const Image = (Props: ImageProps) => {
+  const [lightbox, setLightbox] = React.useState(false);
+  const {
+    align = '',
+    alt = '',
+    border = false,
+    caption,
+    className = '',
+    height = 'auto',
+    src,
+    title = '',
+    width = 'auto',
+    lazy = false,
+  } = Props;
+
+  if (className === 'emoji') {
+    return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
+  }
+
+  const handleKeyDown = ({ key, metaKey: cmd }: React.KeyboardEvent<HTMLImageElement>) => {
+    const cmdKey = cmd ? 'cmd+' : '';
+    key = `${cmdKey}${key.toLowerCase()}`;
+
+    switch (key) {
+      case 'cmd+.':
+      case 'escape':
+        // CLOSE
+        setLightbox(false);
+        break;
+      case ' ':
+      case 'enter':
+        // OPEN
+        if (!lightbox) setLightbox(true);
+      default:
+    }
+  };
+
+  const toggle = () => {
+    if (className === 'emoji') return;
+    setLightbox(!lightbox);
+  };
+
+  if (caption) {
+    return (
+      <figure>
+        <span
+          aria-label={alt}
+          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
+          role={'button'}
+          tabIndex={0}
+        >
+          <span className="lightbox-inner">
+            <img
+              src={src}
+              width={width}
+              height={height}
+              title={title}
+              className={`img img-align-center ${border ? 'border' : ''}`}
+              alt={alt}
+              loading={lazy ? 'lazy' : 'eager'}
+            />
+          </span>
+        </span>
+        <figcaption>{caption}</figcaption>
+      </figure>
+    );
+  }
+
+  return (
+    <span
+      aria-label={alt}
+      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      role={'button'}
+      tabIndex={0}
+    >
+      <span className="lightbox-inner">
+        <img
+          src={src}
+          width={width}
+          height={height}
+          title={title}
+          className={`img img-align-${align} ${border ? 'border' : ''}`}
+          alt={alt}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
+      </span>
+    </span>
+  );
+};
+
+export default Image;

package/components/Table/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface Props extends JSX.IntrinsicAttributes {
+  children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+}
+
+const Table = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <div className="rdmd-table">
+      <div className="rdmd-table-inner">
+        <table>{children}</table>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/components/TableOfContents/index.jsx

@@ -1,5 +1,5 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import { element } from 'prop-types';
+import React from 'react';
 
 function TableOfContents({ children }) {
   return (
@@ -19,7 +19,7 @@ function TableOfContents({ children }) {
 }
 
 TableOfContents.propTypes = {
-  children: PropTypes.element,
+  children: element,
 };
 
-module.exports = TableOfContents;
+export default TableOfContents;

package/components/{index.js → index.ts}

@@ -3,7 +3,7 @@ export { default as Callout } from './Callout';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';
-export { default as GlossaryItem } from './GlossaryItem';
+export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface CodeProps {
+    children?: string[] | string;
+    copyButtons?: boolean;
+    lang?: string;
+    meta?: string;
+    theme?: string;
+    value?: string;
+}
+declare const Code: (props: CodeProps) => React.JSX.Element;
+export default Code;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CodeTabs: (props: any) => React.JSX.Element;
+export default CodeTabs;

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

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

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

@@ -0,0 +1,10 @@
+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 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const HTMLBlock: ({ children, runScripts, safeMode }: {
+    children?: string;
+    runScripts?: boolean;
+    safeMode?: boolean;
+}) => React.JSX.Element;
+export default HTMLBlock;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface ImageProps {
+    align?: string;
+    alt?: string;
+    border?: boolean;
+    caption?: string;
+    className?: string;
+    height?: string;
+    src: string;
+    title?: string;
+    width?: string;
+    lazy?: boolean;
+}
+declare const Image: (Props: ImageProps) => React.JSX.Element;
+export default Image;