Please enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.
+> ๐ก Want to support this project? [Sponsor](https://github.com/sponsors/mayank1513) or check out our [courses](https://mayank-chaudhari.vercel.app/courses)!
---
-with ๐ by Mayank Kumar Chaudhari
+Built with โค๏ธ by Mayank Kumar Chaudhari
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md index 21995b39..d901f23c 100644 --- a/lib/CHANGELOG.md +++ b/lib/CHANGELOG.md @@ -1,5 +1,38 @@ # @m2d/react-markdown +## 0.2.0 + +### Minor Changes + +- e1d4106: Add client-side `
+ Nested
+
+ ` if additional props are passed, otherwise uses `Fragment`.
- */
- wrapper?: keyof JSX.IntrinsicElements;
-
- /**
- * Optional `remark` plugins used during markdown parsing.
- */
- remarkPlugins?: PluggableList;
-
- /**
- * Optional `rehype` plugins used during markdown-to-HTML conversion.
- */
- rehypePlugins?: PluggableList;
-
- /**
- * Options passed to `remark-rehype` for controlling transformation.
- */
- remarkRehypeOptions?: Options;
-
- /**
- * Optional reference to access the parsed MDAST and HAST trees.
- */
- astRef?: AstRef;
-
- /**
- * Custom React components to override specific HTML tags.
- */
- components?: Partial>>;
-
- /**
- * If true, skips raw HTML rendering in markdown content.
- */
- skipHtml?: boolean;
-}
-
-/**
- * Renders a single HAST Element recursively as a React element,
- * supporting string HTML tags and optional component overrides.
- */
-const El = ({
- node,
- components,
- skipHtml,
-}: { node: Element } & Pick) => {
- const { tagName, properties, children } = node;
- const cleanedProps = handleAriaAndDataProps(
- properties ?? {},
- ) as JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
-
- const child = children.map(node =>
- node.type === "text" || (node.type === "raw" && !skipHtml)
- ? node.value.replace(/\n/g, "") || null
- : node.type === "element" && {child}
- );
- }
-
- return {child} ;
-};
-
-interface MarkdownProps extends MdProps {
- /**
- * Raw markdown string to be parsed and rendered.
- */
- children: string;
-}
-
-/**
- * Internal component that parses markdown string into MDAST and HAST,
- * and renders it using the `El` recursive renderer.
- */
-const Markdown = ({
- children,
- remarkPlugins = [],
- rehypePlugins = [],
- remarkRehypeOptions,
- astRef,
- components,
- skipHtml,
-}: MarkdownProps) => {
- const processor = unified()
- .use(remarkParse)
- .use(remarkPlugins)
- .use(remarkRehype, {
- ...remarkRehypeOptions,
- allowDangerousHtml: !skipHtml,
- })
- .use(rehypePlugins);
-
- const mdast = processor.parse(children);
- const hast = processor.runSync(mdast);
- if (astRef) {
- if (!astRef.current) astRef.current = [];
- astRef.current.push({ mdast, hast });
- }
-
- return (
- ;
+ markdownProps: Omit;
}
/**
* Recursively traverses React children and injects markdown rendering
* into string-based content, preserving JSX wrapper structure.
*/
-const MarkdownRecursive = ({ children, props }: MarkdownRecursiveProps) => {
- if (typeof children === "string") return {children} ;
+export const MarkdownRecursive = ({ children, markdownProps }: MarkdownRecursiveProps) => {
+ if (typeof children === "string") return {children} ;
if (isValidElement(children)) {
- let { type: Tag, props: innerProps } = children;
-
- if (typeof Tag === "function") {
- // Evaluate factory-style functional components to unwrap structure
- // @ts-expect-error call signature not always inferable
- const jsx = Tag(innerProps);
- Tag = jsx.type;
- innerProps = jsx.props;
- }
+ const { type: Tag, props: innerProps } = children;
return (
-
-
- {(innerProps as JSX.IntrinsicElements[keyof JSX.IntrinsicElements]).children}
+
+
+ {(innerProps as IntrinsicProps).children}
);
@@ -208,8 +54,7 @@ export const Md = ({
// @ts-expect-error - props are valid for HTML elements but cannot be statically inferred on Fragment
- Object.fromEntries(
- Object.entries(properties).map(([key, value]) => [
- key.startsWith("data")
- ? key.replace(/[A-Z]+(?![a-z])|[A-Z]/g, match => "-" + match.toLowerCase())
- : key.startsWith("aria")
- ? key.replace("aria", "aria-").toLowerCase()
- : key,
- value,
- ]),
- );
-
-export const uuid = () => crypto.randomUUID();
diff --git a/lib/src/server/omit/omit.tsx b/lib/src/server/omit/omit.tsx
index 32bb6d5a..3aaacabd 100644
--- a/lib/src/server/omit/omit.tsx
+++ b/lib/src/server/omit/omit.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from "../md";
+import { ComponentProps } from "../../utils";
/**
* Props for the `Omit` component.
diff --git a/lib/src/server/unwrap/unwrap.tsx b/lib/src/server/unwrap/unwrap.tsx
index 64c08c74..f6f98894 100644
--- a/lib/src/server/unwrap/unwrap.tsx
+++ b/lib/src/server/unwrap/unwrap.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from "../md";
+import { ComponentProps } from "../../utils";
/**
* Props for the `Unwrap` component.
diff --git a/lib/src/server/md/utils.test.ts b/lib/src/utils.test.ts
similarity index 100%
rename from lib/src/server/md/utils.test.ts
rename to lib/src/utils.test.ts
diff --git a/lib/src/utils.tsx b/lib/src/utils.tsx
new file mode 100644
index 00000000..c785a366
--- /dev/null
+++ b/lib/src/utils.tsx
@@ -0,0 +1,161 @@
+import { FC, HTMLProps, isValidElement, JSX, ReactNode } from "react";
+import remarkParse from "remark-parse";
+import remarkRehype, { type Options } from "remark-rehype";
+import { PluggableList, unified } from "unified";
+import { Root } from "mdast";
+import { Element, Root as HastRoot, Properties } from "hast";
+
+export const handleAriaAndDataProps = (properties: Properties) =>
+ Object.fromEntries(
+ Object.entries(properties).map(([key, value]) => [
+ key.startsWith("data")
+ ? key.replace(/[A-Z]+(?![a-z])|[A-Z]/g, match => "-" + match.toLowerCase())
+ : key.startsWith("aria")
+ ? key.replace("aria", "aria-").toLowerCase()
+ : key,
+ value,
+ ]),
+ );
+
+export const uuid = () => crypto.randomUUID();
+
+export type IntrinsicProps = JSX.IntrinsicElements[keyof JSX.IntrinsicElements];
+
+/**
+ * Tags that are self-closing and must not contain children.
+ */
+const emptyHtmlTags = ["br", "hr", "img", "input"];
+
+/**
+ * Extended component props to support custom HTML components
+ * and HAST Element reference.
+ */
+export type ComponentProps = IntrinsicProps & {
+ node: Element;
+};
+
+export type AstArrayElement = { mdast: Root; hast: HastRoot };
+
+export type AstRef = { current?: AstArrayElement[] };
+
+/**
+ * Props accepted by the main ` {
+ /**
+ * Optional wrapper element. Defaults to `
` if additional props are passed, otherwise uses `Fragment`.
+ */
+ wrapper?: keyof JSX.IntrinsicElements;
+
+ /**
+ * Optional `remark` plugins used during markdown parsing.
+ */
+ remarkPlugins?: PluggableList;
+
+ /**
+ * Optional `rehype` plugins used during markdown-to-HTML conversion.
+ */
+ rehypePlugins?: PluggableList;
+
+ /**
+ * Options passed to `remark-rehype` for controlling transformation.
+ */
+ remarkRehypeOptions?: Options;
+
+ /**
+ * Optional reference to access the parsed MDAST and HAST trees.
+ */
+ astRef?: AstRef;
+
+ /**
+ * Custom React components to override specific HTML tags.
+ */
+ components?: Partial>>;
+
+ /**
+ * If true, skips raw HTML rendering in markdown content.
+ */
+ skipHtml?: boolean;
+}
+
+/**
+ * Renders a single HAST Element recursively as a React element,
+ * supporting string HTML tags and optional component overrides.
+ */
+const El = ({
+ node,
+ components,
+ skipHtml,
+}: { node: Element } & Pick) => {
+ const { tagName, properties, children } = node;
+ const cleanedProps = handleAriaAndDataProps(properties ?? {}) as IntrinsicProps;
+
+ const child = children.map(node =>
+ node.type === "text" || (node.type === "raw" && !skipHtml)
+ ? node.value.replace(/\n/g, "") || null
+ : node.type === "element" && {child}
+ );
+ }
+
+ return {child} ;
+};
+
+interface MarkdownProps extends MdProps {
+ /**
+ * Raw markdown string to be parsed and rendered.
+ */
+ children: string;
+}
+
+/**
+ * Internal component that parses markdown string into MDAST and HAST,
+ * and renders it using the `El` recursive renderer.
+ */
+export const Markdown = ({
+ children,
+ remarkPlugins = [],
+ rehypePlugins = [],
+ remarkRehypeOptions,
+ astRef,
+ components,
+ skipHtml,
+}: MarkdownProps) => {
+ const processor = unified()
+ .use(remarkParse)
+ .use(remarkPlugins)
+ .use(remarkRehype, {
+ ...remarkRehypeOptions,
+ allowDangerousHtml: !skipHtml,
+ })
+ .use(rehypePlugins);
+
+ const mdast = processor.parse(children);
+ const hast = processor.runSync(mdast);
+ if (astRef) {
+ if (!astRef.current) astRef.current = [];
+ astRef.current.push({ mdast, hast });
+ }
+
+ return (
+