editor: close all popups and dropdowns on switching tabs

packages/editor/src/index.ts

@@ -37,12 +37,11 @@ import TextStyle from "@tiptap/extension-text-style";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 import ListKeymap from "@tiptap/extension-list-keymap";
-import { useEffect, useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo } from "react";
 import "./extensions";
 import {
   Attachment,
   AttachmentNode,
-  AttachmentOptions,
   AttachmentType
 } from "./extensions/attachment";
 import BulletList from "./extensions/bullet-list";
@@ -157,6 +156,7 @@ const useTiptap = (
     editorProps,
     ...restOptions
   } = options;
+
   const PortalProviderAPI = usePortalProvider();
   const setIsMobile = useToolbarStore((store) => store.setIsMobile);
   const closeAllPopups = useToolbarStore((store) => store.closeAllPopups);
@@ -173,6 +173,12 @@ const useTiptap = (
     closeAllPopups();
   }, deps);
 
+  useLayoutEffect(() => {
+    return () => {
+      closeAllPopups();
+    };
+  }, [closeAllPopups]);
+
   const defaultOptions = useMemo<Partial<EditorOptions>>(
     () => ({
       enableCoreExtensions: false,

packages/editor/src/toolbar/components/dropdown.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useRef, useState } from "react";
+import { useRef, useState, useLayoutEffect } from "react";
 import { Text } from "@theme-ui/components";
 import { Icon, MenuItem, MenuPresenter } from "@notesnook/ui";
 import { Icons } from "../icons";
@@ -44,6 +44,8 @@ export function Dropdown(props: DropdownProps) {
   const isMobile = useIsMobile();
   const isBottom = toolbarLocation === "bottom";
 
+  useLayoutEffect(() => () => setIsOpen(false), []);
+
   const { isPopupOpen } = usePopupHandler({
     group,
     id,

packages/editor/src/toolbar/components/more-tools.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { PopupWrapper } from "../../components/popup-presenter";
 import { ToolButton } from "../components/tool-button";
 import { useToolbarLocation } from "../stores/toolbar-store";
@@ -41,6 +41,7 @@ export function MoreTools(props: MoreToolsProps) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(autoOpen || false);
   const onClosed = useCallback(() => setIsOpen(false), [setIsOpen]);
+  useLayoutEffect(() => () => setIsOpen(false), []);
 
   return (
     <>

packages/editor/src/toolbar/tools/lists.tsx

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ToolProps } from "../types";
 import { Box, Button, Flex } from "@theme-ui/components";
 import { IconNames } from "../icons";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState, useLayoutEffect } from "react";
 import { SplitButton } from "../components/split-button";
 import { useToolbarLocation } from "../stores/toolbar-store";
 import { getToolbarElement } from "../utils/dom";
@@ -52,6 +52,8 @@ function _ListTool<TListStyleTypes extends string>(
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
+  useLayoutEffect(() => () => setIsOpen(false), []);
+
   return (
     <SplitButton
       {...toolProps}