p component overriding img component

[mdroidian]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] 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

[ChristianMurphy]

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[bot]]

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

[github-actions[bot]]

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

[mdroidian]

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

[vasco3]

@mdroidian do you get console errors when the paragraph content contains strong or other elements? I don't know how to fix it. I wonder if I need to add recursion

[ChristianMurphy]

@vasco3 that is unrelated to the question here. Please open a new discussion https://github.com/orgs/remarkjs/discussions/categories/q-a and include enough context that people can actually help you. Like what you are building, what the markdown content you are processing looks like, what versions of libraries and build tools you are using are, and what the actual warning or error you see is.