Markdown component not rendering images and also not rendering text in latex format

[agrajgarg]

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

^9.0.0

Link to runnable example

No response

Steps to reproduce

import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';
import 'property-information';

const preprocessLaTeX = (content) => {

        const blockProcessedContent = content.replace(
          /\\\[(.*?)\\\]/gs,
          (_, equation) => `$$${equation}$$`,
        );
        
        const inlineProcessedContent = blockProcessedContent.replace(
          /\\\((.*?)\\\)/gs,
          (_, equation) => `$${equation}$`,
        );
        return inlineProcessedContent;
    };
    
    return (
         <>
            {text && text.length > 0 &&
                            text.map((message, index) => (
                                <div key={index} className="markdown" id="bot-msg">
                                    <Markdown
                                        remarkPlugins={[remarkMath]} 
                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
                                        components={{
                                            img: ({node, ...props}) => <img style={{maxWidth: '100%'}} {...props} />
                                        }}
                                    >
                                        {preprocessLaTeX(message)}
                                    </Markdown>
                                </div>
                            ))
                        }
         </>
    )

When the text value is

! [Image 1] (image url)
! [Image 2] (image url)

This code was working till few days back. Without making any changes in the code, the functionality is not working for image rendering.

I am using Parcel as the bundler for my react web app

Expected behavior

Should render appropriate image using image tags and the href attribute of img tag set to the image url

Actual behavior

Rendering plain text. Not rendering appropriate img tags

Runtime

No response

Package manager

npm 8

OS

Windows

Build and bundle tools

Parcel

[ChristianMurphy]

Welcome @agrajgarg! 👋
Nothing has changed in react-markdown recently.

A few things which come to mind.

1. the examples you give of images, aren't valid, image syntax doesn't allow spaces between ! and [ or between ] and (
2. Your regex appears to turn the parts of image syntax () and [] into latex formulas instead

This doesn't appear to be a bug in react-markdown, you're welcome to ask follow up question in https://github.com/orgs/remarkjs/discussions, I'd recommend including a minimal reproducible example based off https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite