fix(projects): load content dynamically and refresh table of contents

The previous way of handling content import was causing issue. So I use
dynamic import instead. However, the table of contents was not
displayed because the wrapper is first empty. I added a mutation
observer to refresh the table of contents when the body is updated.

1 files changed, 12 insertions, 1 deletions

diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
index 4646b4a..f7ab452 100644
--- a/src/utils/hooks/use-headings-tree.tsx
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -1,5 +1,6 @@
 import { slugify } from '@utils/helpers/strings';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMutationObserver } from './use-mutation-observer';
 
 export type Heading = {
   /**
@@ -32,13 +33,23 @@ const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
     useState<NodeListOf<HTMLHeadingElement>>();
   const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
 
-  useEffect(() => {
+  const getHeadingsInWrapper = useCallback(() => {
     const query = depths.join(', ');
     const result: NodeListOf<HTMLHeadingElement> =
       wrapper.querySelectorAll(query);
     setAllHeadings(result);
   }, [depths, wrapper]);
 
+  useEffect(() => {
+    getHeadingsInWrapper();
+  }, [getHeadingsInWrapper]);
+
+  useMutationObserver({
+    callback: getHeadingsInWrapper,
+    options: { childList: true },
+    nodeOrSelector: wrapper,
+  });
+
   const getDepth = useCallback(
     /**
      * Retrieve the heading element depth.