@readme/markdown 6.75.0-beta.3 → 6.75.0-beta.31

package/dist/processor/compile/code-tabs.d.ts

@@ -0,0 +1,3 @@
+import { CodeTabs } from '../../types';
+declare const codeTabs: (node: CodeTabs, _: any, state: any, info: any) => any;
+export default codeTabs;

package/dist/processor/compile/gemoji.d.ts

@@ -0,0 +1,3 @@
+import { Gemoji } from '../../types';
+declare const gemoji: (node: Gemoji) => string;
+export default gemoji;

package/dist/processor/compile/html-block.d.ts

@@ -0,0 +1,3 @@
+import { HTMLBlock } from '../../types';
+declare const htmlBlock: (node: HTMLBlock) => string;
+export default htmlBlock;

package/dist/processor/compile/image.d.ts

@@ -0,0 +1,3 @@
+import type { Image } from "mdast";
+declare const image: (node: Image) => string;
+export default image;

package/dist/processor/compile/index.d.ts

@@ -0,0 +1,2 @@
+declare function compilers(): void;
+export default compilers;

package/dist/processor/transform/callouts.d.ts

@@ -0,0 +1,2 @@
+declare const calloutTransformer: () => (tree: any) => void;
+export default calloutTransformer;

package/dist/processor/transform/code-tabs.d.ts

@@ -0,0 +1,2 @@
+declare const codeTabs: () => (tree: any) => any;
+export default codeTabs;

package/dist/processor/transform/gemoji+.d.ts

@@ -0,0 +1,3 @@
+import { Root } from 'mdast';
+declare const gemojiTransformer: () => (tree: Root) => Root;
+export default gemojiTransformer;

package/dist/processor/transform/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (() => (tree: any) => void)[];
+export default _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "6.75.0-beta.3",
+  "version": "6.75.0-beta.31",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",
@@ -12,43 +12,54 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack --mode production",
+    "build": "webpack --mode production && npm run build-types",
+    "build-types": "npx tsc --declaration --emitDeclarationOnly --declarationDir ./dist --skipLibCheck",
     "lint": "eslint . --ext .jsx --ext .js --ext .ts --ext .tsx",
     "release": "npx semantic-release",
     "release.dry": "npx semantic-release --dry-run",
-    "test": "true # jest --coverage --runInBand",
-    "test.watch": "jest --watch --coverage=false",
+    "start": "webpack serve --open --mode development --config ./webpack.dev.js",
+    "test": "vitest",
+    "test.ui": "vitest --ui",
+    "test.browser": "jest",
     "watch": "webpack --watch --progress --mode development"
   },
   "dependencies": {
     "@mdx-js/mdx": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
-    "@readme/emojis": "^5.0.0",
-    "@readme/syntax-highlighter": "^12.0.2",
+    "@readme/emojis": "^5.1.0",
+    "@readme/syntax-highlighter": "^13.0.0",
     "copy-to-clipboard": "^3.3.2",
+    "core-js": "^3.36.1",
     "debug": "^4.3.4",
     "emoji-regex": "^10.2.1",
+    "gemoji": "^8.1.0",
     "hast-util-sanitize": "^4.0.0",
     "lodash.escape": "^4.0.1",
     "lodash.kebabcase": "^4.1.1",
+    "mdast-util-find-and-replace": "^3.0.1",
     "mdast-util-toc": "^5.1.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "rehype-sanitize": "^4.0.0",
-    "remark": "^14.0.2",
+    "remark": "^15.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",
-    "remark-parse": "^10.0.2",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "remark-stringify": "^11.0.0",
     "trim": "^1.0.1",
     "unified": "^8.4.0",
     "unist-util-flatmap": "^1.0.0",
-    "unist-util-visit": "^4.1.1"
+    "unist-util-visit": "^4.1.1",
+    "util": "^0.12.5"
   },
   "peerDependencies": {
-    "@readme/variable": "^15.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "@readme/variable": "^16.0.0",
     "@tippyjs/react": "^4.1.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "16.x || 17.x || 18.x",
+    "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
@@ -57,6 +68,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.23.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
@@ -64,37 +76,42 @@
     "@commitlint/cli": "^17.5.1",
     "@commitlint/config-angular": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@hot-loader/react-dom": "^16.14.0",
-    "@readme/eslint-config": "^10.5.2",
+    "@readme/eslint-config": "^14.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/mdast": "^4.0.3",
+    "@types/mdx": "^2.0.12",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.6.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "browserify-fs": "^1.0.0",
     "codemirror": "^5.54.0",
-    "core-js": "^2.6.12",
     "css-loader": "^6.7.3",
     "eslint": "^8.37.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-environment-puppeteer": "^8.0.6",
-    "jest-image-snapshot": "^6.1.0",
+    "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^8.0.6",
     "mini-css-extract-plugin": "^2.7.5",
     "node-sass": "^8.0.0",
-    "prettier": "^2.8.7",
+    "prettier": "^3.2.5",
     "puppeteer": "^19.8.3",
-    "react-hot-loader": "^4.13.1",
+    "react-router-dom": "^6.22.3",
     "sass-loader": "^13.2.2",
     "semantic-release": "^22.0.12",
     "stream-browserify": "^3.0.0",
     "string.prototype.trimend": "^1.0.6",
     "terser-webpack-plugin": "^5.3.7",
     "ts-loader": "^9.4.2",
-    "typescript": "^5.0.3",
+    "typescript": "^5.4.5",
+    "vitest": "^1.4.0",
     "webpack": "^5.56.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.2",

package/components/Callout/index.jsx

@@ -1,42 +0,0 @@
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const Callout = props => {
-  const { attributes, theme, icon } = props;
-  const [title, ...content] = !props.title ? [null, props.children] : props.children;
-
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={`callout-heading${title ? '' : ' empty'}`}>
-        <span className="callout-icon">{icon}</span>
-        {title}
-      </h3>
-      {content}
-    </blockquote>
-  );
-};
-
-Callout.propTypes = {
-  attributes: PropTypes.shape({}),
-  calloutStyle: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  icon: PropTypes.string,
-  node: PropTypes.shape(),
-  theme: PropTypes.string,
-  title: PropTypes.string,
-};
-
-Callout.defaultProps = {
-  attributes: null,
-  calloutStyle: 'info',
-  node: null,
-};
-
-Callout.sanitize = sanitizeSchema => {
-  sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'title'];
-
-  return sanitizeSchema;
-};
-
-module.exports = Callout;

package/components/Code/index.jsx

@@ -1,101 +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}
-      >
-        {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/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,69 +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/Image/index.jsx

@@ -1,111 +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 } = props;
-
-    if (this.isEmoji) {
-      return <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />;
-    }
-
-    const align = props.align === 'center' ? 'middle' : props.align;
-
-    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 {...props} align={align} alt={alt} loading={lazy ? 'lazy' : ''} />
-        </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/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;