How can I link and image using markdown-to-jsx

66 Views Asked by At

I am using markdown-to-jsx library. I am working to link an image to a page.

I realized the latest version of markdown-to-jsx, does not work when creating an image link. but works with version 7.1.4, above this, the logic doesn't work as required.

here is the sandbox link to this, I am using version 7.1.4 and we get the image, and acts as a link as required, if you change to latest version, it doesn't work : https://codesandbox.io/p/sandbox/markdown-to-jsx-example-forked-ywpvpr?file=%2Fsrc%2Findex.js

for code view :

here is index.js

import React from "react";
import ReactDOM from "react-dom";

import Markdown from "markdown-to-jsx";

import { Header, Text } from "./styles";

const LinkRenderer = (props) => {
  return (
    <a href={props.href} target={"_blank"} rel="noreferrer">
      {props.children}
    </a>
  );
};

const markdown = `
# Header

<Text>Hello world!</Text>
[![sandbox.png](https://nordicapis.com/wp-content/uploads/API-Sandbox-best-practices.png)](https://playcode.io/)

Without writing a single line of code. 
**With emails included**. For free.
`;

function App() {
  return (
    <div>
      <Markdown
        options={{
          overrides: {
            h1: { component: Header },
            Text: { component: Text },
          },
        }}
      >
        {markdown}
      </Markdown>
      <div
        dangerouslySetInnerHTML={{
          __html: "<script>alert(document.cookie);</script>",
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

in package.json

...
"markdown-to-jsx": "7.1.4",
...

change to latest version :

...
"markdown-to-jsx": "latest",
...

doesn't work as expected.

Is there a different logic for handling this? or would this be a bug?

0

There are 0 best solutions below