@readme/markdown 6.75.0-beta.27 → 6.75.0-beta.29

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/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,8 @@
+declare const compilers: {
+    handlers: {
+        emoji: (node: import("../../types").Gemoji) => string;
+        "code-tabs": (node: import("../../types").CodeTabs, _: any, state: any, info: any) => any;
+        image: (node: import("mdast").Image) => string;
+    };
+};
+export default compilers;

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.27",
+  "version": "6.75.0-beta.29",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",
@@ -19,20 +19,23 @@
     "release.dry": "npx semantic-release --dry-run",
     "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",
-    "@readme/emojis": "^5.0.0",
+    "@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",
@@ -40,8 +43,11 @@
     "rehype-sanitize": "^4.0.0",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",
     "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",
@@ -75,8 +81,11 @@
     "@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.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "browserify-fs": "^1.0.0",
@@ -100,7 +109,7 @@
     "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",

package/components/Code/index.jsx

@@ -1,100 +0,0 @@
-import copy from 'copy-to-clipboard';
-import { string, oneOfType, func, shape, instanceOf, arrayOf, bool } from 'prop-types';
-import React, { createRef, Element, Fragment } 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') {
-  // 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 = 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: string,
-  codeRef: oneOfType([func, shape({ current: instanceOf(Element) })]).isRequired,
-  rootClass: 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 = createRef();
-
-  const codeOpts = {
-    inline: !lang,
-    tokenizeVariables: true,
-    dark: theme === 'dark',
-  };
-
-  const codeContent =
-    syntaxHighlighter && children ? syntaxHighlighter(children[0], language, codeOpts) : children?.[0] || '';
-
-  return (
-    <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>
-    </Fragment>
-  );
-}
-
-function CreateCode({ copyButtons, theme }) {
-  // eslint-disable-next-line react/display-name
-  return props => <Code {...props} copyButtons={copyButtons} theme={theme} />;
-}
-
-Code.propTypes = {
-  children: arrayOf(string),
-  className: string,
-  copyButtons: bool,
-  lang: string,
-  meta: string,
-  theme: 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;
-};
-
-export default 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/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;