From 6ab9635a22d69186c8a24181ad5df7736e288577 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 17 Nov 2023 17:27:54 +0100
Subject: fix: generate an id for each headings in the page main contents

Since #be4d907 the ids was no longer addded to headings in
useHeadingsTree hook. It was a bad practice to manipulate the DOM
that way. However, I did not move the implementation elsewhere...
To fix this, I now use rehype-slug on both markdown contents and
html string coming from WordPress.
I'm not sure the dynamic imports are really useful here since the
table of contents is on almost all pages but Jest was failing with
regular import because of ESM. It is the only thing that makes the
tests functional again so... However if we want to test the
`updateContentTree` function, Jest fails for the same reason. So I
decided to not test this function. I've already spend too much time
on this issue.
Another problem: the ToC on projects page. Currently we use the ref
on the body but the page contents are imported dynamically so the
hook is executed before the contents are loaded. It makes the ToC
empty... We should refactor the pages so we can use the ref
directly on the imported contents.
---
 .../hooks/use-headings-tree/use-headings-tree.ts   | 36 +++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

(limited to 'src/utils/hooks/use-headings-tree/use-headings-tree.ts')

diff --git a/src/utils/hooks/use-headings-tree/use-headings-tree.ts b/src/utils/hooks/use-headings-tree/use-headings-tree.ts
index 6a081e7..68bdde8 100644
--- a/src/utils/hooks/use-headings-tree/use-headings-tree.ts
+++ b/src/utils/hooks/use-headings-tree/use-headings-tree.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState, type RefObject } from 'react';
+import { useState, useCallback, type RefCallback } from 'react';
 import type { HeadingLevel } from '../../../components';
 
 export type HeadingsTreeNode = {
@@ -111,17 +111,26 @@ const buildHeadingsTreeFrom = (
   return treeNodes;
 };
 
+export type UseHeadingsTreeReturn<T extends HTMLElement> = {
+  /**
+   * A callback function to set a ref.
+   */
+  ref: RefCallback<T>;
+  /**
+   * The headings tree.
+   */
+  tree: HeadingsTreeNode[];
+};
+
 /**
  * React hook to retrieve the headings tree in a document or in a given wrapper.
  *
- * @param {RefObject<T>} ref - A ref to the element where to look for headings.
  * @param {UseHeadingsTreeOptions} options - The headings tree config.
- * @returns {HeadingsTreeNode[]} The headings tree.
+ * @returns {UseHeadingsTreeReturn<T>} The headings tree and a ref callback.
  */
 export const useHeadingsTree = <T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>,
   options?: UseHeadingsTreeOptions
-): HeadingsTreeNode[] => {
+): UseHeadingsTreeReturn<T> => {
   if (
     options?.fromLevel &&
     options.toLevel &&
@@ -134,15 +143,14 @@ export const useHeadingsTree = <T extends HTMLElement = HTMLElement>(
   const [tree, setTree] = useState<HeadingsTreeNode[]>([]);
   const requestedHeadingTags = getHeadingTagsList(options);
   const query = requestedHeadingTags.join(', ');
+  const ref: RefCallback<T> = useCallback(
+    (el) => {
+      const headingNodes = el?.querySelectorAll<HTMLHeadingElement>(query);
 
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const headingNodes =
-      ref.current?.querySelectorAll<HTMLHeadingElement>(query);
-
-    if (headingNodes) setTree(buildHeadingsTreeFrom(headingNodes));
-  }, [query, ref]);
+      if (headingNodes) setTree(buildHeadingsTreeFrom(headingNodes));
+    },
+    [query]
+  );
 
-  return tree;
+  return { ref, tree };
 };
-- 
cgit v1.2.3