[WIKI-786] refactor: bubble menu #8138

This commit is contained in:
Aaryan Khandelwal 2025-11-21 12:49:30 +05:30 committed by GitHub
parent 8307badae5
commit 9611cd1e73
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 45 additions and 12 deletions

View file

@ -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}

View file

@ -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}

View file

@ -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}

View file

@ -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}

View file

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