Fix closure issue & Exposing behavior parameters

19890843006 · Jun 12, 2024 · 1d08685 · 1d08685
1 parent af4e8f6
commit 1d08685
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/packages/heading/src/toc/hooks/useTocElement.ts b/packages/heading/src/toc/hooks/useTocElement.ts
@@ -39,16 +39,16 @@ export const useTocElementState = ({
   }, [editor]);
 
   const onContentScroll = React.useCallback(
-    (el: HTMLElement, id: string) => {
+    (el: HTMLElement, id: string, behavior: ScrollBehavior = 'instant') => {
       if (!containerRef.current) return;
       if (isScroll) {
         containerRef.current?.scrollTo({
-          behavior: 'instant',
+          behavior,
           top: heightToTop(el, containerRef as any) - topOffset,
         });
       } else {
         const top = heightToTop(el) - topOffset;
-        window.scrollTo({ behavior: 'instant', top });
+        window.scrollTo({ behavior, top });
       }
 
       setTimeout(() => {
@@ -70,7 +70,8 @@ export const useTocElement = ({
     props: {
       onClick: (
         e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>,
-        item: HeadingList
+        item: HeadingList,
+        behavior: ScrollBehavior
       ) => {
         e.preventDefault();
         const { id, path } = item;
@@ -82,7 +83,7 @@ export const useTocElement = ({
 
         if (!el) return;
 
-        onContentScroll(el, id);
+        onContentScroll(el, id, behavior);
       },
     },
   };

diff --git a/packages/heading/src/toc/tocSideBar/useContentController.ts b/packages/heading/src/toc/tocSideBar/useContentController.ts
@@ -18,10 +18,14 @@ export const useContentController = ({
   const editor = useEditorRef();
   const [editorContentRef, setEditorContentRef] = React.useState(containerRef);
 
+  const isScrollRef = React.useRef(false);
+
   const isScroll =
     (editorContentRef.current?.scrollHeight || 0) >
     (editorContentRef.current?.clientHeight || 0);
 
+  isScrollRef.current = isScroll;
+
   const scrollContainer = React.useMemo(() => {
     if (typeof window !== 'object') return;
 
@@ -41,18 +45,26 @@ export const useContentController = ({
 
   const [activeContentId, setActiveContentId] = React.useState(activeId);
 
-  const onContentScroll = (el: HTMLElement, id: string) => {
+  const onContentScroll = ({
+    behavior = 'instant',
+    el,
+    id,
+  }: {
+    behavior?: ScrollBehavior;
+    el: HTMLElement;
+    id: string;
+  }) => {
     setActiveContentId(id);
 
-    if (isScroll) {
+    if (isScrollRef.current) {
       editorContentRef.current?.scrollTo({
-        behavior: 'instant',
+        behavior,
         top: heightToTop(el, editorContentRef) - topOffset,
       });
     } else {
       const top = heightToTop(el) - topOffset;
       // Note: if behavior === smooth,scrolling the toc then click the title immediately will scroll to the wrong position.It should be a chrome bug.
-      window.scrollTo({ behavior: 'instant', top });
+      window.scrollTo({ behavior, top });
     }
 
     addSelectedRow(editor, id);

diff --git a/packages/heading/src/toc/tocSideBar/useTocSideBarState.ts b/packages/heading/src/toc/tocSideBar/useTocSideBarState.ts
@@ -81,7 +81,8 @@ export const useTocSideBar = ({
   const onConentClick = React.useCallback(
     (
       e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>,
-      item: HeadingList
+      item: HeadingList,
+      behavior?: ScrollBehavior
     ) => {
       e.preventDefault();
       const { id, path } = item;
@@ -93,7 +94,7 @@ export const useTocSideBar = ({
 
       if (!el) return;
 
-      onContentScroll(el, id);
+      onContentScroll({ behavior, el, id });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []