Way to remove anchor heading links

[jeepers3327]

Is there a property to render markdown as plain elements with the insertion of github link anchor heading links as shown below

The thing that I'm referring to is the link icon near the text content of the markdown previewer.

I have a working solution already but just want to ask the dev for insight or comment on this.

 <MarkdownRenderer
              allowElement={(el) => {
                const cn = el.properties?.class as string;

                return !(cn && cn.includes('anchor'));
              }}
              source={str}
              mb="4"
            />

Thank you.

[jaywcjlove]

@jeepers3327 https://codesandbox.io/embed/react-markdown-preview-uiwjs-react-markdown-preview-issues-188-bxvw39?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import { createRoot } from "react-dom/client";
import MarkdownPreview from "@uiw/react-markdown-preview";
import rehypeRewrite from "rehype-rewrite";

const source = `## Markdown Preview

> todo: React component preview markdown text.

## Title
`;

const rehypePlugins = [
  rehypeRewrite,
  {
    rewrite: (node, index, parent) => {
      if (
        node.tagName === "a" &&
        parent &&
        /^h(1|2|3|4|5|6)/.test(parent.tagName)
      ) {
        parent.children = [parent.children[1]];
      }
    }
  }
];

function Demo() {
  return (
      <div data-color-mode="light">
        <MarkdownPreview rehypePlugins={[rehypePlugins]} source={source} />
      </div>
  );
}

[jeepers3327]

Is there a TS version of it? Having a hard time using it with TS.

What I did is just mark those arguments of rewrite as any.

const rehypePlugins = [
  rehypeRewrite,
  {
    rewrite: (node: any, index: any, parent: any) => {
      if (
        node.tagName === "a" &&
        parent &&
        /^h(1|2|3|4|5|6)/.test(parent.tagName)
      ) {
        parent.children = [parent.children[1]];
      }
    }
  }
];

 <MarkdownRenderer
       rehypePlugins={[rehypePlugins]}
       source={str}
 />

[jaywcjlove]

@jeepers3327

import rehypeRewrite, { RehypeRewriteOptions } from "rehype-rewrite";
import { PluggableList } from 'unified'

const rehypePlugins: PluggableList = [
  [rehypeRewrite, {
      rewrite: (node, index, parent) => {
        if (
          node.type === 'element' &&
          node.tagName === "a" &&
          parent && 
          parent.type === 'element' &&
          /^h(1|2|3|4|5|6)/.test(parent.tagName)
        ) {
          parent.children = [parent.children[1]];
        }
      }
  } as RehypeRewriteOptions]
];

<MarkdownRenderer
   rehypePlugins={[rehypePlugins]}
   source={str}
/>

[jaywcjlove]

@jeepers3327

https://github.com/uiwjs/react-markdown-preview/blob/f4e337647df8d53c3a78d91f37c59a50e18a3ee2/src/index.tsx#L53-L65

[jeepers3327]

Closing this one. Thank you