diff --git a/packages/editor/src/components/popup-presenter/index.tsx b/packages/editor/src/components/popup-presenter/index.tsx index 5465f15ca..214393404 100644 --- a/packages/editor/src/components/popup-presenter/index.tsx +++ b/packages/editor/src/components/popup-presenter/index.tsx @@ -26,15 +26,17 @@ import { import { getPopupContainer, getPopupRoot, - getToolbarElement, - unmountPopupRoot + getToolbarElement } from "../../toolbar/utils/dom.js"; import { useIsMobile, useToolbarStore } from "../../toolbar/stores/toolbar-store.js"; import React from "react"; -import { ResponsivePresenter, ResponsivePresenterProps } from "../responsive/index.js"; +import { + ResponsivePresenter, + ResponsivePresenterProps +} from "../responsive/index.js"; export type PopupWrapperProps = UsePopupHandlerOptions & { autoCloseOnUnmount?: boolean; @@ -106,11 +108,12 @@ type ShowPopupOptions = { export function showPopup(options: ShowPopupOptions) { const { popup, ...props } = options; + const root = getPopupRoot(); function hide() { - unmountPopupRoot(); + root.unmount(); } - getPopupRoot().render( + root.render( . */ -import { createRoot, Root } from "react-dom/client"; +import { createRoot } from "react-dom/client"; export function getToolbarElement() { return ( @@ -48,13 +48,9 @@ export function getEditorDOM() { getEditorContainer()) as HTMLElement; // ProseMirror } -let popupRoot: Root | undefined = undefined; export function getPopupRoot() { - if (!popupRoot) popupRoot = createRoot(getPopupContainer()); - return popupRoot; -} - -export function unmountPopupRoot() { - if (popupRoot) popupRoot.unmount(); - popupRoot = undefined; + const container = getPopupContainer(); + const div = document.createElement("div"); + container.appendChild(div); + return createRoot(div); }