feat: allows passing configuration of intersection parameters to control when a code block is highlighted

Author: yanceyy

README.md

@@ -1,4 +1,3 @@
-
 Enhance your React-Notion-X projects with a versatile code block component.
 This component offers out-of-the-box support for multiple programming languages and automatically adapts to light and dark themes,
 powered by [Shiki](https://github.com/shikijs/shiki).
@@ -28,7 +27,7 @@ To use the component, import Code from the package and include it in your Notion
 
 ```tsx
 import { Code } from "react-notion-x-code-block";
-import {NotionRenderer} from "react-notion-x";
+import { NotionRenderer } from "react-notion-x";
 
 <NotionRenderer
   // ...
@@ -76,7 +75,7 @@ And then import it to the page:
 
 ```tsx
 import { Code } from "react-notion-x-code-block";
-import {NotionRenderer} from "react-notion-x";
+import { NotionRenderer } from "react-notion-x";
 
 import "./style.css";
 
@@ -89,9 +88,11 @@ import "./style.css";
 ```
 
 ### Personalization settings
-Since `NotionRenderer` will only accept react components as props, we need to wrapper `Code` component and set specific settings. 
+
+Since `NotionRenderer` will only accept react components as props, we need to wrapper `Code` component and set specific settings.
 
 **Specific theme**
+
 ```tsx
 import { type CodeBlock, ExtendedRecordMap } from "notion-types";
 import { Code } from "react-notion-x-code-block";
@@ -116,26 +117,22 @@ import { type CodeBlock, ExtendedRecordMap } from "notion-types";
 import { Code } from "react-notion-x-code-block";
 
 function PersonalizedCode({ block }: { block: CodeBlock }) {
-  return (
-    <Code
-      block={block}
-      showCopy={false}
-    />
-  );
+  return <Code block={block} showCopy={false} />;
 }
 ```
 
 ## API
 
-| Property        | Description                                                                | Type      | Default                                      |
-|-----------------|----------------------------------------------------------------------------| --------- | -------------------------------------------- |
-| block           | Receives render code content from `NotionRenderer`                         | CodeBlock | -                                            |
-| className       | Additional class for Code                                                  | string    | -                                            |
-| defaultLanguage | Default programming language if not specified in `block`                   | string    | typescript                                   |
-| themes          | Themes for rendering code                                                  | object    | {light: "catppuccin-latte", dark: "dracula"} |
-| showCopy        | Whether to show the copy button on the top right corner                    | boolean   | true                                         |
-| showLangLabel   | Whether to show the language type label on the top left corner             | boolean   | true                                         |
-| lazyLoading     | Whether to run highlighting rendering when a code block is within viewport | boolean   | true                                         |
+| Property                    | Description                                                                                                                     | Type      | Default                                      |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------------------------- |
+| block                       | Receives render code content from `NotionRenderer`                                                                              | CodeBlock | -                                            |
+| className                   | Additional class for Code                                                                                                       | string    | -                                            |
+| defaultLanguage             | Default programming language if not specified in `block`                                                                        | string    | typescript                                   |
+| themes                      | Themes for rendering code                                                                                                       | object    | {light: "catppuccin-latte", dark: "dracula"} |
+| IntersectionObserverOptions | Manage the conditions under which the highlighting of a code block should be triggered (Need `lazyLoading` property to be true) | object    | {rootMargin: "0px",threshold: 0.1}           |
+| showCopy                    | Whether to show the copy button on the top right corner                                                                         | boolean   | true                                         |
+| showLangLabel               | Whether to show the language type label on the top left corner                                                                  | boolean   | true                                         |
+| lazyLoading                 | Whether to run highlighting rendering when a code block is within viewport                                                      | boolean   | true                                         |
 
 ## Run the Example
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notion-x-code-block",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Enhance your React-Notion-X projects with a code block component. This component offers out-of-the-box support for multiple programming languages and automatically adapts to light and dark themes",
   "homepage": "https://react-notion-x-code-block.vercel.app",
   "type": "module",

src/code.tsx

@@ -1,21 +1,29 @@
 import { getBlockTitle } from "notion-utils";
 import { IoMdCopy } from "react-icons/io";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { cs, useNotionContext, Text } from "react-notion-x";
 import { codeToHtml } from "shiki";
-import { observerManager } from "./manager";
+import { ObserverManager, type ObserverManagerProps } from "./manager";
 import styles from "./code.module.css";
 
 import type { CodeBlock } from "notion-types";
 import type { BundledTheme } from "shiki/themes";
 
-export const Code: React.FC<{
+const _Code: React.FC<{
   block: CodeBlock;
   defaultLanguage?: string;
   className?: string;
   showCopy?: boolean;
   showLangLabel?: boolean;
   lazyRendering?: boolean;
+  IntersectionObserverOptions?: ObserverManagerProps;
   themes?: {
     light: BundledTheme;
     dark: BundledTheme;
@@ -28,6 +36,10 @@ export const Code: React.FC<{
     light: "catppuccin-latte",
     dark: "dracula"
   },
+  IntersectionObserverOptions = {
+    rootMargin: "0px",
+    threshold: 0.1
+  },
   showCopy = true,
   showLangLabel = true,
   lazyRendering = true
@@ -38,6 +50,9 @@ export const Code: React.FC<{
   const [isCopied, setIsCopied] = useState(false);
   const timer = useRef<null | number>(null);
   const codeRef = useRef<HTMLDivElement | null>(null);
+  const observerManager = useMemo(() => {
+    return ObserverManager.getInstance(IntersectionObserverOptions);
+  }, [IntersectionObserverOptions]);
 
   const renderCodeToHtml = useCallback(async () => {
     const htmlCode = await codeToHtml(content, {
@@ -52,7 +67,13 @@ export const Code: React.FC<{
     if (codeRef.current) {
       observerManager.unobserve(codeRef.current);
     }
-  }, [content, block.properties?.language, defaultLanguage, themes]);
+  }, [
+    content,
+    block.properties?.language,
+    defaultLanguage,
+    themes,
+    observerManager
+  ]);
 
   useEffect(() => {
     // if code is not null (means the highlighted codes has been rendered), we don't want to observe it again
@@ -72,7 +93,7 @@ export const Code: React.FC<{
     return () => {
       unobservedElement?.();
     };
-  }, [renderCodeToHtml, lazyRendering, code]);
+  }, [renderCodeToHtml, lazyRendering, code, observerManager]);
 
   const clickCopy = useCallback(() => {
     navigator.clipboard.writeText(content).then(() => {
@@ -114,3 +135,5 @@ export const Code: React.FC<{
     </figure>
   );
 };
+
+export const Code = memo(_Code);

src/manager.ts

@@ -1,31 +1,38 @@
 type HandlerFunction = (element: Element) => void;
+export type ObserverManagerProps = Pick<
+  IntersectionObserverInit,
+  "rootMargin" | "threshold"
+>;
+
+export class ObserverManager {
+  private static instances: Map<string, ObserverManager> = new Map();
 
-class ObserverManager {
   private observer?: IntersectionObserver;
   private handlers: Map<Element, HandlerFunction>;
 
-  constructor() {
+  static getInstance(options: ObserverManagerProps): ObserverManager {
+    const key = `${options.rootMargin}-${options.threshold}`;
+    if (!ObserverManager.instances.has(key))
+      ObserverManager.instances.set(key, new ObserverManager(options));
+    return ObserverManager.instances.get(key)!;
+  }
+
+  constructor(options: IntersectionObserverInit) {
     this.handlers = new Map();
 
     // Skip when SSR
     if (typeof window === "undefined") {
       return;
     }
 
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const handler = this.handlers.get(entry.target);
-          if (handler && entry.isIntersecting) {
-            handler(entry.target);
-          }
-        });
-      },
-      {
-        rootMargin: "0px",
-        threshold: 0.1
-      }
-    );
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const handler = this.handlers.get(entry.target);
+        if (handler && entry.isIntersecting) {
+          handler(entry.target);
+        }
+      });
+    }, options);
   }
 
   // Return unobserve callback directly
@@ -41,5 +48,3 @@ class ObserverManager {
     this.observer?.unobserve(element);
   }
 }
-
-export const observerManager = new ObserverManager();