[FIX]: Use Github Slugger in RichText headings (#90)

* use github slugger

* changeset

* lock

Author: justkahdri

.changeset/clever-suits-yawn.md

@@ -0,0 +1,5 @@
+---
+"basehub": patch
+---
+
+React RichText component now implements GithubSlugger to generate the headings IDs

packages/basehub/package.json

@@ -39,11 +39,11 @@
     "arg": "5.0.1",
     "dotenv-mono": "1.3.10",
     "esbuild": "0.19.2",
+    "github-slugger": "^2.0.0",
     "pusher-js": "8.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "resolve-pkg": "2.0.0",
-    "slugify": "1.6.6",
     "sonner": "1.4.3",
     "zod": "3.22.1"
   },

packages/basehub/src/react/rich-text/primitive.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import { type ReactNode } from "react";
-import slugify from "slugify";
-import { extractTextFromNode, incrementID } from "./util/heading-id";
+import GithubSlugger from 'github-slugger'
+import { extractTextFromNode } from "./util/heading-id";
 
 /**
  * TODOs
@@ -221,18 +221,13 @@ export type RichTextProps<
   >;
 };
 
-type GeneratedIDsRecord = Record<
-  number, // level
-  Array<string>
->;
-
 export const RichText = <
   CustomBlocks extends CustomBlocksBase = readonly any[],
 >(
   props: RichTextProps<CustomBlocks>
 ): ReactNode => {
   const value = props.children as Node[] | undefined;
-  const generatedIDs: GeneratedIDsRecord = [];
+  const slugger = new GithubSlugger()
 
   return (
     <>
@@ -244,7 +239,7 @@ export const RichText = <
             components={props.components}
             blocks={props.blocks}
             level={0}
-            generatedIDs={generatedIDs}
+            slugger={slugger}
           />
         );
       })}
@@ -337,14 +332,14 @@ const Node = ({
   blocks,
   parent,
   level,
-  generatedIDs,
+  slugger,
 }: {
   node: Node;
   components?: Partial<Handlers>;
   blocks?: readonly CustomBlockBase[];
   parent?: Node;
   level: number;
-  generatedIDs: GeneratedIDsRecord;
+  slugger: GithubSlugger;
 }) => {
   const children = node.content?.map((childNode, index) => {
     return (
@@ -355,7 +350,7 @@ const Node = ({
         components={components}
         blocks={blocks}
         level={level + 1}
-        generatedIDs={generatedIDs}
+        slugger={slugger}
       />
     );
   });
@@ -415,32 +410,7 @@ const Node = ({
     case "heading":
       const handlerTag = `h${node.attrs.level}` as keyof Handlers;
       handler = components?.[handlerTag] ?? defaultHandlers[handlerTag];
-
-      // initialize the array for this level
-      generatedIDs[level] = generatedIDs[level] ?? [];
-
-      function getUniqueID(id: string): string {
-        // make sure there are no collisions
-        if (id) {
-          if (generatedIDs[level]?.includes(id)) {
-            return getUniqueID(incrementID(id));
-          }
-        }
-
-        return id;
-      }
-
-      const id = getUniqueID(
-        slugify(extractTextFromNode(node), {
-          strict: true,
-          lower: true,
-          trim: true,
-        })
-      );
-
-      if (id) {
-        generatedIDs[level]?.push(id);
-      }
+      const id = slugger.slug(extractTextFromNode(node))
 
       props = { children, id } satisfies ExtractPropsForHandler<Handlers["h1"]>;
       break;

packages/basehub/src/react/rich-text/util/heading-id.ts

@@ -14,15 +14,3 @@ export function extractTextFromNode(node?: Node) {
 
   return textContent;
 }
-
-export function incrementID(id: string) {
-  // duplicates are added "-n" at the end.
-  // if the title already has a "-n" at the end, we'll need to increment it.
-  const matches = id.match(/-(\d+)$/); // Fixed regex to match "-n" format
-  if (matches?.[1] !== undefined) {
-    const number = parseInt(matches[1], 10);
-    return id.replace(/-(\d+)$/, `-${number + 1}`);
-  }
-
-  return `${id}-1`;
-}