Closed dhj0326 closed 2 years ago
@dhj99116 You can change anything with plugin rehype-rewrite.
Here is an example for reference: https://github.com/jaywcjlove/markdown-to-html-cli/blob/c9d54f13402dbe6fd07d1e0012548a880e80577d/packages/cli/src/create.ts#L43-L78
import rehypeRewrite from 'rehype-rewrite';
<MDEditor
previewOptions={{
rehypePlugins: [
[rehypeRewrite, {
rewrite: (node, index, parent) => {
if(node.type == 'element' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
// collect here
}
}
}]
],
}}
/>
I used it in next. Js, and after configuring it according to your example, I couldn't find MDEditor.Markdown Is there a way to solve this problem?
@dhj99116 Provide an example via codesandbox.io?
https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?from-embed=&file=/pages/index.js:420-428 I wrote as follows, but misstated the absence of this property when using MDEditor. Markdown
type“ComponentType<MDEditorProps & RefAttributes
I was just wondering how to use its preview mode in Next that MDEditor.Markdown I hope you can answer. Thank you very much
@dhj99116 Can't see your code don't know what your error is.
@uiw/react-markdown-preview
() => import("@uiw/react-markdown-preview") I can do it this way () => import("@uiw/react-markdown-preview").then((mod)=>{return mode.default}) This will give you an error
@dhj99116 :(
Looking at the example there are no errors. https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark
I'm running it in TS
Please use https://codesandbox.io to provide an example, otherwise I won't be able to help you out. @dhj99116
@dhj99116 Example: https://codesandbox.io/embed/elegant-curie-m4x8ow?fontsize=14&hidenavigation=1&theme=dark
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";
import { MDEditorProps } from "@uiw/react-md-editor";
import { MarkdownPreviewProps } from "@uiw/react-markdown-preview";
const MDEditor = dynamic<MDEditorProps>(
() => import("@uiw/react-md-editor").then((mod) => mod.default),
{ ssr: false }
);
const EditerMarkdown = dynamic<MarkdownPreviewProps>(
() =>
import("@uiw/react-md-editor").then((mod) => {
return mod.default.Markdown;
}),
{ ssr: false }
);
const Markdown = dynamic<MarkdownPreviewProps>(
() => import("@uiw/react-markdown-preview").then((mod) => mod.default),
{ ssr: false }
);
export default function App() {
const [value, setValue] = useState("**Hello world!!!**");
return (
<div data-color-mode="dark">
<MDEditor value={value} onChange={(val = "") => setValue(val)} />
<div style={{ paddingTop: 50 }}>
<Markdown source={value} />
</div>
<EditerMarkdown source={value} />
</div>
);
}
When I click on the page, I get an error
New problem, please rewrite the issue with error details, or provide an example. @dhj99116
Is there a way to extract all the titles and make them into anchor links
For example, IF I extract all the titles and put them on the left, then clicking on the markdown content on the right will jump to the corresponding anchor point