wip

example/Doc.tsx

@@ -55,8 +55,6 @@ const Doc = () => {
     render();
   }, [doc, lazyImages, safeMode]);
 
-  console.log(Content, Toc);
-
   return (
     <div className="rdmd-demo--display">
       <section id="hub-content">
@@ -65,13 +63,13 @@ const Doc = () => {
           <RenderError error={error}>
             <div className="markdown-body">{Content && <Content />}</div>
           </RenderError>
+          {Toc && (
+            <div className="content-toc">
+              <Toc />
+            </div>
+          )}
         </div>
       </section>
-      {Toc && (
-        <section className="content-toc">
-          <Toc />
-        </section>
-      )}
     </div>
   );
 };

index.tsx

@@ -5,7 +5,7 @@ import remarkMdx from 'remark-mdx';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkRehype from 'remark-rehype';
 import remarkGfm from 'remark-gfm';
-import remarkSlug from 'remark-slug';
+import rehypeSlug from 'rehype-slug';
 import { VFile } from 'vfile';
 
 import { createProcessor, compileSync, run as mdxRun, RunOptions } from '@mdx-js/mdx';
@@ -18,10 +18,9 @@ import { GlossaryContext } from './components/GlossaryItem';
 import BaseUrlContext from './contexts/BaseUrl';
 import { options } from './options';
 
-import transformers, { readmeComponentsTransformer, remarkToc } from './processor/transform';
+import transformers, { readmeComponentsTransformer, rehypeToc } from './processor/transform';
 import compilers from './processor/compile';
 import MdxSyntaxError from './errors/mdx-syntax-error';
-import { MDXContent } from 'mdx/types';
 
 const unimplemented = debug('mdx:unimplemented');
 
@@ -69,7 +68,8 @@ const makeUseMDXComponents = (more: RunOpts['components']): (() => ComponentOpts
   return () => components;
 };
 
-const remarkPlugins = [remarkFrontmatter, remarkGfm, remarkSlug, remarkToc, ...transformers];
+const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transformers];
+const rehypePlugins = [rehypeSlug, rehypeToc];
 
 export const reactProcessor = (opts = {}) => {
   return createProcessor({ remarkPlugins, ...opts });
@@ -82,6 +82,7 @@ export const compile = (text: string, opts = {}) => {
         outputFormat: 'function-body',
         providerImportSource: '#',
         remarkPlugins,
+        rehypePlugins,
         ...opts,
       });
     } catch (error) {
@@ -90,6 +91,7 @@ export const compile = (text: string, opts = {}) => {
   };
 
   const vfile = exec(text);
+  console.log(vfile.data.toc);
   if (vfile.data.toc) {
     const toc = mdx(vfile.data.toc);
     vfile.data.toc = toc ? exec(toc) : null;

package.json

@@ -37,10 +37,10 @@
     "lodash.escape": "^4.0.1",
     "lodash.kebabcase": "^4.1.1",
     "mdast-util-find-and-replace": "^3.0.1",
-    "mdast-util-toc": "^7.0.1",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
+    "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
@@ -80,6 +80,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14",
     "@testing-library/user-event": "^14.5.2",
+    "@types/hast": "^3.0.4",
     "@types/jest": "^29.5.12",
     "@types/mdast": "^4.0.3",
     "@types/mdx": "^2.0.12",

processor/transform/index.ts

@@ -3,8 +3,8 @@ import codeTabsTransfromer from './code-tabs';
 import embedTransformer from './embeds';
 import gemojiTransformer from './gemoji+';
 import readmeComponentsTransformer from './readme-components';
-import remarkToc from './remark-toc';
+import rehypeToc from './rehype-toc';
 
-export { readmeComponentsTransformer, remarkToc };
+export { readmeComponentsTransformer, rehypeToc };
 
 export default [calloutTransformer, codeTabsTransfromer, embedTransformer, gemojiTransformer];