uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.17k stars 157 forks source link

Open hyperlinks in a new tab #445

Closed saran13raj closed 1 year ago

saran13raj commented 2 years ago

Clicking on a hyperlink in preview mode opens the link in the current tab. Is there a way to add target="_blank" to tags in markdown preview so the links are opened in a new tab?

jaywcjlove commented 2 years ago

@saran13raj example: https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-445-ly6o02?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `
[uiwjs/react-md-editor/issues/445](https://github.com/uiwjs/react-md-editor/issues/445)
`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>uiwjs/react-md-editor/issues/445</h3>
      <MDEditor
        previewOptions={{
          rehypeRewrite: (node) => {
            if (node.type === "element" && node.tagName === "a") {
              console.log(node);
              node.properties = { ...node.properties, target: "_blank" };
            }
          }
        }}
        height={200}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));