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

Intercept hyperlinks on click #514

Open ThatCanadianGuy opened 1 year ago

ThatCanadianGuy commented 1 year ago

Similar to issue #445 in which the question was to open in a new tab, I'd like to intercept the link click entirely. Our app redirects to a native control for the anchors. Is there any exposed function or way to basically preventDefault and get an event to trigger when a hyperlink is clicked so the listener can propagate it in a different way?

jaywcjlove commented 1 year ago

@ThatCanadianGuy

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";

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,
+                href:"javascript:void(0)"
              };
            }
          }
        }}
        height={200}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

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