diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index 46f8ea807..ab09b5fc6 100644 --- a/packages/editor/src/index.ts +++ b/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>( () => ({ enableCoreExtensions: false, diff --git a/packages/editor/src/toolbar/components/dropdown.tsx b/packages/editor/src/toolbar/components/dropdown.tsx index e64acfb9b..daa332316 100644 --- a/packages/editor/src/toolbar/components/dropdown.tsx +++ b/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 . */ -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, diff --git a/packages/editor/src/toolbar/components/more-tools.tsx b/packages/editor/src/toolbar/components/more-tools.tsx index 117ef0015..f5e6e2e74 100644 --- a/packages/editor/src/toolbar/components/more-tools.tsx +++ b/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 . */ -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(null); const [isOpen, setIsOpen] = useState(autoOpen || false); const onClosed = useCallback(() => setIsOpen(false), [setIsOpen]); + useLayoutEffect(() => () => setIsOpen(false), []); return ( <> diff --git a/packages/editor/src/toolbar/tools/lists.tsx b/packages/editor/src/toolbar/tools/lists.tsx index 9698a784a..54ef07bb9 100644 --- a/packages/editor/src/toolbar/tools/lists.tsx +++ b/packages/editor/src/toolbar/tools/lists.tsx @@ -20,7 +20,7 @@ along with this program. If not, see . 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( const [isOpen, setIsOpen] = useState(false); const buttonRef = useRef(null); + useLayoutEffect(() => () => setIsOpen(false), []); + return (