@readme/markdown 6.87.1 → 6.89.0

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

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

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/compatibility.d.ts

@@ -0,0 +1,53 @@
+import { Html, Image } from 'mdast';
+import { NodeTypes } from '../../enums';
+type CompatNodes = {
+    type: NodeTypes.glossary;
+    data: {
+        hProperties: {
+            term: string;
+        };
+    };
+} | {
+    type: NodeTypes.glossary;
+    data: {
+        hName: 'Glossary';
+    };
+    children: [{
+        type: 'text';
+        value: string;
+    }];
+} | {
+    type: NodeTypes.reusableContent;
+    tag: string;
+} | {
+    type: 'embed';
+    data: {
+        hProperties: {
+            [key: string]: string;
+        };
+    };
+} | {
+    type: 'escape';
+    value: string;
+} | {
+    type: 'figure';
+    children: [Image, {
+        type: 'figcaption';
+        children: [{
+            type: 'text';
+            value: string;
+        }];
+    }];
+} | {
+    type: 'i';
+    data: {
+        hProperties: {
+            className: string[];
+        };
+    };
+} | {
+    type: 'yaml';
+    value: string;
+} | Html;
+declare const compatibility: (node: CompatNodes) => string;
+export default compatibility;

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

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

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 { ImageBlock } from 'types';
+declare const image: (node: ImageBlock) => 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/compile/variable.d.ts

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

package/dist/processor/plugin/toc.d.ts

@@ -0,0 +1,9 @@
+import { Transformer } from 'unified';
+import { Root } from 'hast';
+import { CustomComponents, IndexableElements } from '../../types';
+interface Options {
+    components?: Record<string, any>;
+}
+export declare const rehypeToc: ({ components }: Options) => Transformer<Root, Root>;
+export declare const tocToMdx: (toc: IndexableElements[], components: CustomComponents) => string;
+export {};

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,3 @@
+import { Node } from 'mdast';
+declare const codeTabsTransformer: () => (tree: Node) => Node;
+export default codeTabsTransformer;

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

@@ -0,0 +1,3 @@
+import { Transform } from 'mdast-util-from-markdown';
+declare const divTransformer: () => Transform;
+export default divTransformer;

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

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

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/images.d.ts

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

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

@@ -0,0 +1,9 @@
+import divTransformer from './div';
+import injectComponents from './inject-components';
+import readmeComponentsTransformer from './readme-components';
+import readmeToMdx from './readme-to-mdx';
+import variablesTransformer from './variables';
+import tablesToJsx from './tables-to-jsx';
+export { divTransformer, readmeComponentsTransformer, readmeToMdx, injectComponents, variablesTransformer, tablesToJsx, };
+declare const _default: (() => (tree: any) => void)[];
+export default _default;

package/dist/processor/transform/inject-components.d.ts

@@ -0,0 +1,7 @@
+import { MdastComponents } from '../../types';
+import { Transform } from 'mdast-util-from-markdown';
+interface Options {
+    components?: MdastComponents;
+}
+declare const injectComponents: (opts: Options) => () => Transform;
+export default injectComponents;

package/dist/processor/transform/readme-components.d.ts

@@ -0,0 +1,7 @@
+import { Transform } from 'mdast-util-from-markdown';
+interface Options {
+    components: Record<string, string>;
+    html?: boolean;
+}
+declare const readmeComponents: (opts: Options) => () => Transform;
+export default readmeComponents;

package/dist/processor/transform/readme-to-mdx.d.ts

@@ -0,0 +1,3 @@
+import { Transform } from 'mdast-util-from-markdown';
+declare const readmeToMdx: () => Transform;
+export default readmeToMdx;

package/dist/processor/transform/tables-to-jsx.d.ts

@@ -0,0 +1,3 @@
+import { Transform } from 'mdast-util-from-markdown';
+declare const tablesToJsx: () => Transform;
+export default tablesToJsx;

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

@@ -0,0 +1,5 @@
+import { Transform } from 'mdast-util-from-markdown';
+declare const variables: ({ asMdx }?: {
+    asMdx: boolean;
+}) => Transform;
+export default variables;

package/dist/processor/utils.d.ts

@@ -0,0 +1,77 @@
+import { Node } from 'mdast';
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
+/**
+ * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
+ * This currently sets all the values to a string since we process/compile the MDX on the fly
+ * through the editor, and it'll throw errors over malformed JSX. TODO: fix this.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {string} formatted hProperties as JSX attributes
+ */
+export declare const formatHProps: <T>(node: Node) => string;
+/**
+ * Formats an object of props as a string.
+ *
+ * @param {Object} props
+ * @returns {string}
+ */
+export declare const formatProps: (props: Object) => string;
+/**
+ * Returns the hProperties of a node.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {T} hProperties
+ */
+export declare const getHProps: <T>(node: Node) => T;
+/**
+ * Returns array of hProperty keys.
+ *
+ * @template T
+ * @param {Node} node
+ * @returns {Array} array of hProperty keys
+ */
+export declare const getHPropKeys: <T>(node: Node) => any;
+/**
+ * Gets the attributes of an MDX element and returns them as an object of hProperties.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {T} object of hProperties
+ */
+export declare const getAttrs: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => any;
+/**
+ * Gets the children of an MDX element and returns them as an array of Text nodes.
+ * Currently only being used by the HTML Block component, which only expects a single text node.
+ *
+ * @template T
+ * @param {(MdxJsxFlowElement | MdxJsxTextElement)} jsx
+ * @returns {Array} array of child text nodes
+ */
+export declare const getChildren: <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement) => any;
+/**
+ * Tests if a node is an MDX element.
+ * TODO: Make this more extensible to all types of nodes. isElement(node, 'type' or ['type1', 'type2']), say
+ *
+ * @param {Node} node
+ * @returns {(node is MdxJsxFlowElement | MdxJsxTextElement)}
+ */
+export declare const isMDXElement: (node: Node) => node is MdxJsxFlowElement | MdxJsxTextElement;
+/**
+ * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
+ * and unindents the HTML.
+ *
+ * @param {string} html
+ * @returns {string} formatted HTML
+ */
+export declare const formatHTML: (html: string) => string;
+/**
+ * Reformat HTML for the markdown/mdx by adding an indentation to each line. This assures that the
+ * HTML is indentend properly within the HTMLBlock component when rendered in the markdown/mdx.
+ *
+ * @param {string} html
+ * @param {number} [indent=2]
+ * @returns {string} re-formatted HTML
+ */
+export declare const reformatHTML: (html: string, indent?: number) => string;

package/package.json

@@ -2,8 +2,9 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "6.87.1",
+  "version": "6.89.0",
   "main": "dist/main.node.js",
+  "types": "dist/index.d.ts",
   "browser": "dist/main.js",
   "files": [
     "styles",
@@ -11,104 +12,122 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack --mode production",
-    "heroku-postbuild": "webpack --mode production --config ./webpack.dev.js",
-    "lint": "npm run lint:js && npm run lint:css",
-    "lint:css": "stylelint '{components,styles}/**/*.{css,scss}'",
-    "lint:js": "eslint --ext ts,tsx,js,jsx .",
-    "prepare": "husky install",
-    "pretest": "npm run lint",
-    "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
+    "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",
-    "start": "webpack serve --config ./webpack.dev.js --open --mode development",
-    "test": "jest --coverage --runInBand --testPathIgnorePatterns '__tests__/browser'",
-    "test.watch": "jest --watch --coverage=false --testPathIgnorePatterns '__tests__/browser'",
-    "test.browser": "jest --config jest.browser.js --runInBand --testPathPattern '__tests__/browser'",
-    "watch": "webpack -w --progress --mode production"
+    "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": {
-    "@readme/syntax-highlighter": "^13.0.0",
-    "copy-to-clipboard": "^3.3.3",
-    "emoji-regex": "^10.3.0",
+    "@mdx-js/mdx": "^3.0.0",
+    "@readme/emojis": "^5.1.0",
+    "@readme/syntax-highlighter": "^13.1.0",
+    "copy-to-clipboard": "^3.3.2",
+    "core-js": "^3.36.1",
+    "debug": "^4.3.4",
+    "emoji-regex": "^10.2.1",
+    "estree-util-value-to-estree": "^3.1.1",
     "gemoji": "^8.1.0",
+    "hast-util-from-html": "^2.0.1",
     "hast-util-sanitize": "^4.0.0",
+    "hast-util-to-xast": "^3.0.0",
+    "hastscript": "^9.0.0",
     "lodash.escape": "^4.0.1",
     "lodash.kebabcase": "^4.1.1",
-    "mdast-util-toc": "^5.1.0",
-    "parse-entities": "^4.0.1",
+    "mdast-util-find-and-replace": "^3.0.1",
+    "mdast-util-phrasing": "^4.1.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "rehype-raw": "^5.1.0",
-    "rehype-react": "^6.2.1",
-    "rehype-sanitize": "^4.0.0",
-    "rehype-stringify": "^6.0.0",
-    "remark-breaks": "^1.0.0",
-    "remark-disable-tokenizers": "^1.0.24",
-    "remark-frontmatter": "^2.0.0",
-    "remark-parse": "^8.0.0",
-    "remark-rehype": "^8.1.0",
-    "remark-slug": "^6.0.0",
-    "remark-stringify": "^8.0.0",
-    "unified": "^9.2.2",
+    "rehype-remark": "^10.0.0",
+    "rehype-slug": "^6.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",
+    "trim": "^1.0.1",
+    "unified": "^11.0.4",
     "unist-util-flatmap": "^1.0.0",
-    "unist-util-map": "^3.1.2",
-    "unist-util-select": "^4.0.0",
-    "unist-util-visit": "^4.1.1"
+    "unist-util-visit": "^5.0.0",
+    "util": "^0.12.5",
+    "xast-util-to-xml": "^4.0.0"
   },
   "peerDependencies": {
-    "@readme/variable": "^16.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@readme/variable": "^16.1.0",
     "@tippyjs/react": "^4.1.0",
     "react": "16.x || 17.x || 18.x",
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.19.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-transform-runtime": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^19.0.3",
-    "@commitlint/config-conventional": "^19.0.3",
-    "@readme/eslint-config": "^13.5.0",
-    "@readme/stylelint-config": "^6.1.0",
+    "@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",
+    "@babel/preset-typescript": "^7.21.4",
+    "@commitlint/cli": "^17.5.1",
+    "@commitlint/config-angular": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@readme/eslint-config": "^14.0.0",
+    "@readme/markdown-legacy": "npm:@readme/markdown@^6.84.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.0.0",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
+    "@testing-library/react": "^14",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/hast": "^3.0.4",
+    "@types/jest": "^29.5.12",
+    "@types/mdast": "^4.0.3",
+    "@types/mdx": "^2.0.12",
+    "@types/unist": "^3.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@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": "^3.36.0",
-    "css-loader": "^6.10.0",
-    "eslint": "^8.57.0",
-    "husky": "^9.0.11",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.37.0",
+    "hast-util-to-text": "^4.0.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-environment-puppeteer": "^10.0.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-puppeteer": "^8.0.6",
     "jest-image-snapshot": "^6.4.0",
-    "jest-puppeteer": "^10.0.1",
-    "mini-css-extract-plugin": "^2.8.1",
-    "node-sass": "^9.0.0",
-    "postcss": "^8.4.35",
+    "jest-puppeteer": "^8.0.6",
+    "mini-css-extract-plugin": "^2.7.5",
+    "node-sass": "^8.0.0",
     "prettier": "^3.2.5",
-    "prettier-2": "npm:prettier@^2.8.8",
-    "puppeteer": "^22.4.0",
-    "regenerator-runtime": "^0.14.1",
-    "sass-loader": "^14.1.1",
-    "semantic-release": "^23.0.2",
-    "string.prototype.trimend": "^1.0.7",
-    "stylelint": "^16.2.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.90.3",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.2",
-    "webpack-merge": "^5.10.0"
+    "puppeteer": "^19.8.3",
+    "react-router-dom": "^6.22.3",
+    "remark-slug": "^7.0.1",
+    "sass": "^1.77.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.4.5",
+    "unist-util-map": "^4.0.0",
+    "vitest": "^1.4.0",
+    "webpack": "^5.56.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2",
+    "webpack-merge": "^5.8.0"
   },
   "license": "MIT",
   "homepage": "https://rdmd.readme.io",
@@ -118,37 +137,12 @@
     "files": [
       {
         "path": "dist/main.js",
-        "maxSize": "450KB"
+        "maxSize": "1MB"
       },
       {
         "path": "dist/main.node.js",
-        "maxSize": "300KB"
+        "maxSize": "750KB"
       }
     ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ],
-    "rules": {
-      "body-max-line-length": [
-        0,
-        "always",
-        "Infinity"
-      ],
-      "footer-max-line-length": [
-        0,
-        "always",
-        "Infinity"
-      ],
-      "scope-case": [
-        2,
-        "never",
-        "upper-case"
-      ]
-    }
-  },
-  "overrides": {
-    "trim": "^1"
   }
 }

package/styles/components.scss

@@ -6,4 +6,4 @@
 @import '../components/Callout/style';
 @import '../components/Heading/style';
 @import '../components/Embed/style';
-@import '../components/GlossaryItem/style';
+@import '../components/Glossary/style';

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, react/no-unknown-property
-    <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h2 className={`callout-heading${title ? '' : ' empty'}`}>
-        <span className="callout-icon">{icon}</span>
-        {title}
-      </h2>
-      {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;