@readme/markdown 6.87.1 → 6.88.0

package/components/Code/index.jsx

@@ -1,103 +0,0 @@
-const copy = require('copy-to-clipboard');
-const PropTypes = require('prop-types');
-const React = require('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') {
-  // eslint-disable-next-line global-require
-  syntaxHighlighter = require('@readme/syntax-highlighter').default;
-  // eslint-disable-next-line global-require
-  ({ canonical: canonicalLanguage } = require('@readme/syntax-highlighter'));
-}
-
-function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) {
-  const copyClass = `${rootClass}_copied`;
-  const button = React.createRef();
-  /* istanbul ignore next */
-  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} />;
-}
-
-CopyCode.propTypes = {
-  className: PropTypes.string,
-  codeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(React.Element) })])
-    .isRequired,
-  rootClass: PropTypes.string,
-};
-
-function Code(props) {
-  const { children, className, copyButtons, lang, meta, theme } = props;
-
-  const langClass = className.search(/lang(?:uage)?-\w+/) >= 0 ? className.match(/\s?lang(?:uage)?-(\w+)/)[1] : '';
-  const language = canonicalLanguage(lang) || langClass;
-
-  const codeRef = React.createRef();
-
-  const codeOpts = {
-    inline: !lang,
-    tokenizeVariables: true,
-    dark: theme === 'dark',
-  };
-
-  const codeContent =
-    syntaxHighlighter && children ? syntaxHighlighter(children[0], language, codeOpts) : children?.[0] || '';
-
-  return (
-    <React.Fragment>
-      {copyButtons && <CopyCode className="fa" codeRef={codeRef} />}
-      <code
-        ref={codeRef}
-        className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
-        data-lang={language}
-        name={meta}
-        suppressHydrationWarning={true}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        {codeContent}
-      </code>
-    </React.Fragment>
-  );
-}
-
-function CreateCode({ copyButtons, theme }) {
-  // eslint-disable-next-line react/display-name
-  return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
-}
-
-Code.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  copyButtons: PropTypes.bool,
-  lang: PropTypes.string,
-  meta: PropTypes.string,
-  theme: PropTypes.string,
-};
-
-Code.defaultProps = {
-  className: '',
-  copyButtons: true,
-  lang: '',
-  meta: '',
-};
-
-CreateCode.sanitize = sanitizeSchema => {
-  // This is for code blocks class name
-  sanitizeSchema.attributes.code = ['className', 'lang', 'meta', 'value'];
-
-  return sanitizeSchema;
-};
-
-module.exports = CreateCode;

package/components/CodeTabs/index.jsx

@@ -1,60 +0,0 @@
-const { uppercase } = require('@readme/syntax-highlighter');
-const PropTypes = require('prop-types');
-const React = require('react');
-const { useState } = require('react');
-
-const CodeTabs = props => {
-  const { children, theme } = props;
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  function handleClick({ target }, index) {
-    const $wrap = target.parentElement.parentElement;
-    const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
-    $open.forEach(el => el.classList.remove('CodeTabs_active'));
-    $wrap.classList.remove('CodeTabs_initial');
-
-    const codeblocks = $wrap.querySelectorAll('pre');
-    codeblocks[index].classList.add('CodeTabs_active');
-
-    setActiveIndex(index);
-  }
-
-  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;
-          /* istanbul ignore next */
-          return (
-            <button
-              key={i}
-              aria-selected={activeIndex === i}
-              className={activeIndex === i ? 'CodeTabs_active' : ''}
-              onClick={e => handleClick(e, i)}
-              role="tab"
-              type="button"
-            >
-              {meta || `${!lang ? 'Text' : uppercase(lang)}`}
-            </button>
-          );
-        })}
-      </div>
-      <div className="CodeTabs-inner" role="tabpanel">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-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;

package/components/Embed/index.jsx

@@ -1,88 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading, jsx-a11y/iframe-has-title */
-const propTypes = require('prop-types');
-const React = require('react');
-
-const Favicon = ({ src, alt = 'favicon', ...attr }) => <img {...attr} alt={alt} height="14" src={src} width="14" />;
-Favicon.propTypes = {
-  alt: propTypes.string,
-  src: propTypes.string,
-};
-
-class Embed extends React.Component {
-  render() {
-    const { lazy = true, provider, url, title, html, iframe, image, favicon, ...attrs } = this.props;
-
-    if (!url) {
-      return <div />;
-    }
-
-    if ('iframe' in this.props) {
-      return <iframe {...attrs} border="none" src={url} style={{ border: 'none', display: 'flex', margin: 'auto' }} />;
-    }
-
-    const classes = ['embed', image && 'embed_hasImg'];
-    return (
-      <div className={classes.join(' ')}>
-        {html ? (
-          <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }}></div>
-        ) : (
-          <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
-            {!image || <img alt={title} className="embed-img" loading={lazy ? 'lazy' : ''} src={image} />}
-            {title ? (
-              <div className="embed-body">
-                {!favicon || (
-                  <Favicon
-                    alt={provider}
-                    className="embed-favicon"
-                    loading={lazy ? 'lazy' : ''}
-                    src={favicon}
-                    style={{ float: 'left' }}
-                  />
-                )}
-                {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>
-    );
-  }
-}
-
-Embed.propTypes = {
-  children: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.shape({}), propTypes.element]),
-  favicon: propTypes.string,
-  height: propTypes.string,
-  html: propTypes.string,
-  iframe: propTypes.any,
-  image: propTypes.string,
-  lazy: propTypes.bool,
-  provider: propTypes.string,
-  title: propTypes.string,
-  url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
-  width: propTypes.string,
-};
-Embed.defaultProps = {
-  height: '300px',
-  width: '100%',
-};
-
-const CreateEmbed =
-  ({ lazyImages }) =>
-  // eslint-disable-next-line react/display-name
-  props => <Embed {...props} lazy={lazyImages} />;
-
-module.exports = CreateEmbed;

package/components/GlossaryItem/index.jsx

@@ -1,44 +0,0 @@
-const Tooltip = require('@tippyjs/react').default;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const GlossaryContext = require('../../contexts/GlossaryTerms');
-
-// https://github.com/readmeio/api-explorer/blob/0dedafcf71102feedaa4145040d3f57d79d95752/packages/api-explorer/src/lib/replace-vars.js#L8
-function GlossaryItem({ term, terms }) {
-  const foundTerm = terms.find(i => term.toLowerCase() === i.term.toLowerCase());
-
-  if (!foundTerm) return <span>{term}</span>;
-
-  return (
-    <Tooltip
-      content={
-        <div className="GlossaryItem-tooltip-content">
-          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
-        </div>
-      }
-      offset={[-5, 5]}
-      placement="bottom-start"
-    >
-      <span className="GlossaryItem-trigger">{term}</span>
-    </Tooltip>
-  );
-}
-
-GlossaryItem.propTypes = {
-  term: PropTypes.string.isRequired,
-  terms: PropTypes.arrayOf(
-    PropTypes.shape({
-      definition: PropTypes.string.isRequired,
-      term: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-};
-
-// eslint-disable-next-line react/display-name
-module.exports = props => (
-  <GlossaryContext.Consumer>{terms => terms && <GlossaryItem {...props} terms={terms} />}</GlossaryContext.Consumer>
-);
-
-module.exports.GlossaryItem = GlossaryItem;
-module.exports.GlossaryContext = GlossaryContext;

package/components/HTMLBlock/index.jsx

@@ -1,68 +0,0 @@
-/* eslint-disable no-eval
- */
-const escape = require('lodash.escape');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const MATCH_SCRIPT_TAGS = /<script\b[^>]*>([\s\S]*?)<\/script *>\n?/gim;
-
-const extractScripts = (html = '') => {
-  const scripts = [];
-  let match;
-  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))];
-};
-
-class HTMLBlock extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    [this.html, this.exec] = extractScripts(this.props.html);
-  }
-
-  componentDidMount() {
-    const { runScripts } = this.props;
-    if (typeof window !== 'undefined' && (runScripts === '' || runScripts)) this.exec();
-  }
-
-  render() {
-    const { html, safeMode } = this.props;
-
-    if (safeMode) {
-      return (
-        <pre className="html-unsafe">
-          <code dangerouslySetInnerHTML={{ __html: escape(html) }} />
-        </pre>
-      );
-    }
-
-    return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: this.html }} />;
-  }
-}
-
-HTMLBlock.defaultProps = {
-  runScripts: false,
-  safeMode: false,
-};
-
-HTMLBlock.propTypes = {
-  html: PropTypes.string,
-  runScripts: PropTypes.any,
-  safeMode: PropTypes.bool,
-};
-
-const CreateHtmlBlock =
-  ({ safeMode }) =>
-  // eslint-disable-next-line react/display-name
-  props => <HTMLBlock {...props} safeMode={safeMode} />;
-
-CreateHtmlBlock.sanitize = schema => {
-  schema.tagNames.push('html-block');
-  schema.attributes['html-block'] = ['html', 'runScripts'];
-
-  return schema;
-};
-
-module.exports = CreateHtmlBlock;

package/components/Heading/index.jsx

@@ -1,56 +0,0 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-
-function Heading({ tag, showAnchorIcons, ...props }) {
-  if (!props.children) return '';
-
-  const attrs = {
-    className: `heading heading-${props.level} header-scroll`,
-    align: props.align,
-  };
-
-  const children = [
-    <div key={`heading-anchor-${props.id}`} className="heading-anchor anchor waypoint" id={props.id} />,
-    <div key={`heading-text-${props.id}`} className="heading-text">
-      {props.children}
-    </div>,
-  ];
-
-  if (showAnchorIcons) {
-    const headingText = props.children[1];
-    children.push(
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
-      <a
-        key={`heading-anchor-icon-${props.id}`}
-        aria-label={`Skip link to ${headingText}`}
-        className="heading-anchor-icon fa fa-anchor"
-        href={`#${props.id}`}
-      />,
-    );
-  }
-
-  return React.createElement(tag, attrs, children);
-}
-
-function CreateHeading(level, { showAnchorIcons }) {
-  // eslint-disable-next-line react/display-name
-  return props => <Heading {...props} level={level} showAnchorIcons={showAnchorIcons} tag={`h${level}`} />;
-}
-
-Heading.propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right', '']),
-  children: PropTypes.array.isRequired,
-  id: PropTypes.string.isRequired,
-  level: PropTypes.number,
-  showAnchorIcons: PropTypes.bool,
-  tag: PropTypes.string.isRequired,
-};
-
-Heading.defaultProps = {
-  align: '',
-  id: '',
-  level: 2,
-  showAnchorIcons: true,
-};
-
-module.exports = CreateHeading;

package/components/Image/index.jsx

@@ -1,107 +0,0 @@
-/* eslint-disable no-param-reassign, react/jsx-props-no-spreading, no-fallthrough */
-
-const PropTypes = require('prop-types');
-const React = require('react');
-
-class Image extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      lightbox: false,
-    };
-
-    this.toggle = this.toggle.bind(this);
-    this.handleKey = this.handleKey.bind(this);
-
-    this.isEmoji = props.className === 'emoji';
-  }
-
-  toggle(toState) {
-    if (this.props.className === 'emoji') return;
-
-    if (typeof toState === 'undefined') toState = !this.state.lightbox;
-
-    this.setState({ lightbox: toState });
-  }
-
-  handleKey(e) {
-    let { key, metaKey: cmd } = e;
-
-    cmd = cmd ? 'cmd+' : '';
-    key = `${cmd}${key.toLowerCase()}`;
-
-    switch (key) {
-      case 'cmd+.':
-      case 'escape':
-        // CLOSE
-        this.toggle(false);
-        break;
-      case ' ':
-      case 'enter':
-        // OPEN
-        if (!this.state.open) this.toggle(true);
-        e.preventDefault();
-      default:
-    }
-  }
-
-  render() {
-    const { props } = this;
-    const { alt, lazy = true, ...otherProps } = props;
-
-    if (this.isEmoji) {
-      return <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />;
-    }
-
-    return (
-      <span
-        aria-label={alt}
-        className={`img lightbox ${this.state.lightbox ? 'open' : 'closed'}`}
-        onClick={() => this.toggle()}
-        onKeyDown={this.handleKey}
-        role={'button'}
-        tabIndex={0}
-      >
-        <span className="lightbox-inner">
-          <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />
-        </span>
-      </span>
-    );
-  }
-}
-
-Image.propTypes = {
-  align: PropTypes.string,
-  alt: PropTypes.string,
-  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  lazy: PropTypes.bool,
-  src: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-Image.defaultProps = {
-  align: '',
-  alt: '',
-  caption: '',
-  height: 'auto',
-  src: '',
-  title: '',
-  width: 'auto',
-};
-
-Image.sanitize = sanitizeSchema => {
-  sanitizeSchema.attributes.img = ['className', 'title', 'alt', 'width', 'height', 'align', 'src', 'longDesc'];
-
-  return sanitizeSchema;
-};
-
-const CreateImage =
-  ({ lazyImages }) =>
-  // eslint-disable-next-line react/display-name
-  props => <Image lazy={lazyImages} {...props} />;
-
-module.exports = CreateImage;

package/components/Style.jsx

@@ -1,30 +0,0 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const Style = ({ children, safeMode }) => {
-  return safeMode ? (
-    <pre>
-      <code>{`<style>\n${children}\n</style>`}</code>
-    </pre>
-  ) : (
-    <style>{children}</style>
-  );
-};
-
-Style.propTypes = {
-  children: PropTypes.node,
-  safeMode: PropTypes.bool,
-};
-
-const CreateStyle =
-  ({ safeMode }) =>
-  // eslint-disable-next-line react/display-name
-  props => <Style {...props} safeMode={safeMode} />;
-
-CreateStyle.sanitize = sanitize => {
-  sanitize.tagNames.push('style');
-
-  return sanitize;
-};
-
-module.exports = CreateStyle;

package/components/Table/index.jsx

@@ -1,19 +0,0 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-
-function Table(props) {
-  const { children } = props;
-  return (
-    <div className="rdmd-table">
-      <div className="rdmd-table-inner">
-        <table>{children}</table>
-      </div>
-    </div>
-  );
-}
-
-Table.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-module.exports = Table;