diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx index 8a714a6552d..94c1f8e0ad2 100644 --- a/packages/editor/src/core/components/menus/ai-menu.tsx +++ b/packages/editor/src/core/components/menus/ai-menu.tsx @@ -87,6 +87,7 @@ export const AIFeaturesMenu: React.FC = (props) => { >
{menu?.({ + isOpen: isPopupVisible, onClose: hidePopup, })}
diff --git a/packages/editor/src/core/components/menus/index.ts b/packages/editor/src/core/components/menus/index.ts index da050b6831e..ed4f4e7cc64 100644 --- a/packages/editor/src/core/components/menus/index.ts +++ b/packages/editor/src/core/components/menus/index.ts @@ -1,4 +1,4 @@ -export * from "./bubble-menu"; export * from "./ai-menu"; +export * from "./bubble-menu"; export * from "./block-menu"; export * from "./menu-items"; diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx index ccc13ed5eb0..75577c74fc6 100644 --- a/packages/editor/src/core/extensions/side-menu.tsx +++ b/packages/editor/src/core/extensions/side-menu.tsx @@ -182,7 +182,7 @@ const SideMenu = (options: SideMenuPluginProps) => { aiHandleDOMEvents?.mousemove?.(); } }, - keydown: () => hideSideMenu(), + // keydown: () => hideSideMenu(), mousewheel: () => hideSideMenu(), dragenter: (view) => { if (handlesConfig.dragDrop) { diff --git a/packages/editor/src/core/types/ai.ts b/packages/editor/src/core/types/ai.ts index f5470f51c0a..448482e6543 100644 --- a/packages/editor/src/core/types/ai.ts +++ b/packages/editor/src/core/types/ai.ts @@ -1,7 +1,8 @@ -type TMenuProps = { +export type TAIMenuProps = { + isOpen: boolean; onClose: () => void; }; export type TAIHandler = { - menu?: (props: TMenuProps) => React.ReactNode; + menu?: (props: TAIMenuProps) => React.ReactNode; }; diff --git a/web/ce/components/pages/editor/ai/menu.tsx b/web/ce/components/pages/editor/ai/menu.tsx index 7610595f73f..edbed725df9 100644 --- a/web/ce/components/pages/editor/ai/menu.tsx +++ b/web/ce/components/pages/editor/ai/menu.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { RefObject, useRef, useState } from "react"; +import React, { RefObject, useEffect, useRef, useState } from "react"; import { useParams } from "next/navigation"; import { ChevronRight, CornerDownRight, LucideIcon, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react"; // plane editor @@ -20,6 +20,7 @@ const aiService = new AIService(); type Props = { editorRef: RefObject; + isOpen: boolean; onClose: () => void; }; @@ -57,7 +58,7 @@ const TONES_LIST = [ ]; export const EditorAIMenu: React.FC = (props) => { - const { editorRef, onClose } = props; + const { editorRef, isOpen, onClose } = props; // states const [activeTask, setActiveTask] = useState(null); const [response, setResponse] = useState(undefined); @@ -126,6 +127,14 @@ export const EditorAIMenu: React.FC = (props) => { onClose(); }; + // reset on close + useEffect(() => { + if (!isOpen) { + setActiveTask(null); + setResponse(undefined); + } + }, [isOpen]); + return (
= observer((props) => { fontStyle, }; + const getAIMenu = useCallback( + ({ isOpen, onClose }: TAIMenuProps) => , + [editorRef] + ); + useEffect(() => { updateMarkings(pageDescription ?? "

"); }, [pageDescription, updateMarkings]); @@ -158,7 +164,7 @@ export const PageEditorBody: React.FC = observer((props) => { }} disabledExtensions={documentEditor} aiHandler={{ - menu: ({ onClose }) => , + menu: getAIMenu, }} /> ) : (