p component overriding img component

[Michael Gartner]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

"react-markdown": "^9.0.1", "remark-gfm": "^4.0.0"

Link to runnable example

No response

Steps to reproduce

minimal vite app with react-pdf
pass content to

node: v18.17.0
npm: 9.6.7

import React from "react";
import {
  Document,
  Page,
  Text,
  View,
  PDFViewer,
  Image,
} from "@react-pdf/renderer";
import Markdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";

type PdfProps = {
  content: string;
};

const components: Components = {
  img: ({ src }) => (
    <Image
      src={src}
      style={{
        objectFit: "contain",
      }}
    />
  ),
  p: ({ children }) => (
    <Text
      style={{
        marginBottom: 12,
        fontSize: 14,
      }}
    >
      {children}
    </Text>
  ),
};

const image1 = "https://i.imgur.com/t9nin3y.png";
const image2 = "https://i.imgur.com/OpJ2Y6L.png";
const image3 = "https://i.imgur.com/tjdLtYY.png";
const image4 = "https://i.imgur.com/hH8MxKm.png";

const Pdf: React.FC<PdfProps> = () => {
  const content = `images

  ![image1](${image1})

  ![image2](${image2})

  some text

  ![image3](${image3})

  ![image4](${image4})
  
  `;

  return (
      <PDFViewer style={{ height: "90vh", width: "90vw" }}>
        <Document>
          <Page>
            <View>
              <Markdown
                components={components}
                remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
              >
                {content}
              </Markdown>
            </View>
          </Page>
        </Document>
      </PDFViewer>
  );
};

export default Pdf;

Expected behavior

Images adhere to objectFit: "contain"
Text is rendered

Actual behavior

Images are all tiny

If I remove the p component, images adhere to objectFit: "contain", but no text is shown

I am curious as to why this is the case.
How can I have images adhere to img and not p

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

Windows

Build and bundle tools

Vite

[Christian Murphy]

Welcome @mdroidian!
Sorry you ran into confusion.

CommonMark, the markdown standard this project follows wraps images in paragraph tags.

Either account for this in your styles.
Or apply https://github.com/remarkjs/remark-unwrap-images to change the document structure to remove the paragraphs.

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[github-actions]

Hi! Thanks for reaching out! Because we treat issues as our backlog, we close issues that are questions since they don’t represent a task to be completed.

See our support docs for how and where to ask questions.

Thanks,
— bb

[Michael Gartner]

@ChristianMurphy Thanks for the quick reply! 🙌 I'll give it a go tomorrow.