New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Header links not working under react-router #356
Comments
I disabled it, did you show it? |
https://github.com/uiwjs/react-markdown-preview#options-props You need to write a rehype plugin |
Quick & dirty rehype plugin to restore onClick() behaviour on anchors when using import {visit} from 'unist-util-visit';
const onNode = (node) => {
if (node.tagName != 'a' || typeof node.properties?.href !== 'string') {
return;
};
const url = node.properties.href;
if (!url.startsWith('#')) return;
node.properties.onClick = (e) => {
e.preventDefault();
// Show anchor change in address bar
history.pushState({}, "", url);
// Scroll to anchor
const hash = url.replace('#', '');
const id = decodeURIComponent(hash);
const element = document.getElementById(id);
if (!element) return;
element.scrollIntoView();
};
}
export default function rehypeAnchorOnClick() {
return (tree) => {
visit(tree, 'element', onNode)
}
} To use: import rehypeAnchorOnClick from './rehypeAnchorOnClickPlugin';
...
<MDEditor.Markdown
source={value}
rehypePlugins={[[rehypeAnchorOnClick]]}
/> Note: doesn't work well with |
@strawhatgami Hello, I tried the plugin you've wrote but I have a log error telling me that Warning: Expected |
Hi
The headers are currently rendered by using anchor tags. However, and as expected, these won't work if they are under a react-router path. Is there a way to replace all anchor links in the markdown with react-router's Link tag?
The text was updated successfully, but these errors were encountered: