[WIKI-786] refactor: bubble menu #8138

apps/web/ce/hooks/use-editor-flagging.ts

@@ -19,6 +19,7 @@ export type TEditorFlaggingHookReturnType = {
 
 export type TEditorFlaggingHookProps = {
   workspaceSlug: string;
+  projectId?: string;
   storeType?: EPageStoreType;
 };
 

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({

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();

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({

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({

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

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}

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}

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}

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}

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) {