From a0fdddb35e8f8913eaf96e42873f1cc8a3b1dd51 Mon Sep 17 00:00:00 2001 From: Yousef Date: Wed, 20 Nov 2024 17:52:39 +0100 Subject: [PATCH] feature: expose floatingOptions on react elements --- .../src/components/FilePanel/FilePanelController.tsx | 4 +++- .../FormattingToolbar/FormattingToolbarController.tsx | 4 +++- .../components/LinkToolbar/LinkToolbarController.tsx | 4 +++- .../src/components/SideMenu/SideMenuController.tsx | 3 +++ .../GridSuggestionMenuController.tsx | 5 ++++- .../SuggestionMenu/SuggestionMenuController.tsx | 11 ++++++++++- 6 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/FilePanel/FilePanelController.tsx b/packages/react/src/components/FilePanel/FilePanelController.tsx index 20253f8412..bf83cb108c 100644 --- a/packages/react/src/components/FilePanel/FilePanelController.tsx +++ b/packages/react/src/components/FilePanel/FilePanelController.tsx @@ -6,7 +6,7 @@ import { InlineContentSchema, StyleSchema, } from "@blocknote/core"; -import { flip, offset } from "@floating-ui/react"; +import { UseFloatingOptions, flip, offset } from "@floating-ui/react"; import { FC } from "react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; @@ -21,6 +21,7 @@ export const FilePanelController = < S extends StyleSchema = DefaultStyleSchema >(props: { filePanel?: FC>; + floatingOptions?: Partial; }) => { const editor = useBlockNoteEditor(); @@ -47,6 +48,7 @@ export const FilePanelController = < editor.focus(); } }, + ...props.floatingOptions, } ); diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx index c0781896d6..f4bab49b83 100644 --- a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx +++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx @@ -4,7 +4,7 @@ import { InlineContentSchema, StyleSchema, } from "@blocknote/core"; -import { flip, offset } from "@floating-ui/react"; +import { UseFloatingOptions, flip, offset } from "@floating-ui/react"; import { FC, useMemo, useRef, useState } from "react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; @@ -32,6 +32,7 @@ const textAlignmentToPlacement = ( export const FormattingToolbarController = (props: { formattingToolbar?: FC; + floatingOptions?: Partial; }) => { const divRef = useRef(null); @@ -87,6 +88,7 @@ export const FormattingToolbarController = (props: { editor.focus(); } }, + ...props.floatingOptions, } ); diff --git a/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx b/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx index 277d188125..f607d31369 100644 --- a/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx +++ b/packages/react/src/components/LinkToolbar/LinkToolbarController.tsx @@ -6,7 +6,7 @@ import { InlineContentSchema, StyleSchema, } from "@blocknote/core"; -import { flip, offset } from "@floating-ui/react"; +import { UseFloatingOptions, flip, offset } from "@floating-ui/react"; import { FC } from "react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; @@ -21,6 +21,7 @@ export const LinkToolbarController = < S extends StyleSchema = DefaultStyleSchema >(props: { linkToolbar?: FC; + floatingOptions?: Partial; }) => { const editor = useBlockNoteEditor(); @@ -47,6 +48,7 @@ export const LinkToolbarController = < editor.focus(); } }, + ...props.floatingOptions, } ); diff --git a/packages/react/src/components/SideMenu/SideMenuController.tsx b/packages/react/src/components/SideMenu/SideMenuController.tsx index 601f3e20d7..7c81769ebf 100644 --- a/packages/react/src/components/SideMenu/SideMenuController.tsx +++ b/packages/react/src/components/SideMenu/SideMenuController.tsx @@ -8,6 +8,7 @@ import { } from "@blocknote/core"; import { FC } from "react"; +import { UseFloatingOptions } from "@floating-ui/react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js"; import { useUIPluginState } from "../../hooks/useUIPluginState.js"; @@ -20,6 +21,7 @@ export const SideMenuController = < S extends StyleSchema = DefaultStyleSchema >(props: { sideMenu?: FC>; + floatingOptions?: Partial; }) => { const editor = useBlockNoteEditor(); @@ -39,6 +41,7 @@ export const SideMenuController = < 1000, { placement: "left-start", + ...props.floatingOptions, } ); diff --git a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx index 9006982ea4..6a508d7221 100644 --- a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx +++ b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx @@ -4,7 +4,7 @@ import { StyleSchema, SuggestionMenuState, } from "@blocknote/core"; -import { flip, offset, size } from "@floating-ui/react"; +import { flip, offset, size, UseFloatingOptions } from "@floating-ui/react"; import { FC, useCallback, useMemo } from "react"; import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js"; @@ -35,6 +35,7 @@ export function GridSuggestionMenuController< getItems?: GetItemsType; columns: number; minQueryLength?: number; + floatingOptions?: Partial; } & (ItemType extends DefaultReactGridSuggestionItem ? { // can be undefined @@ -64,6 +65,7 @@ export function GridSuggestionMenuController< minQueryLength, onItemClick, getItems, + floatingOptions, } = props; const onItemClickOrDefault = useMemo(() => { @@ -124,6 +126,7 @@ export function GridSuggestionMenuController< editor.suggestionMenus.closeMenu(); } }, + ...floatingOptions, } ); diff --git a/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx index 79e2006e4b..0eaa35e95b 100644 --- a/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx +++ b/packages/react/src/components/SuggestionMenu/SuggestionMenuController.tsx @@ -5,7 +5,13 @@ import { SuggestionMenuState, filterSuggestionItems, } from "@blocknote/core"; -import { flip, offset, shift, size } from "@floating-ui/react"; +import { + UseFloatingOptions, + flip, + offset, + shift, + size, +} from "@floating-ui/react"; import { FC, useCallback, useMemo } from "react"; import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js"; @@ -32,6 +38,7 @@ export function SuggestionMenuController< triggerCharacter: string; getItems?: GetItemsType; minQueryLength?: number; + floatingOptions?: Partial; } & (ItemType extends DefaultReactSuggestionItem ? { // can be undefined @@ -60,6 +67,7 @@ export function SuggestionMenuController< minQueryLength, onItemClick, getItems, + floatingOptions, } = props; const onItemClickOrDefault = useMemo(() => { @@ -124,6 +132,7 @@ export function SuggestionMenuController< editor.suggestionMenus.closeMenu(); } }, + ...floatingOptions, } );