chore: handle settings change

1 files changed, 22 insertions, 0 deletions

diff --git a/src/utils/hooks/use-code-blocks-theme.tsx b/src/utils/hooks/use-code-blocks-theme.tsx
new file mode 100644
index 0000000..beb7b29
--- /dev/null
+++ b/src/utils/hooks/use-code-blocks-theme.tsx
@@ -0,0 +1,22 @@
+import { usePrismTheme } from '@utils/providers/prism-theme';
+import { useRouter } from 'next/router';
+import { RefObject, useEffect, useState } from 'react';
+import useIsMounted from './use-is-mounted';
+
+const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => {
+  const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>();
+  const isMounted = useIsMounted(el);
+  const { setCodeBlocks } = usePrismTheme();
+  const { asPath } = useRouter();
+
+  useEffect(() => {
+    const result = document.querySelectorAll<HTMLPreElement>('pre');
+    setPreElements(result);
+  }, [asPath]);
+
+  useEffect(() => {
+    isMounted && preElements && setCodeBlocks(preElements);
+  }, [isMounted, preElements, setCodeBlocks]);
+};
+
+export default useCodeBlocksTheme;