From 7cf8b9fa922f1c386a3d987d3211999f3e7833f2 Mon Sep 17 00:00:00 2001
From: zbeyens <zbeyens@udecode.dev>
Date: Mon, 11 Nov 2024 15:45:47 +0100
Subject: [PATCH] fix

---
 packages/heading/src/react/hooks/useTocSideBar.ts | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/heading/src/react/hooks/useTocSideBar.ts b/packages/heading/src/react/hooks/useTocSideBar.ts
index 30d8331b84..df275ca483 100644
--- a/packages/heading/src/react/hooks/useTocSideBar.ts
+++ b/packages/heading/src/react/hooks/useTocSideBar.ts
@@ -3,6 +3,7 @@ import React from 'react';
 import { getNode } from '@udecode/plate-common';
 import {
   toDOMNode,
+  useEditorContainerRef,
   useEditorPlugin,
   useEditorSelector,
 } from '@udecode/plate-common/react';
@@ -20,17 +21,9 @@ export const useTocSideBarState = ({
   rootMargin = '0px 0px 0px 0px',
   topOffset = 0,
 }: TocSideBarProps) => {
-  const { editor, getOptions } = useEditorPlugin(TocPlugin);
-  const { scrollContainerSelector } = getOptions();
+  const { editor } = useEditorPlugin(TocPlugin);
   const headingList = useEditorSelector(getHeadingList, []);
-  const scrollContainerRef = React.useRef<HTMLDivElement | null>(null);
-
-  React.useEffect(() => {
-    scrollContainerRef.current = document.querySelector(
-      scrollContainerSelector ?? `#${editor.uid}`
-    )!;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const containerRef = useEditorContainerRef();
 
   const tocRef = React.useRef<HTMLElement>(null);
 
@@ -39,7 +32,7 @@ export const useTocSideBarState = ({
   const [isObserve, setIsObserve] = React.useState(open);
 
   const { activeContentId, onContentScroll } = useContentController({
-    containerRef: scrollContainerRef,
+    containerRef,
     isObserve,
     rootMargin,
     topOffset,