[WIKI-786] refactor: bubble menu #8138
This commit is contained in:
parent
8307badae5
commit
9611cd1e73
11 changed files with 45 additions and 12 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue