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

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

@@ -2,6 +2,7 @@ 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/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.28",
+  "version": "6.75.0-beta.29",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",
@@ -19,6 +19,7 @@
     "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"
   },
@@ -80,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",

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;