The anchor link

[dhj0326]

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

[jaywcjlove]

@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
          }
        }
      }]
    ],
  }}
/>

[dhj0326]

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?

[jaywcjlove]

@dhj99116 Provide an example via codesandbox.io?

https://github.com/uiwjs/react-md-editor/blob/e246e1c294ad73f6071092a6a7e310907e75ad48/package.json#L70

[dhj0326]

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

[dhj0326]

type“ComponentType<MDEditorProps & RefAttributes>”there is no attribute on “Markdown”。 type“ComponentClass<MDEditorProps & RefAttributes, any>”there is no attribute on “Markdown”。

[dhj0326]

I was just wondering how to use its preview mode in Next that MDEditor.Markdown I hope you can answer. Thank you very much

[jaywcjlove]

https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark

@dhj99116 Can't see your code don't know what your error is.

@uiw/react-markdown-preview

[dhj0326]

() => 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

[jaywcjlove]

@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

[dhj0326]

I'm running it in TS

[jaywcjlove]

Please use https://codesandbox.io to provide an example, otherwise I won't be able to help you out. @dhj99116

[dhj0326]

https://codesandbox.io/s/dazzling-williamson-13nbjh?file=/src/App.tsx

[jaywcjlove]

@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>
  );
}

[dhj0326]

When I click on the page, I get an error

[jaywcjlove]

New problem, please rewrite the issue with error details, or provide an example. @dhj99116