[ENG-644] Improvements for the node menu popover (#310)

* improvements

* address PR comments

* pr comments

Author: trangdoan982

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -41,6 +41,14 @@ import {
   findBlockElementFromSelection,
 } from "~/utils/renderTextSelectionPopup";
 
+const debounce = (fn: () => void, delay = 250) => {
+  let timeout: number;
+  return () => {
+    clearTimeout(timeout);
+    timeout = window.setTimeout(fn, delay);
+  };
+};
+
 export const initObservers = async ({
   onloadArgs,
 }: {
@@ -247,14 +255,11 @@ export const initObservers = async ({
     }
   };
 
-  const nodeCreationPopoverListener = () => {
+  const nodeCreationPopoverListener = debounce(() => {
     const isTextSelectionPopupEnabled =
       onloadArgs.extensionAPI.settings.get("text-selection-popup") !== false;
 
-    if (!isTextSelectionPopupEnabled) {
-      removeTextSelectionPopup();
-      return;
-    }
+    if (!isTextSelectionPopupEnabled) return;
 
     const selection = window.getSelection();
 
@@ -275,6 +280,7 @@ export const initObservers = async ({
     if (blockElement) {
       const textarea = blockElement.querySelector("textarea");
       if (!textarea) return;
+
       renderTextSelectionPopup({
         extensionAPI: onloadArgs.extensionAPI,
         blockElement,
@@ -283,7 +289,7 @@ export const initObservers = async ({
     } else {
       removeTextSelectionPopup();
     }
-  };
+  }, 150);
 
   return {
     observers: [

apps/roam/src/utils/renderTextSelectionPopup.tsx

@@ -6,6 +6,11 @@ import { OnloadArgs } from "roamjs-components/types";
 
 let currentPopupContainer: HTMLDivElement | null = null;
 
+export const getCurrentPopupContainer = () => currentPopupContainer;
+export const setCurrentPopupContainer = (container: HTMLDivElement | null) => {
+  currentPopupContainer = container;
+};
+
 export const findBlockElementFromSelection = (): Element | null => {
   const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) return null;
@@ -65,9 +70,10 @@ export const renderTextSelectionPopup = ({
 };
 
 export const removeTextSelectionPopup = () => {
-  const container = document.getElementById("discourse-text-selection-popup");
+  const container = getCurrentPopupContainer();
   if (container) {
     ReactDOM.unmountComponentAtNode(container);
     container.remove();
+    setCurrentPopupContainer(null);
   }
 };