From 9611cd1e739541869d9b96c21df7de90db7854e7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 21 Nov 2025 12:49:30 +0530
Subject: [PATCH] [WIKI-786] refactor: bubble menu #8138

---
 apps/web/ce/hooks/use-editor-flagging.ts      |  1 +
 .../components/editor/document/editor.tsx     |  3 ++-
 .../components/editor/lite-text/editor.tsx    |  3 ++-
 .../components/editor/rich-text/editor.tsx    |  3 ++-
 .../editor/sticky-editor/editor.tsx           |  3 ++-
 .../components/pages/editor/editor-body.tsx   |  1 +
 .../editors/document/collaborative-editor.tsx |  1 +
 .../components/editors/document/editor.tsx    |  1 +
 .../editors/document/page-renderer.tsx        | 27 ++++++++++++++-----
 .../components/editors/rich-text/editor.tsx   |  9 ++++++-
 .../components/menus/bubble-menu/root.tsx     |  5 +++-
 11 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/apps/web/ce/hooks/use-editor-flagging.ts b/apps/web/ce/hooks/use-editor-flagging.ts
index 731c6715e..2c8766c95 100644
--- a/apps/web/ce/hooks/use-editor-flagging.ts
+++ b/apps/web/ce/hooks/use-editor-flagging.ts
@@ -19,6 +19,7 @@ export type TEditorFlaggingHookReturnType = {
 
 export type TEditorFlaggingHookProps = {
   workspaceSlug: string;
+  projectId?: string;
   storeType?: EPageStoreType;
 };
 
diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx
index e6a5f1895..383325c51 100644
--- a/apps/web/core/components/editor/document/editor.tsx
+++ b/apps/web/core/components/editor/document/editor.tsx
@@ -56,7 +56,8 @@ export const DocumentEditor = forwardRef(function DocumentEditor(
   });
   // editor flaggings
   const { document: documentEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // use editor mention
   const { fetchMentions } = useEditorMention({
diff --git a/apps/web/core/components/editor/lite-text/editor.tsx b/apps/web/core/components/editor/lite-text/editor.tsx
index b260fce72..13e2c018e 100644
--- a/apps/web/core/components/editor/lite-text/editor.tsx
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@@ -81,7 +81,8 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
   const [editorRef, setEditorRef] = useState<EditorRefApi | null>(null);
   // editor flaggings
   const { liteText: liteTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // store hooks
   const { getUserDetails } = useMember();
diff --git a/apps/web/core/components/editor/rich-text/editor.tsx b/apps/web/core/components/editor/rich-text/editor.tsx
index 4164ef643..e3cb6ba61 100644
--- a/apps/web/core/components/editor/rich-text/editor.tsx
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@@ -50,7 +50,8 @@ export const RichTextEditor = forwardRef(function RichTextEditor(
   const { getUserDetails } = useMember();
   // editor flaggings
   const { richText: richTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // use editor mention
   const { fetchMentions } = useEditorMention({
diff --git a/apps/web/core/components/editor/sticky-editor/editor.tsx b/apps/web/core/components/editor/sticky-editor/editor.tsx
index 0f927731d..43706bb70 100644
--- a/apps/web/core/components/editor/sticky-editor/editor.tsx
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@@ -59,7 +59,8 @@ export const StickyEditor = React.forwardRef(function StickyEditor(
   const [isFocused, setIsFocused] = useState(showToolbarInitially);
   // editor flaggings
   const { liteText: liteTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // parse content
   const { getEditorMetaData } = useParseEditorContent({
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
index 3ff6055a4..cd3ce6535 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -101,6 +101,7 @@ export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   // editor flaggings
   const { document: documentEditorExtensions } = useEditorFlagging({
     workspaceSlug,
+    projectId,
     storeType,
   });
   // parse content
diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index 6bb7f15c4..6c0833bee 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -95,6 +95,7 @@ function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
         documentLoaderClassName={documentLoaderClassName}
         editor={editor}
         editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
+        extendedEditorProps={extendedEditorProps}
         id={id}
         isTouchDevice={!!isTouchDevice}
         isLoading={!hasServerSynced && !hasServerConnectionFailed}
diff --git a/packages/editor/src/core/components/editors/document/editor.tsx b/packages/editor/src/core/components/editors/document/editor.tsx
index c2001902b..9e30e8772 100644
--- a/packages/editor/src/core/components/editors/document/editor.tsx
+++ b/packages/editor/src/core/components/editors/document/editor.tsx
@@ -93,6 +93,7 @@ function DocumentEditor(props: IDocumentEditorProps) {
       displayConfig={displayConfig}
       editor={editor}
       editorContainerClassName={cn(editorContainerClassName, "document-editor")}
+      extendedEditorProps={extendedEditorProps}
       id={id}
       flaggedExtensions={flaggedExtensions}
       disabledExtensions={disabledExtensions}
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index 7b99b5207..26a69e457 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -5,38 +5,46 @@ import { cn } from "@plane/utils";
 import { DocumentContentLoader, EditorContainer, EditorContentWrapper } from "@/components/editors";
 import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
 // types
-import type { ICollaborativeDocumentEditorPropsExtended, IEditorProps, TAIHandler, TDisplayConfig } from "@/types";
+import type {
+  ICollaborativeDocumentEditorPropsExtended,
+  IEditorProps,
+  IEditorPropsExtended,
+  TAIHandler,
+  TDisplayConfig,
+} from "@/types";
 
 type Props = {
   aiHandler?: TAIHandler;
   bubbleMenuEnabled: boolean;
+  disabledExtensions: IEditorProps["disabledExtensions"];
   displayConfig: TDisplayConfig;
   documentLoaderClassName?: string;
   editor: Editor;
   editorContainerClassName: string;
   extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: IEditorProps["flaggedExtensions"];
   id: string;
   isLoading?: boolean;
   isTouchDevice: boolean;
   tabIndex?: number;
-  flaggedExtensions: IEditorProps["flaggedExtensions"];
-  disabledExtensions: IEditorProps["disabledExtensions"];
 };
 
 export function PageRenderer(props: Props) {
   const {
     aiHandler,
     bubbleMenuEnabled,
+    disabledExtensions,
     displayConfig,
     documentLoaderClassName,
     editor,
     editorContainerClassName,
+    extendedEditorProps,
+    flaggedExtensions,
     id,
     isLoading,
     isTouchDevice,
     tabIndex,
-    flaggedExtensions,
-    disabledExtensions,
   } = props;
 
   return (
@@ -58,7 +66,14 @@ export function PageRenderer(props: Props) {
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
           {editor.isEditable && !isTouchDevice && (
             <div>
-              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
+              {bubbleMenuEnabled && (
+                <EditorBubbleMenu
+                  disabledExtensions={disabledExtensions}
+                  editor={editor}
+                  extendedEditorProps={extendedEditorProps}
+                  flaggedExtensions={flaggedExtensions}
+                />
+              )}
               <BlockMenu
                 editor={editor}
                 flaggedExtensions={flaggedExtensions}
diff --git a/packages/editor/src/core/components/editors/rich-text/editor.tsx b/packages/editor/src/core/components/editors/rich-text/editor.tsx
index 5d99ed3b0..557ab7660 100644
--- a/packages/editor/src/core/components/editors/rich-text/editor.tsx
+++ b/packages/editor/src/core/components/editors/rich-text/editor.tsx
@@ -43,7 +43,14 @@ function RichTextEditor(props: IRichTextEditorProps) {
     <EditorWrapper {...props} extensions={getExtensions()}>
       {(editor) => (
         <>
-          {editor && bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
+          {editor && bubbleMenuEnabled && (
+            <EditorBubbleMenu
+              disabledExtensions={disabledExtensions}
+              editor={editor}
+              extendedEditorProps={extendedEditorProps}
+              flaggedExtensions={flaggedExtensions}
+            />
+          )}
           <BlockMenu
             editor={editor}
             flaggedExtensions={flaggedExtensions}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
index c4e7dc87d..3661f6693 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -26,7 +26,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/helpers";
 // types
-import type { TEditorCommands } from "@/types";
+import type { IEditorPropsExtended, TEditorCommands, TExtensions } from "@/types";
 // local imports
 import { TextAlignmentSelector } from "./alignment-selector";
 import { BubbleMenuLinkSelector } from "./link-selector";
@@ -61,7 +61,10 @@ export type EditorStateType = {
 };
 
 type Props = {
+  disabledExtensions: TExtensions[];
   editor: Editor;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: TExtensions[];
 };
 
 export function EditorBubbleMenu(props: Props) {