custom event scroll Item

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -87,6 +87,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const [isOpen, setIsOpen] = useState(_isOpen);
   const [isNewPageInputShown, setNewPageInputShown] = useState(false);
   const [shouldHide, setShouldHide] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
   // const [isRenameInputShown, setRenameInputShown] = useState(false);
 
   const { data, mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
@@ -318,6 +319,13 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     return null;
   };
 
+  useEffect(() => {
+    if (!isScrolled && page.isTarget) {
+      document.dispatchEvent(new CustomEvent('targetItemRendered'));
+      setIsScrolled(true);
+    }
+  }, [isScrolled, page.isTarget]);
+
   // didMount
   useEffect(() => {
     if (hasChildren()) setIsOpen(true);

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -90,22 +90,12 @@ const renderByInitialNode = (
 // --- Auto scroll related vars and util ---
 
 const SCROLL_OFFSET_TOP = 150; // approximate height of (navigation + page tree's header + some space)
-const MUTATION_OBSERVER_CONFIG = { childList: true, subtree: true };
 
-const mutationObserverCallback = (records: MutationRecord[], mutationObserver: MutationObserver) => {
+const scrollTargetItem = () => {
   const scrollElement = document.getElementById('grw-sidebar-contents-scroll-target');
-  if (scrollElement != null) {
-    for (let i = 0; i < records.length; i++) {
-      const elem = records[i].target as HTMLElement;
-      const target = document.getElementById('grw-pagetree-is-target');
-      if (target != null) {
-        if (elem.contains(target)) {
-          smoothScrollIntoView(target, SCROLL_OFFSET_TOP, scrollElement);
-          mutationObserver.disconnect();
-          return;
-        }
-      }
-    }
+  const target = document.getElementById('grw-pagetree-is-target');
+  if (scrollElement != null && target != null) {
+    smoothScrollIntoView(target, SCROLL_OFFSET_TOP, scrollElement);
   }
 };
 // --- end ---
@@ -128,18 +118,12 @@ const ItemsTree: FC<ItemsTreeProps> = (props: ItemsTreeProps) => {
   const { open: openRenameModal } = usePageRenameModal();
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  // ***************************  Auto Scroll  ***************************
-
   useEffect(() => {
-    const elementToObserve = document.getElementsByClassName('grw-pagetree')[0];
-    if (elementToObserve != null) {
-      const observer = new MutationObserver(mutationObserverCallback);
-      observer.observe(elementToObserve, MUTATION_OBSERVER_CONFIG);
-    }
+    document.addEventListener('targetItemRendered', () => {
+      scrollTargetItem();
+    });
   }, []);
 
-  // *******************************  end  *******************************
-
   const onClickDuplicateMenuItem = (pageId: string, path: string) => {
     openDuplicateModal(pageId, path);
   };